/* respiraapp.fit — hoja única para todo el sitio. Presupuesto: ≤20KB sin comprimir.
   Tokens generados desde src/_data/webTokens.js (fuente única; /estilo muestra
   los ratios de contraste calculados de cada par documentado allí). */
@layer reset, tokens, base, layout, components, utilities;

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans-latin-wght-italic.woff2") format("woff2-variations");
  font-weight: 100 700;
  font-style: italic;
  font-display: swap;
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; }
  img, svg { display: block; max-inline-size: 100%; block-size: auto; }
  table { border-collapse: collapse; }
  h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
  button { font: inherit; }
}

@layer tokens {
  
  :root {
    
    --bg: #FAF8F5;
    --surface: #FFFFFF;
    --surface-elevated: #F5F2ED;
    --border: #E8E2DA;
    --divider: #F0EBE3;
    --text-primary: #2D3436;
    --text-secondary: #636E72;
    --text-muted: #B2BEC3;
    --primary: #7C9A82;
    --primary-dark: #5A7A60;
    --primary-light: #9BB5A0;
    --level-low: #7C9A82;
    --level-moderate: #E6B566;
    --level-high: #D4845A;
    --level-very-high: #C0564B;
    --level-extreme: #8E6B8A;
    --fill-low: #85A18B;
    --ink-low: #2D3436;
    --fill-moderate: #E6B566;
    --ink-moderate: #2D3436;
    --fill-high: #D5885F;
    --ink-high: #2D3436;
    --fill-very-high: #BE554A;
    --ink-very-high: #FFFFFF;
    --fill-extreme: #8E6B8A;
    --ink-extreme: #FFFFFF;
    --aqi-good: #7C9A82;
    --aqi-acceptable: #A3BE8C;
    --aqi-moderate: #E6B566;
    --aqi-poor: #D4845A;
    --aqi-bad: #C0564B;
    --aqi-very-bad: #8E6B8A;
  
    /* Escala 4px: 4 8 12 16 24 32 48 64 96 128 */
    --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem;
    --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem;
    /* Escala tipográfica fluida, razón ~1.25 móvil / ~1.333 escritorio */
    --fs--1: clamp(.8rem, .78rem + .12vw, .875rem);
    --fs-0: clamp(1rem, .96rem + .2vw, 1.0625rem);
    --fs-1: clamp(1.25rem, 1.17rem + .4vw, 1.4375rem);
    --fs-2: clamp(1.5625rem, 1.42rem + .7vw, 1.9375rem);
    --fs-3: clamp(1.9375rem, 1.71rem + 1.15vw, 2.5625rem);
    --fs-4: clamp(2.4375rem, 2.06rem + 1.9vw, 3.4375rem);
    --fs-5: clamp(3rem, 2.42rem + 2.9vw, 4.5rem);
    --font-display: "Fraunces", Georgia, serif;
    --font-body: "IBM Plex Sans", system-ui, sans-serif;
    --radius-s: 6px;
    --radius-m: 10px;
    --shadow: 0 1px 3px rgba(45, 52, 54, .06);
    color-scheme: light;
  }
  :root[data-theme="dark"] {
    
    --bg: #16181A;
    --surface: #1E2124;
    --surface-elevated: #24282B;
    --border: #2E3336;
    --divider: #272B2E;
    --text-primary: #ECEAE6;
    --text-secondary: #A8B0B3;
    --text-muted: #6E7679;
    --primary: #9BB5A0;
    --primary-dark: #7C9A82;
    --primary-light: #B5CBB9;
    --level-low: #7C9A82;
    --level-moderate: #E6B566;
    --level-high: #D4845A;
    --level-very-high: #C0564B;
    --level-extreme: #8E6B8A;
    --fill-low: #7C9A82;
    --ink-low: #16181A;
    --fill-moderate: #E6B566;
    --ink-moderate: #16181A;
    --fill-high: #D4845A;
    --ink-high: #16181A;
    --fill-very-high: #C56459;
    --ink-very-high: #16181A;
    --fill-extreme: #977793;
    --ink-extreme: #16181A;
    --aqi-good: #7C9A82;
    --aqi-acceptable: #A3BE8C;
    --aqi-moderate: #E6B566;
    --aqi-poor: #D4845A;
    --aqi-bad: #C0564B;
    --aqi-very-bad: #8E6B8A;
  
    --shadow: 0 1px 3px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      
    --bg: #16181A;
    --surface: #1E2124;
    --surface-elevated: #24282B;
    --border: #2E3336;
    --divider: #272B2E;
    --text-primary: #ECEAE6;
    --text-secondary: #A8B0B3;
    --text-muted: #6E7679;
    --primary: #9BB5A0;
    --primary-dark: #7C9A82;
    --primary-light: #B5CBB9;
    --level-low: #7C9A82;
    --level-moderate: #E6B566;
    --level-high: #D4845A;
    --level-very-high: #C0564B;
    --level-extreme: #8E6B8A;
    --fill-low: #7C9A82;
    --ink-low: #16181A;
    --fill-moderate: #E6B566;
    --ink-moderate: #16181A;
    --fill-high: #D4845A;
    --ink-high: #16181A;
    --fill-very-high: #C56459;
    --ink-very-high: #16181A;
    --fill-extreme: #977793;
    --ink-extreme: #16181A;
    --aqi-good: #7C9A82;
    --aqi-acceptable: #A3BE8C;
    --aqi-moderate: #E6B566;
    --aqi-poor: #D4845A;
    --aqi-bad: #C0564B;
    --aqi-very-bad: #8E6B8A;
  
      --shadow: 0 1px 3px rgba(0, 0, 0, .3);
      color-scheme: dark;
    }
  }
}

@layer base {
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--font-body);
    font-size: var(--fs-0);
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
  }
  h1, h2 {
    font-family: var(--font-display);
    font-weight: 560;
    line-height: 1.15;
    text-wrap: balance;
  }
  h1 { font-size: var(--fs-3); }
  h2 { font-size: var(--fs-2); }
  h3 { font-size: var(--fs-1); font-weight: 600; line-height: 1.3; }
  p { text-wrap: pretty; }
  a { color: var(--primary-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
  a:hover { text-decoration-thickness: 2px; }
  :root[data-theme="dark"] a { color: var(--primary); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) a { color: var(--primary); } }
  :focus-visible { outline: 2px solid var(--primary-dark); outline-offset: 2px; border-radius: 2px; }
  ::selection { background: var(--primary-light); color: #2D3436; }
  .num, td[data-num], .fc-val { font-variant-numeric: tabular-nums; }
  time { font-variant-numeric: tabular-nums; }
}

/* Fuera de @layer a propósito: lo no-layered gana a cualquier layer,
   así el reset de movimiento se impone sin usar !important. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none; animation: none; }
  html { scroll-behavior: auto; }
}

@layer layout {
  .page {
    display: grid;
    grid-template-columns:
      [full-start] minmax(var(--sp-4), 1fr)
      [wide-start] minmax(0, 9rem)
      [content-start] min(68ch, 100% - var(--sp-4) * 2) [content-end]
      minmax(0, 9rem) [wide-end]
      minmax(var(--sp-4), 1fr) [full-end];
    row-gap: var(--sp-6);
    padding-block: var(--sp-6) var(--sp-8);
  }
  .page > * { grid-column: content; }
  .page > .wide { grid-column: wide; }
  .page > .full { grid-column: full; }
  .section { padding-block-start: var(--sp-6); border-block-start: 1px solid var(--divider); }
  .section > h2 { margin-block-end: var(--sp-4); }
  .flow > * + * { margin-block-start: var(--sp-4); }
  .cluster { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
}

@layer components {
  /* Cabecera y pie */
  .site-header {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    border-block-end: 1px solid var(--border);
    background: var(--bg);
  }
  .brand { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-1); color: var(--text-primary); text-decoration: none; }
  .brand-mark { border-radius: 7px; }
  .site-header nav { display: flex; gap: var(--sp-4); font-size: var(--fs--1); }
  .site-footer { border-block-start: 1px solid var(--border); padding: var(--sp-6) var(--sp-4); font-size: var(--fs--1); color: var(--text-secondary); display: grid; gap: var(--sp-3); justify-items: center; text-align: center; }
  .breadcrumbs { font-size: var(--fs--1); color: var(--text-secondary); }
  .breadcrumbs a { color: inherit; }

  /* Héroe de datos: el dato manda */
  .hero-data { display: grid; gap: var(--sp-4); }
  .hero-data .date-line { color: var(--text-secondary); font-size: var(--fs--1); }
  .nivel-hero {
    display: inline-flex; flex-direction: column; align-items: start; gap: var(--sp-1);
    padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-m);
    inline-size: fit-content;
  }
  .nivel-hero .word { font-size: var(--fs-2); font-family: var(--font-display); font-weight: 620; line-height: 1.1; }
  .nivel-hero .detail { font-size: var(--fs--1); }
  .lv-low { background: var(--fill-low); color: var(--ink-low); }
  .lv-moderate { background: var(--fill-moderate); color: var(--ink-moderate); }
  .lv-high { background: var(--fill-high); color: var(--ink-high); }
  .lv-very-high { background: var(--fill-very-high); color: var(--ink-very-high); }
  .lv-extreme { background: var(--fill-extreme); color: var(--ink-extreme); }
  
  /* Badge inline: fondo tintado, no relleno saturado */
  .nivel-badge {
    display: inline-flex; align-items: baseline; gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-s);
    border-inline-start: 3px solid var(--_lv);
    background: color-mix(in oklab, var(--_lv) 14%, var(--surface));
    color: var(--text-primary);
    font-size: var(--fs--1);
  }
  .bd-low { --_lv: var(--level-low); }
  .bd-moderate { --_lv: var(--level-moderate); }
  .bd-high { --_lv: var(--level-high); }
  .bd-very-high { --_lv: var(--level-very-high); }
  .bd-extreme { --_lv: var(--level-extreme); }
  
  .tag-estimacion {
    display: inline-block; padding: 1px var(--sp-2);
    border: 1px solid var(--border); border-radius: var(--radius-s);
    background: var(--surface-elevated); color: var(--text-secondary);
    font-size: .75rem; letter-spacing: .02em;
  }
  :root[data-theme="dark"] .tag-estimacion { background: var(--surface); }

  /* Rejilla de pólenes (container query: vive en home y ciudad) */
  .pollen-grid-wrap { container-type: inline-size; }
  .pollen-grid { display: grid; gap: var(--sp-2); grid-template-columns: repeat(2, 1fr); }
  @container (min-width: 34rem) { .pollen-grid { grid-template-columns: repeat(3, 1fr); } }
  .pollen-cell { display: grid; gap: 2px; padding: var(--sp-3); border-radius: var(--radius-s); border: 1px solid var(--divider); border-inline-start: 3px solid var(--_lv); background: color-mix(in oklab, var(--_lv) 10%, var(--surface)); }
  .pollen-cell .name { font-size: var(--fs--1); color: var(--text-secondary); }
  .pollen-cell .val { font-size: var(--fs-1); font-weight: 600; font-variant-numeric: tabular-nums; }
  .pollen-cell .val small { font-size: var(--fs--1); font-weight: 400; color: var(--text-secondary); }

  /* Filas de polen (estimados) */
  .pollen-rows { display: grid; }
  .pollen-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding-block: var(--sp-3); border-block-end: 1px solid var(--divider); }
  .pollen-row .name { flex: 1 1 10rem; font-weight: 500; }
  .pollen-row .val { font-variant-numeric: tabular-nums; color: var(--text-secondary); }

  /* Previsión 7 días: tabla real presentada como tira */
  .scroller { overflow-x: auto; scrollbar-color: var(--primary-light) transparent;
    background:
      linear-gradient(90deg, var(--bg) 30%, transparent) 0 0 / 3rem 100%,
      linear-gradient(270deg, var(--bg) 30%, transparent) 100% 0 / 3rem 100%,
      radial-gradient(farthest-side at 0 50%, var(--shadow-c, rgba(45,52,54,.12)), transparent) 0 0 / 1rem 100%,
      radial-gradient(farthest-side at 100% 50%, var(--shadow-c, rgba(45,52,54,.12)), transparent) 100% 0 / 1rem 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  .scroller::-webkit-scrollbar { block-size: 8px; }
  .scroller::-webkit-scrollbar-thumb { background: var(--primary-light); border-radius: 4px; }
  .forecast { inline-size: 100%; min-inline-size: 34rem; table-layout: fixed; }
  .forecast caption { text-align: start; font-size: var(--fs--1); color: var(--text-secondary); margin-block-end: var(--sp-2); }
  .forecast th { font-size: var(--fs--1); font-weight: 500; color: var(--text-secondary); padding-block-end: var(--sp-2); }
  .forecast td { text-align: center; padding: var(--sp-1); }
  .forecast .fc-date { font-variant-numeric: tabular-nums; font-size: var(--fs--1); }
  .fc-bar { block-size: 56px; display: flex; align-items: end; justify-content: center; }
  .fc-bar i { inline-size: 14px; border-radius: 3px 3px 0 0; background: var(--_lv); min-block-size: 4px; }
  .fc-word { font-size: .75rem; color: var(--text-secondary); }
  .fc-val { font-size: var(--fs--1); }

  /* Heatmap calendario polínico */
  .heatmap { min-inline-size: 40rem; inline-size: 100%; }
  .heatmap th, .heatmap td { padding: 2px; font-size: .75rem; }
  .heatmap thead th { font-weight: 500; color: var(--text-secondary); }
  .heatmap [scope="row"] { position: sticky; inset-inline-start: 0; background: var(--bg); text-align: start; font-weight: 500; padding-inline-end: var(--sp-3); white-space: nowrap; }
  .hm-cell { block-size: 26px; min-inline-size: 26px; border-radius: 3px; background: color-mix(in oklab, var(--_lv, transparent) 82%, var(--surface)); }
  .hm-none { background: var(--surface-elevated); }
  .heatmap .hm-now { outline: 1px solid var(--text-secondary); outline-offset: -1px; }
  .heatmap th[aria-current] { color: var(--text-primary); font-weight: 700; }

  /* Calidad del aire */
  .aqi-block { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); align-items: end; }
  .aqi-main .val { font-family: var(--font-display); font-size: var(--fs-4); font-weight: 560; line-height: 1; font-variant-numeric: tabular-nums; }
  .aqi-main .word { font-weight: 600; }
  .dot { display: inline-block; inline-size: .65em; block-size: .65em; border-radius: 50%; }
  .aqi-stats { display: flex; gap: var(--sp-5); font-variant-numeric: tabular-nums; }
  .aqi-stats .lbl { font-size: var(--fs--1); color: var(--text-secondary); display: block; }

  /* Línea de actualización y fuentes */
  .update-line { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: var(--fs--1); color: var(--text-secondary); }

  /* Botones y CTA */
  .btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-s); border: 1px solid var(--border); color: var(--text-primary); text-decoration: none; font-weight: 500; transition: background .15s ease-out; }
  .btn:hover { background: var(--surface-elevated); }
  .appstore-badge { transition: opacity .15s ease-out; }
  .appstore-badge:hover { opacity: .85; }
  .cta-app { display: grid; gap: var(--sp-3); justify-items: start; padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface); box-shadow: var(--shadow); }

  /* FAQ */
  .faq details { border-block-end: 1px solid var(--divider); padding-block: var(--sp-3); }
  .faq summary { cursor: pointer; font-weight: 500; }
  .faq details > p { margin-block-start: var(--sp-2); color: var(--text-secondary); }

  /* Icono Lucide inline */
  .icon { inline-size: 1.1em; block-size: 1.1em; stroke-width: 1.5; vertical-align: -.18em; }

  /* Lista de enlaces internos (ciudades) */
  .link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--sp-2); list-style: none; padding: 0; }
  .link-grid a { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-s); text-decoration: none; background: var(--surface); transition: background .15s ease-out; }
  .link-grid .nivel-badge { margin-inline-start: auto; }
  .link-grid a:hover { background: var(--surface-elevated); }
}

@layer utilities {
  .visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .text-secondary { color: var(--text-secondary); }
  .small { font-size: var(--fs--1); }
}

@media print {
  .site-header nav, .cta-app, .appstore-badge, .site-footer nav, .btn { display: none; }
  body { background: #fff; color: #000; }
  .page { display: block; }
  .scroller { overflow: visible; background: none; }
  .heatmap [scope="row"] { position: static; }
  .hm-cell, .nivel-hero, .nivel-badge, .pollen-cell, .fc-bar i { print-color-adjust: exact; }
  a { color: inherit; text-decoration: none; }
}