/* Landing clínicas · ATN Project
   Una sola forma manda en toda la página: la pieza de cobre del logo (el cuadrilátero
   inclinado dentro de la A). Aparece en grande (máscaras de foto, banda, pie) y su canto
   inclinado en pequeño (botones, pestañas, citas de la agenda, viñetas).
   Cada capítulo es una carpeta de expediente con su color. Los fondos no son planos: mezclan
   los colores de la marca en degradados suaves, como el propio cobre del logo, que va de un
   cobre claro a un cobre tostado. Un grano muy fino evita que los degradados hagan bandas. */

@font-face {
  font-family: "Sora";
  src: url("../fonts/sora-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ tokens -- */
:root {
  --negro: #0e0c0a;
  --carbon: #1c1916;
  --grafito: #262320;
  --grafito-alto: #3a3631;
  --hueso: #ebebe8;
  --blanco: #f8f8f6;
  --papel: #ffffff;
  --cobre: #d8965c;
  --cobre-claro: #ebc29b;
  --cobre-medio: #c4824a;
  --cobre-hondo: #8a5a2e;
  --tinta-clara: #f6f3ef;
  --tinta-clara-suave: #c9c0b6;
  --tinta-oscura: #17140f;
  --tinta-oscura-suave: #575049;
  --tinta-cobre: #1a120b;
  --tinta-cobre-suave: #47301e;
  --error: #a3361f;
  --ok: #1f6b35;

  /* Degradados de marca */
  --grad-cobre: linear-gradient(155deg, #efbb88 0%, #d8965c 45%, #b9773f 100%);
  --grad-cobre-boton: linear-gradient(100deg, #efba86 0%, #d8965c 48%, #c27e45 100%);
  --grad-negro-boton: linear-gradient(100deg, #3b2b1e 0%, #1d140c 55%, #120c07 100%);
  --grad-oscuro-chip: linear-gradient(180deg, #4b453f 0%, #34302b 100%);
  --brillo-blanco: linear-gradient(105deg, transparent 36%, rgb(255 255 255 / 0.42) 50%, transparent 64%);
  --brillo-cobre: linear-gradient(105deg, transparent 36%, rgb(232 171 112 / 0.5) 50%, transparent 64%);
  --grano: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.6 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");

  /* La pieza del logo: puntos normalizados del cuadrilátero de cobre. */
  --pieza: polygon(67.1% 0, 100% 49.7%, 60.4% 100%, 0 100%);
  /* Su canto izquierdo sube a 34° de la vertical (tan = 0,674). En piezas pequeñas
     se suaviza (0,4) para que el texto quepa: misma forma, corrección óptica. */
  --pendiente: 0.674;
  --pendiente-chica: 0.4;

  --sc-canvas: var(--negro);
  --sc-surface: var(--carbon);
  --sc-ink: var(--tinta-clara);
  --sc-ink-soft: var(--tinta-clara-suave);
  --sc-accent: var(--cobre);
  --sc-accent-ink: var(--tinta-cobre);
  --sc-font-display: "Sora", system-ui, sans-serif;
  --sc-font-text: "Sora", system-ui, sans-serif;

  --t-cuerpo: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-entradilla: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem);
  --t-frase: clamp(1.4rem, 1.05rem + 1.4vw, 2.25rem);
  --t-titulo: clamp(1.95rem, 1.3rem + 2.5vw, 3.4rem);
  --t-gigante: clamp(2.9rem, 1rem + 6.6vw, 6.4rem);

  --gutter: clamp(1.25rem, 4.2vw, 4rem);
  --maxw: 84rem;
  --seccion: clamp(5rem, 9vw, 9.5rem);
  --radio: 4px;
  --radio-grande: 10px;
  --barra-h: 4.25rem;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --expo: cubic-bezier(0.16, 1, 0.3, 1);
  --sombra-flota: 0 2px 6px rgb(70 40 15 / 0.1), 0 34px 70px -34px rgb(70 38 12 / 0.5);
}

/* ---------------------------------------------------------------- base -- */
html { scroll-padding-top: calc(var(--barra-h) + 0.5rem); }
body {
  background: var(--negro);
  color: var(--tinta-clara);
  font-family: "Sora", system-ui, sans-serif;
  font-size: var(--t-cuerpo);
  line-height: 1.6;
  letter-spacing: -0.005em;
  font-weight: 400;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2 { font-weight: 700; letter-spacing: -0.032em; line-height: 1.04; text-wrap: balance; }
h2 { font-size: var(--t-titulo); }
h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; }
p { text-wrap: pretty; }
a { color: inherit; }
strong { font-weight: 650; }
button { font: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.solo-lectores {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; /* taste-skill-ignore: texto solo para lectores de pantalla, no es una línea */
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--cobre); color: var(--tinta-cobre); padding: 0.75rem 1rem; font-weight: 600;
}
.saltar:focus { top: 1rem; }
.envoltorio { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.forma { display: inline-block; width: 0.78em; height: 0.77em; fill: url(#g-cobre); flex: none; }

/* Sin JavaScript todo el contenido se ve: las entradas animadas son un extra. */
.no-js [data-sc-cue], .no-js [data-sc-in], .no-js [data-sc-stagger] > * { opacity: 1 !important; transform: none !important; }
.no-js [data-sc-reveal] { clip-path: none !important; }

/* --------------------------------------------------------- temas por capítulo --
   Cada carpeta tiene su color, pero en degradado: una base vertical muy suave y dos
   luces de cobre (como la lámpara de la recepción del hero) en esquinas opuestas. */
.tema-carbon {
  --tinta: var(--tinta-clara); --tinta-suave: var(--tinta-clara-suave); --acento: var(--cobre);
  --fondo:
    radial-gradient(70rem 42rem at 92% 4%, rgb(216 150 92 / 0.15), transparent 66%),
    radial-gradient(58rem 42rem at -8% 74%, rgb(150 96 50 / 0.16), transparent 70%),
    linear-gradient(180deg, #1c1916 0%, #171411 55%, #13110f 100%);
}
.tema-hueso {
  --tinta: var(--tinta-oscura); --tinta-suave: var(--tinta-oscura-suave); --acento: var(--cobre-hondo);
  --fondo:
    radial-gradient(64rem 40rem at 104% 0%, rgb(216 150 92 / 0.22), transparent 62%),
    radial-gradient(52rem 46rem at -10% 52%, rgb(235 194 155 / 0.34), transparent 68%),
    radial-gradient(62rem 40rem at 102% 100%, rgb(216 150 92 / 0.16), transparent 64%),
    linear-gradient(180deg, #f2f1ed 0%, #e9e7e2 100%);
}
.tema-cobre {
  --tinta: var(--tinta-cobre); --tinta-suave: var(--tinta-cobre-suave); --acento: var(--tinta-cobre);
  --fondo:
    radial-gradient(58rem 38rem at 0% 0%, rgb(248 212 172 / 0.6), transparent 62%),
    radial-gradient(64rem 48rem at 100% 100%, rgb(156 94 44 / 0.36), transparent 66%),
    linear-gradient(155deg, #dda067 0%, #d48f55 52%, #ca854c 100%);
}
.tema-grafito {
  --tinta: var(--tinta-clara); --tinta-suave: var(--tinta-clara-suave); --acento: var(--cobre);
  --fondo:
    radial-gradient(62rem 40rem at -6% 0%, rgb(216 150 92 / 0.16), transparent 65%),
    radial-gradient(58rem 46rem at 106% 64%, rgb(150 96 50 / 0.22), transparent 68%),
    linear-gradient(180deg, #2b2724 0%, #211e1b 60%, #1b1917 100%);
}
.tema-blanco {
  --tinta: var(--tinta-oscura); --tinta-suave: var(--tinta-oscura-suave); --acento: var(--cobre-hondo);
  --fondo:
    radial-gradient(62rem 40rem at 102% 0%, rgb(235 194 155 / 0.42), transparent 62%),
    radial-gradient(48rem 42rem at -6% 100%, rgb(216 150 92 / 0.14), transparent 68%),
    linear-gradient(180deg, #fbfbf9 0%, #f3f1ec 100%);
}
.capitulo { position: relative; isolation: isolate; background: var(--fondo); color: var(--tinta); }
.capitulo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grano); opacity: 0.32; mix-blend-mode: soft-light;
}
.tema-hueso, .tema-blanco { --sc-accent: var(--cobre-hondo); }
.tema-cobre { --sc-accent: var(--tinta-cobre); }
.tema-hueso ::selection, .tema-blanco ::selection { background: var(--cobre-hondo); color: var(--blanco); }
.tema-cobre ::selection { background: var(--tinta-cobre); color: var(--cobre); }
.capitulo :focus-visible { outline-color: var(--acento); }

/* ------------------------------------------------------------------ botones --
   El relleno va en ::before con el canto inclinado; el botón en sí queda rectangular,
   así el anillo de foco nunca se recorta. Al pasar el ratón cruza un brillo. */
.boton {
  --b-fondo: var(--grad-cobre-boton);
  --b-brillo: var(--brillo-blanco);
  --b-tinta: var(--tinta-cobre);
  --b-h: 3.25rem;
  --b-s: calc(var(--b-h) * var(--pendiente-chica));
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: var(--b-h);
  padding: 0 calc(var(--b-s) + 1.25rem);
  color: var(--b-tinta);
  font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; line-height: 1.1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 0; background: none;
  transition: transform 140ms var(--ease);
}
.boton::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--b-brillo) 165% 0 / 240% 100% no-repeat, var(--b-fondo);
  clip-path: polygon(var(--b-s) 0, 100% 0, calc(100% - var(--b-s)) 100%, 0 100%);
  transition: background-position 700ms var(--expo), filter 180ms var(--ease);
}
.boton svg { width: 1.15rem; height: 1.15rem; flex: none; fill: none; stroke: currentColor; }
.boton:active { transform: translateY(1px) scale(0.985); }
.boton:focus-visible { outline: 2px solid var(--b-anillo, var(--cobre)); outline-offset: 4px; }
.boton[disabled] { cursor: progress; opacity: 0.7; }
.boton--principal { --b-fondo: var(--grad-cobre-boton); --b-tinta: var(--tinta-cobre); }
.boton--contorno { --b-fondo: linear-gradient(100deg, rgb(255 255 255 / 0.17), rgb(255 255 255 / 0.08)); --b-brillo: linear-gradient(105deg, transparent 36%, rgb(255 255 255 / 0.22) 50%, transparent 64%); --b-tinta: var(--tinta-clara); }
.boton--negro { --b-fondo: var(--grad-negro-boton); --b-brillo: var(--brillo-cobre); --b-tinta: var(--blanco); --b-anillo: var(--tinta-cobre); }
.boton--suave { --b-fondo: linear-gradient(100deg, rgb(23 20 15 / 0.1), rgb(23 20 15 / 0.05)); --b-brillo: linear-gradient(105deg, transparent 36%, rgb(255 255 255 / 0.6) 50%, transparent 64%); --b-tinta: var(--tinta-oscura); --b-anillo: var(--cobre-hondo); }
.boton--ancho { width: 100%; }
.boton--pequeno { --b-h: 2.75rem; font-size: 0.9375rem; }
@media (hover: hover) and (pointer: fine) {
  .boton:hover::before { background-position: -65% 0, 0 0; filter: brightness(1.05); }
}
.tema-hueso .boton--contorno, .tema-blanco .boton--contorno { --b-fondo: linear-gradient(100deg, rgb(23 20 15 / 0.1), rgb(23 20 15 / 0.05)); --b-tinta: var(--tinta-oscura); }

.enlace-whatsapp, .enlace-texto {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem;
  font-weight: 600; text-decoration: none; color: inherit;
}
.enlace-whatsapp svg, .enlace-texto svg { width: 1.25rem; height: 1.25rem; flex: none; fill: currentColor; }
.enlace-whatsapp span:not(.solo-lectores), .enlace-texto { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; text-decoration-color: color-mix(in oklab, currentColor 45%, transparent); }
.enlace-whatsapp--grande { font-size: 1.0625rem; }
@media (hover: hover) and (pointer: fine) {
  .enlace-whatsapp:hover span, .enlace-texto:hover { text-decoration-color: currentColor; }
}

.etiqueta-ejemplo {
  display: inline-block; font-size: 0.8125rem; font-weight: 600; line-height: 1;
  padding: 0.3rem 0.5rem; border-radius: var(--radio);
  background: linear-gradient(100deg, #f7e5d3, #f3dcc4); color: #75491f;
}

/* -------------------------------------------------------------- barra fija -- */
.barra {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--barra-h);
  color: var(--tinta-clara);
  transition: background-color 260ms var(--ease), color 260ms var(--ease);
}
.barra__dentro {
  height: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 1.5rem;
}
.marca { display: block; flex: none; }
.marca img { width: 7.25rem; height: auto; }
.marca__oscuro { display: none; }
.pestanas { margin-inline: auto; display: none; }
.pestanas ul { display: flex; gap: 0.25rem; }
.pestanas a {
  --s: calc(2.25rem * var(--pendiente-chica));
  position: relative; isolation: isolate; display: block;
  padding: 0.55rem calc(var(--s) + 0.6rem); font-size: 0.9375rem; font-weight: 500;
  text-decoration: none; color: inherit; white-space: nowrap;
}
.pestanas a::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: color-mix(in oklab, currentColor 12%, transparent);
  clip-path: polygon(var(--s) 0, 100% 0, calc(100% - var(--s)) 100%, 0 100%);
  transition: opacity 160ms var(--ease);
}
.pestanas a[aria-current="true"] { font-weight: 650; color: var(--barra-acento-tinta, var(--tinta-cobre)); }
.pestanas a[aria-current="true"]::before { opacity: 1; background: var(--barra-acento, var(--grad-cobre-boton)); }
@media (hover: hover) and (pointer: fine) { .pestanas a:hover::before { opacity: 1; } }
.barra__acciones { display: flex; align-items: center; gap: 1.25rem; margin-left: auto; }
.boton--barra { --b-h: 2.75rem; font-size: 0.9375rem; }

/* La barra toma el color de la carpeta de debajo, un poco translúcida para que el
   degradado del capítulo se intuya al pasar por detrás. */
.barra.esta-fuera-hero {
  background: var(--barra-fondo, rgb(14 12 10 / 0.86));
  -webkit-backdrop-filter: saturate(1.35) blur(14px);
          backdrop-filter: saturate(1.35) blur(14px);
}
.barra.esta-fuera-hero .pestanas { display: block; animation: aparecer 220ms var(--ease) both; }
@keyframes aparecer { from { opacity: 0; } }
.barra[data-tema="sintomas"] { --barra-fondo: rgb(28 25 22 / 0.84); }
.barra[data-tema="tratamiento"] { --barra-fondo: rgb(242 241 237 / 0.84); --barra-acento: var(--tinta-oscura); --barra-acento-tinta: var(--hueso); color: var(--tinta-oscura); }
.barra[data-tema="calculadora"] { --barra-fondo: rgb(221 160 103 / 0.88); --barra-acento: var(--tinta-cobre); --barra-acento-tinta: var(--cobre-claro); color: var(--tinta-cobre); }
.barra[data-tema="precios"] { --barra-fondo: rgb(43 39 36 / 0.84); }
.barra[data-tema="vale"] { --barra-fondo: rgb(251 251 249 / 0.86); --barra-acento: var(--tinta-oscura); --barra-acento-tinta: var(--blanco); color: var(--tinta-oscura); }
.barra[data-tema="pie"] { --barra-fondo: rgb(14 12 10 / 0.86); }
.barra.esta-fuera-hero:is([data-tema="tratamiento"], [data-tema="calculadora"], [data-tema="vale"]) .marca__claro { display: none; }
.barra.esta-fuera-hero:is([data-tema="tratamiento"], [data-tema="calculadora"], [data-tema="vale"]) .marca__oscuro { display: block; }
.barra[data-tema="calculadora"] .boton--barra { --b-fondo: var(--grad-negro-boton); --b-brillo: var(--brillo-cobre); --b-tinta: var(--cobre-claro); }
.barra[data-tema="tratamiento"] :focus-visible, .barra[data-tema="vale"] :focus-visible { outline-color: var(--cobre-hondo); }
.barra[data-tema="calculadora"] :focus-visible { outline-color: var(--tinta-cobre); }

/* --------------------------------------------------------------------- hero -- */
.hero {
  --inicio: 57svh;
  --paso: 3.25rem;
  --pestana-h: 2.5rem;
  position: relative; height: 100svh; min-height: 40rem; overflow: clip;
  background: var(--negro); color: var(--tinta-clara);
}
.hero__fondo { position: absolute; inset: -6% -4% auto; height: 112%; will-change: transform; }
.hero__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 46%; max-width: none; filter: brightness(0.74) saturate(0.95); }
.hero__texto {
  position: absolute; z-index: 3; inset: clamp(6.5rem, 15svh, 9.5rem) var(--gutter) auto;
  text-align: center;
}
.hero h1 { font-size: var(--t-gigante); letter-spacing: -0.04em; line-height: 0.98; }
.hero__entradilla {
  max-width: 44ch; margin: 1.5rem auto 0;
  font-size: var(--t-entradilla); line-height: 1.5; color: var(--tinta-clara-suave);
}

.avisos { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.aviso {
  position: absolute; display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.9rem 0.55rem 0.75rem; border-radius: var(--radio);
  background: linear-gradient(180deg, #ffffff, #f6f2ec); color: var(--tinta-oscura);
  font-size: 0.875rem; font-weight: 600; white-space: nowrap;
  box-shadow: 0 18px 34px -16px rgb(0 0 0 / 0.6);
  will-change: transform;
}
.aviso svg { width: 1rem; height: 1rem; fill: var(--cobre-hondo); color: var(--cobre-hondo); }
.aviso--1 { left: 6%; top: calc(var(--inicio) - 9.5rem); }
.aviso--2 { right: 5%; top: calc(var(--inicio) - 13rem); }
.aviso--3 { left: 25%; top: calc(var(--inicio) - 3.9rem); }
.aviso--3 svg { fill: none; color: var(--error); }
.aviso--2 svg { fill: none; }

/* Las carpetas: degradado vertical (la luz cae sobre el borde de cada una), un filo de luz
   arriba y una sombra suave sobre la carpeta de detrás, para que se lean como capas. */
.carpetas { position: absolute; inset: var(--inicio) 0 0 0; z-index: 4; }
.carpeta {
  --ancho: calc(78% + var(--i) * 5.5%);
  position: absolute; top: calc(var(--i) * var(--paso)); bottom: calc(-1 * var(--paso));
  left: 50%; width: var(--ancho); margin-left: calc(var(--ancho) / -2);
  background: var(--c-fondo); color: var(--ct);
  box-shadow: inset 0 1px 0 var(--c-luz, rgb(255 255 255 / 0.12));
  filter: drop-shadow(0 -10px 20px rgb(8 6 4 / 0.3));
  text-decoration: none; will-change: transform;
}
.carpeta__pestana {
  --s: calc(var(--pestana-h) * var(--pendiente));
  position: absolute; bottom: calc(100% - 1px); left: var(--x);
  display: flex; align-items: center; height: var(--pestana-h);
  padding: 0 calc(var(--s) + 0.85rem);
  background: linear-gradient(180deg, var(--c-labio), var(--c-arriba));
  box-shadow: inset 0 1px 0 var(--c-luz, rgb(255 255 255 / 0.12));
  color: var(--ct);
  font-size: 1rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  clip-path: polygon(var(--s) 0, calc(100% - var(--s)) 0, 100% 100%, 0 100%);
  transition: transform 180ms var(--ease);
}
.carpeta:focus-visible, .carpeta__pestana:focus-visible { outline: 2px solid var(--cobre); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  a.carpeta:hover .carpeta__pestana, .carpeta__pestana:hover { transform: translateY(-4px); }
}
.carpeta--vale {
  --c-arriba: #fdfcfa; --c-labio: #ffffff; --c-luz: #ffffff; --ct: var(--tinta-oscura); --x: 64%;
  --c-fondo: linear-gradient(180deg, #fdfcfa 0%, #f0ede7 8rem, #e6e2db 100%);
}
.carpeta--precios {
  --c-arriba: #3a3531; --c-labio: #4a443e; --ct: var(--tinta-clara); --x: 7%;
  --c-fondo: radial-gradient(40rem 10rem at 78% 0%, rgb(216 150 92 / 0.18), transparent 70%), linear-gradient(180deg, #3a3531 0%, #2a2623 8rem, #221f1c 100%);
}
.carpeta--calculadora {
  --c-arriba: #e5a770; --c-labio: #f0bc89; --c-luz: rgb(255 240 222 / 0.55); --ct: var(--tinta-cobre); --x: 44%;
  --c-fondo: linear-gradient(180deg, #e5a770 0%, #d8965c 5rem, #c8844b 100%);
}
.carpeta--tratamiento {
  --c-arriba: #f4f3ef; --c-labio: #fcfbf8; --c-luz: #ffffff; --ct: var(--tinta-oscura); --x: 77%;
  --c-fondo: radial-gradient(42rem 9rem at 30% 0%, rgb(235 194 155 / 0.4), transparent 72%), linear-gradient(180deg, #f4f3ef 0%, #e7e5df 6rem, #dedbd4 100%);
}
.carpeta--sintomas {
  --c-arriba: #2e2925; --c-labio: #3c3631; --ct: var(--tinta-clara); --x: 20%;
  --c-fondo: radial-gradient(60rem 14rem at 72% 0%, rgb(216 150 92 / 0.17), transparent 70%), linear-gradient(180deg, #2e2925 0%, #1c1916 9rem);
}
.carpeta--frente { --ancho: 100%; bottom: -2px; }
.carpeta__dentro {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1rem;
  padding: clamp(1.25rem, 3.4svh, 2rem) var(--gutter) 0;
}

/* --------------------------------------------------- capítulo 1 · síntomas -- */
.paciente { padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(3.5rem, 6vw, 5rem); }
.paciente__dentro { max-width: 66rem; }
.paciente h2 { font-size: var(--t-titulo); }
.frase { margin-top: 2rem; max-width: 36ch; font-size: var(--t-frase); line-height: 1.38; font-weight: 500; letter-spacing: -0.02em; }
.mini {
  --s: 0.36em;
  display: inline-block; height: 1.05em; width: 2.3em; margin: 0 0.08em;
  vertical-align: -0.2em; overflow: hidden;
  clip-path: polygon(var(--s) 0, 100% 0, calc(100% - var(--s)) 100%, 0 100%);
  background: var(--grafito);
}
.mini img { width: 100%; height: 100%; object-fit: cover; filter: brightness(1.15) contrast(1.05); }

.sintomas {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem);
  align-items: center; padding: 0 var(--gutter) var(--seccion) 0;
  max-width: calc(var(--maxw) + 8vw); margin-inline: auto;
}
.sintomas__foto {
  aspect-ratio: 359 / 420; width: 112%; margin-left: -12%;
  clip-path: var(--pieza); background: var(--grafito);
}
.sintomas__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.sintomas__texto h2 { max-width: 16ch; }
.sintomas__lista {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 2.25rem;
}
.sintomas__lista h3 { display: flex; align-items: baseline; gap: 0.55rem; }
.sintomas__lista h3 .forma { transform: translateY(0.05em); }
.sintomas__lista p { margin-top: 0.45rem; color: var(--tinta-suave); font-size: 1rem; line-height: 1.55; }

/* ------------------------------------------------ capítulo 2 · tratamiento -- */
.giro { position: relative; overflow: clip; min-height: 92svh; display: flex; align-items: center; padding-block: var(--seccion); }
.giro__marco { position: absolute; inset: 0; pointer-events: none; }
.giro__forma {
  position: absolute; right: -14vw; top: 50%; translate: 0 -50%;
  height: 128svh; aspect-ratio: 359 / 354;
  background: radial-gradient(60% 50% at 30% 70%, rgb(255 226 196 / 0.35), transparent 70%), var(--grad-cobre);
  clip-path: var(--pieza);
}
.giro__texto { position: relative; }
.giro h2 { font-size: var(--t-gigante); letter-spacing: -0.04em; max-width: 9ch; }
.giro p { margin-top: 1.75rem; max-width: 30ch; font-size: var(--t-entradilla); line-height: 1.5; }

/* La agenda (el pico): escenario fijado y datos de ejemplo en un array. */
.agenda-acto__escenario {
  display: flex; align-items: center;
  background: radial-gradient(46rem 32rem at 76% 58%, rgb(216 150 92 / 0.16), transparent 70%);
}
.agenda-acto__dentro {
  display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center; padding-top: calc(var(--barra-h) + 1rem); padding-bottom: 1.5rem;
}
.agenda-acto__texto h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.9rem); max-width: 13ch; }
.pasos-agenda { position: relative; margin-top: 2rem; min-height: 11rem; }
.pasos-agenda li { position: absolute; inset: 0 0 auto 0; }
.pasos-agenda h3 { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); display: flex; gap: 0.6rem; align-items: baseline; }
.pasos-agenda h3::before { content: ""; flex: none; width: 0.8em; height: 0.79em; background: var(--grad-cobre); clip-path: var(--pieza); transform: translateY(0.06em); }
.pasos-agenda p { margin-top: 0.6rem; color: var(--tinta-suave); max-width: 36ch; }

.agenda {
  --fila: clamp(2.05rem, 4.3svh, 2.6rem);
  --col-horas: 3.25rem;
  background: linear-gradient(180deg, #ffffff 0%, #fcfbf8 100%); color: var(--tinta-oscura); border-radius: var(--radio-grande);
  padding: 1.1rem 1.1rem 1.25rem;
  box-shadow: var(--sombra-flota);
}
.agenda__cabecera { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 0.75rem 1.5rem; margin-bottom: 1rem; }
.agenda__dia { font-weight: 650; font-size: 1.0625rem; }
.agenda__dia span { font-weight: 400; color: var(--tinta-oscura-suave); }
.agenda__contadores { display: flex; gap: 1.25rem; }
.agenda__contadores div { display: flex; flex-direction: column-reverse; }
.agenda__contadores dt { font-size: 0.8125rem; color: var(--tinta-oscura-suave); line-height: 1.25; }
.agenda__contadores dd { font-size: 1.5rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; transition: color 200ms var(--ease); }
.agenda__contadores dd.es-cero { color: var(--ok); }
.agenda__cols { display: grid; grid-template-columns: var(--col-horas) repeat(4, minmax(0, 1fr)); font-size: 0.875rem; font-weight: 600; padding-bottom: 0.4rem; }
.agenda__pendientes-titulo { color: var(--error); }
.agenda__cuerpo { position: relative; display: grid; grid-template-columns: var(--col-horas) minmax(0, 1fr); }
.agenda__horas li { height: var(--fila); font-size: 0.8125rem; color: var(--tinta-oscura-suave); font-variant-numeric: tabular-nums; line-height: 1; padding-top: 0.2rem; }
.agenda__rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: var(--fila); }
.agenda__rejilla span { border-left: 1px solid #e9e6e1; border-top: 1px solid #e9e6e1; } /* taste-skill-ignore: rejilla de la agenda (tabla de interfaz data-ui) */
.agenda__rejilla span:nth-child(4n) { background: linear-gradient(180deg, #fbefeb, #f8e9e4); }
.agenda__capa { position: absolute; top: 0; bottom: 0; left: var(--col-horas); right: 0; container-type: inline-size; }
.cita {
  --s: calc((var(--fila) - 6px) * var(--pendiente-chica));
  --cita-fondo: var(--grad-oscuro-chip);
  position: absolute; left: 0; top: 0;
  width: calc(25cqw - 8px); height: calc(var(--fila) - 6px);
  transform: translate3d(calc(var(--c, 0) * 25cqw + 4px), calc(var(--r, 0) * var(--fila) + 3px), 0);
  display: flex; align-items: center; gap: 0.3rem;
  padding: 0 calc(var(--s) + 0.2rem) 0 calc(var(--s) + 0.1rem);
  font-size: 0.8125rem; font-weight: 600; line-height: 1; white-space: nowrap; overflow: hidden;
  color: var(--tinta-clara); isolation: isolate;
  will-change: transform;
}
.cita::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--cita-fondo);
  clip-path: polygon(var(--s) 0, 100% 0, calc(100% - var(--s)) 100%, 0 100%);
}
.cita.es-cita::before { animation: destello 600ms var(--ease) both; }
@keyframes destello { from { filter: brightness(1.45); } }
.cita__texto { position: relative; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cita__antes, .cita__despues { display: block; overflow: hidden; text-overflow: ellipsis; }
.cita__despues { position: absolute; inset: 0; opacity: 0; }
.cita__ok { flex: none; width: 0.95rem; height: 0.95rem; color: var(--cobre-claro); opacity: 0; transform: scale(0.6); transition: opacity 200ms var(--ease), transform 200ms var(--ease); }
.cita.tiene-ok .cita__ok { opacity: 1; transform: none; }
.cita--llamada { --cita-fondo: linear-gradient(180deg, #fbebe5, #f5dbd2); color: var(--error); }
.cita--llamada svg.cita__icono { width: 0.85rem; height: 0.85rem; fill: currentColor; flex: none; }
.cita--llamada.es-cita, .cita--espera.es-cita { --cita-fondo: var(--grad-cobre-boton); color: var(--tinta-cobre); }
.cita--llamada.es-cita .cita__ok, .cita--espera.es-cita .cita__ok { color: var(--tinta-cobre); }
.cita--espera { --cita-fondo: linear-gradient(180deg, #f9e8d6, #f2d7bc); color: var(--cobre-hondo); }
.cita--pisada { --cita-fondo: linear-gradient(180deg, #ba482e, #962f1a); }
.cita--pisada.esta-resuelta { --cita-fondo: var(--grad-oscuro-chip); }
.cita--cancelada { transition: opacity 240ms var(--ease); }
.cita--cancelada.esta-cancelada { --cita-fondo: linear-gradient(180deg, #fbebe5, #f5dbd2); color: var(--error); text-decoration: line-through; }
.cita--cancelada.se-fue { opacity: 0; }

/* ------------------------------------------- servicios: cinco módulos que invitan
   Las pestañas avanzan solas con una barra de progreso, se marcan al verlas y cada módulo
   se "reproduce" al abrirse. Ratón encima o foco: pausa. Clic o toque: mandas tú. */
.servicios { padding-block: clamp(3rem, 5vw, 5rem) var(--seccion); }
.servicios__rejilla { display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.servicios__indice h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.6rem); max-width: 14ch; }
.servicios__pista { display: flex; align-items: center; gap: 0.55rem; margin-top: 0.75rem; color: var(--tinta-suave); font-size: 0.975rem; }
.servicios__pista svg { width: 1.15rem; height: 1.15rem; flex: none; fill: none; stroke: var(--cobre-hondo); }
.pista-dedo { display: none; }
@media (hover: none), (pointer: coarse) { .pista-raton { display: none; } .pista-dedo { display: inline; } }

.servicios__lista { margin-top: 1.5rem; display: grid; gap: 0.15rem; }
.modulo-tab {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 0.75rem;
  width: 100%; padding: 0.55rem 0 0.6rem; border: 0; background: none; cursor: pointer; text-align: left;
  color: var(--tinta-suave); transition: color 180ms var(--ease);
}
.modulo-tab__icono {
  width: 2.35rem; height: 2.35rem; padding: 0.55rem; flex: none; border-radius: var(--radio);
  fill: currentColor; color: inherit;
  background: rgb(23 20 15 / 0.06);
  transition: background-color 200ms var(--ease), color 200ms var(--ease), transform 300ms var(--expo);
}
.modulo-tab__nombre { font-size: clamp(1.25rem, 0.95rem + 1vw, 1.85rem); font-weight: 650; letter-spacing: -0.028em; line-height: 1.15; transition: transform 300ms var(--expo); }
.modulo-tab__visto {
  width: 1.35rem; height: 1.35rem; color: var(--cobre-hondo); opacity: 0;
  stroke-dasharray: 24; stroke-dashoffset: 24;
  transition: opacity 200ms var(--ease), stroke-dashoffset 420ms var(--expo);
}
.modulo-tab.esta-visto .modulo-tab__visto { opacity: 1; stroke-dashoffset: 0; }
.modulo-tab__barra { grid-column: 2 / -1; height: 3px; margin-top: 0.5rem; border-radius: 2px; overflow: hidden; background: rgb(23 20 15 / 0.09); }
.modulo-tab__barra i { display: block; height: 100%; background: var(--grad-cobre-boton); transform-origin: left; transform: scaleX(0); }
.modulo-tab[aria-selected="true"] { color: var(--tinta); }
.modulo-tab[aria-selected="true"] .modulo-tab__icono { background: var(--grad-cobre-boton); color: var(--tinta-cobre); }
.servicios:not(.en-marcha) .modulo-tab[aria-selected="true"] .modulo-tab__barra i { transform: scaleX(1); }
.modulo-tab:focus-visible { outline: 2px solid var(--cobre-hondo); outline-offset: 4px; border-radius: var(--radio); }
@media (hover: hover) and (pointer: fine) {
  .modulo-tab:hover { color: var(--tinta); }
  .modulo-tab:hover .modulo-tab__nombre { transform: translateX(6px); }
  .modulo-tab:hover .modulo-tab__icono { transform: rotate(-6deg) scale(1.06); }
}

.servicios__control { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.5rem; margin-top: 1.5rem; }
.control {
  --s: calc(2.75rem * var(--pendiente-chica) * 0.6);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-width: 3rem; height: 2.75rem; padding: 0 calc(var(--s) + 0.75rem);
  border: 0; background: none; cursor: pointer; color: var(--tinta-oscura); font-size: 0.9375rem; font-weight: 600;
  transition: transform 140ms var(--ease);
}
.control::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgb(23 20 15 / 0.1), rgb(23 20 15 / 0.05));
  clip-path: polygon(var(--s) 0, 100% 0, calc(100% - var(--s)) 100%, 0 100%);
  transition: background-color 160ms var(--ease);
}
.control svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; }
.control .ico-play { display: none; fill: currentColor; stroke: none; }
.control[data-estado="pausado"] .ico-pausa { display: none; }
.control[data-estado="pausado"] .ico-play { display: block; }
.control:active { transform: scale(0.96); }
.control:focus-visible { outline: 2px solid var(--cobre-hondo); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .control:hover::before { background: linear-gradient(100deg, rgb(23 20 15 / 0.16), rgb(23 20 15 / 0.08)); } }
.servicios__vistos { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; font-size: 0.9rem; color: var(--tinta-suave); }
.vistos__piezas { display: inline-flex; gap: 3px; }
.vistos__piezas i { width: 0.8rem; height: 0.79rem; background: rgb(23 20 15 / 0.16); clip-path: var(--pieza); transition: background-color 200ms var(--ease); }
.vistos__piezas i.lleno { background: var(--grad-cobre); animation: pieza-llena 520ms var(--expo); }
@keyframes pieza-llena { from { transform: scale(0.4) rotate(-20deg); } }
.servicios__completo { margin-top: 1rem; font-weight: 600; }
.servicios__completo[hidden] { display: none; }
.servicios__completo:not([hidden]) { animation: abrir 520ms var(--expo) both; }

.servicios__paneles { position: relative; min-height: 32rem; display: grid; touch-action: pan-y; }
.servicios__forma {
  position: absolute; left: -3%; top: 50%; translate: 0 -50%;
  width: 63%; aspect-ratio: 359 / 354;
  background: var(--forma-fondo, var(--grad-cobre)); clip-path: var(--pieza);
}
.servicio { grid-area: 1 / 1; position: relative; display: grid; grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); gap: 2.5rem; align-items: center; }
.js .servicio { opacity: 0; visibility: hidden; transition: opacity 260ms var(--ease), visibility 0s 260ms; }
.js .servicio.esta-activo { opacity: 1; visibility: visible; transition: opacity 260ms var(--ease); }
.no-js .servicios__paneles { gap: 3rem; }
.no-js .servicio { grid-area: auto; }
.no-js .servicios__control { display: none; }
.servicio__objeto { display: flex; justify-content: center; padding: 2.5rem 0; }
.servicio__frase { font-size: var(--t-entradilla); line-height: 1.45; font-weight: 500; }
.lista-forma { margin-top: 1.25rem; display: grid; gap: 0.6rem; }
.lista-forma li { position: relative; padding-left: 1.4rem; color: var(--tinta-suave); }
.lista-forma li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.62em; height: 0.61em; background: var(--grad-cobre); clip-path: var(--pieza); }
.siguiente-modulo { margin-top: 1.75rem; }
.siguiente-modulo svg { transition: transform 300ms var(--expo); }
@media (hover: hover) and (pointer: fine) { .siguiente-modulo:hover svg { transform: translateX(4px); } }

/* Fragmentos de interfaz de ejemplo (data-ui) */
[data-ui] .etiqueta-ejemplo { margin-left: auto; }
.chat, .llamada, .ficha, .flujo, .busqueda {
  width: min(100%, 23rem); background: linear-gradient(180deg, #ffffff, #fbf9f5); color: var(--tinta-oscura);
  border-radius: var(--radio-grande); padding: 1rem;
  box-shadow: 0 2px 4px hsl(30 20% 10% / 0.12), 0 22px 44px -18px hsl(30 30% 10% / 0.45); /* taste-skill-ignore: fragmento de interfaz (data-ui) que flota sobre la forma */
}
.chat { display: flex; flex-direction: column; gap: 0.55rem; background: linear-gradient(180deg, #f5f2ec, #efebe3); }
.chat__cabecera, .llamada__cabecera, .ficha__cabecera { display: flex; align-items: center; gap: 0.5rem; font-weight: 650; font-size: 0.9375rem; margin-bottom: 0.25rem; }
.punto-vivo { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--ok); }
.burbuja { position: relative; max-width: 86%; padding: 0.55rem 0.75rem 0.4rem; border-radius: var(--radio); font-size: 0.9375rem; line-height: 1.4; }
.burbuja__hora { display: block; text-align: right; font-size: 0.8125rem; color: var(--tinta-oscura-suave); margin-top: 0.15rem; }
.burbuja--paciente { align-self: flex-end; background: linear-gradient(180deg, #e3f1e1, #d8ead5); }
.burbuja--agente { align-self: flex-start; background: var(--papel); }
.burbuja__puntos { position: absolute; left: 0.8rem; top: 0.85rem; display: flex; gap: 4px; opacity: 0; }
.burbuja__puntos i { width: 6px; height: 6px; border-radius: 50%; background: var(--tinta-oscura-suave); }
.llamada__cabecera svg { width: 1rem; height: 1rem; fill: var(--cobre-hondo); }
.onda { display: flex; align-items: center; gap: 4px; height: 2.75rem; margin: 0.5rem 0 0.75rem; }
.onda i { width: 6px; border-radius: 2px; background: var(--grad-cobre); height: 30%; animation: onda 1.4s var(--ease) infinite alternate; animation-play-state: paused; }
.servicio.esta-activo .onda i { animation-play-state: running; }
.servicios.fuera .onda i { animation-play-state: paused; }
.onda i:nth-child(2) { animation-delay: -0.3s; height: 70%; } .onda i:nth-child(3) { animation-delay: -0.6s; height: 50%; }
.onda i:nth-child(4) { animation-delay: -0.9s; height: 90%; } .onda i:nth-child(5) { animation-delay: -0.2s; height: 40%; }
.onda i:nth-child(6) { animation-delay: -0.7s; height: 65%; } .onda i:nth-child(7) { animation-delay: -1.1s; height: 35%; }
@keyframes onda { to { transform: scaleY(0.35); } }
.llamada__datos, .ficha__datos { display: grid; gap: 0.6rem; }
.llamada__datos div, .ficha__datos div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.75rem; font-size: 0.9375rem; }
.llamada__datos dt, .ficha__datos dt { color: var(--tinta-oscura-suave); }
.llamada__datos dd, .ficha__datos dd { font-weight: 600; }
.ficha__nombre { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; margin: 0.25rem 0 0.9rem; }
.ficha__notas { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.ficha__notas span { font-size: 0.8125rem; font-weight: 600; padding: 0.3rem 0.55rem; border-radius: var(--radio); background: linear-gradient(180deg, #f1efea, #e8e5df); }
.flujo { display: grid; gap: 0.35rem; }
.flujo li { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.75rem; border-radius: var(--radio); background: linear-gradient(100deg, #f5f2ec, #efebe4); font-weight: 600; font-size: 0.9375rem; }
.flujo li:last-child { background: var(--grad-cobre-boton); color: var(--tinta-cobre); }
.flujo li:last-child .forma { fill: var(--tinta-cobre); }
.busqueda { position: relative; }
.busqueda__consulta { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 0.9rem; border-radius: 999px; background: linear-gradient(180deg, #f3f1ec, #ebe8e2); font-size: 0.9375rem; margin-bottom: 1rem; }
.busqueda__consulta svg { width: 1rem; height: 1rem; fill: none; stroke: var(--tinta-oscura-suave); flex: none; }
.busqueda__url { font-size: 0.8125rem; color: var(--tinta-oscura-suave); }
.busqueda__titulo { font-size: 1.15rem; font-weight: 650; color: #1f3f8a; margin: 0.15rem 0 0.35rem; letter-spacing: -0.01em; }
.busqueda__texto { font-size: 0.9375rem; line-height: 1.5; color: var(--tinta-oscura-suave); }
.busqueda .etiqueta-ejemplo { position: absolute; right: 1rem; bottom: -0.7rem; }

/* Cada módulo se reproduce al abrirse: sus piezas llegan en orden, como si pasara de verdad. */
@media (prefers-reduced-motion: no-preference) {
  .servicio.reproduce [data-paso] { animation: llega-ui 560ms var(--expo) both; animation-delay: var(--r, 0ms); }
  .servicio.reproduce .burbuja--agente .burbuja__puntos { animation: puntos-escribe 620ms linear both; animation-delay: var(--r, 0ms); }
  .servicio.reproduce .burbuja--agente .burbuja__puntos i { animation: punto-salta 310ms ease-in-out 2 alternate both; animation-delay: var(--r, 0ms); }
  .servicio.reproduce .burbuja--agente .burbuja__puntos i:nth-child(2) { animation-delay: calc(var(--r, 0ms) + 90ms); }
  .servicio.reproduce .burbuja--agente .burbuja__puntos i:nth-child(3) { animation-delay: calc(var(--r, 0ms) + 180ms); }
  .servicio.reproduce .burbuja--agente .burbuja__texto,
  .servicio.reproduce .burbuja--agente .burbuja__hora { animation: aparece 280ms var(--ease) both; animation-delay: calc(var(--r, 0ms) + 600ms); }
  .servicio.reproduce .flujo li { animation: paso-flujo 600ms var(--expo) both; animation-delay: var(--r, 0ms); }
  .servicio.reproduce .busqueda__titulo { animation: aparece 400ms var(--ease) both; animation-delay: 650ms; }
  .servicio.reproduce .servicio__dato > * { animation: llega-ui 620ms var(--expo) both; }
  .servicio.reproduce .servicio__dato > :nth-child(2) { animation-delay: 90ms; }
  .servicio.reproduce .servicio__dato > :nth-child(3) { animation-delay: 180ms; }
}
@keyframes llega-ui { from { opacity: 0; transform: translateY(14px) scale(0.985); } }
@keyframes aparece { from { opacity: 0; } }
@keyframes puntos-escribe { 0%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes punto-salta { to { transform: translateY(-4px); } }
@keyframes paso-flujo { from { opacity: 0.25; transform: translateX(-12px); } }

/* ----------------------------------------------- capítulo 3 · calculadora --
   La consulta: una pregunta cada vez. Cada respuesta vuela hasta la historia de la
   clínica, que se va rellenando. El formulario solo aparece después de la última. */
.calculadora { padding-block: var(--seccion); }
.calculadora__rejilla {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "intro intro" "consulta historia";
  gap: clamp(2.25rem, 4vw, 3.5rem) clamp(2rem, 4vw, 4.5rem); align-items: start;
}
.calculadora__intro { grid-area: intro; max-width: 46rem; }
.calculadora__intro h2 { max-width: 18ch; }
.entradilla { margin-top: 1.25rem; font-size: var(--t-entradilla); line-height: 1.5; color: var(--tinta-suave); }
.tema-cobre .entradilla { color: var(--tinta-cobre-suave); }

.consulta-marco { grid-area: consulta; position: relative; }
.consulta-marco__brillo {
  position: absolute; inset: -16% -12%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 236 214 / 0.62), transparent 72%);
  transform: translate(var(--bx, 0%), var(--by, 0%));
  transition: transform 1400ms var(--expo);
}
.consulta {
  --tinta: var(--tinta-oscura); --tinta-suave: var(--tinta-oscura-suave); --acento: var(--cobre-hondo);
  position: relative; z-index: 1;
  background: linear-gradient(180deg, #fffdfa 0%, #faf5ee 100%); color: var(--tinta-oscura);
  border-radius: var(--radio-grande); padding: clamp(1.5rem, 3vw, 2.75rem);
  box-shadow: 0 2px 6px rgb(90 50 20 / 0.12), 0 44px 80px -40px rgb(90 45 15 / 0.6);
}
/* La barra de avance: se llena con cada respuesta y la pieza de cobre viaja con ella */
.consulta__progreso { --progreso: 0; position: relative; height: 1.3rem; margin: -0.4rem 0 1.4rem; container-type: inline-size; }
/* La pista se queda corta lo que asoma la pieza: al 100 % la punta cae justo en el borde del contenido */
.consulta__pista { position: absolute; left: 0; right: 0.75rem; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; overflow: hidden; background: rgb(23 20 15 / 0.08); }
.consulta__relleno {
  position: absolute; inset: 0; border-radius: 3px;
  background: var(--brillo-blanco) 165% 0 / 240% 100% no-repeat, var(--grad-cobre-boton);
  transform-origin: left; transform: scaleX(var(--progreso));
  transition: transform 950ms var(--expo);
}
.consulta__ficha {
  position: absolute; left: 0; top: 50%; width: 1.2rem; height: 1.19rem; margin: -0.6rem 0 0 -0.45rem;
  transform: translateX(calc(var(--progreso) * (100cqw - 0.75rem))); transition: transform 950ms var(--expo);
}
.consulta__ficha i { display: block; width: 100%; height: 100%; background: var(--grad-cobre); clip-path: var(--pieza); }
.consulta__ficha i.salta { animation: salto-pieza 620ms var(--expo); }
.consulta__progreso.completo .consulta__relleno { animation: brillo-barra 1200ms var(--ease) 380ms both; }
.consulta__progreso.completo .consulta__ficha i { animation: llega-meta 760ms var(--expo) 320ms both; }
@keyframes salto-pieza { 0% { transform: none; } 35% { transform: translateY(-8px) rotate(-14deg) scale(1.18); } 100% { transform: none; } }
@keyframes brillo-barra { from { background-position: 165% 0, 0 0; } to { background-position: -65% 0, 0 0; } }
@keyframes llega-meta { 0% { transform: none; } 45% { transform: translateY(-6px) scale(1.55) rotate(-22deg); } 100% { transform: scale(1.2); } }

.consulta__escenario { display: grid; min-height: 31rem; }
.consulta__escenario[hidden] { display: none; }
.paso { grid-area: 1 / 1; align-self: start; min-width: 0; }
.paso__icono { position: relative; width: 4.25rem; height: 4.2rem; }
.paso__icono::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 30% 75%, rgb(255 230 204 / 0.4), transparent 70%), var(--grad-cobre); clip-path: var(--pieza); }
.paso__icono svg { position: absolute; left: 22%; top: 40%; width: 46%; height: 46%; overflow: visible; fill: none; stroke: #fffaf4; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.paso__icono svg .relleno { fill: #fffaf4; stroke: none; }
.paso__pregunta { margin-top: 1.25rem; font-size: clamp(1.45rem, 1.05rem + 1.3vw, 2.1rem); font-weight: 650; letter-spacing: -0.03em; line-height: 1.16; text-wrap: balance; max-width: 24ch; }
.paso__pregunta:focus { outline: none; }
.paso__ayuda { margin-top: 0.6rem; color: var(--tinta-oscura-suave); max-width: 46ch; }
.paso__opciones { margin-top: 1.6rem; display: grid; gap: 0.5rem; }
.paso__pie { margin-top: 1.1rem; min-height: 2.75rem; display: flex; align-items: center; }
.paso--inicio .boton { margin-top: 1.75rem; }
.paso__garantias { margin-top: 2.25rem; display: grid; gap: 0.85rem; }
.paso__garantias li { display: flex; gap: 0.75rem; align-items: baseline; color: var(--tinta-oscura-suave); }
.paso__garantias strong { color: var(--tinta-oscura); font-weight: 650; }
.paso__garantias li::before { content: ""; flex: none; width: 0.75rem; height: 0.74rem; background: var(--grad-cobre); clip-path: var(--pieza); transform: translateY(0.08em); }
.paso--sin-js .paso__pregunta { margin-top: 0; }

.opcion {
  --s: 0.8rem;
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 0.85rem; width: 100%;
  min-height: 3.6rem; padding: 0.7rem calc(var(--s) + 1rem) 0.7rem calc(var(--s) + 0.9rem);
  border: 0; background: none; cursor: pointer; text-align: left;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--tinta-oscura);
  transition: transform 140ms var(--ease);
}
.opcion::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--brillo-blanco) 165% 0 / 240% 100% no-repeat, linear-gradient(100deg, #f4efe7, #eee8de);
  clip-path: polygon(var(--s) 0, 100% 0, calc(100% - var(--s)) 100%, 0 100%);
  transition: background-position 700ms var(--expo), filter 180ms var(--ease);
}
.opcion__pieza { width: 0.95rem; height: 0.94rem; flex: none; background: var(--grad-cobre); clip-path: var(--pieza); transform: scale(0.72); transition: transform 300ms var(--expo); }
.opcion__texto { flex: 1; min-width: 0; }
.opcion__check { width: 1.3rem; height: 1.3rem; flex: none; color: var(--tinta-cobre); opacity: 0; stroke-dasharray: 24; stroke-dashoffset: 24; transition: opacity 160ms var(--ease), stroke-dashoffset 420ms var(--expo) 80ms; }
.opcion:active { transform: scale(0.985); }
.opcion:focus-visible { outline: 2px solid var(--cobre-hondo); outline-offset: 3px; }
.opcion[disabled] { cursor: default; }
.opcion.elegida { color: var(--tinta-cobre); }
.opcion.elegida::before { background: var(--grad-cobre-boton); }
.opcion.elegida .opcion__pieza { background: var(--tinta-cobre); transform: scale(1) rotate(-8deg); }
.opcion.elegida .opcion__check { opacity: 1; stroke-dashoffset: 0; }
.paso__opciones.tiene-eleccion .opcion:not(.elegida) { opacity: 0.45; transition: opacity 200ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .opcion:not([disabled]):hover::before { background-position: -65% 0, 0 0; filter: brightness(0.97); }
  .opcion:not([disabled]):hover .opcion__pieza { transform: scale(1) rotate(-8deg); }
}
.paso__atras {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0 0.25rem;
  border: 0; background: none; cursor: pointer; color: var(--tinta-oscura-suave); font-weight: 600; font-size: 0.9375rem;
}
.paso__atras svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; transition: transform 300ms var(--expo); }
.paso__atras:focus-visible { outline: 2px solid var(--cobre-hondo); outline-offset: 2px; border-radius: var(--radio); }
@media (hover: hover) and (pointer: fine) { .paso__atras:hover { color: var(--tinta-oscura); } .paso__atras:hover svg { transform: translateX(-3px); } }

/* La pieza que viaja de la opción elegida a la historia */
.vuelo {
  position: fixed; z-index: 80; pointer-events: none; transform-origin: 0 0;
  display: flex; align-items: center; padding: 0 1rem; border-radius: var(--radio);
  background: var(--grad-cobre-boton); color: var(--tinta-cobre); font-weight: 650; font-size: 1rem; white-space: nowrap; overflow: hidden;
  box-shadow: 0 16px 30px -14px rgb(60 30 10 / 0.6);
}

/* Iconos de cada pregunta: un gesto corto y único al aparecer */
@media (prefers-reduced-motion: no-preference) {
  .paso.entra .paso__icono { animation: icono-llega 640ms var(--expo) both; }
  .paso.entra .i-vibra { transform-box: fill-box; transform-origin: 50% 50%; animation: vibra 150ms ease-in-out 5 alternate 320ms; }
  .paso.entra .i-onda { opacity: 0; animation: aparece 300ms var(--ease) both; }
  .paso.entra .i-onda--1 { animation-delay: 420ms; } .paso.entra .i-onda--2 { animation-delay: 620ms; }
  .paso.entra .i-dibuja { stroke-dasharray: 40; stroke-dashoffset: 40; animation: dibuja 700ms var(--expo) forwards 300ms; }
  .paso.entra .i-dibuja--2 { animation-delay: 450ms; } .paso.entra .i-dibuja--3 { animation-delay: 600ms; }
  .paso.entra .i-pop { transform-box: fill-box; transform-origin: 50% 100%; animation: pop 460ms var(--expo) both 300ms; }
  .paso.entra .i-pop--2 { animation-delay: 560ms; }
  .paso.entra .i-campana { transform-box: fill-box; transform-origin: 50% 0; animation: campana 900ms var(--ease) both 280ms; }
  .paso.entra .i-boli { transform-box: fill-box; animation: boli 900ms var(--ease) both 300ms; }
  .paso.entra .i-celda { animation: aparece 240ms var(--ease) both; }
  .paso.entra .i-celda--1 { animation-delay: 320ms; } .paso.entra .i-celda--2 { animation-delay: 440ms; }
  .paso.entra .i-celda--3 { animation-delay: 560ms; } .paso.entra .i-celda--4 { animation-delay: 680ms; }
  .paso.entra .i-sube { transform-box: fill-box; animation: sube-papel 700ms var(--expo) both 320ms; }
}
@keyframes icono-llega { from { opacity: 0; transform: scale(0.7) rotate(-14deg); } }
@keyframes vibra { from { transform: rotate(-11deg); } to { transform: rotate(11deg); } }
@keyframes dibuja { to { stroke-dashoffset: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(0.4); } }
@keyframes campana { 0% { transform: rotate(0); } 20% { transform: rotate(16deg); } 40% { transform: rotate(-13deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } 100% { transform: rotate(0); } }
@keyframes boli { 0% { transform: translate(-3px, -3px) rotate(-6deg); } 50% { transform: translate(3px, 1px) rotate(4deg); } 100% { transform: none; } }
@keyframes sube-papel { from { transform: translateY(6px); opacity: 0; } }

/* El cierre: solo aparece al contestar la última pregunta */
.consulta__cierre[hidden], .resultado__abierto[hidden] { display: none; }
.cierre__titulo { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.1rem); font-weight: 650; letter-spacing: -0.03em; line-height: 1.16; }
.cierre__titulo:focus { outline: none; }
.cierre__texto { margin-top: 0.6rem; color: var(--tinta-oscura-suave); max-width: 46ch; }
.formulario--candado { margin-top: 1.5rem; }
.consulta__cierre .paso__atras { margin-top: 0.75rem; }

/* La historia de la clínica: una carpeta oscura que se va rellenando */
.historia {
  --tinta: var(--tinta-clara); --tinta-suave: var(--tinta-clara-suave);
  grid-area: historia; position: sticky; top: calc(var(--barra-h) + 3.5rem); margin-top: 2.25rem;
  padding: 1.5rem 1.6rem 1.6rem; border-radius: 0 var(--radio-grande) var(--radio-grande) var(--radio-grande);
  background: radial-gradient(30rem 18rem at 100% 0%, rgb(216 150 92 / 0.24), transparent 70%), linear-gradient(180deg, #2c2723 0%, #1d1a17 100%);
  color: var(--tinta-clara);
  box-shadow: 0 44px 80px -40px rgb(60 30 10 / 0.65);
}
.historia__pestana {
  --s: calc(2.25rem * var(--pendiente));
  position: absolute; bottom: calc(100% - 1px); left: 0;
  display: flex; align-items: center; height: 2.25rem; padding: 0 calc(var(--s) + 0.6rem) 0 1.1rem;
  background: linear-gradient(180deg, #3a342f, #2c2723); color: var(--cobre-claro); font-size: 0.875rem; font-weight: 650;
  clip-path: polygon(0 0, calc(100% - var(--s)) 0, 100% 100%, 0 100%);
}
.historia__cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; margin-bottom: 1.1rem; }
.historia__titulo { font-weight: 650; font-size: 1.15rem; letter-spacing: -0.015em; }
.historia__fecha { font-size: 0.875rem; color: var(--tinta-clara-suave); }
.historia__vacia { color: var(--tinta-clara-suave); font-size: 0.95rem; }
.historia__vacia[hidden] { display: none; }
.historia__lineas { display: grid; gap: 0.55rem; }
.historia__lineas li { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.975rem; line-height: 1.4; }
.historia__lineas li::before { content: ""; flex: none; width: 0.62rem; height: 0.61rem; background: var(--grad-cobre); clip-path: var(--pieza); transform: translateY(0.05em); }
.historia__total {
  margin-top: 1.4rem; padding: 1rem 1.1rem; border-radius: var(--radio);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  background: linear-gradient(100deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.03));
}
.historia__total p { font-size: 0.9rem; line-height: 1.35; color: var(--tinta-clara-suave); max-width: 15ch; }
.historia__total strong { display: inline-block; font-size: clamp(2.5rem, 1.8rem + 1.9vw, 3.5rem); font-weight: 750; letter-spacing: -0.045em; line-height: 0.95; font-variant-numeric: tabular-nums; color: #f2c79c; }
.historia__sello {
  position: absolute; right: 1.25rem; top: 1.1rem;
  padding: 0.3rem 0.75rem; border: 2px solid var(--cobre-claro); border-radius: 6px;
  font-weight: 800; font-size: 0.95rem; letter-spacing: 0.02em; color: var(--cobre-claro);
  transform: rotate(-8deg) scale(1.3); opacity: 0;
  transition: transform 420ms var(--expo), opacity 160ms var(--ease);
}
.historia.esta-revisada .historia__sello { opacity: 1; transform: rotate(-8deg) scale(1); }
.historia.esta-revisada .historia__fecha { visibility: hidden; }

/* El resultado */
.resultado__abierto:focus { outline: none; }
.resultado__cifra { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.1rem); line-height: 1.22; letter-spacing: -0.025em; font-weight: 500; }
.resultado__cifra strong { font-weight: 750; color: var(--cobre-hondo); font-variant-numeric: tabular-nums; }
.resultado__jornadas { margin-top: 0.5rem; color: var(--tinta-oscura-suave); }
.resultado__nota { margin-top: 0.75rem; color: var(--tinta-oscura-suave); max-width: 52ch; }
.resultado__nota:empty { display: none; }
.resultado__desglose { margin-top: 1.5rem; display: grid; gap: 0.85rem; }
.resultado__desglose li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 1rem; font-size: 0.9375rem; }
.resultado__desglose .valor { font-weight: 650; font-variant-numeric: tabular-nums; }
.resultado__desglose .barra-dato { grid-column: 1 / -1; position: relative; height: 0.55rem; border-radius: 3px; background: #ece6dd; overflow: hidden; }
.resultado__desglose .barra-dato i { position: absolute; inset: 0; transform-origin: left; border-radius: 3px; }
.resultado__desglose .barra-dato .rango { background: linear-gradient(90deg, #f1cba5, #e7b382); transform: scaleX(var(--max)); }
.resultado__desglose .barra-dato .minimo { background: linear-gradient(90deg, #a46c3a, #8a5a2e); transform: scaleX(var(--min)); }
.resultado__formula { margin-top: 1.5rem; font-size: 0.9375rem; color: var(--tinta-oscura-suave); }
.resultado__formula summary { cursor: pointer; font-weight: 600; color: var(--tinta-oscura); min-height: 2.75rem; display: flex; align-items: center; }
.resultado__formula p, .resultado__formula ul { margin-top: 0.6rem; }
.resultado__formula li { padding-left: 1rem; position: relative; }
.resultado__formula li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.45rem; height: 0.44rem; background: var(--grad-cobre); clip-path: var(--pieza); }
.resultado__acciones { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.js .resultado__abierto:not([hidden]), .js .consulta__cierre:not([hidden]) { animation: abrir 560ms var(--expo) both; }
@keyframes abrir { from { opacity: 0; transform: translateY(14px); } }

/* -------------------------------------------------------------- formularios -- */
.formulario { display: grid; gap: 0.9rem; }
.campo { display: grid; gap: 0.35rem; }
.campo label { font-weight: 600; font-size: 0.9375rem; }
.campo__opcional { font-weight: 400; color: var(--tinta-suave); }
.campo input:not([type="checkbox"]), .campo textarea {
  width: 100%; min-height: 3.25rem; padding: 0.8rem 0.95rem;
  border: 2px solid transparent; border-radius: var(--radio);
  background: var(--campo-fondo, linear-gradient(180deg, #f2eee7, #ece7de)); color: var(--tinta-oscura);
  font-size: 1rem; line-height: 1.4;
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease);
}
.campo textarea { resize: vertical; min-height: 6rem; }
.campo input::placeholder, .campo textarea::placeholder { color: #6e665d; }
.campo input:focus-visible, .campo textarea:focus-visible { outline: none; border-color: var(--campo-foco, var(--cobre-hondo)); background: var(--papel); }
.campo[data-error] input, .campo[data-error] textarea { border-color: var(--error); }
.campo__error { color: var(--error); font-size: 0.875rem; font-weight: 600; }
.campo--casilla { grid-template-columns: auto 1fr; align-items: start; column-gap: 0.75rem; }
.campo--casilla input { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 0.15rem; accent-color: var(--cobre-hondo); }
.campo--casilla label { font-weight: 400; font-size: 0.9375rem; line-height: 1.5; cursor: pointer; }
.campo--casilla .campo__error { grid-column: 2; }
.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* taste-skill-ignore: campo trampa invisible, no es una línea */
.formulario__estado { min-height: 1.5rem; font-weight: 600; font-size: 0.9375rem; }
.formulario__estado[data-estado="error"] { color: var(--error); }
.formulario__estado[data-estado="ok"] { color: var(--ok); }
@media (prefers-reduced-motion: no-preference) {
  .consulta__cierre:not([hidden]) .formulario > * { animation: llega-ui 560ms var(--expo) both; }
  .consulta__cierre:not([hidden]) .formulario > :nth-child(2) { animation-delay: 70ms; }
  .consulta__cierre:not([hidden]) .formulario > :nth-child(3) { animation-delay: 140ms; }
  .consulta__cierre:not([hidden]) .formulario > :nth-child(5) { animation-delay: 210ms; }
  .consulta__cierre:not([hidden]) .formulario > :nth-child(6) { animation-delay: 280ms; }
}

/* ------------------------------------------- capítulo 4 · método y precios -- */
/* La escena del método (scroll-craft, acto fijado): las piezas pasan del desorden al orden
   con el scroll. Cada paso tiene encima una barrita que se llena al ritmo de su zona. */
.metodo { padding-bottom: clamp(3rem, 5vw, 5rem); }
.metodo-acto__escenario {
  display: flex; align-items: center;
  background: radial-gradient(52rem 30rem at 68% 52%, rgb(216 150 92 / 0.12), transparent 70%);
}
.metodo-acto__dentro { display: grid; gap: clamp(1.5rem, 3.6svh, 2.75rem); padding-top: calc(var(--barra-h) + 1rem); padding-bottom: 1.25rem; }
.metodo__intro { max-width: 40rem; }
.metodo__intro h2 { font-size: clamp(1.9rem, 1.25rem + 2.2vw, 3rem); }
.metodo__intro p { margin-top: 1rem; font-size: var(--t-entradilla); color: var(--tinta-suave); }
/* Ocupa el mismo ancho que los tres pasos: main.js centra cada zona sobre la columna de su paso */
.metodo__diagrama { height: clamp(8rem, 30svh, 17rem); }
.metodo__diagrama svg { width: 100%; height: 100%; overflow: visible; }
.metodo__diagrama use { transform-box: view-box; }
.metodo__pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.metodo__pasos li { --avance: 1; position: relative; padding-top: 1.1rem; transition: opacity 420ms var(--ease), transform 520ms var(--expo); }
.js .metodo__pasos li { --avance: 0; }
.metodo__pasos li::before, .metodo__pasos li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 2px; }
.metodo__pasos li::before { background: rgb(246 243 239 / 0.12); }
.metodo__pasos li::after { background: var(--grad-cobre-boton); transform-origin: left; transform: scaleX(var(--avance)); }
.metodo__pasos h3 { display: flex; align-items: baseline; gap: 0.6rem; font-size: 1.25rem; transition: color 300ms var(--ease); }
.metodo__pasos h3::before { content: ""; flex: none; width: 0.75em; height: 0.74em; clip-path: var(--pieza); background: rgb(246 243 239 / 0.28); transform: translateY(0.05em); }
.metodo__pasos li.esta-activo h3, .no-js .metodo__pasos h3 { color: #f2c79c; }
.metodo__pasos li.esta-activo h3::before, .metodo__pasos li.esta-hecho h3::before, .no-js .metodo__pasos h3::before { background: var(--grad-cobre); }
.metodo__pasos p { margin-top: 0.5rem; color: var(--tinta-suave); max-width: 34ch; }
.frase-saul { margin-top: clamp(2.5rem, 5vw, 4rem); max-width: 50rem; }
.frase-saul p { font-size: clamp(1.2rem, 0.95rem + 0.85vw, 1.7rem); line-height: 1.42; font-weight: 500; letter-spacing: -0.015em; max-width: 52ch; }
.frase-saul footer { margin-top: 1rem; color: var(--cobre); font-weight: 600; }

.precios { padding-block: clamp(3rem, 5vw, 5rem) var(--seccion); }
.precios__rejilla { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: end; }
.precios__cabeza { grid-column: 1 / 3; grid-row: 1; align-self: start; max-width: 30rem; margin-bottom: 1.75rem; }
.precios__cabeza p { margin-top: 1rem; color: var(--tinta-suave); }
.peldano {
  grid-row: 2; align-self: end; position: relative; display: flex; flex-direction: column;
  padding: 1.75rem 1.75rem 5.5rem; border-radius: var(--radio-grande); overflow: hidden;
  background: radial-gradient(24rem 16rem at 100% 0%, var(--p-luz, rgb(216 150 92 / 0.22)), transparent 70%), var(--p-fondo);
  color: var(--p-tinta);
  transform-origin: bottom;
}
.peldano--1 { grid-column: 1; min-height: 23rem; --p-fondo: linear-gradient(165deg, #e8ac74 0%, #d48f55 62%, #c27e45 100%); --p-luz: rgb(255 226 196 / 0.4); --p-tinta: var(--tinta-cobre); --p-tira: linear-gradient(100deg, #c48249, #b27140); --p-suave: var(--tinta-cobre-suave); }
.peldano--2 { grid-column: 2; min-height: 27.5rem; --p-fondo: linear-gradient(170deg, #48423c 0%, #35312c 100%); --p-tinta: var(--tinta-clara); --p-tira: linear-gradient(100deg, #554e47, #4a443e); --p-suave: var(--tinta-clara-suave); }
.peldano--3, .peldano--4 { grid-row: 1 / 3; }
.peldano--3 { grid-column: 3; min-height: 32rem; --p-fondo: linear-gradient(170deg, #f4f3ef 0%, #e5e2dc 100%); --p-tinta: var(--tinta-oscura); --p-tira: linear-gradient(100deg, #dedad3, #d6d2ca); --p-suave: var(--tinta-oscura-suave); }
.peldano--4 { grid-column: 4; min-height: 36.5rem; --p-fondo: linear-gradient(170deg, #ffffff 0%, #f1eee8 100%); --p-tinta: var(--tinta-oscura); --p-tira: linear-gradient(100deg, #ebe7e0, #e4dfd7); --p-suave: var(--tinta-oscura-suave); }
.peldano h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.015em; max-width: 16ch; }
.peldano__precio { margin-top: 0.6rem; font-size: clamp(1.5rem, 1rem + 1.15vw, 2.25rem); font-weight: 750; letter-spacing: -0.035em; line-height: 1.08; font-variant-numeric: tabular-nums; }
.peldano__precio--largo { font-size: clamp(1.3rem, 0.95rem + 0.8vw, 1.75rem); }
.peldano ul { margin-top: 1.25rem; display: grid; gap: 0.5rem; }
.peldano li { position: relative; padding-left: 1.2rem; font-size: 0.9375rem; line-height: 1.45; color: var(--p-suave); }
.peldano li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.55em; height: 0.54em; background: currentColor; clip-path: var(--pieza); opacity: 0.8; }
.peldano__boton {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4rem;
  display: flex; align-items: center; padding-inline: 1.75rem;
  background: var(--brillo-blanco) 165% 0 / 240% 100% no-repeat, var(--p-tira); color: var(--p-tinta); font-weight: 650; text-decoration: none;
  transition: background-position 700ms var(--expo), filter 180ms var(--ease);
}
.peldano--2 .peldano__boton { background: linear-gradient(105deg, transparent 36%, rgb(255 255 255 / 0.16) 50%, transparent 64%) 165% 0 / 240% 100% no-repeat, var(--p-tira); }
.peldano__boton::after { content: ""; margin-left: auto; width: 0.85rem; height: 0.84rem; background: currentColor; clip-path: var(--pieza); transition: transform 180ms var(--ease); }
.peldano__boton:focus-visible { outline: 3px solid var(--cobre); outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) {
  .peldano__boton:hover::after { transform: translateX(4px); }
  .peldano__boton:hover { background-position: -65% 0, 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .peldano { transform: scaleY(0.84); transition: transform 760ms var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
  .js .peldano.esta-visible { transform: none; }
}

/* --------------------------------------------- capítulo 5 · dudas y vale -- */
.dudas { padding-block: var(--seccion) clamp(3rem, 6vw, 5rem); }
.dudas__dentro { max-width: 62rem; }
.dudas h2 { max-width: 16ch; margin-bottom: clamp(3.5rem, 6vw, 4.5rem); }
.fichas { position: relative; }
.ficha-duda {
  --c: #efeeea; --c-fin: #e5e3dd; --ct: var(--tinta-oscura);
  position: relative; z-index: calc(1 + var(--n));
  background: linear-gradient(180deg, var(--c) 0%, var(--c-fin) 100%); color: var(--ct);
  margin-top: 2.25rem; border-radius: 0 var(--radio) var(--radio) var(--radio);
}
.ficha-duda:nth-child(3n+2) { --c: #f1cca7; --c-fin: #e8b78a; }
.ficha-duda:nth-child(3n) { --c: #2f2a26; --c-fin: #221f1c; --ct: var(--tinta-clara); }
.ficha-duda button {
  display: block; width: 100%; text-align: left; border: 0; background: none; color: inherit; cursor: pointer;
  padding: 1.5rem 1.75rem 1.4rem; font: inherit;
}
.ficha-duda__tema {
  --h: 2.25rem; --s: calc(var(--h) * var(--pendiente));
  position: absolute; bottom: 100%; left: calc(1rem + var(--n) * min(8.5rem, 13%));
  display: flex; align-items: center; height: var(--h);
  padding: 0 calc(var(--s) + 0.8rem); background: var(--c);
  font-size: 0.9375rem; font-weight: 650;
  clip-path: polygon(var(--s) 0, calc(100% - var(--s)) 0, 100% 100%, 0 100%);
}
.ficha-duda__pregunta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem); font-weight: 600; letter-spacing: -0.015em; }
.ficha-duda__pregunta::after { content: ""; flex: none; width: 0.85rem; height: 0.84rem; background: currentColor; clip-path: var(--pieza); transition: transform 220ms var(--ease); }
.ficha-duda button[aria-expanded="true"] .ficha-duda__pregunta::after { transform: rotate(90deg); }
.ficha-duda button:focus-visible { outline: 3px solid var(--cobre-hondo); outline-offset: -3px; }
.ficha-duda:nth-child(3n) button:focus-visible { outline-color: var(--cobre); }
.ficha-duda__respuesta { padding: 0 1.75rem 1.75rem; }
.ficha-duda__respuesta p { max-width: 58ch; color: color-mix(in oklab, var(--ct) 84%, var(--c)); }

.vale { padding-block: clamp(2rem, 4vw, 3.5rem) var(--seccion); }
.cupon {
  --muesca: 15px; --corte: 50%;
  position: relative; display: grid; grid-template-columns: var(--corte) 1fr; align-items: stretch;
  background:
    radial-gradient(42rem 26rem at 0% 0%, rgb(250 214 176 / 0.6), transparent 64%),
    radial-gradient(40rem 30rem at 100% 100%, rgb(150 90 42 / 0.24), transparent 66%),
    linear-gradient(150deg, #e3a56c 0%, #d08c53 100%);
  color: var(--tinta-cobre); border-radius: var(--radio-grande); overflow: hidden;
  -webkit-mask: radial-gradient(circle var(--muesca) at var(--corte) 0, #0000 98%, #000) top / 100% 51% no-repeat, /* taste-skill-ignore: muescas del vale (máscara), no es un relleno */
                radial-gradient(circle var(--muesca) at var(--corte) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; /* taste-skill-ignore: muescas del vale (máscara) */
          mask: radial-gradient(circle var(--muesca) at var(--corte) 0, #0000 98%, #000) top / 100% 51% no-repeat, /* taste-skill-ignore: muescas del vale (máscara) */
                radial-gradient(circle var(--muesca) at var(--corte) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; /* taste-skill-ignore: muescas del vale (máscara) */
  --campo-fondo: linear-gradient(180deg, rgb(255 255 255 / 0.4), rgb(255 255 255 / 0.28)); --campo-foco: var(--tinta-cobre); --tinta-suave: var(--tinta-cobre-suave);
}
.cupon__izquierda { position: relative; padding: clamp(2rem, 4vw, 3.5rem); display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.cupon h2 { font-size: clamp(1.75rem, 1.05rem + 2.05vw, 3rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; }
.cupon__izquierda p { max-width: 32ch; font-size: 1.0625rem; line-height: 1.55; }
.cupon__perforado { position: absolute; top: calc(var(--muesca) + 10px); bottom: calc(var(--muesca) + 10px); left: calc(var(--corte) - 2.5px); border-left: 5px dotted var(--blanco); pointer-events: none; }
.cupon__formulario { padding: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr 1fr; align-content: center; }
.cupon__formulario .campo--ancho, .cupon__formulario > .campo--ancho { grid-column: 1 / -1; }
.cupon .campo__error, .cupon .formulario__estado[data-estado="error"] { color: #6e1a08; }
.cupon .formulario__estado[data-estado="ok"] { color: var(--tinta-cobre); }
.cupon .campo__opcional { color: var(--tinta-cobre); font-weight: 400; }
.cupon .campo input::placeholder, .cupon .campo textarea::placeholder { color: #5c4029; }
.cupon .campo input:focus-visible, .cupon .campo textarea:focus-visible { background: rgb(255 255 255 / 0.85); }
.cupon .campo--casilla input { accent-color: var(--tinta-cobre); }
.cupon__sello {
  position: absolute; right: clamp(1rem, 3vw, 2.5rem); top: clamp(2rem, 4.5vw, 4rem);
  padding: 0.5rem 1.1rem; border: 3px solid var(--tinta-cobre); border-radius: 6px;
  font-weight: 800; font-size: 1.4rem; letter-spacing: 0.02em; color: var(--tinta-cobre);
  transform: rotate(-9deg) scale(1.6); opacity: 0;
  transition: transform 380ms var(--ease), opacity 160ms var(--ease);
}
.cupon.esta-sellado .cupon__sello { opacity: 1; transform: rotate(-9deg) scale(1); }
.vale__otras { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; align-items: center; }
.rgpd { margin-top: 2.5rem; max-width: 56rem; font-size: 0.875rem; color: var(--tinta-suave); }
.rgpd__titulo { font-weight: 650; color: var(--tinta); margin-bottom: 0.5rem; }
.rgpd dl { display: grid; gap: 0.3rem; }
.rgpd div { display: grid; grid-template-columns: 8.5rem minmax(0, 62ch); gap: 1rem; }
.rgpd dt { font-weight: 600; color: var(--tinta); }

/* --------------------------------------------------------------------- pie -- */
.pie {
  position: relative; isolation: isolate;
  background:
    radial-gradient(54rem 34rem at 16% 26%, rgb(216 150 92 / 0.18), transparent 66%),
    radial-gradient(40rem 30rem at 100% 100%, rgb(150 96 50 / 0.12), transparent 66%),
    linear-gradient(180deg, #13110f 0%, #0b0a09 100%);
  color: var(--tinta-clara); padding: clamp(4rem, 7vw, 6rem) 0 clamp(6rem, 8vw, 3rem);
}
.pie::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grano); opacity: 0.32; mix-blend-mode: soft-light; }
.pie__cierre { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: clamp(2rem, 5vw, 5rem); }
.pie__marca { height: clamp(10rem, 34svh, 22rem); }
.pie__marca svg { width: auto; height: 100%; max-width: 100%; }
.pie__lema { font-size: var(--t-gigante); font-weight: 700; letter-spacing: -0.045em; line-height: 0.98; max-width: 8ch; }
.pie__lema-sub { margin-top: 1.25rem; max-width: 38ch; color: var(--tinta-clara-suave); }
.pie__a { fill: var(--tinta-clara); }
.pie__pieza { fill: url(#g-cobre); }
.pie__rejilla { margin-top: 3.5rem; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 2rem; }
.pie__enlaces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.pie__enlaces ul { display: grid; gap: 0.35rem; align-content: start; }
.pie__enlaces a, .pie__contacto a { display: inline-flex; min-height: 2.25rem; align-items: center; font-size: 0.9375rem; text-decoration: none; color: var(--tinta-clara-suave); }
@media (hover: hover) and (pointer: fine) { .pie__enlaces a:hover, .pie__contacto a:hover { color: var(--tinta-clara); text-decoration: underline; text-underline-offset: 0.25em; } }
.pie__contacto p { font-size: 0.9375rem; color: var(--tinta-clara-suave); }
.pie__contacto p:first-child { color: var(--tinta-clara); font-weight: 600; margin-bottom: 0.35rem; }
.pie__creditos { margin-top: 3rem; max-width: 80ch; font-size: 0.8125rem; line-height: 1.55; color: #a39a90; }
.pie__ultima { margin-top: 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.875rem; color: var(--tinta-clara-suave); }

/* ----------------------------------------------------------- barra en móvil -- */
.barra-movil { display: none; }

/* ---------------------------------------------------------------- legales -- */
.legal { background: var(--blanco); color: var(--tinta-oscura); }
.legal .barra { background: var(--blanco); color: var(--tinta-oscura); position: sticky; }
.legal .marca__claro { display: none; }
.legal .marca__oscuro { display: block; }
.legal__main { padding: 3rem 0 6rem; }
.legal__texto { max-width: 46rem; margin-inline: auto; padding-inline: var(--gutter); }
.legal__texto h1 { font-size: var(--t-titulo); margin: 0.5rem 0 1.5rem; }
.legal__texto h2 { font-size: 1.35rem; margin: 2.5rem 0 0.75rem; letter-spacing: -0.02em; }
.legal__texto p, .legal__texto li { margin-top: 0.75rem; color: var(--tinta-oscura-suave); }
.legal__texto ul { list-style: disc; padding-left: 1.25rem; }
.legal__texto a { color: var(--cobre-hondo); }
.legal__fecha { font-size: 0.875rem; }
.legal__datos { display: grid; gap: 0.4rem; margin-top: 1rem; }
.legal__datos div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; }
.legal__datos dt { font-weight: 600; }
.legal .pie { padding: 2.5rem 0; }
.legal .pie__ultima { margin-top: 0; flex-wrap: wrap; }
.pie__enlaces-legal a { color: var(--tinta-clara-suave); }
.pie__enlaces-legal a[aria-current="page"] { color: var(--tinta-clara); }

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 1280px) {
  .barra__dentro { gap: 1rem; }
  .pestanas a { padding-inline: calc(var(--s) + 0.35rem); font-size: 0.875rem; }
  .barra .enlace-whatsapp span:not(.solo-lectores) { display: none; }
}
@media (max-width: 1100px) {
  .enlace-whatsapp span:not(.solo-lectores) { display: none; }
  .sintomas__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .servicio { grid-template-columns: 1fr; gap: 0; }
  .servicios__paneles { min-height: 46rem; align-items: start; }
  .servicios__forma { top: 0; translate: 0 0; width: 30rem; max-width: 80%; }
}

@media (max-width: 899px) {
  :root { --barra-h: 3.75rem; }
  .barra .pestanas, .barra.esta-fuera-hero .pestanas { display: none; }
  .barra__acciones { gap: 0.75rem; margin-left: auto; }
  .boton--barra { display: none; }
  .marca img { width: 6.25rem; }
  .enlace-whatsapp span:not(.solo-lectores), .barra .enlace-whatsapp span:not(.solo-lectores) { display: inline; }

  .hero { --inicio: 52svh; --paso: 2.75rem; --pestana-h: 2rem; min-height: 36rem; }
  .hero__fondo { inset: -4% auto auto -60%; width: 190%; height: 108%; }
  .hero__fondo img { object-position: 58% 45%; }
  .hero__texto { inset: calc(var(--barra-h) + 2.25rem) var(--gutter) auto; }
  .hero h1 { font-size: clamp(2.6rem, 11.5vw, 4rem); }
  .hero__entradilla { margin-top: 1rem; font-size: 1rem; }
  .aviso--1, .aviso--3 { display: none; }
  .aviso--2 { right: auto; left: var(--gutter); top: calc(var(--inicio) - 4.25rem); font-size: 0.8125rem; }
  .carpeta { --ancho: calc(84% + var(--i) * 4%); }
  .carpeta--frente { --ancho: 100%; }
  .carpeta__pestana { font-size: 0.875rem; padding-inline: calc(var(--s) + 0.5rem); }
  .carpeta--vale { --x: 52%; } .carpeta--precios { --x: 4%; } .carpeta--calculadora { --x: 30%; }
  .carpeta--tratamiento { --x: 50%; } .carpeta--sintomas { --x: 6%; }
  .carpeta__dentro { flex-direction: column; align-items: stretch; padding-top: 1.1rem; gap: 0.6rem; }
  .carpeta__dentro .boton { width: 100%; }

  .frase { max-width: none; }
  .sintomas { grid-template-columns: 1fr; padding: 0 var(--gutter) var(--seccion); }
  .sintomas__foto { width: 86vw; margin-left: calc(-1 * var(--gutter) - 4vw); max-height: 62svh; }
  .sintomas__lista { grid-template-columns: 1fr; gap: 1.75rem; }

  .giro { min-height: 70svh; align-items: flex-end; }
  .giro__marco { clip-path: none !important; }
  .giro__forma { right: -42vw; top: 6%; translate: 0 0; height: 62svh; }
  .giro h2 { font-size: clamp(2.6rem, 13vw, 4rem); }

  .agenda-acto__dentro { grid-template-columns: 1fr; gap: 0.9rem; align-content: start; padding-top: calc(var(--barra-h) + 0.75rem); }
  .agenda-acto__texto h2 { font-size: 1.45rem; max-width: none; }
  .pasos-agenda { margin-top: 0.75rem; min-height: 6.6rem; }
  .pasos-agenda h3 { font-size: 1.05rem; }
  .pasos-agenda p { font-size: 0.9375rem; margin-top: 0.35rem; line-height: 1.45; }
  .agenda { --fila: clamp(1.6rem, 3.4svh, 1.95rem); --col-horas: 2.6rem; padding: 0.75rem; }
  .agenda__cabecera { margin-bottom: 0.6rem; }
  .agenda__dia { font-size: 0.9375rem; }
  .agenda__contadores { gap: 0.75rem; width: 100%; justify-content: space-between; }
  .agenda__contadores dd { font-size: 1.2rem; }
  .agenda__cols { font-size: 0.8125rem; }
  .agenda__pendientes-titulo { font-size: 0; }
  .agenda__pendientes-titulo::after { content: "Pendiente"; font-size: 0.8125rem; }
  .cita { --s: calc((var(--fila) - 6px) * 0.28); font-size: 0.75rem; gap: 0; padding-right: var(--s); }
  .cita .cita__icono { display: none; }
  .cita__texto { text-overflow: clip; }
  .cita__ok { position: absolute; right: calc(var(--s) - 2px); top: 1px; width: 0.7rem; height: 0.7rem; }
  .agenda__horas li { font-size: 0.75rem; }

  .servicios__rejilla { grid-template-columns: minmax(0, 1fr); }
  .servicios__indice { min-width: 0; }
  .servicios__lista { margin-top: 1.1rem; gap: 0.1rem; }
  .modulo-tab { column-gap: 0.65rem; padding: 0.35rem 0 0.4rem; }
  .modulo-tab__icono { width: 2.1rem; height: 2.1rem; padding: 0.5rem; }
  .modulo-tab__nombre { font-size: 1.15rem; letter-spacing: -0.02em; }
  .modulo-tab__visto { width: 1.1rem; height: 1.1rem; }
  .modulo-tab__barra { grid-column: 1 / -1; margin-top: 0.4rem; }
  .servicios__control { margin-top: 1rem; }
  .servicios__vistos { margin-left: 0; width: 100%; }
  .servicios__paneles { min-height: 0; }
  .servicios__forma { left: 50%; translate: -50% 0; width: 86vw; max-width: none; }
  .servicio__objeto { padding: 2rem 0 1.5rem; min-height: 23rem; align-items: center; }

  .calculadora__rejilla { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "historia" "consulta"; gap: 1.5rem; }
  .historia { position: relative; top: 0; margin-top: 2.25rem; padding: 1rem 1.1rem 1.1rem; }
  .historia__cabecera { display: none; }
  .historia__lineas li:not(:last-child) { display: none; }
  .historia__vacia { display: none; }
  .historia__total { margin-top: 0.75rem; padding: 0.75rem 0.9rem; }
  .historia__total strong { font-size: 2.2rem; }
  .historia__sello { top: -1.95rem; right: 0.6rem; font-size: 0.8rem; background: linear-gradient(180deg, #2c2723, #1d1a17); }
  .consulta { padding: 1.4rem 1.15rem 1.25rem; }
  .consulta__escenario { min-height: 28rem; }
  .paso__icono { width: 3.4rem; height: 3.35rem; }
  .paso__pregunta { margin-top: 1rem; font-size: 1.4rem; }
  .paso__opciones { margin-top: 1.25rem; gap: 0.45rem; }
  .opcion { min-height: 3.35rem; font-size: 1rem; }

  .metodo-acto__dentro { gap: 1rem; align-content: start; padding-top: calc(var(--barra-h) + 0.75rem); }
  .metodo__intro h2 { font-size: 1.6rem; }
  .metodo__intro p { font-size: 1rem; margin-top: 0.5rem; }
  .metodo__diagrama { aspect-ratio: 340 / 420; width: 100%; height: auto; max-width: 19rem; max-height: 44svh; margin-inline: auto; }
  .metodo__pasos { grid-template-columns: 1fr; gap: 0; }
  .js .metodo__pasos li { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); }
  .js .metodo__pasos li.esta-activo { opacity: 1; transform: none; }

  .precios__rejilla { grid-template-columns: 1fr; }
  .precios__cabeza { grid-column: 1; max-width: none; margin-bottom: 1.5rem; }
  .peldano { grid-column: 1 !important; grid-row: auto !important; height: auto !important; min-height: 0; }

  .ficha-duda__tema { left: calc(0.75rem + var(--n) * 2.4rem); --h: 1.9rem; font-size: 0.875rem; }
  .ficha-duda button { padding: 1.2rem 1.25rem; }
  .ficha-duda__respuesta { padding: 0 1.25rem 1.4rem; }

  .cupon { --corte: 100%; grid-template-columns: 1fr; -webkit-mask: none; mask: none; border-radius: 6px; }
  .cupon__perforado { display: none; }
  .cupon__izquierda { padding-bottom: 1.75rem; }
  .cupon h2 { font-size: 1.75rem; max-width: 12ch; }
  .cupon__izquierda::after { content: ""; position: absolute; left: 1.25rem; right: 1.25rem; bottom: 0; border-bottom: 5px dotted var(--blanco); }
  .cupon__formulario { grid-template-columns: 1fr; padding-top: 1.75rem; }
  .cupon__sello { right: 1.25rem; top: 1.75rem; font-size: 1.1rem; }
  .rgpd div { grid-template-columns: 1fr; gap: 0; }

  .pie__cierre { grid-template-columns: 1fr; gap: 2rem; }
  .pie__marca { height: 22svh; }
  .pie__lema { font-size: clamp(2.6rem, 13vw, 4rem); }
  .pie__rejilla { grid-template-columns: 1fr; }
  .pie__enlaces { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .barra-movil {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    display: flex; gap: 0.5rem; align-items: center;
    padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
    background: rgb(14 12 10 / 0.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    transform: translateY(110%); transition: transform 260ms var(--ease);
  }
  .barra-movil.esta-visible { transform: none; }
  .barra-movil .boton { flex: 1; }
  .barra-movil__whatsapp { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; flex: none; background: linear-gradient(180deg, #48423c, #34302b); color: var(--tinta-clara); border-radius: var(--radio); }
  .barra-movil__whatsapp svg { width: 1.4rem; height: 1.4rem; }
}

@media (max-width: 899px) and (max-height: 700px) {
  .metodo__diagrama { max-height: 34svh; }
  .metodo__intro p { display: none; }
  .agenda { --fila: 1.45rem; }
  .pasos-agenda p { display: none; }
  .pasos-agenda { min-height: 3.2rem; }
}

/* -------------------------------------------------------- movimiento reducido -- */
@media (prefers-reduced-motion: reduce) {
  .hero__fondo, .carpeta, .aviso { transform: none !important; }
  .onda i { animation: none; }
  .js .peldano { transform: none; opacity: 1; transition: none; }
  .js .metodo__pasos li { transform: none !important; transition: opacity 300ms var(--ease); }
  .consulta__relleno, .consulta__ficha { transition: none; }
  .consulta__ficha i { animation: none !important; }
  .consulta__progreso.completo .consulta__relleno { animation: none; }
  .cupon__sello, .historia__sello { transition: opacity 200ms; }
  .consulta-marco__brillo { transition: none; }
  .boton::before, .opcion::before, .peldano__boton { transition: filter 180ms var(--ease); }
}