/*
 * components.css — piezas reutilizables entre secciones.
 *
 * Medidas tomadas del Figma (nodo 1217:339 para el header). Consume tokens.css:
 * ningún color literal vive acá.
 */

/*
 * Llenado del pill del paginador, compartido por los dos carruseles que avanzan
 * solos (la tira de partners y el de "Nuestro enfoque"). El fin de esta
 * animación es lo que dispara el cambio de vista, así que su duración es la
 * cadencia del carrusel: --t-carrusel en tokens.css.
 */
@keyframes z26-llenar {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

/* ══ Tira recorrible ═══════════════════════════════════════════ */
/*
 * Tiras horizontales que el diseño dibuja con puntos —y a veces flechas— de
 * carrusel: los logos de partners y los destacados de eventos.
 *
 * Los controles los crea `carrusel-fila.js`, que cuenta las páginas según lo que
 * entra en cada ancho y marca la tira como .z26-fila--navegable cuando hay algo
 * que recorrer. Mientras el contenido quepa no se dibuja ningún control, así no
 * quedan botones que no llevan a ninguna parte.
 *
 * Medidas del diseño: puntos de 5px cada 13, flechas de 19×19.
 */

.z26-fila {
  position: relative;
}

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

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

/* Con la tira llena, el centrado dejaría el primer grupo corrido. */
.z26-fila--navegable .z26-fila__pista {
  justify-content: flex-start;
}

.z26-fila__puntos,
.z26-fila__flecha {
  display: none;
}

.z26-fila--navegable .z26-fila__puntos {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
}

.z26-fila__punto {
  width: 5px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 999px; /* Redondo de punto, y de pill cuando se estira. */
  background: var(--c-neutral-300);
  cursor: pointer;
  overflow: hidden; /* Recorta el relleno al contorno del pill. */
  transition: background var(--t-fast), width var(--t-base);
}

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

/*
 * Con el avance automático encendido el punto activo se estira a pill y su
 * relleno marca cuánto falta para la siguiente vista. El resto de los puntos no
 * cambia. Sin la clase —una sola página que recorrer, reduced-motion, o una tira
 * sin el opt-in— el pill es un punto redondo y queda el marcado de siempre.
 */
.z26-fila--auto .z26-fila__punto[aria-current='true'] {
  width: 28px;
  background: var(--c-neutral-300); /* Pista: el mismo color de los puntos inactivos. */
}

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

.z26-fila--auto .z26-fila__punto[aria-current='true'] .z26-fila__relleno {
  animation: z26-llenar var(--t-carrusel) linear forwards;
}

/*
 * Repite la cadena completa a propósito: el atajo `animation` de arriba
 * reinicia animation-play-state a running, así que la regla que pausa tiene que
 * pesar más que él. Escrita corta —.z26-fila--pausa .z26-fila__relleno— pierde
 * y el pill sigue llenándose con la tira pausada.
 */
.z26-fila--auto.z26-fila--pausa .z26-fila__punto[aria-current='true'] .z26-fila__relleno {
  animation-play-state: paused;
}

.z26-fila--navegable .z26-fila__flecha {
  display: grid;
  place-items: center;
  position: absolute;
  top: 50%;
  width: 19px;
  height: 19px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: var(--c-verde-oscuro);
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity var(--t-fast);
}

.z26-fila__flecha:disabled {
  opacity: 0.35;
  cursor: default;
}

/* El chevron va dibujado con bordes: evita cargar un icono por flecha. */
.z26-fila__flecha::before {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 2px solid var(--c-verde-claro);
  border-right: 2px solid var(--c-verde-claro);
}

.z26-fila__flecha--anterior {
  left: 0;
}

.z26-fila__flecha--anterior::before {
  transform: translateX(1px) rotate(-135deg);
}

.z26-fila__flecha--siguiente {
  right: 0;
}

.z26-fila__flecha--siguiente::before {
  transform: translateX(-1px) rotate(45deg);
}

/* Las flechas montan sobre los extremos: se les deja aire a los lados. */
.z26-fila--con-flechas.z26-fila--navegable .z26-fila__pista {
  padding-inline: 27px;
}

/* ══ Botones ═══════════════════════════════════════════════════ */
/*
 * El botón del diseño: padding 24/10, radio 22px, Inter Bold 16.
 * El radio de 22px con 40px de alto es prácticamente una pastilla, pero se
 * respeta el valor del diseño en vez de usar un pill genérico.
 */

.z26-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 24px;
  border: 0;
  border-radius: 22px;
  background: var(--c-accent);
  color: var(--c-text-invert);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: var(--fw-bold);
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: background var(--t-base), transform var(--t-fast);
}

.z26-btn:hover,
.z26-btn:focus-visible {
  background: var(--c-verde-nuevo);
  transform: translateY(-1px);
}

.z26-btn--pill {
  border-radius: var(--radius-pill);
}

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

.z26-btn--lime {
  background: var(--c-verde-fluor);
  color: var(--c-verde-oscuro);
}

.z26-btn--lime:hover,
.z26-btn--lime:focus-visible {
  background: var(--c-verde-limon);
}

.z26-btn--outline {
  background: transparent;
  border: 1.5px solid currentColor;
  color: var(--c-accent);
}

/*
 * El botón principal del diseño: degradado verde→lima, pastilla de radio 100,
 * padding 16/28, Sora SemiBold 18 y una sombra azulada. Se usa en el hero, en
 * las columnas de "qué hacemos" y en las cards de programa.
 */
.z26-btn--grad {
  padding: 16px 28px;
  border-radius: 100px;
  background: var(--grad-boton);
  box-shadow: var(--shadow-boton);
  font-family: var(--font-boton);
  font-size: 1.125rem; /* 18px */
  font-weight: var(--fw-semibold);
  color: var(--c-white);
  line-height: normal;
}

.z26-btn--grad:hover,
.z26-btn--grad:focus-visible {
  background: var(--grad-boton);
  filter: brightness(1.05);
}

/*
 * Ancho de los botones.
 *
 * En el Figma el padding declarado (28px) no explica el ancho de las cajas: el
 * frame de "HABLEMOS" mide 183 cuando su texto más el padding dan 156, y el
 * mismo "Conoce más" aparece en 175 en las columnas y en 169 en las cards. Los
 * anchos se fijaron a mano y el padding quedó como dato muerto.
 *
 * Lo que se ve es el ancho del frame, así que se replica con min-width y el
 * padding queda como piso para etiquetas más largas que las del diseño.
 */
.z26-hero__cta {
  min-width: 183px;
}

.z26-qh__col .z26-btn--grad {
  min-width: 175px;
}

.z26-programa > .z26-btn--grad {
  min-width: 169px;
}

/* Foco visible en todo elemento interactivo: requisito de accesibilidad. */
.z26-btn:focus-visible,
.z26-nav__list a:focus-visible,
.z26-lang__link:focus-visible,
.z26-social__link:focus-visible {
  outline: 2px solid var(--c-verde-oscuro);
  outline-offset: 2px;
}

/* ══ Header ════════════════════════════════════════════════════ */

.z26-header {
  background: var(--c-verde-fluor);
  position: relative;
  z-index: 10;
}

.z26-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 116px;
  max-width: var(--frame);
  margin-inline: auto;
  padding-inline: 48px; /* Posición del logo en el diseño. */
}

/*
 * En el diseño el logo no está centrado en la barra: va a 33px del borde superior
 * y a 24 del inferior. Con align-items:center quedaba en 29, o sea 4px más
 * arriba. El margen se reparte entre arriba y abajo al centrar, así que 8px
 * desplaza el logo 4px hacia abajo.
 */
.z26-header__logo {
  display: block;
  flex-shrink: 0;
  margin-top: 8px;
}

.z26-header__logo-img {
  width: 183px;
  height: 59px;
}

/* El nav va centrado en la barra, con el bloque de acciones pegado a la derecha. */
.z26-nav {
  margin-inline: auto;
}

.z26-nav__list {
  display: flex;
  align-items: center;
  gap: 30px;
}

.z26-nav__list a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-block: 10px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: var(--fw-regular);
  color: var(--c-verde-oscuro);
  transition: color var(--t-fast);
}

.z26-nav__list a:hover {
  color: var(--c-verde-fresco);
}

/*
 * Item activo: verde y bold. WordPress marca la página actual con
 * current-menu-item, y los ancestros con current-menu-ancestor.
 */
.z26-nav__list .current-menu-item > a,
.z26-nav__list .current_page_item > a,
.z26-nav__list .current-menu-ancestor > a,
.z26-nav__list .current-menu-parent > a {
  color: var(--c-verde-fresco);
  font-weight: var(--fw-bold);
}

/* Submenú: el item con hijos lleva chevron, como "Nosotros" en el diseño. */
.z26-nav__list .menu-item-has-children > a::after {
  content: "";
  width: 12px;
  height: 7px;
  background: url("../img/chevron-down.svg") no-repeat center / contain;
  flex-shrink: 0;
}

.z26-nav__list li {
  position: relative;
}

.z26-nav__list .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  padding: 0.5rem 0;
  background: var(--c-white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}

.z26-nav__list li:hover > .sub-menu,
.z26-nav__list li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.z26-nav__list .sub-menu a {
  display: block;
  padding: 0.5rem 1rem;
}

.z26-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* ══ Selector de idioma ════════════════════════════════════════ */
/* Dos círculos de 29px: el activo relleno verde, el otro con borde. */

.z26-lang {
  display: flex;
  align-items: center;
  gap: 8px;
}

.z26-lang__link {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border: 1.5px solid var(--c-verde-oscuro);
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--c-verde-oscuro);
  transition: background var(--t-fast), color var(--t-fast);
}

.z26-lang__link.is-activo {
  background: var(--c-verde-fresco);
  border-color: var(--c-verde-fresco);
  color: var(--c-white);
}

/* ══ Botón hamburguesa ════════════════════════════════════════ */
/* Oculto en desktop. El Figma no diseñó mobile: esto es criterio propio. */

.z26-header__toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
}

.z26-header__toggle-bar,
.z26-header__toggle-bar::before,
.z26-header__toggle-bar::after {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  background: var(--c-verde-oscuro);
  transition: transform var(--t-base), opacity var(--t-fast);
}

.z26-header__toggle-bar {
  top: 21px;
}

.z26-header__toggle-bar::before {
  content: "";
  left: 0;
  top: -7px;
}

.z26-header__toggle-bar::after {
  content: "";
  left: 0;
  top: 7px;
}

.z26-header__toggle[aria-expanded="true"] .z26-header__toggle-bar {
  background: transparent;
}

.z26-header__toggle[aria-expanded="true"] .z26-header__toggle-bar::before {
  transform: translateY(7px) rotate(45deg);
}

.z26-header__toggle[aria-expanded="true"] .z26-header__toggle-bar::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* ══ Card ═════════════════════════════════════════════════════ */
/*
 * La card de programa del diseño: fondo blanco, borde verde de 1px, radio
 * grande, imagen arriba con su propio radio y botón al pie.
 */

/*
 * Card de programa: 396×614 con borde de 1px verde y radio 45. El botón sobresale
 * por debajo del borde en el diseño, por eso la card no lo contiene: el botón va
 * fuera, en el pie de la columna.
 */
/*
 * La card NO tiene fondo propio. Muestreado en el diseño, el interior de la card
 * da el mismo #E8FDBD que el fondo de la sección: es solo un borde con radio 45
 * y el degradado de la sección se ve a través.
 */
.z26-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
  border: 1px solid var(--c-verde-fresco);
  border-radius: 45px;
  padding: 24px 32px;
  min-height: 614px;
}

.z26-card__media {
  width: 328.668px;
  max-width: 100%;
  aspect-ratio: 328.668 / 237.624;
  border-radius: 23px;
  overflow: hidden;
  margin-bottom: 24px;
}

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

.z26-card__logo {
  max-height: 75px;
  width: auto;
  margin-bottom: 20px;
}

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

.z26-card__footer {
  margin-top: auto;
  display: flex;
  justify-content: center;
}

/* ══ Campos de formulario ═════════════════════════════════════ */
/*
 * Contact Form 7 genera el markup, así que el estilo apunta a sus clases.
 * En el diseño los campos son blancos con radio pequeño sobre la card lima,
 * en dos columnas para nombre/apellido y email/empresa.
 */

.z26-form {
  background: var(--c-verde-limon); /* #A7D24A, no el fluorescente. */
  border-radius: 8px;
  padding: 32px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.z26-form .wpcf7-form-control-wrap {
  display: block;
}

/*
 * Sin margen propio: la separación con el input la pone el gap de
 * .z26-form__campo. Con margen Y gap quedaban 18px donde el diseño usa 12.
 */
.z26-form label,
.z26-form .z26-field__label {
  display: block;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-verde-oscuro);
  margin: 0;
}

.z26-form input[type="text"],
.z26-form input[type="email"],
.z26-form input[type="tel"],
.z26-form input[type="url"],
.z26-form select,
.z26-form textarea {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  background: var(--c-white);
  border: 1px solid var(--c-neutral-300);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(25, 33, 61, 0.08);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--c-text);
}

.z26-form textarea {
  height: 92px;
  padding: 16px;
  resize: vertical;
}

.z26-form input:focus-visible,
.z26-form textarea:focus-visible,
.z26-form select:focus-visible {
  outline: 2px solid var(--c-verde-fresco);
  outline-offset: 1px;
}

/*
 * Nombre/Apellido y Email/Empresa van en dos columnas con 24px de separación.
 * El markup lo genera Contact Form 7, así que la fila se marca con una clase
 * puesta en el propio formulario de CF7.
 */
.z26-form .z26-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/*
 * 4px y no los 12 del diseño: Figma recorta la caja del label a la altura de
 * mayúscula (~10px), mientras acá ocupa los 20 del line-height. Con 4 el input
 * aterriza en el offset 54 que marca el diseño.
 */
.z26-form .z26-form__campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/*
 * El botón lleva una flecha a la derecha del texto. CF7 genera un
 * <input type="submit">, que no admite pseudo-elementos ni hijos, así que la
 * flecha va como background-image con espacio reservado en el padding derecho.
 */
.z26-form input[type="submit"],
.z26-form .wpcf7-submit {
  width: auto;
  height: auto;
  align-self: flex-start;
  padding: 14px 33px 14px 18px;
  background: var(--c-verde-fresco) url("../img/flecha-enviar.svg") no-repeat right 18px center;
  background-size: 10px 10px;
  color: var(--c-white);
  border: 0;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(25, 33, 61, 0.08);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm);
  line-height: 1.25rem;
  cursor: pointer;
}

/*
 * CF7 pasa la plantilla por wpautop, que convierte los saltos de línea entre
 * bloques en párrafos vacíos. Uno de ellos aportaba 16px de margen al inicio del
 * formulario y empujaba todo hacia abajo. El selector es amplio a propósito: el
 * <p> problemático es hermano del form, no descendiente de .wpcf7-form.
 */
.z26-form p {
  margin: 0;
}

.z26-form p:empty {
  display: none;
}

/*
 * El <form> que genera CF7 es un bloque suelto, así que la separación entre
 * filas la pone él. 23px deja los inputs en los offsets 54, 147 y 239 que marca
 * el diseño.
 */
.z26-form .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 23px;
}

/*
 * El botón va más pegado que el resto: medido en el diseño queda a 15px del
 * textarea, no a 23. Se descuenta la diferencia del gap del contenedor.
 */
.z26-form .wpcf7-form > p:last-of-type {
  margin-top: -8px;
}

/* ── Variante verde del formulario (página Contacto) ─────────── */
/*
 * Mismo componente, distinta piel: en Contacto el formulario va sobre un panel
 * verde, así que la card pierde su fondo y los campos pasan a contorno en verde
 * claro. El botón se invierte: fondo claro y texto verde.
 */

.z26-form--verde {
  background: transparent;
  box-shadow: none;
  padding: 32px;
}

.z26-form--verde label,
.z26-form--verde .z26-field__label {
  color: var(--c-verde-claro);
}

.z26-form--verde input[type="text"],
.z26-form--verde input[type="email"],
.z26-form--verde input[type="tel"],
.z26-form--verde input[type="url"],
.z26-form--verde select,
.z26-form--verde textarea {
  background: transparent;
  border-color: var(--c-verde-claro);
  color: var(--c-verde-claro);
}

/* El placeholder también, o queda ilegible sobre el verde. */
.z26-form--verde input::placeholder,
.z26-form--verde textarea::placeholder {
  color: rgba(238, 253, 207, 0.7);
}

.z26-form--verde input:focus-visible,
.z26-form--verde textarea:focus-visible,
.z26-form--verde select:focus-visible {
  outline-color: var(--c-verde-claro);
}

/* Botón invertido: fondo claro, texto y flecha en verde. */
.z26-form--verde input[type="submit"],
.z26-form--verde .wpcf7-submit {
  background: var(--c-verde-claro) url("../img/flecha-enviar-verde.svg") no-repeat right 18px center;
  background-size: 10px 10px;
  color: var(--c-verde-fresco);
}

/* El spinner de CF7 no debe empujar el layout mientras está inactivo. */
.z26-form .wpcf7-spinner {
  margin: 0 0 0 8px;
}

/* ══ Footer ═══════════════════════════════════════════════════ */

.z26-footer {
  background: var(--c-verde-oscuro);
  color: var(--c-text-invert);
  padding-block: 3.5rem 4.5rem;
}

/*
 * El footer usa una caja de 1200 y no la de 1230 del resto del sitio: la línea
 * divisoria mide 1200 clavados en los tres exports donde se la puede medir
 * (que hacemos, servicios y eventos). Va sumado el gutter porque el
 * padding-inline del contenedor se descuenta del ancho útil.
 */
.z26-footer .z26-container {
  max-width: calc(1200px + var(--gutter) * 2);
}

.z26-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2rem;
  align-items: start;
}

.z26-footer__logo {
  width: 140px;
  height: auto;
  margin-bottom: 1.25rem;
}

.z26-social {
  display: flex;
  gap: 10px;
}

.z26-social__link {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.12);
  color: var(--c-white);
  transition: background var(--t-fast);
}

.z26-social__link:hover {
  background: var(--c-verde-fresco);
}

.z26-footer__menu {
  display: grid;
  gap: 0.625rem;
}

.z26-footer__menu a {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: rgba(255, 255, 255, 0.85);
  transition: color var(--t-fast);
}

.z26-footer__menu a:hover {
  color: var(--c-verde-fluor);
}

/* El botón del footer usa su propio verde y 42px de alto, no los 40 del genérico. */
.z26-footer__cta .z26-btn {
  padding-block: 11px;
  background: var(--c-verde-footer);
}

.z26-footer__cta .z26-btn:hover,
.z26-footer__cta .z26-btn:focus-visible {
  background: var(--c-verde-fresco);
}

/*
 * 24px, la medida del footer que se replica. Estaba en var(--fs-title-sm), un
 * token que dejó de existir al reescribir la tipografía: una variable CSS
 * inexistente no da error, la declaración se descarta y el título heredaba 16px.
 */
.z26-footer__cta-title {
  font-size: 1.5rem;
  line-height: 2rem;
  /*
   * Bold explícito: la regla base de h2 fuerza peso regular porque los títulos
   * de sección del diseño van en Roboto Regular, y el del footer lo heredaba.
   */
  font-weight: var(--fw-bold);
  color: var(--c-white);
  margin-bottom: 1rem;
}

.z26-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.z26-footer__texto,
.z26-footer__copy {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* ══ Responsive ═══════════════════════════════════════════════ */
/*
 * El Figma solo cubre 1440. Todo lo de abajo es criterio propio y está
 * pendiente de aprobación visual.
 */

@media (max-width: 1180px) {
  .z26-header__inner {
    padding-inline: var(--gutter);
  }

  .z26-nav__list {
    gap: 18px;
  }

  .z26-nav__list a {
    font-size: 0.9375rem;
  }
}

@media (max-width: 1024px) {
  .z26-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 900px) {
  /*
   * La barra baja de 116 a 84. El token va acá y no en tokens.css porque el
   * valor y la regla que lo produce tienen que moverse juntos: los heros
   * descuentan este alto para llenar la pantalla, y si se cambia el
   * `min-height` de abajo sin tocar el token, los heros quedan corridos.
   */
  :root {
    --header-alto: 84px;
  }

  /*
   * Alto automático, no fijo: el nav desplegable se agrega como una fila más y
   * con height fijo se salía de la barra y quedaba montado sobre el hero.
   */
  .z26-header__inner {
    height: auto;
    min-height: 84px;
    padding-block: 12px;
    flex-wrap: wrap;
    gap: 12px;
  }

  /* A 390px el logo de 183 más las acciones no caben en una fila. */
  .z26-header__logo-img {
    width: 132px;
    height: auto;
  }

  /* El desfase del diseño es de la barra de 116px; acá el alto es otro. */
  .z26-header__logo {
    margin-top: 0;
  }

  /*
   * Un solo `margin-left: auto`, en el primer elemento del bloque derecho.
   *
   * Antes lo llevaban las acciones Y la hamburguesa: dos empujes en la misma
   * fila suman ancho y, a 390, la barra pedía 359px donde caben 358. El
   * sobrante era de 1px, pero con flex-wrap eso basta para que la hamburguesa
   * caiga a una segunda fila y el header quede partido en dos.
   */
  .z26-header__actions {
    order: 2;
    margin-left: auto;
  }

  .z26-header__toggle {
    display: block;
    order: 3;
    flex-shrink: 0;
  }

  /* El nav pasa a panel desplegable bajo la barra. */
  .z26-nav {
    order: 4;
    flex-basis: 100%;
    margin-inline: 0;
    display: none;
  }

  .z26-nav.is-abierto {
    display: block;
  }

  .z26-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: 1rem;
  }

  /*
   * 44px de alto útil: es el mínimo cómodo para el dedo y el item del menú es
   * el destino más pulsado del sitio en un teléfono.
   */
  .z26-nav__list a {
    padding-block: 0.8125rem;
  }

  .z26-nav__list .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: transparent;
    padding-left: 1rem;
  }

  /* Separador entre items: sin la fila horizontal, el panel se lee como bloque. */
  .z26-nav__list > li + li {
    border-top: 1px solid rgba(20, 61, 26, 0.12);
  }
}

/*
 * Teléfonos. El bloque derecho (Contacto + idioma + hamburguesa) compite con el
 * logo por una fila de ~328px útiles a 360: el botón baja de cuerpo y el logo
 * cede un poco para que los cuatro elementos del diseño sigan visibles en la
 * barra en vez de tener que esconder alguno.
 */
@media (max-width: 560px) {
  .z26-header__inner {
    gap: 8px;
  }

  .z26-header__logo-img {
    width: 108px;
  }

  .z26-header__actions {
    gap: 8px;
  }

  /*
   * El texto baja a 14 para ganar ancho, pero el alto sube: el botón cede
   * ancho, no área táctil.
   */
  .z26-header__actions .z26-btn {
    padding: 11px 14px;
    font-size: 0.875rem;
  }

  .z26-lang {
    gap: 6px;
  }

  /* Los círculos de 29px del diseño son de puntero; acá los toca un dedo. */
  .z26-lang__link {
    width: 38px;
    height: 38px;
  }

  .z26-header__toggle {
    width: 40px;
    height: 40px;
  }

  /*
   * Solo la barra del medio: las otras dos son pseudo-elementos suyos y se
   * alinean con `left: 0` contra ella. Incluirlas acá las corría 8px y el icono
   * salía escalonado.
   */
  .z26-header__toggle-bar {
    left: 8px;
    top: 19px;
  }
}

@media (max-width: 768px) {
  /*
   * Las dos columnas de menú se quedan lado a lado y solo la marca y el CTA
   * pasan a ancho completo.
   *
   * Apilando las cuatro celdas, los dos menús quedaban uno bajo el otro
   * separados por el gap de la grilla: como son listas de la misma pinta, ese
   * hueco se leía como un error de maquetado y no como el corte entre dos
   * columnas. Además ahorra media pantalla de scroll.
   */
  .z26-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }

  .z26-footer__brand,
  .z26-footer__cta {
    grid-column: 1 / -1;
  }

  /*
   * La card del diseño mide 396 con 32px de padding y un media de 328.7px fijo.
   * En un viewport de 390 eso suma más que el ancho disponible y provocaba
   * scroll horizontal, así que en mobile el media pasa a fluido.
   */
  .z26-card {
    padding: 20px 16px;
    min-height: 0;
  }

  .z26-card__media {
    width: 100%;
  }

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

  .z26-form {
    padding: 1.25rem;
  }

  /*
   * Áreas táctiles del footer.
   *
   * Los enlaces medían 17px de alto —la altura de su línea— porque en desktop
   * se apuntan con el mouse. En un teléfono el objetivo lo pone el dedo, así
   * que la separación de la grilla se pasa al padding del enlace: mismo ritmo
   * visual, pero el área pulsable llega a 44px.
   */
  .z26-footer__menu {
    gap: 0;
  }

  .z26-footer__menu a {
    display: block;
    padding-block: 0.75rem;
  }

  .z26-social {
    gap: 12px;
  }

  .z26-social__link {
    width: 40px;
    height: 40px;
  }
}