/* ═══════════════════════════════════════════════════════════════════════════
   WEB PÚBLICA · GALENIA PARTNERS
   ---------------------------------------------------------------------------
   Registro visual deliberado: esto NO es una landing de SaaS. Quien la lee está
   pensando en vender el negocio de su vida y, según el acta, «suele ser gente
   desconfiada, a la que le da miedo muchas cosas». Así que: serif editorial en
   los titulares (pesa, parece un documento serio), mucho aire, datos reales en
   vez de adjetivos, y cero animación gratuita.
   T-135: se retiró el teléfono (el número era ficticio, no existe una línea
   real) y todo el contenido sin rellenar (equipo, casos, precios) — ver
   CHANGELOG/brief T-135.
   El contacto real hoy son los dos caminos del héroe: valorar o registrarse.
   ---------------------------------------------------------------------------
   D-024 — Design system único: los colores, radios y sombras de base viven en
   css/tokens.css (GENERADO desde web/src/styles/tokens.css — no se edita a
   mano). Este :root NO redefine ningún color: son alias locales que apuntan al
   canon, para no repetir hexadecimales sueltos por toda la hoja. Si cambia la
   marca, cambia en tokens.css y se propaga aquí solo.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* Alias de paleta → tokens.css (T-130: home.css tenía su propia paleta
     verde/oro a pelo, ajena al rebrand — por eso no se enteraba de los
     cambios de marca. Solo se declaran aquí los nombres que CAMBIAN de
     token o de valor; --papel, --hueso, --tinta, --linea, --sombra-s, --r-s
     y --r-pill ya se llaman igual en tokens.css y se heredan sin redeclarar
     — redeclararlos con el mismo nombre crearía una referencia circular. */
  --verde:       var(--verde-galenia);
  --verde-osc:   var(--verde-hondo);
  --verde-cla:   var(--verde-salvia);
  --oro:         var(--dorado);        /* decorativo: líneas, iconos, fondos — NUNCA texto */
  --oro-texto:   var(--dorado-texto);  /* texto dorado, siempre este (≈4,7:1 sobre crema) */
  --oro-tinte:   var(--premium-soft);
  --fondo:       var(--bg-app);
  --tinta-2:     var(--bruma);
  --tinta-3:     var(--text-soft);

  /* Sombras: --sombra (nombre antiguo) pasa a ser el nivel medio del canon.
     --sombra-l es específica de esta home (la landing pide un tercer nivel,
     más grande, para el hero/calc) — no está en tokens.css, así que se
     deriva por color-mix de los mismos tonos de marca en vez de un hex
     suelto (mismo patrón que las variables específicas de funnel.css). */
  --sombra:   var(--sombra-m);
  --sombra-l:
    0 4px 8px color-mix(in srgb, var(--tinta) 10%, transparent),
    0 24px 60px color-mix(in srgb, var(--verde-hondo) 16%, transparent);

  /* Dorado con contraste suficiente sobre los fondos oscuros de marca
     (--verde-osc). --oro-texto (#7A6340) está pensado para superficies claras
     y sería ilegible aquí: se aclara por color-mix, mismo patrón que --sombra-l
     arriba, sin tocar tokens.css. Uso exclusivo: la etiqueta de las cifras. */
  --oro-sobre-verde: color-mix(in srgb, var(--dorado) 55%, white 45%);

  /* Filete dorado de 1px — el separador de "capítulos" entre secciones,
     sustituye a las cajas doradas discontinuas que llevaba el wireframe. */
  --filete-oro: color-mix(in srgb, var(--oro) 45%, transparent);

  /* Tipografía: dos familias de marca (mismas que web/admin) */
  --serif: var(--font-display);
  --sans:  var(--font);

  /* Radios — mismo nivel «medio» del canon (antes esta hoja tenía su propia
     escala 6/10/16px, ajena al style guide); --r-l y --r-pill ya coinciden
     de nombre con tokens.css y se heredan sin redeclarar. */
  --r: var(--r-m);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--fondo);color:var(--tinta);font-family:var(--sans);
     font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.env{max-width:1160px;margin:0 auto;padding:0 26px}
.estrecho{max-width:760px;margin:0 auto}

/* ── Barra ───────────────────────────────────────────────────────────────── */
.barra{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--fondo) 92%,transparent);
       backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--linea)}
.barra .env{display:flex;align-items:center;gap:26px;height:72px}

/* ── Logo — isotipo + wordmark de texto ──────────────────────────────────
   A este tamaño (< 120px de lockup) va isotipo + texto, nunca el lockup
   completo: se dentea y el claim deja de leerse (T-129 rework, la misma
   regla que ya usa web/src/styles/sidebar.css .rx-logo — se replica aquí
   tal cual para no inventar una segunda versión del logo). Sin claim. */
.logo{display:flex;align-items:center;gap:10px;flex:0 0 auto;text-decoration:none}
.logo-mark-img{width:36px;height:36px;flex-shrink:0}
.logo-text{display:flex;flex-direction:column;line-height:1.05}
.logo-name{font-family:var(--serif);font-weight:600;font-size:17px;letter-spacing:.01em;
     color:var(--tinta);text-transform:uppercase}
.logo-sub{font-family:var(--sans);font-weight:600;font-size:9.5px;letter-spacing:.32em;
     text-transform:uppercase;color:var(--oro-texto);margin-top:2px}

.nav{display:flex;gap:26px;margin-left:8px;flex:1 1 auto}
.nav a{font-size:15px;color:var(--tinta-2);text-decoration:none;padding:6px 0;
       border-bottom:2px solid transparent}
.nav a:hover{color:var(--verde);border-bottom-color:var(--verde)}
.barra-acc{display:flex;align-items:center;gap:12px;flex:0 0 auto}

/* ── Menú móvil ──────────────────────────────────────────────────────────
   El nav de texto se oculta por falta de sitio a partir de 1000px (tablet
   incluido): sin esto no queda ninguna forma de navegar salvo scroll. El
   botón hamburguesa y el panel son el reemplazo; 44px de lado, de sobra
   para el pulgar (mínimo del encargo: 36px). */
.nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;
     gap:4px;width:44px;height:44px;flex:0 0 auto;border:1.5px solid var(--linea);
     border-radius:var(--r-s);background:var(--papel);cursor:pointer;padding:0}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--tinta);border-radius:2px;
     transition:transform .18s,opacity .18s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.nav-toggle span{transition:none}}
.nav-mobile{flex-direction:column;gap:2px;padding:10px 26px 18px;
     border-top:1px solid var(--linea);background:var(--papel)}
.nav-mobile[hidden]{display:none}
.nav-mobile:not([hidden]){display:flex}
.nav-mobile a{font-size:16px;color:var(--tinta);text-decoration:none;padding:13px 4px;
     min-height:36px;display:flex;align-items:center;border-bottom:1px solid var(--linea)}
.nav-mobile a:last-child{border-bottom:0;margin-top:8px}
/* El CTA final es un .btn-p (botón sólido, texto blanco): sin esto la regla
   de arriba le pisaba el color y "Entrar" quedaba ilegible sobre el verde. */
.nav-mobile a.btn{justify-content:center;border-bottom:0;padding:12px 24px;color:#fff}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
     border-radius:var(--r-pill);padding:12px 24px;font-family:var(--sans);font-size:15px;
     font-weight:650;cursor:pointer;border:1.5px solid transparent;text-decoration:none;
     transition:transform .18s,box-shadow .18s,background .18s}
.btn:active{transform:translateY(1px)}
.btn-p{background:var(--verde);color:#fff;box-shadow:var(--sombra-s)}
.btn-p:hover{box-shadow:var(--sombra)}
.btn-s{background:var(--papel);border-color:var(--linea);color:var(--tinta)}
.btn-s:hover{border-color:var(--verde);color:var(--verde)}
.btn-g{background:transparent;color:var(--tinta-2);padding:12px 16px}
.btn-g:hover{color:var(--verde)}
.btn-xl{padding:16px 32px;font-size:16.5px}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

/* ── Secciones ───────────────────────────────────────────────────────────── */
/* 144px de respiración en escritorio: el ritmo "por capítulos" que pide el
   encargo necesita aire, no solo color. Los breakpoints de abajo lo recortan
   progresivamente en tablet/móvil, donde sobra menos que sobreabunda. */
section{padding:144px 0}
/* Filete dorado de 1px entre capítulos consecutivos (nunca antes del primero,
   ni contra el héroe o las bandas verdes, que ya se separan por color) —
   sustituye a las cajas discontinuas doradas que llevaba el wireframe. */
section + section{border-top:1px solid var(--filete-oro)}
.sec-eyebrow{font-family:var(--sans);font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
     color:var(--verde);margin:0 0 16px}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(46px,6.4vw,84px);line-height:1.02;
   letter-spacing:-.025em;margin:0 0 22px;text-wrap:balance}
h2{font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.6vw,38px);line-height:1.14;
   letter-spacing:-.01em;margin:0 0 18px;text-wrap:balance}
h3{font-size:19px;font-weight:660;margin:0 0 9px;line-height:1.32}
.lead{font-size:19.5px;color:var(--tinta-2);max-width:62ch;margin:0 0 34px}
.parr{color:var(--tinta-2);max-width:64ch}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero{padding:104px 0 76px;background:
   radial-gradient(1100px 460px at 15% -10%,var(--verde-tinte),transparent 62%),
   radial-gradient(900px 400px at 92% 8%,var(--oro-tinte),transparent 58%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.hero h1 em{font-style:normal;color:var(--verde)}
.sello{display:inline-flex;align-items:center;gap:9px;background:var(--papel);
     border:1px solid var(--linea);border-radius:var(--r-pill);padding:7px 16px;
     font-size:13.5px;color:var(--tinta-2);margin-bottom:26px;box-shadow:var(--sombra-s)}
.sello b{color:var(--verde);font-weight:700}

/* Los dos caminos: la decisión del CTA */
.caminos{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.camino{display:flex;align-items:center;gap:18px;background:var(--papel);
     border:1.5px solid var(--linea);border-radius:var(--r-l);padding:20px 22px;
     text-decoration:none;transition:border-color .18s,box-shadow .18s,transform .18s}
.camino:hover{border-color:var(--verde);box-shadow:var(--sombra);transform:translateY(-2px)}
.camino-i{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
     flex:0 0 auto;font-size:21px}
.camino-c{flex:1 1 auto;min-width:0}
.camino-c b{display:block;font-size:17.5px;font-weight:680;margin-bottom:2px}
.camino-c span{font-size:14.5px;color:var(--tinta-2)}
.camino-f{flex:0 0 auto;color:var(--verde);font-size:20px}
.camino.primario{border-color:var(--verde);border-width:2px;background:
     linear-gradient(180deg,var(--verde-tinte),var(--papel) 62%)}
.camino.primario .camino-i{background:var(--verde);color:#fff}
.camino.secundario .camino-i{background:var(--hueso);color:var(--verde)}
@media (prefers-reduced-motion:reduce){.camino{transition:none}.camino:hover{transform:none}}

/* ── Calculadora (el gancho) ─────────────────────────────────────────────── */
.calc{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-l);
      box-shadow:var(--sombra-l);overflow:hidden}
.calc-cab{padding:22px 26px 16px;border-bottom:1px solid var(--linea);background:var(--hueso)}
.calc-cab b{display:block;font-family:var(--serif);font-size:21px;font-weight:600;margin-bottom:4px}
.calc-cab span{font-size:14px;color:var(--tinta-2)}
.calc-prog{display:flex;gap:5px;margin-top:16px}
.calc-prog i{height:4px;flex:1;background:var(--linea);border-radius:2px;transition:background .25s}
.calc-prog i.on{background:var(--verde)}
.calc-cuerpo{padding:26px}
.paso{display:none}
.paso.activo{display:block;animation:aparece .22s ease-out}
@keyframes aparece{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.paso.activo{animation:none}}
.paso-q{font-family:var(--serif);font-size:23px;font-weight:600;margin:0 0 6px;line-height:1.25}
.paso-h{font-size:14px;color:var(--tinta-3);margin:0 0 20px}
.ops{display:flex;flex-direction:column;gap:9px}
.op{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:var(--papel);
    border:1.5px solid var(--linea);border-radius:var(--r);padding:14px 17px;cursor:pointer;
    font-family:var(--sans);font-size:16px;color:var(--tinta);transition:border-color .12s,background .12s}
.op:hover{border-color:var(--verde);background:var(--verde-tinte)}
.op:focus-visible{outline:2px solid var(--verde);outline-offset:2px}
.op i{width:22px;height:22px;border-radius:50%;border:2px solid var(--linea);flex:0 0 auto}
.op:hover i{border-color:var(--verde)}
.calc-pie{padding:14px 26px;border-top:1px solid var(--linea);background:var(--hueso);
     font-size:13px;color:var(--tinta-3);display:flex;align-items:center;gap:8px}

/* Resultado con muro */
.res{position:relative}
.res-borroso{filter:blur(7px);user-select:none;pointer-events:none;padding:4px 0}
.res-cifra{font-family:var(--serif);font-size:52px;font-weight:600;color:var(--verde);
     line-height:1;margin:0 0 8px}
.res-sub{font-size:15px;color:var(--tinta-2);margin:0 0 18px}
.res-fila{display:flex;justify-content:space-between;padding:11px 0;border-top:1px solid var(--linea);
     font-size:15.5px}
.res-fila b{font-weight:660}
.muro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
     justify-content:center;text-align:center;gap:13px;padding:22px;
     background:color-mix(in srgb,var(--papel) 78%,transparent)}
.muro b{font-family:var(--serif);font-size:23px;font-weight:600}
.muro p{font-size:14.5px;color:var(--tinta-2);margin:0;max-width:38ch}
.muro-social{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:2px}
.btn-social{display:inline-flex;align-items:center;gap:9px;background:var(--papel);
     border:1.5px solid var(--linea);border-radius:var(--r-pill);padding:11px 19px;
     font-size:14.5px;font-weight:600;cursor:pointer;font-family:var(--sans)}
.btn-social:hover{border-color:var(--verde)}

/* ── Cifras ──────────────────────────────────────────────────────────────── */
/* "Las cifras son el producto": Inter tabular en vez de la serif de titulares,
   para que se lean como un informe. La etiqueta en versalitas doradas es el
   único acento dorado de esta pantalla — por eso usa --oro-sobre-verde y no
   aparece ningún otro dorado en la banda. */
.cifras{background:var(--verde-osc);color:#EAF4EF;padding:72px 0}
.cifras-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:34px}
.cifra-label{display:block;font-family:var(--sans);font-size:11px;font-weight:700;
     letter-spacing:.16em;text-transform:uppercase;color:var(--oro-sobre-verde);margin-bottom:12px}
.cifra b{display:block;font-family:var(--sans);font-variant-numeric:tabular-nums;
     font-size:44px;font-weight:700;line-height:1;color:#fff;margin-bottom:9px}
.cifra-desc{font-size:14.5px;opacity:.82;line-height:1.45;display:block}
.cifras-nota{margin:38px 0 0;font-size:13px;opacity:.62}

/* ── Bloques con pantalla ────────────────────────────────────────────────── */
.duo{display:grid;grid-template-columns:1fr 1.15fr;gap:52px;align-items:center}
.duo.invertido{grid-template-columns:1.15fr 1fr}
.duo.invertido .duo-txt{order:2}
.pantalla{border:1px solid var(--linea);border-radius:var(--r-l);overflow:hidden;
     box-shadow:var(--sombra-l);background:var(--papel)}
.pantalla-pie{font-size:11.5px;color:var(--tinta-3);margin-top:11px;
     text-align:center}
.lista{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:13px}
.lista li{display:flex;gap:12px;font-size:16px;color:var(--tinta-2)}
.lista li b{color:var(--tinta);font-weight:660}
.tic{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--verde-tinte);
     color:var(--verde);display:grid;place-items:center;font-size:12px;font-weight:800;margin-top:2px}

/* ── Cómo funciona ───────────────────────────────────────────────────────── */
.pasos3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px}
.p3{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-l);padding:28px 26px}
.p3-n{font-family:var(--sans);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--verde);
     font-weight:700;margin-bottom:14px}
.p3 h3{font-family:var(--serif);font-size:21px;font-weight:600}
.p3 p{font-size:15.5px;color:var(--tinta-2);margin:0}
.p3 ul{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:8px}
.p3 li{font-size:14.5px;color:var(--tinta-2);padding-left:16px;position:relative}
.p3 li::before{content:"—";position:absolute;left:0;color:var(--verde)}

/* ── Servicios ───────────────────────────────────────────────────────────── */
.serv{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:38px}
.serv-col{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-l);padding:30px}
.serv-col > b{display:block;font-family:var(--serif);font-size:21px;font-weight:600;margin-bottom:18px}
.serv-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.serv-col li{font-size:15.5px;color:var(--tinta-2);display:flex;gap:11px;align-items:flex-start}
.serv-col li::before{content:"+";color:var(--verde);font-weight:800;flex:0 0 auto}

/* ── Preguntas ───────────────────────────────────────────────────────────── */
.faq{margin-top:34px;display:flex;flex-direction:column;gap:10px}
.faq details{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-l)}
.faq summary{padding:19px 22px;cursor:pointer;list-style:none;font-size:17px;font-weight:620;
     display:flex;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--verde);font-size:21px;font-weight:400}
.faq details[open] summary::after{content:"−"}
.faq summary:hover{color:var(--verde)}
.faq .r{padding:0 22px 20px;color:var(--tinta-2);font-size:16px;max-width:70ch}

/* ── Cierre ──────────────────────────────────────────────────────────────── */
.cierre{background:var(--verde-osc);color:#EAF4EF;text-align:center;padding:128px 0}
.cierre h2{color:#fff;margin-bottom:16px}
.cierre p{font-size:19px;opacity:.86;max-width:52ch;margin:0 auto 32px}
.cierre-acc{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cierre .btn-s{background:transparent;border-color:rgba(255,255,255,.34);color:#fff}
.cierre .btn-s:hover{border-color:#fff;color:#fff}

/* ── Pie ─────────────────────────────────────────────────────────────────── */
footer{background:var(--hueso);border-top:1px solid var(--linea);padding:64px 0 34px;font-size:14.5px}
.pie-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;margin-bottom:34px}
.pie-col b{display:block;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
     color:var(--tinta-3);margin-bottom:14px}
.pie-col a{display:block;color:var(--tinta-2);text-decoration:none;margin-bottom:9px}
.pie-col a:hover{color:var(--verde)}
.pie-legal{border-top:1px solid var(--linea);padding-top:22px;display:flex;
     justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--tinta-3);font-size:13.5px}

/* ── Barra móvil ─────────────────────────────────────────────────────────── */
.movil{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:10px;padding:12px 16px;
     background:color-mix(in srgb,var(--papel) 96%,transparent);backdrop-filter:blur(12px);
     border-top:1px solid var(--linea)}
.movil .btn{flex:1}

@media (min-width:1001px){
  .nav-toggle{display:none !important}
  .nav-mobile{display:none !important}
}
@media (max-width:1000px){
  .hero-grid,.duo,.duo.invertido{grid-template-columns:1fr;gap:38px}
  .duo.invertido .duo-txt{order:0}
  .pasos3,.serv{grid-template-columns:1fr}
  .pie-grid{grid-template-columns:1fr 1fr}
  .nav{display:none}
  .nav-toggle{display:flex}
  .env{padding:0 20px}
  section{padding:96px 0}
}
@media (max-width:820px){
  h1{font-size:clamp(32px,7vw,48px)}
  .cifras-grid{grid-template-columns:repeat(2,1fr)}
  .serv{grid-template-columns:1fr}
  section{padding:80px 0}
}
@media (max-width:640px){
  section{padding:56px 0}
  .barra .env{height:64px;gap:12px}
  .env{padding:0 16px}
  .movil{display:flex}
  body{padding-bottom:74px}
  .cifras-grid{grid-template-columns:1fr 1fr;gap:24px}
  .pie-grid{grid-template-columns:1fr}
  .pie-legal{flex-direction:column;align-items:flex-start;gap:8px}
  .camino{flex-wrap:wrap}
  .hero{padding:48px 0 56px}
  h1{font-size:clamp(28px,9vw,40px)}
  .res-cifra{font-size:40px}
  .cifra b{font-size:34px}
  .cierre{padding:80px 0}
}