/*
 * sections.css — una zona por sección del diseño.
 *
 * Valores medidos sobre el frame 1217:328 del Figma (Inicio, 1440×3870).
 * Consume tokens.css y components.css.
 *
 * Criterio general del calco: el diseño está hecho con posiciones absolutas
 * dentro de un frame de 1440. Traducirlo a posiciones absolutas en CSS daría un
 * resultado idéntico a 1440 y roto en cualquier otro ancho. Así que se traduce
 * a flujo (grid y flex) preservando las medidas: mismo resultado a 1440, y
 * degradación razonable fuera de ahí.
 */

/* ══ Hero ══════════════════════════════════════════════════════ */
/*
 * Dos mitades: foto a la izquierda (768×708 en el diseño) y panel con degradado
 * blanco→lima a la derecha (703×674). En el Figma la foto sobresale del panel
 * por arriba; acá ambas mitades comparten alto para que no haya un escalón.
 */

/*
 * Las dos mitades llegan a los bordes de la ventana, pero la costura se queda
 * donde la pone el diseño respecto del frame centrado: la sangría se le suma a
 * la foto y el resto se lo lleva el panel. Escrito así y no con `737fr 703fr`
 * porque un reparto proporcional corre la costura con el ancho —a 2560 daba
 * 1310/1250— y el texto del panel, que va pegado a ella, se iba lejos de la
 * columna centrada del resto de la página.
 *
 * Hasta 1440 la sangría vale 0 y esto da exactamente lo mismo que el reparto
 * proporcional de antes, así que el media query de más abajo sigue valiendo tal
 * cual: siguen siendo dos columnas y nadie declara su celda.
 */
.z26-hero {
  display: grid;
  grid-template-columns: calc(var(--sangria) + var(--frame-util) * 737 / 1440) 1fr;
  align-items: stretch;
  min-height: 674px;
}

.z26-hero__media {
  position: relative;
  overflow: hidden;
}

.z26-hero__media img,
.z26-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * El padding va solo a la izquierda (82px, la posición del texto en el diseño).
 * En el Figma la caja de texto mide 639px arrancando en x=82, o sea llega a 721
 * dentro de un panel de 703: se desborda a propósito. Con padding simétrico el
 * texto disponible baja a 539px y el título envuelve en tres líneas en vez de dos.
 */
.z26-hero__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 14px;
  /* 237px es la distancia del borde superior del panel al título en el diseño. */
  padding: 237px 0 0 82px;
  background: var(--grad-hero);
}

/*
 * El tile del logo monta sobre la costura entre foto y panel, pero no centrado:
 * medido en el diseño ocupa 220×227 desde x=558, o sea 179px sobre la foto y
 * solo 41 sobre el panel. El panel empieza en x=737 y en y=116, de ahí los
 * offsets negativos.
 */
.z26-hero__logo {
  position: absolute;
  left: -179px;
  top: 217px;
  width: 220px;
  height: 227px;
  z-index: 2;
}

.z26-hero__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.z26-hero__titulo {
  font-family: var(--font-titulo);
  font-weight: var(--fw-regular);
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
  color: var(--c-verde-nuevo);
  max-width: 639px;
}

.z26-hero__bajada {
  font-family: var(--font-cifra); /* DM Sans, según el diseño. */
  font-size: var(--fs-bajada);
  line-height: var(--lh-bajada);
  letter-spacing: var(--ls-bajada);
  color: var(--c-verde-oscuro);
  max-width: 512px;
  margin: 0;
}

/* 16px deja el botón en y=533, la posición del diseño. */
.z26-hero__cta {
  margin-top: 16px;
  align-self: flex-start;
}

/* ══ Cifras ════════════════════════════════════════════════════ */
/*
 * Banda con degradado lima. Cinco cifras: tres arriba y dos abajo, centradas,
 * como en el diseño (no un grid de 5 columnas).
 */

.z26-cifras {
  background: var(--grad-cifras);
  padding-block: 42px 74px;
}

.z26-cifras__intro {
  font-family: var(--font-titulo);
  font-size: var(--fs-lead);
  line-height: 1.35;
  letter-spacing: 0.54px;
  text-align: center;
  color: var(--c-verde-oscuro);
  max-width: 1057px;
  margin: 0 auto 48px;
}

/* El destacado del párrafo va en Roboto Bold verde. */
.z26-cifras__intro strong,
.z26-cifras__intro em {
  font-weight: var(--fw-bold);
  font-style: normal;
  color: #00A475;
}

.z26-cifras__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 48px 51px;
}

/*
 * La tira de la portada va en tres y dos, no en cuatro y una: en el diseño los
 * números de la primera fila caen en 384, 707 y 1055, y +1,500 baja a la
 * segunda junto al 7. Con esta caja entran tres bloques de 284 (954 con sus
 * separaciones) y el cuarto no, que es lo que fuerza el corte.
 */
.z26-cifras .z26-cifras__grid {
  max-width: 960px;
  margin-inline: auto;
}

/* 284px es el ancho de cada bloque de cifra en el diseño. */
.z26-cifra {
  flex: 0 1 284px;
  text-align: center;
}

.z26-cifra__numero {
  display: block;
  font-family: var(--font-cifra); /* DM Sans Bold. */
  font-weight: var(--fw-bold);
  font-size: var(--fs-cifra);
  line-height: 1;
  color: var(--c-verde-fresco);
  margin-bottom: 18px;
}

.z26-cifra__label {
  display: block;
  font-family: var(--font-titulo);
  font-weight: var(--fw-medium); /* Roboto Medium. */
  font-size: var(--fs-texto-lg);
  line-height: 25px;
  letter-spacing: 0.5px;
  color: var(--c-verde-nuevo);
}

/* ══ Qué hacemos ═══════════════════════════════════════════════ */
/*
 * Título centrado y dos columnas separadas por una línea vertical. Cada columna
 * lleva su lockup (zenit ventures / zenit estrategia), un párrafo con la primera
 * frase destacada, y un botón.
 */

/*
 * En el Figma el título arranca a 33px del inicio de la sección y las columnas
 * terminan 55px antes del final. Con el padding genérico la sección salía 108px
 * más alta, y eso corría todo lo de abajo de la página.
 */
.z26-qh {
  padding-block: 33px 63px;
  background: var(--c-white);
}

.z26-qh__titulo {
  text-align: center;
  margin-bottom: 25px;
}

.z26-qh__grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 56px;
  align-items: start;
}

/* La línea divisoria del diseño (Vector 3, 295px de alto). */
.z26-qh__divisor {
  align-self: center;
  width: 1px;
  height: 295px;
  background: var(--c-verde-fresco);
}

.z26-qh__col {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: flex-start;
  max-width: 504px;
}

/*
 * min() y no max-width a secas: 395px es la medida del diseño, pero en un
 * viewport de 390 el logo desbordaba el contenedor y aparecía scroll horizontal.
 */
.z26-qh__logo {
  max-width: min(395px, 100%);
  height: auto;
}

.z26-qh__texto {
  font-family: var(--font-titulo);
  font-size: var(--fs-texto-lg);
  line-height: var(--lh-lead);
  letter-spacing: 0.5px;
  color: var(--c-black);
  margin: 0;
}

/*
 * La primera frase del párrafo va destacada e inline, no como título aparte:
 * en el diseño es un solo bloque de texto con dos estilos.
 */
.z26-qh__texto strong {
  font-weight: var(--fw-bold);
  font-size: var(--fs-lead);
  color: var(--c-verde-fresco);
}

/* La columna de estrategia usa el verde profundo en su destacado. */
.z26-qh__col--estrategia .z26-qh__texto strong {
  color: var(--c-verde-nuevo);
}

/* ══ Programas ═════════════════════════════════════════════════ */
/*
 * Degradado lima→blanco vertical, título centrado, texto y tres cards fijas.
 * Sin carrusel: el diseño muestra tres cards estáticas.
 */

/*
 * 37 abajo: el botón sobresale 33px de la card y en el diseño el cielo estrellado
 * de la sección siguiente arranca 42px más abajo del botón, en y=2921. La imagen
 * del cielo se monta sobre el final de esta sección, así que el corte visual está
 * ahí y no en los 2994 donde termina el rectángulo del degradado.
 */
.z26-programas {
  background: var(--grad-prog);
  padding-block: 46px 37px;
}

.z26-programas__titulo {
  text-align: center;
  margin-bottom: 38px;
}

.z26-programas__texto {
  font-family: var(--font-titulo);
  font-size: 1.4375rem; /* 23px */
  line-height: 2rem;    /* 32px */
  letter-spacing: 0.5px;
  text-align: center;
  color: var(--c-verde-oscuro);
  max-width: 1156px;
  margin: 0 auto 64px;
}

/* Tres columnas de 396px con 21px de gap = 1230px, el ancho del contenedor. */
.z26-programas__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 21px;
  align-items: stretch;
}

/*
 * El botón monta sobre el borde inferior de la card, no va debajo: medido en el
 * diseño arranca en y=2826 mientras la card termina en 2846, o sea entra 20px y
 * sobresale 33 por abajo. Al tener fondo sólido, tapa el borde donde lo cruza.
 */
.z26-programa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.z26-programa .z26-card {
  width: 100%;
  flex: 1;
}

.z26-programa > .z26-btn {
  margin-top: -20px;
  position: relative;
  z-index: 1;
}

/* ══ CTA + formulario ══════════════════════════════════════════ */
/*
 * Imagen de cielo estrellado de fondo, con un bloque de texto sobre banda verde
 * a la izquierda y la card del formulario a la derecha.
 */

/*
 * La sección son dos franjas, no una imagen de fondo completa. Medido sobre el
 * render: el cielo estrellado arranca en y=2921 y llega hasta 3234, y de ahí a
 * 3501 hay una banda verde #05A278 lisa. O sea la sección va de 2921 a 3502:
 * 581 de alto, con 313 de cielo y 268 de verde.
 *
 * El texto "¡Hablemos!" va sobre la banda verde y la card del formulario cruza
 * las dos franjas, con 87px de cielo sobre ella.
 */
.z26-cta {
  position: relative;
  min-height: 581px;
  background: var(--c-verde-fresco);
  overflow: hidden;
}

.z26-cta__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 313px;
  z-index: 0;
}

.z26-cta__bg img,
.z26-cta__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * En el diseño la card del formulario llega hasta 30px del borde derecho del
 * viewport (x=889..1410), o sea se sale del contenedor de 1230. Por eso esta
 * sección usa su propio ancho en vez del contenedor general.
 */
.z26-cta__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 521px;
  gap: 48px;
  align-items: center;
  /*
   * Esta sección no usa el ancho del contenedor: en el diseño la card del
   * formulario llega hasta 30px del borde derecho (x=889..1410), más afuera que
   * el resto del contenido. Se anula el máximo del contenedor y se fija el
   * padding asimétrico que pide el diseño.
   */
  max-width: none;
  /*
   * 163px a la derecha, medido sobre el render: la card del formulario ocupa
   * x=757..1277, o sea queda a 163 del borde derecho y no pegada a él.
   */
  padding-inline: var(--gutter) 163px;
  /* El formulario arranca 87px bajo el inicio del cielo, en y=3008. */
  padding-block: 87px 34px;
  /* Las columnas se alinean arriba: el formulario cruza las dos franjas. */
  align-items: start;
}

/*
 * El texto va sobre la banda verde, que empieza a 240px del inicio de la sección.
 * Figma recorta las cajas de texto a la altura de mayúscula (text-box-trim), así
 * que sus coordenadas son del trazo y no de la caja de línea. Medido sobre el
 * render: la mayúscula del título arranca en y=3284 y la primera línea del
 * párrafo en 3344, o sea 60px entre ambas.
 */
.z26-cta__intro {
  margin-top: 271px;
  padding-left: 95px;
}

.z26-cta__intro {
  color: var(--c-white);
}

/* Nodo 1217:434: Roboto ExtraBold 48/48 blanco, y 24px hasta el párrafo. */
.z26-cta__titulo {
  font-family: var(--font-titulo);
  font-weight: var(--fw-extra);
  font-size: 3rem;
  line-height: 3rem;
  letter-spacing: normal;
  color: var(--c-white);
  /* 9 y no los 24 del diseño: el line-height de 48 ya aporta el resto. */
  margin-bottom: 9px;
}

.z26-cta__titulo em {
  color: var(--c-verde-fluor);
}

/*
 * Nodo 1217:436: Roboto Regular 22/32 blanco, caja de 462. Estaba en Inter 16/26
 * con 420 de ancho, o sea un tercio más chico y cortando en otro punto.
 */
.z26-cta__texto {
  font-family: var(--font-titulo);
  font-size: 1.375rem;
  line-height: 2rem;
  color: var(--c-white);
  max-width: 462px;
  margin: 0;
}

/* ══ Contacto ══════════════════════════════════════════════════ */
/*
 * Nodo 1217:772. Dos columnas a sangre, sin contenedor: el panel verde llega
 * hasta el borde derecho del viewport (566px de ancho en el diseño) y el
 * degradado ocupa el resto.
 */

/*
 * El degradado va de lima arriba a blanco abajo, en vertical: medido en el
 * export, la columna izquierda arranca en rgb(197,249,85) y cierra en
 * rgb(254,254,252). Antes usaba --grad-cifras, que es diagonal a 285deg, y
 * dejaba el lima abajo a la derecha: el degradado se veía invertido.
 */
/* El calc mantiene la costura donde la pone el diseño; el porqué está en el hero
 * del inicio, al principio de este archivo. */
.z26-contacto {
  display: grid;
  grid-template-columns: calc(var(--sangria) + var(--frame-util) * 874 / 1440) 1fr;
  align-items: center;
  min-height: 475px;
  background: var(--grad-prog);
}

.z26-contacto__intro {
  /* Posición del texto medida en el diseño. */
  padding: 0 64px 0 100px;
}

.z26-contacto__titulo {
  font-family: var(--font-titulo);
  font-weight: var(--fw-bold);
  font-size: 4.0625rem; /* 65px */
  line-height: 0.95;
  letter-spacing: -0.52px;
  color: var(--c-verde-fresco);
  /* 640px es donde el diseño corta: "¿Tienes un proyecto" / "en mente?" */
  max-width: 640px;
  margin-bottom: 28px;
}

.z26-contacto__texto {
  font-family: var(--font-titulo);
  font-size: 1.75rem; /* 28px */
  line-height: 2.25rem; /* 36px */
  letter-spacing: 0.5px;
  color: var(--c-verde-oscuro);
  margin: 0;
}

.z26-contacto__panel {
  align-self: stretch;
  display: flex;
  align-items: center;
  background: var(--c-verde-fresco);
}

.z26-contacto__panel .z26-form {
  width: 100%;
}

@media (max-width: 900px) {
  .z26-contacto {
    grid-template-columns: 1fr;
  }

  .z26-contacto__intro {
    padding: 48px var(--gutter);
  }

  .z26-contacto__panel {
    padding-block: 8px;
  }
}

/* ══ Digital: hero ═════════════════════════════════════════════ */
/*
 * Nodos 1217:725-727. Banda de 641px sobre verde oscuro. Título Roboto Bold
 * 59/65 blanco con el énfasis en itálica lima; a la derecha un ícono y un
 * párrafo con la primera frase destacada en lima 33px.
 */

.z26-dhero {
  background: var(--c-verde-oscuro);
  min-height: 641px;
  display: flex;
  align-items: center;
}

/*
 * 567 y 484 son los anchos de las dos cajas de texto en el diseño. Van como
 * proporciones y no como "567fr 1fr", que daría una segunda columna diminuta.
 */
/*
 * Caja de 1197 y no la de 1230 del contenedor común: en el export el título
 * arranca en 132, el destello en 758 y el texto en 849, y con la caja ancha el
 * título salía 27px antes y el destello 36 después.
 */
.z26-dhero__inner {
  max-width: calc(1197px + var(--gutter) * 2);
  display: grid;
  grid-template-columns: 580fr 561fr;
  gap: 56px;
  align-items: center;
}

.z26-dhero__titulo {
  font-family: var(--font-titulo);
  font-weight: var(--fw-bold);
  font-size: 3.6875rem; /* 59px */
  line-height: 4.0625rem; /* 65px */
  letter-spacing: 0.5px;
  color: var(--c-white);
}

.z26-dhero__titulo em {
  color: var(--c-verde-fluor);
  font-weight: var(--fw-bold);
}

/*
 * 64 de separación: el destello cae en 758 y el texto arranca en 849.
 *
 * El bloque no arranca a la altura del título. Medido sobre el export, contra el
 * inicio del hero: el texto empieza en 257 y el destello en 277, mientras que
 * `align-items: start` los dejaba a los dos en 245. De ahí los dos empujones de
 * abajo — el del aside mueve las dos piezas, el del destello lo baja a su lugar.
 *
 * Va como `top` y no como padding porque el aside está centrado en su fila: un
 * padding lo hace más alto y el centrado devuelve la mitad del empujón.
 */
.z26-dhero__aside {
  position: relative;
  top: 12px;
  display: grid;
  grid-template-columns: 27px 1fr;
  gap: 64px;
  align-items: start;
}

/*
 * El destello no se alinea con el borde del texto: en el diseño cae 20px más
 * abajo, a la altura del hueco entre la primera y la segunda línea.
 */
.z26-dhero__icono {
  width: 27px;
  height: auto;
  margin-top: 25px;
}

.z26-dhero__texto {
  font-family: var(--font-titulo);
  font-weight: var(--fw-medium);
  font-size: 1.4375rem; /* 23px */
  line-height: 2.4375rem; /* 39px */
  letter-spacing: 0.5px;
  color: var(--c-white);
  margin: 0;
}

.z26-dhero__texto strong {
  font-size: 2.0625rem; /* 33px */
  font-weight: var(--fw-medium);
  color: var(--c-verde-fluor);
}

/* ══ Bloques de producto ═══════════════════════════════════════ */
/*
 * Nodos 1217:728, 740 y 748. Un solo componente con tres pieles. La imagen mide
 * 1240 y el par título/texto 1101, ambos centrados: en el diseño arrancan en
 * x=100 y x=149 respectivamente, que a 1440 es prácticamente centrado.
 */

/*
 * El aire de arriba y abajo lo pone cada piel: el diseño no usa una medida
 * común — 128/85 en el bloque blanco, 30/34 en el verde y 42/61 en el lima —, y
 * de ahí salen las tres alturas distintas del export (896, 820 y 766). Este
 * valor base solo aplica si algún día se agrega una piel nueva.
 */
.z26-bloque {
  padding-block: 46px 64px;
}

.z26-bloque__media {
  /* El padding se suma, no se resta: si no, la imagen sale de 1144 y no de 1240. */
  max-width: calc(1240px + var(--gutter) * 2);
  margin: 0 auto 61px;
  padding-inline: var(--gutter);
}

/*
 * El diseño recorta las imágenes a 1240×420 con una máscara. Sin fijar la
 * proporción, cada foto se muestra con su aspecto natural (las de origen son de
 * 4096×2731) y los bloques quedan 400px más altos de lo diseñado.
 */
.z26-bloque__media img {
  width: 100%;
  aspect-ratio: 1240 / 420;
  object-fit: cover;
  border-radius: 37px; /* Medido en la esquina de la pieza del export. */
}

/*
 * La caja mide 1156 y no 1101: el ancla es dónde arranca el texto de la derecha,
 * que en el export cae en 685 y 687 en los dos bloques donde se puede medir,
 * mientras el sitio lo empujaba a 738. Con esta caja el título arranca en 142 y
 * el texto en 685, como el diseño.
 */
.z26-bloque__grid {
  max-width: calc(1156px + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 513fr 613fr;
  gap: 30px;
  align-items: start;
}

/*
 * 52px y no 60: midiendo palabra por palabra contra el export ("Yakana:" 188 y
 * "Plataforma" 257) el sitio salía 13% grande. Además con 60 la primera línea
 * pedía 525 en una columna de 520 y el título se partía en tres líneas donde el
 * diseño usa dos.
 */
.z26-bloque__titulo {
  font-family: var(--font-titulo);
  font-weight: var(--fw-regular);
  font-size: 3.25rem; /* 52px */
  line-height: 1.15;
  letter-spacing: 0.5px;
}

.z26-bloque__cuerpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

/*
 * El párrafo no llena su columna de 613, y cada bloque del diseño usa un ancho
 * distinto: la línea más larga mide 513 en el blanco, 542 en el verde y 580 en
 * el lima. El tope va por piel porque con una sola medida los tres cortaban en
 * distintos lugares que el export y los bloques cambiaban de alto.
 */
.z26-bloque__texto {
  font-family: var(--font-titulo);
  font-size: var(--fs-texto-lg);
  line-height: 1.5625rem; /* 25px */
  letter-spacing: 0.5px;
  max-width: 548px;
  margin: 0;
}

.z26-bloque--blanco .z26-bloque__texto {
  max-width: 530px;
}

.z26-bloque--lima .z26-bloque__texto {
  max-width: 590px;
}

.z26-bloque__texto strong {
  font-weight: var(--fw-bold);
}

/* Piel 1: fondo blanco, título oscuro con énfasis verde. */
.z26-bloque--blanco {
  background: var(--c-white);
  padding-block: 128px 85px;
}

.z26-bloque--blanco .z26-bloque__titulo {
  color: var(--c-verde-oscuro);
}

.z26-bloque--blanco .z26-bloque__titulo em {
  color: var(--c-verde-fresco);
}

.z26-bloque--blanco .z26-bloque__texto {
  color: var(--c-black);
}

/* Piel 2: fondo verde, todo en claro. */
.z26-bloque--verde {
  background: var(--c-verde-fresco);
  padding-block: 30px 34px;
}

.z26-bloque--verde .z26-bloque__titulo {
  color: var(--c-white);
}

.z26-bloque--verde .z26-bloque__titulo em {
  color: var(--c-verde-claro);
}

.z26-bloque--verde .z26-bloque__texto {
  color: var(--c-white);
}

/* Piel 3: degradado lima descendente. */
.z26-bloque--lima {
  background: linear-gradient(180deg, #C5F955 0%, #F5FEE2 100%);
  padding-block: 42px 61px;
}

.z26-bloque--lima .z26-bloque__titulo {
  color: var(--c-verde-oscuro);
}

.z26-bloque--lima .z26-bloque__titulo em {
  color: var(--c-verde-fresco);
}

.z26-bloque--lima .z26-bloque__texto {
  color: var(--c-black);
}

@media (max-width: 1024px) {
  .z26-dhero__inner,
  .z26-bloque__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .z26-dhero {
    min-height: 0;
    padding-block: 56px;
  }
}

/* ══ Quienes somos ═════════════════════════════════════════════ */
/*
 * Geometría del frame 1217:542, con las coordenadas x que da la metadata:
 *   hero          116..737   foto 0..795 · panel Content en x=795, 645 de ancho
 *   grafismo Z    x=151  y=367.5  222.7x242.4   (nodo 1217:567)
 *   título        x=398  y=411    399x144       (nodo 1217:555)
 *   banda intro   737..1031  (294 de alto, nodo 3005:1333)
 *   cielo         1031..1514 (483 de alto, nodo 1217:551)
 *   equipo        1509..2215 (706 de alto, nodo 1217:544)
 */

/* La foto ocupa 795 y el panel 645, no al revés. El porqué del calc está en el
 * hero del inicio, más arriba en este archivo. */
.z26-qhero {
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--sangria) + var(--frame-util) * 795 / 1440) 1fr;
  min-height: 621px;
}

.z26-qhero__media {
  position: relative;
  overflow: hidden;
}

.z26-qhero__media img,
.z26-qhero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * Grafismo de la Z sobre la foto, en las coordenadas del nodo. El selector lleva
 * el ancestro a propósito: sin él, `.z26-qhero__media img` gana por especificidad
 * y estira el grafismo a 795×621 como si fuera la foto.
 */
/*
 * El 151 es la x del nodo, medida desde el borde del frame. Con la página a
 * sangre ese borde ya no es el de la ventana, así que sola dejaba el grafismo
 * clavado a la izquierda del navegador, lejos de la columna centrada.
 *
 * No se puede usar --sangria acá: su 100% se resolvería contra la columna de la
 * foto y no contra la página. Pero la sangría se puede deducir del ancho de la
 * propia columna, que mide sangría + 795: de ahí el `100% - 644px`, que es
 * sangría + 151. Por debajo de 1440 ese término se queda corto y gana el 151
 * pelado, que es exactamente lo que había antes.
 */
.z26-qhero .z26-qhero__z {
  position: absolute;
  left: max(151px, 100% - 644px); /* 644 = 795 - 151 */
  top: 252px; /* 367.5 - 116, el inicio de la sección */
  width: 222.7px;
  height: 242.4px;
  z-index: 2;
}

/*
 * Título en las coordenadas del nodo: x=398, y=411. Roboto 65/65, con "Quienes"
 * en blanco y el énfasis en itálica lima.
 *
 * Con el mismo max() que el grafismo, y por el mismo motivo. Acá 397 = 795 - 398.
 */
.z26-qhero__titulo {
  position: absolute;
  left: max(398px, 100% - 397px);
  top: 295px; /* 411 - 116 */
  width: 399px;
  z-index: 3;
  font-family: var(--font-titulo);
  font-weight: var(--fw-regular);
  font-size: 4.0625rem; /* 65px */
  line-height: 4.0625rem;
  letter-spacing: 0.5px;
  color: var(--c-white);
  max-width: none;
}

.z26-qhero__titulo em {
  font-weight: var(--fw-bold);
  font-style: italic;
  color: var(--c-verde-fluor);
}

.z26-qhero__panel {
  display: flex;
  align-items: flex-start;
  /* El texto arranca en x=46 y y=278 dentro del panel. */
  padding: 278px 0 0 46px;
  background: var(--c-verde-fresco);
}

/* Nodo 3061:1329: Roboto Bold Italic 36/42, caja de 483. */
.z26-qhero__texto {
  font-family: var(--font-titulo);
  font-weight: var(--fw-bold);
  font-style: italic;
  font-size: 2.25rem;
  line-height: 2.625rem;
  letter-spacing: 0.5px;
  color: var(--c-white);
  width: 483px;
  max-width: 100%;
  margin: 0;
}

/* Banda de intro: 294 de alto, texto de 976 en y=807. */
.z26-qintro {
  background: var(--grad-prog);
  min-height: 294px;
  display: flex;
  align-items: center;
  padding-block: 40px;
}

.z26-qintro__texto {
  font-family: var(--font-titulo);
  font-weight: var(--fw-medium);
  font-style: italic;
  font-size: 1.8125rem; /* 29px */
  line-height: 2.1875rem; /* 35px */
  letter-spacing: 0.5px;
  text-align: center;
  color: var(--c-verde-nuevo);
  max-width: 976px;
  margin: 0 auto;
}

.z26-qintro__texto strong {
  font-weight: var(--fw-bold);
  color: var(--c-verde-fresco);
}

/* Cielo estrellado: 483 de alto. */
.z26-qbanda img,
.z26-qbanda video {
  width: 100%;
  height: 483px;
  object-fit: cover;
  display: block;
}

/* ── Equipo ──────────────────────────────────────────────────── */
/*
 * Nodo 1217:544: la banda mide 706 de alto (1509..2215). Dentro:
 *   título   x=90   y=1586  1215x76
 *   intro    x=128  y=1673  1177x81
 *   fotos    x=234, 483, 732, 981 · y=1792 · 234x234  → 4 de 234 con 15 de gap
 *   placas   y=2023  234x70
 *   badge    y=1982  28x27, sobre el borde derecho de la foto
 */

/*
 * 122px abajo: en el nodo 1217:544 la placa de la última fila termina en 2093 y la
 * sección cierra en 2215. Estaba en 0 y las placas quedaban pegadas al footer.
 */
.z26-equipo {
  background-image: var(--grad-equipo);
  padding-block: 77px 122px;
  color: var(--c-white);
}

.z26-equipo__titulo {
  text-align: center;
  color: var(--c-white);
  margin-bottom: 11px;
}

.z26-equipo__titulo em {
  color: var(--c-verde-fluor);
}

/*
 * Caja de 1177 como el nodo 1217:549. El reparto en dos líneas de 801 y 897 no
 * sale de este ancho: son dos párrafos distintos en el Figma, y acá lo hace el
 * <br class="z26-quiebre"> que trae el contenido.
 */
.z26-equipo__texto {
  font-family: var(--font-titulo);
  font-size: var(--fs-texto-md);
  line-height: var(--lh-texto-md);
  letter-spacing: 0.5px;
  text-align: center;
  color: var(--c-white);
  max-width: 1177px;
  margin: 0 auto 50px;
}

/* Cuatro columnas de 234 con 15px de gap, como en el diseño. */
.z26-equipo__grid {
  display: grid;
  grid-template-columns: repeat(4, 234px);
  justify-content: center;
  gap: 32px 15px;
}

.z26-persona__foto {
  position: relative;
  width: 234px;
  height: 234px;
  overflow: hidden;
}

.z26-persona__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Badge de LinkedIn: 28×27 a 22px del borde derecho y 17 del inferior (nodo 1217:583). */
.z26-persona__li {
  position: absolute;
  right: 22px;
  bottom: 17px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 27px;
  background: var(--c-verde-vivo);
  color: var(--c-white);
  border-radius: 4px;
  transition: background var(--t-fast);
}

.z26-persona__li:hover {
  background: var(--c-verde-nuevo);
}

/* La placa se monta sobre el borde inferior de la foto, como en el diseño. */
.z26-persona__placa {
  position: relative;
  margin-top: -3px;
  min-height: 90px;
  padding: 10px 8px;
  background: var(--c-verde-claro);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.z26-persona__nombre,
.z26-persona__cargo {
  font-family: var(--font-titulo);
  letter-spacing: 0.5px;
  color: var(--c-verde-oscuro);
  display: block;
}

.z26-persona__nombre {
  font-size: 1.25rem; /* 20px */
  line-height: 1.35;
}

.z26-persona__cargo {
  font-size: 0.9375rem; /* 15px */
  line-height: 1.2;
}

@media (max-width: 1024px) {
  .z26-qhero {
    grid-template-columns: 1fr;
    /* Los 621px son el alto de las dos mitades lado a lado; apiladas, sobra. */
    min-height: 0;
  }

  /*
   * `min-width: 0` en las dos celdas: sin esto la sección se iba a 515px de
   * ancho dentro de un viewport de 390 y el texto del panel quedaba cortado por
   * la derecha.
   *
   * Es la trampa de siempre con grid: una pista `1fr` no baja del min-content de
   * su contenido, y el párrafo del panel lleva `width: 483px`. Su `max-width:
   * 100%` no lo salvaba, porque ese 100% se resuelve contra un ancho de celda
   * que a su vez depende del hijo. Se corta la circularidad acá y se le devuelve
   * el ancho fluido al párrafo.
   */
  .z26-qhero__media,
  .z26-qhero__panel {
    min-width: 0;
  }

  .z26-qhero__texto {
    width: 100%;
    /* 36px de bold itálico dejan tres palabras por línea en un teléfono. */
    font-size: 1.75rem;
    line-height: 2.125rem;
  }

  .z26-qhero__media {
    aspect-ratio: 16 / 10;
  }

  /*
   * La franja es un video de 1920×644 (casi 3:1). Recortarlo a 483px de alto en
   * una pantalla de 390 deja ver una tajada central que no se entiende y ocupa
   * media pantalla; a 240 la banda conserva su papel de respiro entre secciones.
   */
  .z26-qbanda img,
  .z26-qbanda video {
    height: 240px;
  }

  /*
   * `top: auto` es imprescindible: el título conserva el `top: 295px` del calco
   * y, junto al `bottom` de acá, la caja quedaba estirada entre los dos bordes.
   * Como la foto apilada mide ~244px de alto, ese top caía por debajo de ella y
   * "Quienes" se veía cortado contra el borde inferior.
   */
  .z26-qhero__titulo {
    top: auto;
    right: var(--gutter);
    left: var(--gutter);
    bottom: 24px;
    width: auto;
    font-size: 3rem;
    line-height: 3.25rem;
  }

  /*
   * El grafismo va en las coordenadas de la foto de 795×621; en una foto de 390
   * caía fuera del recorte. Se reubica arriba a la derecha, que es la esquina
   * que el título deja libre, y baja de tamaño en proporción.
   */
  .z26-qhero .z26-qhero__z {
    left: auto;
    right: var(--gutter);
    top: 24px;
    width: 116px;
    height: auto;
  }

  .z26-qhero__panel {
    padding: 40px var(--gutter);
  }

  .z26-equipo__grid {
    grid-template-columns: repeat(auto-fit, 234px);
  }
}

@media (max-width: 560px) {
  .z26-qhero__titulo {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .z26-qhero .z26-qhero__z {
    width: 88px;
  }

  .z26-qbanda img,
  .z26-qbanda video {
    height: 180px;
  }

  /*
   * El equipo va de a dos, no de a uno.
   *
   * En una columna las fotos mantenían sus 234px fijos y quedaban centradas con
   * 60px muertos a cada lado, y las diez personas estiraban la página a casi
   * 3.800px de scroll. De a dos, la foto pasa a fluida (cuadrada, como el
   * diseño), llena el ancho útil y la sección mide la mitad.
   */
  .z26-equipo__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    gap: 24px 12px;
  }

  .z26-persona__foto {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  /* El badge vuelve a su esquina: los 22/17 son de una foto de 234. */
  .z26-persona__li {
    right: 10px;
    bottom: 10px;
  }

  .z26-persona__placa {
    min-height: 64px;
    padding: 8px 6px;
  }

  .z26-persona__nombre {
    font-size: 1rem;
  }

  .z26-persona__cargo {
    font-size: 0.8125rem;
  }
}

/* ══ Hero de solo texto ════════════════════════════════════════ */
/* Nodos 1217:615-618. Roboto 37/45 centrado, destacados en lima. */

/*
 * Hero de solo texto (nodo 1217:615). El texto arranca en y=295 y el destello en
 * y=504, así que el ritmo va en padding explícito: centrar con flex dejaba el
 * conjunto alto y el destello pegado al texto.
 */
.z26-thero {
  background: var(--c-verde-oscuro);
  min-height: 547px;
  padding-block: 179px 132px;
  text-align: center;
}

.z26-thero__texto {
  font-family: var(--font-titulo);
  font-size: 2.3125rem; /* 37px */
  line-height: 2.8125rem; /* 45px */
  letter-spacing: 0.5px;
  color: var(--c-white);
  max-width: 950px;
  margin: 0 auto 74px;
}

.z26-thero__texto strong {
  font-weight: var(--fw-bold);
  color: var(--c-verde-fluor);
}

.z26-thero__icono {
  width: 27px;
  margin-inline: auto;
}

/* ══ Áreas con métricas ════════════════════════════════════════ */
/*
 * Nodos 1217:613 y 1217:646 (ventures), 1217:597 y 1217:599 (estrategia).
 *
 * El contenido no se alinea con el contenedor de 1230: el diseño lo arranca en
 * x=155 y pone la línea divisoria en x=852. De ahí el padding-left de 50 sobre
 * el contenedor (105 + 50 = 155) y la primera columna de 697 (155 → 852).
 */

.z26-area__grid {
  display: grid;
  grid-template-columns: 697px minmax(0, 1fr);
  /* Suma al gutter del contenedor en vez de pisarlo: 105 + 50 = 155. */
  padding-left: calc(var(--gutter) + 50px);
  align-items: start;
}

.z26-area__logo {
  display: block;
  height: auto;
  margin-bottom: 0;
}

.z26-area__lead {
  font-family: var(--font-titulo);
  font-weight: var(--fw-bold);
  font-size: 1.5rem; /* 24px */
  letter-spacing: 0.5px;
  margin: 0;
}

.z26-area__texto {
  font-family: var(--font-titulo);
  font-size: var(--fs-texto-lg);
  line-height: var(--lh-texto-md);
  letter-spacing: 0.5px;
  margin: 0;
}

/*
 * La línea divisoria no empieza donde empiezan las métricas: en ventures arranca
 * 24px más arriba y en estrategia 1px. Por eso va en un pseudo-elemento con su
 * propio alto, y no como border-left de la lista.
 */
.z26-area__metricas {
  position: relative;
  display: grid;
  gap: 0;
  padding-left: 29px;
}

.z26-area__metricas::before {
  content: '';
  position: absolute;
  left: 0;
  width: 1px;
}

/*
 * Número 60/76 y label 20/32 dan los ~108px que separan cada métrica.
 * El padding-left de 32 es el de los bloques de auto-layout del Figma: deja la
 * cifra en x=913 (ventures) y x=902 (estrategia), medido sobre la tinta.
 */
.z26-metrica {
  padding: 0 0 0 32px;
}

.z26-metrica__numero {
  display: block;
  font-family: var(--font-cifra); /* DM Sans Bold 60/76. */
  font-weight: var(--fw-bold);
  font-size: 3.75rem;
  line-height: 4.75rem;
  letter-spacing: 0.5px;
}

.z26-metrica__label {
  display: block;
  font-family: var(--font-cifra);
  font-size: var(--fs-texto-lg);
  line-height: 2rem;
  letter-spacing: 0.5px;
}

/* ── Ventures: banda que baja de blanco a lima ─────────────── */

.z26-area--lima {
  background: var(--grad-area-lima);
  color: var(--c-black);
  padding-block: 52px 96px;
}

.z26-area--lima .z26-area__cuerpo {
  max-width: 620px;
}

.z26-area--lima .z26-area__logo {
  width: 391px;
}

.z26-area--lima .z26-area__lead {
  color: var(--c-verde-fresco);
  line-height: 1.6875rem; /* 27px: más apretado que en estrategia. */
  margin-top: 39px;
}

.z26-area--lima .z26-area__texto {
  margin-top: 35px;
}

.z26-area--lima .z26-area__metricas {
  margin-top: 14px;
}

.z26-area--lima .z26-area__metricas::before {
  top: -34px;
  height: 406px;
  background: var(--c-verde-vivo);
}

.z26-area--lima .z26-metrica__numero {
  color: var(--c-verde-fresco);
}

.z26-area--lima .z26-metrica__label {
  color: var(--c-verde-oscuro);
}

/* ── Estrategia: banda oscura ──────────────────────────────── */

.z26-area--oscuro {
  background: var(--grad-area-oscuro);
  color: var(--c-white);
  padding-block: 36px 95px;
}

.z26-area--oscuro .z26-area__cuerpo {
  max-width: 608px;
}

.z26-area--oscuro .z26-area__logo {
  width: 409px;
}

.z26-area--oscuro .z26-area__lead {
  color: var(--c-verde-claro);
  line-height: var(--lh-texto-md); /* 32px */
  margin-top: 50px;
}

.z26-area--oscuro .z26-area__texto {
  margin-top: 32px;
}

/* Las cifras de estrategia van 11px más a la izquierda que las de ventures. */
.z26-area--oscuro .z26-area__metricas {
  margin-top: 12px;
  padding-left: 18px;
}

.z26-area--oscuro .z26-area__metricas::before {
  top: -29px;
  height: 356px;
  background: var(--c-verde-claro);
}

/*
 * Acá la cifra y su label van más juntas que en ventures (55px de tinta a tinta
 * contra 66) y el paso entre métricas es de 100px en vez de 108.
 */
.z26-area--oscuro .z26-metrica__label {
  margin-top: -14px;
}

.z26-area--oscuro .z26-metrica + .z26-metrica {
  margin-top: 6px;
}

.z26-area--oscuro .z26-metrica__numero {
  color: var(--c-verde-claro);
}

.z26-area--oscuro .z26-metrica__label {
  color: var(--c-white);
}

/* ══ Enfoque ═══════════════════════════════════════════════════ */
/*
 * En el Figma esta sección es una captura (nodo 1217:667), no nodos editables.
 * Todas las medidas de acá salen de medir la tinta del export a 2x: bloque
 * izquierdo de 490, card de 367×250 y seis puntos centrados bajo la card.
 */

.z26-enfoque {
  background: var(--grad-prog);
  padding-block: 124px 52px;
}

.z26-enfoque__grid {
  display: grid;
  grid-template-columns: 490px 367px;
  justify-content: center;
  column-gap: 0;
  align-items: start;
}

/*
 * La caja va en 440, el ancho de la línea más larga de la captura: con 460 el
 * título entraba en dos líneas y la sección quedaba 47px (una línea) más baja
 * que el diseño. La fuente del sitio calza más angosta que la de la captura, así
 * que el corte hay que forzarlo por ancho de caja y no por tamaño de letra.
 */
.z26-enfoque__titulo {
  font-size: 2.75rem; /* 44px */
  line-height: 2.9375rem; /* 47px */
  letter-spacing: 0.5px;
  color: var(--c-verde-oscuro);
  margin: 0 0 34px;
  max-width: 440px;
}

/* 465 para que "valor y" cierre la segunda línea como en la captura. */
.z26-enfoque__texto {
  font-family: var(--font-titulo);
  font-size: 1rem; /* 16px */
  line-height: 1.5625rem; /* 25px */
  letter-spacing: 0.5px;
  color: var(--c-verde-oscuro);
  margin: 0 0 36px;
  max-width: 465px;
}

/* Botón sólido de 120×42, más chico que el .z26-btn--grad del resto del sitio. */
.z26-enfoque__btn {
  min-width: 120px;
  min-height: 42px;
  padding: 9px 18px;
  background: var(--c-verde-vivo);
  color: var(--c-white);
  font-size: 0.8125rem; /* 13px */
}

/* ── Carrusel de pasos ─────────────────────────────────────── */

.z26-carrusel {
  width: 367px;
  margin-top: 19px;
}

.z26-carrusel__pista {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.z26-carrusel__pista::-webkit-scrollbar {
  display: none;
}

.z26-paso {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-height: 250px;
  padding: 28px 28px 30px;
  background: var(--c-noche);
  color: var(--c-white);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.z26-paso__numero {
  position: absolute;
  top: 22px;
  right: 31px;
  font-family: var(--font-cifra);
  font-weight: var(--fw-bold);
  font-size: 2.75rem; /* 44px */
  line-height: 1;
  color: var(--c-verde-fluor);
}

.z26-paso__titulo {
  margin: 0 0 16px;
  font-family: var(--font-titulo);
  font-weight: var(--fw-bold);
  font-size: 1.75rem; /* 28px */
  line-height: 1.4375rem; /* 23px */
  letter-spacing: 0.5px;
  color: var(--c-verde-fluor);
}

.z26-paso__texto {
  margin: 0;
  font-family: var(--font-titulo);
  font-size: 1rem; /* 16px */
  line-height: 0.9375rem; /* 15px */
  color: var(--c-white);
}

/* En la captura los puntos miden 10 y van cada 19px: 10 de punto y 9 de aire. */
.z26-carrusel__puntos {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 12px;
}

.z26-carrusel__punto {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px; /* Redondo de punto, y de pill cuando se estira. */
  background: rgba(33, 40, 14, 0.35);
  cursor: pointer;
  overflow: hidden; /* Recorta el relleno al contorno del pill. */
  transition: background var(--t-fast), width var(--t-base);
}

.z26-carrusel__punto[aria-selected='true'] {
  background: var(--c-verde-oscuro);
}

/*
 * Igual que en la tira de partners: con el avance automático encendido el punto
 * activo se estira a pill y se va llenando; su pista es el mismo verde al 35% de
 * los puntos inactivos. El keyframe z26-llenar vive en components.css.
 */
.z26-carrusel--auto .z26-carrusel__punto[aria-selected='true'] {
  width: 40px;
  background: rgba(33, 40, 14, 0.35);
}

.z26-carrusel__relleno {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--c-verde-oscuro);
  transform: scaleX(0);
  transform-origin: left center;
}

.z26-carrusel--auto .z26-carrusel__punto[aria-selected='true'] .z26-carrusel__relleno {
  animation: z26-llenar var(--t-carrusel) linear forwards;
}

/* La cadena va completa por especificidad; el motivo está en components.css. */
.z26-carrusel--auto.z26-carrusel--pausa .z26-carrusel__punto[aria-selected='true'] .z26-carrusel__relleno {
  animation-play-state: paused;
}

/* ══ CTA global ════════════════════════════════════════════════ */
/* Nodos 1217:658-664: card oscura de 1175×330 y radio 48 sobre banda verde. */

.z26-ctainn {
  background: var(--c-verde-vivo);
  padding-block: 94px 57px;
}

.z26-ctainn__card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 330px;
  max-width: 1175px;
  /* La card no está centrada en el frame: arranca en x=153 (105 + 48). */
  margin-inline: 48px auto;
  padding: 41px 109px;
  background: var(--c-verde-oscuro);
  border-radius: 48px;
  overflow: hidden;
}

/*
 * 40px y no 44: "La innovación no espera." mide 499 en los dos exports que
 * traen este bloque y con 44 daba 542. El max-width parte el título en las dos
 * líneas del diseño, que antes salían de un <em> que además lo teñía de lima.
 */
.z26-ctainn__titulo {
  font-family: var(--font-cifra); /* DM Sans Bold. */
  font-weight: var(--fw-bold);
  font-size: 2.5rem; /* 40px */
  line-height: 2.875rem;
  letter-spacing: 0.5px;
  color: var(--c-verde-claro);
  max-width: 520px;
  margin: 0 0 18px;
}

.z26-ctainn__titulo em {
  color: var(--c-verde-fluor);
}

.z26-ctainn__texto {
  font-family: var(--font-titulo);
  font-size: var(--fs-texto-lg);
  line-height: var(--lh-texto-md);
  letter-spacing: 0.5px;
  color: var(--c-white);
  max-width: 481px;
  margin: 0 0 27px;
}

.z26-ctainn__z {
  width: 237px;
  height: auto;
  justify-self: end;
  margin-right: 28px;
}

@media (max-width: 1024px) {
  /*
   * Las columnas fijas de 697/490/367 solo valen a 1440: acá se apilan.
   * Va minmax(0, 1fr) y no 1fr porque el mínimo automático de un track no baja
   * del min-content del hijo: con el logo de área y la pista del carrusel
   * topados en 391, la columna se estiraba a 391 en pantallas de 390 y sacaba
   * la página de cuadro.
   */
  .z26-area__grid,
  .z26-enfoque__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding-inline: var(--gutter);
    justify-content: stretch;
  }

  /*
   * Los anchos fijos de los logos se declaran como .z26-area--lima/oscuro
   * .z26-area__logo, así que acá hay que repetir esa especificidad: una media
   * query no aporta peso propio y un .z26-area__logo suelto perdía, dejando los
   * logos en sus 391/409 fijos dentro de una columna de 358.
   */
  .z26-area--lima .z26-area__logo,
  .z26-area--oscuro .z26-area__logo,
  .z26-carrusel {
    width: 100%;
    max-width: 391px;
  }

  .z26-area--oscuro .z26-area__logo {
    max-width: 409px;
  }

  /*
   * ...pero al 100% el logotipo queda tocando los dos bordes de la columna.
   *
   * En el diseño ocupa 391 de una columna de 697, o sea el 56%: es una marca
   * dentro del bloque, no un titular a sangre. El 72% de acá no llega a esa
   * proporción a propósito —en 358px de ancho el 56% deja la palabra demasiado
   * chica frente a su propio párrafo— pero le devuelve el aire que el diseño le
   * da y lo separa del borde.
   */
  .z26-area--lima .z26-area__logo,
  .z26-area--oscuro .z26-area__logo {
    width: 72%;
  }

  /* La línea pasa de vertical a horizontal sobre las métricas. */
  .z26-area__metricas {
    margin-top: 0;
    padding-left: 0;
    padding-top: 24px;
  }

  .z26-area__metricas::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
  }

  .z26-area--lima .z26-area__metricas::before,
  .z26-area--oscuro .z26-area__metricas::before {
    top: 0;
    height: 1px;
  }

  .z26-area--lima,
  .z26-area--oscuro {
    padding-block: 56px 64px;
  }

  .z26-thero {
    min-height: 0;
    padding-block: 72px;
  }

  .z26-enfoque {
    padding-block: 64px 72px;
  }
}

@media (max-width: 768px) {
  /*
   * El grafismo baja a compartir fila con el botón en vez de apilarse solo.
   *
   * Apilado en una columna caía justo debajo del botón, sin separación: los dos
   * elementos lima quedaban pegados y el grafismo se leía como un asset suelto
   * que se coló, no como la decoración de la card. Poniéndolo al lado se
   * recupera la relación del diseño —texto a la izquierda, Z a la derecha—, que
   * en desktop es lo que equilibra la card, y de paso se ahorran ~110px de alto.
   *
   * `display: contents` en el cuerpo para que el título, el texto y el botón
   * pasen a ser hijos de la grilla de la card y se puedan colocar por áreas. El
   * cuerpo no tiene estilos propios, así que no se pierde nada al disolverlo.
   */
  .z26-ctainn__card {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "titulo titulo"
      "texto  texto"
      "boton  z";
    align-items: end;
    column-gap: 16px;
    min-height: 0;
    margin-inline: 0;
    padding: 32px 24px;
    border-radius: 32px;
  }

  .z26-ctainn__cuerpo {
    display: contents;
  }

  .z26-ctainn__titulo {
    grid-area: titulo;
  }

  .z26-ctainn__texto {
    grid-area: texto;
  }

  .z26-ctainn__card .z26-btn {
    grid-area: boton;
    justify-self: start;
    align-self: center;
  }

  .z26-ctainn__z {
    grid-area: z;
    width: 100px;
    justify-self: end;
    margin-right: 0;
  }

  /*
   * Los 40px del diseño son 40px sobre una caja de 520; acá la caja es de 310 y
   * el mismo cuerpo dejaba el título en tres líneas con "¿Y" colgando al final
   * de la segunda. A 32 vuelve a cortar por la frase, como en el export.
   */
  .z26-ctainn__titulo {
    font-size: 2rem; /* 32px */
    line-height: 2.375rem;
    /*
     * Reparte las tres líneas parejas en vez de llenar las dos primeras y dejar
     * "ustedes?" solo abajo. Donde no esté soportado simplemente no se aplica.
     */
    text-wrap: balance;
  }
}

/* ══ Hero de título + texto ════════════════════════════════════ */
/* Nodos 1217:669-671. Título izquierda, ícono al medio, texto derecha. */

.z26-hhero {
  background: var(--c-verde-oscuro);
  min-height: 606px;
  display: flex;
  align-items: center;
}

/*
 * Las tres páginas que usan este hero lo llevan sobre un fondo distinto, medido
 * en cada export a la misma altura: Servicios sobre el verde oscuro de arriba,
 * Programas sobre el mismo degradado que el área oscura de Que hacemos, y
 * Eventos sobre verde fresco plano.
 */
.z26-hhero--programas {
  background: var(--grad-area-oscuro);
  min-height: 613px;
}

.z26-hhero--eventos {
  background: var(--c-verde-fresco);
}

/*
 * "Una experiencia" mide 470 en el export y no entra en los 439 que reparte el
 * grid, así que en esta página la columna del título va más ancha: si no, el
 * título se parte en tres líneas en vez de las dos del diseño.
 */
.z26-hhero--eventos .z26-hhero__grid {
  grid-template-columns: minmax(0, 480px) 34px minmax(0, 1fr);
}

/*
 * minmax(0, …) en las dos columnas de texto: con 399fr a secas el track crecía
 * hasta el min-content del h1 y "Cada desafío es" entraba en una sola línea,
 * cuando el diseño corta en "Cada desafío" / "es único".
 */
.z26-hhero__grid {
  display: grid;
  grid-template-columns: minmax(0, 399fr) 34px minmax(0, 616fr);
  gap: 40px;
  align-items: center;
}

/*
 * 64px propios y no el --fs-title-lg de 60: midiendo la misma palabra en los
 * tres exports el sitio quedaba ~6% corto ("Nuestros" 247 contra 260,
 * "Cada desafío" 358 contra 382, "Una experiencia" 433 contra 470). El token
 * global no se toca porque lo heredan los h1/h2 del resto del sitio, ya
 * calcados contra sus propios frames.
 */
.z26-hhero__titulo {
  color: var(--c-white);
  font-size: 4rem; /* 64px */
  line-height: 1.1;
  letter-spacing: var(--ls-title-lg);
}

.z26-hhero__titulo em {
  color: var(--c-verde-fluor);
  font-weight: var(--fw-bold);
}

.z26-hhero__icono {
  width: 34px;
}

/*
 * 32px es la medida de Servicios ("Transformamos estrategia en ejecución."
 * mide 607 en el export y daba 521 con 28px). Cada página trae el suyo: el
 * texto de Programas es más chico y el de Eventos más todavía.
 */
.z26-hhero__texto {
  font-family: var(--font-titulo);
  font-size: 2rem; /* 32px */
  line-height: 2.375rem;
  letter-spacing: 0.5px;
  color: var(--c-white);
  margin: 0;
}

/*
 * En Programas las dos partes del párrafo tienen cuerpos distintos: midiendo la
 * misma línea contra el export, la destacada da 30px (535 contra 536) y el resto
 * 23 (557 contra los 715 que daba a 30). Las líneas van cada 35, no cada 38.
 */
.z26-hhero--programas .z26-hhero__texto {
  font-size: 1.4375rem; /* 23px */
  line-height: 2.1875rem; /* 35px */
}

.z26-hhero--programas .z26-hhero__texto strong {
  font-size: 1.875rem; /* 30px */
}

/*
 * Eventos se queda en los 28px de antes: su export sugiere un texto bastante
 * más chico (interlineado de 33 contra 38) pero además está alineado distinto,
 * así que queda pendiente de revisar esa página completa antes de moverlo.
 */
.z26-hhero--eventos .z26-hhero__texto {
  font-size: 1.75rem; /* 28px */
}

.z26-hhero__texto strong {
  font-weight: var(--fw-bold);
  color: var(--c-verde-fluor);
}

/* Solo Programas lleva el texto en itálica; Servicios y Eventos van en redonda. */
.z26-hhero--programas .z26-hhero__texto {
  font-style: italic;
}

/*
 * El corte del diseño es "Cada desafío" / "es único" y en la columna entera
 * entraba "Cada desafío es". Va topado solo acá: el título de Eventos es más
 * ancho que esto y con la misma medida se partiría en tres líneas.
 */
.z26-hhero--programas .z26-hhero__titulo {
  max-width: 420px;
}

/* ══ Bloques de servicio ═══════════════════════════════════════ */
/*
 * Nodos 1217:672-711. Banda a dos columnas con la imagen alternando de lado y
 * cuatro pieles de fondo que se ciclan según el orden.
 */

.z26-servicio {
  padding-block: 72px;
}

.z26-servicio__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

/* Imagen a la izquierda: se invierte el orden visual sin tocar el markup. */
.z26-servicio--img-izq .z26-servicio__cuerpo {
  order: 2;
}

/*
 * Los tres tamaños salen de medir la misma cadena en el export y en el sitio:
 * "Zenit Academy" mide 432 en el diseño y daba 295 con 44px; el lead 534 contra
 * 409 con 18px; y el párrafo 563 contra 485 con 17px. El interlineado del
 * título va en 1: en la banda de Innovación Corporativa, la única de dos
 * líneas, el diseño las separa 63px.
 */
.z26-servicio__titulo {
  font-size: var(--fs-title-md);
  line-height: 1;
  margin-bottom: 16px;
}

.z26-servicio__lead {
  font-family: var(--font-titulo);
  font-weight: var(--fw-bold);
  font-size: 1.5rem; /* 24px */
  line-height: 1.6;
  letter-spacing: 0.5px;
  color: var(--c-verde-fresco);
  margin-bottom: 18px;
}

.z26-servicio__texto {
  font-family: var(--font-titulo);
  font-size: 1.25rem; /* 20px */
  line-height: 1.65;
  letter-spacing: 0.5px;
  margin: 0;
}

.z26-servicio__media img {
  width: 100%;
  aspect-ratio: 532 / 345;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* Pieles, en el orden en que las cicla el diseño. */
.z26-servicio--claro {
  background: var(--c-verde-claro);
  color: var(--c-verde-oscuro);
}

.z26-servicio--verde {
  background: var(--c-verde-fresco);
  color: var(--c-white);
}

.z26-servicio--verde .z26-servicio__titulo,
.z26-servicio--verde .z26-servicio__lead {
  color: var(--c-white);
}

/*
 * El énfasis del título también va en blanco sobre la banda verde: hereda el
 * verde fresco de los h2 y ahí queda del mismo color que el fondo, así que
 * "Corporativa" se estaba imprimiendo invisible.
 */
.z26-servicio--verde .z26-servicio__titulo em {
  color: var(--c-white);
}

.z26-servicio--lima {
  background: var(--grad-prog);
  color: var(--c-verde-oscuro);
}

.z26-servicio--blanco {
  background: var(--c-white);
  color: var(--c-black);
}

@media (max-width: 900px) {
  .z26-hhero__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .z26-hhero {
    min-height: 0;
    padding-block: 64px;
  }

  .z26-servicio__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* En una columna la imagen va siempre después del texto. */
  .z26-servicio--img-izq .z26-servicio__cuerpo {
    order: 0;
  }
}

/* ══ Listado de programas ══════════════════════════════════════ */
/*
 * Nodos 1217:895-1045. Reusa .z26-programas__grid y .z26-card de la portada:
 * son las mismas cards de 396×614 con 21px de gap.
 */

.z26-listaprog {
  padding-block: 57px 72px;
}

.z26-listaprog--lima {
  background: var(--grad-prog);
}

.z26-listaprog--blanco {
  background: var(--c-white);
}

/*
 * 20px y no 17: la tinta del kicker mide 394 en el export y a 17px daba 338.
 * El interlineado va apretado porque en el diseño el título arranca 10px debajo
 * del kicker, y con 1.6 el sobrante de la caja ya se comía tres veces eso.
 */
.z26-listaprog__intro {
  font-family: var(--font-titulo);
  font-size: 1.25rem; /* 20px */
  line-height: 1.2;
  letter-spacing: 0.5px;
  text-align: center;
  color: var(--c-verde-oscuro);
  margin-bottom: 0;
}

/* 84 para dejar los 106px que hay en el diseño entre la tinta del título y el
   borde superior de la imagen de la primera card. */
.z26-listaprog__titulo {
  text-align: center;
  line-height: 1.05;
  margin-bottom: 84px;
}

/*
 * En esta página las cards llevan el texto largo, así que crecen más que en la
 * portada: el alto mínimo lo marca el contenido y no un valor fijo.
 */
.z26-listaprog .z26-card {
  min-height: 0;
}

.z26-instagram {
  padding-block: 36px;
  background: var(--c-neutral-300);
}

/* ══ Eventos: partners ═════════════════════════════════════════ */
/* Nodos 1217:872-879. Título centrado y fila de logos en escala de altura. */

.z26-partners {
  background: var(--c-white);
  padding-block: 56px 40px;
}

/* 36px: "Partners y aliados estratégicos" mide 516 en el export y con 28 daba 398. */
.z26-partners__titulo {
  text-align: center;
  font-size: 2.25rem; /* 36px */
  line-height: 1.3;
  margin-bottom: 40px;
}

/* Lo propio de esta tira; el desplazamiento lo aporta .z26-fila__pista. */
.z26-partners__fila {
  align-items: center;
  gap: 56px;
}

.z26-partner {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* Se normaliza por alto, no por ancho: los logos tienen proporciones distintas. */
.z26-partner__logo {
  height: 56px;
  width: auto;
  max-width: none;
  object-fit: contain;
}

/* ══ Eventos: métricas y destacados ════════════════════════════ */

.z26-evmetricas {
  background: var(--grad-prog);
  padding-block: 48px 56px;
}

.z26-evdestacados {
  background: var(--c-white);
  padding-block: 48px 56px;
}

/* En el diseño las tres piezas miden 206 y van separadas 61. */
.z26-evdestacados__fila {
  gap: 61px;
}

/* Ancho fijo: la tira se recorre, no se reacomoda en varias filas. */
.z26-evdestacado {
  flex: 0 0 206px;
  scroll-snap-align: start;
  text-align: center;
}

.z26-evdestacado__media {
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 14px;
}

/* Cuadradas: el diseño las dibuja de 206×206, no panorámicas. */
.z26-evdestacado__media img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

/*
 * 20px: "Participación" mide 128 en el export y con 15 daba 96. Con este cuerpo
 * el rótulo cae en dos líneas dentro de los 206 de la pieza, como en el diseño.
 */
.z26-evdestacado__titulo {
  display: block;
  font-family: var(--font-titulo);
  font-weight: var(--fw-bold);
  font-size: 1.25rem; /* 20px */
  line-height: 1.1;
  letter-spacing: 0.5px;
  color: var(--c-verde-oscuro);
}

/* ══ Eventos: listado ══════════════════════════════════════════ */
/*
 * Nodos 1217:817-861. Cards de 579×720 en dos columnas sobre fondo lima claro.
 */

.z26-eventos {
  background: var(--c-verde-claro);
  padding-block: 64px 88px;
}

/* 46px: "No solo reunimos actores" mide 529 en el export y con 60 daba 692. */
.z26-eventos__titulo {
  text-align: center;
  font-size: 2.875rem; /* 46px */
  line-height: 1.2;
  margin-bottom: 16px;
}

/*
 * 29px, no 20: la primera línea de la bajada mide 895 en el diseño y con 20 el
 * texto entero entraba en 610. El máximo de 920 la parte en las dos líneas del
 * diseño ("…y generamos" / "dinámicas que…").
 */
.z26-eventos__texto {
  font-family: var(--font-titulo);
  font-size: 1.875rem; /* 30px */
  line-height: 1.6;
  letter-spacing: 0.5px;
  text-align: center;
  color: var(--c-verde-oscuro);
  max-width: 920px;
  margin: 0 auto 56px;
}

/* Dos columnas de 579px con 32px de gap. */
.z26-eventos__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 579px));
  justify-content: center;
  gap: 32px;
}

/*
 * min-height 720 es el alto de la card en el diseño. Con el botón empujado al
 * pie por margin-top:auto, el espacio sobrante se reparte abajo en vez de dejar
 * cards de alto desigual según lo largo del texto.
 */
.z26-evento {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border-radius: 22px; /* Medido en la esquina de la card del export. */
  overflow: hidden;
  min-height: 720px;
}

.z26-evento__media img {
  width: 100%;
  aspect-ratio: 579 / 375;
  object-fit: cover;
}

/* 43px de aire interno: es lo que separa el título del borde de la card. */
.z26-evento__cuerpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 43px;
  flex: 1;
}

.z26-evento__cuerpo .z26-btn {
  margin-top: auto;
}

/*
 * 38px: en el diseño el título de la card ocupa dos líneas con 35px de tinta y
 * 50 de interlineado; con 24 quedaba en una sola línea y menos de la mitad de
 * cuerpo. Con este tamaño la card llena sus 720 de alto sin desbordarlos.
 */
.z26-evento__titulo {
  font-family: var(--font-titulo);
  font-weight: var(--fw-regular);
  font-size: 2.375rem; /* 38px */
  line-height: 1.3;
  letter-spacing: 0.5px;
  color: var(--c-verde-oscuro);
}

/* 18px: la primera línea mide 410 en el diseño y con 15 daba 349. */
.z26-evento__texto {
  font-family: var(--font-titulo);
  font-size: 1.125rem; /* 18px */
  line-height: 1.5;
  letter-spacing: 0.5px;
  color: var(--c-black);
  margin: 0;
}

@media (max-width: 900px) {
  .z26-eventos__grid {
    grid-template-columns: minmax(0, 579px);
  }

  .z26-partners__fila {
    justify-content: flex-start;
    gap: 32px;
  }
}

/* ══ Responsive ════════════════════════════════════════════════ */
/*
 * El Figma no cubre estos anchos: todo lo de abajo es criterio propio y está
 * pendiente de aprobación visual.
 */

@media (max-width: 1180px) {
  .z26-hero__panel {
    padding-inline: 48px;
  }

  .z26-cta__inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 1024px) {
  /*
   * El hero lleva su tamaño propio, así que también necesita bajar por su
   * cuenta: al fijar los 64px dejó de seguir a --fs-title-lg y se quedaba
   * enorme en pantallas chicas.
   */
  .z26-hhero__titulo {
    font-size: 2.9375rem; /* 47px */
  }

  /*
   * Las tres columnas del hero solo caben a 1440: acá se apilan. Se repite el
   * selector de Eventos porque su columna de 480px es más específica y, sin
   * esto, seguía pidiendo 480 en pantallas de 390 y sacaba la página de cuadro.
   */
  .z26-hhero__grid,
  .z26-hhero--eventos .z26-hhero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .z26-programas__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .z26-card {
    min-height: 0;
  }

  .z26-qh__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* Sin dos columnas, la línea vertical no tiene sentido. */
  .z26-qh__divisor {
    display: none;
  }
}

@media (max-width: 900px) {
  /* El hero pasa a una columna: foto arriba, panel abajo. */
  .z26-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  /*
   * 16/9 y no 16/10: el video ya no tiene que sostener el tile por su cuenta
   * —lo monta encima— así que puede ceder alto y acortar el hero.
   */
  .z26-hero__media {
    aspect-ratio: 16 / 9;
  }

  /*
   * El padding superior solo cubre la parte del tile que cae dentro del panel
   * (unos 50px) más el aire hasta el título. El resto del tile vive sobre el
   * video, así que ese alto no lo paga el panel: por eso el hero baja de 667 a
   * ~540px pese a que el tile crece.
   */
  .z26-hero__panel {
    padding: 64px var(--gutter) 48px;
  }

  /*
   * La costura del diseño es vertical; acá, apilado, es horizontal. El tile la
   * monta igual y con el mismo reparto: en el Figma cae 179 de 220 sobre la
   * foto (81%), y acá cae ~85 de 132 sobre el video.
   *
   * Sin `transform`: el tile entra animado desde el lado y el script escribe su
   * propia transformada inline. Una regla acá no le ganaría —la inline pesa
   * más— pero deja la intención dividida en dos lugares.
   */
  .z26-hero__logo {
    position: absolute;
    left: var(--gutter);
    top: -85px;
    width: 132px;
    height: 136px;
    margin-bottom: 0;
  }

  /*
   * En una columna la banda verde ya no divide la sección en dos zonas, así que
   * el texto vuelve al flujo normal y el cielo estrellado cubre todo el bloque.
   */
  .z26-cta {
    min-height: 0;
  }

  .z26-cta__bg {
    height: 100%;
    bottom: 0;
  }

  .z26-cta__inner {
    grid-template-columns: 1fr;
    padding-block: 48px;
    padding-inline: var(--gutter);
  }

  .z26-cta__intro {
    margin-top: 0;
    padding-left: 0;
  }
}

@media (max-width: 768px) {
  .z26-hhero__titulo {
    font-size: 2.25rem; /* 36px */
  }

  /*
   * Los cuerpos del listado de eventos van fijos para calzar con el diseño a
   * 1440, así que también hay que bajarlos a mano: sin esto el título de la card
   * llegaba a móvil con los mismos 38px.
   */
  .z26-eventos__titulo {
    font-size: 2.125rem; /* 34px */
  }

  /* Lo mismo con los bloques de Digital, que llevan 52px y paddings de 128. */
  .z26-bloque__titulo {
    font-size: 2.125rem; /* 34px */
  }

  .z26-bloque--blanco,
  .z26-bloque--verde,
  .z26-bloque--lima {
    padding-block: 48px 56px;
  }

  .z26-eventos__texto {
    font-size: 1.375rem; /* 22px */
  }

  .z26-evento__titulo {
    font-size: 1.75rem; /* 28px */
  }

  .z26-programas__grid {
    grid-template-columns: 1fr;
  }

  .z26-cifras__grid {
    gap: 32px 16px;
  }

  .z26-cifra {
    flex-basis: 140px;
  }

  .z26-cifra__numero {
    font-size: 3rem;
  }

  .z26-cifras__intro,
  .z26-programas__texto {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .z26-qh__texto strong {
    font-size: 1.375rem;
  }

  /*
   * El logotipo se topaba en `min(395px, 100%)`: en una columna de 358 ganaba el
   * 100% y la palabra quedaba tocando los dos bordes, mucho más grande respecto
   * de su texto de lo que manda el diseño.
   *
   * 78% es la proporción del calco (395 sobre una columna de 504), así que la
   * marca baja con la columna en vez de crecer hasta el borde.
   */
  .z26-qh__logo {
    max-width: min(395px, 78%);
  }
}

/* ══ Heros a pantalla completa (móvil) ═════════════════════════ */
/*
 * En móvil el hero de cada página ocupa la primera pantalla completa.
 *
 * Apilados quedaban entre 155 y 334px cortos, así que bajo el hero asomaba una
 * tajada de la sección siguiente —un pedazo de título, media card— que se leía
 * como un corte a destiempo y no como una invitación a seguir bajando.
 *
 * Va al final del archivo a propósito: cada hero trae su propio
 * `min-height: 0` en el media query donde se apila, y estas reglas tienen que
 * ganarle por orden. Una media query no aporta especificidad.
 *
 * `svh` y no `vh` ni `dvh`: en un teléfono `vh` es el alto CON la barra del
 * navegador retraída, así que el hero queda más alto que la pantalla y siempre
 * sobresale; `dvh` cambia mientras uno hace scroll y obliga a recalcular el
 * layout en cada cuadro. `svh` es el alto con la barra desplegada: el hero entra
 * entero desde el primer momento. La línea `vh` queda como reserva para los
 * navegadores sin `svh`.
 *
 * Siempre `min-height`, nunca `height`: en horizontal, o con el tipo de letra
 * agrandado por accesibilidad, el contenido tiene que poder pasarse de largo en
 * vez de recortarse.
 */
@media (max-width: 900px) {
  .z26-hero,
  .z26-qhero,
  .z26-thero,
  .z26-hhero,
  .z26-dhero {
    min-height: calc(100vh - var(--header-alto));
    min-height: calc(100svh - var(--header-alto));
  }

  /*
   * En los dos heros de dos mitades el sobrante se lo lleva la imagen, no el
   * panel: `1fr auto`.
   *
   * Al revés —dándoselo al panel— el texto quedaba centrado en una caja mucho
   * más alta que él y aparecían dos huecos, uno entre el tile y el título y
   * otro bajo el botón: se cambiaba un espacio vacío bajo el hero por dos
   * adentro. Creciendo el video, en cambio, el bloque de texto sigue apretado
   * al pie y la pantalla se llena con imagen, que es lo que un hero quiere
   * hacer.
   *
   * El `aspect-ratio` del video deja de mandar acá, y es lo correcto: una pista
   * `1fr` fija el alto de la celda y el `object-fit: cover` se encarga del
   * encuadre.
   */
  .z26-hero,
  .z26-qhero {
    grid-template-rows: minmax(200px, 1fr) auto;
  }

  /*
   * Hay que soltar el `aspect-ratio` o la celda no estira: con una proporción
   * puesta, el alto sale del ancho y el elemento ignora el `stretch` de la
   * fila. En Quienes Somos se veía clarísimo —la foto se quedaba en sus 244px
   * dentro de una fila de 578 y abajo quedaba una banda blanca de 334—.
   *
   * El piso de 200px de la fila reemplaza lo que daba la proporción: en
   * horizontal, donde el texto se come casi todo el alto, la imagen no puede
   * desaparecer del todo.
   */
  .z26-hero__media,
  .z26-qhero__media {
    aspect-ratio: auto;
    min-height: 0;
  }

  /*
   * La foto o el video se sacan del flujo dentro de su caja.
   *
   * Es lo que impide que aporten su altura intrínseca a la fila. Sin esto,
   * cuando el contenido pasa del `min-height` de la sección la pista `1fr` deja
   * de repartir sobrante y se dimensiona por su contenido —la proporción del
   * video—, y en apaisado el hero del inicio se iba a 889px dentro de una
   * pantalla de 390.
   *
   * El intento anterior fue un `max-height` en la caja, y estaba mal: taparle el
   * alto al contenedor no le impide estirarse a la fila, solo hace que el
   * contenido deje de llenarla. En vertical la fila pedía 578 y la caja quedaba
   * topada en 506, así que en Quienes Somos aparecía una banda blanca de 72px
   * entre la foto y el panel verde. Fuera del flujo el problema no existe: la
   * fila vale `1fr` a secas, llena en vertical y cae al piso de 200px en
   * apaisado.
   *
   * Los selectores van por clase y no como `.z26-qhero__media img` porque el
   * grafismo de la Z también es un <img> dentro de esa misma caja.
   */
  .z26-hero__img,
  .z26-hero__video,
  .z26-qhero__img,
  .z26-qhero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* El hero de solo texto era un bloque con padding: pasa a centrar de verdad. */
  .z26-thero {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}