/* =============================================================
   LIBERFY · Landing de captación — MAQUETA EN GRIS v2
   Composición y estructura: adaptadas de ClickUp + Bizneo
   (ver direccion-arte-landing.md, parte 1)
   CAMBIOS v2 pedidos por el dueño:
     · FUERA la tipografía monoespaciada de toda la página.
   TIPOGRAFÍA v3 (Brandbook Liberfy V4.0, Kim):
     · Playfair Display 700 SOLO en display (titulares y cifras
       grandes, de 40px hacia arriba) + su itálica para el énfasis.
     · Roboto para todo lo que se lee de cerca: subtítulos, cuerpo,
       botones, etiquetas, UI. Cifras con tabular-nums.
     · Botones y campos con 5px de radio.
     · Secciones con volumen: paneles redondeados, bento,
       pestañas, capturas grandes. Nada plano.
   Móvil primero: todos los clamp() tienen 390px como suelo.
   ============================================================= */

/* ---------- 0 · TOKENS ---------- */
:root{
  --negro:#060E0C;
  --carbon:#0C1815;          /* superficie oscura elevada (paneles) */
  --blanco:#FFFFFF;
  --nieve:#F2F4F3;           /* respiro claro entre bandas blancas */
  --verde:#3CC1A0;
  --verde-agua:#E7F7F2;      /* verde al 8% en sólido, para superficies claras */
  --naranja:#F03906;
  --azul:#7FA9D6;
  --azul-agua:#EDF3FA;
  --lila-agua:#F0EEFA;

  --tinta-b-100:#FFFFFF;
  --tinta-b-70:rgba(255,255,255,.72);
  --tinta-b-45:rgba(255,255,255,.45);
  --tinta-n-100:#060E0C;
  --tinta-n-70:rgba(6,14,12,.72);
  --tinta-n-45:rgba(6,14,12,.48);
  --hairline-dark:rgba(255,255,255,.14);
  --hairline-light:rgba(6,14,12,.12);

  /* Brandbook V4.0 · dos voces:
     Playfair Display 700 = SOLO display (titulares y cifras grandes, 40px+)
     Roboto = todo lo que se lee de cerca (subtítulos, cuerpo, UI, etiquetas) */
  --display:'Playfair Display',Georgia,'Times New Roman',serif;
  --texto:'Roboto',system-ui,sans-serif;
  --ui:'Roboto',system-ui,sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);

  /* Escala tipográfica — móvil primero */
  --h-manifiesto:clamp(46px,12.4vw,150px);
  --h-seccion:clamp(32px,8.2vw,72px);
  --h-sub:clamp(21px,5.2vw,32px);
  --cifra:clamp(56px,14vw,104px);
  --cuerpo:clamp(17px,4.4vw,19px);

  /* Radios */
  --r-btn:10px;
  --r-tarjeta:20px;
  --r-panel:28px;

  --marco:clamp(20px,5.6vw,6vw);
  --ancho:1240px;
  --barra:calc(64px + env(safe-area-inset-bottom));
}

/* ---------- 1 · BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
/* 31-08-2026 · En esta página nada necesita desplazarse en horizontal. Si algo
   se sale (una rejilla a 100vw, la cinta de un carrusel), se recorta en vez de
   dejar arrastrar la página: en móvil ese arrastre enseñaba una franja en
   blanco a la derecha. Se usa 'clip' y no 'hidden' porque clip no crea un
   contenedor de scroll y no rompe nada que dependa de la posición. */
html,body{overflow-x:clip; max-width:100%}
@supports not (overflow-x:clip){html,body{overflow-x:hidden}}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0; background:var(--blanco); color:var(--tinta-n-100);
  font-family:var(--texto); font-weight:400; font-size:var(--cuerpo); line-height:1.55;
  -webkit-font-smoothing:antialiased;
  /* clip y NO hidden: hidden crea contexto de scroll y rompe el sticky del arco */
  overflow-x:clip;
}
img,svg,video{max-width:100%; display:block}
button,input,select{font:inherit; color:inherit}
a{color:inherit}
h1,h2,h3,h4{margin:0}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
:focus-visible{outline:2px solid var(--verde); outline-offset:3px}

/* ---------- 2 · TIPOGRAFÍA ---------- */
.display,h1,h2{
  font-family:var(--display); font-weight:700;
  letter-spacing:-.015em; line-height:1.04; text-wrap:balance;
}
h1,h2{font-size:var(--h-seccion)}
/* los saltos de linea de los titulares van a mano (.ln): sin balance automatico
   (en movil sí se equilibra, porque ahí sí tienen que partirse) */
@media (min-width:820px){h1:has(.ln),h2:has(.ln){text-wrap:normal}}
h3{font-family:var(--ui); font-weight:700; font-size:var(--h-sub); letter-spacing:-.01em; line-height:1.15}
.manifiesto{font-size:var(--h-manifiesto); letter-spacing:-.02em; line-height:1}

/* Etiqueta de sección — Roboto en versal con tracking (así van en el brandbook), NUNCA monoespaciada */
.label{
  font-family:var(--ui); font-weight:700; font-size:clamp(12px,3.2vw,14px);
  text-transform:uppercase; letter-spacing:.09em; color:var(--verde);
  margin:0 0 clamp(14px,3.6vw,22px); display:block;
}
.oscura .label{color:var(--verde)}

.cifra{font-family:var(--display); font-weight:700; font-size:var(--cifra);
  letter-spacing:-.02em; line-height:.9; font-variant-numeric:tabular-nums}
.cifra .sim{font-size:.5em; font-weight:400}
p,li{max-width:58ch}
.lead{font-size:clamp(18px,4.6vw,21px); color:var(--tinta-n-70); font-weight:300}

/* Bandas */
.oscura{background:var(--negro); color:var(--tinta-b-100)}
.oscura p,.oscura li,.oscura .lead{color:var(--tinta-b-70)}
.nieve{background:var(--nieve)}
.tenue{color:var(--tinta-n-45)}
.oscura .tenue{color:var(--tinta-b-45)}
.tachado{text-decoration:line-through; text-decoration-thickness:.06em; color:var(--tinta-n-45)}
.acento{color:var(--verde)}
/* Resaltes de lectura (SEO + guía de la mirada): negrita, subrayado y cursiva */
u{text-decoration-color:var(--verde); text-decoration-thickness:2px; text-underline-offset:3px}
p b,li b{font-weight:500; color:var(--tinta-n-100)}
.oscura p b,.oscura li b,.panel-osc p b{color:#fff}

/* ---------- 3 · MARCADOR SVG (recurso de marca) ---------- */
.marca{position:relative; display:inline-block; white-space:nowrap}
.marca > svg{
  position:absolute; z-index:-1; left:-.08em; bottom:-.03em;
  width:calc(100% + .16em); height:.30em; overflow:visible;
  transform:rotate(-1.1deg);
}
.marca > svg path{
  stroke:var(--verde); stroke-width:9; stroke-linecap:round; fill:none; opacity:.9;
  stroke-dasharray:220; stroke-dashoffset:220;
  transition:stroke-dashoffset .55s var(--ease) .25s;
}
.vis .marca > svg path{stroke-dashoffset:0}
/* el arco de «Nosotros sí» no se dibuja de golpe: lo va trazando el scroll */
.marca--scroll > svg path{transition:none}
.marca--plazo > svg path{stroke:var(--naranja)}
/* Resaltado de bloque (patrón Bizneo) */
.bloque-res{background:var(--verde-agua); padding:0 .16em; border-radius:4px; box-decoration-break:clone; -webkit-box-decoration-break:clone}
.oscura .bloque-res{background:rgba(60,193,160,.18); color:#fff}

/* ---------- 4 · RETÍCULA ---------- */
.sec{position:relative; padding:clamp(64px,15vw,130px) var(--marco)}
.wrap{max-width:var(--ancho); margin-inline:auto; position:relative; z-index:2}
/* OJO: max-width en `ch` se resuelve con el font-size del CONTENEDOR (19px),
   no con el del titular — estrangulaba los h2 a ~220px. Medidas en px. */
.cab-sec{max-width:none}
.cab-sec.centrada{margin-inline:auto; text-align:center}
@media (min-width:820px){
  /* el titular respira a su ancho; lo que se estrecha es el texto de lectura */
  .cab-sec{max-width:none}
  .cab-sec > p{max-width:660px}
  .cab-sec.centrada{max-width:920px; }
  .cab-sec.centrada > p{max-width:660px}
  .cab-sec:has(.manifiesto){max-width:900px}
  /* la escala baja con la ventana para que el titular quepa siempre en su linea */
  :root{--h-seccion:clamp(46px,5.4vw,72px)}
}
.cab-sec.centrada .lead{margin-inline:auto}

/* Aurora — el único degradado */
.aurora{position:absolute; inset:auto 0 0 0; height:72%; pointer-events:none; z-index:0; overflow:hidden}
.aurora::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(120% 100% at 50% 118%,
    rgba(60,193,160,.50) 0%, rgba(60,193,160,.20) 34%, rgba(60,193,160,0) 68%);
  animation:deriva 24s ease-in-out infinite alternate;
}
.aurora--clara::before{
  background:radial-gradient(120% 100% at 50% 118%,
    rgba(60,193,160,.26) 0%, rgba(60,193,160,.10) 36%, rgba(60,193,160,0) 70%);
}
.aurora::after{
  content:''; position:absolute; inset:0; opacity:.028; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes deriva{
  from{transform:translateY(2.5%) scale(1); opacity:.85}
  to  {transform:translateY(-2.5%) scale(1.05); opacity:1}
}

/* ---------- 5 · HUECOS DE IMAGEN (maqueta en gris) ---------- */
.hueco{
  position:relative; width:100%; background:#DFE1DF; border-radius:var(--r-tarjeta);
  display:flex; align-items:center; justify-content:center; padding:16px; overflow:hidden;
}
.oscura .hueco,.panel-osc .hueco{background:rgba(255,255,255,.08)}
.hueco span{
  font-family:var(--texto); font-size:11.5px; letter-spacing:.02em;
  color:var(--tinta-n-45); text-align:center; line-height:1.6; max-width:36ch;
}
.oscura .hueco span,.panel-osc .hueco span{color:var(--tinta-b-45)}
.r-4-5{aspect-ratio:4/5} .r-1-1{aspect-ratio:1/1} .r-3-2{aspect-ratio:3/2}
.r-16-9{aspect-ratio:16/9} .r-9-16{aspect-ratio:9/16} .r-3-4{aspect-ratio:3/4}
.r-21-9{aspect-ratio:21/9}

/* ---------- 6 · BOTONES ----------
   v4 · 31-08-2026, encargo del dueño: píldora verde con degradado, disco
   oscuro a la izquierda con la flecha diagonal y halo del verde corporativo
   al hacer clic. Un solo estilo para TODOS los botones de la página: las
   variantes --oscuro y --fantasma se igualan a este (se quedan en el HTML
   por si algún día hay que devolverles su aspecto). */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  min-height:56px; padding:7px 30px 7px 7px;
  border:0; border-radius:999px; cursor:pointer;
  background:linear-gradient(105deg,#5AD6B7 0%,#3CC1A0 52%,#2FAF8E 100%);
  color:var(--negro);
  font-family:var(--ui); font-weight:700; font-size:17px; letter-spacing:-.01em;
  text-decoration:none; isolation:isolate;
  box-shadow:0 1px 0 rgba(255,255,255,.30) inset, 0 8px 20px rgba(6,14,12,.20);
  transition:transform .18s var(--ease), box-shadow .22s var(--ease), filter .18s var(--ease);
}
/* el brillo: una banda diagonal que barre el botón al entrar el cursor */
.btn::after{
  content:''; position:absolute; z-index:-1; inset:0 auto 0 -140%;
  width:80%; transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transition:none; pointer-events:none;
}
@media (hover:hover){
  .btn:hover{transform:translateY(-1px);
    box-shadow:0 1px 0 rgba(255,255,255,.34) inset, 0 10px 26px rgba(60,193,160,.34)}
  .btn:hover::after{animation:brillo .72s var(--ease) forwards}
}
@keyframes brillo{to{left:140%}}
/* el halo verde azulado del clic (y del foco, para el que va con teclado) */
.btn:active,.btn:focus{
  outline:none; transform:translateY(1px);
  box-shadow:0 0 0 4px rgba(60,193,160,.30), 0 12px 34px rgba(60,193,160,.55),
             0 1px 0 rgba(255,255,255,.30) inset;
}
/* el disco oscuro con la flecha diagonal, delante del texto */
.btn .flecha{
  flex:0 0 auto; display:grid; place-items:center;
  width:42px; height:42px; border-radius:50%;
  background:var(--negro);
  transition:transform .22s var(--ease);
}
.btn .flecha svg{
  width:19px; height:19px; fill:none; stroke:var(--verde); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.btn .btn-t{display:block}
@media (hover:hover){.btn:hover .flecha{transform:translate(2px,-2px)}}
/* variantes: mismo aspecto que el principal */
.btn--oscuro,.btn--fantasma{
  background:linear-gradient(105deg,#5AD6B7 0%,#3CC1A0 52%,#2FAF8E 100%);
  color:var(--negro); border:0;
  box-shadow:0 1px 0 rgba(255,255,255,.30) inset, 0 8px 20px rgba(6,14,12,.20);
}
.btn--oscuro .flecha,.btn--fantasma .flecha{background:var(--negro)}
.btn--oscuro .flecha svg,.btn--fantasma .flecha svg{stroke:var(--verde)}
@media (hover:hover){
  .btn--oscuro:hover,.btn--fantasma:hover{
    background:linear-gradient(105deg,#5AD6B7 0%,#3CC1A0 52%,#2FAF8E 100%);
    box-shadow:0 1px 0 rgba(255,255,255,.34) inset, 0 10px 26px rgba(60,193,160,.34)}
}
/* a todo lo ancho (tarjetas de plan): disco a la izquierda y texto al lado */
.btn--ancho{width:100%; justify-content:flex-start; gap:14px; padding-right:22px}
.micro{font-size:14px; color:var(--tinta-n-45); margin-top:14px; max-width:46ch}
.oscura .micro{color:var(--tinta-b-45)}

/* --- la frase de marca que va debajo de cada botón --- */
.claim-cta{
  margin:14px 0 0; max-width:46ch;
  font-family:var(--ui); font-weight:400; font-size:15px; line-height:1.45;
  color:var(--tinta-n-70);
}
.claim-cta b{font-weight:700; color:var(--tinta-n-100)}
.oscura .claim-cta,.plan--destacado .claim-cta,.panel-osc .claim-cta{color:var(--tinta-b-70)}
.oscura .claim-cta b,.plan--destacado .claim-cta b,.panel-osc .claim-cta b{color:var(--verde)}
.cta-fila .claim-cta{margin-top:0; max-width:none}
.centrado .claim-cta,.cab-sec.centrada .claim-cta{margin-inline:auto; text-align:center}
.claim-cta--plan{margin-top:12px; font-size:13.5px; max-width:none; text-align:center}
.claim-cta--grande{margin-top:24px; font-size:clamp(17px,4.2vw,21px); max-width:40ch}

/* CTA + microcopy al lado (patrón ClickUp) */
/* 31-08-2026 · la frase de marca va DEBAJO del botón, no al lado */
.cta-fila{display:flex; flex-direction:column; align-items:flex-start; gap:14px}
.cta-fila .micro{margin-top:0; max-width:22ch}
.enlace{display:inline-flex; align-items:center; gap:8px; font-weight:500; font-family:var(--ui);
  text-decoration:none; color:var(--verde)}
.enlace .flecha{transition:transform .2s var(--ease)}
@media (hover:hover){.enlace:hover .flecha{transform:translate(3px,-3px)}}

/* Píldora / badge (patrón ClickUp) */
.pastilla{
  display:inline-flex; align-items:center; gap:10px; padding:9px 18px 9px 14px;
  border:1px solid var(--hairline-dark); border-radius:999px;
  font-family:var(--ui); font-weight:700; font-size:14px; color:#fff;
  background:rgba(255,255,255,.05); margin-bottom:26px;
}
.pastilla .punto{width:8px; height:8px; border-radius:50%; background:var(--verde); flex:0 0 auto}
.sec:not(.oscura) .pastilla{border-color:var(--hairline-light); color:var(--tinta-n-100); background:var(--nieve)}

/* ---------- 7 · CABECERA + SUB-NAV + BARRA ---------- */
.cab{
  position:fixed; inset:0 0 auto 0; z-index:60;
  padding:14px var(--marco);
  background:transparent; transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
  border-bottom:1px solid transparent;
}
/* el logo se alinea con el cuerpo de la landing, no con el borde de la ventana */
.cab .wrap{display:flex; align-items:center; gap:clamp(18px,3vw,44px)}
.cab.solida{background:var(--negro); border-bottom-color:var(--hairline-dark)}
/* el logotipo oficial (lockup Liberfy × Candosa, versión negativa) */
.marca-logo{display:flex; align-items:center; flex:0 0 auto; text-decoration:none; line-height:0}
.marca-logo img{width:auto; height:clamp(26px,5.4vw,32px)}

/* --- NAVBAR (corrección 2 de Kim, doc 27-08-2026) --- */
.cab-nav{display:none; align-items:center; gap:clamp(14px,2vw,30px); margin-right:auto}
.cab-nav a{
  font-family:var(--ui); font-weight:500; font-size:15px; color:var(--tinta-b-70);
  text-decoration:none; padding:8px 2px; position:relative;
  transition:color .2s var(--ease);
}
.cab-nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:2px; height:1.5px;
  background:var(--verde); transition:right .25s var(--ease);
}
@media (hover:hover){.cab-nav a:hover{color:#fff} .cab-nav a:hover::after{right:0}}
.cab .btn{min-height:46px; padding:5px 22px 5px 5px; font-size:15px; gap:10px; flex:0 0 auto; margin-left:auto}
.cab .btn .flecha{width:36px; height:36px}
.cab .btn .flecha svg{width:16px; height:16px}
@media (min-width:940px){
  .cab-nav{display:flex}
  .cab .btn{margin-left:0}
}
/* 31-08-2026 · la barra fija del móvil: la frase encima, el botón debajo */
.barra{
  position:fixed; left:0; right:0; bottom:0; z-index:58;
  display:flex; flex-direction:column; align-items:stretch; gap:10px;
  padding:12px var(--marco) calc(12px + env(safe-area-inset-bottom));
  background:var(--negro); border-top:1px solid var(--hairline-dark);
  transform:translateY(110%); transition:transform .32s var(--ease);
}
.barra.on{transform:translateY(0)}
.barra .t2{
  margin:0; text-align:center; font-family:var(--ui);
  font-size:13.5px; line-height:1.35; color:var(--tinta-b-70);
}
.barra .t2 b{color:var(--verde); font-weight:700}
.barra .btn{min-height:52px; width:100%; padding:5px 18px 5px 5px; font-size:16px; gap:12px}
.barra .btn .flecha{width:40px; height:40px}
.barra .btn .flecha svg{width:17px; height:17px}
/* 02-09-2026 · La barra dejó de ser solo de móvil: el CTA fijo es la
   convención de la casa y en escritorio no estaba. Ahí no se apila —el texto y
   el botón caben en fila— y el botón se encoge, porque a 70px de alto una
   barra fija se come la página. */
@media (min-width:900px){
  .barra{
    flex-direction:row; align-items:center; justify-content:center;
    gap:clamp(20px,3vw,40px); padding:11px var(--marco);
  }
  .barra .t2{text-align:left; font-size:15px}
  .barra .btn{
    width:auto; flex:0 0 auto; min-height:48px;
    padding:5px 26px 5px 5px; font-size:15.5px; gap:12px;
  }
  .barra .btn .flecha{width:38px; height:38px}
  .barra .btn .flecha svg{width:16px; height:16px}
}

/* --- La cabecera vuelve al subir + menú de secciones en móvil -------------
   Antes se retiraba pasado el hero y no volvía: no había forma de saltar a
   otra sección sin subir del todo a mano. */

/* Alto real de la cabecera; script.js lo reescribe por página. El valor de
   aquí es el de la portada (14px + botón de 46px + 14px). */
:root{ --cab-h:74px }

/* Sin esto el ancla queda DETRÁS de la cabecera fija en vez de debajo. */
html{ scroll-padding-top:calc(var(--cab-h) + 14px) }

.cab.fuera{ transform:translateY(-110%) }
/* Con el panel abierto la cabecera nunca es transparente. */
.cab.abierta{ background:var(--negro); border-bottom-color:var(--hairline-dark) }

/* --- botón de menú (solo donde .cab-nav no cabe) --- */
.cab-menu{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; margin-left:12px; padding:0;
  border:1px solid var(--hairline-dark); border-radius:999px;
  background:rgba(255,255,255,.04); color:#fff; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.cab-menu-i{ position:relative; display:block; width:18px; height:12px }
.cab-menu-i i{
  position:absolute; left:0; right:0; height:2px; border-radius:2px;
  background:currentColor;
  transition:transform .24s var(--ease), opacity .18s var(--ease);
}
.cab-menu-i i:nth-child(1){ top:0 }
.cab-menu-i i:nth-child(2){ top:5px }
.cab-menu-i i:nth-child(3){ top:10px }
.cab-menu[aria-expanded="true"] .cab-menu-i i:nth-child(1){ transform:translateY(5px) rotate(45deg) }
.cab-menu[aria-expanded="true"] .cab-menu-i i:nth-child(2){ opacity:0 }
.cab-menu[aria-expanded="true"] .cab-menu-i i:nth-child(3){ transform:translateY(-5px) rotate(-45deg) }
@media (hover:hover){ .cab-menu:hover{ background:rgba(255,255,255,.09) } }
@media (min-width:940px){ .cab-menu{ display:none } }

/* En pantalla de teléfono no caben a la vez el logo, el CTA y el botón de
   menú: la fila se desbordaba y el botón quedaba cortado por el borde. El CTA
   de la cabecera es el que sobra — la portada ya lleva el suyo, el panel
   repite «Empezar» y la barra inferior lo mantiene fijo al bajar. */
@media (max-width:559px){
  .cab .btn{ display:none }
  .cab-menu{ margin-left:auto }
}

/* --- panel de secciones --- */
.cab-panel{
  position:absolute; top:100%; left:0; right:0;
  display:flex; flex-direction:column;
  padding:6px var(--marco) calc(18px + env(safe-area-inset-bottom));
  background:var(--negro); border-bottom:1px solid var(--hairline-dark);
  /* dvh, no vh: en móvil la barra del navegador se come los vh */
  max-height:calc(100dvh - var(--cab-h)); overflow-y:auto; overscroll-behavior:contain;
  opacity:0; transform:translateY(-10px);
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.cab-panel[hidden]{ display:none }
.cab-panel-nav{ display:flex; flex-direction:column }
.cab-panel.on{ opacity:1; transform:none }
.cab-panel a:not(.btn){
  display:flex; align-items:center;
  min-height:52px;                 /* objetivo cómodo para el dedo */
  padding:0 2px; border-bottom:1px solid var(--hairline-dark);
  font-family:var(--ui); font-weight:500; font-size:17px;
  color:#fff; text-decoration:none;
}
.cab-panel a:not(.btn):last-of-type{ border-bottom:0 }
.cab-panel .btn{ margin-top:14px; width:100% }
@media (min-width:940px){ .cab-panel{ display:none } }

/* Con el panel abierto, lo de detrás no se mueve. */
html.menu-abierto, html.menu-abierto body{ overflow:hidden }

@media (prefers-reduced-motion:reduce){
  .cab{ transition:background .3s, border-color .3s }
  .cab-panel, .cab-menu-i i{ transition:none }
}

/* ---------- 8 · MOVIMIENTO ---------- */
.m1{opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.m1.vis{opacity:1; transform:none}
.m1[data-d="1"]{transition-delay:.06s} .m1[data-d="2"]{transition-delay:.12s}
.m1[data-d="3"]{transition-delay:.18s} .m1[data-d="4"]{transition-delay:.24s}
.m1[data-d="5"]{transition-delay:.30s} .m1[data-d="6"]{transition-delay:.36s}
.m2 .ln{display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em}
.m2 .ln > span{display:block; transform:translateY(105%); transition:transform .62s var(--ease)}
.m2.vis .ln > span{transform:none}
.m2 .ln:nth-child(2) > span{transition-delay:.08s}
.m2 .ln:nth-child(3) > span{transition-delay:.16s}
.m2 .ln:nth-child(4) > span{transition-delay:.24s}
.m2 .ln:nth-child(5) > span{transition-delay:.32s}
.m4{filter:blur(4px); opacity:.35; transition:filter .7s var(--ease), opacity .7s var(--ease)}
.m4.vis{filter:blur(0); opacity:1}
.m6 .dg{display:inline-block; overflow:hidden; vertical-align:bottom}
.m6 .dg > span{display:block; transform:translateY(100%); transition:transform .5s var(--ease)}
.m6.vis .dg > span{transform:none}
@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  .m1,.m4{opacity:1!important; transform:none!important; filter:none!important; transition:none!important}
  .m2 .ln > span,.m6 .dg > span{transform:none!important; transition:none!important}
  .marca > svg path{stroke-dashoffset:0!important; transition:none!important}
  .aurora::before{animation:none}
  #arco-obj,#arco-foto{transition:none!important}
  .marquesina div{animation:none!important}
}

/* =============================================================
   SECCIONES
   ============================================================= */

/* --- 1 · HERO (composición ClickUp: texto + captura a sangre) --- */
#hero{
  --hero-pb:clamp(64px,12vw,104px);
  background:var(--negro); color:var(--tinta-b-100);
  padding-top:calc(104px + env(safe-area-inset-top));
  padding-bottom:var(--hero-pb);
  overflow:hidden;
}
/* 54px de techo: a 62px la línea «que adora los negocios» rompía en dos
   y el titular se iba a 4 líneas (el brandbook pide 3 como máximo) */
#hero h1{font-size:clamp(30px,6.9vw,54px); margin-bottom:22px; letter-spacing:-.015em}
#hero .lead{max-width:50ch; margin-bottom:clamp(22px,5vw,28px); color:var(--tinta-b-70)}
/* Puntos del hero — mismo arco de marca que las garantías, en columna */
.puntos-hero{list-style:none; margin:0 0 clamp(26px,6vw,34px); padding:0; display:grid; gap:11px}
.puntos-hero li{
  position:relative; padding-left:28px; max-width:44ch;
  font-size:15.5px; line-height:1.45; color:var(--tinta-b-70);
}
.puntos-hero li::before{
  content:''; position:absolute; left:0; top:7px; width:13px; height:13px;
  border-radius:999px 999px 0 0; background:var(--verde);
}
#hero .visual{
  margin-top:clamp(40px,9vw,64px); position:relative;
  /* se apoya en el borde de abajo de la sección, sin aire por debajo */
  margin-bottom:calc(-1 * var(--hero-pb));
}
#hero .hero-foto{border-radius:var(--r-panel) var(--r-panel) 0 0}
#hero .visual .hueco{border-radius:var(--r-panel)}
/* La foto del hero es una composición con su propio fondo negro: se muestra
   entera (nada de recortar las tarjetas) y se apoya en el borde de abajo. */
#hero .hero-foto{
  width:100%; height:auto; display:block;
  object-fit:contain; object-position:center bottom;
}

/* MÓVIL Y TABLET: la foto se mete entre la pastilla y el titular.
   El div del texto no tiene estilos propios, así que lo disolvemos con
   display:contents y sus hijos pasan a ser hermanos de .visual; a partir
   de ahí el orden se decide con 'order'. A partir de 1000px manda el
   grid de escritorio (texto a la izquierda, foto a la derecha). */
@media (max-width:999px){
  #hero .wrap{display:flex; flex-direction:column}
  #hero .wrap > div:not(.visual){display:contents}

  #hero .pastilla   {order:1}
  #hero h1          {order:2}
  #hero .visual     {order:3}
  #hero .lead       {order:4}
  #hero .puntos-hero{order:5}
  #hero .cta-fila   {order:6}

  /* la pastilla es una píldora: que no se estire a todo el ancho */
  #hero .pastilla{align-self:flex-start; margin-bottom:18px}

  /* ya no se apoya en el borde de abajo de la sección: fuera el margen
     negativo que la sacaba a sangre */
  #hero .visual{margin-top:0; margin-bottom:clamp(22px,5vw,30px)}

  /* al dejar de apoyarse abajo, las cuatro esquinas redondeadas. Y un
     techo de altura para que el titular no se vaya fuera de pantalla
     (la foto es apaisada hacia vertical: a ancho completo comía media
     pantalla ella sola). */
  #hero .hero-foto{
    border-radius:var(--r-panel);
    max-height:min(52vh, 430px);
    object-position:center;
  }

  /* entra la segunda, no la última: se le adelanta la animación */
  #hero .visual[data-d]{transition-delay:.06s}
}

/* --- 2 · TIRA DE CONFIANZA (panel oscuro montado sobre el hero, patrón Bizneo) --- */
#confianza{padding-top:clamp(36px,8vw,64px); padding-bottom:clamp(30px,6.5vw,50px); background:var(--blanco)}
/* Cuando debajo del panel de confianza va otra banda CLARA, los dos paddings se
   suman en un vacío enorme (eran 100 + 130 = 230 px) y, al ser las dos blancas,
   no hay cambio de color que lo justifique: se lee como un agujero. Entre bandas
   de distinto color esto no pasa, porque el corte lo marca el color.
   Va por hermano adyacente y no por id, para que aguante si se reordena. */
#confianza + .sec:not(.oscura):not(.nieve){padding-top:clamp(34px,7vw,58px)}
.panel-osc{
  background:var(--carbon); color:var(--tinta-b-100); border-radius:var(--r-panel);
  padding:clamp(30px,7vw,56px); position:relative; overflow:hidden;
}
.panel-osc .lead,.panel-osc p{color:var(--tinta-b-70)}
.resenas{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding-bottom:clamp(26px,6vw,36px); border-bottom:1px solid var(--hairline-dark);
  margin-bottom:clamp(26px,6vw,36px); position:relative; z-index:2;
}
.caras-mini{display:flex}
.caras-mini i,.caras-mini img{
  width:40px; height:40px; border-radius:50%; background:#3A423F;
  border:2px solid var(--carbon); margin-left:-12px; display:block;
  object-fit:cover;
}
.caras-mini > :first-child{margin-left:0}
.estrellas-svg{display:flex; gap:3px}
.estrellas-svg svg{width:19px; height:19px; fill:#FFC53D}
.resenas .txt{font-size:15px; color:var(--tinta-b-70)}
.resenas .txt b{font-family:var(--ui); font-weight:700; color:#fff; font-size:17px}

.metricas{display:grid; gap:0; position:relative; z-index:2}
.metrica{padding:22px 0; border-top:1px solid var(--hairline-dark)}
.metrica:first-child{border-top:0; padding-top:0}
.metrica .n{font-family:var(--display); font-weight:700; font-size:clamp(36px,9vw,50px);
  line-height:.95; letter-spacing:-.02em; color:var(--verde); margin-bottom:8px}
.metrica .n .sim{font-size:.5em; font-weight:400}
/* métricas con texto en vez de cifra (Gestor asignado · Todo al día · Sin permanencia) */
.metrica .n--t{font-size:clamp(25px,6.6vw,35px); line-height:1.05; letter-spacing:-.015em; text-wrap:balance}
.metrica .d{font-size:15.5px; color:var(--tinta-b-70); max-width:26ch}
@media (min-width:820px){
  .metricas{grid-template-columns:repeat(4,1fr); gap:0 32px; align-items:start}
  .metrica{border-top:0; border-left:1px solid var(--hairline-dark); padding:0 0 0 28px}
  .metrica:first-child{border-left:0; padding-left:0}
  /* CORRECCIÓN 5 de Kim (doc 27-08-2026): la fila se leía en escalera, como si
     fuese de más grande a más pequeño. El título de cada métrica ocupa ahora
     la MISMA caja y se apoya abajo, así que las cuatro últimas líneas caen
     sobre la misma base y las cuatro descripciones arrancan a la misma altura. */
  .metrica .n{
    min-height:clamp(54px,7.4vw,74px); margin-bottom:16px;
    display:flex; align-items:flex-end;
  }
}

/* --- 3 · SITUACIONES: problema Y solución, ambos visibles --- */
/* Foto que abre la sección, a lo ancho de la retícula */
.foto-seccion{
  display:block; width:100%; height:auto;
  border-radius:var(--r-panel); margin-top:clamp(30px,6vw,46px);
}
/* cuando el hueco de maqueta hace de foto de sección */
.hueco.foto-seccion{display:flex}
/* en móvil un 16:9 se queda en una tira: se sube a 4:3 */
@media (max-width:719px){.hueco.foto-seccion{aspect-ratio:4/3}}
.situaciones{display:grid; gap:16px; margin-top:clamp(20px,4vw,30px)}
.situacion{
  background:var(--blanco); border:1px solid rgba(6,14,12,.085);
  border-radius:var(--r-tarjeta); padding:clamp(22px,5vw,30px);
  max-width:none; display:flex; flex-direction:column; gap:20px;
  transition:transform .25s var(--ease);
}
@media (hover:hover){.situacion:hover{transform:translateY(-3px)}}
.situacion .queja{
  font-family:var(--ui); font-weight:700; font-size:clamp(18px,4.6vw,22px);
  line-height:1.25; letter-spacing:-.02em; color:var(--naranja); margin:0;
}
.situacion .queja::before{content:'«'} .situacion .queja::after{content:'»'}
.situacion .puente{
  display:flex; align-items:center; gap:10px;
  font-family:var(--ui); font-weight:700; font-size:13px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--verde);
}
.situacion .puente::after{content:''; flex:1; height:1px; background:var(--hairline-light)}
.situacion .sol{margin:0; font-size:16.5px; color:var(--tinta-n-70); max-width:none}
/* la sexta tarjeta no es una situación: es la salida */
.situacion--cta{background:var(--negro); border-color:var(--negro); color:var(--tinta-b-100); gap:14px}
.situacion--cta .cta-tit{
  font-family:var(--ui); font-weight:700; font-size:clamp(20px,5vw,26px);
  letter-spacing:-.025em; line-height:1.15; color:#fff; margin:0;
}
.situacion--cta .cta-txt{margin:0; font-size:16.5px; color:var(--tinta-b-70); max-width:none}
.situacion--cta u{text-decoration-color:var(--verde)}
.situacion--cta .cta-pie{margin-top:auto; padding-top:8px}
.situacion--cta .micro{color:var(--tinta-b-45); margin-top:12px}
@media (min-width:760px){.situaciones{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.situaciones{grid-template-columns:repeat(3,1fr)}}

/* --- 4 · HACIENDA: bento de escenas de WhatsApp --- */
.bento-escenas{display:grid; gap:14px; margin-top:clamp(32px,7vw,52px)}
.escena{
  background:var(--carbon); border-radius:var(--r-tarjeta); padding:clamp(22px,5vw,30px);
  max-width:none; border:1px solid var(--hairline-dark);
}
.escena .mom{
  font-family:var(--ui); font-weight:700; font-size:clamp(17px,4.3vw,20px);
  letter-spacing:-.015em; line-height:1.25; color:#fff; margin-bottom:16px;
}
.chat{display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:18px}
.chat-de{
  display:flex; align-items:center; gap:8px; width:100%;
  padding-bottom:10px; margin-bottom:4px; border-bottom:1px solid var(--hairline-dark);
  font-family:var(--ui); font-weight:700; font-size:12.5px; color:var(--tinta-b-45);
}
.chat-de .av{width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.16); flex:0 0 auto}
.burbuja{
  background:rgba(60,193,160,.14); border-radius:14px 14px 14px 4px;
  padding:13px 16px; font-size:clamp(15.5px,4vw,17px); color:#fff; max-width:92%; margin:0;
}
.burbuja--cliente{
  background:rgba(255,255,255,.10); border-radius:14px 14px 4px 14px; align-self:flex-end;
}
.burbuja .hr{display:block; font-size:11px; color:var(--tinta-b-45); text-align:right; margin-top:6px}
.escena p{font-size:16px}
.escena .mini-t{font-family:var(--ui); font-weight:700; font-size:17px; letter-spacing:-.01em; color:var(--verde); margin:0 0 6px}
.escena .mal{margin-top:14px; padding-top:12px; border-top:1px solid var(--hairline-dark); font-size:14.5px}
.escena .mal em{color:#F98C6B}
@media (min-width:900px){
  .bento-escenas{grid-template-columns:repeat(2,1fr)}
}
/* «Pensamos en todo» + consecuencias */
.pensamos{margin-top:clamp(36px,8vw,56px); max-width:62ch}
.eje-osc{
  font-family:var(--ui); font-weight:700; font-size:clamp(24px,6vw,36px);
  letter-spacing:-.015em; line-height:1.05; color:#fff; margin-bottom:14px;
}
.pensamos .consec{font-size:15.5px; color:var(--tinta-b-45); max-width:56ch}

/* --- CABECERA DE SECCIÓN CON FOTO (gestor, consultoría) --- */
.cab-foto{display:grid; gap:clamp(28px,6vw,40px)}
.cab-visual .hueco{border-radius:var(--r-panel)}
/* en móvil una foto 4:5 se come una pantalla entera: se achata */
@media (max-width:999px){.cab-visual .hueco{aspect-ratio:4/3}}
.cab-foto--bajo{margin-top:clamp(24px,5vw,34px)}
.cab-foto--bajo > .lead{max-width:none}
@media (min-width:1000px){
  .cab-foto{grid-template-columns:1.15fr .85fr; gap:clamp(40px,4.5vw,64px); align-items:center}
  .cab-foto .cab-sec{max-width:none}
  .cab-foto .cab-sec > p{max-width:none}
  .cab-foto--bajo{grid-template-columns:1fr 1fr; align-items:center}
}

/* --- 4 · HACIENDA NO AVISA: cabecera + cinta de frames a sangre --- */
#hacienda{padding-bottom:0}
.hacienda-cab{position:relative; padding-bottom:clamp(52px,10vw,88px)}
.centrado{text-align:center}
.centrado .micro{margin-inline:auto}

/* La secuencia: el recorrido de scroll manda los frames.
   Va de borde a borde, así que anula el margen lateral de la sección.
   OJO: NO se llama .cinta — esa clase ya era la etiqueta «El más contratado»
   de la tarjeta de plan, y el nombre repetido reventaba la sección de tarifas. */
.secuencia{
  position:relative; z-index:2; height:260vh;
  margin-inline:calc(-1 * var(--marco));
}
.secuencia-etapa{
  position:sticky; top:0; height:88vh; overflow:hidden;
  background:var(--carbon);
}
.secuencia-lienzo{display:block; width:100%; height:100%; opacity:0; transition:opacity .45s var(--ease)}
.secuencia.listo .secuencia-lienzo{opacity:1}
.secuencia-hueco{position:absolute; inset:0; height:100%; border-radius:0; aspect-ratio:auto}
.secuencia.listo .secuencia-hueco{display:none}
@media (max-width:899px){
  .secuencia{height:190vh}
  .secuencia-etapa{height:70vh}
}
@media (prefers-reduced-motion:reduce){
  .secuencia{height:auto}
  .secuencia-etapa{position:static; height:56vh}
}

/* --- 5 · TU GESTOR Y TU EQUIPO --- */
/* Tres pilares del gestor (bento) */
.pilares{display:grid; gap:14px; margin-top:clamp(32px,7vw,48px)}
.pilar{
  background:var(--carbon); border:1px solid var(--hairline-dark); border-radius:var(--r-tarjeta);
  padding:clamp(22px,5vw,30px); max-width:none;
}
.pilar .n{font-family:var(--display); font-weight:700; font-size:clamp(34px,8vw,44px);
  color:var(--verde); line-height:1; letter-spacing:-.02em; margin-bottom:16px}
.pilar h3{font-size:clamp(18px,4.4vw,22px); color:#fff; margin-bottom:10px}
.pilar p{font-size:16px; margin:0}
@media (min-width:900px){.pilares{grid-template-columns:repeat(3,1fr)}}

/* --- 6 · PESTAÑAS DE CATEGORÍA (patrón Bizneo) --- */
.pestanas{
  display:flex; gap:4px; padding:5px; background:var(--nieve); border-radius:999px;
  margin:clamp(28px,6vw,40px) 0 0; overflow-x:auto; scrollbar-width:none;
}
.pestanas::-webkit-scrollbar{display:none}
.pestanas button{
  flex:1 0 auto; border:0; cursor:pointer; background:transparent; color:var(--tinta-n-45);
  padding:13px 20px; border-radius:999px; white-space:nowrap;
  font-family:var(--ui); font-weight:700; font-size:15px;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.pestanas button[aria-selected="true"]{background:var(--blanco); color:var(--tinta-n-100)}
.panel-cat{display:none; margin-top:clamp(28px,6vw,44px)}
.panel-cat.on{display:block}
.panel-cat .eje{
  font-family:var(--ui); font-weight:700; font-size:clamp(20px,5.2vw,30px); line-height:1.2;
  letter-spacing:-.025em; margin-bottom:16px; max-width:22ch;
}
.panel-cat .lista{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:0}
.panel-cat .lista li{
  font-size:16.5px; color:var(--tinta-n-70); padding:14px 0 14px 26px;
  border-top:1px solid var(--hairline-light); max-width:none; position:relative;
}
.panel-cat .lista li::before{
  content:''; position:absolute; left:0; top:23px; width:10px; height:10px;
  border-radius:999px 999px 0 0; background:var(--verde);
}
/* la foto de la pestaña, con el mismo molde que el hueco de maqueta */
.foto-cat{
  display:block; width:100%; height:auto; aspect-ratio:4/5;
  object-fit:cover; border-radius:var(--r-tarjeta);
}
/* 31-08-2026 · en móvil la foto va ENTERA: nada de recortarla para achatarla */
@media (max-width:899px){
  .panel-cat .hueco{aspect-ratio:4/3}
  /* la proporcion real de la foto (1160x1440): asi se ve entera Y reserva
     su hueco antes de cargar, sin que el contenido pegue un salto */
  .foto-cat{aspect-ratio:1160/1440; height:auto; object-fit:contain}

  /* La foto abre el panel, encima del titular de la pestaña. Antes cerraba,
     y quedaba pegada al texto que va debajo del botón. */
  .panel-cat.on{display:flex; flex-direction:column}
  .panel-cat .foto-cat{order:-1; margin-bottom:clamp(22px,5vw,30px)}
}
@media (min-width:900px){
  .panel-cat{display:none; grid-template-columns:1fr 1.05fr; gap:56px; align-items:start}
  .panel-cat.on{display:grid}
  .panel-cat .lista{grid-template-columns:1fr}
}

/* el puente de la pestaña online hacia la 6-BIS: no es un botón, es una invitación */
.puente-cat{
  margin:22px 0 0; font-size:16px; color:var(--tinta-n-45);
  border-top:1px solid var(--hairline-light); padding-top:18px;
}
.puente-cat a{text-decoration:none; color:inherit; transition:color .25s var(--ease)}
.puente-cat a b{color:var(--tinta-n-100); border-bottom:1.5px solid var(--verde); padding-bottom:1px}
.puente-cat a:hover{color:var(--tinta-n-70)}

/* --- 6-BIS · LOS MODELOS QUE NO CABEN EN UNA GESTORÍA NORMAL --- */

/* --- LAS DOS CINTAS DE MODELOS ---------------------------------------------
   Sustituyen al arco con recuadros y a la tira de píldoras: los tres decían la
   misma lista. Misma técnica que .marquesina (contenido duplicado + máscara en
   los bordes), pero en banda oscura, a tamaño de display y en dos sentidos.

   Del seccion-3a.html original se han cambiado tres cosas, a propósito:
   · DM Sans -> var(--ui) (Roboto). CLAUDE.md prohíbe mezclar tipografías y
     DM Sans habría vuelto a traer una petición a Google Fonts.
   · su paleta propia (--deep/--mint) -> los tokens de la casa.
   · la fila de abajo iba en cursiva, pero la Playfair que servimos no tiene
     itálica: el navegador la habría FALSIFICADO inclinándola. Las dos filas se
     distinguen por color, que era lo que ya hacía el diseño. */
.strips{
  background:var(--negro); display:flex; flex-direction:column;
  margin-top:clamp(30px,6vw,44px);
  /* a sangre: la sección lleva --marco de padding lateral y la banda tiene que
     tocar los dos bordes, como .secuencia */
  margin-inline:calc(-1 * var(--marco));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.track{
  display:flex; align-items:center; gap:44px; width:max-content; padding:26px 0;
  font-family:var(--display); font-size:clamp(26px,3.4vw,42px); line-height:1;
  white-space:nowrap;
}
.track span{display:block}
.track--a{color:var(--tinta-b-100); animation:desfile 40s linear infinite}
.track--b{color:var(--verde); border-top:1px solid var(--hairline-dark);
  animation:desfile-vuelta 52s linear infinite}
@keyframes desfile-vuelta{from{transform:translateX(-50%)} to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.track{animation:none !important}}

/* Las seis tarjetas van en CARRUSEL, con el mismo motor que el del equipo.
   Se cogen con el dedo y llevan flechas y barra de progreso. */
.carro--modelos{margin-top:clamp(36px,8vw,56px)}
.carro--modelos > *{flex:0 0 min(84vw,380px)}
.modelo{
  background:var(--nieve); border:1px solid var(--hairline-light);
  border-radius:var(--r-tarjeta); padding:clamp(22px,5vw,30px); max-width:none;
  display:flex; flex-direction:column;
}
.modelo .n{
  display:block; font-family:var(--ui); font-weight:700;
  font-size:14px; letter-spacing:.06em; color:var(--verde); margin-bottom:14px;
}
.modelo h3{font-size:clamp(18px,4.4vw,21px); margin-bottom:10px; letter-spacing:-.02em}
.modelo p{font-size:16px; margin:0; color:var(--tinta-n-70)}

/* La cinta de vídeo de esta sección va sobre BLANCO, no sobre carbón:
   la sección es clara y el vídeo se genera sobre fondo blanco, así que la
   banda tiene que continuarla sin un rectángulo negro en medio.
   (La de las manos, en la sección 4, sigue en carbón: es una banda oscura.) */
/* La cinta abre la sección: va lo primero, antes del titular. Como es blanca
   sobre banda blanca, el padding de la sección por encima no se ve — solo gasta
   scroll —, así que aquí se recorta y el aire se pone DEBAJO, entre el vídeo y
   el titular, que es donde sí hace falta. */
.sec-complejos > .secuencia:first-of-type{margin-top:0; margin-bottom:clamp(18px,4vw,32px)}

.secuencia--clara .secuencia-etapa{background:var(--blanco)}
/* El recorrido, ajustado a los 54 frames que quedan (el clip original tenía 97,
   pero los 43 últimos eran el logo ya formado y quieto: ese tramo muerto era lo
   que abría el hueco blanco entre el vídeo y el titular. Con la cinta recortada,
   el logo termina de formarse justo cuando el titular llega debajo).
   La fórmula del motor es recorrido = alto de la cinta - alto de la etapa, así
   que aquí: 180vh - 88vh = 92vh de scrub para 53 pasos, el mismo ritmo por
   frame que la cinta de las manos. */
/* Y la etapa ocupa la PANTALLA ENTERA, no 88vh como la de las manos. Es lo que
   cierra el hueco de verdad: con una etapa más baja que la ventana, durante el
   último tramo del scrub el contenedor sigue bajando por debajo de la etapa y
   aparece una franja blanca entre el vídeo y el titular. A pantalla completa no
   sobra nada: se ve el vídeo, y cuando termina el titular sube pegado.
   svh y no vh: en móvil el vh salta al esconderse la barra del navegador. */
.secuencia--clara .secuencia-etapa{height:100vh; height:100svh}
.secuencia--clara{height:190vh}
@media (max-width:899px){ .secuencia--clara{height:165vh} }
@media (prefers-reduced-motion:reduce){
  .secuencia--clara{height:auto}
  .secuencia--clara .secuencia-etapa{height:56vh}
}

/* el remate que va justo debajo del vídeo, donde aparece el logo.
   OJO: .cab-sec > p hereda max-width:660px en escritorio y NO trae margen
   automático, así que sin esto el titular queda descentrado respecto al
   texto y al botón de debajo. */
/* el remate cierra la sección, después del carrusel */
.remate-complejos{margin-top:clamp(52px,10vw,84px)}
.refuerzo{
  font-family:var(--display); font-weight:700;
  font-size:clamp(26px,6.4vw,46px); line-height:1.1; letter-spacing:-.015em;
  text-wrap:balance; text-align:center;
  margin:0 auto; max-width:760px;
}
.cab-sec > .refuerzo{max-width:760px; margin-inline:auto}

/* --- 7 · PLATAFORMA: «¿Sabes cómo va tu trimestre ahora mismo?» ---
   01-09-2026 · Pieza nueva de Kim. Sustituye a la lista + visor pegajoso
   (patrón Bizneo) y a toda la maqueta de producto hecha a mano, que ya no
   renderizaba en ninguna parte.

   Tres bandas: cabecera oscura a dos columnas, escenario claro con la maqueta
   del producto en parallax suave, y cuatro rasgos en rejilla al pie.

   Adaptado al sistema de la casa, no pegado tal cual:
     · DM Sans / DM Mono del original -> Roboto, var(--ui). No hay más voces
       que Playfair y Roboto (brandbook V4.0) y las fuentes van self-hosted:
       el <link> a fonts.googleapis.com del original NO se trae.
     · Playfair 500 -> var(--display), que es 400-700 variable.
     · El verde del original (#5FBF8E) no es el Verde Liberfy: va var(--verde).
     · Los grises de texto suben a --tinta-b-70; el #8AA093 sobre negro se
       quedaba en 4,0:1 y CLAUDE.md pide AA (4,5:1).
   La sección se sirve a sangre, así que no lleva .sec ni .wrap: el aire lo
   pone ella con var(--marco). */
.trimestre{
  position:relative; background:var(--negro); color:var(--tinta-b-100);
  overflow:hidden; display:flex; flex-direction:column;
}

/* cabecera */
.trimestre__head{
  padding:clamp(64px,15vw,110px) var(--marco) 0;
  max-width:var(--ancho); width:100%; margin-inline:auto;
  display:grid; gap:clamp(28px,6vw,40px);
}
.trimestre__lead{min-width:0; display:grid; gap:clamp(20px,4vw,28px)}
.trimestre__head h2{
  font-family:var(--display); font-weight:700;
  font-size:var(--h-seccion); line-height:1; letter-spacing:-.03em;
  color:var(--tinta-b-100); text-wrap:balance;
}
/* el énfasis va en Verde Liberfy y NO en itálica: no hay woff2 itálico y
   fonts.css pide expresamente no dejar que el navegador se la invente. */
.trimestre__head h2 em{font-style:normal; color:var(--verde)}
.trimestre__aside{min-width:0; display:grid; gap:clamp(14px,3vw,20px); align-content:end}
.trimestre__aside p{
  margin:0; font-size:clamp(16px,4.2vw,19px); line-height:1.6;
  color:var(--tinta-b-70); text-wrap:pretty;
}

/* la alianza con Candosa */
.trimestre__ally{
  justify-self:start; display:flex; align-items:center;
  gap:clamp(14px,3vw,22px); padding:16px clamp(16px,3vw,24px);
  border:1px solid var(--hairline-dark); border-radius:var(--r-tarjeta);
  background:rgba(255,255,255,.04);
}
.trimestre__ally img{
  flex:0 0 auto; height:34px; width:auto;
  padding-right:clamp(14px,3vw,22px); border-right:1px solid var(--hairline-dark);
}
.trimestre__ally span{
  min-width:0; max-width:46ch; font-size:clamp(14.5px,3.6vw,16px);
  line-height:1.55; color:var(--tinta-b-70); text-wrap:pretty;
}
.trimestre__ally b{color:var(--tinta-b-100); font-weight:700}
/* a 390px el logo (202px de ancho) y el texto no caben en fila: el texto salía
   a dos palabras por línea. Por debajo de 560px la caja se apila y la raya
   divisoria pasa de vertical a horizontal. */
@media (max-width:559px){
  .trimestre__ally{flex-direction:column; align-items:flex-start; gap:14px}
  .trimestre__ally img{
    height:28px; padding-right:0; padding-bottom:14px;
    border-right:0; border-bottom:1px solid var(--hairline-dark);
  }
}

/* escenario claro con la maqueta */
.trimestre__stage{
  position:relative; margin-top:clamp(32px,7vw,44px);
  padding:clamp(18px,4vw,24px) clamp(16px,4vw,40px) 0;
  background:linear-gradient(180deg,var(--blanco) 0%,var(--nieve) 100%);
  border-top:1px solid var(--hairline-dark);
}
.trimestre__glow{
  position:absolute; left:12%; right:12%; top:22%; bottom:6%;
  filter:blur(30px); pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(60,193,160,.26),rgba(60,193,160,0) 66%);
  transition:opacity .9s var(--ease) .15s;
}
.trimestre__stage img{
  position:relative; display:block; width:100%; height:auto; max-width:1200px; margin-inline:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
}
/* el parallax lo escribe script.js en estas tres variables */
.trimestre__float{
  position:relative; will-change:transform;
  transform:translate3d(0,var(--shift,0px),0) scale(var(--scale,1));
  opacity:var(--fade,1); transition:opacity .7s ease;
}
.trimestre__stage[data-reveal="pending"] .trimestre__float{--shift:56px; --scale:.955; --fade:0}
.trimestre__stage[data-reveal="pending"] .trimestre__glow{opacity:0}
.trimestre__stage[data-reveal="in"] .trimestre__float{
  transition:transform 1.1s var(--ease), opacity .8s ease;
}

/* en móvil la maqueta ya es pequeña: no se le puede quitar además el 9% de
   cada lado con el degradado de la máscara ni 16px de padding. Va a sangre y
   sin máscara (los bordes del PNG ya son transparentes, no se corta nada). */
@media (max-width:639px){
  .trimestre__stage{padding-inline:0}
  .trimestre__stage img{-webkit-mask-image:none; mask-image:none}
}

/* los cuatro rasgos */
.trimestre__grid{
  position:relative; background:#040A08;
  display:grid; grid-template-columns:1fr;
}
.trimestre__feat{
  min-width:0; padding:clamp(28px,6vw,38px) var(--marco) clamp(30px,6vw,42px);
  border-top:1px solid var(--hairline-dark);
  display:grid; gap:12px; align-content:start;
  transition:background .2s var(--ease);
}
.trimestre__feat b{
  font-family:var(--ui); font-weight:700; font-size:11.5px;
  letter-spacing:.1em; color:var(--verde); font-variant-numeric:tabular-nums;
}
.trimestre__feat h3{
  font-family:var(--ui); font-size:clamp(17px,4.4vw,19px); font-weight:700;
  line-height:1.25; letter-spacing:-.01em; color:var(--tinta-b-100);
}
.trimestre__feat p{
  margin:0; font-size:clamp(14.5px,3.8vw,15px); line-height:1.55;
  color:var(--tinta-b-70); text-wrap:pretty; max-width:none;
}

@media (min-width:640px){
  .trimestre__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trimestre__feat{padding-inline:clamp(24px,4vw,34px)}
  .trimestre__feat:nth-child(odd){border-right:1px solid var(--hairline-dark)}
}
@media (min-width:1080px){
  .trimestre__head{
    grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
    gap:clamp(40px,6vw,80px); align-items:end;
  }
  .trimestre__aside{padding-bottom:12px}
  .trimestre__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .trimestre__feat{border-right:1px solid var(--hairline-dark)}
  .trimestre__feat:last-child{border-right:none}
  .trimestre__feat:hover{background:#0B1B14}
}

/* con el movimiento reducido la maqueta entra ya colocada y el halo encendido */
@media (prefers-reduced-motion:reduce){
  .trimestre__float,
  .trimestre__stage[data-reveal="pending"] .trimestre__float{
    --shift:0px; --scale:1; --fade:1; transition:none;
  }
  .trimestre__stage[data-reveal="pending"] .trimestre__glow{opacity:1}
}

/* --- 8 · LA CUENTA ---
   Un solo sistema de icono (disco + signo) y dos colores: rojo lo que pierdes,
   verde lo que ganas. Nada más, para que el contraste se lea de un vistazo. */
.cuenta-grid{display:grid; gap:clamp(28px,6vw,40px); margin-top:clamp(32px,7vw,48px)}
@media (max-width:899px){#cuenta .cuenta-grid > .hueco{aspect-ratio:4/3}}
@media (min-width:900px){
  .cuenta-grid{grid-template-columns:.85fr 1.15fr; gap:48px; align-items:stretch}
  /* manda la altura del panel, no la de la foto: si no, el texto queda flotando
     con 200px de hueco muerto dentro de la tarjeta */
  #cuenta .cuenta-grid > .hueco{aspect-ratio:auto; height:100%; min-height:380px}
}

.bloque{
  background:var(--blanco); border-radius:var(--r-panel);
  padding:clamp(26px,6vw,38px); display:flex; flex-direction:column;
}
.bloque--bien{background:var(--verde-agua); margin-top:clamp(16px,4vw,20px)}
.bloque-tit{
  font-family:var(--ui); font-weight:700; font-size:13px; text-transform:uppercase;
  letter-spacing:.09em; margin-bottom:clamp(20px,4vw,26px);
}
.bloque--mal .bloque-tit{color:var(--naranja)}
.bloque--bien .bloque-tit{color:#0E7A62}

/* align-content:start — si no, al estirarse el panel a la altura de la foto
   las filas se separan y quedan huecos enormes entre puntos */
.bloque .items{list-style:none; margin:0; padding:0; display:grid; gap:0; flex:1; align-content:start}
.bloque .items li{
  display:flex; gap:16px; align-items:flex-start; max-width:none;
  padding:16px 0; border-top:1px solid var(--hairline-light);
}
.bloque .items li:first-child{border-top:0; padding-top:0}
.bloque--bien .items li{border-top-color:rgba(6,14,12,.10)}
.bloque .ico{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%; margin-top:1px;
  display:grid; place-items:center; font-size:13px; font-weight:700; font-family:var(--ui);
}
.bloque--mal .ico{background:rgba(240,57,6,.12); color:var(--naranja)}
.bloque--bien .ico{background:rgba(14,122,98,.14); color:#0E7A62}
.bloque .items b{
  display:block; font-family:var(--ui); font-weight:700; font-size:17px;
  letter-spacing:-.015em; color:var(--tinta-n-100); margin-bottom:4px;
}
.bloque .items li > div{font-size:15.5px; color:var(--tinta-n-70)}
.bloque .remate{
  margin:clamp(22px,5vw,28px) 0 0; padding-top:20px; border-top:1px solid var(--hairline-light);
  font-family:var(--ui); font-weight:700; font-size:clamp(18px,4.6vw,23px);
  letter-spacing:-.02em; line-height:1.25; max-width:none;
}
.bloque--mal .remate b{font-weight:700; color:var(--naranja)}
.bloque--bien .remate{border-top-color:rgba(6,14,12,.10)}
.bloque--bien .remate b{font-weight:700; color:#0E7A62}
@media (min-width:820px){
  .bloque--bien .items{grid-template-columns:1fr 1fr; gap:0 40px}
  /* en dos columnas el primero de CADA columna abre sin filete */
  .bloque--bien .items li:nth-child(2){border-top:0; padding-top:0}
}

/* --- 9 · DECIDIR (bento oscuro) --- */
.casos{display:grid; gap:14px; margin-top:clamp(32px,7vw,52px)}
.caso{
  background:var(--carbon); border:1px solid var(--hairline-dark); border-radius:var(--r-tarjeta);
  padding:clamp(22px,5vw,30px); max-width:none;
}
.caso .preg{
  font-family:var(--ui); font-weight:700; font-size:clamp(18px,4.6vw,23px); line-height:1.22;
  letter-spacing:-.02em; color:#fff; margin-bottom:14px;
}
.caso p{font-size:16px}
@media (min-width:820px){.casos{grid-template-columns:repeat(2,1fr)}}

/* --- 10 · CALENDARIO --- */
#calendario{position:relative; overflow:hidden}
#calendario .banda-naranja{
  position:absolute; top:0; bottom:0; right:0; width:13%; max-width:110px; background:var(--naranja);
  display:flex; align-items:center; justify-content:center; z-index:1;
}
#calendario .banda-naranja span{
  writing-mode:vertical-rl; font-family:var(--ui); font-weight:700; font-size:13px;
  letter-spacing:.2em; text-transform:uppercase; color:#fff;
}
#calendario .wrap{padding-right:15%}
.hitos{list-style:none; margin:clamp(32px,7vw,48px) 0 0; padding:0; display:grid; gap:12px}
.hito{
  background:var(--carbon); border:1px solid var(--hairline-dark); border-radius:var(--r-tarjeta);
  padding:clamp(20px,5vw,28px); max-width:none; display:grid; gap:6px;
}
.hito.proximo{border-color:rgba(240,57,6,.5); background:rgba(240,57,6,.07)}
.hito .fecha{font-family:var(--display); font-weight:700; font-size:clamp(26px,6.6vw,40px);
  letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums}
.hito.proximo .fecha{color:var(--naranja)}
.hito .que{font-size:16.5px; color:var(--tinta-b-70)}
.hito .quien{font-size:13.5px; color:var(--tinta-b-45)}
.cuenta-atras{
  font-family:var(--ui); font-weight:700; font-size:14px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--naranja); font-variant-numeric:tabular-nums; margin-top:6px;
}
@media (min-width:900px){.hitos{grid-template-columns:repeat(3,1fr)}}

/* --- 11 · PLANES --- */
.planes{display:grid; gap:18px; margin-top:clamp(36px,8vw,56px)}
.plan{
  background:var(--blanco); border:1px solid var(--hairline-light); border-radius:var(--r-panel);
  padding:clamp(26px,6vw,36px); max-width:none; display:flex; flex-direction:column;
}
.plan--destacado{
  background:var(--negro); color:#fff; border-color:var(--negro); position:relative;
}
.plan--destacado p,.plan--destacado li{color:var(--tinta-b-70)}
.plan--destacado .nb{color:var(--verde)}
.plan--destacado li{border-top-color:var(--hairline-dark)}
.plan .cinta{
  position:absolute; top:22px; right:22px; background:var(--verde); color:var(--negro);
  font-family:var(--ui); font-weight:700; font-size:12.5px; padding:6px 12px; border-radius:999px;
}
.plan .nb{font-family:var(--ui); font-weight:700; font-size:13px; text-transform:uppercase;
  letter-spacing:.09em; color:var(--verde); margin-bottom:14px}
.plan h3{margin-bottom:14px}
.plan .para{color:var(--tinta-n-70); margin-bottom:22px; font-size:16.5px}
.plan .sub{font-family:var(--ui); font-weight:700; font-size:12.5px; text-transform:uppercase;
  letter-spacing:.09em; color:var(--tinta-n-45); margin:22px 0 10px}
.plan--destacado .sub{color:var(--tinta-b-45)}
.plan ul{list-style:none; margin:0; padding:0}
.plan ul li{font-size:16px; padding:11px 0 11px 26px; border-top:1px solid var(--hairline-light);
  color:var(--tinta-n-70); max-width:none; position:relative}
.plan ul li::before{
  content:''; position:absolute; left:0; top:19px; width:10px; height:10px;
  border-radius:999px 999px 0 0; background:var(--verde);
}
.plan .precio{font-family:var(--display); font-weight:700; font-size:clamp(32px,8vw,44px);
  letter-spacing:-.02em; margin-top:26px; line-height:1}
.plan .precio .sim{font-size:.5em; font-weight:400}
.plan .cond{font-size:14px; color:var(--tinta-n-45); margin-top:10px}
.plan--destacado .cond{color:var(--tinta-b-45)}
.plan .btn{margin-top:22px}
.plan .precio--consulta{font-size:clamp(27px,6vw,36px)}
/* La tarjeta destacada es negra: sus textos SIEMPRE en tinta clara
   (.plan .para y .plan ul li ganaban por especificidad y quedaban oscuros sobre negro) */
.plan.plan--destacado .para,
.plan.plan--destacado ul li{color:var(--tinta-b-70)}
.plan.plan--destacado h3,
.plan.plan--destacado .precio{color:#fff}
@media (min-width:1000px){
  .planes{grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch}
  .plan--destacado{transform:scale(1.03); z-index:2}
}

/* --- 11b · DE ESTO NOS ENCARGAMOS NOSOTROS --- */
.encargos{display:grid; gap:14px; margin-top:clamp(32px,7vw,52px); position:relative; z-index:2}
.encargo{
  background:var(--carbon); border:1px solid var(--hairline-dark); border-radius:var(--r-tarjeta);
  padding:clamp(20px,5vw,26px) clamp(20px,5vw,26px) clamp(20px,5vw,26px) 60px;
  position:relative; max-width:none; font-size:15.5px; color:var(--tinta-b-70);
}
.encargo::before{
  content:'✓'; position:absolute; left:20px; top:clamp(20px,5vw,24px);
  width:26px; height:26px; border-radius:50%; background:rgba(60,193,160,.16); color:var(--verde);
  display:grid; place-items:center; font-family:var(--ui); font-weight:700; font-size:14px;
}
.encargo b{
  display:block; font-family:var(--ui); font-weight:700; font-size:17.5px;
  letter-spacing:-.015em; color:#fff; margin-bottom:6px;
}
@media (min-width:820px){.encargos{grid-template-columns:repeat(2,1fr)}}
/* --- 7b · REJILLA DE SERVICIOS (patrón ClickUp "All apps") ---
   Fondo tramado bajo el subtítulo de #encargos. Todo lo de dentro
   (líneas, iconos, texto) va SUAVE a propósito: es fondo, no mensaje.
   Lo único que se ve con fuerza son los conectores de luz verdes. */
.rejilla{
  position:relative; z-index:2;
  margin-top:clamp(28px,6.5vw,44px);
  /* a sangre: se sale del wrap Y del padding de la seccion */
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  width:100vw; max-width:100vw;
  /* desvanecido: a 100vw los laterales tienen que morir mucho antes del borde */
  -webkit-mask-image:radial-gradient(58% 128% at 50% 50%,#000 16%,rgba(0,0,0,.72) 44%,rgba(0,0,0,.2) 74%,transparent 100%);
          mask-image:radial-gradient(58% 128% at 50% 50%,#000 16%,rgba(0,0,0,.72) 44%,rgba(0,0,0,.2) 74%,transparent 100%);
}
.rejilla-celdas{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:rgba(255,255,255,.085);
}
.celda{
  background:var(--negro);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:9px; text-align:center;
  padding:clamp(18px,3.4vw,26px) 8px; min-height:clamp(128px,14vw,196px);
}
.celda--vacia{gap:0}          /* solo dibuja rejilla: da el aire de los bordes */
.celda svg{
  width:26px; height:26px; flex:none;
  fill:none; stroke:rgba(255,255,255,.34); stroke-width:1.35;
  stroke-linecap:round; stroke-linejoin:round;
}
.celda span{
  font-size:14px; line-height:1.28; color:rgba(255,255,255,.42);
  max-width:15ch;
}
/* Columnas y celdas visibles emparejadas para que NUNCA quede una fila a
   medias. Siempre 5 filas: 45=9x5 · 35=7x5 · 25=5x5 · 15=3x5.
   El orden del HTML manda: las 15 primeras son las mas fuertes, que son
   las unicas que sobreviven en movil. */
@media (max-width:619px){.celda:nth-child(n+16){display:none}}
@media (min-width:620px){
  .rejilla-celdas{grid-template-columns:repeat(5,1fr)}
  .celda:nth-child(n+16){display:flex}
  .celda:nth-child(n+26){display:none}
}
@media (min-width:900px){
  .rejilla-celdas{grid-template-columns:repeat(7,1fr)}
  .celda:nth-child(n+26){display:flex}
  .celda:nth-child(n+36){display:none}
}
@media (min-width:1240px){
  .rejilla-celdas{grid-template-columns:repeat(9,1fr)}
  .celda:nth-child(n+36){display:flex}
  .celda span{font-size:14.5px}
  .celda svg{width:28px; height:28px}
}

/* --- la figura de los dos gestores, encima de la rejilla ---
   Va entre las celdas y los conectores: la luz pasa por delante de
   ella, que es lo que ata las dos capas. Sin frames no se ve nada. */
.rejilla-figura{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:min(72%,860px); height:71%;
  pointer-events:none; z-index:3;
  opacity:0; transition:opacity .7s var(--ease);
}
.rejilla-figura.listo{opacity:1}
.rejilla-figura canvas{
  display:block; width:100%; height:100%;
  /* se funden con la rejilla por abajo en vez de quedar cortados en seco */
  -webkit-mask-image:linear-gradient(180deg,#000 84%,rgba(0,0,0,.6) 94%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 84%,rgba(0,0,0,.6) 94%,transparent 100%);
}
/* las celdas que quedan detrás de la figura se apagan un poco más,
   para que no compitan con las caras */
.rejilla-figura::before{
  content:''; position:absolute; left:-14%; right:-14%; bottom:0; top:6%;
  background:radial-gradient(60% 62% at 50% 72%,var(--negro) 38%,rgba(6,14,12,.78) 62%,transparent 100%);
  z-index:-1;
}
@media (max-width:719px){.rejilla-figura{width:min(96%,470px); height:74%}}

/* --- conectores de luz: lo único brillante de la rejilla --- */
.rejilla-luz{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.rejilla-luz i{position:absolute; display:block; opacity:0; will-change:transform,opacity; transform-origin:50% 50%}
.pulso--h{
  height:1px; width:190px; margin-top:-.5px;
  background:linear-gradient(90deg,transparent,rgba(60,193,160,.35) 28%,var(--verde) 50%,rgba(60,193,160,.35) 72%,transparent);
  box-shadow:0 0 8px 1px rgba(60,193,160,.75), 0 0 24px 5px rgba(60,193,160,.28);
}
.pulso--v{
  width:1px; height:150px; margin-left:-.5px;
  background:linear-gradient(180deg,transparent,rgba(60,193,160,.35) 28%,var(--verde) 50%,rgba(60,193,160,.35) 72%,transparent);
  box-shadow:0 0 8px 1px rgba(60,193,160,.75), 0 0 24px 5px rgba(60,193,160,.28);
}
.destello{
  width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%;
  background:var(--verde); box-shadow:0 0 10px 2px rgba(60,193,160,.7), 0 0 22px 6px rgba(60,193,160,.25);
}
@media (prefers-reduced-motion:reduce){.rejilla-luz{display:none}}


/* --- 12 · COMPARATIVA --- */
.tabla{margin-top:clamp(32px,7vw,52px); border-radius:var(--r-panel); overflow:hidden;
  border:1px solid var(--hairline-light)}
.fila{display:grid; grid-template-columns:1fr; border-top:1px solid var(--hairline-light); padding:20px clamp(18px,4vw,26px)}
.fila:first-child{border-top:0}
.fila .q{font-family:var(--ui); font-weight:700; font-size:15px; margin-bottom:14px; color:var(--tinta-n-100)}
.fila .c{padding:7px 0; font-size:16px; color:var(--tinta-n-70); display:flex; gap:12px; max-width:none}
.fila .c .et{font-family:var(--ui); font-weight:700; font-size:12.5px; color:var(--tinta-n-45); flex:0 0 90px; padding-top:2px}
/* Liberfy protagonista: su celda va sobre panel verde también en móvil */
.fila .c--nos{
  color:var(--tinta-n-100); font-weight:500;
  background:var(--verde-agua); border-radius:10px; padding:12px 14px; margin-top:6px;
}
.fila .c--nos .et{color:var(--verde)}
.cab-tabla{display:none}
@media (min-width:900px){
  .tabla{border:1px solid var(--hairline-light)}
  .cab-tabla{display:grid; grid-template-columns:1fr .9fr 1.25fr; gap:24px;
    padding:22px clamp(18px,4vw,26px); background:var(--nieve)}
  .cab-tabla span{font-family:var(--ui); font-weight:700; font-size:14px}
  .cab-tabla .nos{
    color:var(--verde); font-size:21px; letter-spacing:-.02em; line-height:1;
    align-self:center;
  }
  .fila{grid-template-columns:1fr .9fr 1.25fr; gap:24px; align-items:stretch; min-height:84px; padding:24px clamp(18px,4vw,26px)}
  .fila .q{margin-bottom:0; align-self:center}
  .fila .c{align-self:center}
  .fila .c .et{display:none}
  .fila .c--nos{
    background:rgba(60,193,160,.10); border-left:3px solid var(--verde); border-radius:0;
    margin:-24px -14px; padding:24px 18px; font-size:16.5px; align-self:stretch; display:flex; align-items:center;
  }
}

/* --- 13 y 18 · ACORDEÓN --- */
.acordeon{margin-top:clamp(32px,7vw,52px); border-radius:var(--r-panel); overflow:hidden;
  border:1px solid var(--hairline-light)}
.oscura .acordeon{border-color:var(--hairline-dark)}
.acordeon > div{border-top:1px solid var(--hairline-light)}
.oscura .acordeon > div{border-top-color:var(--hairline-dark)}
.acordeon > div:first-child{border-top:0}
.acordeon button{
  width:100%; background:none; border:0; cursor:pointer; text-align:left; color:inherit;
  display:flex; gap:16px; align-items:flex-start; padding:22px clamp(18px,4vw,26px);
  font-family:var(--ui); font-weight:700; font-size:clamp(16.5px,4.2vw,20px);
  line-height:1.3; letter-spacing:-.015em;
}
.acordeon .chev{margin-left:auto; flex:0 0 auto; width:13px; height:13px; align-self:center;
  border-right:2px solid var(--verde); border-bottom:2px solid var(--verde);
  transform:rotate(45deg) translate(-3px,-3px); transition:transform .3s var(--ease)}
.acordeon [aria-expanded="true"] .chev{transform:rotate(225deg) translate(-3px,-3px)}
.acordeon .cuerpo{overflow:hidden; height:0; transition:height .35s var(--ease)}
.acordeon .cuerpo > div{padding:0 clamp(18px,4vw,26px) 24px}
.acordeon .cuerpo p{max-width:60ch; font-size:16.5px}
.queja-r{display:block}
.estrellas-min{display:flex; gap:2px; margin-bottom:8px}
.estrellas-min svg{width:14px; height:14px; fill:#FFC53D}
.estrellas-min svg.off{fill:rgba(255,255,255,.2)}

/* --- 14 · DOBLE FILTRO --- */
.filtros{display:grid; gap:16px; margin-top:clamp(32px,7vw,52px)}
.filtro-col{border-radius:var(--r-panel); padding:clamp(26px,6vw,38px)}
.filtro-col--no{background:var(--carbon); border:1px solid var(--hairline-dark)}
.filtro-col--si{background:var(--verde); color:var(--negro)}
.filtro-col--si p,.filtro-col--si li{color:rgba(6,14,12,.75)}
.filtro-col h3{margin-bottom:22px; display:flex; align-items:center; gap:12px}
.filtro-col--no h3{color:#fff}
.filtro-col .sig{
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  font-family:var(--ui); font-weight:700; font-size:17px;
}
.filtro-col--no .sig{background:rgba(240,57,6,.18); color:var(--naranja)}
.filtro-col--si .sig{background:rgba(6,14,12,.14); color:var(--negro)}
.filtro-col ul{list-style:none; margin:0; padding:0}
.filtro-col li{padding:18px 0; max-width:none; font-size:16px}
.filtro-col--no li{border-top:1px solid var(--hairline-dark)}
.filtro-col--si li{border-top:1px solid rgba(6,14,12,.16)}
.filtro-col li b{font-family:var(--ui); font-weight:700; display:block; margin-bottom:6px; font-size:17.5px}
.filtro-col--no li b{color:#fff}
.filtro-col--si li b{color:var(--negro)}
@media (min-width:900px){.filtros{grid-template-columns:1fr 1fr; gap:20px}}

/* --- 15 · TESTIMONIOS (tarjetas de color, patrón Bizneo) --- */
.carro{
  /* proximity, NUNCA mandatory: con mandatory el anclaje pelea con las flechas
     y devuelve el carro al punto anterior. */
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x proximity;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  margin:clamp(28px,6vw,44px) calc(-1 * var(--marco)) 0; padding:0 var(--marco) 4px;
}
.carro::-webkit-scrollbar{display:none}
.carro > *{flex:0 0 min(80vw,370px); scroll-snap-align:start}
/* En móvil el carro sale a sangre (se coge con el dedo desde el borde).
   En escritorio se alinea con el cuerpo de la página: nada sobresale. */
@media (min-width:1000px){
  .carro{margin-inline:0; padding-inline:0}
}
.progreso{height:2px; background:var(--hairline-light); margin-top:24px; position:relative; border-radius:2px; overflow:hidden}
.oscura .progreso{background:var(--hairline-dark)}
.progreso i{position:absolute; inset:0 auto 0 0; background:var(--verde); width:20%; transition:width .12s linear}
.flechas{display:flex; gap:10px; margin-top:22px}
.flechas button{
  width:46px; height:46px; border-radius:50%; border:1px solid var(--hairline-light);
  background:transparent; cursor:pointer; display:grid; place-items:center; font-size:18px;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.oscura .flechas button{border-color:var(--hairline-dark); color:#fff}
@media (hover:hover){.flechas button:hover{background:var(--verde); border-color:var(--verde); color:var(--negro)}}

.testi{
  background:var(--verde-agua); border-radius:var(--r-panel); padding:clamp(24px,5vw,32px);
  display:flex; flex-direction:column; gap:20px; min-height:300px;
}
.testi .comilla{font-family:var(--display); font-weight:700; font-size:42px; line-height:.7; color:var(--verde); opacity:.5}
.testi p{font-size:17px; color:var(--tinta-n-70); flex:1; max-width:none}
.testi .quien{display:flex; align-items:center; gap:14px}
.testi .quien .av{width:48px; height:48px; border-radius:50%; background:#D4D8D6; flex:0 0 auto}
.testi .quien .nb{font-family:var(--ui); font-weight:700; font-size:16px}
.testi .quien .rl{font-size:13.5px; color:var(--tinta-n-45)}
/* Tarjeta con forma de reseña de Google */
.testi--google{
  background:var(--blanco); border:1px solid var(--hairline-light); gap:14px; min-height:280px;
  box-shadow:0 10px 30px rgba(6,14,12,.06);
}
.testi--google .quien{width:100%}
.testi--google .g-logo{width:22px; height:22px; margin-left:auto; flex:0 0 auto}
.testi--google .estrellas-svg{display:flex; gap:3px}
.testi--google .estrellas-svg svg{width:17px; height:17px; fill:#FFC53D}
.testi--google p{font-size:16.5px}
/* Controles del carrusel de reseñas */
.controles-carro{display:flex; align-items:center; gap:20px; margin-top:24px}
.controles-carro .progreso{flex:1; margin-top:0}
.controles-carro .flechas{margin-top:0}
.video-card{position:relative; border-radius:var(--r-panel); overflow:hidden}
.video-card .retrato{display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:center top}
/* velo bajo el pie para que el nombre se lea sobre cualquier foto */
.video-card::after{
  content:''; position:absolute; inset:auto 0 0 0; height:min(46%,190px); pointer-events:none;
  background:linear-gradient(180deg, rgba(6,14,12,0) 0%, rgba(6,14,12,.30) 45%, rgba(6,14,12,.82) 100%);
}
.video-card .pie-v,.video-card .play{z-index:2}
.video-card .play{
  position:absolute; inset:0; margin:auto; width:62px; height:62px; border-radius:50%;
  background:rgba(255,255,255,.92); display:grid; place-items:center; font-size:19px; color:var(--negro);
  border:0; padding:0; cursor:pointer; font-family:inherit;
  transition:transform .2s var(--ease), background .2s var(--ease);
}
@media (hover:hover){.video-card .play:hover{transform:scale(1.06); background:#fff}}

/* --- Testimonios en vídeo (grabados por los propios clientes, en horizontal) --- */
.carro--video > *{flex:0 0 min(88vw,520px)}
.video-card--real{background:var(--negro); cursor:pointer}
.video-real{display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--negro)}
/* al darle al play, el vídeo manda: fuera velo, botón y pie */
.video-card--real.reproduciendo .play,
.video-card--real.reproduciendo .pie-v,
.video-card--real.reproduciendo::after{opacity:0; pointer-events:none}
.video-card--real .play,.video-card--real .pie-v,.video-card--real::after{transition:opacity .25s var(--ease)}
.video-card .pie-v{position:absolute; left:16px; right:16px; bottom:16px; color:#fff}
.video-card .pie-v .nb{font-family:var(--ui); font-weight:700; font-size:17px}
.video-card .pie-v .rl{font-size:13px; opacity:.85}

/* --- 16 · EQUIPO --- */
.caras{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:clamp(30px,6vw,44px)}
@media (min-width:720px){.caras{grid-template-columns:repeat(4,1fr)}}
.cara .hueco{border-radius:var(--r-tarjeta)}
.cara .nb{font-family:var(--ui); font-weight:700; font-size:16px; margin-top:12px; color:#fff}
.cara .rl{font-size:13.5px; color:var(--tinta-b-45); margin-top:2px}

/* Marquesina de logos */
.marquesina{overflow:hidden; margin-top:clamp(30px,6vw,44px); position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquesina div{display:flex; gap:44px; width:max-content; animation:desfile 32s linear infinite}
.marquesina span{
  font-family:var(--ui); font-weight:700; font-size:19px; color:var(--tinta-b-45);
  white-space:nowrap; opacity:.75;
}
@keyframes desfile{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* --- 17 · PASOS --- */
.pasos{list-style:none; margin:clamp(32px,7vw,52px) 0 0; padding:0; display:grid; gap:0; position:relative}
.pasos::before{
  content:''; position:absolute; left:17px; top:16px; bottom:40px; width:2px;
  background:var(--hairline-light); transform:scaleY(0); transform-origin:top;
  transition:transform 1.1s var(--ease);
}
.pasos.vis::before{transform:scaleY(1)}
.paso{position:relative; padding:0 0 30px 54px; max-width:none}
.paso .n{
  position:absolute; left:0; top:0; width:36px; height:36px; border-radius:50%;
  background:var(--verde); color:var(--negro); display:grid; place-items:center; z-index:2;
  font-family:var(--ui); font-weight:700; font-size:15px;
}
.paso h3{font-size:clamp(18px,4.6vw,23px); margin-bottom:8px}
.paso p{font-size:16px; color:var(--tinta-n-70)}
.reductores{list-style:none; margin:clamp(20px,5vw,30px) 0 0; padding:0; display:grid; gap:10px}
.reductores li{
  background:var(--nieve); border-radius:var(--r-btn); padding:16px 18px 16px 44px; font-size:16px;
  color:var(--tinta-n-70); max-width:none; position:relative;
}
.reductores li::before{
  content:''; position:absolute; left:18px; top:22px; width:12px; height:12px;
  border-radius:999px 999px 0 0; background:var(--verde);
}
@media (min-width:900px){
  .pasos{grid-template-columns:repeat(5,1fr); gap:24px}
  .pasos::before{left:0; right:0; top:17px; bottom:auto; height:2px; width:auto;
    transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease)}
  .pasos.vis::before{transform:scaleX(1)}
  .paso{padding:54px 0 0}
  .reductores{grid-template-columns:repeat(2,1fr)}
}

/* --- 17 · CIERRE (centrado, sin formulario) --- */
#cierre{background:var(--negro); color:var(--tinta-b-100); position:relative; overflow:hidden}
#cierre .cab-sec{margin-inline:auto; text-align:center; max-width:760px}
#cierre .cab-sec h2{margin-inline:auto}
.cierre-cta{text-align:center; margin-top:clamp(28px,6vw,40px)}
.cierre-cta .lead{margin-inline:auto; max-width:56ch; color:var(--tinta-b-70)}
.cierre-cta .claim-cta{margin-inline:auto; text-align:center}
.btn--grande{min-height:70px; padding:8px 38px 8px 8px; font-size:19px; gap:16px}
.btn--grande .flecha{width:54px; height:54px}
.btn--grande .flecha svg{width:22px; height:22px}
.garantias{
  list-style:none; margin:clamp(26px,6vw,34px) 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px 28px;
}
.garantias li{
  padding-left:24px; position:relative; font-size:15.5px; color:var(--tinta-b-45); max-width:none;
}
.garantias li::before{
  content:''; position:absolute; left:0; top:7px; width:11px; height:11px;
  border-radius:999px 999px 0 0; background:var(--verde);
}
.firma{font-family:var(--ui); font-weight:700; font-size:clamp(21px,5.4vw,32px);
  letter-spacing:-.015em; color:#fff; margin-top:clamp(40px,9vw,64px); text-align:center}

/* --- PIE --- */
.pie{
  background:var(--negro); color:var(--tinta-b-45);
  padding:clamp(48px,9vw,72px) var(--marco) calc(var(--barra) + 20px);
  border-top:1px solid var(--hairline-dark); font-size:14px;
}
.pie-wrap{
  max-width:var(--ancho); margin-inline:auto;
  display:grid; gap:clamp(34px,7vw,56px);
  padding-bottom:clamp(34px,7vw,48px); border-bottom:1px solid var(--hairline-dark);
}
.pie-marca .logo{
  margin:0 0 18px; line-height:0;
}
.pie-marca .logo img{width:auto; height:34px}
.pie-marca .frase{font-size:15px; color:var(--tinta-b-70); max-width:42ch; margin:0}
.pie-cols{display:grid; grid-template-columns:repeat(2,1fr); gap:32px 24px}
.pie-cols .tit-col{
  font-family:var(--ui); font-weight:700; font-size:12.5px; text-transform:uppercase;
  letter-spacing:.09em; color:#fff; margin:0 0 14px;
}
.pie-cols a{
  display:block; color:var(--tinta-b-45); text-decoration:none; padding:6px 0; font-size:14.5px;
  transition:color .2s var(--ease);
}
@media (hover:hover){.pie-cols a:hover{color:var(--verde)}}
.pie-legal{
  max-width:var(--ancho); margin:clamp(26px,5vw,34px) auto 0;
  font-size:13px; line-height:1.7; color:rgba(255,255,255,.38);
}
.pie-legal p{margin:0 0 6px; max-width:none}
.pie-legal b{color:var(--tinta-b-70); font-weight:500}
@media (min-width:820px){
  .pie-wrap{grid-template-columns:1.1fr 1.4fr; gap:64px}
  .pie-cols{grid-template-columns:repeat(3,1fr)}
}
/* el pie ya no puede olvidarse de la barra en escritorio: ahora también está
   ahí, y --barra lo mide script.js con su alto real */

/* --- BANNER DE COOKIES --- */
.cookies{
  position:fixed; z-index:70; left:50%; bottom:calc(var(--barra) + 12px); transform:translateX(-50%) translateY(20px);
  width:min(520px, calc(100vw - 24px)); background:#fff; color:var(--negro);
  border-radius:24px; padding:22px; opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
  box-shadow:0 24px 60px rgba(6,14,12,.28);
}
.cookies.on{opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto}
.cookies .tit{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.cookies .tit b{font-family:var(--ui); font-weight:700; font-size:19px; letter-spacing:-.02em}
.cookies .emo{font-size:26px; line-height:1}
.cookies p{font-size:14.5px; color:var(--tinta-n-70); margin-bottom:16px; max-width:none}
.cookies .acciones{display:flex; gap:10px; align-items:center}
.cookies .cbtn{
  flex:1; min-height:48px; cursor:pointer; border-radius:var(--r-btn); padding:12px 14px;
  font-family:var(--ui); font-weight:700; font-size:15px;
  background:#fff; color:var(--negro); border:1px solid var(--hairline-light);
}
.cookies .cbtn:active{background:var(--nieve)}
.cookies .cchev{flex:0 0 48px; min-height:48px; border-radius:var(--r-btn); border:1px solid var(--hairline-light);
  background:#fff; cursor:pointer; font-size:15px}
@media (min-width:900px){.cookies{bottom:20px}}

/* --- ESCRITORIO: composición del hero --- */
@media (min-width:1000px){
  /* entre 1000 y 1240 la foto necesita más ancho: si no, se queda como una tira */
  #hero .wrap{display:grid; grid-template-columns:1fr .96fr; gap:clamp(34px,4vw,56px); align-items:stretch}
  /* la foto tiene la misma altura que el texto y baja a sangre hasta el borde */
  #hero .visual{margin-top:0; margin-bottom:calc(-1 * var(--hero-pb)); display:flex}
  #hero .visual .hueco{
    aspect-ratio:auto; height:100%;
    border-radius:var(--r-panel) var(--r-panel) 0 0;
  }
  /* La foto gana tamaño saliéndose de la retícula por la derecha (con tope),
     sin robarle ni un píxel de ancho al titular. Llena la caja entera: el
     recorte solo se come cielo y sofá, nunca las tarjetas. */
  #hero .visual{
    margin-right:calc(-1 * min(
      (100vw - min(100vw - 2 * var(--marco), var(--ancho))) / 2,
      140px));
  }
  #hero .visual .hero-foto{
    width:100%; height:100%;
    object-fit:cover; object-position:center 42%;
  }
}
@media (min-width:1240px){
  #hero .wrap{grid-template-columns:1.1fr .9fr; gap:56px}
}
/* a dos columnas el titular vive en media pantalla: la escala baja con la ventana
   para que «que adora los negocios» no se parta en dos */
@media (min-width:1000px){#hero h1{font-size:clamp(40px,4.1vw,54px)}}

/* ---------- PÁGINAS LEGALES (aviso-legal, privacidad, cookies, devoluciones) ----------
   Texto tomado literalmente de liberfy.es. Aquí solo se maqueta: no se reescribe
   ni se resume nada, que en un texto legal cambiar una palabra cambia el sentido. */
.legal-cab{padding-top:calc(128px + env(safe-area-inset-top))}
.legal-cab .label{color:var(--verde)}
.legal-cab h1{font-size:clamp(34px,8vw,64px); max-width:20ch}
.legal-cab .fecha{margin-top:22px; font-size:15px; color:var(--tinta-b-45)}
.legal-cuerpo{max-width:760px; margin-inline:auto}
.legal-cuerpo h2{
  font-family:var(--ui); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(19px,4.6vw,25px); line-height:1.2;
  margin:clamp(40px,8vw,60px) 0 16px; padding-top:clamp(28px,6vw,40px);
  border-top:1px solid var(--hairline-light);
}
.legal-cuerpo h2:first-child{margin-top:0; padding-top:0; border-top:0}
.legal-cuerpo h3{
  font-family:var(--ui); font-weight:700; font-size:clamp(17px,4vw,19px);
  margin:32px 0 10px;
}
.legal-cuerpo p{font-size:16.5px; line-height:1.72; color:var(--tinta-n-70); margin:0 0 16px; max-width:none}
.legal-cuerpo p b,.legal-cuerpo li b{color:var(--tinta-n-100)}
.legal-cuerpo a{color:var(--tinta-n-100); text-decoration:underline; text-underline-offset:3px; word-break:break-word}
.legal-cuerpo ul{margin:0 0 20px; padding-left:0; list-style:none}
.legal-cuerpo li{
  font-size:16.5px; line-height:1.72; color:var(--tinta-n-70);
  position:relative; padding:0 0 12px 22px; max-width:none;
}
.legal-cuerpo li::before{
  content:''; position:absolute; left:0; top:11px; width:8px; height:8px;
  border-radius:999px 999px 0 0; background:var(--verde);
}
/* la ficha del responsable: el único bloque destacado de la página */
.legal-ficha{
  background:var(--nieve); border:1px solid var(--hairline-light);
  border-radius:var(--r-tarjeta); padding:clamp(22px,5vw,30px); margin:0 0 8px;
}
.legal-ficha p{margin:0 0 6px; font-size:16px}
.legal-ficha p:last-child{margin-bottom:0}
/* tablas de cookies: en móvil hacen scroll dentro de su caja, nunca la página */
.legal-tabla{overflow-x:auto; margin:0 0 24px; border:1px solid var(--hairline-light); border-radius:var(--r-tarjeta)}
.legal-tabla table{border-collapse:collapse; width:100%; min-width:520px}
.legal-tabla th,.legal-tabla td{
  text-align:left; padding:14px 16px; font-size:15px; line-height:1.55;
  border-bottom:1px solid var(--hairline-light); vertical-align:top;
}
.legal-tabla tr:last-child td{border-bottom:0}
.legal-tabla th{font-family:var(--ui); font-weight:700; color:var(--tinta-n-100); background:var(--nieve)}
.legal-tabla td{color:var(--tinta-n-70)}
.legal-tabla td:first-child{font-family:var(--ui); font-weight:700; color:var(--tinta-n-100); white-space:nowrap}
.legal-volver{display:inline-block; margin-top:clamp(44px,9vw,64px); font-size:16px}


/* =============================================================
   PÁGINA DE GRACIAS · 31-08-2026
   La página que ve quien ya ha dejado sus datos: la mano del OK,
   los tres pasos de lo que va a pasar y la frase de marca.
   ============================================================= */
.gracias{padding-top:clamp(110px,18vw,150px); padding-bottom:clamp(60px,12vw,110px)}
.gracias-cab{text-align:center; max-width:920px; margin-inline:auto}
.gracias-cab h1{margin-inline:auto; max-width:20ch}
.gracias-cab .lead{margin:clamp(20px,4vw,26px) auto 0; max-width:58ch; color:var(--tinta-b-70)}
.gracias-cab .label{display:inline-block; margin-bottom:16px}

/* la mano del OK: sólida, con el hueco del aro calado y un halo que respira */
.ok-mano{
  position:relative; width:clamp(104px,24vw,146px); aspect-ratio:1;
  margin:0 auto clamp(22px,5vw,32px); display:grid; place-items:center;
}
.ok-svg{
  position:relative; z-index:1; width:100%; height:100%; color:var(--verde);
  animation:ok-entra .7s var(--ease) both;
  filter:drop-shadow(0 10px 26px rgba(60,193,160,.35));
}
/* el aro y el check se dibujan solos, uno detrás del otro */
.ok-aro{stroke-dasharray:158; stroke-dashoffset:158; animation:ok-traza .85s var(--ease) .15s forwards}
.ok-tick{stroke-dasharray:42; stroke-dashoffset:42; animation:ok-traza .45s var(--ease) .8s forwards}
@keyframes ok-traza{to{stroke-dashoffset:0}}
.ok-halo{
  position:absolute; inset:-8%; border-radius:50%;
  border:2px solid rgba(60,193,160,.55);
  animation:ok-halo 2.6s var(--ease) infinite;
}
@keyframes ok-entra{
  0%{opacity:0; transform:scale(.86)}
  70%{opacity:1; transform:scale(1.04)}
  100%{opacity:1; transform:scale(1)}
}
@keyframes ok-halo{
  0%{transform:scale(.86); opacity:.7}
  70%{transform:scale(1.18); opacity:0}
  100%{transform:scale(1.18); opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .ok-svg,.ok-aro,.ok-tick{animation:none; stroke-dashoffset:0}
  .ok-halo{animation:none; opacity:.4}
}

/* los tres pasos, en oscuro */
.pasos--gracias{margin-top:clamp(44px,9vw,72px)}
.oscura .pasos::before{background:var(--hairline-dark)}
.oscura .paso p{color:var(--tinta-b-70)}
.oscura .paso h3{color:#fff}
@media (min-width:900px){
  .pasos--gracias{grid-template-columns:repeat(3,1fr); gap:34px}
  .pasos--gracias .paso{padding:54px 0 0}
  .pasos--gracias::before{left:0; right:0; top:17px; bottom:auto; height:2px; width:auto;
    transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease)}
  .pasos--gracias.vis::before{transform:scaleX(1)}
}

/* la frase de marca, en su propio panel */
.gracias-claim{
  margin:clamp(44px,9vw,72px) auto 0; max-width:880px;
  padding:clamp(26px,5vw,40px) clamp(24px,5vw,44px);
  border-radius:var(--r-panel);
  background:linear-gradient(140deg,#0B1614 0%,#0E211C 48%,rgba(60,193,160,.26) 100%);
  border:1px solid rgba(60,193,160,.24);
  box-shadow:0 18px 44px rgba(6,14,12,.34);
  text-align:center;
}
.gracias-claim p{
  margin:0; font-family:var(--display); font-weight:700;
  font-size:clamp(22px,4.6vw,34px); line-height:1.24; letter-spacing:-.02em;
  color:#fff; text-wrap:balance;
}
.gracias-claim p b{color:var(--verde); font-weight:700}

.gracias-pie{
  margin-top:clamp(34px,7vw,52px); display:flex; flex-direction:column;
  align-items:center; gap:16px; text-align:center;
}
.gracias-pie .micro{margin:0; color:var(--tinta-b-45); max-width:46ch}

/* ---------- 9 · WHATSAPP ----------
   02-09-2026 · Una segunda puerta, para quien no quiere rellenar el
   formulario. Tres sitios: la burbuja fija, el pie del FAQ y debajo del CTA
   final. El botón va en Verde Liberfy y no en el verde de WhatsApp (#25D366):
   el glifo ya trae todo el reconocimiento que hace falta y el #25D366 no está
   en el brandbook. Si se quiere el verde de la marca ajena, es cambiar
   --wa-fondo aquí y en ningún sitio más. */
:root{--wa-fondo:var(--verde)}

/* --- la burbuja fija --- */
.wa-flotante{
  position:fixed; z-index:59; right:16px;
  /* despeja la barra fija del CTA, que vive en z-58 y ahora está en los dos
     tamaños; --barra lo reescribe script.js con su alto real */
  bottom:calc(var(--barra) + 12px);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; min-width:52px; border-radius:999px;
  /* CTA SECUNDARIO: superficie oscura con filo, no el verde del botón
     principal. El primario es «Pedir más información» y tiene que ganar de
     lejos; en verde relleno los dos competían al mismo peso. */
  background:var(--carbon); color:var(--tinta-b-100);
  border:1px solid var(--hairline-dark);
  font-family:var(--ui); font-weight:700; font-size:15px; letter-spacing:-.01em;
  text-decoration:none; box-shadow:0 12px 30px rgba(6,14,12,.36);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), opacity .25s var(--ease), background .2s var(--ease);
}
/* en móvil la barra ya ocupa 105px abajo: la burbuja va sin texto, en redondo,
   para no montar dos CTA a pantalla completa uno encima del otro */
.wa-flotante span{display:none}
.wa-flotante svg{width:25px; height:25px; flex:0 0 auto; fill:var(--wa-fondo)}
@media (min-width:900px){
  .wa-flotante{padding:8px 20px 8px 16px; gap:10px}
  .wa-flotante span{display:inline}
}
@media (hover:hover){
  .wa-flotante:hover{
    transform:translateY(-2px); background:#12241D;
    box-shadow:0 16px 38px rgba(6,14,12,.42);
  }
}
.wa-flotante:focus-visible{outline:2px solid var(--verde); outline-offset:3px}
@media (min-width:900px){.wa-flotante{right:24px}}
/* mientras el banner de cookies está abierto la burbuja estorba: en móvil el
   banner ocupa casi todo el ancho y se le monta encima */
body:has(.cookies.on) .wa-flotante{opacity:0; pointer-events:none}
@media (prefers-reduced-motion:reduce){.wa-flotante{transition:none}}

/* --- el enlace en línea --- */
.wa-enlace{
  display:inline-flex; align-items:center; gap:10px; min-height:44px;
  font-family:var(--ui); font-weight:700; font-size:16px;
  color:var(--verde); text-decoration:none;
}
.wa-enlace svg{width:21px; height:21px; flex:0 0 auto; fill:currentColor}
.wa-enlace u{text-decoration-thickness:1px; text-underline-offset:3px}
@media (hover:hover){.wa-enlace:hover u{text-decoration-thickness:2px}}

/* --- el remate del FAQ --- */
.wa-remate{
  margin-top:clamp(28px,6vw,40px); padding:clamp(22px,5vw,28px);
  border:1px solid var(--hairline-light); border-radius:var(--r-tarjeta);
  background:var(--blanco);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px;
}
.wa-remate p{margin:0; font-size:16px; color:var(--tinta-n-70); max-width:44ch}
.wa-remate p b{color:var(--tinta-n-100); font-weight:700}
/* El Verde Liberfy sobre blanco se queda en 2,25:1 y el enlace va a 16px en
   negrita, que no cuenta como texto grande: AA pide 4,5:1. Sobre fondo claro
   se usa el verde oscuro que ya estaba en la casa (5,28:1). Sobre el negro el
   --verde llega a 8,67:1 y se queda como está. */
.wa-remate .wa-enlace{color:#0E7A62}

/* --- la alternativa bajo el CTA final --- */
.wa-alterna{
  margin-top:clamp(18px,4vw,24px);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  /* .cierre-cta centra con text-align, que un contenedor flex se salta */
  justify-content:center;
}
.wa-alterna .o{
  margin:0; font-family:var(--ui); font-size:15px; color:var(--tinta-b-45);
}