/* ═══════════════════════════════════════════════════════════════════════════
   TERRA-MAS · LANDING v1
   ---------------------------------------------------------------------------
   TODA la identidad visual vive en este bloque de tokens.
   Cuando llegue el manual de marca de Studio 3C se reemplazan estos valores
   y la página entera cambia de aspecto sin tocar una línea de contenido.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* ---- PALETA — el tono del pitch deck ---------------------------------
     La página es azul noche como las diapositivas, no clara. Los fondos están
     muestreados de los propios slides: #000E21 el fondo general, #122F4E los
     paneles. Los acentos son los colores de los logotipos en su versión sobre
     oscuro, y cada uno tiene un trabajo fijo:

        ORO    rótulos, cifras de titular, precios y el botón principal
        AZUL   estructura, íconos, enlaces, foco
        VERDE  SÓLO un resultado medido que mejora — nunca decoración
        ÓXIDO  lo que se pierde, y lo que es de TERRA M.A.S. y no de MaiSAP

     El verde reservado no es capricho: en la revisión de branding del 25/08 la
     advertencia fue "verde se pierde", porque es lo que usa todo el rubro.
     Usado sólo donde significa algo, deja de perderse.                     */
  --tm-ink:        #F2F7FC;   /* texto principal */
  --tm-ink-soft:   rgba(228,238,247,.76);
  --tm-ink-faint:  rgba(228,238,247,.55);
  --tm-bg:         #030F1F;   /* fondo general — el azul casi negro del deck */
  --tm-surface:    #0B2137;   /* tarjetas */
  --tm-surface-2:  #071829;   /* bandas alternas */
  --tm-panel:      #122F4E;   /* paneles destacados — el de la diapositiva 5 */
  --tm-line:       rgba(255,255,255,.13);
  --tm-line-2:     rgba(255,255,255,.07);

  --tm-primary:    #3F8BDC;   /* azul de marca sobre oscuro */
  --tm-primary-d:  #66A6E8;
  --tm-primary-sf: rgba(63,139,220,.15);

  --tm-water:      #4FA3E0;
  --tm-water-sf:   rgba(79,163,224,.14);

  --tm-maiz:       #DEB743;   /* oro de MaiSAP */
  --tm-maiz-sf:    rgba(222,183,67,.13);
  --tm-verde:      #39DC52;   /* verde — sólo resultados */
  --tm-verde-sf:   rgba(57,220,82,.12);
  --tm-terra:      #E27249;   /* óxido de TERRA M.A.S., aclarado para fondo oscuro */
  --tm-terra-sf:   rgba(226,114,73,.13);

  --tm-navy:       #0B2038;
  --tm-navy-2:     #123457;

  /* Alias que quedaron de la versión clara. Ya no hace falta distinguir
     "sobre oscuro": toda la página lo es. */
  --tm-maiz-cl:    var(--tm-maiz);
  --tm-azul-cl:    var(--tm-primary);
  --tm-terra-cl:   var(--tm-terra);
  --tm-verde-cl:   var(--tm-verde);

  /* ---- TIPOGRAFÍA ----------------------------------------------------
     Las dos familias son de Omnibus-Type, fundición de Buenos Aires: el
     conjunto tiene raíz regional y no aire de software.
     display : titulares (Poppins) — geométrica de caja baja, la misma
               familia de formas que los logotipos maisap y terramas
     text    : lectura corrida y etiquetas (Asap, humanista y cálida)
     data    : sólo las CIFRAS — se distinguen por peso y cifras tabulares,
               no por una monoespaciada, que suena a editor de código.      */
  --tm-font-display: "Poppins", "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  --tm-font-text:    "Asap", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tm-font-data:    "Poppins", "Century Gothic", "Helvetica Neue", Arial, sans-serif;

  /* ---- FORMA Y RITMO ---- */
  --tm-avatar:    88px;   /* retrato del equipo — ya con las fotos profesionales */
  --tm-radius:    10px;
  --tm-radius-lg: 16px;
  --tm-maxw:      1200px;
  --tm-section:   clamp(64px, 9vw, 116px);
  --tm-shadow:    0 1px 2px rgba(0,0,0,.30), 0 12px 34px rgba(0,0,0,.34);

  /* Perfil de suelo: la franja que separa secciones son tres horizontes. */
  --tm-strata: linear-gradient(90deg,
      #9F2F0A 0, #9F2F0A 33.33%, #1A5694 33.33%, #1A5694 66.66%, #0B6B1B 66.66%);
}

/* ─────────────────────────── BASE ─────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:80px}
body{
  margin:0; background:var(--tm-bg); color:var(--tm-ink);
  font-family:var(--tm-font-text); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
body::before{content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(72% 46% at 12% 2%, rgba(63,139,220,.11), transparent 62%),
    radial-gradient(58% 40% at 100% 46%, rgba(222,183,67,.05), transparent 66%);}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2{font-family:var(--tm-font-display); font-weight:800; line-height:1.06; letter-spacing:-.028em; margin:0; text-wrap:balance}
h1{font-size:clamp(2.25rem, 5vw, 3.7rem)}
h2{font-size:clamp(1.8rem, 3.4vw, 2.5rem)}
h3{font-size:1.1rem; font-family:var(--tm-font-text); font-weight:700; letter-spacing:-.01em; line-height:1.3; margin:0; text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--tm-maxw); margin:0 auto; padding:0 24px}
section{padding:var(--tm-section) 0}
/* evita que un hijo ancho (p. ej. la tabla) estire su columna de grilla */
.hero-grid>*,.prod>*,.proof>*,.grid-2>*,.grid-3>*,.contact>*,.steps>*,.team>*,.kpis>*,.news-item>*{min-width:0}

/* Franja de horizontes de suelo entre secciones */
.alt{background:var(--tm-surface-2); border-bottom:1px solid var(--tm-line); position:relative}
.alt::before{content:""; position:absolute; inset:0 0 auto; height:3px; background:var(--tm-strata)}

.eyebrow{
  font-family:var(--tm-font-text);
  font-size:.76rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--tm-maiz); margin-bottom:18px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:22px; height:2px; background:currentColor; flex:0 0 22px}
:focus-visible{outline:2.5px solid var(--tm-water); outline-offset:3px; border-radius:4px}
/* Esta cifra es una PÉRDIDA: va en óxido, no en el color de los logros.
   Es el mismo criterio de la diapositiva 3, donde el 600 está en rojo. */
.cifra{margin:22px 0 0; font-size:1.06rem; color:var(--tm-ink-soft); max-width:62ch;
  padding-left:18px; border-left:3px solid var(--tm-terra)}
.cifra b{font-family:var(--tm-font-data); font-size:1.5rem; font-weight:800; color:var(--tm-terra);
  letter-spacing:-.03em; display:block; margin-bottom:4px}
.cifra span{display:block; margin-top:7px; font-size:.8rem; color:var(--tm-ink-faint)}
.lead{font-size:1.12rem; color:var(--tm-ink-soft); max-width:62ch}

/* ─────────── JUSTIFICADO ───────────
   Se justifica el texto corrido ANCHO: los párrafos de entrada, las novedades,
   la nota de fuentes y el pie legal. Todos pasan de 60 caracteres por línea,
   que es donde el justificado se ve parejo.

   NO se justifican las tarjetas de tres columnas ni los pasos: ahí la columna
   mide ~285 px (unos 38 caracteres) y, medido sobre esta misma página, el
   hueco entre palabras se va a 12 px de promedio contra 3,8 px de un espacio
   normal — más de tres espacios por hueco, o sea ríos blancos visibles.
   Tampoco se justifican títulos ni pies de foto: justificar dos o tres
   palabras deja huecos, no una línea pareja.

   `hyphens:auto` mejora el resultado en los navegadores que traen diccionario
   de partición, y usa el idioma activo porque el selector actualiza el `lang`
   del documento. Verificado: NO todos lo aplican, así que el justificado tiene
   que verse bien igual sin él — por eso quedan afuera las columnas angostas.

   SI SE QUIERE JUSTIFICAR TODO: agregar .card p, .step p, .member p
   a la lista de abajo. Se verá más parejo de lejos y más flojo de cerca. */
.lead,
.news-item p,
.fuente,
.f-legal p{
  text-align:justify;
  text-wrap:pretty;
  hyphens:auto;
  -webkit-hyphens:auto;
  overflow-wrap:break-word;
}
/* en pantalla angosta ni siquiera estos aguantan: vuelven a bandera */
@media(max-width:620px){
  .lead,.news-item p,.fuente,.f-legal p{text-align:left}
}
.fuente{margin-top:14px; font-size:.84rem; color:var(--tm-ink-faint); line-height:1.6}
.head{max-width:70ch; margin-bottom:clamp(36px,5vw,56px)}
.head p{margin-top:18px}

/* ─────────────────────────── BOTONES ─────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:9px; padding:14px 24px;
  border-radius:999px; font-weight:700; font-size:.96rem; text-decoration:none;
  border:1.5px solid transparent; cursor:pointer; transition:.18s ease;
  font-family:var(--tm-font-text);
}
.btn-primary{background:var(--tm-maiz); color:#08192B; border-color:var(--tm-maiz)}
.btn-primary:hover{background:#EBC85F; transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(222,183,67,.24)}
.btn-ghost{background:transparent; color:var(--tm-ink); border-color:var(--tm-line)}
.btn-ghost:hover{border-color:var(--tm-ink); background:rgba(255,255,255,.07)}
.btn-light{background:#fff; color:#0A1D31}
.btn-light:hover{transform:translateY(-1px)}
.btn-outline-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.4)}
.btn-outline-light:hover{border-color:#fff; background:rgba(255,255,255,.08)}

/* ─────────── SELECTOR DE IDIOMA ───────────
   Franja fina arriba de todo, alineada a la izquierda. No es sticky:
   se va con el scroll para no competir con la navegación. */
.langbar{background:var(--tm-surface-2); border-bottom:1px solid var(--tm-line)}
.langbar .wrap{display:flex}
.langs{display:flex; gap:2px; padding:5px 0}
.langs button{
  font-family:var(--tm-font-text); font-size:.7rem; font-weight:700; letter-spacing:.09em;
  background:none; border:0; cursor:pointer; padding:4px 9px; border-radius:6px;
  color:var(--tm-ink-faint); transition:.15s;
}
.langs button:hover{color:var(--tm-ink); background:rgba(255,255,255,.08)}
.langs button[aria-current="true"]{color:var(--tm-maiz); background:var(--tm-maiz-sf)}

/* ─────────────────────────── HEADER ─────────────────────────── */
header{
  position:sticky; top:0; z-index:60;
  background:rgba(3,15,31,.82);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--tm-line);
}
.nav{display:flex; align-items:center; gap:22px; height:70px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto; flex:0 0 auto}
/* El isotipo es más alto que ancho: manda el alto, el ancho se acomoda. */
.brand-mark{height:34px; width:auto; flex:0 0 auto}
.brand-word{height:20px; width:auto; display:block}
.brand-txt{display:flex; flex-direction:column; line-height:1.05}
.brand-name{font-family:var(--tm-font-display); font-weight:800; font-size:1.18rem; letter-spacing:-.03em; white-space:nowrap}
/* Sin text-transform: la grafía exacta del producto es MaiSAP y el CSS no
   debe convertirla en MAISAP. */
.brand-sub{font-family:var(--tm-font-text); font-size:.7rem; letter-spacing:.1em; color:var(--tm-ink-faint); font-weight:600}
.nav a.lnk{text-decoration:none; font-size:.88rem; font-weight:600; color:var(--tm-ink-soft); transition:.15s; white-space:nowrap}
.nav a.lnk:hover{color:var(--tm-primary)}
/* La página en la que estás parado, marcada en oro y subrayada: en un sitio
   de siete páginas, saber dónde estás importa más que en una sola. */
.nav a.lnk[aria-current="page"]{color:var(--tm-maiz); position:relative}
.nav a.lnk[aria-current="page"]::after{content:""; position:absolute; left:0; right:0; bottom:-6px;
  height:2px; background:var(--tm-maiz); border-radius:2px}
@media(max-width:900px){ .nav a.lnk[aria-current="page"]::after{display:none} }
.nav-links{display:flex; gap:19px; align-items:center}
.burger{display:none; background:none; border:1.5px solid var(--tm-line); border-radius:10px; width:42px; height:38px; align-items:center; justify-content:center; cursor:pointer}
.burger span{display:block; width:18px; height:2px; background:var(--tm-ink); position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:18px; height:2px; background:var(--tm-ink)}
.burger span::before{top:-6px} .burger span::after{top:6px}
@media(max-width:900px){
  .nav-links{
    display:none; position:absolute; top:70px; left:0; right:0; flex-direction:column;
    align-items:stretch; gap:0; background:var(--tm-bg); border-bottom:1px solid var(--tm-line); padding:10px 24px 20px;
  }
  .nav-links.open{display:flex}
  .nav-links a.lnk{padding:12px 0; border-bottom:1px solid var(--tm-line)}
  .nav-links .btn{margin-top:14px; justify-content:center}
  .burger{display:flex}
}

/* ─────────────────────────── HERO ─────────────────────────── */

/* ─────────── HERO A SANGRE ───────────
   Foto de campo de fondo, degradado encima para que el texto se lea, y el
   packshot del producto flotando. El degradado va de casi opaco donde está
   el texto a casi transparente del lado de la foto. */
.hero{position:relative; isolation:isolate; color:#fff;
  padding:clamp(56px,7vw,96px) 0 clamp(56px,7vw,92px); overflow:hidden;
  display:flex; align-items:center}
/* En pantalla grande el hero ocupa casi todo el alto: se lee como la primera
   diapositiva, no como el principio de un documento largo. */
@media(min-width:900px){ .hero{min-height:min(86vh,780px)} }
.hero>.wrap{width:100%}
/* Azul noche de marca. La foto de tierra seca queda abajo de todo, apenas
   visible: da textura sin discutirle el color al azul. */
.hero-bg{position:absolute; inset:0; z-index:-1;
  background:linear-gradient(168deg, #0A2440 0%, #061A2F 42%, #030F1F 100%)}
/* Resplandor azul detrás de la foto, como el de las diapositivas. */
.hero::before{content:""; position:absolute; z-index:-1; inset:-15% -10% -25% 20%;
  background:radial-gradient(58% 52% at 62% 42%, rgba(63,139,220,.26), rgba(63,139,220,0) 70%);
  pointer-events:none}
.hero .eyebrow{color:var(--tm-maiz-cl)}
.hero h1 em{color:var(--tm-maiz-cl)}
/* El logotipo manda el tamaño del bloque: el eslogan va debajo, como en la tapa. */
.hero-logo{width:min(430px,78%); height:auto; display:block; margin:0 0 22px}
.hero h1{font-size:clamp(1.9rem,3.9vw,2.9rem); letter-spacing:-.02em; color:#fff}
.hero .lead{color:rgba(255,255,255,.80)}
.hero .hero-note{color:rgba(255,255,255,.58)}
.hero .btn-ghost{color:#fff; border-color:rgba(255,255,255,.42)}
.hero .btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.10)}
.hero .chips li{background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.22); color:rgba(255,255,255,.88)}
.hero .chips li::before{background:var(--tm-maiz-cl)}
.hero .hero-art img{border:1px solid rgba(255,255,255,.10); box-shadow:0 26px 70px rgba(0,0,0,.5)}
.kpis-banda{padding:clamp(36px,5vw,52px) 0 0}
.kpis-banda .kpis{margin-top:0}

.hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(32px,5vw,64px); align-items:center}
.hero h1 em{font-style:normal; color:var(--tm-maiz-cl)}
.hero .lead{margin-top:22px; font-size:1.18rem}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.hero-note{margin-top:20px; font-size:.86rem; color:var(--tm-ink-faint)}
.hero-art{margin:0}
.hero-art img{width:100%; border-radius:var(--tm-radius-lg); border:1px solid var(--tm-line)}
.hero-art figcaption{margin-top:11px; font-size:.83rem; color:var(--tm-ink-faint); line-height:1.5}
/* El orden de lectura es el mismo en celular y en laptop: primero el titular,
   después la imagen. Antes la imagen subía arriba de todo en celular y eso
   hacía que las dos versiones no se leyeran igual — y con la pieza de marca
   en el hero quedaban además dos logos apilados.
   Para volver a la imagen primero en celular: agregar .hero-art{order:-1} */
@media(max-width:880px){ .hero-grid{grid-template-columns:1fr} }

/* ─────────────────────────── KPIs ─────────────────────────── */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--tm-line);
  border:1px solid var(--tm-line); border-radius:var(--tm-radius-lg); overflow:hidden; margin-top:clamp(44px,6vw,72px)}
.kpi{background:var(--tm-surface); padding:26px 22px}
/* Los KPIs se componen en mono: son mediciones con fuente, no titulares. */
.kpi b{display:block; font-family:var(--tm-font-data); font-size:clamp(1.85rem,3.2vw,2.35rem); font-weight:800; line-height:1; letter-spacing:-.035em; color:var(--tm-maiz); font-variant-numeric:tabular-nums}
.kpi .k-lbl{display:block; margin-top:11px; font-weight:600; font-size:.92rem}
.kpi .k-src{display:block; margin-top:6px; font-size:.78rem; color:var(--tm-ink-faint); line-height:1.45}
@media(max-width:860px){ .kpis{grid-template-columns:repeat(2,1fr)} }
@media(max-width:460px){ .kpis{grid-template-columns:1fr} }

/* ─────────────────────────── GRILLAS / TARJETAS ─────────────────────────── */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
@media(max-width:880px){ .grid-3,.grid-2{grid-template-columns:1fr} }

.card{background:var(--tm-surface); border:1px solid var(--tm-line); border-radius:var(--tm-radius-lg); padding:30px; box-shadow:var(--tm-shadow)}
.card h3{margin-bottom:10px}
.card p{color:var(--tm-ink-soft); font-size:.98rem}
.ico{width:44px; height:44px; border-radius:12px; background:var(--tm-primary-sf); color:var(--tm-primary);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px}
.ico svg{width:22px; height:22px}
.ico.w{background:var(--tm-water-sf); color:var(--tm-water)}

/* Regla: sólo se numera lo que realmente es una secuencia (§ cómo funciona). */
.step .st-n{font-family:var(--tm-font-text); font-size:.78rem; font-weight:700; color:var(--tm-maiz);
  letter-spacing:.11em; text-transform:uppercase; margin-bottom:14px; display:flex; align-items:center; gap:9px}
.step .st-n::after{content:""; height:1px; flex:1; background:var(--tm-line)}

/* ─────────────────────────── PRODUCTO ─────────────────────────── */
.prod{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,54px); align-items:center}
@media(max-width:880px){ .prod{grid-template-columns:1fr} }
.spec{list-style:none; padding:0; margin:26px 0 0; display:grid; gap:1px; background:var(--tm-line); border:1px solid var(--tm-line); border-radius:var(--tm-radius); overflow:hidden}
.spec li{background:var(--tm-surface); display:flex; justify-content:space-between; gap:16px; padding:13px 18px; font-size:.94rem}
.spec li span:first-child{color:var(--tm-ink-soft)}
.spec li span:last-child{font-weight:700; text-align:right}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:clamp(36px,5vw,52px)}
@media(max-width:760px){ .steps{grid-template-columns:1fr} }
.step{background:var(--tm-surface); border:1px solid var(--tm-line); border-radius:var(--tm-radius-lg); padding:26px}
.step h3{margin-bottom:8px}
.step p{color:var(--tm-ink-soft); font-size:.96rem}

/* ─────────────────────────── EVIDENCIA ─────────────────────────── */
.proof{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,48px); align-items:start}
@media(max-width:900px){ .proof{grid-template-columns:1fr} }
figure{margin:0}
figure img{border-radius:var(--tm-radius); border:1px solid var(--tm-line); width:100%}
figcaption{margin-top:10px; font-size:.82rem; color:var(--tm-ink-faint); line-height:1.5}
/* Las tres fotos de evidencia, en fila y recortadas a la misma proporción
   para que la fila cierre pareja sin dejar huecos debajo. */
.galeria{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:clamp(32px,4vw,44px)}
/* La proporción es la exacta de la comparativa de bandejas: así esa foto
   no se recorta ni un píxel y no se come la etiqueta TESTIGO, que está
   pegada al borde. Las otras dos se recortan al centro, que no molesta. */
.galeria img{aspect-ratio:1124/666; object-fit:cover; width:100%}
@media(max-width:880px){ .galeria{grid-template-columns:1fr} .galeria img{aspect-ratio:auto} }
/* ── Chips de credibilidad del hero ── */
.chips{display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:26px 0 0}
.chips li{font-size:.75rem; font-weight:600; color:var(--tm-ink-soft); background:var(--tm-surface);
  border:1px solid var(--tm-line); border-radius:999px; padding:6px 12px; display:flex; align-items:center; gap:6px}
.chips li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--tm-primary); flex:0 0 6px}

/* ── Barras de rendimiento ── */
.barras{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-bottom:30px}
.barras>*{min-width:0}
@media(max-width:760px){ .barras{grid-template-columns:1fr} }
.barra-tit{font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tm-ink-faint); margin-bottom:14px}
.barra{display:grid; grid-template-columns:96px 1fr auto; align-items:center; gap:12px; margin-bottom:10px}
.b-lbl{font-size:.84rem; color:var(--tm-ink-soft)}
.b-riel{height:26px; background:rgba(255,255,255,.06); border-radius:6px; overflow:hidden}
.b-riel i{display:block; height:100%; width:0; border-radius:6px; background:rgba(255,255,255,.20);
  transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.b-riel i.b-on{background:var(--tm-verde)}
.rv.in .b-riel i{width:var(--w)}
.barra b{font-family:var(--tm-font-data); font-weight:700; font-size:.92rem; font-variant-numeric:tabular-nums}

/* ── Calculadora ── */
.calc{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start}
.calc>*{min-width:0}
@media(max-width:880px){ .calc{grid-template-columns:1fr} }
.calc-in{margin:0}
.calc-nota{margin-top:4px; font-size:.8rem; color:var(--tm-ink-faint)}
.calc-out{background:var(--tm-panel); border:1px solid rgba(255,255,255,.10);
  border-radius:var(--tm-radius-lg); padding:30px}
.calc-fila{display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:14px 0; border-bottom:1px solid rgba(255,255,255,.14)}
.calc-fila span{font-size:.92rem; color:rgba(255,255,255,.72)}
.calc-fila b{font-family:var(--tm-font-data); font-size:1.15rem; font-weight:700; white-space:nowrap;
  font-variant-numeric:tabular-nums}
.calc-fila.destacado b{color:var(--tm-maiz); font-size:1.35rem}
.calc-out .btn{width:100%; justify-content:center; margin-top:22px}
.calc-legal{margin-top:18px; font-size:.78rem; line-height:1.6; color:rgba(255,255,255,.62); text-align:justify; hyphens:auto}

.lista{list-style:none; padding:0; margin:14px 0 0; display:grid; gap:11px}
.lista li{position:relative; padding-left:20px; font-size:.92rem; color:var(--tm-ink-soft);
  text-align:justify; hyphens:auto; -webkit-hyphens:auto}
.lista li::before{content:""; position:absolute; left:0; top:.55em; width:7px; height:7px;
  border-radius:50%; background:var(--tm-primary-sf); border:2px solid var(--tm-primary)}
.calc-fila span em{font-style:normal; font-size:.82em; color:rgba(255,255,255,.5)}

.calc-fuentes{margin-top:26px; padding-top:22px; border-top:1px solid var(--tm-line)}
.calc-fuentes h3{font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tm-ink-faint)}

.pasos{margin-top:26px; padding-top:24px; border-top:1px solid var(--tm-line)}
.pasos h3{font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tm-ink-faint); margin-bottom:16px}
.pasos ol{list-style:none; counter-reset:paso; padding:0; margin:0; display:grid; gap:16px}
.pasos li{counter-increment:paso; position:relative; padding-left:42px}
.pasos li::before{content:counter(paso); position:absolute; left:0; top:0; width:28px; height:28px;
  border-radius:50%; background:var(--tm-primary-sf); color:var(--tm-primary);
  font-family:var(--tm-font-data); font-weight:700; font-size:.85rem;
  display:flex; align-items:center; justify-content:center}
.pasos li b{display:block; font-size:.98rem}
.pasos li span{display:block; font-size:.9rem; color:var(--tm-ink-soft); margin-top:3px}
.ch em{font-style:normal; color:var(--tm-water); font-weight:600; white-space:nowrap}

/* ── Nuestro camino ── */
.fases{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.fases>*{min-width:0}
@media(max-width:880px){ .fases{grid-template-columns:1fr} }
.fase{background:var(--tm-surface); border:1px solid var(--tm-line); border-radius:var(--tm-radius-lg); padding:28px}
.fase-n{font-family:var(--tm-font-text); font-size:.72rem; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--tm-maiz); margin-bottom:10px}
.fase h3{margin-bottom:7px}
.fase>p{font-size:.94rem; color:var(--tm-ink-soft)}
.fase .lista li{font-size:.88rem}

.linea{list-style:none; padding:0; margin:clamp(30px,4vw,42px) 0 0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:12px; position:relative}
.linea::before{content:""; position:absolute; left:10%; right:10%; top:52px; height:2px;
  background:var(--tm-line); z-index:0}
.linea li{position:relative; z-index:1; text-align:center; background:var(--tm-bg); padding:0 4px}
.linea li span{display:block; font-size:.7rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tm-ink-faint)}
.linea li b{display:flex; align-items:center; justify-content:center; margin:8px auto 0;
  width:88px; height:88px; border-radius:50%; background:var(--tm-primary-sf); color:var(--tm-primary);
  font-family:var(--tm-font-data); font-weight:800; font-size:1.18rem; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; border:2px solid transparent}
.linea li.hito b{background:var(--tm-maiz); color:#08192B; border-color:#EBC85F}
.linea li em{display:block; margin-top:7px; font-style:normal; font-size:.76rem; color:var(--tm-ink-faint)}
@media(max-width:760px){
  .linea{grid-template-columns:repeat(2,1fr); gap:20px}
  .linea::before{display:none}
}

/* ── Preguntas frecuentes ── */
.faq{display:grid; gap:1px; background:var(--tm-line); border:1px solid var(--tm-line);
  border-radius:var(--tm-radius-lg); overflow:hidden}
.faq details{background:var(--tm-surface)}
.faq summary{cursor:pointer; list-style:none; padding:22px 28px; font-weight:700; font-size:1.02rem;
  display:flex; align-items:center; justify-content:space-between; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; flex:0 0 11px; width:11px; height:11px; border-right:2px solid var(--tm-primary);
  border-bottom:2px solid var(--tm-primary); transform:rotate(45deg) translateY(-3px); transition:transform .2s}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.faq summary:hover{background:var(--tm-surface-2)}
.faq details p{padding:0 28px 24px; color:var(--tm-ink-soft); font-size:.97rem;
  text-align:justify; hyphens:auto; -webkit-hyphens:auto; max-width:78ch}
/* ── Ficha técnica ── */
.ficha{margin-top:clamp(40px,5vw,60px); padding-top:clamp(32px,4vw,44px); border-top:1px solid var(--tm-line)}
.ficha-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:26px}
.ficha-h{font-family:var(--tm-font-display); font-weight:800; font-size:clamp(1.4rem,2.4vw,1.9rem); letter-spacing:-.025em}
.ficha-cols{display:grid; grid-template-columns:1.15fr .85fr; gap:24px; align-items:start}
.ficha-cols>*{min-width:0}
@media(max-width:880px){ .ficha-cols{grid-template-columns:1fr} .ficha-head{align-items:flex-start} }

/* ── Casos con institución nombrada ── */
.casos{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:26px}
.casos>*{min-width:0}
@media(max-width:880px){ .casos{grid-template-columns:1fr} }
.caso{background:var(--tm-surface); border:1px solid var(--tm-line); border-radius:var(--tm-radius-lg);
  padding:26px; box-shadow:var(--tm-shadow); display:flex; flex-direction:column}
.caso-org{font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tm-maiz); margin-bottom:10px; line-height:1.35}
.caso h3{margin-bottom:9px}
.caso p{font-size:.94rem; color:var(--tm-ink-soft); text-align:justify; hyphens:auto; -webkit-hyphens:auto}
.caso-res{margin-top:auto; padding-top:16px; border-top:1px solid var(--tm-line)}
.caso-res b{display:block; font-family:var(--tm-font-data); font-size:1.6rem; font-weight:800;
  letter-spacing:-.03em; color:var(--tm-verde); line-height:1.1; font-variant-numeric:tabular-nums}
.caso-res span{display:block; margin-top:5px; font-size:.82rem; color:var(--tm-ink-faint)}

/* ── Comparativa ── */
table.cmp{min-width:720px}
table.cmp td:first-child, table.cmp th:first-child{font-weight:600}
table.cmp .destacada{background:var(--tm-primary-sf)}
table.cmp thead th.destacada{color:var(--tm-primary); font-size:.9rem; letter-spacing:0; text-transform:none;
  font-family:var(--tm-font-display); font-weight:800}
.tbl-wrap{overflow-x:auto; border:1px solid var(--tm-line); border-radius:var(--tm-radius); background:var(--tm-surface)}
table{border-collapse:collapse; width:100%; min-width:440px; font-size:.94rem}
th,td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--tm-line)}
thead th{font-family:var(--tm-font-text); font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--tm-ink-faint); font-weight:700; background:var(--tm-surface-2)}
tbody tr:last-child td{border-bottom:none}
td.pos{font-family:var(--tm-font-data); color:var(--tm-verde); font-weight:700; font-variant-numeric:tabular-nums}
td.num-c{font-family:var(--tm-font-data); font-weight:600; font-variant-numeric:tabular-nums}

/* ─────────────────────────── EQUIPO ─────────────────────────── */
.team{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
@media(max-width:980px){ .team{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .team{grid-template-columns:1fr} }
.member{background:var(--tm-surface); border:1px solid var(--tm-line); border-radius:var(--tm-radius-lg); padding:26px}
/* Retrato del equipo. Lleva la foto encima y las iniciales debajo: si el
   archivo de la foto todavía no existe, el navegador la descarta y quedan
   las iniciales. O sea que alcanza con dejar los cuatro archivos en
   assets/img/equipo/ para que aparezcan, sin tocar una línea de código. */
.mono{position:relative; overflow:hidden;
  width:var(--tm-avatar); height:var(--tm-avatar); border-radius:12px;
  background:var(--tm-panel); color:var(--tm-maiz); display:flex; align-items:center; justify-content:center;
  font-family:var(--tm-font-display); font-weight:800; font-size:calc(var(--tm-avatar)*.35);
  letter-spacing:-.01em; margin-bottom:16px; flex:0 0 auto}
.mono img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 28%}
.member .role{font-family:var(--tm-font-text); color:var(--tm-maiz); font-weight:700; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; margin:6px 0 10px}
.member p{font-size:.92rem; color:var(--tm-ink-soft)}

/* Asesores: mismo formato que el equipo, pero en dos columnas y con un rótulo
   arriba, para que se lea que no son socios. */
.asesores{margin-top:clamp(28px,4vw,40px)}
.asesores .as-tit{font-family:var(--tm-font-text); font-weight:700; font-size:.78rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--tm-ink-faint); margin-bottom:16px}
.asesores .team{grid-template-columns:repeat(2,1fr)}
@media(max-width:640px){ .asesores .team{grid-template-columns:1fr} }
.asesores .member{background:var(--tm-surface-2)}
.asesores .member .role{color:var(--tm-terra)}

/* ── Canales de venta ──
   Tres formas de comprarlo, cada una con su banda. El precio va en oro para
   que se lea como dato y no como titular: sigue siendo referencial. */
.canales{margin-top:clamp(30px,4vw,44px); border-top:1px solid var(--tm-line); padding-top:clamp(26px,3vw,34px)}
.canales .can-tit{font-family:var(--tm-font-text); font-weight:700; font-size:.78rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--tm-ink-faint); margin-bottom:16px}
.can-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:760px){ .can-grid{grid-template-columns:1fr} }
.can{background:var(--tm-surface); border:1px solid var(--tm-line);
  border-radius:var(--tm-radius-lg); padding:22px 22px 20px; display:flex; flex-direction:column}
.can h3{margin-bottom:7px}
.can p{font-size:.92rem; color:var(--tm-ink-soft); margin-bottom:16px; flex:1}
.can b{font-family:var(--tm-font-data); font-size:1.32rem; font-weight:800; letter-spacing:-.02em;
  color:var(--tm-maiz); font-variant-numeric:tabular-nums}
.can-nota{margin-top:16px; font-size:.85rem; line-height:1.55; color:var(--tm-ink-faint)}

/* ── Mapa del sitio (portada) ──
   Seis tarjetas que son enlaces enteros, no un título con un "ver más".
   Toda la tarjeta es clickeable, que es como la gente espera que funcione. */
.mapa{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:900px){ .mapa{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .mapa{grid-template-columns:1fr} }
.mapa-c{display:flex; flex-direction:column; text-decoration:none;
  background:var(--tm-surface); border:1px solid var(--tm-line);
  border-radius:var(--tm-radius-lg); padding:24px; transition:.18s ease}
.mapa-c:hover{border-color:var(--tm-maiz); transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(0,0,0,.34)}
.mapa-c h3{margin-bottom:8px}
.mapa-c p{font-size:.92rem; color:var(--tm-ink-soft); flex:1}
.mapa-c span{margin-top:16px; font-family:var(--tm-font-data); font-weight:800;
  font-size:1.1rem; color:var(--tm-maiz); transition:transform .18s ease}
.mapa-c:hover span{transform:translateX(4px)}

/* ─────────────────────────── NOVEDADES ─────────────────────────── */
.news{display:grid; gap:1px; background:var(--tm-line); border:1px solid var(--tm-line); border-radius:var(--tm-radius-lg); overflow:hidden}
.news-item{background:var(--tm-surface); display:grid; grid-template-columns:150px 1fr; gap:22px; padding:24px 28px}
.news-item .date{font-family:var(--tm-font-text); font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tm-ink-faint); padding-top:4px}
.news-item h3{margin-bottom:6px}
.news-item p{color:var(--tm-ink-soft); font-size:.95rem}
@media(max-width:700px){ .news-item{grid-template-columns:1fr; gap:8px} }

/* ─────────────────────────── INVERSORES ─────────────────────────── */
.inv{position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(160deg, #103055 0%, #0A2039 55%, #08192C 100%);
  color:#fff; border-radius:var(--tm-radius-lg); padding:clamp(36px,5vw,60px)}
.inv::before{content:""; position:absolute; inset:-40% -20% auto auto; width:70%; height:150%;
  background:radial-gradient(50% 50% at 70% 30%, rgba(63,139,220,.20), transparent 70%);
  pointer-events:none}
.inv>*{position:relative}
.inv h2{color:#fff}
.inv .lead{color:rgba(255,255,255,.72)}
.inv-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--tm-radius); overflow:hidden; margin:36px 0 34px}
@media(max-width:820px){ .inv-grid{grid-template-columns:1fr} }
.inv-cell{background:rgba(4,17,33,.55); padding:24px}
.inv-cell b{display:block; font-family:var(--tm-font-data); font-size:1.6rem; font-weight:800; line-height:1.15; letter-spacing:-.03em; color:var(--tm-azul-cl); font-variant-numeric:tabular-nums}
.inv-cell span{display:block; margin-top:9px; font-size:.9rem; color:rgba(255,255,255,.66)}

/* Mercado: tres tamaños decrecientes. El oro es el SOM, que es el único de los
   tres que este plan promete tocar — el resto es contexto. */
.mercado{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:6px 0 34px}
@media(max-width:820px){ .mercado{grid-template-columns:1fr} }
.m-cell{border:1px solid rgba(255,255,255,.16); border-radius:var(--tm-radius); padding:22px 20px}
.m-cell .m-tag{font-size:.72rem; font-weight:700; letter-spacing:.14em; color:rgba(255,255,255,.5)}
.m-cell b{display:block; margin-top:8px; font-family:var(--tm-font-data); font-size:1.45rem;
  font-weight:800; letter-spacing:-.03em; color:#fff; font-variant-numeric:tabular-nums}
.m-cell span{display:block; margin-top:8px; font-size:.88rem; line-height:1.5; color:rgba(255,255,255,.66)}
.m-cell.som{border-color:rgba(222,183,67,.55); background:rgba(222,183,67,.07)}
.m-cell.som b{color:var(--tm-maiz-cl)}

.tramos{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:26px 0 30px}
@media(max-width:900px){ .tramos{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .tramos{grid-template-columns:1fr} }
.tramo{border-top:3px solid var(--tm-azul-cl); padding-top:14px}
.tramo b{display:block; font-family:var(--tm-font-data); font-size:1.15rem; font-weight:800;
  color:#fff; font-variant-numeric:tabular-nums}
.tramo i{display:block; font-style:normal; margin-top:3px; font-size:.74rem; font-weight:700;
  letter-spacing:.12em; color:var(--tm-maiz-cl)}
.tramo span{display:block; margin-top:8px; font-size:.88rem; line-height:1.5; color:rgba(255,255,255,.7)}

.inv-cita{margin:0 0 30px; padding:20px 24px; border-left:3px solid var(--tm-maiz-cl);
  background:rgba(255,255,255,.05); border-radius:0 var(--tm-radius) var(--tm-radius) 0}
.inv-cita p{margin:0; font-size:1.05rem; line-height:1.55; color:#fff; font-style:italic}
.inv-cita cite{display:block; margin-top:10px; font-style:normal; font-size:.85rem; color:rgba(255,255,255,.6)}

/* ─────────────────────────── CONTACTO ─────────────────────────── */
/* La frase con la que cierra el pitch. Va arriba del título de contacto:
   es el último argumento antes del botón. */
.cierre{font-family:var(--tm-font-display); font-weight:600; margin:0 0 20px;
  font-size:clamp(1.25rem,2.4vw,1.7rem); line-height:1.25; letter-spacing:-.02em;
  color:var(--tm-ink-soft); text-wrap:balance}
.cierre strong{color:var(--tm-maiz); font-weight:800}
.contact{display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(30px,4vw,56px); align-items:start}
@media(max-width:900px){ .contact{grid-template-columns:1fr} }
.ch{display:flex; gap:14px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--tm-line); text-decoration:none}
.ch:last-of-type{border-bottom:none}
.ch .ico{margin-bottom:0; width:40px; height:40px; flex:0 0 40px}
.ch b{display:block; font-size:.98rem}
.ch span span{display:block; font-size:.9rem; color:var(--tm-ink-soft); font-weight:400}
form{background:var(--tm-surface); border:1px solid var(--tm-line); border-radius:var(--tm-radius-lg); padding:30px; box-shadow:var(--tm-shadow)}
.fld{margin-bottom:16px}
.fld label{display:block; font-family:var(--tm-font-text); font-size:.74rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--tm-ink-soft); margin-bottom:8px}
.fld input,.fld textarea,.fld select{
  width:100%; padding:12px 14px; border:1.5px solid var(--tm-line); border-radius:10px;
  font-family:inherit; font-size:.97rem; background:var(--tm-bg); color:var(--tm-ink);
}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none; border-color:var(--tm-primary)}
.fld textarea{min-height:96px; resize:vertical}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:520px){ .frow{grid-template-columns:1fr} }
form .btn{width:100%; justify-content:center; margin-top:6px}
.form-note{margin-top:12px; font-size:.8rem; color:var(--tm-ink-faint); text-align:center}

/* ─────────────────────────── FOOTER ─────────────────────────── */
footer{background:#020A14; border-top:1px solid var(--tm-line);
  color:rgba(255,255,255,.7); padding:56px 0 32px; font-size:.9rem}
.f-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; margin-bottom:40px}
@media(max-width:760px){ .f-grid{grid-template-columns:1fr} }
footer h4{font-family:var(--tm-font-text); font-size:.74rem; letter-spacing:.11em; text-transform:uppercase; color:rgba(255,255,255,.6); margin:0 0 14px; font-weight:700}
footer a{color:rgba(255,255,255,.78); text-decoration:none; display:block; padding:4px 0}
footer a:hover{color:#fff}
.f-logo{width:148px; height:auto; display:block; margin-bottom:14px}
.f-claim{font-family:var(--tm-font-display); font-weight:700; font-size:1.02rem;
  color:var(--tm-maiz-cl); margin:0 0 12px; letter-spacing:-.01em}
.f-legal{border-top:1px solid rgba(255,255,255,.14); padding-top:22px; font-size:.78rem; color:rgba(255,255,255,.62); line-height:1.6}

/* ─────────────────────────── WHATSAPP FLOTANTE ─────────────────────────── */
.fab{
  position:fixed; right:20px; bottom:20px; z-index:70; display:flex; align-items:center; gap:10px;
  background:var(--tm-maiz); color:#08192B; text-decoration:none; font-weight:700; font-size:.92rem;
  padding:14px 20px; border-radius:999px; box-shadow:0 12px 32px rgba(0,0,0,.45); transition:.18s;
}
.fab:hover{background:#EBC85F; transform:translateY(-2px)}
.fab svg{width:20px; height:20px}
@media(max-width:600px){ .fab span{display:none} .fab{padding:16px; border-radius:50%} }

/* ─────────────────────────── APARICIÓN SUAVE ─────────────────────────── */
.rv{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
.rv.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){ .rv{opacity:1; transform:none; transition:none} html{scroll-behavior:auto} }