/* ============================================================
   Lemon Marketing — hoja de estilo única
   Paleta plana de marca (#00A8D9), sin degradados.
   ============================================================ */

/* ---------- 1. Fuentes ---------- */
/* Georama es variable: un solo archivo cubre 500, 700 y 900. */
@font-face{font-family:Georama;src:url(../fonts/georama.woff2)format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url(../fonts/instrument-serif.woff2)format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url(../fonts/instrument-serif-italic.woff2)format('woff2');font-weight:400;font-style:italic;font-display:swap}

/* ---------- 2. Tokens ---------- */
/* El sitio es oscuro por defecto; el bloque de abajo lo pasa a claro cuando el
   sistema o el navegador lo piden. Todo el color vive aquí: si un valor está
   escrito a mano más abajo, el tema claro no lo alcanza. */
:root{
  color-scheme:dark light;

  /* superficie: azul-noche derivado del azul de marca */
  --night:#0A1220;
  --surface:#101B2C;
  --surface-2:#152437;
  --line:rgba(233,238,244,.10);
  --line-strong:rgba(233,238,244,.20);
  --line-hover:rgba(233,238,244,.32);

  /* texto: hueso ligeramente frío */
  --bone:#E9EEF4;            /* 16.0:1 sobre --night */
  --bone-70:rgba(233,238,244,.70);   /*  8.0:1 */
  --bone-55:rgba(233,238,244,.55);   /*  5.5:1 */
  --bone-38:rgba(233,238,244,.38);   /* placeholders */

  /* marca — rellenos: se quedan vivos en los dos temas.
     La marca es un solo color plano; no hay degradados de marca. */
  --green:#00A8D9;
  --green-dim:#007FA3;     /* hover de los rellenos */
  /* tinta sobre los rellenos de marca (botón, hexágonos) */
  --on-brand:#08111E;      /* 6.9:1 sobre --green */
  --btn-ink:var(--on-brand);   /* solo el botón primario: en claro se va a blanco */

  /* marca — texto: en claro bajan de brillo para no reprobar contraste */
  --accent:#00A8D9;    /* 6.8:1 sobre --night */
  --accent-2:#5CCBEA;  /* 10.1:1 — hover de enlace */

  /* tintes de marca sobre la superficie */
  --tint:rgba(0,168,217,.10);
  --tint-soft:rgba(0,168,217,.07);
  --tint-line:rgba(0,168,217,.28);
  --glow:rgba(0,168,217,.14);
  --glow-strong:rgba(0,168,217,.45);

  /* estados */
  --danger:#FF8B7A;
  --danger-text:#FFB5A8;
  --danger-bg:rgba(255,139,122,.10);
  --danger-line:rgba(255,139,122,.40);
  --warn:#FFD166;
  --warn-bg:rgba(255,209,102,.12);
  --warn-line:rgba(255,209,102,.35);

  /* logos de cliente: en oscuro se aclaran, en claro se oscurecen */
  --logo-filter:grayscale(1);

  /* tipografía */
  --sans:Georama,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;

  /* espacio */
  --gut:clamp(1.25rem,4vw,2.5rem);
  --sec-y:clamp(4.5rem,9vw,7.5rem);
  --maxw:1240px;
  --measure:64ch;

  --radius:6px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

@media (prefers-color-scheme:light){
  :root{
    --night:#FFFFFF;
    --surface:#F3F6FA;
    --surface-2:#E7EDF4;
    --line:rgba(10,18,32,.12);
    --line-strong:rgba(10,18,32,.22);
    --line-hover:rgba(10,18,32,.38);

    --bone:#0D1826;                 /* 17.2:1 sobre blanco */
    --bone-70:rgba(13,24,38,.74);   /*  9.4:1 */
    --bone-55:rgba(13,24,38,.62);   /*  6.6:1 */
    --bone-38:rgba(13,24,38,.58);

    --accent:#007090;    /* 5.7:1 sobre blanco */
    --accent-2:#00556E;  /* 8.3:1 — hover de enlace */

    --tint:rgba(0,168,217,.12);
    --tint-soft:rgba(0,168,217,.08);
    --tint-line:rgba(0,112,144,.32);
    --glow:rgba(0,168,217,.16);
    --glow-strong:rgba(0,168,217,.28);

    --danger:#C23A22;
    --danger-text:#9E2E1B;
    --danger-bg:rgba(194,58,34,.08);
    --danger-line:rgba(194,58,34,.35);
    --warn:#8A5A00;
    --warn-bg:rgba(255,209,102,.22);
    --warn-line:rgba(138,90,0,.35);

    --logo-filter:invert(1) grayscale(1) contrast(1.1);

    /* el cliente pidió botón primario con texto blanco solo en claro */
    --btn-ink:#FFFFFF;   /* 2.8:1 sobre --green: decisión de marca, no de contraste */
  }

  /* Bandas de marca (02 El problema, 08 Experiencia): fondo azul de marca con
     letras y líneas blancas. El blanco sobre #00A8D9 da 2.8:1 —decisión de
     marca del cliente, igual que la tinta del botón primario—, así que los
     grises se suben casi a blanco en vez de bajarlos. */
  .section--brand{
    --night:#00A8D9;
    --surface:#00A8D9;
    --surface-2:#0C9CC4;            /* hover de tarjeta */
    --bone:#FFFFFF;
    --bone-70:rgba(255,255,255,.92);
    --bone-55:rgba(255,255,255,.86);
    --bone-38:rgba(255,255,255,.76);
    --accent:#FFFFFF;               /* el acento no se ve sobre sí mismo */
    --accent-2:#FFFFFF;
    --green:#FFFFFF;                /* el hexágono del eyebrow, encima del azul */
    --line:rgba(255,255,255,.34);
    --line-strong:rgba(255,255,255,.50);
    --line-hover:rgba(255,255,255,.70);
    --tint:rgba(255,255,255,.14);
    --tint-soft:rgba(255,255,255,.09);
    --tint-line:rgba(255,255,255,.40);
    background:var(--surface);
    color:var(--bone);              /* los títulos heredan el color del body */
  }
  /* el filo superior de marca, ya dentro del azul */
  .section--brand.section--edge::before{background:var(--bone);opacity:.35}
}

/* ---------- 3. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--night);
  color:var(--bone);
  font:500 clamp(1rem,.96rem + .2vw,1.125rem)/1.7 var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{color:var(--accent-2)}
ul,ol{padding:0;list-style:none}

/* foco visible y consistente en todo el sitio */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}
:focus:not(:focus-visible){outline:none}

::selection{background:var(--green);color:var(--on-brand)}

/* salto al contenido */
.skip{
  position:absolute;left:var(--gut);top:-100px;z-index:100;
  background:var(--green);color:var(--on-brand);font-weight:700;
  padding:.7em 1.1em;border-radius:var(--radius);transition:top .18s var(--ease);
}
.skip:focus{top:1rem}

/* ---------- 4. Tipografía ---------- */
h1,h2,h3,h4{font-weight:900;line-height:1.06;letter-spacing:-.025em;text-wrap:balance}

.display{
  font-size:clamp(2.6rem,7.4vw,6.25rem);
  line-height:.98;
  letter-spacing:-.035em;
}
h2,.h2{font-size:clamp(1.85rem,4.4vw,3.25rem);line-height:1.08}
h3,.h3{font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.25;letter-spacing:-.015em}

/* énfasis serif itálico — el contrapunto editorial */
.em{
  font-family:var(--serif);
  font-weight:400;
  font-style:italic;
  color:var(--accent);
  letter-spacing:0;
  /* el serif tiene una caja óptica menor: se compensa */
  font-size:1.1em;
}

h2+p,h2+.lead,.h2+p,h2+.stack{margin-top:1.4rem}
h3+p{margin-top:.55rem}

.lead{
  font-size:clamp(1.075rem,1.5vw,1.3rem);
  line-height:1.62;
  color:var(--bone-70);
  max-width:var(--measure);
}
p{max-width:var(--measure);color:var(--bone-70)}
p.tight{max-width:52ch}
strong{color:var(--bone);font-weight:700}

/* etiqueta de sección: hexágono + número + nombre */
.eyebrow{
  display:flex;align-items:center;gap:.7em;
  font-size:.75rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;
  color:var(--bone-55);
  margin-bottom:1.6rem;
}
.eyebrow::before{
  content:"";flex:none;width:.62em;height:.72em;
  background:var(--green);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.eyebrow b{color:var(--accent);font-weight:700}

/* ---------- 5. Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sec-y);position:relative}
.section[id],.hero[id]{scroll-margin-top:calc(var(--header-h,76px) + 1rem)}
.section--alt{background:var(--surface)}
.section--alt + .section--alt{padding-top:0}

/* filo superior de marca, muy tenue */
.section--edge::before{
  content:"";position:absolute;inset-inline:0;top:0;height:1px;
  background:var(--green);opacity:.5;
}

.stack>*+*{margin-top:1.15rem}
.stack-lg>*+*{margin-top:2rem}

.cols{display:grid;gap:clamp(2rem,5vw,4.5rem)}
@media (min-width:900px){
  .cols--2{grid-template-columns:repeat(2,1fr)}
  .cols--sticky{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .cols--sticky>:first-child{position:sticky;top:calc(var(--header-h,72px) + 3rem);align-self:start}
}

/* ---------- 6. Botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  min-height:48px;padding:.85em 1.5em;
  border:1px solid transparent;border-radius:var(--radius);
  font-size:.95rem;font-weight:700;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;
  transition:background-color .2s var(--ease),color .2s var(--ease),
             border-color .2s var(--ease),transform .2s var(--ease);
}
/* primario: relleno de marca con --btn-ink (noche en oscuro, blanco en claro) */
.btn--primary{background:var(--green);color:var(--btn-ink);border-color:var(--green)}
.btn--primary:hover{background:var(--green-dim);border-color:var(--green-dim);color:var(--btn-ink)}
.btn--ghost{background:transparent;color:var(--bone);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn:active{transform:translateY(1px)}
.btn .arrow{transition:transform .2s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}

.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}

/* enlace con flecha */
.link-arrow{
  display:inline-flex;align-items:center;gap:.45em;
  font-weight:700;text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:2px;
}
.link-arrow .arrow{transition:transform .2s var(--ease)}
.link-arrow:hover .arrow{transform:translateX(3px)}

/* ---------- 7. Header ---------- */
.header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--night) 88%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease),padding .25s var(--ease);
}
.header.is-stuck{border-bottom-color:var(--line)}
.header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-block:1.15rem;transition:padding .25s var(--ease);
}
.header.is-stuck .header__inner{padding-block:.7rem}
.header__logo{display:block;color:var(--bone);flex:none}
.header__logo svg{width:clamp(148px,17vw,186px);height:auto;transition:width .25s var(--ease)}
.header.is-stuck .header__logo svg{width:clamp(132px,15vw,160px)}

.nav{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.1rem)}
.nav__links a{
  color:var(--bone-70);text-decoration:none;
  font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.11em;
  transition:color .2s var(--ease);
}
.nav__links a:hover,.nav__links a.is-current{color:var(--bone)}
@media (max-width:899px){.nav__links{display:none}}

/* ---------- 8. Hexágono ---------- */
.hex{display:block}
.hx-facet{
  fill:var(--green);
  transform-origin:50% 50%;
  transform-box:fill-box;
}
/* entrada escalonada + respiración continua */
.js .hex--anim .hx-facet{opacity:0;transform:scale(.7)}
.js .hex--anim.is-in .hx-facet{
  animation:
    facet-in .62s var(--ease) forwards,
    facet-breathe 7s ease-in-out infinite;
  animation-delay:calc(var(--i)*90ms), calc(1s + var(--i)*180ms);
}
@keyframes facet-in{to{opacity:1;transform:scale(1)}}
@keyframes facet-breathe{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.82;transform:scale(.965)}
}

/* hexágono decorativo del hero */
.hero__hex{
  position:absolute;pointer-events:none;
  right:-70px;top:50%;transform:translateY(-50%);
  width:min(34vw,420px);
  opacity:.55;
  filter:drop-shadow(0 0 110px var(--glow-strong));
}
@media (min-width:1440px){.hero__hex{right:-50px;opacity:.62}}
@media (max-width:1023px){
  /* fuera del flujo absoluto se centra en la columna, respetando el gutter */
  .hero__hex{
    position:static;transform:none;
    width:min(58vw,300px);max-width:calc(100% - var(--gut)*2);
    margin:3.5rem auto 0;opacity:.85;
  }
  /* en táctil el hexágono es la pieza visual de la sección: en vez de
     respirar en bloque, se enciende gajo por gajo en bucle */
  .js .hero__hex.hex--anim.is-in .hx-facet{
    animation:
      facet-in .62s var(--ease) forwards,
      facet-spark 4.8s var(--ease) infinite;
    animation-delay:calc(var(--i)*90ms), calc(.9s + var(--i)*260ms);
  }
}
@keyframes facet-spark{
  0%,50%,100%{opacity:.8;filter:none}
  11%{opacity:1;filter:brightness(1.5) saturate(1.12)}
}

/* ---------- 9. Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  padding-block:clamp(4rem,10vw,8rem) clamp(4.5rem,10vw,8.5rem);
}
.hero__inner{position:relative;z-index:1}
.hero .display{max-width:15ch}
@media (min-width:1024px){
  .hero__inner>*{max-width:64%}
  .hero .display{max-width:min(64%,none)}
}
.hero .lead{margin-top:1.9rem}
.hero .btn-row{margin-top:2.4rem}

/* pilares del servicio bajo el lead */
.hero__pillars{
  margin-top:1.15rem;max-width:none;
  font-size:.82rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--bone-55);
}
.hero__pillars span{color:var(--accent);margin-inline:.15em;font-weight:400}

/* resplandor de marca detrás del hero */
.hero::after{
  content:"";position:absolute;z-index:0;
  right:-15%;top:50%;transform:translateY(-50%);
  width:65%;aspect-ratio:1;
  background:radial-gradient(circle,var(--glow),transparent 60%);
  pointer-events:none;
}

/* nota de calificación dentro del hero */
.qualifier{
  margin-top:2.4rem;padding:1.15rem 1.35rem;
  border-left:2px solid var(--green);
  background:var(--tint-soft);
  border-radius:0 var(--radius) var(--radius) 0;
  font-size:.98rem;line-height:1.62;color:var(--bone-70);max-width:56ch;
}
.qualifier strong{color:var(--bone)}

/* ---------- 10. Problema: síntomas ---------- */
.symptoms{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line);margin-top:3rem}
@media (min-width:860px){.symptoms{grid-template-columns:repeat(3,1fr)}}
.symptom{
  background:var(--night);padding:clamp(1.75rem,3vw,2.5rem);
  transition:background-color .3s var(--ease);
}
.section--alt .symptom{background:var(--surface)}
.symptom:hover{background:var(--surface-2)}
.symptom .symptom__quote{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.3;
  color:var(--bone);letter-spacing:0;
}
.symptom .symptom__quote::before{content:"\201C"}
.symptom .symptom__quote::after{content:"\201D"}
.symptom p{margin-top:1rem;font-size:.95rem;color:var(--bone-55)}

/* ---------- 11. Flujo de 4 nodos ---------- */
.flow{margin-top:clamp(3rem,6vw,4.5rem)}
.flow__track{
  display:grid;gap:1.25rem;
  grid-template-columns:1fr;
}
@media (min-width:760px){
  .flow__track{grid-template-columns:repeat(4,1fr);gap:clamp(.75rem,2vw,1.5rem)}
}
.node{
  position:relative;text-align:center;
  padding:1.5rem .75rem;
}
/* conector entre nodos */
@media (min-width:760px){
  .node:not(:last-child)::after{
    content:"";position:absolute;top:calc(1.5rem + 26px);left:calc(50% + 34px);right:calc(-50% + 34px);
    height:1px;background:var(--line-strong);
    transform-origin:left center;
  }
  .js .flow.is-in .node:not(:last-child)::after{
    background:var(--green);
    animation:draw .55s var(--ease) forwards;
    animation-delay:calc(.35s + var(--i)*.18s);
    transform:scaleX(0);
  }
}
@keyframes draw{to{transform:scaleX(1)}}
.node__hex{
  width:52px;height:60px;margin:0 auto .95rem;
  background:var(--green);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  display:grid;place-items:center;
  opacity:.28;
  transition:opacity .45s var(--ease);
}
.js .flow.is-in .node__hex{opacity:1;transition-delay:calc(var(--i)*.18s)}
.node__hex span{
  font-family:var(--serif);font-size:1.4rem;color:var(--on-brand);
  line-height:1;padding-bottom:.05em;
}
.node h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.13em;font-weight:700}
.node p{font-size:.88rem;color:var(--bone-55);margin-top:.5rem;max-width:26ch;margin-inline:auto}

/* ---------- 12. Embudo (pieza central) ----------
   Dos rejillas idénticas apiladas: la de las etapas y la de las notas que
   las señalan. Las columnas de flecha tienen ancho fijo para que la nota
   del paso 02 y el corchete de 03–05 caigan exactamente bajo sus tarjetas. */
.fnl{
  --arrow:clamp(28px,3.4vw,52px);
  --cols:repeat(4,minmax(0,1fr) var(--arrow)) minmax(0,1fr);
  margin-top:clamp(2.5rem,5vw,4rem);
  padding:clamp(1rem,2.4vw,1.9rem);
  border:1px solid var(--line);
  border-radius:14px;
  background:
    radial-gradient(120% 150% at 6% 0%,var(--glow),transparent 60%),
    var(--surface-2);
}

.fnl__rail{display:grid;grid-template-columns:var(--cols);align-items:stretch}

/* --- etapa --- */
.fstep{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:.3rem;
  min-height:clamp(118px,13vw,146px);
  padding:clamp(.8rem,1.5vw,1.15rem);
  font:inherit;color:var(--bone);text-align:left;cursor:pointer;
  background:var(--night);
  border:1px solid var(--line);border-radius:10px;
  transition:border-color .35s var(--ease),background .35s var(--ease),
             transform .35s var(--ease),box-shadow .35s var(--ease);
}
.fstep__n{
  font-size:.72rem;font-weight:700;letter-spacing:.16em;
  color:var(--bone-55);transition:color .35s var(--ease);
}
.fstep__name{
  margin-top:auto;
  font-size:clamp(.82rem,1.45vw,1.05rem);font-weight:900;
  letter-spacing:.05em;text-transform:uppercase;line-height:1.15;
}
.fstep__meta{
  font-size:.8rem;line-height:1.35;color:var(--bone-55);
  transition:color .35s var(--ease);
}
.fstep:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.fstep[aria-selected="true"]{
  border-color:var(--green);
  background:var(--tint);
  box-shadow:0 10px 30px -18px var(--green);
  transform:translateY(-3px);
}
.fstep[aria-selected="true"] .fstep__n{color:var(--accent)}
.fstep[aria-selected="true"] .fstep__meta{color:var(--bone-70)}

/* barra de tiempo: sólo mientras el embudo avanza solo */
.fnl.is-auto .fstep[aria-selected="true"]::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--green);
  transform:scaleX(0);transform-origin:left;
  animation:fstep-auto var(--auto,4200ms) linear forwards;
}
@keyframes fstep-auto{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.fnl.is-auto .fstep::after{display:none}}

/* --- flecha entre etapas --- */
.fnl__arrow{
  align-self:center;position:relative;
  height:1px;margin-inline:.45rem;
  background:var(--line-strong);
}
.fnl__arrow::after{
  content:"";position:absolute;right:0;top:50%;
  width:6px;height:6px;
  border-top:1px solid var(--line-strong);
  border-right:1px solid var(--line-strong);
  transform:translateY(-50%) rotate(45deg);
}

/* --- notas bajo las etapas --- */
.fnl__notes{display:grid;grid-template-columns:var(--cols);margin-top:.85rem}
.fnl__stop,.fnl__scope{margin:0;max-width:none}

.fnl__stop{grid-column:3;text-align:center}
.fnl__stop span{
  display:inline-block;position:relative;margin-top:12px;
  padding:.5rem .7rem;
  font-size:.68rem;font-weight:700;line-height:1.35;
  letter-spacing:.06em;text-transform:uppercase;color:var(--bone-55);
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
}
.fnl__stop span::before{
  content:"";position:absolute;left:50%;top:-12px;
  width:1px;height:12px;background:var(--line-strong);
}
.fnl__stop span::after{
  content:"";position:absolute;left:calc(50% - 3px);top:-12px;
  width:5px;height:5px;
  border-top:1px solid var(--line-strong);
  border-left:1px solid var(--line-strong);
  transform:rotate(45deg);
}

/* corchete que abarca 03 · 04 · 05 */
.fnl__scope{grid-column:5/-1;position:relative;padding-top:1.1rem;text-align:right}
.fnl__scope::before{
  content:"";position:absolute;left:0;right:0;top:0;height:7px;
  border:1px solid var(--tint-line);border-top:0;
  border-radius:0 0 7px 7px;
}
.fnl__scope span{
  font-size:.68rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);
}

/* --- panel de lectura --- */
.fnl__panels{margin-top:clamp(1.1rem,2.4vw,1.7rem)}
.fpanel{
  padding:clamp(1.1rem,2.4vw,1.7rem);
  background:var(--night);
  border:1px solid var(--line);border-radius:10px;
}
.fpanel+.fpanel{margin-top:.6rem}          /* sólo se ve así sin JS */
.js .fpanel{display:none}
.js .fpanel.is-active{display:block;animation:fpanel-in .4s var(--ease) both}
@keyframes fpanel-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

.fpanel__label{
  max-width:none;font-size:.7rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bone-55);
}
.fpanel__q{
  margin-top:.6rem;max-width:36ch;
  font-size:clamp(1.05rem,2vw,1.35rem);font-weight:700;
  line-height:1.3;letter-spacing:-.01em;color:var(--bone);
}
.fpanel__d{margin-top:.55rem;font-size:.95rem;color:var(--bone-55);max-width:64ch}

/* --- cita de cierre --- */
.fquote{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  padding-top:clamp(1.6rem,3vw,2.2rem);
  border-top:1px solid var(--line);
  display:grid;gap:clamp(1rem,3vw,3rem);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:end;
}
.fquote__text{grid-column:1;grid-row:1}
.fquote__text p{
  max-width:20ch;
  font-size:clamp(1.5rem,3.4vw,2.15rem);font-weight:900;
  line-height:1.16;letter-spacing:-.02em;color:var(--bone);
}
.fquote__note{grid-column:2;grid-row:1;color:var(--bone-55);font-size:1rem;max-width:46ch}

/* baja a la metodología: cae en la canal entre la cita y su nota */
.fquote__next{
  grid-column:1/-1;grid-row:1;justify-self:center;align-self:end;
  display:grid;place-items:center;
  width:44px;height:44px;
  border:1px solid var(--line-strong);border-radius:50%;
  color:var(--bone-55);
  transition:border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.fquote__next span{
  width:8px;height:8px;margin-top:-3px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
}
.fquote__next:hover{border-color:var(--accent);color:var(--accent);transform:translateY(3px)}

/* --- apilado --- */
@media (max-width:860px){
  /* una sola columna: las notas se intercalan con sus etapas usando order */
  .fnl{display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem}
  .fnl__rail,.fnl__notes{display:contents}

  .fstep{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    gap:.1rem .85rem;min-height:0;align-items:baseline;
  }
  .fstep__n{grid-row:1/3;align-self:center}
  .fstep__name{margin-top:0}
  .fstep:hover,.fstep[aria-selected="true"]{transform:none}

  .fnl__arrow{
    justify-self:center;width:1px;height:14px;margin:0;
    background:var(--line-strong);
  }
  .fnl__arrow::after{
    right:auto;left:calc(50% - 3px);top:auto;bottom:0;
    transform:rotate(135deg);
  }

  .fnl__stop,.fnl__scope{grid-column:1}
  .fnl__stop{text-align:left}
  .fnl__stop span{margin-top:0}
  .fnl__stop span::before,.fnl__stop span::after{display:none}

  /* arriba del grupo 03–05: el corchete se voltea */
  .fnl__scope{padding:.9rem 0 0;margin-top:.4rem;text-align:left}
  .fnl__scope::before{top:auto;bottom:0;height:7px;border:1px solid var(--tint-line);border-bottom:0;border-radius:7px 7px 0 0}

  .fnl__rail>.fstep:nth-of-type(1){order:1}
  .fnl__rail>.fnl__arrow:nth-of-type(1){order:2}
  .fnl__rail>.fstep:nth-of-type(2){order:3}
  .fnl__notes>.fnl__stop{order:4}
  .fnl__rail>.fnl__arrow:nth-of-type(2){order:5}
  .fnl__notes>.fnl__scope{order:6}
  .fnl__rail>.fstep:nth-of-type(3){order:7}
  .fnl__rail>.fnl__arrow:nth-of-type(3){order:8}
  .fnl__rail>.fstep:nth-of-type(4){order:9}
  .fnl__rail>.fnl__arrow:nth-of-type(4){order:10}
  .fnl__rail>.fstep:nth-of-type(5){order:11}
  .fnl__panels{order:12;margin-top:.7rem}

  .fquote{grid-template-columns:minmax(0,1fr);gap:1.1rem}
  .fquote__text,.fquote__note,.fquote__next{grid-column:1;grid-row:auto}
  .fquote__text{order:1}
  .fquote__note{order:2}
  .fquote__next{order:3;justify-self:start;margin-top:.4rem}
}

/* ---------- 13. Metodología ---------- */
.method{display:grid;gap:0;margin-top:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--line)}
.step{
  display:grid;gap:.4rem 2rem;align-items:baseline;
  grid-template-columns:auto 1fr;
  padding-block:clamp(1.5rem,3vw,2.2rem);
  border-bottom:1px solid var(--line);
  transition:padding-left .3s var(--ease);
}
@media (min-width:760px){
  .step{grid-template-columns:5.5rem 15rem 1fr;gap:2.5rem}
  .step:hover{padding-left:.75rem}
}
.step__n{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2rem,4vw,3rem);line-height:.9;
  color:var(--accent);letter-spacing:0;
}
.step h3{font-size:clamp(1.1rem,2vw,1.4rem)}
.step p{font-size:.95rem;color:var(--bone-55);grid-column:1/-1}
@media (min-width:760px){.step p{grid-column:3}}

/* ---------- 14. Cifras y casos ---------- */
.claims{
  display:grid;gap:clamp(2rem,4vw,3rem);
  margin-top:clamp(2.5rem,5vw,4rem);
}
@media (min-width:760px){.claims{grid-template-columns:repeat(3,1fr)}}
.claim{border-top:1px solid var(--line-strong);padding-top:1.5rem}
.claim__k{
  font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone-55);margin-bottom:1rem;
}
.claim__k b{color:var(--accent);font-weight:700}
.claim__k b::after{content:" — ";color:var(--bone-55)}
.claim__t{
  font-family:var(--serif);font-weight:400;letter-spacing:-.01em;
  font-size:clamp(1.65rem,3.2vw,2.4rem);line-height:1.1;
  color:var(--accent);max-width:18ch;text-wrap:balance;
}

.cases{display:grid;gap:1px;background:var(--line);margin-top:clamp(2.5rem,5vw,4rem);border-block:1px solid var(--line)}
@media (min-width:900px){.cases{grid-template-columns:repeat(2,1fr)}}
.case{background:var(--night);padding:clamp(1.75rem,3.5vw,2.75rem);display:flex;flex-direction:column;gap:1rem}
.section--alt .case{background:var(--surface)}
.case__tag{
  font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}
.case h3{font-size:clamp(1.2rem,2.2vw,1.6rem)}
.case p{font-size:.95rem;color:var(--bone-55)}
.case .case__result{
  margin-top:auto;padding-top:1.25rem;border-top:1px solid var(--line);
  font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.2rem);color:var(--accent);line-height:1.1;
}

/* carrusel de logos: 6 a la vista, el resto desfila solo */
.logos-mq{
  --cols:6;
  --cell:170px;              /* respaldo si no hay unidades de contenedor */
  --mq-dur:60s;
  container-type:inline-size;
  position:relative;overflow:hidden;
  margin-top:2.5rem;
  border-block:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
@supports (width:1cqi){ .logos-mq{--cell:calc(100cqi / var(--cols))} }
@media (max-width:900px){
  .logos-mq{--cols:4}
  .logos-mq li{min-height:132px;padding:1.2rem 1rem}
}
@media (max-width:560px){
  .logos-mq{--cols:3;--mq-dur:45s}
  .logos-mq li{min-height:104px;padding:1rem .7rem}
}

.logos-mq__track{
  display:flex;width:max-content;
  animation:logos-mq var(--mq-dur) linear infinite;
  will-change:transform;
}
.logos-mq:hover .logos-mq__track,
.logos-mq:focus-within .logos-mq__track{animation-play-state:paused}

.logos-mq__group{display:flex;flex:0 0 auto}
.logos-mq li{
  flex:0 0 var(--cell);width:var(--cell);
  min-height:160px;display:grid;place-items:center;
  padding:1.6rem 1.4rem;border-inline-end:1px solid var(--line);
}
/* Cada archivo trae su propio equilibrio horneado por
   `sitio/tools/normalizar-logos.py`: mismo lienzo para los 34 y el arte ya
   escalado a peso óptico parejo. Aquí sólo se estira al ancho de la celda. */
.logos-mq img{
  width:100%;max-width:150px;height:auto;
  opacity:.72;filter:var(--logo-filter);
  transition:opacity .25s var(--ease),filter .25s var(--ease);
}
.logos-mq li:hover img{opacity:1}

@keyframes logos-mq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* sin animación: la fila se recorre a mano y se oculta la copia duplicada */
@media (prefers-reduced-motion:reduce){
  .logos-mq{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .logos-mq__track{animation:none!important;transform:none!important}
  .logos-mq__group[aria-hidden]{display:none}
  .logos-mq li{scroll-snap-align:start}
}

/* placeholder visible: nunca se publica contenido de ejemplo por accidente */
.is-placeholder{position:relative}
.is-placeholder::after{
  content:"PENDIENTE";position:absolute;top:.5rem;right:.5rem;
  font:700 .58rem/1 var(--sans);letter-spacing:.12em;
  color:var(--warn);background:var(--warn-bg);
  border:1px solid var(--warn-line);border-radius:3px;
  padding:.32em .5em;pointer-events:none;
}

/* ---------- 15. Para quién es ---------- */
.fit{display:grid;gap:1.5rem;margin-top:clamp(2.5rem,5vw,3.5rem)}
@media (min-width:860px){.fit{grid-template-columns:1.15fr .85fr;gap:clamp(2rem,4vw,3.5rem)}}
.fit__yes,.fit__no{padding:clamp(1.6rem,3vw,2.25rem);border-radius:var(--radius)}
.fit__yes{background:var(--tint-soft);border:1px solid var(--tint-line)}
.fit__no{background:var(--surface-2);border:1px solid var(--line)}
.fit h3{font-size:1rem;text-transform:uppercase;letter-spacing:.13em;margin-bottom:1rem}
.fit__yes h3{color:var(--accent)}
.fit__no h3{color:var(--bone-55)}
.fit p,.fit__list{font-size:clamp(1.05rem,1.8vw,1.25rem);line-height:1.55;color:var(--bone)}
.fit__no p,.fit__no .fit__list{color:var(--bone-70)}
/* Las palomas y las tachas se dibujan: Georama no trae U+2713 y el carácter
   caía a una fuente del sistema. La × sí existe, pero se dibuja igual para
   que ambas listas tengan el mismo peso y alineación. */
.fit__list,.pmodal__list{display:grid;gap:.6em}
.fit__list li,.pmodal__list li{position:relative;padding-left:1.7em}
.fit__list li::before,.pmodal__list li::before{content:"";position:absolute;flex:none}
.fit__yes li::before,.pmodal__list li::before{
  left:.28em;top:.34em;width:.4em;height:.72em;
  border:.13em solid var(--green);border-top:0;border-left:0;
  transform:rotate(42deg);
}
.fit__no li::before{
  left:.15em;top:.62em;width:.72em;height:.13em;
  background:var(--bone-55);transform:rotate(45deg);
}
.fit__no li::after{
  content:"";position:absolute;
  left:.15em;top:.62em;width:.72em;height:.13em;
  background:var(--bone-55);transform:rotate(-45deg);
}

/* ---------- 16. Experiencia ---------- */
.pillars{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(2.5rem,5vw,3.5rem)}
@media (min-width:760px){.pillars{grid-template-columns:repeat(3,1fr)}}
.pillar{background:var(--night);padding:clamp(1.75rem,3vw,2.5rem)}
.section--alt .pillar{background:var(--surface)}
.pillar h3{font-size:clamp(1.35rem,2.6vw,1.85rem);margin-bottom:.6rem}
.pillar h3 .em{font-size:1.15em}
.pillar p{font-size:.94rem;color:var(--bone-55)}
.pillar p.pillar__note{color:var(--accent)}

/* ---------- Planes ---------- */
.plans{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;margin-top:clamp(2.5rem,5vw,3.5rem)}
@media (min-width:760px){.plans{grid-template-columns:repeat(2,1fr)}}
.plan{
  background:var(--surface-2);
  padding:clamp(1.9rem,3.4vw,2.75rem);
  display:flex;flex-direction:column;
}
/* el nivel se ve antes de leerse: un hexágono para Core, dos para Growth */
.plan__mark{display:flex;gap:.4rem;margin-bottom:1.5rem}
.plan__mark i{
  flex:none;width:.85rem;height:.98rem;
  background:var(--line-strong);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.plan__mark i.is-on{background:var(--green)}
.plan__name{
  font-size:clamp(1.6rem,3.2vw,2.25rem);line-height:1.1;letter-spacing:-.02em;
  font-weight:900;margin-bottom:.9rem;
}
.plan__brand{
  display:block;margin-bottom:.35rem;
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bone-55);
}
.plan p{color:var(--bone-70);max-width:38ch}
.plan--growth{background:var(--surface-2);position:relative}
.plan--growth::before{
  content:"";position:absolute;inset-inline:0;top:0;height:2px;background:var(--green);
}
.plans__note{
  margin-top:1.5rem;font-size:.95rem;color:var(--bone-55);
}
.plans__note strong{color:var(--bone)}

/* El desglose de cada plan vive en un <dialog>: la tarjeta se queda con la
   promesa y el detalle sólo aparece para quien lo pide. Sin JS no puede
   abrirse, así que el <noscript> del HTML lo baja al flujo de la página. */
.plan p{margin-bottom:1.75rem}
.plan__more{margin-top:auto;align-self:flex-start}

.pmodal{
  border:0;padding:0;background:transparent;color:var(--bone);
  /* no todos los motores centran el diálogo modal solos */
  position:fixed;inset:0;margin:auto;
  width:min(46rem,calc(100vw - 2rem));max-width:none;
  max-height:86vh;max-height:86svh;
  overflow:auto;overscroll-behavior:contain;
}
.pmodal::backdrop{background:rgba(6,12,22,.74)}
html.has-modal{overflow:hidden}
.pmodal__box{
  position:relative;
  background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.75rem,3.4vw,2.75rem);
}
.pmodal--growth .pmodal__box::before{
  content:"";position:absolute;inset-inline:0;top:0;height:2px;background:var(--green);
}
.pmodal__x{
  position:absolute;top:.5rem;right:.5rem;width:44px;height:44px;
  border:0;border-radius:var(--radius);background:transparent;cursor:pointer;
}
/* la × se dibuja, como en la lista de "no somos para ti" */
.pmodal__x::before,.pmodal__x::after{
  content:"";position:absolute;left:50%;top:50%;
  width:1.05rem;height:1.5px;margin:-.75px 0 0 -.525rem;
  background:var(--bone-70);transition:background-color .2s var(--ease);
}
.pmodal__x::before{transform:rotate(45deg)}
.pmodal__x::after{transform:rotate(-45deg)}
.pmodal__x:hover::before,.pmodal__x:hover::after{background:var(--accent)}
.pmodal .plan__mark{margin-bottom:1.25rem}
.pmodal .plan__name{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:.55rem;padding-right:2.5rem}
.pmodal__price{font-size:1.1rem;color:var(--bone-55)}
.pmodal__price strong{color:var(--accent);font-weight:900}
.pmodal__lead{margin-top:1rem;margin-bottom:1.9rem;color:var(--bone-70);max-width:54ch}
.pmodal__sub{
  font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone-55);margin-bottom:1.1rem;
}
.pmodal__list{font-size:.98rem;line-height:1.5;color:var(--bone)}
.pmodal__aim{
  margin-top:1.9rem;padding-top:1.5rem;border-top:1px solid var(--line);
  font-size:.95rem;color:var(--bone-70);max-width:58ch;
}
.pmodal__aim b{color:var(--bone);font-weight:700}
@media (prefers-reduced-motion:no-preference){
  .pmodal[open]{animation:pmodal-in .26s var(--ease)}
  @keyframes pmodal-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}

/* ---------- 17. CTA y formulario ---------- */
.cta{position:relative;overflow:hidden}
.cta::before{
  content:"";position:absolute;inset-inline:0;top:0;height:1px;background:var(--green);
}
.cta__q{
  font-size:clamp(1.9rem,5vw,3.5rem);line-height:1.1;letter-spacing:-.03em;
  font-weight:900;max-width:19ch;
}
.contact{display:grid;gap:clamp(2.5rem,5vw,4.5rem);margin-top:clamp(2.5rem,5vw,4rem)}
@media (min-width:900px){.contact{grid-template-columns:1fr 1fr;align-items:start}}

.field{display:block;margin-bottom:1.35rem}
.field__label{
  display:block;margin-bottom:.45rem;
  font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bone-70);
}
.field__label .req{color:var(--accent)}
.field input,.field textarea,.field select{
  width:100%;padding:.85em 1em;
  background:var(--surface-2);
  border:1px solid var(--line-strong);border-radius:var(--radius);
  color:var(--bone);font-size:1rem;
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.field textarea{min-height:130px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--bone-38)}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--line-hover)}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--green);background:var(--night);
}
.field__hint{display:block;margin-top:.4rem;font-size:.82rem;color:var(--bone-55)}
/* error junto al campo, no en un resumen lejano */
.field__error{
  display:none;margin-top:.45rem;font-size:.85rem;font-weight:700;color:var(--danger);
}
.field.has-error input,.field.has-error textarea{border-color:var(--danger)}
.field.has-error .field__error{display:block}

/* grupos de opción única: el <fieldset> se neutraliza y cada opción es una fila
   clicable completa, no un radio de 13px */
.field--choice{border:0;padding:0;min-inline-size:0}
.field--choice>.field__label{margin-bottom:.6rem}
.choices{display:grid;gap:.5rem}
.choices--inline{display:flex;flex-wrap:wrap}
.choice{
  display:flex;align-items:flex-start;gap:.7rem;
  padding:.72em .95em;
  background:var(--surface-2);
  border:1px solid var(--line-strong);border-radius:var(--radius);
  color:var(--bone);font-size:.95rem;line-height:1.4;
  cursor:pointer;
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.choice:hover{border-color:var(--line-hover)}
.choice:has(input:checked){border-color:var(--green);background:var(--tint)}
.choice input{
  appearance:none;-webkit-appearance:none;
  flex:none;width:1.05em;height:1.05em;margin-top:.16em;padding:0;
  background:var(--night);
  border:1px solid var(--line-strong);border-radius:50%;
}
.choice input:checked{
  border-color:var(--green);
  background:radial-gradient(circle,var(--green) 0 46%,var(--night) 47%);
}
.field--choice.has-error .choice{border-color:var(--danger)}

/* formulario por pasos: la barra sólo aparece cuando el JS toma el control,
   así que sin JS se ven los tres bloques seguidos y se envía de una sola vez */
.steps{margin-bottom:1.75rem}
.steps__head{
  display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:baseline;
  margin-bottom:.6rem;max-width:none;
}
.steps__count{
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone-55);
}
.steps__count b{color:var(--accent);font-weight:700}
.steps__name{
  font-size:.95rem;font-weight:700;color:var(--bone);letter-spacing:-.01em;
}
.steps__track{
  height:4px;border-radius:99px;background:var(--surface-2);
  border:1px solid var(--line);overflow:hidden;
}
.steps__fill{
  display:block;height:100%;width:33.333%;
  background:var(--green);
  transition:width .45s var(--ease);
}

.step-panel[hidden]{display:none}
/* [hidden] debe ganarle al display de .btn */
[hidden]{display:none!important}
.step-panel>.field:last-child{margin-bottom:0}
.js .form.is-stepped .step-panel{animation:step-in .35s var(--ease) both}
@keyframes step-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.form__nav{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem}
.form__nav .btn{margin:0}

@media (prefers-reduced-motion:reduce){
  .steps__fill{transition:none}
  .js .form.is-stepped .step-panel{animation:none}
}

/* honeypot: fuera de la vista y del foco, pero no display:none */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

.form__note{font-size:.85rem;color:var(--bone-55);margin-top:1rem;max-width:44ch}
.alert{
  padding:1rem 1.15rem;border-radius:var(--radius);margin-bottom:1.75rem;
  font-size:.95rem;border:1px solid;
}
.alert--error{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger-text)}
.alert--ok{background:var(--tint);border-color:var(--tint-line);color:var(--bone)}

/* datos de contacto directo */
.direct{display:grid;gap:1.5rem;align-content:start}
.direct__item{border-top:1px solid var(--line);padding-top:1.15rem}
.direct__k{
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone-55);display:block;margin-bottom:.35rem;
}
.direct__v{
  font-size:clamp(1.15rem,2.2vw,1.5rem);font-weight:700;
  color:var(--bone);text-decoration:none;letter-spacing:-.01em;
}
a.direct__v:hover{color:var(--accent)}

/* ---------- 18. Footer ---------- */
.footer{border-top:1px solid var(--line);padding-block:3.5rem 2.5rem;background:var(--night)}
.footer__top{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
.footer__logo{color:var(--bone);display:block}
.footer__logo svg{width:170px;height:auto}
.footer__tag{font-size:.9rem;color:var(--bone-55);margin-top:.9rem;max-width:34ch}
.footer__links{display:flex;flex-wrap:wrap;gap:.4rem 1.75rem}
.footer__links a{
  color:var(--bone-70);text-decoration:none;font-size:.85rem;font-weight:700;
  letter-spacing:.06em;
}
.footer__links a:hover{color:var(--accent)}
.footer__bottom{
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);
  font-size:.8rem;color:var(--bone-55);
}
.footer__credit a{color:var(--bone-70);text-decoration:none}
.footer__credit a:hover{color:var(--accent);text-decoration:underline}

/* ---------- 19. Páginas de texto (legales / gracias) ---------- */
.prose{max-width:70ch}
.prose h2{font-size:clamp(1.3rem,2.6vw,1.75rem);margin-top:2.75rem;margin-bottom:.9rem}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--bone-70);font-size:1rem}
.prose p+p{margin-top:1rem}
.prose ul{margin:1rem 0 0;padding-left:1.25rem;list-style:disc}
.prose li{margin-bottom:.5rem}
.prose li::marker{color:var(--accent)}

/* ---------- 20. Reveals ---------- */
/* Sin JS todo se ve: el estado oculto sólo existe bajo .js */
.js .reveal{opacity:0;transform:translateY(20px)}
.js .reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .55s var(--ease),transform .55s var(--ease);
  transition-delay:calc(var(--d,0)*70ms);
}

/* ---------- 21. Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .js .reveal{opacity:1!important;transform:none!important}
  .js .hex--anim .hx-facet{opacity:1!important;transform:none!important}
  .js .flow .node__hex{opacity:1!important}
}

/* ---------- 22. Área táctil ----------
   Los enlaces de texto miden 16–33px de alto. En vez de engordarlos y
   descuadrar el header, se extiende la zona sensible con un pseudo-elemento:
   el layout no cambia y el objetivo llega a ~44px. */
.nav__links a,.footer__links a,.direct__v,.header__logo,.footer__logo{position:relative}
.nav__links a::after,
.footer__links a::after,
.direct__v::after,
.header__logo::after,
.footer__logo::after{
  content:"";position:absolute;inset:-14px -8px;
}
.footer__links a::after{inset:-11px -8px}
.direct__v::after{inset:-8px -6px}
.header__logo::after,.footer__logo::after{inset:-6px -8px}

/* ---------- 23. Utilidades ----------
   Reemplazan a los style="" en línea: la CSP del sitio usa style-src 'self'
   y los atributos de estilo quedarían bloqueados. */
.d1{--d:1}.d2{--d:2}.d3{--d:3}.d4{--d:4}.d5{--d:5}
.i0{--i:0}.i1{--i:1}.i2{--i:2}.i3{--i:3}.i4{--i:4}.i5{--i:5}

.mt-md{margin-top:1.4rem}
.mt-lg{margin-top:2.4rem}
.mt-xl{margin-top:clamp(2.5rem,5vw,3.5rem)}
.mt-2xl{margin-top:clamp(3rem,6vw,4.5rem)}
.mt-flush{margin-top:0;border-top:0;padding-top:0}
.note-sm{margin-top:2.5rem;color:var(--bone-55);font-size:.9rem}
.alert{border-radius:var(--radius)}
.alert--wide{max-width:60ch}
.sr-svg{position:absolute;width:0;height:0}

/* ---------- 24. Botón flotante de WhatsApp ----------
   Fijo en la esquina inferior derecha de todas las páginas. Usa el relleno
   de marca y la tinta de --on-brand, igual que .btn--primary: el glifo es
   el que da el reconocimiento, no un verde ajeno a la paleta. */
.wa{
  position:fixed;z-index:40;
  right:clamp(1rem,3vw,1.75rem);
  bottom:clamp(1rem,3vw,1.75rem);
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--green);color:var(--on-brand);
  box-shadow:0 6px 22px rgba(8,17,30,.38);
  transition:transform .25s var(--ease),background .25s var(--ease);
}
.wa svg{width:30px;height:30px;fill:currentColor;display:block}
.wa:hover{background:var(--green-dim);color:var(--on-brand);transform:translateY(-3px)}
.wa:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}

@media (max-width:520px){
  .wa{width:52px;height:52px}
  .wa svg{width:28px;height:28px}
}