/* ==========================================================================
   GranjApp · Sistema de diseño "PLIEGO"
   --------------------------------------------------------------------------
   Dirección ganadora: Pliego (retícula visible, filete de 1px, cifra como
   titular, folio numerado, radio cero, cero sombras en el sitio).
   Injertos aprobados por el jurado:
     · Superficie → grises SÓLIDOS auditados (no opacidades) para texto,
                    sistema de movimiento .r/--i, dos anclas oscuras,
                    tabular-nums global, foco de doble anillo.
     · TERRENO    → filete vertical como sustituto de tarjeta, eje óptico
                    graduado (opsz), ::selection yema, --nav-h como variable.
   Correcciones bloqueantes aplicadas:
     1. Nada de texto sobre alfas: el folio y los metadatos van a #5C6657
        (5.58:1 sobre papel) y a 13px mínimo. AA duro.
     2. Un solo ancho de página (--pliego) que leen .wrap, nav y footer.
        Cero desalineación entre la retícula y el chrome.
     3. --shadow sigue existiendo (sombra de contacto real), no se anula.
     4. La retícula va al 5.5% con máscara: nunca papel milimétrico.
     5. --nav-h es variable: nav, scroll-padding y .tour-sim la leen.
     6. Foco por fondo: verde monte sobre claro, yema sobre oscuro.
        Resuelve por fin el foco DENTRO del teléfono.
   Paleta heredada intacta. Español de México.
   ========================================================================== */


/* ==========================================================================
   01 · TOKENS
   ========================================================================== */
:root{

  /* ---- Paleta heredada · intacta ---- */
  --field:#173B2A;        /* verde monte, base oscura */
  --field-2:#20503A;      /* verde hover / superficie elevada */
  --field-3:#0F2A1D;
  --field-deep:#0E241A;   /* ancla oscura: máximo dos por scroll */
  --ink:#1C2419;          /* tinta plena */
  --paper:#F6F7F1;        /* blanco cascarón */
  --paper-2:#FFFFFF;
  --straw:#E8E0C4;        /* paja */
  --straw-2:#F2EDDC;
  --yolk:#F2B01E;         /* yema: ÚNICO acento, una vez por pantalla */
  --yolk-2:#D99A0B;
  --comb:#B8402E;         /* cresta: alertas */

  /* ---- Tinta sobre papel · colores sólidos verdosos, contraste auditado ----
     Las opacidades sirven para filetes. Para tipografía producen contrastes
     que nadie audita. Aquí cada tono trae su razón medida sobre --paper. */
  --ink-2:#3A463A;        /* cuerpo y párrafos          · 9.2:1  */
  --ink-3:#5C6657;        /* folio, meta, notas (≥13px) · 5.6:1  */
  --ink-dim:#6F7A6C;      /* SOLO display ≥24px         · 4.2:1  */
  --ink-4:#9AA396;        /* placeholders, decorativo. Nunca texto. */

  /* ---- Tinta sobre verde ---- */
  --on-field:#F1EFE1;     /* titulares  · 11.5:1 */
  --on-field-2:#C7D3C9;   /* cuerpo     ·  8.0:1 */
  --on-field-3:#A8B8A4;   /* meta       ·  5.9:1 */

  /* ---- Semánticos ---- */
  --ok:#256B41;           /* alza, sí, correcto · 5.5:1 sobre blanco */
  --ok-2:#9FE0B3;         /* alza sobre verde   · 8.1:1 */
  --warn:#8A5A00;

  /* ---- Filetes: nunca cajas, siempre líneas ---- */
  --rule-soft:rgba(28,36,25,.075);
  --rule-color:rgba(28,36,25,.16);
  --rule-strong:rgba(28,36,25,.34);
  --rule-inv-soft:rgba(241,239,225,.10);
  --rule-inv:rgba(241,239,225,.20);
  --rule-inv-strong:rgba(241,239,225,.36);
  --rule:1px solid var(--rule-color);
  --rule-fina:1px solid var(--rule-soft);
  --rule-fuerte:1px solid var(--rule-strong);
  --rule-clara:1px solid var(--rule-inv);

  /* ---- Compatibilidad con nombres heredados ---- */
  --line:#E3E6DC;
  --mist:rgba(28,36,25,.08);
  --muted:var(--ink-3);
  --muted-2:var(--ink-2);

  /* ---- Retícula y medidas ---- */
  --pliego:1200px;                      /* ÚNICO ancho de página */
  --pliego-corto:760px;
  --margen:clamp(20px,5vw,56px);
  --gutter:clamp(14px,2.2vw,28px);
  --medida:62ch;                        /* cuerpo largo */
  --medida-corta:34ch;                  /* bajadas */
  --nav-h:72px;                         /* lo leen nav, scroll-padding y tour */

  /* ---- Ritmo vertical · todo múltiplo de 8 ---- */
  --e1:8px; --e2:16px; --e3:24px; --e4:40px;
  --e5:64px; --e6:104px; --e7:168px;

  /* ---- Tipografía ---- */
  --display:"Bricolage Grotesque","Arial Narrow",sans-serif;
  --body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --t-micro:.8125rem;                       /* 13px duros: piso legal */
  --t-nota:clamp(.8125rem,1vw,.875rem);
  --t-cuerpo:clamp(.97rem,1.05vw,1.03rem);
  --t-bajada:clamp(1.02rem,1.25vw,1.18rem);
  --t-h3:clamp(1.15rem,1.8vw,1.45rem);
  --t-h2:clamp(2.1rem,5.6vw,4rem);
  --t-h1:clamp(2.9rem,9.4vw,7.4rem);
  --t-cifra:clamp(3rem,10vw,7rem);
  --track-mega:-.045em;
  --track-cifra:-.05em;
  --track-h2:-.03em;
  --track-meta:.16em;

  /* ---- Radios: el pliego no redondea. El aparato sí, es un objeto. ---- */
  --r:0px;
  --r-suave:2px;
  --r-tel:44px;
  --r-app:14px;                          /* interior del simulador */
  --r-app-sm:10px;

  /* ---- Sombra: una sola, de contacto, verde y difusa ---- */
  --shadow:0 2px 4px rgba(23,59,42,.05),
           0 24px 48px -28px rgba(23,59,42,.30);
  --shadow-tel:0 2px 4px rgba(23,59,42,.06),
               0 26px 50px -26px rgba(23,59,42,.34),
               0 90px 120px -70px rgba(23,59,42,.22);

  /* ---- Movimiento ---- */
  --ease:cubic-bezier(.22,1,.36,1);
  --dur-1:140ms; --dur-2:240ms; --dur-3:560ms; --dur-4:800ms;
}


/* ==========================================================================
   02 · REINICIO Y BASE
   ========================================================================== */
*{box-sizing:border-box;margin:0;padding:0}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 16px);
  background:var(--paper);
}

body{
  font-family:var(--body);
  font-size:var(--t-cuerpo);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* Cifras alineadas al pixel en TODO el sitio: precios, calculadora,
     reportes y KPIs del simulador. Injerto de Superficie. */
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--display);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.025em;
  text-wrap:balance;
}
p{text-wrap:pretty}
a{color:inherit}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
img,svg{display:block;max-width:100%}
table{border-collapse:collapse}

::selection{background:var(--yolk);color:var(--ink)}

/* ---- Foco por fondo (injerto de oficio) --------------------------------
   Verde monte sobre superficies claras — incluida la pantalla del
   simulador, que es casi blanca y donde la yema daba 1.77:1.
   Yema sólo sobre verde. Siempre outline real, nunca box-shadow. */
:focus-visible{
  outline:2px solid var(--field);
  outline-offset:2px;
  border-radius:var(--r-suave);
}
.on-field :focus-visible,
.on-field-deep :focus-visible,
.btn-field:focus-visible,
.kpi.hero-kpi :focus-visible,
.tarjeta.gratis :focus-visible{
  outline-color:var(--yolk);
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Interruptor global de movimiento. No se toca. */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}


/* ==========================================================================
   03 · CONTENEDORES Y RETÍCULA
   Un solo ancho de página. Nav, hero, secciones y pie caen en el mismo eje.
   ========================================================================== */
.wrap{
  width:min(var(--pliego),calc(100% - var(--margen) * 2));
  margin-inline:auto;
}
.wrap-narrow{
  width:min(var(--pliego-corto),calc(100% - var(--margen) * 2));
  margin-inline:auto;
}
.bleed{width:100%;margin-inline:0}

/* ---- Retícula visible: filetes al 5.5% con desvanecido.
   Nunca sube de opacidad o se vuelve papel milimétrico. ---- */
.reticulado{position:relative}
.reticula{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(to right,var(--rule-soft) 1px,transparent 1px);
  background-size:calc(100% / 12) 100%;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%);
}
.reticulado > *:not(.reticula){position:relative;z-index:1}
@media (max-width:860px){.reticula{background-size:calc(100% / 4) 100%}}
.on-field .reticula,.on-field-deep .reticula{
  background-image:linear-gradient(to right,var(--rule-inv-soft) 1px,transparent 1px);
}

/* ---- Filetes horizontales sueltos ---- */
.rule{height:1px;background:var(--rule-color);border:0;width:100%}
.rule-fina{height:1px;background:var(--rule-soft);border:0;width:100%}
.rule-fuerte{height:1px;background:var(--rule-strong);border:0;width:100%}
.on-field .rule,.on-field-deep .rule{background:var(--rule-inv)}

/* ---- Filete vertical: sustituye a la tarjeta (injerto de TERRENO) ---- */
.filete{
  border-left:1px solid var(--rule-strong);
  padding-left:clamp(14px,1.4vw,20px);
}
.on-field .filete,.on-field-deep .filete{border-left-color:var(--rule-inv-strong)}

/* ---- Repartos ---- */
.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}
.split-inv{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
.split-igual{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.split-linea > *:first-child{
  border-right:var(--rule);
  padding-right:clamp(20px,3vw,48px);
}
.split-linea > *:last-child{padding-left:clamp(20px,3vw,48px)}
.split,.split-inv,.split-igual{gap:clamp(28px,4vw,72px)}
.split-linea{gap:0}

.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter)}
.stack{display:flex;flex-direction:column;gap:var(--e3)}
.stack-ancho{display:flex;flex-direction:column;gap:var(--e5)}

@media (max-width:900px){
  .split,.split-inv,.split-igual{grid-template-columns:1fr}
  .split-linea > *:first-child{
    border-right:0;border-bottom:var(--rule);
    padding-right:0;padding-bottom:var(--e4);
  }
  .split-linea > *:last-child{padding-left:0;padding-top:var(--e4)}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){.grid-4{grid-template-columns:1fr}}


/* ==========================================================================
   04 · TIPOGRAFÍA
   Dos familias, seis tamaños, nunca más de tres por pantalla.
   Eje óptico graduado: opsz 96 en display, 72 en h2, 40 en h3, 12 en micro.
   ========================================================================== */

/* ---- Titular de portada. Uno por página. ---- */
.mega{
  font-family:var(--display);font-weight:800;
  font-size:var(--t-h1);
  line-height:.86;
  letter-spacing:var(--track-mega);
  font-variation-settings:"opsz" 96;
  text-wrap:balance;
  max-width:13ch;
}
/* Contraste de peso, no de tamaño: la segunda cláusula baja a 400. */
.mega .ligera{display:block;font-weight:400;color:var(--field)}
.on-field .mega,.on-field-deep .mega{color:var(--on-field)}
.on-field .mega .ligera,.on-field-deep .mega .ligera{color:var(--on-field-3)}

/* ---- Título de sección ---- */
.sec-title{
  font-family:var(--display);font-weight:700;
  font-size:var(--t-h2);
  line-height:.95;
  letter-spacing:var(--track-h2);
  font-variation-settings:"opsz" 72;
  max-width:18ch;
  text-wrap:balance;
}
/* Una sola frase hace de titular y de bajada (injerto de Superficie). */
.dim{color:var(--ink-dim)}
.on-field .dim,.on-field-deep .dim{color:var(--on-field-3)}

.sec-sub{
  font-size:var(--t-bajada);
  line-height:1.5;letter-spacing:-.008em;
  color:var(--ink-2);
  max-width:44ch;
  margin-top:var(--e2);
}

/* ---- Subtítulo / encabezado de módulo ---- */
.sub-title{
  font-family:var(--display);font-weight:600;
  font-size:var(--t-h3);
  line-height:1.15;letter-spacing:-.015em;
  font-variation-settings:"opsz" 40;
}

/* ---- La cifra ES el titular ---- */
.cifra{
  display:block;
  font-family:var(--display);font-weight:800;
  font-size:var(--t-cifra);
  line-height:.82;
  letter-spacing:var(--track-cifra);
  font-variation-settings:"opsz" 96;
  color:var(--field);
}
.on-field .cifra,.on-field-deep .cifra{color:var(--on-field)}
.cifra-pie{
  display:block;margin-top:var(--e2);
  font-size:var(--t-nota);color:var(--ink-3);
  max-width:26ch;
}
.on-field .cifra-pie,.on-field-deep .cifra-pie{color:var(--on-field-3)}

/* ---- Bajada, cuerpo, meta ---- */
.bajada{
  font-size:var(--t-bajada);line-height:1.5;letter-spacing:-.008em;
  color:var(--ink-2);max-width:var(--medida-corta);
}
.cuerpo{font-size:var(--t-cuerpo);line-height:1.6;color:var(--ink-2);max-width:var(--medida)}
.meta{
  font-family:var(--body);font-weight:600;
  font-size:var(--t-micro);
  letter-spacing:var(--track-meta);text-transform:uppercase;
  color:var(--ink-3);
  font-variation-settings:"opsz" 12;
}
.nota{font-size:var(--t-nota);line-height:1.5;color:var(--ink-3)}
.micro{font-size:var(--t-micro);line-height:1.5;color:var(--ink-3)}
.on-field .bajada,.on-field .cuerpo,
.on-field-deep .bajada,.on-field-deep .cuerpo{color:var(--on-field-2)}
.on-field .meta,.on-field .nota,.on-field .micro,
.on-field-deep .meta,.on-field-deep .nota,.on-field-deep .micro{color:var(--on-field-3)}

/* ---- Utilidades tipográficas ---- */
.medida{max-width:var(--medida)}
.medida-corta{max-width:var(--medida-corta)}
.tnum{font-variant-numeric:tabular-nums lining-nums}
.no-wrap{white-space:nowrap}
.center{text-align:center}
.center .sec-title,.center .sec-sub,.center .bajada,.center .mega{margin-left:auto;margin-right:auto}
.center .eyebrow,.center .folio{justify-content:center}

/* Por debajo de 480px el español rompe: "Recolección", "administración". */
@media (max-width:480px){
  .mega,.sec-title{hyphens:auto;-webkit-hyphens:auto}
}


/* ==========================================================================
   05 · FOLIO Y EYEBROW
   Numerar es jerarquía gratis. 13px y 5.6:1: se lee, no se adivina.
   ========================================================================== */
.folio{
  display:flex;align-items:baseline;flex-wrap:wrap;
  gap:0 16px;
  padding:14px 0 12px;
  border-bottom:var(--rule-fuerte);
  font-family:var(--body);font-weight:600;
  font-size:var(--t-micro);
  letter-spacing:var(--track-meta);text-transform:uppercase;
  color:var(--ink-3);
}
.folio-n{
  font-family:var(--display);font-weight:800;
  font-size:.9rem;letter-spacing:.02em;color:var(--ink);
}
.folio-t{color:var(--ink-3)}
.folio-r{margin-left:auto;color:var(--ink-2);letter-spacing:.1em}
.on-field .folio,.on-field-deep .folio{
  border-bottom-color:var(--rule-inv-strong);color:var(--on-field-3);
}
.on-field .folio-n,.on-field-deep .folio-n{color:var(--on-field)}
.on-field .folio-r,.on-field-deep .folio-r{color:var(--on-field-2)}

/* Eyebrow sin la rayita amarilla heredada: la yema es del botón. */
.eyebrow{
  display:flex;align-items:center;gap:10px;
  font-size:var(--t-micro);font-weight:600;
  letter-spacing:var(--track-meta);text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:var(--e2);
}
.on-field .eyebrow,.on-field-deep .eyebrow{color:var(--on-field-3)}

@media (max-width:640px){
  .folio-r{margin-left:0;width:100%;margin-top:6px}
}


/* ==========================================================================
   06 · SECCIONES Y ANCLAS DE COLOR
   Regla dura: máximo DOS secciones oscuras en todo el scroll de una página.
   ========================================================================== */
section{padding:clamp(64px,9vw,var(--e6)) 0}
section.tight{padding:clamp(40px,6vw,var(--e5)) 0}
section.amplia{padding:clamp(88px,13vw,var(--e7)) 0}
section + section{border-top:var(--rule-fina)}
section.on-field + section,
section.on-field-deep + section,
section.on-straw + section,
section + section.on-field,
section + section.on-field-deep,
section + section.on-straw{border-top:0}

.on-field{background:var(--field);color:var(--on-field)}
.on-field-deep{background:var(--field-deep);color:var(--on-field)}
.on-straw{background:var(--straw)}
.on-paper{background:var(--paper);color:var(--ink)}
.on-white{background:var(--paper-2)}


/* ==========================================================================
   07 · BOTONES
   Radio cero. La yema aparece UNA vez por pantalla y siempre es clicable.
   56px de alto mínimo: el granjero lo toca con el dedo, no con el mouse.
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:0 26px;
  border-radius:var(--r);
  font-family:var(--body);font-weight:600;font-size:1rem;letter-spacing:-.01em;
  text-decoration:none;text-align:center;
  transition:transform var(--dur-2) var(--ease),
             box-shadow var(--dur-2) var(--ease),
             background var(--dur-2) var(--ease),
             border-color var(--dur-2) var(--ease),
             color var(--dur-2) var(--ease);
}
.btn-yolk{background:var(--yolk);color:var(--ink);box-shadow:0 0 0 0 var(--ink)}
.btn-yolk:hover{background:var(--yolk);transform:translate(-3px,-3px);box-shadow:3px 3px 0 0 var(--ink)}
.btn-yolk:active{transform:none;box-shadow:0 0 0 0 var(--ink)}
.btn-field{background:var(--field);color:var(--paper)}
.btn-field:hover{background:var(--field-2)}
.btn-ghost{border:1px solid var(--rule-strong);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink)}
.on-field .btn-ghost,.on-field-deep .btn-ghost,.cta-final .btn-ghost{
  border-color:var(--rule-inv-strong);color:var(--on-field);
}
.on-field .btn-ghost:hover,.on-field-deep .btn-ghost:hover,.cta-final .btn-ghost:hover{
  border-color:var(--on-field);background:rgba(241,239,225,.06);
}
.btn-sm{min-height:42px;padding:0 18px;font-size:.9rem}
.btn-lg{min-height:60px;padding:0 34px;font-size:1.05rem}
.btn-block{width:100%}
.btn[disabled],.btn[aria-busy="true"]{opacity:.55;pointer-events:none}

/* Enlace con filete: la alternativa al segundo botón. */
.btn-filete{
  display:inline-flex;align-items:center;min-height:52px;
  font-weight:600;font-size:1rem;color:var(--ink);text-decoration:none;
  box-shadow:inset 0 -1px 0 0 var(--rule-strong);
  transition:box-shadow var(--dur-2) var(--ease),color var(--dur-2) var(--ease);
}
.btn-filete::after{content:"→";margin-left:.55em}
.btn-filete:hover{box-shadow:inset 0 -1px 0 0 var(--ink)}
.on-field .btn-filete,.on-field-deep .btn-filete{color:var(--on-field);box-shadow:inset 0 -1px 0 0 var(--rule-inv-strong)}
.on-field .btn-filete:hover,.on-field-deep .btn-filete:hover{box-shadow:inset 0 -1px 0 0 var(--on-field)}

.cta{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2.4vw,28px)}
.cta-nota{width:100%;font-size:var(--t-micro);color:var(--ink-3);margin-top:var(--e1)}
.on-field .cta-nota,.on-field-deep .cta-nota,.cta-final .cta-nota{color:var(--on-field-3)}

@media (max-width:480px){
  .btn,.btn-filete{width:100%;min-height:56px}
  .cta{gap:var(--e2)}
  .btn-filete{justify-content:flex-start}
}


/* ==========================================================================
   08 · PANELES, LISTAS Y PASOS
   Cero tarjetas con borde en todas partes: filetes, aire y numeración.
   ========================================================================== */
.panel{
  background:transparent;
  border:0;border-top:var(--rule-fuerte);
  border-radius:var(--r);
  padding:var(--e3) 0 var(--e4);
}
.panel-caja{
  background:var(--paper-2);
  border:var(--rule);
  border-radius:var(--r);
  padding:clamp(22px,3vw,34px);
}
.on-field .panel-caja,.on-field-deep .panel-caja{
  background:rgba(241,239,225,.05);border-color:var(--rule-inv);
}

/* ---- Listas: máximo 5 palabras por viñeta, sin punto final ---- */
.lista{list-style:none;display:flex;flex-direction:column}
.lista li{
  padding:12px 0;border-top:var(--rule-fina);
  font-size:var(--t-cuerpo);color:var(--ink-2);
}
.lista li:first-child{border-top:0}
.lista li.gris{color:var(--ink-3)}
.on-field .lista li,.on-field-deep .lista li{border-top-color:var(--rule-inv-soft);color:var(--on-field-2)}

.lista-check{list-style:none;display:flex;flex-direction:column;gap:10px}
.lista-check li{position:relative;padding-left:26px;font-size:var(--t-cuerpo);color:var(--ink-2)}
.lista-check li::before{
  content:"";position:absolute;left:2px;top:.55em;
  width:10px;height:6px;
  border-left:2px solid var(--field);border-bottom:2px solid var(--field);
  transform:rotate(-45deg);
}
.lista-check li.gris{color:var(--ink-3)}
.lista-check li.gris::before{border-color:var(--ink-4)}
.on-field .lista-check li,.on-field-deep .lista-check li{color:var(--on-field-2)}
.on-field .lista-check li::before,.on-field-deep .lista-check li::before{border-color:var(--yolk)}

/* ---- Pasos numerados ---- */
.pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.paso{padding:var(--e3) clamp(18px,2.4vw,32px) var(--e4) 0;border-left:var(--rule);padding-left:clamp(18px,2.4vw,32px)}
.paso:first-child{border-left:0;padding-left:0}
.paso .n{
  display:block;font-family:var(--display);font-weight:800;
  font-size:1rem;color:var(--ink-3);letter-spacing:.02em;margin-bottom:var(--e2);
}
.paso h3{font-size:var(--t-h3);font-weight:600;letter-spacing:-.015em;margin-bottom:8px}
.paso p{font-size:var(--t-cuerpo);color:var(--ink-2);max-width:30ch}
.on-field .paso,.on-field-deep .paso{border-left-color:var(--rule-inv)}
.on-field .paso .n,.on-field-deep .paso .n{color:var(--on-field-3)}
.on-field .paso p,.on-field-deep .paso p{color:var(--on-field-2)}
@media (max-width:860px){
  .pasos{grid-template-columns:1fr}
  .paso{border-left:0;border-top:var(--rule);padding:var(--e3) 0 var(--e4)}
  .paso:first-child{border-top:0}
}

/* ---- Módulos (inventario de funciones) ---- */
.modulos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.modulo{padding:var(--e4) clamp(18px,2.4vw,32px);border-top:var(--rule);border-left:var(--rule)}
.modulo:nth-child(2n+1){border-left:0;padding-left:0}
.modulo h3{font-size:var(--t-h3);font-weight:600;margin-bottom:8px}
.modulo p{font-size:var(--t-cuerpo);color:var(--ink-2);max-width:36ch}
.on-field .modulo,.on-field-deep .modulo{border-color:var(--rule-inv)}
.on-field .modulo p,.on-field-deep .modulo p{color:var(--on-field-2)}
@media (max-width:760px){
  .modulos{grid-template-columns:1fr}
  .modulo{border-left:0;padding-left:0;padding-right:0}
}

/* ---- Icono cuadrado ---- */
.ico{
  width:40px;height:40px;border-radius:var(--r);
  display:grid;place-items:center;
  border:var(--rule);margin-bottom:var(--e2);
}
.ico svg{width:20px;height:20px;stroke:var(--field);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.on-field .ico,.on-field-deep .ico{border-color:var(--rule-inv)}
.on-field .ico svg,.on-field-deep .ico svg{stroke:var(--yolk)}


/* ==========================================================================
   09 · BANDA DE CIFRAS
   ========================================================================== */
.band{padding:clamp(48px,7vw,var(--e5)) 0;border-top:var(--rule);border-bottom:var(--rule)}
.band .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.band > .wrap > div{padding-left:clamp(16px,2.4vw,32px);border-left:var(--rule)}
.band > .wrap > div:first-child{border-left:0;padding-left:0}
.band b{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(2.2rem,4.4vw,3.4rem);letter-spacing:-.04em;line-height:1;
  color:var(--field);
}
.band span{display:block;margin-top:10px;font-size:var(--t-nota);color:var(--ink-3);max-width:22ch}
.on-field .band b,.on-field-deep .band b{color:var(--on-field)}
.on-field .band span,.on-field-deep .band span{color:var(--on-field-3)}
.on-field .band > .wrap > div,.on-field-deep .band > .wrap > div{border-left-color:var(--rule-inv)}
@media (max-width:800px){
  .band .wrap{grid-template-columns:1fr 1fr;gap:var(--e4) 0}
  .band > .wrap > div:nth-child(2n+1){border-left:0;padding-left:0}
}


/* ==========================================================================
   10 · SIMULADOR DE TELÉFONO
   Contrato con el JS: no se renombra ni se borra ninguna clase.
   Sin resplandor amarillo: sombra de contacto neutra (la yema es del botón).
   ========================================================================== */
.stage{position:relative;display:flex;flex-direction:column;align-items:center}
.stage::before{
  content:"";position:absolute;left:8%;right:8%;bottom:-14px;height:26%;
  background:radial-gradient(60% 100% at 50% 100%,rgba(23,59,42,.16),transparent 72%);
  filter:blur(14px);z-index:0;pointer-events:none;
}

/* Único momento de vida del hero. Se endereza al hover o al focus-within.
   Se apaga sola en celular y con movimiento reducido. */
.stage.tilt .phone{transform:rotate(-1.15deg)}
.stage.tilt .phone:hover,
.stage.tilt .phone:focus-within{transform:rotate(0)}

.hint{
  position:absolute;left:0;top:14px;z-index:3;
  background:var(--ink);color:var(--paper);
  font-size:var(--t-micro);font-weight:500;
  padding:7px 12px;border-radius:var(--r);
}
.hint::after{
  content:"";position:absolute;right:-5px;top:50%;
  width:10px;height:10px;background:var(--ink);
  transform:translateY(-50%) rotate(45deg);
}
@media (max-width:620px){.hint{display:none}}

.phone{
  position:relative;z-index:2;
  width:340px;height:716px;
  background:#0F1A13;
  border-radius:var(--r-tel);
  padding:11px;
  box-shadow:var(--shadow-tel);
  transition:transform var(--dur-3) var(--ease);
}
.phone .screen{
  position:relative;width:100%;height:100%;
  background:#F7F7F2;
  border-radius:calc(var(--r-tel) - 11px);
  overflow:hidden;display:flex;flex-direction:column;
}
.notch{
  position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:96px;height:24px;background:#0F1A13;border-radius:999px;z-index:5;
}
.statusbar{
  height:44px;display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 22px 4px;font-size:.72rem;font-weight:600;color:var(--ink);
}
.view{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 16px 92px;scrollbar-width:none}
.view::-webkit-scrollbar{display:none}
.app-screen{display:none}
.app-screen.on{display:block;animation:in .25s var(--ease)}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Foco dentro del teléfono: la pantalla es casi blanca, la yema no sirve. */
.phone :focus-visible{outline:2px solid var(--field);outline-offset:2px}

/* ---- Login del simulador ---- */
.login{display:flex;flex-direction:column;justify-content:center;height:100%;padding:0 6px}
.login .mark{width:64px;height:64px;border-radius:var(--r-app);background:var(--straw-2);display:grid;place-items:center;margin-bottom:22px}
.login .mark svg{width:34px;height:34px}
.login .mark img{width:52px;height:52px;object-fit:contain}
.login h3{font-size:1.85rem;font-weight:800;letter-spacing:-.03em}
.login p{color:var(--ink-3);font-size:.9rem;margin:6px 0 26px}
.login .who{margin-top:22px;font-size:var(--t-micro);color:var(--ink-3);text-align:center}

/* ---- Campos (los usa el simulador Y los formularios del sitio) ---- */
.field{margin-bottom:12px}
.field label{display:block;font-size:var(--t-micro);font-weight:600;color:var(--ink-2);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;padding:14px;
  border-radius:var(--r-app-sm);
  border:1px solid #CBD0C4;background:var(--paper-2);
  font:inherit;font-size:.95rem;color:var(--ink);
}
.field textarea{min-height:130px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-4)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--field);outline:none}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--field);outline-offset:1px}
.on-field .field label,.on-field-deep .field label{color:var(--on-field-2)}
.on-field .field input,.on-field .field select,.on-field .field textarea,
.on-field-deep .field input,.on-field-deep .field select,.on-field-deep .field textarea{
  background:rgba(255,255,255,.95);border-color:transparent;
}

.app-btn{
  width:100%;padding:16px;
  border-radius:var(--r-app);
  background:var(--field);color:#fff;
  font-weight:600;font-size:1rem;margin-top:10px;
  transition:background var(--dur-1) var(--ease);
}
.app-btn:hover{background:var(--field-2)}
.app-btn.yolk{background:var(--yolk);color:var(--ink)}
.app-btn.yolk:hover{background:var(--yolk-2)}

/* ---- Interior del simulador ---- */
.app-head{display:flex;justify-content:space-between;align-items:flex-start;margin:6px 0 16px;gap:12px}
.app-head h4{font-family:var(--display);font-size:1.45rem;font-weight:800;letter-spacing:-.03em;line-height:1.05}
.app-head span{display:block;margin-top:3px;font-family:var(--body);font-weight:500;font-size:var(--t-micro);color:var(--ink-3);letter-spacing:0}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--straw);display:grid;place-items:center;font-weight:700;font-size:.85rem;color:var(--field);flex:none}

.card{background:#fff;border:1px solid #E4E7DE;border-radius:var(--r-app);padding:14px;margin-bottom:10px}
.card h5{font-size:var(--t-micro);font-weight:600;color:var(--ink-2);margin-bottom:8px}

.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.kpi{background:#fff;border:1px solid #E4E7DE;border-radius:var(--r-app);padding:14px}
.kpi.hero-kpi{grid-column:1/-1;background:var(--field);color:#fff;border:0}
.kpi small{display:block;font-size:.75rem;font-weight:500;color:var(--ink-3)}
.kpi.hero-kpi small{color:var(--on-field-3)}
.kpi b{display:block;font-family:var(--display);font-size:1.7rem;font-weight:800;letter-spacing:-.035em;line-height:1;margin-top:3px}
.kpi.hero-kpi b{font-size:2.6rem}
.kpi .delta{display:inline-block;margin-top:6px;font-size:.75rem;font-weight:600;color:var(--ink-3)}
.kpi.hero-kpi .delta{color:var(--on-field-3)}
.up{color:var(--ok)}
.down{color:var(--comb)}
.kpi.hero-kpi .up{color:var(--ok-2)}
.kpi.hero-kpi .down{color:#FFB3A5}

.bars{display:flex;align-items:flex-end;gap:5px;height:64px;margin-top:8px}
.bars i{flex:1;display:block;background:var(--straw);border-radius:3px 3px 0 0}
.bars i.today{background:var(--yolk)}
.bars-x{display:flex;justify-content:space-between;margin-top:6px;font-size:.64rem;color:var(--ink-3)}

.row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 0;border-top:1px solid #ECEEE5;font-size:.86rem}
.row:first-of-type{border-top:0}
.row .l{font-weight:500}
.row .l small{display:block;font-weight:400;font-size:.74rem;color:var(--ink-3)}
.row .v{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;white-space:nowrap}

.pill{font-size:.72rem;font-weight:600;padding:3px 9px;border-radius:999px;background:#E6F1E9;color:var(--ok);white-space:nowrap}
.pill.warn{background:#FBE7BE;color:var(--warn)}
.pill.bad{background:#FADFD9;color:var(--comb)}

.alert{display:flex;gap:10px;align-items:flex-start;background:#FFF7E6;border:1px solid #F1DAA4;border-radius:var(--r-app);padding:12px;font-size:.82rem;margin-bottom:10px}
.alert .dot{width:9px;height:9px;border-radius:50%;background:var(--yolk);margin-top:5px;flex:none}
.alert.bad{background:#FDF0EE;border-color:#EFC4BC}
.alert.bad .dot{background:var(--comb)}

.meter{height:8px;background:#ECEEE5;border-radius:999px;overflow:hidden;margin-top:8px}
.meter i{display:block;height:100%;background:var(--field);border-radius:999px}
.meter i.low{background:var(--comb)}

.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chip{padding:9px 13px;border-radius:999px;border:1px solid #CBD0C4;background:#fff;font-size:.82rem;font-weight:500}
.chip.on{background:var(--field);color:#fff;border-color:var(--field)}

.toast{
  position:absolute;left:16px;right:16px;bottom:88px;z-index:6;
  background:var(--ink);color:#fff;
  padding:13px 14px;border-radius:var(--r-app);
  font-size:.85rem;font-weight:500;
  transform:translateY(20px);opacity:0;pointer-events:none;
  transition:transform var(--dur-2) var(--ease),opacity var(--dur-2) var(--ease);
}
.toast.show{transform:none;opacity:1}

.tabbar{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  height:78px;display:none;grid-template-columns:repeat(5,1fr);
  padding:8px 6px 18px;
  background:rgba(255,255,255,.95);backdrop-filter:blur(8px);
  border-top:1px solid #E4E7DE;
}
.tabbar.on{display:grid}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;border-radius:var(--r-app-sm);font-size:.64rem;font-weight:600;color:#5F6A5E}
.tab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tab.on{color:var(--field)}
.tab.on svg{stroke:var(--field)}

/* ---- Pie del aparato: #resetSim vive aquí (contrato de JS) ---- */
.sim-controls{
  position:relative;z-index:2;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  width:340px;max-width:100%;
  margin-top:var(--e2);padding-top:10px;
  border-top:var(--rule);
  font-size:var(--t-micro);letter-spacing:.02em;color:var(--ink-3);
}
.sim-controls button{
  color:var(--ink-2);font-size:inherit;letter-spacing:inherit;font-weight:600;
  box-shadow:inset 0 -1px 0 0 var(--rule-strong);
  transition:box-shadow var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.sim-controls button:hover{color:var(--ink);box-shadow:inset 0 -1px 0 0 var(--ink)}
.on-field .sim-controls,.on-field-deep .sim-controls{border-top-color:var(--rule-inv);color:var(--on-field-3)}
.on-field .sim-controls button,.on-field-deep .sim-controls button{color:var(--on-field-2);box-shadow:inset 0 -1px 0 0 var(--rule-inv-strong)}

@media (max-width:1100px){.phone{width:312px;height:660px}}

/* Bajo 560px se tira el marco: un teléfono dibujado dentro de un teléfono
   real es redundante y regala 40px de ancho a un bisel de adorno. */
@media (max-width:560px){
  .stage{width:100%}
  .stage::before{display:none}
  .stage.tilt .phone{transform:none}
  .phone{
    width:100%;height:min(78vh,640px);
    padding:0;border-radius:var(--r);
    background:transparent;
    box-shadow:none;
    outline:1px solid var(--rule-color);
  }
  .phone .screen{border-radius:var(--r)}
  .notch{display:none}
  .statusbar{height:34px}
  .sim-controls{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .stage.tilt .phone{transform:none}
}


/* ==========================================================================
   11 · NAV
   Una sola altura, declarada en --nav-h y leída por scroll-padding y tour.
   ========================================================================== */
nav.site{
  position:sticky;top:0;z-index:40;
  background:rgba(246,247,241,.90);
  backdrop-filter:blur(12px) saturate(115%);
  border-bottom:1px solid var(--rule-color);
}
nav.site .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:16px}
.brand{
  display:flex;align-items:center;gap:10px;flex:none;
  font-family:var(--display);font-weight:800;font-size:1.3rem;letter-spacing:-.035em;
  text-decoration:none;
}
.brand svg{width:28px;height:28px;flex:none}
.brand img{width:40px;height:40px;flex:none;object-fit:contain}
.brand-img{display:inline-block;max-width:300px;width:100%}
.brand-img img{width:100%;height:auto;display:block}
.brand small{
  margin-left:4px;font-family:var(--body);font-weight:500;
  font-size:var(--t-micro);color:var(--ink-3);letter-spacing:0;
}
nav.site ul{display:flex;gap:28px;margin-left:auto;list-style:none;font-weight:500;font-size:.94rem}
nav.site ul a{text-decoration:none;color:var(--ink-2);white-space:nowrap;transition:color var(--dur-1) var(--ease)}
nav.site ul a:hover{color:var(--ink)}
nav.site ul a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -1px 0 var(--yolk)}
.nav-cta{display:flex;align-items:center;gap:10px;flex:none}
.nav-cta .btn{min-height:42px;padding:0 18px;font-size:.9rem}
.navtoggle{
  display:none;width:44px;height:44px;
  border:1px solid var(--rule-strong);border-radius:var(--r);
  align-items:center;justify-content:center;
}
.navtoggle svg{width:22px;height:22px;stroke:var(--ink);stroke-width:1.8;fill:none;stroke-linecap:round}

@media (max-width:900px){
  :root{--nav-h:60px}
  nav.site ul{display:none}
  .navtoggle{display:flex}
  nav.site.open ul{
    display:flex;flex-direction:column;gap:0;margin:0;
    position:absolute;top:var(--nav-h);left:0;right:0;
    padding:4px var(--margen) 18px;
    background:var(--paper);
    border-bottom:1px solid var(--rule-color);
  }
  nav.site.open ul li{border-top:1px solid var(--rule-soft)}
  nav.site.open ul a{display:block;padding:15px 0;font-size:1.05rem}
  .nav-cta .btn-ghost{display:none}
}


/* ==========================================================================
   12 · FOTO (con degradado de respaldo, la carpeta img está vacía)
   ========================================================================== */
.photo{
  position:relative;overflow:hidden;border-radius:var(--r);
  background:linear-gradient(140deg,var(--field) 0%,var(--field-2) 55%,#3C6B4E 100%);
  min-height:220px;
}
.photo img{width:100%;height:100%;object-fit:cover}
.photo figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:34px 20px 16px;
  background:linear-gradient(transparent,rgba(14,36,26,.88));
  color:var(--on-field);font-size:var(--t-nota);font-weight:500;
}


/* ==========================================================================
   13 · FAQ
   ========================================================================== */
.faq details{border-top:var(--rule);padding:20px 0}
.faq details:last-child{border-bottom:var(--rule)}
.faq summary{
  display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  font-family:var(--display);font-size:1.15rem;font-weight:600;letter-spacing:-.02em;
  cursor:pointer;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-size:1.5rem;line-height:1;font-weight:400;color:var(--ink-3);transition:transform var(--dur-2) var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:12px;color:var(--ink-2);max-width:60ch;font-size:var(--t-cuerpo)}
.on-field .faq details,.on-field-deep .faq details{border-color:var(--rule-inv)}
.on-field .faq summary::after,.on-field-deep .faq summary::after{color:var(--on-field-3)}
.on-field .faq details p,.on-field-deep .faq details p{color:var(--on-field-2)}


/* ==========================================================================
   14 · CTA FINAL
   ========================================================================== */
.cta-final{background:var(--field);color:var(--on-field);text-align:center}
.cta-final h2{font-size:clamp(2.2rem,5.6vw,4rem);letter-spacing:var(--track-h2);max-width:18ch;margin:0 auto;color:var(--on-field)}
.cta-final p{margin:var(--e3) auto 0;max-width:38ch;font-size:var(--t-bajada);color:var(--on-field-2)}
.cta-final .cta{justify-content:center;margin-top:var(--e4)}
.cta-final small{display:block;margin-top:var(--e3);font-size:var(--t-micro);color:var(--on-field-3)}


/* ==========================================================================
   15 · PIE
   ========================================================================== */
footer.site{padding:var(--e5) 0 var(--e4);font-size:var(--t-nota);color:var(--ink-3);border-top:var(--rule)}
footer.site .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px;margin-bottom:var(--e5)}
footer.site h6{
  margin-bottom:14px;font-family:var(--body);font-weight:600;
  font-size:var(--t-micro);letter-spacing:var(--track-meta);text-transform:uppercase;color:var(--ink);
}
footer.site ul{list-style:none;display:flex;flex-direction:column;gap:9px}
footer.site a{text-decoration:none;color:var(--ink-3);transition:color var(--dur-1) var(--ease)}
footer.site a:hover{color:var(--ink)}
footer.site .legal{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  padding-top:20px;border-top:var(--rule-fina);font-size:var(--t-micro);
}
@media (max-width:800px){footer.site .cols{grid-template-columns:1fr 1fr}}


/* ==========================================================================
   16 · FORMULARIOS DEL SITIO
   ========================================================================== */
.form-msg{margin-top:14px;font-size:var(--t-nota);font-weight:500;display:none}
.form-msg.show{display:block}
.form-msg.ok{color:var(--ok)}
.form-msg.err{color:var(--comb)}
.on-field .form-msg.ok,.on-field-deep .form-msg.ok{color:var(--ok-2)}
.on-field .form-msg.err,.on-field-deep .form-msg.err{color:#FFB3A5}

.inline-form{display:flex;gap:10px;flex-wrap:wrap;max-width:520px}
.inline-form input{
  flex:1;min-width:220px;padding:16px;
  border:1px solid #CBD0C4;border-radius:var(--r);
  background:var(--paper-2);font:inherit;color:var(--ink);
}
.inline-form input:focus{outline:none;border-color:var(--field)}
.on-field .inline-form input,.on-field-deep .inline-form input{
  background:rgba(255,255,255,.07);border-color:var(--rule-inv);color:var(--on-field);
}
.on-field .inline-form input::placeholder,.on-field-deep .inline-form input::placeholder{color:var(--on-field-3)}

.formulario{border-top:var(--rule-fuerte);padding-top:var(--e3)}
.formulario .field + .field{margin-top:2px}
.vias{list-style:none;display:flex;flex-direction:column}
.via{padding:16px 0;border-top:var(--rule-fina)}
.via:first-child{border-top:0}
.via b{display:block;font-family:var(--display);font-size:1.05rem;letter-spacing:-.02em}
.via span,.via a{display:block;margin-top:3px;font-size:var(--t-nota);color:var(--ink-3);text-decoration:none}
.via a:hover{color:var(--ink)}


/* ==========================================================================
   17 · MOVIMIENTO
   Un solo gesto: 14px de subida, una vez, escalonado con --i.
   Todo dentro de no-preference, más el interruptor global de la sección 02.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .r{animation:sube var(--dur-3) var(--ease) both;animation-delay:calc(var(--i,0) * 70ms)}
  @keyframes sube{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

  .reveal{
    opacity:0;transform:translateY(14px);
    transition:opacity var(--dur-4) var(--ease),transform var(--dur-4) var(--ease);
    transition-delay:calc(var(--i,0) * 70ms);
  }
  .reveal.visible{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .r,.reveal{opacity:1;transform:none}
}


/* ==========================================================================
   18 · PORTADA / HERO
   ========================================================================== */
.hero{position:relative;overflow:hidden;background:var(--paper);padding:0 0 clamp(56px,8vw,var(--e6))}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}
.hero-texto{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(40px,6vw,104px) clamp(20px,3vw,48px) clamp(40px,6vw,104px) 0;
  border-right:var(--rule);
}
.hero-aparato{
  display:flex;flex-direction:column;align-items:center;
  padding:clamp(32px,4vw,64px) 0 clamp(20px,3vw,36px) clamp(20px,3vw,48px);
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  /* Compresión vertical: el teléfono asoma antes. */
  .hero-texto{border-right:0;border-bottom:var(--rule);padding:var(--e4) 0 var(--e3)}
  .hero-aparato{padding:var(--e3) 0 0;width:100%}
}
@media (max-width:560px){
  .hero-texto{padding:var(--e3) 0 var(--e3)}
}


/* ==========================================================================
   19 · RECORRIDO (tour.html)
   ========================================================================== */
.portada{padding:clamp(40px,6vw,72px) 0 var(--e4)}
.reloj{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 14px;border:var(--rule);border-radius:var(--r);
  font-size:var(--t-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
}
.reloj i{width:7px;height:7px;border-radius:50%;background:var(--yolk);display:block}
@media (prefers-reduced-motion:no-preference){
  .reloj i{animation:latido 2.4s var(--ease) infinite}
  @keyframes latido{0%,100%{opacity:1}50%{opacity:.3}}
}

.tour{padding:var(--e3) 0 var(--e6)}
.tour .wrap{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(32px,5vw,72px);align-items:start}
.tour-sim{position:sticky;top:calc(var(--nav-h) + 16px);display:flex;flex-direction:column;align-items:center}
.marcador{margin-top:12px;font-size:var(--t-micro);color:var(--ink-3);text-align:center;min-height:20px}
.marcador b{color:var(--field);font-weight:600}

.escenas{display:flex;flex-direction:column}
.escena{
  min-height:72vh;display:flex;flex-direction:column;justify-content:center;
  padding:var(--e4) 0;opacity:.32;
  transition:opacity var(--dur-3) var(--ease);
}
.escena.activa{opacity:1}
.escena .hora{
  display:inline-flex;align-items:baseline;gap:12px;
  font-family:var(--display);font-weight:800;font-size:2.4rem;letter-spacing:-.045em;line-height:1;color:var(--field);
}
.escena .hora span{
  font-family:var(--body);font-weight:600;font-size:var(--t-micro);
  letter-spacing:var(--track-meta);text-transform:uppercase;color:var(--ink-3);
}
.escena h2{margin:var(--e2) 0 12px;font-size:clamp(1.7rem,3.4vw,2.5rem);letter-spacing:-.03em;max-width:18ch}
.escena p{font-size:var(--t-bajada);color:var(--ink-2);max-width:38ch}
.escena .detalle{
  margin-top:var(--e3);
  border-left:1px solid var(--rule-strong);padding-left:18px;
  font-size:var(--t-cuerpo);color:var(--ink-2);max-width:38ch;
}
.escena .detalle b{color:var(--ink)}
.escena .dato{display:block;margin-top:var(--e3);border-top:var(--rule);padding-top:var(--e2);max-width:38ch}
.escena .dato b{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(2rem,4vw,2.8rem);letter-spacing:-.045em;line-height:1;color:var(--field);
}
.escena .dato span{display:block;margin-top:6px;font-size:var(--t-nota);color:var(--ink-3)}

@media (max-width:980px){
  .tour .wrap{grid-template-columns:1fr;gap:0}
  .tour-sim{
    position:sticky;top:var(--nav-h);z-index:6;
    height:430px;overflow:hidden;
    padding-top:10px;margin-bottom:6px;
    background:linear-gradient(var(--paper) 80%,transparent);
  }
  .tour-sim .stage{transform:scale(.62);transform-origin:top center}
  .marcador{position:relative;margin-top:-180px}
  .escena{min-height:auto;padding:var(--e4) 0;opacity:1;border-top:var(--rule-fina)}
  .escena .hora{font-size:1.9rem}
}

/* ---- Inventario de funciones ---- */
.adentro .bloque{
  display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(24px,4vw,56px);
  padding:var(--e4) 0;border-top:var(--rule);align-items:start;
}
.adentro .bloque:first-of-type{border-top:0}
.adentro .bloque h3{font-size:clamp(1.4rem,2.4vw,1.9rem);letter-spacing:-.03em;position:sticky;top:calc(var(--nav-h) + 24px)}
@media (max-width:860px){
  .adentro .bloque{grid-template-columns:1fr;gap:var(--e3)}
  .adentro .bloque h3{position:static}
}

/* ---- Hitos y roles ---- */
.hito{display:flex;gap:16px;padding:14px 0;border-top:var(--rule-fina);font-size:var(--t-cuerpo)}
.hito:first-child{border-top:0}
.hito b{flex:none;width:5.5ch;font-family:var(--display);font-weight:800;color:var(--field);letter-spacing:-.02em}
.roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.rol{padding:var(--e3) clamp(16px,2.4vw,28px);border-left:var(--rule)}
.rol:first-child{border-left:0;padding-left:0}
.rol b{display:block;font-family:var(--display);font-size:1.1rem;letter-spacing:-.02em;margin-bottom:6px}
.rol span{font-size:var(--t-nota);color:var(--ink-3)}
.on-field .rol,.on-field-deep .rol{border-left-color:var(--rule-inv)}
.on-field .rol span,.on-field-deep .rol span{color:var(--on-field-3)}
@media (max-width:760px){
  .roles{grid-template-columns:1fr}
  .rol{border-left:0;padding-left:0;border-top:var(--rule-fina)}
  .rol:first-child{border-top:0}
}


/* ==========================================================================
   20 · PRECIOS (precios.html)
   ========================================================================== */
.cabecera{padding:clamp(40px,6vw,72px) 0 var(--e3)}

/* ---- Interruptor mensual / anual ---- */
.periodo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:var(--e4) 0 0}
.switch{display:inline-flex;border:var(--rule);border-radius:var(--r);padding:0;overflow:hidden}
.switch button{padding:12px 22px;font-weight:600;font-size:.92rem;color:var(--ink-3);border-right:var(--rule)}
.switch button:last-child{border-right:0}
.switch button.on{background:var(--field);color:var(--paper)}
.ahorro{font-size:var(--t-micro);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--yolk);padding-bottom:2px}

/* ---- Rejilla de planes: filetes, no tarjetas ---- */
.planes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:var(--e4);align-items:stretch;border-top:var(--rule-fuerte)}
.plan{
  position:relative;display:flex;flex-direction:column;
  padding:var(--e4) clamp(16px,2vw,26px);
  border-left:var(--rule);
}
.plan:first-child{border-left:0;padding-left:0}
.plan.destacado{background:var(--straw-2)}
.plan.gratis{background:var(--field);color:var(--on-field);border-left:0}
.plan .etiqueta{
  position:absolute;top:12px;right:clamp(16px,2vw,26px);
  font-size:var(--t-micro);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);border-bottom:2px solid var(--yolk);padding-bottom:2px;
}
.plan.gratis .etiqueta{color:var(--on-field)}
.plan h2,.plan h3{font-size:1.25rem;letter-spacing:-.025em;font-weight:700}
.plan .gancho{margin-top:6px;font-size:var(--t-nota);color:var(--ink-3);min-height:42px}
.plan.gratis .gancho{color:var(--on-field-3)}
.precio{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.2rem,3.6vw,2.9rem);letter-spacing:-.05em;line-height:1;
  margin:var(--e3) 0 4px;
}
.precio.chico{font-size:1.7rem}
.unidad{display:block;margin-bottom:var(--e2);min-height:34px;font-size:var(--t-micro);color:var(--ink-3);font-weight:500}
.plan.gratis .unidad{color:var(--on-field-3)}
.plan ul{list-style:none;flex:1;margin:var(--e2) 0 var(--e3);font-size:var(--t-nota);color:var(--ink-2)}
.plan.gratis ul{color:var(--on-field-2)}
.plan li{position:relative;padding:7px 0 7px 22px}
.plan li::before{
  content:"";position:absolute;left:1px;top:1.05em;
  width:9px;height:6px;border-left:2px solid var(--field);border-bottom:2px solid var(--field);
  transform:rotate(-45deg);
}
.plan.gratis li::before{border-color:var(--yolk)}
.plan li.gris{color:var(--ink-3)}
.plan li.gris::before{border-color:var(--ink-4)}
@media (max-width:1040px){
  .planes{grid-template-columns:1fr 1fr}
  .plan:nth-child(2n+1){border-left:0;padding-left:0}
  .plan{border-top:var(--rule)}
  .plan:nth-child(-n+2){border-top:0}
}
@media (max-width:640px){
  .planes{grid-template-columns:1fr}
  .plan{border-left:0;padding-left:0;border-top:var(--rule)}
  .plan:first-child{border-top:0}
  .plan.gratis,.plan.destacado{padding-left:clamp(16px,4vw,22px);padding-right:clamp(16px,4vw,22px)}
}

/* ---- Contador de casetas ---- */
.contador{border:var(--rule);border-radius:var(--r);padding:14px;margin-bottom:14px}
.contador label{display:block;margin-bottom:10px;font-size:var(--t-micro);font-weight:600;color:var(--ink-2)}
.contador .mandos{display:flex;align-items:center;gap:10px}
.contador button{
  width:40px;height:40px;flex:none;display:grid;place-items:center;
  border:var(--rule);border-radius:var(--r);background:var(--paper-2);
  font-size:1.2rem;font-weight:700;line-height:1;color:var(--field);
}
.contador button:hover{border-color:var(--field)}
.contador button[disabled]{opacity:.35;cursor:not-allowed}
.contador output{flex:1;text-align:center;font-family:var(--display);font-size:1.5rem;font-weight:800;letter-spacing:-.03em}
.contador .total{margin-top:10px;text-align:center;font-size:var(--t-micro);color:var(--ink-3)}
.contador .total b{color:var(--ink)}
.sugerencia{display:none;margin-bottom:14px;padding:12px 0;border-top:1px solid var(--yolk);font-size:var(--t-micro);color:var(--ink-2)}
.sugerencia.ver{display:block}
.sugerencia b{display:block;margin-bottom:2px;color:var(--ink)}

/* ---- Aviso de configuración pendiente ---- */
.aviso{
  max-width:760px;margin:var(--e4) auto 0;
  padding:14px 18px;border:1px solid #EFC4BC;border-radius:var(--r);
  background:#FDF0EE;color:var(--comb);
  font-size:var(--t-nota);font-weight:500;text-align:center;
}

/* ---- Correo previo al pago ---- */
.correo-pago{max-width:520px;margin:var(--e4) auto 0;text-align:center}
.correo-pago label{display:block;margin-bottom:10px;font-size:var(--t-nota);color:var(--ink-3)}
.correo-pago input{
  width:100%;padding:16px;text-align:center;
  border:1px solid #CBD0C4;border-radius:var(--r);background:var(--paper-2);font:inherit;
}
.correo-pago input:focus{outline:none;border-color:var(--field)}

/* ---- Alta gratuita ---- */
.gratis-caja{max-width:620px;margin:0 auto;border-top:var(--rule-fuerte);padding-top:var(--e3)}
.gratis-caja h2{font-size:clamp(1.7rem,3.2vw,2.2rem);letter-spacing:-.03em;margin-bottom:8px}
.gratis-caja > p{color:var(--ink-2);margin-bottom:var(--e3);max-width:40ch}
.gratis-nota{margin-top:14px;font-size:var(--t-micro);color:var(--ink-3);text-align:center}

/* ---- Calculadora ---- */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,56px);margin-top:var(--e4);align-items:start}
.calc-entradas{border:1px solid var(--rule-inv);border-radius:var(--r);padding:clamp(20px,3vw,28px)}
.calc-salida{background:var(--paper);color:var(--ink);border-radius:var(--r);padding:clamp(20px,3vw,28px)}
.calc-salida h3{font-size:1.2rem;letter-spacing:-.025em;margin-bottom:4px}
.calc-salida .sub{margin-bottom:var(--e3);font-size:var(--t-micro);color:var(--ink-3)}
.linea{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:13px 0;border-top:var(--rule-fina);font-size:var(--t-nota)}
.linea:first-of-type{border-top:0}
.linea .n{font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:-.03em;white-space:nowrap}
.linea.suma{margin-top:6px;padding-top:16px;border-top:1px solid var(--ink)}
.linea.suma .n{font-size:1.7rem;color:var(--field)}
.veredicto{margin-top:var(--e3);padding-top:var(--e2);border-top:1px solid var(--yolk);font-size:var(--t-nota)}
.veredicto b{display:block;margin-bottom:4px;font-family:var(--display);font-size:1.25rem;letter-spacing:-.03em}
.calc-pie{margin-top:var(--e2);font-size:var(--t-micro);line-height:1.5;color:var(--ink-3)}
@media (max-width:900px){.calc{grid-template-columns:1fr;gap:var(--e3)}}

/* ---- Tabla comparativa ---- */
.tabla{overflow-x:auto;margin-top:var(--e4);border-top:var(--rule-fuerte)}
.tabla table{width:100%;min-width:720px;font-size:var(--t-nota)}
.tabla th,.tabla td{padding:14px 16px;text-align:left;border-bottom:var(--rule-fina)}
.tabla thead th{font-family:var(--display);font-size:.95rem;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.tabla td:first-child,.tabla th:first-child{width:30%;padding-left:0;font-weight:500}
.tabla tbody tr:last-child td{border-bottom:0}
.tabla .grupo td{font-family:var(--display);font-weight:700;font-size:var(--t-micro);letter-spacing:var(--track-meta);text-transform:uppercase;color:var(--ink-3);border-bottom:var(--rule);padding-top:26px}
.tabla .si{color:var(--ok);font-weight:600}
.tabla .no{color:var(--ink-4)}


/* ==========================================================================
   21 · CONTACTO Y GRACIAS
   ========================================================================== */
.contacto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:860px){.contacto{grid-template-columns:1fr}}
.promesa{margin-top:var(--e3);padding-top:var(--e2);border-top:var(--rule-fina);font-size:var(--t-micro);color:var(--ink-3);max-width:36ch}

.confirma{padding:clamp(64px,10vw,140px) 0}
.marca-ok{width:56px;height:56px;display:grid;place-items:center;border:1px solid var(--yolk);border-radius:50%;margin-bottom:var(--e3)}
.marca-ok svg{width:26px;height:26px;stroke:var(--field);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.acciones{display:flex;flex-wrap:wrap;gap:clamp(14px,2.4vw,28px);margin-top:var(--e4)}
.refnota{margin-top:var(--e4);padding-top:var(--e2);border-top:var(--rule-fina);font-size:var(--t-micro);color:var(--ink-3)}