/* ==========================================================================
   Instituto Anima · Hoja de estilos compartida (todas las páginas)

   Índice
    0. Fuentes autoalojadas
    1. Tokens de diseño ← colores, tipografía, espaciados, radios y sombras
    2. Base, accesibilidad y utilidades
    3. Fondo: cielo y nubes
    4. Encabezado y menú
    5. Hero (portada) y hero de subpágina
    6. Botones
    7. Bloque translúcido (.panel) y secciones
    8. Componentes de contenido (checks pastel, etiquetas, tarjetas,
       pasos/timeline, selector tipo switch, acordeón, cierre)
    9. Pie de página
   10. Página Diagnóstico (precio, ritmo, calculadora, botón fijo)
   11. Páginas Tests y Test de orientación
   12. Páginas Recursos y Guía
   13. Página Directorio de terapeutas y perfil
   14. Páginas simples: aviso de privacidad, 404, avisos sin JavaScript
   15. Modo de alto contraste (forced-colors)
   16. Movimiento reducido

   Cómo usar cada componente: ver DESIGN-SYSTEM.md
   ========================================================================== */


/* ==========================================================================
   0. Fuentes autoalojadas (mismos archivos que Google Fonts, servidos desde
      /fonts para cargar más rápido y sin enviar datos a terceros)
   ========================================================================== */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/dm-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/dm-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/dm-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/dm-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/dm-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/dm-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/dm-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/dm-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/atkinson-hyperlegible-next-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/atkinson-hyperlegible-next-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }


/* ==========================================================================
   1. Tokens de diseño
   Único lugar donde se definen colores, tipografía, espaciados, radios,
   sombras y capas. El resto de la hoja solo usa var(--…).
   ========================================================================== */
:root {
  /* ---- Color · marca ---- */
  --sky-top: #BCDCF4;          /* parte alta del cielo · theme-color */
  --base: #F2F5FC;             /* fondo de página, hojas y diálogos */
  --butterfly: #4F9FD9;        /* azul mariposa: viñetas y detalles */
  --blue-deep: #1F5F99;        /* acción: botones, enlaces, foco · blanco encima 6.7:1 */
  --blue-deeper: #194F80;      /* hover de la acción */
  --heading: #1E3A6E;          /* títulos · 7.8:1 sobre --sky-top, 10.2:1 sobre --base */
  --ink: #0E2A47;              /* texto principal · ≥ 10.9:1 sobre todo el cielo */
  --ink-2: #34506B;            /* texto secundario · ≥ 6.6:1 */
  --white: #FFFFFF;

  /* ---- Color · acentos pastel (los del ∞). El texto encima siempre es --heading (AA) ---- */
  --sky-soft: #C4E4F2;
  --lilac-soft: #E7D6EF;
  --pink-soft: #EADCF5;
  --mint-soft: #CBE7CA;
  --butter-soft: #FBE6AC;

  /* ---- Color · detalles ---- */
  --heart: #7FB8E6;            /* corazones decorativos */
  --star: #EBA94C;             /* estrellas de reseñas */
  --frame-blue: #AFC7E3;       /* marco azul de la pared de cuadros */
  --frame-mat: #FBF8F2;        /* paspartú de los cuadros */
  --frame-art: #DCEBFA;        /* fondo del cuadro con la mariposa */
  --frame-wood: linear-gradient(135deg, #E6D6BC, #D9C5A5 55%, #E2D1B5);
  --sky: linear-gradient(180deg, #BCDCF4 0%, #C9E1F6 40%, #D6E7F8 74%, #E3EEFB 100%);
  --inf: linear-gradient(90deg, #E8837E 0%, #F2B35E 20%, #E6CF5C 40%, #7CC49A 60%, #6FA8E8 80%, #A58AD8 100%);

  /* ---- Canales RGB para transparencias: rgb(var(--heading-rgb) / .12) ---- */
  --heading-rgb: 30 58 110;
  --ink-rgb: 14 42 71;
  --blue-rgb: 31 95 153;
  --white-rgb: 255 255 255;
  --base-rgb: 242 245 252;
  --sky-soft-rgb: 196 228 242;
  --glass-rgb: 226 238 251;    /* encabezado al hacer scroll */
  --wood-rgb: 122 94 56;
  --black-rgb: 0 0 0;
  --cloud-peach-rgb: 247 228 222;
  --cloud-lilac-rgb: 226 232 250;
  --cloud-mist-rgb: 238 242 252;

  /* ---- Color · usos frecuentes ---- */
  --line: rgb(var(--ink-rgb) / .16);              /* líneas del menú y de los íconos de confianza */
  --divider: rgb(var(--heading-rgb) / .14);       /* separadores entre filas */
  --border-soft: rgb(var(--heading-rgb) / .12);   /* borde de bloques y tarjetas */
  --border: rgb(var(--heading-rgb) / .2);         /* borde de campos y chips */
  --border-action: rgb(var(--blue-rgb) / .3);     /* borde de botón secundario */
  --surface: rgb(var(--white-rgb) / .5);          /* bloque translúcido */
  --fill-muted: rgb(var(--heading-rgb) / .08);    /* fondos neutros: "Próximamente", botón cerrar */
  --underline: rgb(var(--blue-rgb) / .35);        /* subrayado suave de enlaces */
  --scrim: rgb(var(--ink-rgb) / .5);              /* fondo detrás de diálogos y hojas */

  /* ---- Tipografía ---- */
  --font-head: "DM Sans", system-ui, sans-serif;                                            /* títulos, botones, interfaz */
  --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif; /* texto corrido */
  /* Pesos disponibles: DM Sans 400 · 500 · 700 · 800 — Atkinson 400 · 700 */
  --fs-11: 11px;  --fs-12: 12px;  --fs-13: 13px;  --fs-14: 14px;  --fs-15: 15px;  --fs-16: 16px;
  --fs-17: 17px;  --fs-18: 18px;  --fs-20: 20px;  --fs-22: 22px;  --fs-24: 24px;  --fs-26: 26px;
  --fs-28: 28px;  --fs-30: 30px;  --fs-34: 34px;  --fs-36: 36px;  --fs-38: 38px;  --fs-40: 40px;
  /* Tamaños fluidos (crecen con la pantalla) */
  --fs-hero: clamp(52px, 6.2vw, 74px);         /* "Instituto Anima" y títulos de hero en escritorio */
  --fs-page-title: clamp(28px, 7vw, 44px);     /* título de página sin hero (directorio, guía) */
  --fs-feature-title: clamp(26px, 6.4vw, 34px);
  --fs-price-xl: clamp(40px, 11vw, 56px);
  --fs-price-lg: clamp(34px, 9vw, 44px);
  --fs-price-md: clamp(28px, 7vw, 38px);
  --fs-quote: clamp(18px, 4.6vw, 22px);
  --fs-step-num: clamp(20px, 6vw, 28px);
  --fs-step-label: clamp(12px, 3.3vw, 14px);
  /* Interlineados */
  --lh-none: 1;  --lh-tight: 1.1;  --lh-snug: 1.25;  --lh-ui: 1.3;  --lh-normal: 1.45;  --lh-text: 1.6;  --lh-relaxed: 1.7;
  /* Espaciado entre letras */
  --ls-tight: -.005em;  --ls-tag: .04em;  --ls-label: .08em;  --ls-caps: .12em;

  /* ---- Espaciado (rejilla de 2 px; preferir múltiplos de 4) ---- */
  --space-2: 2px;   --space-4: 4px;   --space-6: 6px;   --space-8: 8px;   --space-10: 10px;
  --space-12: 12px; --space-14: 14px; --space-16: 16px; --space-18: 18px; --space-20: 20px;
  --space-22: 22px; --space-24: 24px; --space-26: 26px; --space-28: 28px; --space-30: 30px;
  --space-32: 32px; --space-34: 34px; --space-36: 36px; --space-38: 38px; --space-40: 40px;
  --space-44: 44px; --space-48: 48px; --space-52: 52px; --space-56: 56px; --space-60: 60px;
  --space-64: 64px; --space-88: 88px; --space-120: 120px;
  /* Ritmo de página */
  --gutter: 22px;              /* margen lateral */
  --header-h: 64px;            /* alto del encabezado */
  --sec-y: 39px;               /* espacio vertical entre secciones (≈ 2× de gap) */
  --content-w: 1120px;         /* ancho máximo del contenido */
  --narrow-w: 820px;           /* ancho de lectura cómoda */
  --touch: 44px;               /* tamaño mínimo de área táctil */

  /* ---- Radios ---- */
  --radius-xs: 4px;            /* barras y detalles */
  --radius-sm: 6px;            /* casillas, foco de acordeón */
  --radius-md: 8px;            /* etiquetas y portadas */
  --radius: 10px;              /* botones, campos */
  --radius-lg: 12px;           /* opciones, selectores */
  --radius-xl: 14px;           /* cajas internas */
  --radius-2xl: 16px;          /* bloques y tarjetas */
  --radius-3xl: 18px;          /* tarjetas destacadas */
  --radius-4xl: 20px;
  --radius-sheet: 22px;        /* hoja inferior (filtros en móvil) */
  --radius-dialog: 24px;       /* diálogo de perfil */
  --radius-pill: 999px;
  --radius-round: 50%;

  /* ---- Sombras ---- */
  --shadow-xs: 0 2px 8px rgb(var(--heading-rgb) / .1);                       /* botones redondos (redes) */
  --shadow-xs-hover: 0 3px 12px rgb(var(--heading-rgb) / .16);
  --shadow-sm: 0 14px 30px -22px rgb(var(--ink-rgb) / .4);                   /* bloques y tarjetas */
  --shadow-md: 0 18px 40px -24px rgb(var(--ink-rgb) / .5);                   /* tarjetas destacadas */
  --shadow-lg: 0 26px 46px -24px rgb(var(--ink-rgb) / .5);                   /* tarjeta elevada (hover) */
  --shadow-header: 0 1px 0 rgb(var(--heading-rgb) / .1);
  --shadow-cover: 0 1px 1px rgb(var(--ink-rgb) / .06), 0 30px 54px -26px rgb(var(--ink-rgb) / .5), 0 10px 22px -16px rgb(var(--ink-rgb) / .34);  /* portadas */
  --shadow-frame: 0 1px 1px rgb(var(--ink-rgb) / .05), 0 16px 28px -18px rgb(var(--ink-rgb) / .32);  /* cuadros colgados */
  --shadow-inset: inset 0 1px 2px rgb(var(--ink-rgb) / .07);
  --shadow-float: 0 12px 26px -12px rgb(var(--ink-rgb) / .55);               /* botón fijo inferior */
  --shadow-sheet: 0 -16px 50px -18px rgb(var(--ink-rgb) / .4);               /* hojas y diálogos desde abajo */
  --shadow-btn-float: 0 6px 18px -8px rgb(var(--ink-rgb) / .5);              /* botón cerrar flotante */
  --shadow-thumb: 0 6px 14px -10px rgb(var(--ink-rgb) / .5);
  --shadow-input: 0 10px 26px -20px rgb(var(--ink-rgb) / .5);
  --shadow-avatar: inset 0 0 0 1px rgb(var(--heading-rgb) / .1), 0 6px 14px -8px rgb(var(--ink-rgb) / .4);
  --shadow-seg: 0 2px 6px rgb(var(--heading-rgb) / .16), inset 0 0 0 1px rgb(var(--white-rgb) / .5);
  --shadow-lightbox: 0 30px 80px -24px rgb(var(--black-rgb) / .65);
  --shadow-lightbox-btn: 0 8px 20px -8px rgb(var(--black-rgb) / .5);
  --ring-hairline: 0 0 0 1px rgb(var(--ink-rgb) / .08);
  --ring-soft: inset 0 0 0 1px rgb(var(--heading-rgb) / .1);
  --ring-selected: inset 0 0 0 1px rgb(var(--blue-rgb) / .3);
  --ring-focus: 0 0 0 3px rgb(var(--blue-rgb) / .16);

  /* ---- Capas (z-index) ---- */
  --z-header: 20;  --z-sticky: 30;  --z-lightbox: 60;  --z-backdrop: 69;  --z-sheet: 70;  --z-dialog: 80;  --z-skip: 100;

  /* ---- Movimiento ---- */
  --ease: cubic-bezier(.33, 0, .2, 1);
}
@media (min-width: 720px) { :root { --gutter: 40px; --header-h: 84px; --sec-y: 64px; } }


/* ==========================================================================
   2. Base, accesibilidad y utilidades
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--base); color: var(--ink);
  font: 400 var(--fs-17)/var(--lh-relaxed) var(--font-body);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: normal;
  font-feature-settings: "zero" 0;
}
img { max-width: 100%; }
a { color: var(--blue-deep); text-underline-offset: 3px; }
a:hover { color: var(--blue-deeper); }
:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 3px; border-radius: var(--radius-xs); }
/* Elementos que reciben foco por código (títulos, diálogos): sin anillo */
[tabindex="-1"]:focus { outline: none; }

.num { font-family: var(--font-head); font-feature-settings: "tnum" 1; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip {
  position: absolute; left: var(--space-12); top: -60px; z-index: var(--z-skip);
  background: var(--ink); color: var(--white); padding: var(--space-10) var(--space-16); border-radius: var(--radius);
}
.skip:focus { top: var(--space-12); color: var(--white); }


/* ==========================================================================
   3. Fondo: un solo cielo fijo para todo el sitio
   ========================================================================== */
.sky {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background: var(--sky);
}
/* Nubes: tres capas fijas de degradados suaves, sin movimiento.
   Cada capa repite su dibujo a lo ancho cada "background-size" px. */
.clouds { position: absolute; inset: -8% 0; background-repeat: repeat-x; }

.clouds--back {
  opacity: .4; background-size: 900px 100%;
  background-image:
    radial-gradient(150px 32px at 18% 14%, rgb(var(--white-rgb) / .85), rgb(var(--white-rgb) / .35) 45%, rgb(var(--white-rgb) / 0)),
    radial-gradient(110px 24px at 26% 17%, rgb(var(--white-rgb) / .7), rgb(var(--white-rgb) / 0)),
    radial-gradient(180px 38px at 64% 24%, rgb(var(--white-rgb) / .8), rgb(var(--white-rgb) / .3) 45%, rgb(var(--white-rgb) / 0)),
    radial-gradient(120px 26px at 86% 10%, rgb(var(--white-rgb) / .65), rgb(var(--white-rgb) / 0));
}
.clouds--mid {
  opacity: .52; background-size: 1300px 100%;
  background-image:
    radial-gradient(240px 54px at 14% 42%, rgb(var(--white-rgb) / .85), rgb(var(--cloud-mist-rgb) / .4) 50%, rgb(var(--white-rgb) / 0)),
    radial-gradient(90px 22px at 20% 46%, rgb(var(--cloud-peach-rgb) / .35), rgb(var(--cloud-peach-rgb) / 0)),
    radial-gradient(280px 58px at 58% 52%, rgb(var(--white-rgb) / .8), rgb(var(--cloud-lilac-rgb) / .4) 50%, rgb(var(--white-rgb) / 0)),
    radial-gradient(200px 44px at 86% 34%, rgb(var(--white-rgb) / .7), rgb(var(--white-rgb) / 0));
}
.clouds--front {
  opacity: .58; background-size: 1800px 100%;
  background-image:
    radial-gradient(380px 78px at 16% 78%, rgb(var(--white-rgb) / .85), rgb(var(--cloud-mist-rgb) / .4) 50%, rgb(var(--white-rgb) / 0)),
    radial-gradient(140px 30px at 24% 82%, rgb(var(--cloud-peach-rgb) / .3), rgb(var(--cloud-peach-rgb) / 0)),
    radial-gradient(420px 88px at 62% 88%, rgb(var(--white-rgb) / .8), rgb(var(--cloud-lilac-rgb) / .45) 50%, rgb(var(--white-rgb) / 0)),
    radial-gradient(120px 26px at 70% 91%, rgb(var(--cloud-peach-rgb) / .28), rgb(var(--cloud-peach-rgb) / 0)),
    radial-gradient(240px 48px at 84% 22%, rgb(var(--white-rgb) / .5), rgb(var(--white-rgb) / 0));
}


/* ==========================================================================
   4. Encabezado y menú
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header); padding-top: env(safe-area-inset-top);
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease), backdrop-filter .3s var(--ease);
}
.site-header.is-scrolled {
  background: rgb(var(--glass-rgb) / .72);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-header);
}
.site-header__row {
  max-width: 1320px; margin: 0 auto; height: var(--header-h);
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-24);
}
.brand { flex-shrink: 0; display: flex; align-items: center; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand__logo { display: block; height: 27px; width: auto; }
@media (min-width: 720px) { .brand__logo { height: 34px; } }

.menu-btn {
  width: var(--touch); height: var(--touch); margin-right: calc(-1 * var(--space-10)); border: 0; background: none; cursor: pointer;
  display: grid; place-content: center; gap: var(--space-8);
}
.menu-btn span { display: block; width: 22px; height: 1.5px; background: var(--ink); transition: transform .35s var(--ease); }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-4.25px) rotate(-45deg); }

.menu {
  position: absolute; top: 100%; left: 0; right: 0;
  display: flex; flex-direction: column; padding: var(--space-4) var(--gutter) var(--space-24);
  background: var(--base); border-bottom: 1px solid var(--line);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility 0s .35s;
}
.menu.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.menu a {
  display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--line);
  font: 500 var(--fs-17) var(--font-head); color: var(--ink); text-decoration: none;
}
.menu a:hover { color: var(--blue-deep); }
.menu a[aria-current="page"] { color: var(--blue-deep); font-weight: 700; }
.menu .menu__cta {
  margin-top: var(--space-20); min-height: 52px; justify-content: center; border: 0; border-radius: var(--radius);
  background: var(--blue-deep); color: var(--white); font-weight: 700; font-size: var(--fs-16);
}
.menu .menu__cta:hover { background: var(--blue-deeper); color: var(--white); }

@media (min-width: 1080px) {
  .menu-btn { display: none; }
  .menu {
    position: static; flex-direction: row; align-items: center; gap: var(--space-32); padding: 0;
    background: none; border: 0; opacity: 1; visibility: visible;
  }
  .menu a { min-height: var(--touch); border: 0; font-size: var(--fs-15); color: var(--ink-2); white-space: nowrap; }
  .menu a:hover { color: var(--ink); }
  .menu a[aria-current="page"] { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--underline); text-underline-offset: 8px; }
  .menu .menu__cta {
    margin: 0; min-height: 42px; padding: 0 var(--space-18); font-size: var(--fs-15);
    background: rgb(var(--white-rgb) / .55); color: var(--blue-deep); border: 1px solid rgb(var(--blue-rgb) / .35);
  }
  .menu .menu__cta:hover { background: var(--blue-deep); border-color: var(--blue-deep); color: var(--white); }
}


/* ==========================================================================
   5. Hero (portada) y hero de subpágina
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(var(--header-h) + env(safe-area-inset-top));
}

.hero__body {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  padding: var(--space-16) var(--gutter) 0;
}
.hero__inner { width: 100%; max-width: 760px; display: flex; flex-direction: column; align-items: center; text-align: center; }

/* Mariposa que se dibuja a mano: una sola vez, sin loop */
.hero__butterfly { width: 56px; height: 62px; margin-bottom: var(--space-28); }
.hero__butterfly svg { display: block; overflow: visible; }
.draw { stroke-dasharray: 1 2; stroke-dashoffset: 1; opacity: 0; animation: draw var(--d, 1s) cubic-bezier(.45,.05,.25,1) var(--t, 0s) forwards; }
.d1 { --t: .3s;  --d: 1.5s; }
.d2 { --t: 1.1s; --d: 1.3s; }
.d3 { --t: 1.65s; --d: .6s; }
.d4 { --t: 2.05s; --d: .45s; }
.d5 { --t: 2.3s; --d: .5s; }
.d6 { --t: 2.4s; --d: .5s; }
@keyframes draw {
  0%   { stroke-dashoffset: 1; opacity: 0; }
  2%   { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

.hero__title {
  margin: 0;
  font: 700 var(--fs-36)/var(--lh-tight) var(--font-head); letter-spacing: 0; color: var(--heading);
  text-wrap: balance;
}
.hero__lede {
  margin: var(--space-20) 0 0; max-width: 30ch;
  font: 400 var(--fs-17)/var(--lh-text) var(--font-body); color: var(--ink-2);
  text-wrap: balance;
}
.nd { white-space: nowrap; }
/* ∞ de colores: se dibuja con CSS para que no forme parte del texto del título */
.inf {
  display: inline-block; margin-left: .14em;
  font: 800 1.7em/0.7 var(--font-head); vertical-align: -0.12em;
}
.inf::before {
  content: "\221E";
  background: var(--inf); -webkit-background-clip: text; background-clip: text; color: transparent;
}

.hero__ctas { margin-top: var(--space-40); width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: var(--space-12); }

/* Enlace al test de orientación bajo los botones */
.test-link {
  margin-top: var(--space-24); display: inline-block; padding: var(--space-10) var(--space-4); max-width: 34ch;
  font: 400 var(--fs-15)/var(--lh-normal) var(--font-body); color: var(--ink-2); text-decoration: none; text-wrap: balance;
}
.test-link__cta {
  color: var(--blue-deep); font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: var(--underline);
  transition: text-decoration-color .3s var(--ease);
}
.test-link .btn__arrow { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; color: var(--blue-deep); }
.test-link:hover { color: var(--ink-2); }
.test-link:hover .test-link__cta { text-decoration-color: var(--blue-deep); }
.test-link:hover .btn__arrow { transform: translateX(4px); }

/* Íconos de confianza */
.trust {
  list-style: none; margin: var(--space-36) 0 0; padding: 0; width: 100%; max-width: 360px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.trust li {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-8);
  padding: var(--space-2) var(--space-6);
  font: 500 var(--fs-13)/var(--lh-ui) var(--font-head); color: var(--ink-2); text-wrap: balance;
}
.trust li + li { border-left: 1px solid var(--line); }
.icon {
  width: 22px; height: 22px; flex: 0 0 auto;
  fill: none; stroke: var(--blue-deep); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

@media (min-width: 720px) {
  .hero__body { padding-top: var(--space-24); padding-bottom: var(--space-32); }
  .hero__butterfly { width: 88px; height: 97px; margin-bottom: var(--space-40); }
  .hero__title { font-size: var(--fs-hero); }
  .hero__lede { margin-top: var(--space-28); font-size: var(--fs-20); max-width: 34ch; }
  .hero__ctas { margin-top: var(--space-52); flex-direction: row; justify-content: center; max-width: none; }
  .test-link { margin-top: var(--space-28); max-width: none; }
  .trust { margin-top: var(--space-52); max-width: none; width: auto; display: flex; }
  .trust li { flex-direction: row; gap: var(--space-10); padding: 0 var(--space-24); font-size: var(--fs-15); white-space: nowrap; }
  .icon { width: 20px; height: 20px; }
}

/* Pie del hero: indicador de scroll (mariposa fija que lleva a la siguiente sección) */
.hero__foot {
  margin-top: var(--space-26); padding-bottom: env(safe-area-inset-bottom);
  display: flex; align-items: center; justify-content: center;
}
.scroll-cue { width: var(--touch); height: var(--touch); display: grid; place-items: center; }
.scroll-cue img { width: 22px; height: 22px; object-fit: contain; opacity: .85; }

/* Aparición del hero al cargar */
.js .hero__inner > .hero__butterfly { opacity: 1 !important; transform: none !important; }
.js .hero__inner > * { opacity: 0; transform: translateY(10px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js.is-loaded .hero__inner > * { opacity: 1; transform: none; }
.js.is-loaded .hero__inner > :nth-child(2) { transition-delay: .1s; }
.js.is-loaded .hero__inner > :nth-child(3) { transition-delay: .2s; }
.js.is-loaded .hero__inner > :nth-child(4) { transition-delay: .32s; }
.js.is-loaded .hero__inner > :nth-child(5) { transition-delay: .44s; }
.js.is-loaded .hero__inner > :nth-child(6) { transition-delay: .54s; }

/* Hero de subpágina: sin alto completo; el indicador de scroll queda bajo los íconos de confianza */
.hero--page { min-height: auto; justify-content: flex-start; }
.hero--page .hero__body { padding-bottom: 0; }
.hero--page .hero__foot { margin-top: var(--space-20); padding-bottom: 0; }
.hero__sub { margin: var(--space-16) 0 0; max-width: 32ch; font: 400 var(--fs-17)/var(--lh-text) var(--font-body); color: var(--ink-2); text-wrap: balance; }
.hero__eyebrow { margin-bottom: 0; }
@media (min-width: 720px) {
  .hero--page .hero__foot { margin-top: var(--space-28); }
  .hero__sub { margin-top: var(--space-22); font-size: var(--fs-20); max-width: 40ch; }
}


/* ==========================================================================
   6. Botones
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-12);
  min-height: 54px; padding: 0 var(--space-24); border: 0; border-radius: var(--radius);
  font: 700 var(--fs-16)/var(--lh-snug) var(--font-head); letter-spacing: var(--ls-tight); text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.btn__arrow {
  width: 18px; height: 18px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .4s var(--ease);
}
.btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { transform: translateX(4px); }
.btn--primary { background: var(--blue-deep); color: var(--white); }
.btn--primary:hover { background: var(--blue-deeper); color: var(--white); }
.btn--secondary { background: rgb(var(--white-rgb) / .6); color: var(--blue-deep); border: 1px solid var(--border-action); }
.btn--secondary:hover { background: rgb(var(--white-rgb) / .9); color: var(--blue-deeper); border-color: rgb(var(--blue-rgb) / .55); }
.btn--ghost { background: transparent; color: var(--blue-deep); border: 1px solid var(--border-action); }
.btn--ghost:hover { background: rgb(var(--white-rgb) / .7); color: var(--blue-deeper); border-color: rgb(var(--blue-rgb) / .55); }
@media (min-width: 720px) { .btn { min-height: 56px; padding: 0 var(--space-26); } }


/* ==========================================================================
   7. Bloque translúcido (.panel) y secciones
   ========================================================================== */
/* Bloque estándar: mismo sistema que las tarjetas.
   (Sin backdrop-filter a propósito: el desenfoque de 2 px no se notaba sobre
   las nubes y costaba mucho en celulares mientras el cielo se mueve.) */
.panel {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-32) var(--space-28);
}
@media (min-width: 720px) { .panel { padding: var(--space-40) var(--space-38); } }
@media (min-width: 900px) { .panel { padding: var(--space-48) var(--space-52); } }

/* Títulos y textos comunes */
.eyebrow {
  margin: 0 0 var(--space-16);
  font: 700 var(--fs-13)/var(--lh-ui) var(--font-head); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--blue-deep);
}
.h2 {
  margin: 0; max-width: 20ch;
  font: 700 var(--fs-28)/var(--lh-snug) var(--font-head); letter-spacing: 0; color: var(--heading); text-wrap: balance;
}
@media (min-width: 900px) { .h2 { font-size: var(--fs-40); line-height: var(--lh-tight); } }
.hl { color: var(--blue-deep); font-weight: 700; }

/* Sección genérica */
.block { padding: var(--sec-y) var(--gutter); }
.block__wrap { max-width: var(--content-w); margin: 0 auto; }
.block--narrow .block__wrap { max-width: var(--narrow-w); }
.block__lead { margin: var(--space-20) 0 0; max-width: 62ch; font-size: var(--fs-17); line-height: var(--lh-relaxed); color: var(--ink); text-wrap: pretty; }
.block__lead + .block__lead { margin-top: var(--space-16); }
@media (min-width: 720px) { .block__lead { font-size: var(--fs-18); } }

/* Aparición al hacer scroll */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }


/* ==========================================================================
   8. Componentes de contenido
   ========================================================================== */

/* ---- Tonos pastel: definen --soft para el componente que los use ---- */
.tone-sky    { --soft: var(--sky-soft); }
.tone-lilac  { --soft: var(--lilac-soft); }
.tone-pink   { --soft: var(--pink-soft); }
.tone-mint   { --soft: var(--mint-soft); }
.tone-butter { --soft: var(--butter-soft); }

/* ---- Conoce Anima: pared de galería con dos cuadros ---- */
.about { padding: var(--sec-y) var(--gutter); }
.about__grid { max-width: var(--content-w); margin: 0 auto; display: grid; gap: var(--space-56); }
.wall { position: relative; width: 100%; max-width: 440px; padding-bottom: 14%; }
.frame {
  margin: 0; padding: 5px;            /* grosor del marco */
  box-shadow: var(--shadow-frame);
}
.frame--wood { background: var(--frame-wood); box-shadow: inset 0 0 0 1px rgb(var(--wood-rgb) / .18), var(--shadow-frame); }
.frame--blue { background: var(--frame-blue); box-shadow: inset 0 0 0 1px rgb(var(--heading-rgb) / .14), var(--shadow-frame); }
.frame__mat { background: var(--frame-mat); padding: 9%; box-shadow: var(--shadow-inset); }
.frame__mat > img, .frame__art { display: block; width: 100%; box-shadow: var(--ring-hairline); }
.wall__photo { width: 80%; }
.wall__photo .frame__mat { padding: 7%; }
.wall__photo img { height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.wall__mark { position: absolute; right: 0; bottom: 0; width: 40%; }
.frame__art { aspect-ratio: 1; background: var(--frame-art); display: grid; place-items: center; }
.frame__art img { width: 78%; height: auto; filter: saturate(1.15) brightness(.82); }

.about__body { margin: var(--space-28) 0 0; max-width: 60ch; font-size: var(--fs-17); line-height: var(--lh-relaxed); color: var(--ink); text-wrap: pretty; }
.about__body strong { font-weight: 700; color: var(--heading); }
.about__team { margin-top: var(--space-18); }
.about__ps { margin: var(--space-20) 0 0; max-width: 52ch; font-size: var(--fs-15); line-height: var(--lh-text); font-style: italic; color: var(--ink-2); text-wrap: pretty; }
.signature { margin: var(--space-38) 0 0; display: flex; align-items: center; gap: var(--space-16); }
.signature__line { width: 32px; height: 1px; background: var(--blue-deep); opacity: .5; flex: 0 0 auto; }
.signature > span:last-child { display: flex; flex-direction: column; gap: var(--space-2); }
.signature strong { font: 700 var(--fs-17)/var(--lh-ui) var(--font-head); color: var(--heading); }
.signature strong + span { font-size: var(--fs-15); line-height: var(--lh-normal); color: var(--ink-2); white-space: nowrap; }
.js .about__text.reveal { transition-delay: .12s; }
.js .wall__mark.reveal { transition-delay: .2s; }

@media (min-width: 900px) {
  .about__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-88); align-items: center; }
  .wall { max-width: none; padding-bottom: 0; display: grid; grid-template-columns: 64fr 30fr; column-gap: 6%; align-items: start; }
  .wall__photo { width: auto; }
  .wall__mark { position: static; width: auto; margin-top: 22%; }
  .about__body { margin-top: var(--space-28); font-size: var(--fs-18); }
  .signature { margin-top: var(--space-40); }
}

/* ---- Lista con checks pastel ("Somos para ti si…") ---- */
.fit { position: relative; padding: var(--sec-y) var(--gutter); }
.fit__grid { position: relative; z-index: 1; max-width: var(--content-w); margin: 0 auto; display: grid; gap: var(--space-32); }
.fit__mark { display: block; width: 28px; height: 28px; object-fit: contain; margin-bottom: var(--space-18); opacity: .9; }
.fit__list { list-style: none; margin: 0; padding: 0; }
.fit__list li {
  display: flex; align-items: flex-start; gap: var(--space-16);
  padding: var(--space-20) 0; border-top: 1px solid var(--border-soft);
  font: 500 var(--fs-18)/var(--lh-normal) var(--font-head); color: var(--ink); text-wrap: pretty;
}
.fit__list li:first-child { border-top: 0; padding-top: 0; }
.fit__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.fit__check {
  width: 28px; height: 28px; flex: 0 0 auto; margin-top: -1px; overflow: visible;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.fit__ring { fill: var(--soft); stroke: none; }
.fit__tick { stroke: var(--heading); stroke-width: 1.9; }
.js .fit__body.reveal { transition-delay: .12s; }

/* El disco pastel aparece y el check se dibuja, escalonado, al entrar en pantalla */
.js .fit__tick { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .fit__ring { transform: scale(.6); transform-origin: center; transform-box: fill-box; opacity: 0; transition: transform .5s cubic-bezier(.34,1.4,.5,1), opacity .4s var(--ease); }
.js .fit__tick { transition: stroke-dashoffset .45s cubic-bezier(.45,.05,.25,1); }
.js .fit__list li .fit__ring { transition-delay: calc(.3s + var(--i, 0) * .2s); }
.js .fit__list li .fit__tick { transition-delay: calc(.55s + var(--i, 0) * .2s); }
.js .fit__list.is-drawn .fit__ring { transform: none; opacity: 1; }
.js .fit__list.is-drawn .fit__tick { stroke-dashoffset: 0; }

/* Variante "No es para ti si…": mismo componente, tono discreto */
.fit__subh { margin: 0 0 var(--space-4); font: 700 var(--fs-15)/var(--lh-ui) var(--font-head); letter-spacing: var(--ls-tag); color: var(--heading); }
.fit__list + .fit__subh { margin-top: var(--space-30); padding-top: var(--space-26); border-top: 1px solid var(--divider); }
.fit__list--no li { color: var(--ink-2); font-weight: 500; }
.fit__list--no .fit__ring { fill: rgb(var(--heading-rgb) / .07); }
.fit__list--no .fit__tick { stroke: var(--ink-2); }

/* ---- Etiquetas ---- */
.fit__note { margin: var(--space-28) 0 0; }
.fit__note-label { margin: 0 0 var(--space-12); font: 700 var(--fs-13)/var(--lh-ui) var(--font-head); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--heading); }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-8); }
.tag {
  padding: var(--space-8) var(--space-12); border-radius: var(--radius-md); background: var(--soft);
  font: 500 var(--fs-14)/var(--lh-ui) var(--font-head); color: var(--heading);
}

@media (min-width: 900px) {
  .fit__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-88); align-items: start; }
  .fit__mark { width: 34px; height: 34px; margin-bottom: var(--space-24); }
  .fit__list li { padding: var(--space-24) 0; font-size: var(--fs-20); gap: var(--space-20); }
  .fit__check { width: 30px; height: 30px; }
  .fit__note { margin-top: var(--space-32); }
  .tag { font-size: var(--fs-15); padding: var(--space-8) var(--space-14); }
}

/* ---- Qué hacemos + tarjetas de servicio ---- */
.services { padding: var(--sec-y) var(--gutter); }
.services__wrap { max-width: var(--content-w); margin: 0 auto; display: grid; gap: var(--space-52); }
.services__intro { max-width: 62ch; }
.services__lead { margin: var(--space-22) 0 0; font-size: var(--fs-17); line-height: var(--lh-relaxed); color: var(--ink); text-wrap: pretty; }
.offer { list-style: none; margin: var(--space-26) 0 0; padding: 0; display: grid; gap: var(--space-16); }
.offer li {
  position: relative; padding-left: var(--space-20);
  font-size: var(--fs-16); line-height: var(--lh-text); color: var(--ink-2); text-wrap: pretty;
}
.offer li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: var(--radius-round); background: var(--butterfly);
}
.offer strong { font-weight: 700; color: var(--heading); }

.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-20); }
.card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  padding: var(--space-30) var(--space-28) var(--space-28); border-radius: var(--radius-2xl);
  background: var(--surface); border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
}
.card--soft { background: rgb(var(--white-rgb) / .34); }
.card__tag {
  align-self: flex-start; padding: var(--space-4) var(--space-12); border-radius: var(--radius-md); background: var(--soft);
  font: 700 var(--fs-12)/var(--lh-none) var(--font-head); letter-spacing: var(--ls-tag); color: var(--heading);
}
.card__title { margin: var(--space-16) 0 0; font: 700 var(--fs-20)/var(--lh-snug) var(--font-head); letter-spacing: 0; color: var(--heading); text-wrap: balance; }
.card__price { margin: var(--space-14) 0 0; font: 700 var(--fs-26)/var(--lh-none) var(--font-head); color: var(--heading); }
.card__price span:not(.num) { font: 500 var(--fs-13)/var(--lh-none) var(--font-head); color: var(--ink-2); margin-left: var(--space-4); }
.card__meta { list-style: none; margin: var(--space-14) 0 0; padding: 0; display: grid; gap: var(--space-8); }
.card__meta li { position: relative; padding-left: var(--space-16); font-size: var(--fs-14); line-height: var(--lh-normal); color: var(--ink-2); }
.card__meta li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 4px; height: 4px; border-radius: var(--radius-round); background: rgb(var(--heading-rgb) / .42); }
.card__q { margin: var(--space-14) 0 0; font: 400 var(--fs-16)/var(--lh-normal) var(--font-body); font-style: italic; color: var(--ink); text-wrap: pretty; }
.card__cta {
  margin-top: auto; padding-top: var(--space-20);
  display: inline-flex; align-items: center; gap: var(--space-8);
  font: 700 var(--fs-15)/var(--lh-snug) var(--font-head); color: var(--blue-deep); text-decoration: none;
}
.card__cta .btn__arrow { width: 17px; height: 17px; }
.card__cta:hover { color: var(--blue-deeper); }
.card__cta:hover .btn__arrow { transform: translateX(4px); }
.js .card.reveal { transition-delay: calc(.08s + var(--i, 0) * .1s); }

@media (min-width: 720px) {
  .services__lead { font-size: var(--fs-18); }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); }
  .card { padding: var(--space-34) var(--space-30) var(--space-30); }
  .card__title { font-size: var(--fs-22); }
}

/* ---- Pasos (timeline horizontal en escritorio, vertical en móvil) ---- */
.flow { padding: var(--sec-y) var(--gutter); }
.flow__wrap { max-width: var(--content-w); margin: 0 auto; }
.flow .h2 { margin-bottom: var(--space-34); }
.steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-34); }
/* Línea que une los pasos: se dibuja al entrar */
.steps::before {
  content: ""; position: absolute; left: 21px; top: var(--space-22); bottom: var(--space-22); width: 2px;
  background: rgb(var(--heading-rgb) / .18); transform-origin: top; z-index: 0;
}
.step { position: relative; z-index: 1; display: grid; grid-template-columns: 44px 1fr; gap: var(--space-16); align-items: start; }
.step__node {
  width: 44px; height: 44px; border-radius: var(--radius-round); flex: 0 0 auto;
  display: grid; place-items: center; background: var(--soft);
}
.step__icon { width: 22px; height: 22px; fill: none; stroke: var(--heading); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.step__body { padding-top: var(--space-2); }
.step__n { display: block; font: 700 var(--fs-11)/var(--lh-none) var(--font-head); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-2); }
.step__title { margin: var(--space-8) 0 0; font: 700 var(--fs-18)/var(--lh-snug) var(--font-head); letter-spacing: 0; color: var(--heading); }
.step__text { margin: var(--space-4) 0 0; font-size: var(--fs-15); line-height: var(--lh-text); color: var(--ink-2); text-wrap: pretty; }

.js .steps::before { transform: scaleY(0); transition: transform .9s var(--ease); }
.js .steps.is-drawn::before { transform: scaleY(1); }
.js .step__node { opacity: 0; transform: scale(.6); transform-origin: center; transition: transform .5s cubic-bezier(.34,1.4,.5,1), opacity .4s var(--ease); }
.js .steps.is-drawn .step__node { opacity: 1; transform: none; }
.js .steps.is-drawn .step:nth-child(1) .step__node { transition-delay: .15s; }
.js .steps.is-drawn .step:nth-child(2) .step__node { transition-delay: .35s; }
.js .steps.is-drawn .step:nth-child(3) .step__node { transition-delay: .55s; }
.js .steps.is-drawn .step:nth-child(4) .step__node { transition-delay: .75s; }
.js .steps.is-drawn .step:nth-child(5) .step__node { transition-delay: .95s; }

/* ---- Selector tipo switch (Terapia / Evaluación) ---- */
.flow__ask { margin: 0 0 var(--space-10); font: 700 var(--fs-14)/var(--lh-ui) var(--font-head); color: var(--heading); }
.seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
  margin-bottom: var(--space-30); padding: var(--space-4);
  background: rgb(var(--heading-rgb) / .07); border-radius: var(--radius-lg);
}
.seg__opt {
  appearance: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: var(--space-8);
  min-height: 48px; padding: 0 var(--space-10); border: 0; border-radius: var(--radius);
  background: transparent; color: var(--blue-deep);
  font: 700 var(--fs-15)/var(--lh-tight) var(--font-head);
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease);
}
.seg__icon { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.seg__opt.is-active { background: var(--soft); color: var(--heading); box-shadow: var(--shadow-seg); }
.seg__opt:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 2px; }
.flow__panel[hidden] { display: none; }

/* Enlace para cambiar de vista */
.flow__switch {
  display: inline-block; margin-bottom: var(--space-18);
  font: 700 var(--fs-14)/var(--lh-normal) var(--font-head); color: var(--blue-deep);
  text-decoration: underline; text-decoration-color: var(--underline);
  text-underline-offset: 3px; transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.flow__switch:hover { color: var(--blue-deeper); text-decoration-color: var(--blue-deep); }

/* Línea cálida de cierre + botón */
.flow__note {
  display: flex; align-items: center; gap: var(--space-10);
  margin: var(--space-30) 0 0; padding-left: var(--space-4);
  font-size: var(--fs-15); line-height: var(--lh-normal); color: var(--ink-2); text-wrap: pretty;
}
.flow__heart { width: 20px; height: 20px; flex: 0 0 auto; fill: var(--heart); stroke: none; }
.flow__cta { margin-top: var(--space-26); }
.flow__cta .btn { width: 100%; padding: 0 var(--space-18); white-space: nowrap; }

@media (min-width: 900px) {
  .flow .h2 { margin-bottom: var(--space-52); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); }
  .steps::before { left: 10%; right: 10%; top: var(--space-22); bottom: auto; width: auto; height: 2px; transform-origin: left; }
  .step { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--space-16); }
  .step__body { padding-top: 0; }
  .step__title { margin-top: var(--space-8); }
  .step__text { max-width: 22ch; margin-left: auto; margin-right: auto; }
  .js .steps::before { transform: scaleX(0); }
  .js .steps.is-drawn::before { transform: scaleX(1); }
  .flow__note { justify-content: center; margin-top: var(--space-44); padding-left: 0; }
  .flow__cta { display: flex; justify-content: center; margin-top: var(--space-28); }
  .flow__cta .btn { width: auto; }
}

/* ---- Acordeón (preguntas frecuentes) ---- */
.faq { padding: var(--sec-y) var(--gutter); }
.faq__wrap { max-width: 800px; margin: 0 auto; }
.faq .h2 { margin-bottom: var(--space-26); }
.acc-list { display: grid; gap: 0; }
.acc { border-top: 1px solid var(--divider); }
.acc:last-child { border-bottom: 1px solid var(--divider); }
.acc__head { margin: 0; }
.acc__btn {
  appearance: none; cursor: pointer; width: 100%; border: 0; background: transparent;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  padding: var(--space-20) var(--space-4); text-align: left;
  font: 700 var(--fs-16)/var(--lh-ui) var(--font-head); color: var(--heading); text-wrap: pretty;
}
.acc__btn:hover { color: var(--blue-deeper); }
.acc__btn:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 2px; border-radius: var(--radius-sm); }
.acc__ico {
  position: relative; width: 32px; height: 32px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: var(--radius-round);
  background: var(--sky-soft); transition: background-color .28s var(--ease);
}
.acc__ico svg { width: 18px; height: 18px; fill: none; stroke: var(--heading); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .28s var(--ease); }
.acc__btn[aria-expanded="true"] .acc__ico { background: var(--pink-soft); }
.acc__btn[aria-expanded="true"] .acc__ico svg { transform: rotate(180deg); }
.acc__hl { color: var(--blue-deep); font-weight: 700; }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s var(--ease); }
.acc__panel.is-open { grid-template-rows: 1fr; }
/* Cerrado: además de no verse, su contenido no recibe foco ni lo lee el lector de pantalla */
.acc__inner { overflow: hidden; visibility: hidden; transition: visibility 0s linear .28s; }
.acc__panel.is-open .acc__inner { visibility: visible; transition-delay: 0s; }
.acc__a { margin: 0; padding: 0 var(--space-4) var(--space-20); font-size: var(--fs-15); line-height: var(--lh-text); color: var(--ink-2); text-wrap: pretty; }
.acc__a a { font-weight: 700; }
@media (min-width: 720px) {
  .faq .h2 { margin-bottom: var(--space-34); }
  .acc__btn { font-size: var(--fs-18); padding: var(--space-24) var(--space-4); }
}

/* ---- Cierre de página ---- */
.close { padding: var(--sec-y) var(--gutter); }
.close__wrap { max-width: 760px; margin: 0 auto; text-align: center; }
.close__wrap .h2 { margin-left: auto; margin-right: auto; }
.close__text { margin: var(--space-12) 0 0; font-size: var(--fs-17); line-height: var(--lh-normal); color: var(--ink-2); text-wrap: pretty; }
.close__ctas { margin-top: var(--space-28); display: grid; gap: var(--space-12); }
.close__ctas .btn { width: 100%; }
.close__link {
  display: inline-block; margin-top: var(--space-22);
  font: 700 var(--fs-15)/var(--lh-normal) var(--font-head); color: var(--blue-deep);
  text-decoration: underline; text-decoration-color: var(--underline); text-underline-offset: 3px;
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.close__link:hover { color: var(--blue-deeper); text-decoration-color: var(--blue-deep); }
@media (min-width: 720px) {
  .close__ctas { grid-auto-flow: column; justify-content: center; }
  .close__ctas .btn { width: auto; }
}


/* ==========================================================================
   9. Pie de página
   ========================================================================== */
.site-footer { padding: var(--sec-y) var(--gutter) var(--space-40); }
.footer__wrap {
  max-width: var(--content-w); margin: 0 auto;
  display: grid; gap: var(--space-34); justify-items: center; text-align: center;
}
.footer__logo { width: 132px; height: auto; display: block; margin: 0 auto var(--space-14); }
.footer__tagline { margin: 0; max-width: 34ch; font-size: var(--fs-15); line-height: var(--lh-text); color: var(--ink-2); text-wrap: pretty; }
.footer__contact { display: grid; gap: var(--space-20); justify-items: center; }
.footer__wa {
  display: inline-flex; align-items: center; gap: var(--space-10);
  font: 700 var(--fs-15)/var(--lh-none) var(--font-head); color: var(--heading);
  text-decoration: underline; text-decoration-color: rgb(var(--heading-rgb) / .35); text-underline-offset: 4px;
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.footer__wa:hover { color: var(--blue-deeper); text-decoration-color: var(--heading); }
.footer__wa .btn__arrow { width: 18px; height: 18px; stroke-width: 2; }
.footer__social { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: var(--space-12); }
.footer__social a {
  display: grid; place-items: center; width: var(--touch); height: var(--touch); border-radius: var(--radius-round);
  background: rgb(var(--white-rgb) / .6); color: var(--heading);
  box-shadow: var(--shadow-xs);
  transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.footer__social a:hover { background: var(--sky-soft); box-shadow: var(--shadow-xs-hover); }
.footer__social svg { width: 21px; height: 21px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.footer__nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-6) var(--space-10); }
.footer__nav a { font-size: var(--fs-13); color: var(--ink-2); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color .25s var(--ease), text-decoration-color .25s var(--ease); }
.footer__nav a:not(:last-child)::after { content: "·"; margin-left: var(--space-10); color: rgb(var(--heading-rgb) / .4); pointer-events: none; }
.footer__nav a:hover { color: var(--heading); text-decoration-color: currentColor; }
.footer__base {
  max-width: var(--content-w); margin: var(--space-40) auto 0; padding-top: var(--space-28);
  border-top: 1px solid var(--divider); text-align: center;
  display: grid; gap: var(--space-18); justify-items: center;
}
.footer__crisis {
  display: inline-flex; align-items: center; gap: var(--space-8); margin: 0;
  padding: var(--space-12) var(--space-16); border-radius: var(--radius-lg); background: var(--pink-soft);
  font-size: var(--fs-13); line-height: var(--lh-normal); color: var(--heading); text-wrap: pretty;
}
.footer__crisis-heart { width: 17px; height: 17px; flex: 0 0 auto; fill: var(--heart); stroke: none; }
.footer__crisis a { font-weight: 700; color: var(--heading); text-decoration: underline; text-underline-offset: 2px; }
.footer__copy { margin: 0; font-size: var(--fs-13); color: var(--ink-2); }
.footer__copy a { color: var(--ink-2); }
.footer__copy a:hover { color: var(--heading); }
.site-footer--min .footer__base { margin-top: 0; }

@media (min-width: 720px) {
  .footer__wrap {
    grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-40);
    justify-items: start; text-align: left; align-items: start;
  }
  .footer__logo { margin: 0 0 var(--space-14); }
  .footer__contact { justify-items: start; }
  .footer__social { justify-content: flex-start; }
  .footer__nav { justify-content: flex-start; }
}


/* ==========================================================================
   10. Página Diagnóstico
   ========================================================================== */

/* ¿Qué incluye? — timeline vertical con íconos y círculos pastel */
.inc { position: relative; list-style: none; margin: var(--space-30) 0 0; padding: 0; display: grid; gap: var(--space-24); }
.inc::before { content: ""; position: absolute; left: 21px; top: var(--space-22); bottom: var(--space-22); width: 2px; background: rgb(var(--heading-rgb) / .18); z-index: 0; }
.inc li { position: relative; z-index: 1; display: grid; grid-template-columns: 44px 1fr; gap: var(--space-16); align-items: start; }
.inc__node { width: 44px; height: 44px; border-radius: var(--radius-round); flex: 0 0 auto; display: grid; place-items: center; background: var(--soft); }
.inc__icon { width: 22px; height: 22px; fill: none; stroke: var(--heading); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.inc__body { padding-top: var(--space-8); }
.inc__body p { margin: 0; font-size: var(--fs-16); line-height: var(--lh-text); color: var(--ink); text-wrap: pretty; }
.inc__body strong { font-family: var(--font-head); font-weight: 700; color: var(--heading); }
@media (min-width: 720px) { .inc { gap: var(--space-28); } .inc__body p { font-size: var(--fs-16); } }
.js .inc.reveal li { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .inc.reveal.is-in li { opacity: 1; transform: none; }
.js .inc.reveal.is-in li:nth-child(2) { transition-delay: .08s; }
.js .inc.reveal.is-in li:nth-child(3) { transition-delay: .16s; }
.js .inc.reveal.is-in li:nth-child(4) { transition-delay: .24s; }
.js .inc.reveal.is-in li:nth-child(5) { transition-delay: .32s; }
.js .inc.reveal.is-in li:nth-child(6) { transition-delay: .4s; }
.js .inc.reveal.is-in li:nth-child(7) { transition-delay: .48s; }

/* Precio */
.price__grid { display: grid; gap: var(--space-16); }
.price-main { padding: var(--space-28) var(--space-24); border-radius: var(--radius-2xl); background: rgb(var(--sky-soft-rgb) / .5); border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.price-main__tag { display: inline-block; padding: var(--space-4) var(--space-12); border-radius: var(--radius-md); background: var(--white); font: 700 var(--fs-12)/var(--lh-none) var(--font-head); letter-spacing: var(--ls-tag); color: var(--heading); }
.price-main__amt { margin: var(--space-16) 0 0; font: 800 var(--fs-price-xl)/var(--lh-none) var(--font-head); color: var(--heading); }
.price-main__amt small { font: 500 var(--fs-15)/var(--lh-none) var(--font-head); color: var(--ink-2); margin-left: var(--space-6); letter-spacing: 0; }
.price-main__note { margin: var(--space-12) 0 0; font-size: var(--fs-15); line-height: var(--lh-text); color: var(--ink-2); text-wrap: pretty; }
.price__intro { margin: var(--space-20) 0 0; font-size: var(--fs-16); line-height: var(--lh-text); color: var(--ink); text-wrap: pretty; }
.price__intro strong { font-family: var(--font-head); font-weight: 700; color: var(--heading); }
.pay { list-style: none; margin: var(--space-14) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-10); }
.pay li { padding: var(--space-16) var(--space-8); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border-soft); text-align: center; }
.pay__n { display: block; font: 800 var(--fs-20)/var(--lh-none) var(--font-head); color: var(--heading); }
.pay__d { display: block; margin-top: var(--space-6); font: 500 var(--fs-13)/var(--lh-ui) var(--font-head); color: var(--ink-2); }
.price-aval { margin-top: var(--space-16); padding: var(--space-22); border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--border-soft); }
.price-aval__top { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.price-aval h3 { margin: 0; font: 700 var(--fs-18)/var(--lh-snug) var(--font-head); color: var(--heading); }
.price-aval__plus { font: 800 var(--fs-18)/var(--lh-none) var(--font-head); color: var(--blue-deep); }
.price-aval p { margin: var(--space-10) 0 0; font-size: var(--fs-15); line-height: var(--lh-text); color: var(--ink-2); text-wrap: pretty; }
.price-aval__note { margin-top: var(--space-10); font-size: var(--fs-13); font-style: italic; color: var(--ink-2); }
.price-warm { margin-top: var(--space-16); padding: var(--space-22); border-radius: var(--radius-xl); background: var(--pink-soft); display: flex; gap: var(--space-12); align-items: flex-start; }
.price-warm__heart { width: 20px; height: 20px; margin-top: var(--space-2); flex: 0 0 auto; fill: var(--heart); stroke: none; }
.price-warm p { margin: 0; font-size: var(--fs-15); line-height: var(--lh-text); color: var(--heading); text-wrap: pretty; }
.price-warm strong { font-weight: 700; }
@media (min-width: 720px) {
  .price__grid { grid-template-columns: 1fr; max-width: 760px; }
  .price-main { padding: var(--space-34) var(--space-36); }
  .price-aval, .price-warm { padding: var(--space-24) var(--space-28); }
  .price-aval__top { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--space-10); }
}

/* Tú decides el ritmo */
.rhythm { list-style: none; margin: var(--space-24) 0 0; padding: 0; display: grid; gap: var(--space-10); }
.rhythm li { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-16) var(--space-18); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border-soft); }
.rhythm__dot { width: 12px; height: 12px; border-radius: var(--radius-round); flex: 0 0 auto; background: var(--soft); box-shadow: var(--ring-soft); }
.rhythm__pace { font: 700 var(--fs-15)/var(--lh-ui) var(--font-head); color: var(--heading); }
.rhythm__time { margin-left: auto; padding-left: var(--space-10); font: 700 var(--fs-15)/var(--lh-snug) var(--font-head); color: var(--blue-deep); white-space: nowrap; }
.rhythm__note { margin: var(--space-20) 0 0; font-size: var(--fs-15); line-height: var(--lh-text); color: var(--ink-2); text-wrap: pretty; }
@media (min-width: 720px) {
  .rhythm { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
  .rhythm li { padding: var(--space-18) var(--space-20); }
}

/* Internacional — calculadora de moneda */
.calc { margin: var(--space-24) 0 0; padding: var(--space-22); border-radius: var(--radius-2xl); background: rgb(var(--white-rgb) / .55); border: 1px solid var(--border-soft); box-shadow: var(--shadow-sm); }
.calc__label { display: block; margin: 0 0 var(--space-10); font: 700 var(--fs-12)/var(--lh-ui) var(--font-head); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--heading); }
.calc__field { position: relative; }
.calc__field select {
  appearance: none; -webkit-appearance: none; width: 100%; min-height: 54px;
  padding: 0 var(--space-48) 0 var(--space-16); border-radius: var(--radius); border: 1px solid rgb(var(--heading-rgb) / .25);
  background: var(--white); color: var(--ink); font: 500 var(--fs-16)/var(--lh-snug) var(--font-head); cursor: pointer;
}
.calc__field select:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 2px; }
.calc__chev { position: absolute; right: var(--space-16); top: 50%; transform: translateY(-50%); width: 16px; height: 16px; pointer-events: none; fill: none; stroke: var(--blue-deep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.calc__out { margin: var(--space-20) 0 0; padding-top: var(--space-18); border-top: 1px solid var(--divider); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-6) var(--space-10); }
.calc__base { font: 700 var(--fs-17)/var(--lh-tight) var(--font-head); color: var(--ink-2); }
.calc__approx { font: 400 var(--fs-17)/var(--lh-none) var(--font-head); color: var(--ink-2); }
.calc__amt { font: 800 var(--fs-price-md)/var(--lh-none) var(--font-head); color: var(--heading); }
.calc__code { margin-left: calc(-1 * var(--space-4)); font: 700 var(--fs-15)/var(--lh-none) var(--font-head); color: var(--ink-2); }
.calc__code:empty { display: none; }
.calc__note { margin: var(--space-12) 0 0; font-size: var(--fs-13); font-style: italic; line-height: var(--lh-normal); color: var(--ink-2); }
.calc__src { margin: var(--space-6) 0 0; font-size: var(--fs-12); line-height: var(--lh-normal); color: var(--ink-2); }
.calc__src a { color: var(--ink-2); }

/* Botón fijo inferior (solo móvil) */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  padding: var(--space-10) var(--gutter) calc(var(--space-10) + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, var(--base) 48%, rgb(var(--base-rgb) / .85) 80%, rgb(var(--base-rgb) / 0));
  transition: transform .4s var(--ease), opacity .4s var(--ease), visibility 0s;
}
.sticky-cta .btn { width: 100%; box-shadow: var(--shadow-float); }
.sticky-cta.is-hidden { transform: translateY(130%); opacity: 0; pointer-events: none; visibility: hidden; transition: transform .4s var(--ease), opacity .4s var(--ease), visibility 0s .4s; }
@media (min-width: 720px) { .sticky-cta { display: none; } }


/* ==========================================================================
   11. Páginas Tests y Test de orientación
   ========================================================================== */

/* Listado de tests */
.tests__grid { max-width: 760px; margin: 0 auto; }
.tfeature {
  padding: var(--space-28) var(--space-24); border-radius: var(--radius-3xl);
  background: rgb(var(--sky-soft-rgb) / .42); border: 1px solid rgb(var(--heading-rgb) / .16);
  box-shadow: var(--shadow-md);
}
.tfeature__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-10); }
.tfeature__tag { display: inline-block; padding: var(--space-4) var(--space-12); border-radius: var(--radius-md); background: var(--white); font: 700 var(--fs-12)/var(--lh-none) var(--font-head); letter-spacing: var(--ls-tag); color: var(--heading); }
.tfeature__time { font: 700 var(--fs-13)/var(--lh-none) var(--font-head); color: var(--blue-deep); }
.tfeature__title { margin: var(--space-16) 0 0; font: 700 var(--fs-22)/var(--lh-snug) var(--font-head); color: var(--heading); text-wrap: balance; }
.tfeature__text { margin: var(--space-12) 0 0; max-width: 46ch; font-size: var(--fs-16); line-height: var(--lh-text); color: var(--ink); text-wrap: pretty; }
.tfeature .btn { margin-top: var(--space-24); }
.tsoon { list-style: none; margin: var(--space-16) 0 0; padding: 0; display: grid; gap: var(--space-12); }
.tsoon li {
  display: flex; align-items: center; gap: var(--space-12);
  padding: var(--space-18) var(--space-20); border-radius: var(--radius-xl);
  background: rgb(var(--white-rgb) / .4); border: 1px solid rgb(var(--heading-rgb) / .1);
}
.tsoon__name { font: 700 var(--fs-16)/var(--lh-snug) var(--font-head); color: var(--heading); }
.tsoon__soon { margin-left: auto; padding: var(--space-4) var(--space-12); border-radius: var(--radius-md); background: var(--fill-muted); font: 700 var(--fs-12)/var(--lh-none) var(--font-head); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.tests__foot { margin: var(--space-24) 0 0; text-align: center; font-size: var(--fs-13); font-style: italic; color: var(--ink-2); }
@media (min-width: 720px) {
  .tfeature { padding: var(--space-34) var(--space-36); }
  .tfeature__title { font-size: var(--fs-26); }
  .tsoon { grid-template-columns: repeat(3, 1fr); }
  .tsoon li { flex-direction: column; align-items: flex-start; gap: var(--space-14); }
  .tsoon__soon { margin-left: 0; }
}

/* Experiencia del test */
.quiz-page { padding-top: calc(var(--header-h) + env(safe-area-inset-top) + var(--sec-y)); }
.quiz-wrap { max-width: 640px; margin: 0 auto; }
.quiz-eyebrow { text-align: center; }
.quiz-title { margin: 0 auto var(--space-26); text-align: center; max-width: 22ch; }
.quiz__top { margin-bottom: var(--space-24); }
.quiz__bar { height: 4px; border-radius: var(--radius-xs); background: var(--border-soft); overflow: hidden; }
.quiz__fill { display: block; height: 100%; width: 14%; background: var(--blue-deep); border-radius: var(--radius-xs); transition: width .4s var(--ease); }
.quiz__nav { margin-top: var(--space-12); display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); min-height: 30px; }
.quiz__back { appearance: none; border: 0; background: none; cursor: pointer; min-height: var(--touch); padding: 0 var(--space-2); font: 700 var(--fs-14)/var(--lh-none) var(--font-head); color: var(--blue-deep); display: inline-flex; align-items: center; gap: var(--space-6); }
.quiz__back[hidden] { display: none; }
.quiz__back:hover { color: var(--blue-deeper); }
.quiz__priv { font-size: var(--fs-13); color: var(--ink-2); margin-left: auto; }
.quiz__q { margin: 0 0 var(--space-22); font: 700 var(--fs-22)/var(--lh-ui) var(--font-head); color: var(--heading); text-wrap: balance; }
.quiz__opts { display: grid; gap: var(--space-10); }
.quiz__opt {
  appearance: none; cursor: pointer; width: 100%; min-height: 56px; padding: var(--space-14) var(--space-18);
  display: flex; align-items: center; text-align: left;
  border-radius: var(--radius-lg); border: 1px solid rgb(var(--heading-rgb) / .16); background: rgb(var(--white-rgb) / .55);
  font: 400 var(--fs-16)/var(--lh-ui) var(--font-body); color: var(--ink); text-wrap: pretty;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.quiz__opt:hover { border-color: rgb(var(--blue-rgb) / .4); background: rgb(var(--white-rgb) / .82); }
.quiz__opt.is-sel, .quiz__opt:active { background: var(--sky-soft); border-color: rgb(var(--blue-rgb) / .55); box-shadow: var(--ring-selected); color: var(--heading); }
.quiz__opt:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 2px; }
.quiz__opt--multi { padding-left: var(--space-52); position: relative; }
.quiz__opt--multi::before { content: ""; position: absolute; left: var(--space-18); top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: var(--radius-sm); border: 2px solid rgb(var(--blue-rgb) / .45); background: var(--white); transition: background-color .15s var(--ease), border-color .15s var(--ease); }
.quiz__opt--multi.is-sel::before { background: var(--blue-deep); border-color: var(--blue-deep); }
.quiz__opt--multi.is-sel::after { content: ""; position: absolute; left: 25px; top: 50%; width: 6px; height: 11px; border: solid var(--white); border-width: 0 2px 2px 0; transform: translateY(-64%) rotate(45deg); }
.quiz__qhint { display: block; margin-top: var(--space-6); font: 400 var(--fs-15)/var(--lh-normal) var(--font-body); color: var(--ink-2); }
.quiz__continue { margin-top: var(--space-22); }
.quiz__continue:disabled { opacity: .45; cursor: not-allowed; }
.quiz__screen[hidden] { display: none; }
.js .quiz__screen { animation: quizIn .35s var(--ease) both; }
@keyframes quizIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Pantallas de resultado */
.quiz__result { text-align: center; }
.quiz__ricon { width: 50px; height: 50px; margin: 0 auto; display: block; fill: none; stroke: var(--blue-deep); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.quiz__rtitle { margin: var(--space-20) 0 0; font: 700 var(--fs-24)/var(--lh-snug) var(--font-head); color: var(--heading); text-wrap: balance; outline: none; }
.quiz__rtext { margin: var(--space-14) auto 0; max-width: 48ch; font-size: var(--fs-16); line-height: var(--lh-text); color: var(--ink); text-wrap: pretty; }
.quiz__ractions { margin: var(--space-26) 0 0; display: grid; gap: var(--space-12); justify-items: center; }
.quiz__ractions .btn { width: 100%; }
.quiz__ractions[hidden] { display: none; }
.quiz__rlinks { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-20); }
.quiz__rlink { font: 700 var(--fs-15)/var(--lh-normal) var(--font-head); color: var(--blue-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--underline); transition: color .2s var(--ease), text-decoration-color .2s var(--ease); }
.quiz__rlink:hover { color: var(--blue-deeper); text-decoration-color: var(--blue-deep); }
/* Tarjetas extra del resultado */
.quiz__med { margin: var(--space-24) 0 0; padding: var(--space-18) var(--space-20); border-radius: var(--radius-xl); background: var(--lilac-soft); text-align: left; }
.quiz__psi-top { margin: 0 0 var(--space-24); padding: var(--space-18) var(--space-20); border-radius: var(--radius-xl); background: var(--butter-soft); border: 1.5px solid rgb(var(--heading-rgb) / .28); text-align: left; }
.quiz__psi-top p { margin: 0 0 var(--space-10); font-size: var(--fs-14); line-height: var(--lh-text); color: var(--heading); text-wrap: pretty; }
.quiz__psi-top a { font-weight: 700; color: var(--heading); }
.quiz__crisis-note { margin: var(--space-22) 0 0; padding: var(--space-14) var(--space-18); border-radius: var(--radius-lg); background: var(--sky-soft); text-align: left; }
.quiz__crisis-note p { margin: 0; font-size: var(--fs-13); line-height: var(--lh-normal); color: var(--heading); text-wrap: pretty; }
.quiz__crisis-note a { font-weight: 700; color: var(--heading); }
.quiz__med p, .quiz__calm p { margin: 0 0 var(--space-10); font-size: var(--fs-14); line-height: var(--lh-text); color: var(--heading); text-wrap: pretty; }
.quiz__med a, .quiz__calm a { font-weight: 700; color: var(--heading); }
.quiz__calm { margin: var(--space-24) 0 0; padding: var(--space-18) var(--space-20); border-radius: var(--radius-xl); background: var(--sky-soft); text-align: left; }
.quiz__med[hidden], .quiz__psi-top[hidden], .quiz__crisis-note[hidden] { display: none; }
.quiz__rfoot { margin: var(--space-26) 0 0; padding-top: var(--space-18); border-top: 1px solid var(--border-soft); font-size: var(--fs-13); font-style: italic; color: var(--ink-2); }
@media (min-width: 720px) {
  .quiz__q { font-size: var(--fs-24); }
  .quiz__ractions { grid-auto-flow: column; justify-content: center; }
  .quiz__ractions .btn { width: auto; }
}


/* ==========================================================================
   12. Páginas Recursos y Guía
   ========================================================================== */
.res { padding: var(--sec-y) var(--gutter); }
.res__wrap { max-width: var(--content-w); margin: 0 auto; }

/* Tarjeta destacada de la guía */
.rfeat {
  display: grid; gap: var(--space-28);
  padding: var(--space-24); border-radius: var(--radius-4xl);
  background: rgb(var(--sky-soft-rgb) / .42); border: 1px solid rgb(var(--heading-rgb) / .16);
  box-shadow: var(--shadow-md);
}
.rfeat__cover { align-self: center; justify-self: center; width: 100%; max-width: 300px; }
.cover-shadow { display: block; width: 100%; height: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-cover); }
.rfeat__body { align-self: center; }
.rfeat__tag { display: inline-block; padding: var(--space-4) var(--space-12); border-radius: var(--radius-md); background: var(--white); font: 700 var(--fs-12)/var(--lh-none) var(--font-head); letter-spacing: var(--ls-tag); color: var(--heading); }
.rfeat__title { margin: var(--space-16) 0 0; font: 800 var(--fs-feature-title)/var(--lh-tight) var(--font-head); color: var(--heading); text-wrap: balance; }
.rfeat__text { margin: var(--space-14) 0 0; max-width: 50ch; font-size: var(--fs-16); line-height: var(--lh-text); color: var(--ink); text-wrap: pretty; }
.rfeat__price { margin: var(--space-20) 0 0; font: 800 var(--fs-30)/var(--lh-none) var(--font-head); color: var(--heading); }
.rfeat__price small { font: 500 var(--fs-15)/var(--lh-none) var(--font-head); color: var(--ink-2); margin-left: var(--space-6); }
.rfeat .btn { margin-top: var(--space-22); }

.res__soon { margin-top: var(--sec-y); }
.rsoon {
  display: flex; align-items: flex-start; gap: var(--space-16);
  padding: var(--space-24); border-radius: var(--radius-2xl);
  background: rgb(var(--white-rgb) / .4); border: 1px dashed rgb(var(--heading-rgb) / .28);
}
.rsoon__node { width: 46px; height: 46px; flex: 0 0 auto; border-radius: var(--radius-lg); display: grid; place-items: center; background: var(--mint-soft); }
.rsoon__node svg { width: 24px; height: 24px; fill: none; stroke: var(--heading); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rsoon__body { flex: 1 1 auto; }
.rsoon__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-10); }
.rsoon__name { margin: 0; font: 700 var(--fs-18)/var(--lh-snug) var(--font-head); color: var(--heading); }
.rsoon__soon { padding: var(--space-4) var(--space-12); border-radius: var(--radius-md); background: var(--fill-muted); font: 700 var(--fs-11)/var(--lh-none) var(--font-head); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--heading); }
.rsoon__text { margin: var(--space-10) 0 0; max-width: 54ch; font-size: var(--fs-16); line-height: var(--lh-text); color: var(--ink); text-wrap: pretty; }
@media (min-width: 760px) {
  .rfeat { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--space-44); padding: var(--space-40); align-items: center; }
  .rfeat__cover { max-width: none; }
}

/* Guía: hero con galería */
.gh { padding: calc(var(--header-h) + env(safe-area-inset-top) + var(--sec-y)) var(--gutter) var(--sec-y); }
.gh__wrap { max-width: 1040px; margin: 0 auto; display: grid; gap: var(--space-32); align-items: center; }
.gh__cover { justify-self: center; width: 100%; max-width: 280px; }
.gh__eyebrow { margin: 0 0 var(--space-14); }
.gh__title { margin: 0; font: 800 var(--fs-page-title)/var(--lh-tight) var(--font-head); color: var(--heading); text-wrap: balance; }
.gh__sub { margin: var(--space-18) 0 0; max-width: 52ch; font-size: var(--fs-17); line-height: var(--lh-text); color: var(--ink); text-wrap: pretty; }
.gh__price { margin: var(--space-22) 0 0; font: 800 var(--fs-34)/var(--lh-none) var(--font-head); color: var(--heading); }
.gh__price small { font: 500 var(--fs-16)/var(--lh-none) var(--font-head); color: var(--ink-2); margin-left: var(--space-6); }
.gh__ctas { margin-top: var(--space-24); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); }
.gh__ctas .btn { width: 100%; max-width: 360px; }
.gh__tags { list-style: none; margin: var(--space-20) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-8); }
.gh__tag { display: inline-flex; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-12); border-radius: var(--radius-pill); background: rgb(var(--white-rgb) / .6); border: 1px solid var(--divider); font: 700 var(--fs-13)/var(--lh-none) var(--font-head); color: var(--heading); }
.gh__tag svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: var(--blue-deep); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.jump { display: inline-flex; align-items: center; gap: var(--space-6); min-height: var(--touch); font: 700 var(--fs-15)/var(--lh-normal) var(--font-head); color: var(--blue-deep); text-decoration: none; }
.jump:hover { color: var(--blue-deeper); }
.jump .btn__arrow { transform: rotate(90deg); }
@media (min-width: 820px) {
  .gh__wrap { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--space-60); }
  .gh__cover { max-width: none; }
  .gh__ctas .btn { width: auto; }
}

/* Galería de vista previa tipo tienda */
.pgallery { width: 100%; max-width: 340px; justify-self: center; }
.pgallery__main { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius-md); line-height: 0; }
.pgallery__main img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-cover); }
.pgallery__dots { display: flex; justify-content: center; gap: var(--space-8); margin-top: var(--space-16); }
.pgallery__dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: var(--radius-round); background: rgb(var(--heading-rgb) / .22); cursor: pointer; transition: background-color .2s var(--ease), transform .2s var(--ease); }
.pgallery__dot.is-active { background: var(--blue-deep); transform: scale(1.25); }
.pgallery__thumbs { list-style: none; margin: var(--space-16) 0 0; padding: var(--space-4); display: flex; gap: var(--space-10); justify-content: center; overflow-x: auto; scrollbar-width: none; }
.pgallery__thumbs::-webkit-scrollbar { display: none; }
.pgallery__thumb { width: 56px; flex: 0 0 auto; padding: 0; border: 2px solid transparent; border-radius: var(--radius-md); background: none; cursor: pointer; overflow: hidden; line-height: 0; box-shadow: var(--shadow-thumb); transition: border-color .2s var(--ease), transform .2s var(--ease); }
.pgallery__thumb img { width: 100%; height: auto; display: block; }
.pgallery__thumb:hover { transform: translateY(-2px); }
.pgallery__thumb.is-active { border-color: var(--blue-deep); }
.pgallery__thumb:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 2px; }
@media (min-width: 820px) { .pgallery { max-width: none; } }

/* Visor ampliado (lightbox) */
.lightbox { position: fixed; inset: 0; z-index: var(--z-lightbox); display: flex; align-items: center; justify-content: center; padding: var(--space-28); background: rgb(var(--ink-rgb) / .6); backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s var(--ease); }
.lightbox.is-open { opacity: 1; }
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: min(92vw, 560px); max-height: 86vh; width: auto; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-lightbox); }
.lightbox__btn { position: absolute; width: 48px; height: 48px; border: 0; border-radius: var(--radius-round); background: rgb(var(--white-rgb) / .94); color: var(--heading); cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow-lightbox-btn); transition: background-color .2s var(--ease); }
.lightbox__btn:hover { background: var(--white); }
.lightbox__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lightbox__close { top: var(--space-18); right: var(--space-18); }
.lightbox__prev { left: var(--space-14); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: var(--space-14); top: 50%; transform: translateY(-50%); }
@media (min-width: 720px) { .lightbox__prev { left: var(--space-24); } .lightbox__next { right: var(--space-24); } }

/* "Corta y al grano" + 4 pasos en círculos */
.brief__text { margin: var(--space-16) 0 0; max-width: 56ch; font-size: var(--fs-17); line-height: var(--lh-text); color: var(--ink); text-wrap: pretty; }
.psteps { list-style: none; margin: var(--space-30) 0 0; padding: 0; display: flex; gap: var(--space-10); }
.psteps li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-12); text-align: center; }
.pstep__circle { width: clamp(52px, 15vw, 72px); aspect-ratio: 1; border-radius: var(--radius-round); display: grid; place-items: center; background: var(--soft); font: 800 var(--fs-step-num)/var(--lh-none) var(--font-head); color: var(--heading); box-shadow: var(--ring-soft); }
.pstep__label { font: 700 var(--fs-step-label)/var(--lh-snug) var(--font-head); color: var(--heading); text-wrap: balance; }
@media (min-width: 720px) { .psteps { gap: var(--space-16); margin-top: var(--space-34); } }

/* Frase destacada */
.pullq {
  margin: var(--space-28) 0 0; padding: var(--space-22) var(--space-24); border-radius: var(--radius-2xl);
  background: var(--lilac-soft);
  font: 700 var(--fs-quote)/var(--lh-ui) var(--font-head); color: var(--heading); text-wrap: balance;
}

/* Bono */
.bonus { display: flex; align-items: flex-start; gap: var(--space-18); }
.bonus__node { width: 54px; height: 54px; flex: 0 0 auto; border-radius: var(--radius-xl); display: grid; place-items: center; background: var(--butter-soft); }
.bonus__node svg { width: 28px; height: 28px; fill: none; stroke: var(--heading); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bonus__body { flex: 1 1 auto; }
.bonus__kicker { margin: 0 0 var(--space-6); font: 700 var(--fs-12)/var(--lh-snug) var(--font-head); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--blue-deep); }
.bonus__title { margin: 0; font: 700 var(--fs-20)/var(--lh-snug) var(--font-head); color: var(--heading); }
.bonus__text { margin: var(--space-10) 0 0; max-width: 54ch; font-size: var(--fs-16); line-height: var(--lh-text); color: var(--ink); text-wrap: pretty; }

/* Sobre la autora (pared pequeña) */
.author__grid { display: grid; gap: var(--space-32); align-items: center; }
.author__wall { width: 100%; max-width: 280px; margin: 0 auto; }
.author__wall .frame__mat img { aspect-ratio: 4 / 5; width: 100%; height: auto; object-fit: cover; object-position: 50% 28%; }
.author__text .h2 { margin: 0; }
.author__body { margin: var(--space-18) 0 0; font-size: var(--fs-17); line-height: var(--lh-relaxed); color: var(--ink); text-wrap: pretty; }
.author__body strong { font-family: var(--font-head); font-weight: 700; color: var(--heading); }
@media (min-width: 820px) {
  .author__grid { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: var(--space-56); }
  .author__wall { margin: 0; max-width: none; }
}

/* Bloque de compra */
.buybox { padding: var(--space-28) var(--space-24); border-radius: var(--radius-3xl); background: rgb(var(--sky-soft-rgb) / .5); border: 1px solid var(--border); box-shadow: var(--shadow-md); text-align: center; }
.buybox__title { margin: 0; font: 700 var(--fs-22)/var(--lh-snug) var(--font-head); color: var(--heading); text-wrap: balance; }
.buybox__price { margin: var(--space-14) 0 0; font: 800 var(--fs-price-lg)/var(--lh-none) var(--font-head); color: var(--heading); }
.buybox__price small { font: 500 var(--fs-16)/var(--lh-none) var(--font-head); color: var(--ink-2); margin-left: var(--space-6); }
.buybox__note { margin: var(--space-12) auto 0; max-width: 40ch; font-size: var(--fs-15); line-height: var(--lh-text); color: var(--ink-2); text-wrap: pretty; }
.buybox .btn { margin-top: var(--space-24); width: 100%; max-width: 380px; }
@media (min-width: 720px) { .buybox { padding: var(--space-40); } }


/* ==========================================================================
   13. Página Directorio de terapeutas
   ========================================================================== */
.dir { padding: calc(var(--header-h) + env(safe-area-inset-top) + var(--sec-y)) var(--gutter) var(--sec-y); }
.dir__wrap { max-width: var(--content-w); margin: 0 auto; }
.dir__head { text-align: center; max-width: 36ch; margin: 0 auto; }
.dir__mark { display: block; width: 36px; height: 36px; object-fit: contain; margin: 0 auto var(--space-16); opacity: .9; }
.dir__title { margin: 0; font: 800 var(--fs-page-title)/var(--lh-tight) var(--font-head); color: var(--heading); text-wrap: balance; }
.dir__sub { margin: var(--space-14) 0 0; font: 400 var(--fs-17)/var(--lh-text) var(--font-body); color: var(--ink-2); text-wrap: balance; }
@media (min-width: 720px) { .dir__sub { font-size: var(--fs-20); } .dir__mark { width: 42px; height: 42px; } }

/* Buscador */
.search { position: relative; max-width: 620px; margin: var(--space-30) auto 0; }
.search__ico { position: absolute; left: var(--space-18); top: 50%; transform: translateY(-50%); width: 20px; height: 20px; pointer-events: none; fill: none; stroke: var(--blue-deep); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.search__input {
  width: 100%; min-height: 56px; padding: 0 var(--space-48) 0 var(--space-52);
  border-radius: var(--radius-xl); border: 1px solid var(--border);
  background: rgb(var(--white-rgb) / .72); color: var(--ink);
  font: 400 var(--fs-16)/var(--lh-snug) var(--font-body); -webkit-appearance: none;
  box-shadow: var(--shadow-input);
  transition: border-color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.search__input::placeholder { color: var(--ink-2); opacity: .8; }
.search__input::-webkit-search-cancel-button { display: none; }
.search__input:focus { outline: none; border-color: rgb(var(--blue-rgb) / .6); background: var(--white); box-shadow: var(--ring-focus); }
.search__input:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 2px; }
.search__clear { position: absolute; right: var(--space-10); top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: var(--radius-round); background: var(--fill-muted); color: var(--heading); cursor: pointer; display: grid; place-items: center; }
.search__clear svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.search__clear:hover { background: rgb(var(--heading-rgb) / .14); }
.search__clear[hidden] { display: none; }

/* Barra de filtros */
.filters { margin: var(--space-16) auto 0; max-width: 980px; display: flex; align-items: center; gap: var(--space-12); }
.filters__open {
  appearance: none; cursor: pointer; flex: 1 1 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  min-height: 50px; padding: 0 var(--space-18); border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: rgb(var(--white-rgb) / .65);
  font: 700 var(--fs-15)/var(--lh-none) var(--font-head); color: var(--heading);
}
.filters__open svg { width: 20px; height: 20px; fill: none; stroke: var(--blue-deep); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.filters__count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 var(--space-6); border-radius: var(--radius-pill); background: var(--blue-deep); color: var(--white); font: 700 var(--fs-12)/var(--lh-none) var(--font-head); }
.filters__count[hidden] { display: none; }

/* Chips (filtros, opciones) */
.fgroup__chips { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.chip {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-8);
  min-height: 40px; padding: 0 var(--space-16); border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: rgb(var(--white-rgb) / .6);
  font: 700 var(--fs-14)/var(--lh-none) var(--font-head); color: var(--ink-2); white-space: nowrap;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.chip:hover { border-color: rgb(var(--blue-rgb) / .4); color: var(--heading); }
.chip[aria-pressed="true"] { background: var(--sky-soft); border-color: rgb(var(--blue-rgb) / .55); color: var(--heading); box-shadow: var(--ring-selected); }
.chip:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 2px; }
.chip--adapt svg { width: 16px; height: 16px; fill: var(--heart); stroke: none; }
.chip--adapt[aria-pressed="true"] svg { fill: var(--blue-deep); }

/* Orden */
.sort { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-10); }
.sort__label { font: 700 var(--fs-13)/var(--lh-none) var(--font-head); color: var(--ink-2); }
.sort__field { position: relative; }
.sort__select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  min-height: 50px; padding: 0 var(--space-40) 0 var(--space-16); border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: rgb(var(--white-rgb) / .65);
  color: var(--heading); font: 700 var(--fs-14)/var(--lh-snug) var(--font-head);
}
.sort__select:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 2px; }
.sort__chev { position: absolute; right: var(--space-14); top: 50%; transform: translateY(-50%); width: 15px; height: 15px; pointer-events: none; fill: none; stroke: var(--blue-deep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.sheet__head, .sheet__foot { display: none; }

/* Escritorio: panel de filtros en línea */
@media (min-width: 900px) {
  .filters { flex-wrap: wrap; align-items: flex-start; }
  .filters__open { display: none; }
  .filters__panel { flex: 1 1 100%; display: grid; gap: var(--space-18); }
  .fgroup { display: grid; grid-template-columns: minmax(140px, 180px) 1fr; gap: var(--space-6) var(--space-20); align-items: center; }
  .fgroup__label { font: 700 var(--fs-13)/var(--lh-ui) var(--font-head); color: var(--heading); }
  .sort { margin-left: auto; margin-top: var(--space-4); }
}

/* Móvil: el panel de filtros es una hoja que sube desde abajo */
@media (max-width: 899px) {
  .filters { flex-wrap: wrap; }
  .sort { flex: 1 1 auto; display: grid; grid-template-columns: auto 1fr; align-items: center; justify-content: flex-end; }
  .sort__select { width: 100%; min-width: 0; }
  .filters__panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sheet);
    max-height: 86vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    display: grid; gap: var(--space-22); padding: var(--space-8) var(--gutter) calc(var(--space-20) + env(safe-area-inset-bottom));
    background: var(--base); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    box-shadow: var(--shadow-sheet);
    transform: translateY(101%); visibility: hidden;
    transition: transform .4s var(--ease), visibility 0s linear .4s;
  }
  .filters__panel.is-open { transform: none; visibility: visible; transition: transform .4s var(--ease); }
  .fgroup { display: grid; gap: var(--space-12); }
  .fgroup__label { font: 700 var(--fs-14)/var(--lh-ui) var(--font-head); color: var(--heading); }
  .sheet__head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1; margin: 0 calc(-1 * var(--gutter)); padding: var(--space-16) var(--gutter) var(--space-12); background: var(--base); }
  .sheet__head::after { content: ""; position: absolute; top: var(--space-8); left: 50%; transform: translateX(-50%); width: 40px; height: 4px; border-radius: var(--radius-xs); background: var(--border); }
  .sheet__title { margin: 0; font: 700 var(--fs-18)/var(--lh-none) var(--font-head); color: var(--heading); }
  .sheet__close { width: 40px; height: 40px; border: 0; border-radius: var(--radius-round); background: var(--fill-muted); color: var(--heading); cursor: pointer; display: grid; place-items: center; }
  .sheet__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .sheet__foot { display: grid; grid-template-columns: auto 1fr; gap: var(--space-12); align-items: center; position: sticky; bottom: 0; margin: var(--space-4) calc(-1 * var(--gutter)) 0; padding: var(--space-14) var(--gutter) calc(var(--space-6) + env(safe-area-inset-bottom)); background: linear-gradient(0deg, var(--base) 70%, rgb(var(--base-rgb) / 0)); }
  .sheet__clear { appearance: none; border: 0; background: none; cursor: pointer; min-height: var(--touch); padding: 0 var(--space-4); font: 700 var(--fs-15)/var(--lh-none) var(--font-head); color: var(--blue-deep); }
  .sheet__apply { width: 100%; }
}
.filters__sheet-backdrop { position: fixed; inset: 0; z-index: var(--z-backdrop); background: var(--scrim); opacity: 0; transition: opacity .35s var(--ease); }
.filters__sheet-backdrop.is-open { opacity: 1; }
.filters__sheet-backdrop[hidden] { display: none; }
@media (min-width: 900px) { .filters__sheet-backdrop { display: none !important; } }

/* Filtros populares (acceso rápido, deslizable) */
.pop { margin: var(--space-14) auto 0; max-width: 980px; }
.pop__label { display: block; margin: 0 0 var(--space-10); font: 700 var(--fs-12)/var(--lh-ui) var(--font-head); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-2); }
.pop__row { display: flex; gap: var(--space-8); overflow-x: auto; padding-bottom: var(--space-4); scrollbar-width: none; }
.pop__row::-webkit-scrollbar { display: none; }
.pop__chip { flex: 0 0 auto; }
.pop__chip svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pop__chip--precio svg { transition: transform .2s var(--ease); }
.pop__chip--precio[aria-expanded="true"] svg { transform: rotate(180deg); }
.pop__price { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-10); padding: var(--space-12) var(--space-16); border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--border-soft); }
.pop__price[hidden] { display: none; }

/* Banner de ayuda (lila) */
.help-banner {
  margin: var(--space-26) 0 0; padding: var(--space-22) var(--space-24); border-radius: var(--radius-3xl);
  background: var(--lilac-soft); border: 1px solid rgb(var(--heading-rgb) / .1);
  display: grid; gap: var(--space-18);
}
.help-banner__body { display: flex; align-items: flex-start; gap: var(--space-14); }
.help-banner__mark { width: 28px; height: 28px; flex: 0 0 auto; object-fit: contain; margin-top: var(--space-2); }
.help-banner__title { margin: 0; font: 700 var(--fs-18)/var(--lh-ui) var(--font-head); color: var(--heading); text-wrap: balance; }
.help-banner__text { margin: var(--space-6) 0 0; font-size: var(--fs-15); line-height: var(--lh-normal); color: var(--ink); text-wrap: pretty; }
.help-banner__cta { width: 100%; }
@media (min-width: 720px) {
  .help-banner { grid-template-columns: 1fr auto; align-items: center; padding: var(--space-24) var(--space-30); }
  .help-banner__cta { width: auto; }
}

/* Banner discreto al final de la lista */
.help-foot {
  margin: var(--space-22) 0 0; padding: var(--space-20) var(--space-24); border-radius: var(--radius-2xl); text-align: center;
  background: var(--surface); border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
}
.help-foot p { margin: 0; font-size: var(--fs-14); line-height: var(--lh-text); color: var(--ink-2); text-wrap: pretty; }
.help-foot a { font-family: var(--font-head); font-weight: 700; color: var(--blue-deep); text-decoration: underline; text-decoration-color: var(--underline); text-underline-offset: 3px; transition: color .25s var(--ease), text-decoration-color .25s var(--ease); }
.help-foot a:hover { color: var(--blue-deeper); text-decoration-color: var(--blue-deep); }

/* Contador de resultados y estados */
.dir__count { margin: var(--space-30) 0 var(--space-18); font: 700 var(--fs-14)/var(--lh-normal) var(--font-head); color: var(--ink-2); }
.dir__count b { color: var(--heading); font-weight: 800; }
.dir__status { margin: var(--space-30) 0 0; padding: var(--space-40) var(--space-24); text-align: center; border-radius: var(--radius-3xl); background: rgb(var(--white-rgb) / .4); border: 1px dashed rgb(var(--heading-rgb) / .25); font: 500 var(--fs-16)/var(--lh-normal) var(--font-head); color: var(--ink-2); }
.dir__status[hidden] { display: none; }
.dir__status p { margin: 0 0 var(--space-18); }
.dir__status p:last-child { margin-bottom: 0; }
.dir__status:empty { margin: 0; padding: 0; border: 0; background: none; }
.dir__status:focus, .dir__count:focus { outline: none; }
.dir__status-title { font-weight: 700; color: var(--heading); }
.dir__status-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-10); }
/* Sin fichas que mostrar (error o directorio vacío): solo queda el mensaje */
.dir.is-sin-fichas .search, .dir.is-sin-fichas .filters, .dir.is-sin-fichas .pop,
.dir.is-sin-fichas .dir__count, .dir.is-sin-fichas .help-foot { display: none; }
/* Filtros que dependen de los horarios: aparecen cuando haya agenda conectada */
.fgroup[hidden], .pop__chip[hidden] { display: none; }
.dir__empty { margin: var(--space-10) 0 0; padding: var(--space-40) var(--space-24); text-align: center; border-radius: var(--radius-3xl); background: rgb(var(--white-rgb) / .4); border: 1px dashed rgb(var(--heading-rgb) / .25); }
.dir__empty[hidden] { display: none; }
.dir__empty p { margin: 0 0 var(--space-18); font: 500 var(--fs-16)/var(--lh-normal) var(--font-head); color: var(--ink-2); }

/* Rejilla de tarjetas */
.tgrid { display: grid; gap: var(--space-20); }
.tgrid[hidden] { display: none; }
@media (min-width: 640px) { .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-22); } }
@media (min-width: 1000px) { .tgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Tarjeta de terapeuta */
.tcard {
  display: flex; flex-direction: column;
  padding: var(--space-28) var(--space-24); border-radius: var(--radius-3xl);
  background: rgb(var(--white-rgb) / .58); border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-md);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
@media (hover: hover) and (min-width: 900px) {
  .tcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-action); }
}
.tcard__top { display: flex; align-items: flex-start; gap: var(--space-14); }
.avatar { flex: 0 0 auto; border-radius: var(--radius-round); display: grid; place-items: center; font-family: var(--font-body); font-weight: 400; color: var(--heading); box-shadow: var(--shadow-avatar); overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.tcard .avatar { width: 76px; height: 76px; font-size: var(--fs-26); }
.tone-a { background: var(--sky-soft); }
.tone-b { background: var(--lilac-soft); }
.tone-c { background: var(--mint-soft); }
.tone-d { background: var(--butter-soft); }
.tone-e { background: var(--pink-soft); }
.tcard__id { min-width: 0; padding-top: var(--space-2); }
.tcard__name { margin: 0; font: 700 var(--fs-18)/var(--lh-snug) var(--font-head); color: var(--heading); text-wrap: balance; }
.tcard__grade { margin: var(--space-4) 0 0; font: 700 var(--fs-13)/var(--lh-normal) var(--font-head); color: var(--blue-deep); }
.tcard__ced { margin: var(--space-4) 0 0; font: 400 var(--fs-13)/var(--lh-ui) var(--font-body); color: var(--ink-2); }
.tcard__rating { margin: var(--space-8) 0 0; display: inline-flex; align-items: center; gap: var(--space-6); font: 700 var(--fs-13)/var(--lh-none) var(--font-head); color: var(--heading); white-space: nowrap; }
.rating-star { width: 15px; height: 15px; flex: 0 0 auto; fill: var(--star); }
.tcard__rating span { font-weight: 500; color: var(--ink-2); }

.pills { list-style: none; margin: var(--space-16) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-6); }
.pill { padding: var(--space-4) var(--space-10); border-radius: var(--radius-md); background: var(--lilac-soft); font: 700 var(--fs-13)/var(--lh-snug) var(--font-head); color: var(--heading); }

.tmeta { list-style: none; margin: var(--space-14) 0 0; padding: 0; display: grid; gap: var(--space-8); }
.tmeta li { display: flex; align-items: center; gap: var(--space-8); font-size: var(--fs-14); line-height: var(--lh-normal); color: var(--ink-2); }
.tmeta svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: var(--blue-deep); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tmeta b { font-family: var(--font-head); font-weight: 700; color: var(--heading); }
.tprice { font-family: var(--font-head); }
.tprice .amt { font-weight: 800; color: var(--heading); font-size: var(--fs-16); }

/* Tarifa adaptable (invitación cálida) */
.adapt {
  margin: var(--space-16) 0 0; padding: var(--space-12) var(--space-16); border-radius: var(--radius-xl);
  background: var(--sky-soft); display: flex; gap: var(--space-10); align-items: flex-start;
}
.adapt__heart { width: 18px; height: 18px; margin-top: 1px; flex: 0 0 auto; fill: var(--heart); stroke: none; }
.adapt__txt { margin: 0; font-size: var(--fs-13); line-height: var(--lh-normal); color: var(--heading); text-wrap: pretty; }
.adapt__txt b { font-weight: 700; }

/* Horarios */
.slots { margin: var(--space-18) 0 0; }
.slots__label { margin: 0 0 var(--space-8); font: 700 var(--fs-12)/var(--lh-ui) var(--font-head); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-2); }
.slots__tz { text-transform: none; letter-spacing: 0; font-weight: 500; }
.slots__row { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.slot {
  appearance: none; cursor: pointer; position: relative;   /* contiene su texto para lector de pantalla dentro del calendario deslizable */
  display: inline-flex; align-items: center; gap: var(--space-6);
  min-height: 38px; padding: 0 var(--space-12); border-radius: var(--radius);
  border: 1px solid rgb(var(--blue-rgb) / .28); background: rgb(var(--white-rgb) / .7);
  font: 700 var(--fs-13)/var(--lh-none) var(--font-head); color: var(--blue-deep); text-decoration: none;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.slot:hover { background: var(--sky-soft); border-color: rgb(var(--blue-rgb) / .5); color: var(--heading); }
.slot:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 2px; }

.tcard__actions { margin-top: auto; padding-top: var(--space-20); display: grid; gap: var(--space-10); }
.tcard__actions .btn { width: 100%; min-height: 50px; }

.js .tcard.reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .tcard.reveal.is-in { opacity: 1; transform: none; }

/* ---- Perfil completo (diálogo) ---- */
.profile { position: fixed; inset: 0; z-index: var(--z-dialog); display: flex; justify-content: center; opacity: 0; transition: opacity .3s var(--ease); }
.profile[hidden] { display: none; }
.profile.is-open { opacity: 1; }
.profile__scrim { position: absolute; inset: 0; background: var(--scrim); backdrop-filter: blur(3px); }
.profile__dialog {
  position: relative; z-index: 1; width: 100%; max-width: 760px;
  margin-top: auto; background: var(--base);
  border-radius: var(--radius-dialog) var(--radius-dialog) 0 0; max-height: 96vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  box-shadow: var(--shadow-sheet);
  transform: translateY(26px); transition: transform .35s var(--ease);
}
.profile.is-open .profile__dialog { transform: none; }
@media (min-width: 760px) {
  .profile { align-items: center; padding: var(--space-28); }
  .profile__dialog { margin: 0; border-radius: var(--radius-dialog); max-height: 90vh; transform: translateY(16px) scale(.98); }
}
.profile__close { position: absolute; top: var(--space-14); right: var(--space-14); z-index: 3; width: var(--touch); height: var(--touch); border: 0; border-radius: var(--radius-round); background: rgb(var(--white-rgb) / .9); color: var(--heading); cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow-btn-float); }
.profile__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.profile__grab { display: none; }
@media (max-width: 759px) {
  .profile__grab { display: block; position: sticky; top: 0; z-index: 2; height: 20px; }
  .profile__grab::after { content: ""; position: absolute; top: var(--space-8); left: 50%; transform: translateX(-50%); width: 42px; height: 4px; border-radius: var(--radius-xs); background: rgb(var(--heading-rgb) / .22); }
}

.profile__hero { padding: var(--space-10) var(--space-24) var(--space-24); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-14); }
.profile__hero .avatar { width: 108px; height: 108px; font-size: var(--fs-38); }
.profile__hero-main { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); }
.profile__name { margin: 0; font: 800 var(--fs-26)/var(--lh-tight) var(--font-head); color: var(--heading); text-wrap: balance; }
.profile__grade { margin: 0; font: 700 var(--fs-14)/var(--lh-normal) var(--font-head); color: var(--blue-deep); }
.profile__ced { margin: 0; font: 400 var(--fs-13)/var(--lh-ui) var(--font-body); color: var(--ink-2); }
.profile__rating { display: inline-flex; align-items: center; gap: var(--space-6); font: 700 var(--fs-14)/var(--lh-none) var(--font-head); color: var(--heading); white-space: nowrap; }
.profile__rating span { font-weight: 500; color: var(--ink-2); }
.profile__price { margin: var(--space-2) 0 0; font: 800 var(--fs-22)/var(--lh-none) var(--font-head); color: var(--heading); }
.profile__price small { font: 500 var(--fs-14)/var(--lh-none) var(--font-head); color: var(--ink-2); }
.profile__hero .pills { justify-content: center; margin-top: 0; }
.profile__hero .btn { margin-top: var(--space-6); min-height: 52px; padding: 0 var(--space-32); }
@media (min-width: 760px) {
  .profile__hero { flex-direction: row; text-align: left; align-items: flex-start; gap: var(--space-24); padding: var(--space-28) var(--space-36) var(--space-24); }
  .profile__hero .avatar { width: 120px; height: 120px; }
  .profile__hero .pills { justify-content: flex-start; }
  .profile__hero-main { align-items: flex-start; }
}

.profile__body { padding: var(--space-4) var(--space-24) var(--space-120); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-34); }
@media (min-width: 760px) { .profile__body { padding: var(--space-4) var(--space-36) var(--space-44); gap: var(--space-38); } }
.psec__title { margin: 0 0 var(--space-12); font: 700 var(--fs-18)/var(--lh-snug) var(--font-head); color: var(--heading); }
.psec__note { margin: calc(-1 * var(--space-6)) 0 var(--space-12); font-size: var(--fs-13); line-height: var(--lh-normal); color: var(--ink-2); }
.psec__p { margin: 0; font-size: var(--fs-15); line-height: var(--lh-relaxed); color: var(--ink); text-wrap: pretty; }
.psec__p--bio { white-space: pre-line; }
.psec .tmeta { margin-top: 0; }
.psec__years { display: inline-flex; align-items: baseline; gap: var(--space-8); margin: 0; }
.psec__years b { font: 800 var(--fs-30)/var(--lh-none) var(--font-head); color: var(--heading); }
.psec__years span { font: 500 var(--fs-15)/var(--lh-ui) var(--font-head); color: var(--ink-2); }
.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-10); }
.plist li { position: relative; padding-left: var(--space-22); font-size: var(--fs-15); line-height: var(--lh-text); color: var(--ink); text-wrap: pretty; }
.plist li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: var(--radius-round); background: var(--butterfly); }
.pspec { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-14); }
.pspec li { display: grid; gap: 3px; }
.pspec__name { font: 700 var(--fs-15)/var(--lh-ui) var(--font-head); color: var(--heading); }
.pspec__desc { font-size: var(--fs-14); line-height: var(--lh-text); color: var(--ink-2); text-wrap: pretty; }

/* Calendario semanal */
.week { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, 1fr); gap: var(--space-10); overflow-x: auto; padding-bottom: var(--space-6); scrollbar-width: thin; }
.week__col { display: grid; gap: var(--space-8); align-content: start; }
.week__day { text-align: center; font: 700 var(--fs-12)/var(--lh-ui) var(--font-head); color: var(--heading); padding-bottom: var(--space-2); }
.week .slot { justify-content: center; width: 100%; }
.week__none { text-align: center; font: 400 var(--fs-12)/var(--lh-normal) var(--font-body); color: var(--ink-2); opacity: .7; padding: var(--space-8) 0; }

/* Tarifa adaptable (bloque cálido en el perfil) */
.adapt-block { padding: var(--space-22); border-radius: var(--radius-2xl); background: var(--sky-soft); }
.adapt-block__title { margin: 0; display: flex; align-items: center; gap: var(--space-8); font: 700 var(--fs-17)/var(--lh-ui) var(--font-head); color: var(--heading); }
.adapt-block__title svg { width: 20px; height: 20px; flex: 0 0 auto; fill: var(--heart); stroke: none; }
.adapt-block p { margin: var(--space-10) 0 0; font-size: var(--fs-15); line-height: var(--lh-text); color: var(--heading); text-wrap: pretty; }
.adapt-block .btn { margin-top: var(--space-16); }
.profile__superv { display: flex; align-items: center; gap: var(--space-10); padding: var(--space-14) var(--space-16); border-radius: var(--radius-lg); background: rgb(var(--white-rgb) / .55); border: 1px solid var(--border-soft); font-size: var(--fs-14); line-height: var(--lh-normal); color: var(--ink-2); text-wrap: pretty; }
.profile__superv svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: var(--blue-deep); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Reseñas */
.reviews { display: grid; gap: var(--space-16); }
.review { padding: var(--space-18) var(--space-20); border-radius: var(--radius-xl); background: rgb(var(--white-rgb) / .55); border: 1px solid rgb(var(--heading-rgb) / .1); }
.review__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); }
.review__stars { display: inline-flex; gap: var(--space-2); }
.review__stars svg { width: 15px; height: 15px; fill: var(--star); }
.review__stars .is-empty { fill: rgb(var(--heading-rgb) / .14); }
.review__date { font: 500 var(--fs-13)/var(--lh-none) var(--font-head); color: var(--ink-2); }
.review__who-row { margin: var(--space-12) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-10); }
.review__alias { font: 700 var(--fs-13)/var(--lh-snug) var(--font-head); color: var(--heading); }
.review__verified { display: inline-flex; align-items: center; gap: var(--space-4); padding: 3px var(--space-8); border-radius: var(--radius-pill); background: var(--mint-soft); font: 700 var(--fs-11)/var(--lh-none) var(--font-head); color: var(--heading); }
.review__verified svg { width: 12px; height: 12px; flex: 0 0 auto; fill: none; stroke: var(--heading); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.review__since { margin: var(--space-8) 0 0; display: flex; align-items: center; gap: var(--space-6); font: 500 var(--fs-13)/var(--lh-ui) var(--font-head); color: var(--ink-2); }
.review__since svg { width: 13px; height: 13px; flex: 0 0 auto; fill: none; stroke: var(--blue-deep); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.review__text { margin: var(--space-12) 0 0; font-size: var(--fs-14); line-height: var(--lh-text); color: var(--ink); text-wrap: pretty; }
.reviews__note { margin: var(--space-4) 0 0; font-size: var(--fs-13); font-style: italic; line-height: var(--lh-normal); color: var(--ink-2); display: flex; align-items: flex-start; gap: var(--space-8); }
.reviews__note svg { width: 15px; height: 15px; margin-top: 1px; flex: 0 0 auto; fill: none; stroke: var(--blue-deep); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Botón fijo dentro del perfil (móvil) */
.profile__sticky { position: sticky; bottom: 0; z-index: 2; margin-top: var(--space-8); padding: var(--space-12) var(--gutter) calc(var(--space-12) + env(safe-area-inset-bottom)); background: linear-gradient(0deg, var(--base) 66%, rgb(var(--base-rgb) / 0)); }
.profile__sticky .btn { width: 100%; box-shadow: var(--shadow-float); }
@media (min-width: 760px) { .profile__sticky { display: none; } }


/* ==========================================================================
   14. Páginas simples: aviso de privacidad, 404, avisos sin JavaScript
   ========================================================================== */
.legal { padding: calc(var(--header-h) + env(safe-area-inset-top) + var(--sec-y)) var(--gutter) var(--sec-y); }
.legal__wrap { max-width: var(--narrow-w); margin: 0 auto; }
.legal__title { margin: 0; font: 800 var(--fs-page-title)/var(--lh-tight) var(--font-head); color: var(--heading); text-wrap: balance; }
.legal__meta { margin: var(--space-12) 0 0; font-size: var(--fs-15); color: var(--ink-2); }
.legal__body { margin-top: var(--space-28); }
.legal__body h2 { margin: var(--space-34) 0 0; font: 700 var(--fs-20)/var(--lh-snug) var(--font-head); color: var(--heading); }
.legal__body h2:first-child { margin-top: 0; }
.legal__body p, .legal__body li { font-size: var(--fs-16); line-height: var(--lh-relaxed); color: var(--ink); text-wrap: pretty; }
.legal__body p { margin: var(--space-12) 0 0; }
.legal__body ul { margin: var(--space-12) 0 0; padding-left: var(--space-22); }
.legal__body li + li { margin-top: var(--space-6); }

/* Nota de contenido pendiente (visible a propósito) */
.pending {
  margin: var(--space-24) 0 0; padding: var(--space-18) var(--space-20); border-radius: var(--radius-xl);
  background: var(--butter-soft); border: 1.5px dashed rgb(var(--heading-rgb) / .45);
  font: 700 var(--fs-16)/var(--lh-normal) var(--font-head); color: var(--heading);
}
.pending p { margin: 0; }
.pending p + p { margin-top: var(--space-6); font: 400 var(--fs-15)/var(--lh-text) var(--font-body); }
.placeholder { background: var(--butter-soft); border-radius: var(--radius-xs); padding: 0 var(--space-4); font-weight: 700; color: var(--heading); }

/* 404 */
.nf__links { list-style: none; margin: var(--space-28) auto 0; padding: 0; display: grid; gap: var(--space-10); max-width: 420px; text-align: left; }
.nf__links a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); min-height: 56px; padding: var(--space-12) var(--space-18); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border-soft); font: 700 var(--fs-16)/var(--lh-ui) var(--font-head); color: var(--heading); text-decoration: none; transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.nf__links a:hover { background: rgb(var(--white-rgb) / .85); border-color: var(--border-action); color: var(--blue-deeper); }
.nf__links .btn__arrow { color: var(--blue-deep); }

/* Aviso cuando JavaScript está desactivado */
.noscript-msg { margin: var(--space-20) 0 0; padding: var(--space-18) var(--space-20); border-radius: var(--radius-xl); background: var(--butter-soft); font-size: var(--fs-15); line-height: var(--lh-text); color: var(--heading); }
.noscript-msg a { font-weight: 700; color: var(--heading); }


/* ==========================================================================
   15. Modo de alto contraste de Windows (forced-colors)
   ========================================================================== */
@media (forced-colors: active) {
  .btn, .chip, .seg__opt, .quiz__opt, .slot, .filters__open, .sort__select, .search__input { border: 1px solid ButtonText; }
  .seg__opt.is-active, .chip[aria-pressed="true"], .quiz__opt.is-sel { outline: 2px solid Highlight; }
  .inf::before { color: CanvasText; background: none; }
}


/* ==========================================================================
   16. Movimiento reducido: se respeta la preferencia del sistema
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Red de seguridad general: ninguna animación ni transición con movimiento */
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0s !important; transition-delay: 0s !important;
  }
  .draw { animation: none !important; stroke-dashoffset: 0; opacity: 1; }
  .fit__ring, .fit__tick { transform: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; }
  .steps::before, .step__node { transform: none !important; opacity: 1 !important; }
  .js .hero__inner > * { opacity: 1; transform: none; }
  .js .reveal, .js .tcard.reveal, .js .inc.reveal li { opacity: 1; transform: none; }
  .js .quiz__screen { animation: none; }
  .tcard:hover, .pgallery__thumb:hover { transform: none; }
  .btn:hover .btn__arrow, .btn:focus-visible .btn__arrow, .card__cta:hover .btn__arrow, .test-link:hover .btn__arrow { transform: none; }
}