/* =========================================================================
   P&B Consulting — hoja unica.
   Cero JS. Cero imagenes. Todo lo visual sale de CSS.

   La idea: lo que vende esta consultora es EL HIBRIDO — cerrar la brecha
   entre lo que se decide arriba (estrategia) y lo que pasa en la sala
   (ejecucion). Su propio PDF lo dice en la pagina 11: 'eliminar la brecha
   entre el diseno estrategico y la adopcion operativa en el punto de venta'.
   Asi que la pagina entera esta partida por una costura de 1px, que ademas
   es el eje de alineacion real del grid, y que el contenido cruza justo
   donde el deck dice que se cierra: paquetes, comparativa y retorno.

   La paleta NO se eligio: se midio del PDF muestreando pixeles.
   Ver FUENTE.md para de que pagina salio cada hex.
   ========================================================================= */

/* ---------- tipografia ----------
   IBM Plex Mono es la unica fuente que se descarga (ya estaba en el repo).
   Carga todo lo estructural y todo lo que es dato: eyebrows, numeracion,
   tabla, cifras. Es deliberado: la consultora se vende midiendo, y la mono
   lo dice sin tener que escribirlo. El display y el cuerpo van en stack de
   sistema — cero requests, y en Windows/macOS caen en Segoe UI Variable /
   SF, que son las dos grotescas mas cercanas a la del deck. */
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fuentes/ibm-plex-mono-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fuentes/ibm-plex-mono-500-latin.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  color-scheme: light;

  /* medidos del PDF, muestreando pixeles */
  --navy-800: #111e3e;  /* p1 izquierda  */
  --navy-700: #1a3275;  /* p1 derecha    */
  --brand:    #1e3b8b;  /* p10 header    */
  --blue:     #164f9c;  /* p7 / p11      */
  --cyan:     #128dd3;  /* p11 fin barra */
  --cyan-txt: #0b6db4;  /* p7 card +18%. El cian para TEXTO: 5.44:1 sobre blanco */
  --ink-2:    #637286;  /* p2 bajada     */
  --paper-2:  #f9fafc;  /* p4 / p5 / p10 */

  /* derivados */
  --navy-900: #0a1229;
  --ink:      #0f1a33;
  --ink-3:    #8b97a8;
  --paper:    #ffffff;
  --rule:     #dde4ef;
  --rule-2:   #eef2f8;
  --brand-05: rgba(30, 59, 139, .05);
  --brand-12: rgba(30, 59, 139, .12);

  --fuente: 'Segoe UI Variable Display', -apple-system, BlinkMacSystemFont,
            'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --rail: 188px;                     /* columna de etiqueta, a la izquierda */
  --canal: clamp(22px, 3.4vw, 52px); /* aire a los lados de la costura      */
  --marco: clamp(20px, 5vw, 56px);
  --ancho: 1220px;
  --aire: clamp(60px, 8vw, 108px);   /* respiracion vertical de seccion     */
}

/* ---------- reset corto ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--fuente);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, dl, figure, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 2px;
}

.saltar {
  position: absolute; left: -9999px;
  background: var(--navy-900); color: #fff;
  padding: 12px 18px; z-index: 99;
  font: 500 13px/1 var(--mono);
}
.saltar:focus { left: 12px; top: 12px; }

/* ---------- utilidades ---------- */
.envoltura {
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--marco);
}
.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.etiqueta {
  font: 500 11px/1.2 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.nav__fila {
  max-width: var(--ancho); margin-inline: auto;
  padding: 0 var(--marco);
  display: flex; align-items: center; gap: 20px;
  min-height: 58px;
}
.nav__marca {
  font: 500 13px/1 var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--brand);
  white-space: nowrap; flex: none;
}
/* Sin JS no hay menu hamburguesa. En vez de esconder la navegacion, la tira
   scrollea: en el celular se arrastra con el dedo, que es un gesto que ya
   conoce cualquiera, y no rompe el tab order. */
.nav__links {
  display: flex; gap: 2px; margin-left: auto;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.nav__links::-webkit-scrollbar { display: none; }
.nav__links a {
  font: 400 12px/1 var(--mono);
  letter-spacing: .06em;
  color: var(--ink-2); text-decoration: none;
  padding: 9px 11px; border-radius: 3px;
  white-space: nowrap;
  transition: color .16s, background-color .16s;
}
.nav__links a:hover { color: var(--brand); background: var(--brand-05); }
.nav__cta {
  flex: none;
  font: 500 12px/1 var(--mono); letter-spacing: .06em;
  background: var(--brand); color: #fff; text-decoration: none;
  padding: 10px 15px; border-radius: 3px;
  transition: background-color .16s;
}
.nav__cta:hover { background: var(--navy-700); }
@media (max-width: 760px) { .nav__cta { display: none; } }

/* ==========================================================================
   HERO — la unica pieza a fondo oscuro, como la portada del PDF.
   El gradiente son los dos hex medidos de la p1, en el mismo angulo.
   ========================================================================== */
.hero {
  position: relative;
  background:
    radial-gradient(1100px 520px at 88% 8%, rgba(18, 141, 211, .30), transparent 62%),
    linear-gradient(104deg, var(--navy-900) 0%, var(--navy-800) 42%, var(--navy-700) 100%);
  color: #fff;
  overflow: hidden;
}
/* La costura, en su version hero: una linea vertical de luz que baja hasta
   la juntura. Es el mismo eje que despues ordena toda la pagina. */
.hero::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 50%;
  display: none;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .16) 30%, rgba(18, 141, 211, .55));
  pointer-events: none;
}
@media (min-width: 900px) { .hero::after { display: block; } }
.hero__caja {
  max-width: var(--ancho); margin-inline: auto;
  padding: clamp(64px, 11vw, 128px) var(--marco) clamp(4px, 2vw, 16px);
  position: relative; z-index: 1;
}
.hero__eyebrow {
  color: rgba(255, 255, 255, .62);
  margin-bottom: clamp(24px, 4vw, 40px);
}
.hero h1 {
  font-size: clamp(34px, 6.2vw, 68px);
  line-height: 1.04;
  letter-spacing: -.032em;
  font-weight: 700;
  max-width: 24ch;
  text-wrap: balance;
}
.hero h1 em { font-style: normal; color: #7fc4ef; }
.hero__bajada {
  margin-top: clamp(20px, 2.6vw, 28px);
  max-width: 58ch;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.62;
  color: rgba(255, 255, 255, .76);
}
.hero__acciones {
  margin-top: clamp(30px, 4vw, 44px);
  display: flex; flex-wrap: wrap; gap: 12px;
}

.boton {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 13px/1 var(--mono); letter-spacing: .06em;
  padding: 15px 22px; border-radius: 3px;
  text-decoration: none; border: 1px solid transparent;
  transition: background-color .18s, border-color .18s, color .18s, transform .18s;
}
.boton--lleno { background: var(--cyan); color: #06182b; }
.boton--lleno:hover { background: #35a6e0; transform: translateY(-1px); }
.boton--linea { border-color: rgba(255, 255, 255, .28); color: #fff; }
.boton--linea:hover { border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .06); }
.boton--marca { background: var(--brand); color: #fff; }
.boton--marca:hover { background: var(--navy-700); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .boton:hover { transform: none; } }

/* --- la juntura: la firma de la pagina ---------------------------------
   Dos vias que llegan a la costura y se traban ahi. No es adorno: es la
   frase de la p11 dibujada. Se lee igual sin grid, porque debajo es una
   lista de tres terminos en orden. */
.juntura {
  margin-top: clamp(48px, 7vw, 84px);
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
}
.juntura__via {
  padding: clamp(20px, 3vw, 30px) 0 clamp(24px, 3.4vw, 36px);
  display: flex; flex-direction: column; gap: 7px;
}
.juntura__via--der { text-align: right; align-items: flex-end; }
.juntura__rotulo { color: rgba(255, 255, 255, .5); }
.juntura__que {
  font-size: clamp(14px, 1.35vw, 16px);
  color: rgba(255, 255, 255, .88);
  max-width: 26ch;
  line-height: 1.45;
}
.juntura__nudo {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 clamp(14px, 2.4vw, 30px);
}
.juntura__nudo::before,
.juntura__nudo::after {
  content: ''; position: absolute; left: 50%; width: 1px;
  background: rgba(255, 255, 255, .22);
}
.juntura__nudo::before { top: 0; height: 16px; }
.juntura__nudo::after { bottom: 0; height: 16px; }
.juntura__sello {
  font: 500 11px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase;
  background: var(--cyan); color: #06182b;
  padding: 10px 15px; border-radius: 3px;
  white-space: nowrap;
}
@media (max-width: 820px) {
  .juntura { grid-template-columns: 1fr; }
  .juntura__via--der { text-align: left; align-items: flex-start; border-top: 1px solid rgba(255, 255, 255, .12); }
  .juntura__nudo { align-items: flex-start; padding: 6px 0 16px; }
  .juntura__nudo::before, .juntura__nudo::after { display: none; }
  .juntura__via { padding-block: 18px 6px; }
}

/* ==========================================================================
   LA COSTURA — el grid de dos columnas que ordena todo el resto.
   Rail de etiqueta a la izquierda, 1px de borde, contenido a la derecha.
   Como las secciones se apilan sin hueco, la linea baja continua.
   ========================================================================== */
.seccion__grid {
  max-width: var(--ancho); margin-inline: auto;
  padding-inline: var(--marco);
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
}
.seccion__rail {
  padding: var(--aire) var(--canal) var(--aire) 0;
  display: flex; flex-direction: column; gap: 10px;
}
.seccion__num { font: 400 11px/1 var(--mono); color: var(--ink-2); letter-spacing: .1em; }
.seccion__rotulo { color: var(--brand); }
.seccion__via {
  margin-top: 4px;
  font: 400 10px/1 var(--mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--rule); border-radius: 2px;
  padding: 5px 7px; align-self: flex-start;
}
.seccion__via[data-via='hibrido'] {
  color: var(--brand); border-color: var(--brand-12); background: var(--brand-05);
}
.seccion__cuerpo {
  border-left: 1px solid var(--rule);
  padding: var(--aire) 0 var(--aire) var(--canal);
  min-width: 0;
}
.seccion--tinte { background: var(--paper-2); }

.titulo {
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.12; letter-spacing: -.024em;
  font-weight: 700; color: var(--ink);
  max-width: 20ch; text-wrap: balance;
}
.bajada {
  margin-top: 16px; max-width: 62ch;
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--ink-2); line-height: 1.62;
}

@media (max-width: 880px) {
  .seccion__grid { grid-template-columns: minmax(0, 1fr); }
  .seccion__rail {
    padding: var(--aire) 0 0 18px;
    border-left: 1px solid var(--rule);
    flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px;
  }
  .seccion__cuerpo { padding: 20px 0 var(--aire) 18px; }
  .seccion__via { margin-top: 0; }
}

/* ==========================================================================
   PROPUESTA DE VALOR — los cuatro pilares de la p3, en su orden.
   ========================================================================== */
.pilares { margin-top: clamp(28px, 4vw, 44px); }
.pilar {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 0 18px;
  padding: 22px 0;
  border-top: 1px solid var(--rule-2);
}
.pilar:first-child { border-top: 0; padding-top: 0; }
.pilar__n { font: 400 12px/1.5 var(--mono); color: var(--cyan-txt); letter-spacing: .06em; }
.pilar__t { font-size: 17px; font-weight: 650; letter-spacing: -.012em; }
.pilar__d { margin-top: 5px; color: var(--ink-2); font-size: 16.5px; line-height: 1.6; max-width: 64ch; }

/* ==========================================================================
   SERVICIOS — tres modulos. Sin cards flotantes ni iconos: reglas y aire.
   Los cuadraditos celestes con iconito del deck son lo mas generico que
   tiene; se cortaron enteros.
   ========================================================================== */
.modulos {
  margin-top: clamp(28px, 4vw, 44px);
  display: grid; gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 4px; overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
}
.modulo {
  background: var(--paper);
  padding: clamp(22px, 2.6vw, 30px);
  display: flex; flex-direction: column; gap: 10px;
  transition: background-color .2s;
}
.modulo:hover { background: #f6f8fc; }
.modulo__clave { font: 500 11px/1 var(--mono); letter-spacing: .12em; color: var(--cyan-txt); }
.modulo__t { font-size: 19px; font-weight: 650; letter-spacing: -.016em; line-height: 1.2; }
.modulo__d { color: var(--ink-2); font-size: 16px; line-height: 1.6; }

/* ==========================================================================
   PAQUETES — aca la costura es el sujeto: dos paquetes que la flanquean,
   y el hibrido que la cruza.
   ========================================================================== */
.paquetes {
  position: relative;
  margin-top: clamp(28px, 4vw, 44px);
  display: grid; gap: clamp(18px, 2.4vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
/* la brecha: el hueco entre los dos paquetes, hecho visible. Es lo que el
   bloque de abajo cruza. Solo cuando de verdad hay dos columnas. */
@media (min-width: 620px) {
  .paquetes::before {
    content: '';
    position: absolute; top: 8%; bottom: 8%; left: 50%;
    width: 1px; background: var(--rule);
  }
}
/* tres etapas en fila, sin la brecha del medio */
.paquetes--tres { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.paquetes--tres::before { display: none; }
.paquete {
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: clamp(22px, 2.8vw, 32px);
  background: var(--paper);
  display: flex; flex-direction: column; gap: 12px;
}
.paquete__n { font: 500 11px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); }
.paquete__t { font-size: clamp(19px, 2vw, 23px); font-weight: 700; letter-spacing: -.02em; line-height: 1.16; color: var(--brand); }
.paquete__d { color: var(--ink-2); font-size: 16.5px; line-height: 1.62; }

.cruce {
  margin-top: clamp(18px, 2.4vw, 26px);
  background: linear-gradient(100deg, var(--brand) 0%, var(--blue) 52%, var(--cyan-txt) 100%);
  color: #fff;
  border-radius: 4px;
  padding: clamp(22px, 2.8vw, 30px);
  display: grid; gap: 14px 26px;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: center;
}
.cruce__sello {
  font: 500 11px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, .4); border-radius: 3px;
  padding: 9px 13px; white-space: nowrap;
}
.cruce__txt { font-size: clamp(15px, 1.5vw, 17px); line-height: 1.55; color: rgba(255, 255, 255, .94); }
@media (max-width: 620px) {
  .cruce { grid-template-columns: minmax(0, 1fr); }
  .cruce__sello { justify-self: start; }
}

/* ==========================================================================
   METODO Y EJECUCION — pasos numerados. La numeracion codifica la
   secuencia real del engagement (p8), no decora.
   ========================================================================== */
.pasos { margin-top: clamp(28px, 4vw, 44px); counter-reset: paso; }
.paso {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 18px;
  padding: 20px 0; border-top: 1px solid var(--rule-2);
}
.paso:first-child { border-top: 0; padding-top: 0; }
.paso__n { counter-increment: paso; font: 500 12px/1.45 var(--mono); color: var(--brand); }
.paso__n::before { content: counter(paso, decimal-leading-zero); }
.paso__t { font-size: 16.5px; font-weight: 650; letter-spacing: -.012em; }
.paso__d { margin-top: 4px; color: var(--ink-2); font-size: 16.5px; line-height: 1.6; max-width: 66ch; }

/* ==========================================================================
   CRONOGRAMA — la unica lamina que el deck ya resolvia bien (p9): hitos
   sobre una regla. Se conserva la idea y se le da la costura como eje.
   ========================================================================== */
.linea {
  margin-top: clamp(34px, 4vw, 52px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: 1px solid var(--rule);
}
.hito {
  position: relative;
  padding: 28px clamp(14px, 2vw, 26px) 6px clamp(14px, 2vw, 22px);
  border-left: 1px solid var(--rule);
}
.hito:first-child { border-left: 0; padding-left: 0; }
.hito::before {
  content: ''; position: absolute; top: -4px;
  left: clamp(14px, 2vw, 22px);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 3px rgba(18, 141, 211, .16);
}
.hito:first-child::before { left: 0; }
.hito__t { font: 500 12px/1.3 var(--mono); letter-spacing: .06em; color: var(--brand); text-transform: uppercase; }
.hito__d { margin-top: 9px; color: var(--ink-2); font-size: 16px; line-height: 1.58; }

/* ==========================================================================
   COMPARATIVA — tabla de verdad, con los mismos tres estados que marca el
   deck en la p10 (tilde verde / guion gris / tilde azul). No se inventa
   una escala ordinal: la fila 4 son frecuencias, no niveles.
   ========================================================================== */
.tablazo {
  margin-top: clamp(28px, 4vw, 44px);
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: 4px;
  /* que se note que hay mas tabla a la derecha cuando no entra */
  background:
    linear-gradient(90deg, var(--paper) 30%, rgba(255,255,255,0)) left / 40px 100% no-repeat,
    linear-gradient(90deg, rgba(255,255,255,0), var(--paper) 70%) right / 40px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(15,26,51,.12), transparent) left / 14px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(15,26,51,.12), transparent) right / 14px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
table.comp { width: 100%; border-collapse: collapse; min-width: 680px; background: var(--paper); }
.comp th, .comp td { text-align: left; padding: 15px 18px; vertical-align: middle; }
.comp thead th {
  background: var(--brand); color: #fff;
  font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
.comp thead th:last-child { background: linear-gradient(100deg, var(--blue), var(--cyan-txt)); }
.comp th:last-child, .comp td:last-child { min-width: 208px; }
.comp tbody tr + tr { border-top: 1px solid var(--rule-2); }
.comp tbody tr:nth-child(even) { background: var(--paper-2); }
.comp th[scope='row'] { font-size: 16.5px; font-weight: 620; letter-spacing: -.01em; }
.comp td { font-size: 16px; color: var(--ink-2); }
.comp td:last-child { color: var(--ink); font-weight: 600; background: rgba(30, 59, 139, .045); }
.marca { display: inline-flex; align-items: center; gap: 9px; }
.marca::before {
  content: ''; width: 8px; height: 8px; border-radius: 2px; flex: none;
  background: var(--ink-3);
}
.marca[data-estado='si']::before { background: #12a150; }
.marca[data-estado='no']::before { background: transparent; border: 1px solid var(--ink-3); }
.marca[data-estado='hibrido']::before { background: var(--cyan); box-shadow: 0 0 0 3px rgba(18, 141, 211, .18); }

/* ==========================================================================
   IMPACTO — el +18% y las tres barras de ROI, juntos y con la advertencia
   en el mismo lugar: son proyeccion, no medicion. Los titulos del deck lo
   dicen ('Proyectado', 'Estimado') y aca se conserva.
   ========================================================================== */
.impacto {
  margin-top: clamp(28px, 4vw, 44px);
  display: grid; gap: clamp(24px, 3vw, 40px);
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 780px) { .impacto { grid-template-columns: minmax(0, 1fr); } }

.cifra {
  background: linear-gradient(122deg, var(--brand) 0%, var(--blue) 52%, var(--cyan-txt) 100%);
  color: #fff; border-radius: 4px;
  padding: clamp(28px, 3.4vw, 40px) clamp(22px, 2.6vw, 30px);
  text-align: center;
}
.cifra__n {
  font: 500 clamp(44px, 6.2vw, 66px)/1 var(--mono);
  letter-spacing: -.04em;
  /* el espacio de la mono es de ancho fijo y deja un hueco entre las dos
     palabras mucho mayor que el interletrado ya apretado */
  word-spacing: -.16em;
}
.cifra__l { margin-top: 12px; font-size: 16px; color: rgba(255, 255, 255, .9); }
.cifra__nota {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .2);
  font: 400 10.5px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}

/* Las tres palancas de margen de la p7. Reemplazan a las barras de ROI:
   una barra codifica magnitud, y la magnitud es justo lo que no se afirma.
   Una lista nombra la palanca y de que lado del margen cae, que es lo que
   el deck si dice. Dos de ingresos y una de costos: el "simultaneamente"
   de la bajada se ve sin tener que prometer cuanto. */
.palancas { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 4px; }
.palanca {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding: 15px 17px; background: var(--paper);
}
.palanca__n { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.palanca__lado {
  flex: none; font: 500 10.5px/1 var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
}
.palanca__lado[data-lado='ingresos'] { color: var(--cyan-txt); }
.palanca__lado[data-lado='costos'] { color: var(--brand); }
.barra__relleno {
  height: 100%; border-radius: 2px;
  transform-origin: left center;
  background: linear-gradient(90deg, #97a5ba, #c3ccdb);
}
.barra__fila[data-destacado] .barra__nom { color: var(--brand); }
.barra__fila[data-destacado] .barra__val { color: var(--cyan-txt); }
.barra__fila[data-destacado] .barra__relleno {
  background: linear-gradient(90deg, var(--brand) 0%, var(--blue) 50%, var(--cyan) 100%);
}
/* EL unico movimiento de la pagina. Las barras crecen al entrar en cuadro:
   es donde el movimiento agrega informacion de verdad — se ve que 2.1 y 2.8
   por separado no llegan a 4.5 juntas. Estado por defecto = completa, asi
   que sin soporte no se pierde nada. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .barra__relleno {
      animation: crecer linear both;
      animation-timeline: view();
      animation-range: entry 12% cover 42%;
    }
    @keyframes crecer { from { transform: scaleX(.02); } to { transform: scaleX(1); } }
  }
}
.pie-nota {
  margin-top: 22px; padding-left: 16px;
  border-left: 2px solid var(--cyan);
  color: var(--ink-2); font-size: 16px; line-height: 1.62; font-style: italic;
}
.aviso {
  margin-top: 20px;
  font: 400 12px/1.6 var(--mono);
  color: var(--ink-2);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 13px 15px;
}
.seccion--tinte .aviso { background: var(--paper); }

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contacto {
  margin-top: clamp(28px, 4vw, 44px);
  display: grid; gap: clamp(28px, 3.4vw, 48px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  align-items: start;
}
@media (max-width: 860px) { .contacto { grid-template-columns: minmax(0, 1fr); } }

.form { display: grid; gap: 16px; }
.campo { display: grid; gap: 7px; }
.par { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .par { grid-template-columns: 1fr; } }
.campo label { font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.campo .req { color: var(--cyan-txt); }
.campo input, .campo select, .campo textarea {
  font-family: var(--fuente); font-size: 16px; color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 13px 14px;
  width: 100%;
  transition: border-color .16s, box-shadow .16s;
}
.campo textarea { resize: vertical; min-height: 116px; line-height: 1.55; }
.campo select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: #c3cddd; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--cyan-txt);
  box-shadow: 0 0 0 3px rgba(11, 109, 180, .22);
}
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
  outline: 2px solid var(--cyan-txt);
  outline-offset: 1px;
}
.consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; align-items: start; margin-top: 2px; }
.consent input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--brand); }
.consent label { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.form__enviar { justify-self: start; border: 0; cursor: pointer; }

.ficha {
  border: 1px solid var(--rule); border-radius: 4px;
  background: var(--paper);
  padding: clamp(22px, 2.6vw, 28px);
  display: grid; gap: 18px;
}
.ficha__t { font: 500 11px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); }
.ficha dl { display: grid; gap: 16px; }
.ficha dt { font: 400 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.ficha dd { margin: 0; font-size: 16.5px; overflow-wrap: anywhere; }
.ficha a { color: var(--brand); text-decoration: none; border-bottom: 1px solid var(--brand-12); }
.ficha a:hover { border-bottom-color: var(--brand); }

/* ==========================================================================
   PIE
   ========================================================================== */
.pie { background: var(--navy-900); color: rgba(255, 255, 255, .6); }
.pie__fila {
  max-width: var(--ancho); margin-inline: auto;
  padding: clamp(34px, 4vw, 48px) var(--marco);
  display: flex; flex-wrap: wrap; gap: 18px 32px;
  align-items: center; justify-content: space-between;
}
.pie__marca { font: 500 13px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.pie small { font: 400 12px/1.7 var(--mono); letter-spacing: .02em; }
.pie a { color: rgba(255, 255, 255, .82); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .22); }
.pie a:hover { border-bottom-color: rgba(255, 255, 255, .7); }

/* Una propuesta comercial se imprime. Que salga bien es parte del rubro. */
@media print {
  .nav, .form__enviar { display: none; }
  .hero { background: #fff; color: #000; }
  .hero::after { display: none; }
  .hero h1 em { color: #1e3b8b; }
  .hero__bajada, .juntura__que, .juntura__rotulo { color: #333; }
  .juntura__sello, .cruce { background: #eee; color: #000; }
  .seccion__cuerpo, .seccion__rail { border-color: #ccc; }
  .cifra { background: #eee; color: #000; }
  .cifra__nota { color: #444; }
  body { font-size: 11pt; }
}

/* ==========================================================================
   CELULAR — 720px para abajo.

   Lo de arriba se penso en desktop y en el telefono se notaba: el numero de
   cada item se comia 60px de los 390 disponibles, el cronograma dejaba el
   primer hito desalineado de los otros tres, y —lo peor— la tabla scrolleaba
   de costado con la columna 'Modelo Hibrido P&B' afuera de la pantalla. O
   sea que en el celular no se veia el argumento de venta.
   ========================================================================== */
@media (max-width: 720px) {
  /* nueve secciones a 60px arriba y abajo son 1080px de scroll en aire */
  :root { --aire: 46px; }

  .seccion__rail { padding: var(--aire) 0 0 14px; }
  .seccion__cuerpo { padding: 16px 0 var(--aire) 14px; }

  /* El numero pasa a ser un rotulo arriba del titulo en vez de una columna
     propia. Sigue codificando el orden y devuelve 60px de medida al texto. */
  .pilar, .paso {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px; padding: 18px 0;
  }
  .pilar__d, .paso__d { max-width: none; }

  /* CRONOGRAMA: en horizontal cada hito tenia borde a la izquierda menos el
     primero, asi que los cuatro no alineaban. Vertical de verdad: una sola
     linea y los cuatro puntos sobre ella. */
  .linea { display: block; border-top: 0; margin-top: 22px; }
  .hito, .hito:first-child {
    border-left: 1px solid var(--rule);
    padding: 0 0 24px 20px;
  }
  .hito:last-child { padding-bottom: 0; }
  .hito::before, .hito:first-child::before { left: -4px; top: 3px; }

  /* COMPARATIVA: de tabla a bloques. Cada modulo es una tarjeta con sus tres
     opciones una debajo de la otra, y el hibrido se ve sin scrollear. El
     data-col de cada celda repone el encabezado que se oculta. */
  .tablazo {
    overflow: visible; border: 0; border-radius: 0;
    background: none; padding: 0;
  }
  table.comp { display: block; min-width: 0; background: none; }
  .comp thead { display: none; }
  .comp tbody, .comp tr, .comp th, .comp td { display: block; width: auto; }
  .comp tbody tr,
  .comp tbody tr:nth-child(even) {
    background: var(--paper);
    border: 1px solid var(--rule); border-radius: 4px;
    margin-bottom: 12px; overflow: hidden;
  }
  .comp tbody tr + tr { border-top: 1px solid var(--rule); }
  .comp th[scope='row'] {
    background: var(--paper-2);
    border-bottom: 1px solid var(--rule);
    padding: 13px 15px; font-size: 15px;
  }
  .comp td, .comp td:last-child {
    min-width: 0; padding: 11px 15px; font-size: 14.5px;
    display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: 14px; align-items: baseline;
  }
  .comp td + td { border-top: 1px solid var(--rule-2); }
  .comp td::before {
    content: attr(data-col);
    font: 400 10px/1.4 var(--mono);
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-2); white-space: nowrap;
  }
  .comp td:last-child { background: rgba(30, 59, 139, .05); }
  .comp .marca { justify-content: flex-end; text-align: right; }

  /* el resto, mas ajustado */
  .modulo { padding: 20px 18px; }
  .paquete { padding: 20px 18px; }
  .cruce { padding: 20px 18px; }
  .impacto, .contacto { gap: 24px; }
  .aviso { padding: 11px 13px; }
}

/* =========================================================================
   Boceto C — fotografia. Anexo de estilos_.
   Se agrega AL FINAL de estilos.css, despues del bloque @media (max-width: 720px).
   No modifica ninguna regla existente: solo agrega.

   Cero JS. Las seis fotos son <img loading="lazy"> o background-image.
   Dos son background (hero y ejecucion) y no tocan el HTML.
   Cuatro son <img> y necesitan el snippet que esta en README.md.

   REGLA QUE NO SE ROMPE: ninguna foto queda sola debajo de texto. El
   degradado navy que ya existia sigue arriba, en el mismo orden de capas.
   Si se cambia una foto, el degradado no se toca.
   ========================================================================= */

/* ---------- 1 · HERO ----------
   La foto entra como capa de mas abajo del stack que ya tenia .hero. Las dos
   capas de arriba son las mismas de antes, sin un solo valor cambiado, asi
   que el contraste del h1 no se mueve: el degradado es opaco al 95% donde
   apoya el titular. */
.hero { background: var(--navy-900); }

/* La caja del fondo. Recorta y no recibe clicks. */
.hero__fondo {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* El velo: los MISMOS tres valores que el hero ya tenia, sin mover uno.
   95% de opaco donde apoya el titular, 82% del lado del render. Vive en el
   ::after de la caja y NO en la foto, asi que la foto puede moverse sin que
   el contraste del h1 cambie ni un punto. */
.hero__fondo::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(1100px 520px at 88% 8%, rgba(18, 141, 211, .30), transparent 62%),
    linear-gradient(104deg,
      rgba(10, 18, 41, .95) 0%,
      rgba(17, 30, 62, .90) 42%,
      rgba(26, 50, 117, .82) 100%);
}

/* La foto: el render de Blender. Sobresale 9% por lado para que el empuje
   no descubra el borde. Dos declaraciones por breakpoint a proposito: la
   primera es el webp para el que no entienda image-set, la segunda pone el
   avif donde se pueda. El avif pesa un tercio. */
.hero__foto {
  position: absolute; inset: -9%;
  display: block;
  background: url('img/juntura-760.webp') center / cover no-repeat;
  background-image: image-set(url('img/juntura-760.avif') type('image/avif'),
                              url('img/juntura-760.webp') type('image/webp'));
}
@media (min-width: 700px) {
  .hero__foto { background-image: url('img/juntura-1200.webp');
    background-image: image-set(url('img/juntura-1200.avif') type('image/avif'),
                                url('img/juntura-1200.webp') type('image/webp')); }
}
@media (min-width: 1100px) {
  .hero__foto { background-image: url('img/juntura-1600.webp');
    background-image: image-set(url('img/juntura-1600.avif') type('image/avif'),
                                url('img/juntura-1600.webp') type('image/webp')); }
}
@media (min-width: 1700px) {
  .hero__foto { background-image: url('img/juntura-2200.webp');
    background-image: image-set(url('img/juntura-2200.avif') type('image/avif'),
                                url('img/juntura-2200.webp') type('image/webp')); }
}

/* El unico movimiento nuevo de toda la pagina: al scrollear la primera
   pantalla, el pasillo avanza. Un momento, no efectos por todos lados.
   Cuesta 0 bytes: es la misma imagen con un transform.

   Va adentro de @supports porque sin scroll timeline la animacion correria
   con duracion 0 y saltaria directo al frame final. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__foto {
      animation: empuje linear both;
      animation-duration: auto;
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
    }
    @keyframes empuje {
      from { transform: scale(1); }
      to   { transform: scale(1.16); }
    }
  }
}

/* ---------- 3 · LA BANDA ----------
   Una franja horizontal, usada en #valor y en #paquetes. Va dentro de
   .seccion__cuerpo, asi que arranca en la costura y respeta el grid.
   aspect-ratio evita el salto de layout al cargar. */
.banda {
  margin: clamp(24px, 3.4vw, 36px) 0 0;
  border-radius: 4px;
  overflow: hidden;
  background: var(--rule-2);
}
.banda img {
  width: 100%; height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;   /* 16/7 recortaba 34% del alto y cortaba cabezas */
}
@media (max-width: 720px) {
  .banda img { aspect-ratio: 16 / 9; }
}

/* ---------- 4 · FOTO POR MODULO ----------
   Cada uno de los tres servicios lleva su foto arriba. .modulo ya es un
   flex column con padding: la foto tiene que salirse de ese padding para
   ir a ras del borde, y el gap del flex la separa del texto. */
.modulo__foto {
  margin: calc(-1 * clamp(22px, 2.6vw, 30px));
  margin-bottom: 2px;
  background: var(--rule-2);
}
.modulo__foto img {
  width: 100%;
  height: auto;          /* sin esto gana el atributo height del HTML y
                            aspect-ratio no hace nada: la foto sale vertical */
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
@media (max-width: 720px) {
  .modulo__foto { margin: -20px -18px 2px; }
}

/* ---------- 5 · IMPRESION ----------
   La propuesta se imprime. Las fotos de fondo no salen en print (el
   navegador no imprime background-image por defecto) y las <img> se
   dejan, que es lo correcto: aportan al documento impreso. */
@media print {
  .hero { background: #fff !important; }
  .hero__fondo { display: none !important; }
  .banda, .modulo__foto { break-inside: avoid; }
}

/* =========================================================================
   3D · UN lienzo para toda la pagina
   -------------------------------------------------------------------------
   Un solo canvas fijo, por encima del documento y sin capturar clicks. El
   JS dibuja SOLO dentro del rectangulo de cada [data-3d] usando scissor, y
   deja el resto transparente. Por eso el texto, los links y el formulario
   siguen siendo HTML y no hay que reimplementar nada adentro del canvas.

   El orden de capas del hero importa y no es libre:
       5  el lienzo 3D
       6  el velo  (.hero__fondo::after)
       7  el texto (.hero__caja)
   Si el velo quedara DEBAJO del lienzo, el pasillo se dibujaria sobre el
   titular a full brillo y el contraste se iria al demonio.
   El nav esta en 40, o sea siempre arriba de todo esto.
   ========================================================================= */
.escena3d {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 5;
  pointer-events: none;
}

/* .con-3d lo pone el JS reciEn cuando el contexto WebGL existe de verdad.
   Sin esa clase no cambia un solo pixel: quedan las fotos. */
.con-3d .hero__fondo { z-index: 6; }
.con-3d .hero__caja  { z-index: 7; }
.con-3d .hero__foto  { opacity: 0; transition: opacity .8s ease; }

/* El velo del hero, aflojado del lado derecho. El 0% no se toca: ahi apoya
   el h1 y ese 94% es lo que sostiene el contraste. Lo que se abre es el
   100%, que es donde no hay texto y donde vive el pasillo. */
.con-3d .hero__fondo::after {
  background:
    radial-gradient(1100px 520px at 88% 8%, rgba(18, 141, 211, .16), transparent 62%),
    linear-gradient(104deg,
      rgba(10, 18, 41, .94) 0%,
      rgba(17, 30, 62, .76) 46%,
      rgba(26, 50, 117, .30) 100%);
}

/* Las ranuras del cuerpo: se apaga la foto y queda el navy de fondo, que es
   sobre lo que se lee el modelo. La foto NO se borra del HTML: es el poster
   y vuelve sola si el 3D no arranca. */
/* display:none y NO opacity:0. Medido en el navegador: con opacity el
   browser igual se baja los cinco JPG -- 497 KB que nadie llega a ver
   nunca, porque el 3D los tapa. Con display:none, y como son loading=lazy,
   la imagen jamas entra en viewport y no se pide.
   El aspect-ratio va a la ranura para que al sacar el <img> no se caiga el
   alto y la pagina no salte. */
.con-3d .banda[data-3d] img,
.con-3d .modulo__foto[data-3d] img { display: none; }
.con-3d .banda[data-3d] { aspect-ratio: 16 / 9; }
.con-3d .modulo__foto[data-3d] { aspect-ratio: 3 / 2; }
.con-3d .banda[data-3d],
.con-3d .modulo__foto[data-3d] {
  background: linear-gradient(158deg, var(--navy-900) 0%, var(--navy-800) 62%, var(--navy-700) 100%);
}

/* Movimiento reducido: el JS dibuja un cuadro y para. Igual saco las
   transiciones para no dejar nada moviendose. */
@media (prefers-reduced-motion: reduce) {
  .con-3d .hero__foto,
  .con-3d .banda[data-3d] img,
  .con-3d .modulo__foto[data-3d] img { transition: none; }
}

@media print {
  .escena3d { display: none !important; }
  .con-3d .banda[data-3d] img,
  .con-3d .modulo__foto[data-3d] img { opacity: 1 !important; }
}