/* TPI — hoja única del sitio publicado.
 * Generada del sistema de diseño: tokens (colors, typography, spacing) + base.css + sitio.css.
 * NO editar aquí: el original vive en el sistema de diseño y esta copia se regenera.
 */
/* TPI — Tokens de color
 * Regla del sistema: dos familias de color (azul + ámbar) más neutros.
 * La jerarquía viene de la intensidad y el tamaño dentro de estas familias — nunca colores nuevos.
 * Proporción de uso: 60% superficie clara · 30% azul · 10% ámbar.
 */
:root {
  /* Rampa de azul — nombrada por número (convención de sistemas de diseño) */
  --blue-900: #132039; /* el más profundo — pies de página, campos oscuros puntuales */
  --blue-700: #192A4D; /* PRIMARIO — el color ancla: logo, encabezados, títulos */
  --blue-500: #324B7B; /* intermedio — hover, iconos, barras de gráfico */
  --blue-200: #9CAFD3; /* claro — bordes suaves, fondos de sección */
  --blue-50:  #EAEEF6; /* muy claro — fondos de aviso, zonas sutiles */

  /* Ámbar — el acento. Máximo ~10%, solo en formas finas */
  --amber-500: #E0A236; /* ACENTO — botones, enlaces, una cifra clave */
  --amber-600: #C98A22; /* pressed / acento más oscuro */

  /* Neutros — nunca negro puro, nunca blanco puro */
  --ink-900: #1C2026;  /* texto principal (gris tinta) */
  --ink-500: #6E7887;  /* texto secundario, leyendas */
  --surface: #F7F8FA;  /* fondo dominante (~60%) */
  --white:   #FFFFFF;  /* tarjetas / superficies elevadas */

  /* ---- Alias semánticos ---- */
  --color-primary:        var(--blue-700);
  --color-primary-strong: var(--blue-900);
  --color-primary-hover:  var(--blue-500);
  --color-accent:         var(--amber-500);
  --color-accent-hover:   var(--amber-600);

  --text-strong:   var(--ink-900);
  --text-muted:    var(--ink-500);
  --text-on-blue:  var(--white);
  --text-on-amber: var(--ink-900); /* nunca blanco sobre ámbar */
  --text-link:     var(--amber-600);

  --surface-page:    var(--surface);
  --surface-card:    var(--white);
  --surface-field:   var(--blue-50);
  --surface-inverse: var(--blue-700);

  --border-soft:   var(--blue-200);
  --border-hair:   #E3E7EF;
  --border-strong: var(--blue-700);

  --focus-ring: var(--amber-500);
}

/* TPI — Tokens de tipografía
 * Una sola familia: Archivo (sans grotesca-industrial, SIL OFL, Google Fonts).
 * Jerarquía solo por peso y tamaño — nunca una fuente nueva, nunca color para jerarquía.
 * Proporción de escala 1.25 entre niveles. El cuerpo siempre en Regular.
 */
:root {
  --font-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Pesos — los únicos tres que se usan */
  --fw-regular: 400; /* @kind other */
  --fw-medium: 500;  /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold: 700; /* @kind other */

  /* Escala web (px) — la unidad para pantallas. Cinco niveles, sin tamaños intermedios. */
  --fs-title:     34px; /* Bold */
  --fs-subtitle:  27px; /* SemiBold */
  --fs-highlight: 21px; /* SemiBold */
  --fs-body:      17px; /* Regular — cómodo, sobre el mínimo de 16px */
  --fs-secondary: 14px; /* Regular — leyendas, legal */

  /* Escala de presentación (pt → en px para diapositivas ~1280×720) */
  --fs-pres-title:     40px;
  --fs-pres-subtitle:  30px;
  --fs-pres-highlight: 24px;
  --fs-pres-body:      20px;
  --fs-pres-secondary: 16px;

  /* Altura de línea */
  --lh-tight: 1.12;  /* @kind other */
  --lh-snug: 1.3;    /* @kind other */
  --lh-body: 1.55;   /* @kind other */

  /* Tracking */
  --tracking-tight: -0.01em; /* @kind other */
  --tracking-normal: 0; /* @kind other */
  --tracking-wide: 0.04em; /* @kind other */
}

/* TPI — Tokens de espaciado, radio, sombra y layout
 * Sobrio y ordenado: radios contenidos, sombras suaves de una sola capa, espacio generoso.
 */
:root {
  /* Escala de espaciado (base 4px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Radio — modesto; la marca se lee de ingeniería, no juguetona */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Bordes */
  --border-width: 1px; /* @kind other */

  /* Sombras — suaves, con matiz azul, una sola capa. Nunca sombras pesadas. */
  --shadow-sm: 0 1px 2px rgba(25, 42, 77, 0.06);
  --shadow-md: 0 4px 14px rgba(25, 42, 77, 0.08);
  --shadow-lg: 0 12px 32px rgba(25, 42, 77, 0.12);
  --shadow-focus: 0 0 0 3px rgba(224, 162, 54, 0.45);

  /* Layout */
  --container-max: 1200px; /* @kind other */
  --container-pad: 24px; /* @kind spacing */

  /* Movimiento — quieto, sin rebote. Confianza, no adorno. */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
}

/* TPI — estilos base de elementos y algunos helpers de utilidad.
 * Resets ligeros y mínimos para que los especímenes y kits se lean consistentes.
 */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-strong);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p { margin: 0; }

a {
  color: var(--text-link);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

/* Helpers de tipo que mapean a la escala web */
.tpi-title     { font-size: var(--fs-title);     font-weight: var(--fw-bold);     line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.tpi-subtitle  { font-size: var(--fs-subtitle);  font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.tpi-highlight { font-size: var(--fs-highlight); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.tpi-body      { font-size: var(--fs-body);      font-weight: var(--fw-regular);  line-height: var(--lh-body); }
.tpi-secondary { font-size: var(--fs-secondary); font-weight: var(--fw-regular);  line-height: var(--lh-snug); color: var(--text-muted); }

/* Antetítulo / kicker — etiqueta pequeña y ancha, sobre los títulos */
.tpi-eyebrow {
  font-size: var(--fs-secondary);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-hover);
}

/* La línea ámbar fina característica — acento en forma fina */
.tpi-rule-amber {
  height: 3px;
  width: 48px;
  background: var(--color-accent);
  border: 0;
  border-radius: var(--radius-pill);
}

/* Sitio web TPI — estilos compartidos por todas las páginas.
   Tokens, tipografía y helpers vienen de ../styles.css. */
:root{--text-muted-web:#5B6573;/* AA: --ink-500 (#6E7887) da 4.21:1 sobre --surface — pendiente decidir el token */
--b900:var(--blue-900);--b700:var(--blue-700);--b500:var(--blue-500);--b200:var(--blue-200);--b50:var(--blue-50);--am:var(--amber-500);--am6:var(--amber-600);--bd:var(--border-hair);--fs-display:42px;--mono:ui-monospace,Menlo,Consolas,monospace}
a{color:var(--text-link)}a:hover{color:var(--blue-700)}
.wrap{max-width:1200px;margin:0 auto;padding:0 56px}
.ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.ic.lg{width:24px;height:24px}
.ic.brand{fill:currentColor;stroke:none}
/* cabecera */
.hd{height:76px;border-bottom:1px solid var(--border-hair);background:var(--white);position:sticky;top:0;z-index:20}
.hd .wrap{height:100%;display:flex;align-items:center;gap:40px}
.hd .logo{height:30px;width:auto}
.nav{display:flex;gap:26px;font-size:var(--fs-secondary);font-weight:var(--fw-semibold);color:var(--blue-700);margin-left:auto}
.nav a{color:var(--blue-700)}.nav a:hover{color:var(--blue-500);text-decoration:none}
.nav .on{border-bottom:2px solid var(--amber-500);padding-bottom:3px}
/* botones */
.btn{flex-shrink:0;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border-radius:8px;font-size:var(--fs-body);font-weight:var(--fw-semibold);transition:background .16s cubic-bezier(.4,0,.2,1),border-color .16s cubic-bezier(.4,0,.2,1)}
.btn:hover{text-decoration:none}
.btn.p{background:var(--amber-500);color:var(--text-on-amber)}.btn.p:hover{background:var(--amber-600);color:var(--text-on-amber)}
.btn.d{background:var(--blue-700);color:var(--white)}.btn.d:hover{background:var(--blue-500);color:var(--white)}
.btn.g{border:1px solid var(--border-hair);background:var(--white);color:var(--blue-700)}.btn.g:hover{border-color:var(--blue-200);color:var(--blue-700)}
.btn.gi{border:1px solid rgba(255,255,255,.35);color:var(--white)}.btn.gi:hover{border-color:var(--white);color:var(--white)}
.btn.sm{height:40px;padding:0 18px;font-size:var(--fs-secondary);gap:8px}
.btn:focus-visible{outline:2px solid var(--amber-500);outline-offset:3px}
/* tipo */
.eb{font-size:var(--fs-secondary);font-weight:var(--fw-semibold);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-500)}
.eb.i{color:var(--amber-500)}
.rule{height:3px;width:48px;background:var(--amber-500);border-radius:999px}
.h2{font-size:var(--fs-title);font-weight:var(--fw-bold);line-height:var(--lh-tight);letter-spacing:var(--tracking-tight);color:var(--blue-700)}
.h3{font-size:var(--fs-highlight);font-weight:var(--fw-semibold);line-height:var(--lh-snug);color:var(--blue-700)}
.bd{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-900)}
.sec{font-size:var(--fs-secondary);line-height:var(--lh-body);color:var(--text-muted-web)}
.sec-pad{padding:96px 0}
.card{background:var(--white);border:1px solid var(--border-hair);border-radius:12px;box-shadow:0 4px 14px rgba(25,42,77,.06)}
.img{display:block;width:100%;height:100%;object-fit:cover}
.ph{background:repeating-linear-gradient(135deg,#E4E9F2 0 7px,#F1F4F9 7px 14px);border:1px dashed var(--blue-200);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14px;color:var(--blue-500);font:var(--fw-semibold) 12px/1.5 var(--mono)}
/* hero */
.hero{position:relative;height:620px;background:var(--blue-900)}
.hero .bg{position:absolute;inset:0;object-position:center 40%}
.hero .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(19,32,57,.96) 0%,rgba(19,32,57,.9) 34%,rgba(19,32,57,.52) 62%,rgba(19,32,57,.2) 100%)}
.hero .in{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center}
.herobtns{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.hero h1{margin:0;max-width:740px;font-size:var(--fs-display);line-height:1.1;font-weight:var(--fw-bold);letter-spacing:-.02em;color:var(--white);text-wrap:pretty}
/* banda de respaldo */
.proof{background:var(--white);border-bottom:1px solid var(--border-hair)}
.proof .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;padding:30px 0}
.pf{min-height:56px;display:flex;align-items:center;gap:14px;color:var(--blue-500)}
.pf-k{font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--blue-700);line-height:var(--lh-snug)}
.pf-v{font-size:var(--fs-secondary);color:var(--text-muted-web);line-height:var(--lh-snug);margin-top:3px}
/* rutas */
/* Subgrid: las dos rutas comparten filas, así que antetítulo, título, texto, viñetas y botón
   arrancan y terminan exactamente a la misma altura sin depender del largo del contenido. */
.rutas{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;row-gap:0;grid-template-rows:auto auto auto auto 1fr auto;margin-top:44px}
.ruta{grid-row:1/-1;display:grid;grid-template-rows:subgrid;padding:44px}
.ruta .h3{margin-top:12px}
.ruta .intro{margin-top:14px}
.ruta .lista{display:grid;gap:14px;margin-top:28px;align-content:start}
.ruta .btn{margin-top:28px;justify-self:start}
.li{display:flex;gap:12px;font-size:var(--fs-body);line-height:var(--lh-snug)}
.li i{color:var(--amber-500);font-weight:var(--fw-bold);font-style:normal;flex-shrink:0}
/* proceso */
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:44px}
.paso{display:flex;flex-direction:column}
.paso .shot{aspect-ratio:5/4;flex-shrink:0;border-radius:10px;overflow:hidden;border:1px solid var(--border-hair)}
.paso .no{display:flex;align-items:center;gap:10px;margin-top:20px}
.paso .no span{font:var(--fw-bold) var(--fs-secondary)/1 var(--mono);color:var(--blue-500)}
.paso .no em{flex:1;height:1px;background:var(--border-hair)}
/* sectores */
.sectores{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.sector{border-radius:12px;overflow:hidden;border:1px solid var(--border-hair);background:var(--white);display:flex;flex-direction:column}
.sector .top{aspect-ratio:1/1;flex-shrink:0;overflow:hidden}
.planta{display:grid;grid-template-columns:1fr 1.15fr;gap:72px;align-items:center}
/* El alto lo fija el propio logo más su aire — sin aspect-ratio, que con ancho fluido inventaba vacío. */
.logopanel{display:flex;align-items:center;justify-content:center;padding:64px 48px}
.logopanel img{width:100%;max-width:300px;min-width:160px;height:auto}
.ctaband{display:flex;align-items:center;justify-content:space-between;gap:56px}
/* pie */
.ftr{background:var(--blue-900);color:#C9D2E4;padding:64px 0 30px;font-size:var(--fs-secondary);line-height:1.7}
.ftr .lock{height:34px}
.ftr h4{margin:0 0 12px;font-size:var(--fs-secondary);font-weight:var(--fw-bold);letter-spacing:.1em;text-transform:uppercase;color:var(--white)}
.ftr .cols{display:grid;gap:48px}
.ftr a{color:#C9D2E4}.ftr a:hover{color:var(--amber-500)}
.ftr .base{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);color:#8FA0BF;display:flex;justify-content:space-between}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Puntos de quiebre — escritorio primero, pero el sitio no se rompe en ventanas estrechas ni en móvil */
@media(max-width:1180px){.wrap{padding:0 32px}.hd .wrap{gap:24px}.nav{gap:18px}.pasos{gap:20px}}
@media(max-width:1060px){.hd{height:auto}.hd .wrap{flex-wrap:wrap;padding:14px 32px;row-gap:12px}
.nav{order:3;flex-basis:100%;margin-left:0;gap:22px;border-top:1px solid var(--border-hair);padding-top:4px}
.nav a{min-height:44px;display:flex;align-items:center}
.btn.sm{height:44px}
.proof .grid{grid-template-columns:1fr;gap:20px}
.pasos{grid-template-columns:1fr 1fr}
.planta{grid-template-columns:1fr;gap:40px}
.ctaband{flex-direction:column;align-items:flex-start;gap:32px}
.ftr .cols{gap:36px}}
@media(max-width:860px){.sec-pad{padding:64px 0}
.hero{height:auto;padding:72px 0}.herobtns{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.hero h1{font-size:var(--fs-title)}
.rutas{grid-template-columns:1fr;grid-template-rows:none;row-gap:28px;margin-top:32px}.ruta{grid-row:auto;display:flex;flex-direction:column;padding:32px}
.sectores{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.wrap{padding:0 20px}.hd .wrap{padding:14px 20px}
/* en teléfono el menú de anclas estorba más de lo que ayuda: la página es un solo scroll */
.nav{display:none}
.herobtns .btn{width:100%}
.pasos{grid-template-columns:1fr}.paso{height:auto}
.sectores{grid-template-columns:1fr}
.ftr .cols{grid-template-columns:1fr!important;gap:28px}
.ftr .base{flex-direction:column;gap:8px}}

/* ---------- sección de contacto ---------- */
.ctasec{background:var(--blue-700);padding:76px 0}
.ctahead{max-width:760px}
.ctahead h2{margin:0;font-size:var(--fs-title);font-weight:var(--fw-bold);line-height:var(--lh-snug);letter-spacing:var(--tracking-tight);color:var(--white)}
.ctahead p{margin:14px 0 0;font-size:var(--fs-body);color:var(--blue-200)}
.contactos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.canal{display:flex;align-items:center;gap:18px;padding:22px 24px;color:var(--ink-900)}
.canal:hover{text-decoration:none;border-color:var(--blue-200)}
.cico{width:48px;height:48px;border-radius:8px;background:var(--blue-50);display:flex;align-items:center;justify-content:center;color:var(--blue-700);flex-shrink:0}
.ftr .cols{grid-template-columns:1.6fr 1fr}
@media(max-width:1060px){.contactos{grid-template-columns:1fr}}