/* ============================================================
 * Academy — componentes
 * Reglas de marca aplicadas: sistema-marca.md §"Estados de componentes"
 * y §"Shape del botón" (pill 999px para acciones; 12px para campos).
 * ============================================================ */

/* ── botones ───────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  min-height: 48px;                        /* touch target */
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  line-height: 1;
  text-decoration: none;
  border: 0; cursor: pointer;
  border-radius: var(--radius-full);       /* pill: es una ACCIÓN */
  /* nunca `transition: all` */
  transition: transform var(--duration-press) var(--ease-out),
              filter 150ms var(--ease-out),
              box-shadow 150ms var(--ease-out);
}
.btn:active { transform: scale(.98); filter: brightness(.95); }

.btn--primario { background: var(--magenta-600); color: #fff; }
@media (hover: hover) {
  .btn--primario:hover { filter: brightness(1.05); box-shadow: 0 4px 12px rgba(255, 51, 102, .25); }
}

.btn--claro { background: #fff; color: var(--yma-violet-dark); }
@media (hover: hover) {
  .btn--claro:hover { filter: brightness(.97); box-shadow: 0 4px 12px rgba(41, 16, 38, .18); }
}

/* Lima con tinta violeta. SÓLO sobre fondo oscuro: el par lima/violeta-oscuro da 14,5:1,
   pero un botón lima sobre blanco desaparece. Está en el hero de la home y en nada más. */
.btn--lima { background: var(--yma-lima); color: var(--yma-violet-dark); }
@media (hover: hover) {
  .btn--lima:hover { filter: brightness(1.06); box-shadow: 0 6px 18px rgba(195, 255, 0, .28); }
}

/* Secundario sobre oscuro: contorno, sin relleno. No compite con el lima. */
.btn--contorno {
  background: transparent; color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45);
}
@media (hover: hover) {
  .btn--contorno:hover { box-shadow: inset 0 0 0 2px #fff; background: rgba(255, 255, 255, .08); }
}

/* ── hero ──────────────────────────────────────────────────── */

/* Un solo hero para las seis páginas que lo tienen (2026-08-02). Hasta esa fecha el de la
   home y el de país eran dos componentes con alturas, velos y tamaños distintos: entrar por
   Google a /australia/ y hacer clic en el logo se sentía como cambiar de sitio.
   Lo que sigue siendo propio de cada uno es lo que TIENE que serlo: la home lleva los datos
   duros y dos botones, y las de país llevan la bandera. */
.hero {
  position: relative;
  display: grid; align-content: center;
  min-height: clamp(480px, 74vh, 720px);
  padding-block: var(--space-8, 64px);
  color: #fff;
  background: var(--yma-violet-dark);
  overflow: hidden;
}

/* Los banners de país que vinieron del WordPress NO eran fotos limpias: traían la bandera
   y una franja blanca horneadas en el borde inferior (montaje del layout viejo). Se recortó
   el 24% de abajo en los ARCHIVOS —una sola vez, con herramientas/recortar-heroes— en vez
   de taparlo por CSS: un recorte por CSS depende del alto del viewport y se rompe en otro
   tamaño de pantalla. Acá el CSS vuelve a ser el normal.
   Las imágenes nuevas tienen que venir como foto sola, sin bandera ni franja, 2400×1200. */
.hero__fondo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;   /* deja aire arriba para el texto */
}

/* Velo — patrón de Marca/patrones-hero-oscuro.md.
   En mobile el texto ocupa todo el ancho, así que el velo es vertical.
   En desktop el texto vive a la izquierda: el velo carga de ese lado y se abre hacia la
   derecha para no ensuciar la parte de la foto que se quiere mostrar.

   Los valores son los que se calibraron para el hero de la home el 2026-08-02, sobre una
   foto de atardecer: el velo anterior (0,86 → 0,05 en una rampa corta) apagaba el cielo y
   dejaba un corte visible a media pantalla. Este arranca más fuerte donde está el texto,
   sostiene hasta el 38% y recién ahí abre. */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(39,12,64,.90) 0%, rgba(39,12,64,.68) 52%, rgba(39,12,64,.34) 100%);
}

/* ── hero apilado en mobile (Berna, 2026-08-02) ────────────────
   En pantalla chica la foto deja de ser fondo y pasa arriba, entera, con el texto abajo
   sobre violeta plano.

   Por qué: con el texto encima, el velo tenía que tapar el 90% de la parte de arriba para
   que el título se leyera. O sea que pagábamos el peso de una foto para mostrar un
   rectángulo violeta. Apilado, la foto se ve y el texto se lee: las dos cosas dejan de
   competir por el mismo espacio. Y no hay que recalibrar ningún degradado cada vez que
   cambia la foto, que es lo que se hace lento.

   La unión NO es un corte: la foto se disuelve en el violeta en sus últimos 45 px. Sin eso
   se leen como dos piezas pegadas.                                                       */
@media (max-width: 767px) {
  .hero {
    display: block;
    min-height: 0;
    padding-block: 0;
    background: var(--yma-violet-dark);
  }
  /* La disolución cuelga del `picture` y no de la sección: así se estira con la foto, mida
     lo que mida, sin ningún alto declarado que haya que mantener sincronizado a mano. */
  .hero picture { display: block; position: relative; }
  .hero picture::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg,
      rgba(39,12,64,0) 62%, rgba(39,12,64,.45) 84%, var(--yma-violet-dark) 100%);
  }
  .hero::after { display: none; }

  /* Las SEIS páginas con hero tienen su propia foto de mobile: un recorte al que sólo se le
     sacaron los costados —5:4 en la home, 3:2 en las de país, que vienen de banners de 4:1 y
     no dan para más—. Va con `height: auto` para que el navegador NO la vuelva a recortar:
     con un alto fijo, `cover` se queda con la franja de arriba y en el celular se ve puro
     cielo. Fue exactamente lo que pasó en el primer intento. */
  .hero__fondo {
    position: static;
    width: 100%; height: auto;
  }
  .hero__contenido { padding-block: var(--space-6) var(--space-7); }

  /* La bandera deja de estar posicionada: va en el flujo, después de la foto, y sube con un
     margen negativo para montar sobre su borde inferior. Así no depende de ningún alto
     declarado —ahora lo define la propia imagen— y no se puede desincronizar. Con
     `bottom: 0` terminaba flotando en medio del bloque de texto.

     OJO con el selector: la regla base `.hero__bandera` está MÁS ABAJO en este archivo, así
     que con la misma especificidad ganaba ella aunque esto esté dentro de un @media. Por eso
     va `.hero .hero__bandera`. */
  .hero .hero__bandera {
    /* `relative`, no `static`: sigue en el flujo, pero el `picture` de arriba es un elemento
       posicionado y por orden de pintado le pasaba por encima. Con esto la bandera queda
       visible sin sacarla del flujo. */
    position: relative; z-index: 2;
    display: block;
    width: 64px;
    margin: -52px var(--space-4) 0 auto;
  }

  /* Tres datos en 390 px se parten 2+1 y la segunda línea queda coja. Los que están
     marcados en el contenido con `solo_desktop` se caen acá. */
  .datos-duros .solo-desktop { display: none; }
}
@media (min-width: 1024px) {
  .hero::after {
    background:
      linear-gradient(100deg, rgba(39,12,64,.93) 0%, rgba(39,12,64,.86) 38%, rgba(39,12,64,.42) 62%, rgba(39,12,64,.12) 100%),
      linear-gradient(180deg, rgba(39,12,64,.26) 0%, rgba(39,12,64,.04) 45%, rgba(39,12,64,.42) 100%);
  }
}
.hero__contenido { position: relative; z-index: 2; }

/* Versalitas y no tamaño de cuerpo: sobre una foto con detalle, un texto chico se pierde;
   espaciado y en mayúsculas se lee como etiqueta y no compite con el H1. */
.hero__antetitulo {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--yma-lima);
  margin-bottom: var(--space-3);
}

/* El techo del clamp es 88 px: por encima de ~96 la página grita en vez de diseñar.
   El interletrado no baja de -0,03em; a partir de -0,04 las letras se tocan. */
.hero__titulo {
  font-size: clamp(3rem, 8.5vw, 5.5rem);
  font-weight: var(--font-extrabold);
  line-height: .96;
  letter-spacing: -.03em;
  text-wrap: balance;
  margin-bottom: var(--space-4);
}
.hero__bajada { max-width: 36ch; }
@media (min-width: 768px) { .hero__bajada { max-width: 42ch; font-size: var(--text-lg); } }
.hero .btn { margin-top: var(--space-2); }

/* ── listas con check ──────────────────────────────────────── */

.lista-check { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .lista-check--dos { grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-6); } }

.lista-check li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3);
  align-items: start;
  font-size: var(--text-base);
}
.lista-check li::before {
  content: ''; margin-top: .15em;
  width: 22px; height: 22px; flex: none;
  border-radius: var(--radius-full);
  background: var(--yma-lima)
    /* tilde en SVG inline: sin dependencia de una fuente de íconos */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23270C40' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / 14px no-repeat;
}

/* Variante editorial (home → "Qué vas a estudiar", 2026-08-02).
   Los mismos ítems, pero en la tipografía de títulos y separados por filetes: dejan de
   leerse como una nota al pie y pasan a ser el contenido de la sección. El tilde va en
   violeta con la tilde blanca —no en lima— porque acá los ítems son grandes y el disco
   lima al lado de un texto oscuro sobre crema pesa demasiado. */
.lista-check--editorial { gap: 0; }
.lista-check--editorial li {
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-display);
  font-weight: var(--font-bold);
  font-size: var(--text-lg);
  letter-spacing: -.01em;
  line-height: 1.25;
}
.lista-check--editorial li:first-child { padding-top: 0; }
.lista-check--editorial li:last-child { border-bottom: 0; padding-bottom: 0; }
.lista-check--editorial li::before {
  margin-top: 0;
  width: 30px; height: 30px;
  background: var(--yma-violet)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / 17px no-repeat;
}

/* La sección en dos columnas: el título y su bajada de un lado, la lista del otro.
   Se llamaba `.programas__grilla` cuando existía sólo en la home; ahora también la usan las
   páginas de país para "Por qué <país>", así que el nombre dejó de decir dónde vive. */
.dos-columnas { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) {
  .dos-columnas { grid-template-columns: .85fr 1.15fr; gap: var(--space-8, 64px); align-items: start; }
  /* En dos columnas el título ya no tiene la lista debajo: el margen negativo que la
     bajada usa para pegarse al título en el layout de una columna sobra acá. */
  .dos-columnas > div .seccion__bajada { margin-bottom: 0; }
}

/* ── chips ─────────────────────────────────────────────────────
   Para listas de etiquetas de una o dos palabras ("Inglés", "TAFE"). En una lista con
   tildes cada ítem se lleva un renglón entero y la sección parece un trámite; en fila, las
   cinco se leen de un vistazo y ocupan un tercio del alto.
   No son enlaces: no llevan hover ni cursor de mano. */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.chips li {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: #fff;
  font-family: var(--font-display);
  font-weight: var(--font-semibold);
  font-size: var(--text-md);
  line-height: 1.2;
}
.chips li::before {
  content: ''; width: 10px; height: 10px; flex: none;
  border-radius: var(--radius-full);
  background: var(--yma-violet);
}
.seccion--crema .chips li { background: #fff; }

/* ── lista en cuadrícula ───────────────────────────────────────
   Para las listas largas de trámite (los 10 requisitos). En una columna son 10 renglones
   sueltos; en cuadrícula se leen como un checklist y la sección deja de ser la tercera
   lista igual de la página. */
.lista-check--grilla { grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 640px)  { .lista-check--grilla { grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-5); } }
@media (min-width: 1024px) { .lista-check--grilla { grid-template-columns: repeat(3, 1fr); } }
.lista-check--grilla li {
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.7);
  font-size: var(--text-base);
}

/* ── grilla de ciudades ────────────────────────────────────── */

.ciudades { list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(2, 1fr);
  /* `align-items: start` en vez del stretch por default de grid: mientras conviva alguna
     ciudad con el montaje viejo (1:1, más alta que el resto en 4:3 — ver .ciudad--montaje
     abajo), el stretch de grid infla TODA la fila a la altura de esa card y las 4:3 vecinas
     quedan con un hueco violeta relleno arriba del nombre. Con `start` cada card toma su
     alto natural sin importar la de al lado. */
  align-items: start;
}
@media (min-width: 768px)  { .ciudades { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .ciudades { grid-template-columns: repeat(5, 1fr); } }

/* Mismo lenguaje que las tarjetas de destino de la home (2026-08-02): foto arriba, barra
   sólida abajo con el nombre. Antes el nombre iba sobre un degradado encima de la foto y
   dependía de qué tan clara fuera la imagen ahí; además el sitio tenía dos tarjetas con
   fotos y nombre resueltas de dos maneras distintas. */
.ciudad {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--violet-800);
  box-shadow: 0 1px 2px rgba(24,18,26,.06);
}
/* 4:3 y no cuadrada (Berna, 2026-08-02): se ve más FOV horizontal de la foto. El cambio se
   hizo en los ARCHIVOS, no sólo acá — pasar la caja a 4:3 sin volver a recortar desde el
   original no muestra más imagen, sólo corta arriba y abajo lo que ya era un cuadrado. Los
   `.webp` de ciudades-{aus,nz} ya vienen recortados a este ratio. */
.ciudad__foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ⚠️ TEMPORAL — sólo para las ciudades que todavía son el montaje de WordPress.
   Esos PNG de 163×164 traen el nombre HORNEADO en una banda violeta al pie, y como acá el
   nombre va como texto encima, sin esto se ve duplicado: se recorta ~28% de abajo.

   La clase la pone la plantilla mirando el disco (`fotoCiudad` en pais.mjs): la ciudad que
   ya tiene su .jpg procesado NO la lleva. O sea que este parche se apaga solo, ciudad por
   ciudad, a medida que se van reemplazando. Cuando no quede ningún .png, se borra el
   bloque entero.
   Las nuevas salen de herramientas/procesar-ciudades.py: foto sola, cuadrada, sin texto. */
/* El recorte se hace con `scale` y no con `height: 128%` como antes: la tarjeta pasó a ser
   un flex sin alto fijo, y un porcentaje de alto contra un padre `auto` no resuelve. Con
   `transform-origin: top` la imagen crece hacia abajo y la banda del nombre se va fuera del
   `overflow: hidden`.
   El `aspect-ratio` vuelve a 1:1 SÓLO acá: el 1.28 se calibró para una caja cuadrada. En
   una caja 4:3 el propio `object-fit: cover` ya recorta gran parte del alto antes de que
   actúe el transform, y las dos cosas juntas devoraban la imagen entera. */
.ciudad--montaje .ciudad__foto {
  aspect-ratio: 1 / 1;
  transform: scale(1.28);
  transform-origin: top center;
}

.ciudad__nombre {
  margin: 0;
  margin-top: auto;      /* pegado abajo aunque un nombre ocupe dos renglones */
  /* Por encima de la foto: en las ciudades que todavía son el montaje viejo, la imagen se
     agranda un 28% para tapar la banda con el nombre horneado, y ese sobrante se derrama
     sobre la barra. Con el z-index la barra gana y el sobrante queda detrás. */
  position: relative; z-index: 1;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  line-height: 1.2;
  color: #fff;
  /* El nombre va como TEXTO, no horneado en la imagen: se lee en buscadores,
     se traduce, y lo levanta un lector de pantalla. */
  background: var(--violet-800);
}

/* ── formulario ────────────────────────────────────────────── */

.formulario {
  /* El formulario quedó pegado al pie cuando pasó al final de la home, y los dos eran
     --yma-violet-dark: se leían como un solo bloque negro de dos pantallas de alto.
     El degradado va de oscuro arriba a --yma-violet abajo, así el borde con el pie —que
     sigue siendo el violeta oscuro— queda marcado. Sólo tokens de marca: ningún color
     inventado para tapar el problema. */
  background: linear-gradient(180deg, var(--yma-violet-dark) 0%, var(--yma-violet) 100%);
  color: #fff;
  /* Al saltar a #contacto desde "Me interesa!" el título quedaba tapado por la cabecera
     sticky. Ver la nota de .faq: 117 px con la tira de chips, 64 px de 1024 para arriba. */
  scroll-margin-top: 80px;
}
.formulario__cabecera { text-align: center; margin-bottom: var(--space-5); }
.formulario__antetitulo { color: var(--yma-lima); }
.formulario__bajada { color: rgba(255,255,255,.82); margin-top: var(--space-3); }

.formulario__marco {
  max-width: 560px; margin-inline: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 42px rgba(41,16,38,.35);
}
.formulario__marco iframe { width: 100%; border: 0; display: block; }

/* ── header y footer ───────────────────────────────────────── */

.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(41,16,38,.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
/* Una sola fila: logo · menú · botón · hamburguesa. En móvil el menú se va abajo con
   `flex-wrap` y queda: logo · Contactanos · ☰.
   La hamburguesa va DESPUÉS del botón también en el HTML, no sólo por CSS: si se moviera
   con `order`, el orden visual y el del tabulador dejarían de coincidir. */
.cabecera__fila {
  display: flex; align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  min-height: 64px;
}
/* El min-height de 64 px va TAMBIÉN acá, no sólo en `.cabecera__fila`.
   Al abrirse el menú en móvil la fila pasa a tener dos líneas (el menú es `flex-basis:100%`
   y se va abajo), y ahí el `min-height` del contenedor deja de gobernar el alto de la
   primera línea: pasa a medir lo que mide su ítem más alto, 44 px. La barra se achicaba de
   64 a 44 px y todo el contenido saltaba hacia arriba al tocar la hamburguesa.
   Con el min-height en el logo, la primera línea mide 64 px esté el menú abierto o cerrado. */
.cabecera__logo {
  margin-right: auto;
  display: flex; align-items: center;
  min-height: 64px;
}
@media (min-width: 1024px) {
  .cabecera__fila { flex-wrap: nowrap; gap: var(--space-5); }
  /* El espacio sobrante va todo DESPUÉS del logo, así el menú y el botón viajan juntos
     contra el borde derecho y se leen como un solo grupo de navegación. */
  .cabecera__logo { margin-right: auto; }
  .cabecera__menu { margin-right: 0; }
}
@media (max-width: 1023px) {
  /* el menú ocupa el ancho entero, debajo de la fila */
  .cabecera__menu { order: 9; flex-basis: 100%; margin-inline: calc(var(--space-5) * -1); }
  .menu { padding-inline: var(--space-5); }

  /* "Contactanos" y la hamburguesa son un solo bloque pegado al borde derecho. Con el
     hueco de 16 px el botón se leía suelto en el medio de la barra, porque el logo es
     angosto y quedaba mucho aire entre los dos. La hamburguesa ya trae 11 px de aire
     propio adentro de su área táctil de 44 px, así que 4 px acá alcanzan. */
  .cabecera__fila { column-gap: var(--space-1); }

}
/* 41 px = 20% más que los 34 originales. Es un SVG, así que escala sin perder nitidez.
   Entra cómodo en la fila de 64 px: quedan 11 px de aire arriba y abajo. */
.cabecera__logo img { height: 41px; width: auto; }

/* ── el menú ───────────────────────────────────────────────────
   Misma estructura que producción: Destinos ▾ · Quiénes somos · Sitios útiles ▾.
   Un solo marcado sirve a las dos pantallas: en escritorio es una barra con desplegables
   flotantes, en móvil un panel que se despliega hacia abajo. En WordPress el menú estaba
   escrito dos veces y en móvil se descargaban los dos.                                 */

.cabecera__menu { display: block; }

/* En pantalla chica el panel se colapsa. `data-abierto` lo pone el JS: el HTML se sirve
   abierto a propósito, así un fallo del script deja una lista larga y no un sitio sin
   navegación. */
@media (max-width: 1023px) {
  /* `[data-js]` lo pone un script inline del <head>. Sin JavaScript esta regla no aplica
     y el menú queda desplegado: largo, pero usable. */
  [data-js] .cabecera__menu {
    display: none;
    border-top: 1px solid rgba(255,255,255,.10);
    overscroll-behavior: contain;   /* que el scroll no se escape a la página de atrás */
  }

  /* Pantalla completa: el panel se ancla al VIEWPORT, no a la página ni a la cabecera.

     ⚠️ Acá hubo dos intentos fallidos, en este orden. Los dos están anotados porque los dos
     parecían correctos:

     1. `position: fixed` a secas → el panel medía 1 px de alto. `.cabecera` lleva
        `backdrop-filter`, y esa propiedad la convierte en el bloque contenedor de sus
        descendientes fijos: el `top: 64px; bottom: 0` se resolvía contra la cabecera de
        64 px, no contra la pantalla.
     2. `position: absolute` colgando de la cabecera sticky + `overflow: hidden` en <html>
        para trabar el fondo → andaba con la página arriba de todo y DESAPARECÍA con la
        página scrolleada. `overflow: hidden` en el elemento raíz anula el `sticky`: la
        cabecera volvía a su posición estática —1.500 px más arriba, fuera de la pantalla—
        y el panel, que colgaba de ella, se iba con ella.

     La solución es `fixed` + apagar el `backdrop-filter` de la cabecera mientras el menú
     está abierto (regla de abajo). Sin ese filtro, `fixed` vuelve a ser contra el viewport,
     y no se pierde nada: con el panel opaco tapando todo, no queda fondo que desenfocar.

     El fondo del panel es OPACO: flota sobre el hero, y con el rgba de la cabecera se
     transparentaba el título y el menú quedaba ilegible.

     `margin-inline: 0` cancela el margen negativo que usa el panel en el flujo normal (el
     del caso sin JS): acá ya ocupa el ancho entero y ese margen lo haría 48 px más ancho
     que la pantalla, con scroll horizontal en todo el sitio. */
  .menu-abierto .cabecera { backdrop-filter: none; }

  [data-js] .cabecera__menu[data-abierto] {
    display: flex; flex-direction: column;
    position: fixed; inset: 64px 0 0;
    margin-inline: 0;
    background: #291026;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .menu { display: grid; align-content: start; padding-block: var(--space-4) var(--space-2); }
}

@media (min-width: 1024px) {
  .menu { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; }
}

/* El tamaño del menú en móvil es GRANDE a propósito: es un panel a pantalla completa,
   no una barra, y se toca con el pulgar. En escritorio vuelve a tamaño de barra —a 32 px
   los tres ítems no entrarían en una fila junto al logo y el botón. */
.menu__item a,
.menu__grupo > summary {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0;
  color: rgba(255,255,255,.86);
  font-family: var(--font-display);
  /* 24 px = 25% menos que --text-2xl. La escala de marca salta de 22 a 26 y no tiene un
     paso en 24, así que se expresa como fracción del token: queda atado a la escala y se
     lee de dónde sale, en vez de ser un número suelto sin origen. */
  font-size: calc(var(--text-2xl) * .75);
  font-weight: var(--font-semibold);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
  transition: color 150ms var(--ease-out);
}
.menu__grupo > summary::-webkit-details-marker { display: none; }
@media (hover: hover) {
  .menu__item a:hover,
  .menu__grupo > summary:hover { color: #fff; }
}
.menu a[aria-current="page"] { color: var(--yma-lima); }
.menu__item a:focus-visible,
.menu__grupo > summary:focus-visible {
  outline: 2px solid var(--yma-lima); outline-offset: 3px; border-radius: 4px;
}

/* la flechita del desplegable */
.menu__grupo > summary::after {
  content: '';
  width: .38em; height: .38em;      /* en `em` para que acompañe al tamaño del texto */
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transition-fast);
}
.menu__grupo[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

/* ── pie del menú móvil ────────────────────────────────────────
   Sólo existe en el panel a pantalla completa. Dos cosas que el menú no tenía:

   1. LOS PROGRAMAS. Las 5 verticales tienen página propia y hasta acá sólo se llegaba a
      ellas desde el pie del sitio, que en móvil está a un scroll entero de distancia.
   2. LAS REDES. Salen de `navegacion.pie.redes`, la misma lista que ya usa el pie: una
      sola fuente, no dos.

   Se pega abajo con `margin-top: auto`, así el panel se ve terminado aunque el menú de
   arriba sea corto.                                                                     */
.menu__pie { display: none; }

@media (max-width: 1023px) {
  [data-js] .cabecera__menu[data-abierto] .menu__pie {
    display: block;
    margin-top: auto;
    /* el padding lateral es el mismo del `.menu`: el panel va a sangre, el contenido no */
    padding: var(--space-5) var(--space-5) var(--space-6);
    border-top: 1px solid rgba(255,255,255,.12);
  }
}

.menu__pie-titulo {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--yma-lima);
  margin-bottom: var(--space-3);
}

.menu__secundario { list-style: none; margin: 0 0 var(--space-5); padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); }
.menu__secundario a {
  display: block; padding: var(--space-2) 0;
  color: rgba(255,255,255,.72);
  font-size: var(--text-base);
  text-decoration: none;
}
.menu__secundario a[aria-current="page"] { color: var(--yma-lima); }
@media (hover: hover) { .menu__secundario a:hover { color: #fff; } }

.menu__redes { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-3);
  flex-wrap: wrap; }
.menu__redes a {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: 44px;                       /* área táctil */
  padding: 0 var(--space-4) 0 var(--space-3);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-full);
  color: rgba(255,255,255,.86);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-decoration: none;
  transition: border-color 150ms var(--ease-out), color 150ms var(--ease-out);
}
.menu__redes svg { width: 20px; height: 20px; flex: none; }
@media (hover: hover) {
  .menu__redes a:hover { color: #fff; border-color: var(--yma-lima); }
}
.menu__redes a:focus-visible { outline: 2px solid var(--yma-lima); outline-offset: 3px; }

/* ── desplegables ──────────────────────────────────────────────
   En móvil el panel empuja el contenido hacia abajo (acordeón). En escritorio flota
   encima, anclado al grupo.                                                            */

.menu__panel { display: grid; }
.menu__panel a {
  color: rgba(255,255,255,.78);
  text-decoration: none;
  font-size: calc(var(--text-2xl) * .75);
  font-family: var(--font-display);
  padding: var(--space-3) 0 var(--space-3) var(--space-5);
  border-left: 2px solid rgba(255,255,255,.14);
}
@media (hover: hover) { .menu__panel a:hover { color: #fff; border-left-color: var(--yma-lima); } }
.menu__panel a[aria-current="page"] { color: var(--yma-lima); border-left-color: var(--yma-lima); }

@media (min-width: 1024px) {
  /* 18 px. En escritorio la escala de marca salta de --text-base (16) a --text-md (20),
     sin escalón intermedio: a 20 el menú pesaba demasiado al lado del logo y el botón.
     Se escribe el valor porque no hay token para este paso; el próximo escalón hacia
     abajo, si hiciera falta, es var(--text-base). */
  .menu__item a,
  .menu__grupo > summary { font-size: 18px; font-weight: var(--font-medium); }
  .menu__panel a { font-size: var(--text-base); font-family: inherit; }

  .menu__grupo { position: relative; }
  .menu__grupo > summary { padding-inline: var(--space-3); }
  .menu__item a { padding-inline: var(--space-3); }

  .menu__panel {
    position: absolute; top: 100%; left: 0; z-index: 60;
    min-width: 220px;
    padding: var(--space-2);
    background: var(--yma-violet-dark);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--radius-md);
    box-shadow: 0 18px 40px rgba(0,0,0,.38);
  }
  .menu__panel a {
    padding: var(--space-3) var(--space-4);
    border-left: 0;
    border-radius: var(--radius-sm);
    white-space: nowrap;
  }
  @media (hover: hover) {
    .menu__panel a:hover { background: rgba(255,255,255,.10); color: #fff; }
  }
}

/* ── botón de hamburguesa ──────────────────────────────────────
   Sale `hidden` del servidor y lo muestra el JS: si el script no corre, el menú ya está
   desplegado y un botón que no hace nada sólo confundiría.                             */

.cabecera__hamburguesa {
  display: grid; place-items: center;
  width: 44px; height: 44px;              /* área táctil mínima */
  background: transparent; border: 0; cursor: pointer;
  color: #fff;
}
.cabecera__hamburguesa[hidden] { display: none; }
@media (min-width: 1024px) { .cabecera__hamburguesa { display: none; } }

.hamburguesa__barras,
.hamburguesa__barras::before,
.hamburguesa__barras::after {
  display: block; width: 22px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform 180ms var(--ease-out), opacity 120ms linear;
}
.hamburguesa__barras::before,
.hamburguesa__barras::after { content: ''; position: absolute; }
.hamburguesa__barras::before { transform: translateY(-7px); }
.hamburguesa__barras::after  { transform: translateY(7px); }

/* abierto = una X */
[aria-expanded="true"] .hamburguesa__barras { background: transparent; }
[aria-expanded="true"] .hamburguesa__barras::before { transform: rotate(45deg); }
[aria-expanded="true"] .hamburguesa__barras::after  { transform: rotate(-45deg); }
@media (min-width: 1024px) {
  [aria-expanded="true"] .hamburguesa__barras { background: currentColor; }
}

.cabecera__cta { flex: none; }
@media (max-width: 1023px) { .cabecera__cta { margin-left: 0; } }

/* OJO: es la SEGUNDA vez que esta regla muerde. Cualquier intento de achicar el botón
   desde `.cabecera__cta` tiene la misma especificidad (0,2,0) y pierde por estar más
   arriba en el archivo. El tamaño del botón de la barra se cambia ACÁ. */
.cabecera .btn { min-height: 40px; padding-inline: var(--space-4); font-size: var(--text-base); }
@media (min-width: 1024px) { .cabecera .btn { padding-inline: var(--space-5); } }

/* ── pie del sitio ─────────────────────────────────────────────
   Una columna de MARCA + tres de navegación (rediseñado 2026-08-02).

   El pie es lo último que ve alguien que scrolleó la página entera —o sea, alguien
   interesado— y hasta ahora lo único que le ofrecía eran más enlaces. Ahora la primera
   columna es la marca: logo, qué hacemos en una línea, el CTA y las redes.

   Los títulos van en lima porque el fondo es el violeta oscuro, el único lugar donde el
   lima puede ser texto (14,53:1). Sobre claro sería ilegible. */
.pie {
  background: var(--yma-violet-dark);
  color: rgba(255,255,255,.72);
  padding-block: var(--space-8, 64px) var(--space-6);
}
.pie__grilla { display: grid; gap: var(--space-7); }
@media (min-width: 900px) {
  .pie__grilla { grid-template-columns: minmax(280px, 1fr) 1.6fr; gap: var(--space-8, 64px); }
}

.pie__cols { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 600px) { .pie__cols { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }

.pie h2 {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--yma-lima);
  margin-bottom: var(--space-4);
}
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.pie a { text-decoration: none; color: rgba(255,255,255,.78); }
@media (hover: hover) { .pie a:hover { color: #fff; } }
.pie a:focus-visible { outline: 2px solid var(--yma-lima); outline-offset: 3px; border-radius: 4px; }

.pie__logo { height: 52px; width: auto; margin-bottom: var(--space-4); }
.pie__bajada { max-width: 34ch; margin-bottom: var(--space-5); }
.pie__cta {
  display: inline-flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-5);
  color: #fff;
}
.pie__cta span { transition: transform var(--transition-fast); }
@media (hover: hover) { .pie__cta:hover { color: #fff; } .pie__cta:hover span { transform: translateX(4px); } }

/* Las redes reusan las fichas del menú móvil (.menu__redes): un solo componente para las
   dos partes del sitio. Acá sólo hay que volver a mostrarlas —el menú las esconde fuera de
   su panel— y dejar que envuelvan. */
/* `.pie ul` es display:grid y le gana a `.menu__redes` por especificidad; con el ul en el
   selector se resuelve sin recurrir a !important. */
.pie ul.pie__redes { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.pie__legal {
  margin-top: var(--space-7); padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: var(--text-sm);
  display: grid; gap: var(--space-3);
}
@media (min-width: 768px) {
  .pie__legal { grid-template-columns: 1fr auto; align-items: center; }
}
.pie__legal p { margin: 0; }
.pie__legales { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }


/* ── bandera del país ──────────────────────────────────────────
   Va como elemento propio, ENCIMA del velo (z-index 3). En WordPress estaba pegada dentro
   del JPG del banner y quedaba cortada por el borde de la sección; acá es un SVG que escala
   nítido a cualquier tamaño y se posiciona solo. */
/* La bandera va SOLA: sin marco, sin radio, sin sombra y sin filo (Berna, 2026-08-02).
   Tenía un `outline` de 1 px al 22% de blanco —pensado para que no se fundiera con las
   partes claras de la foto— y se leía como un recuadro. Misma decisión que en las tarjetas
   de destino: un símbolo que ya tiene su forma no se enmarca. */
.hero__bandera {
  position: absolute; z-index: 3;
  right: var(--space-5); bottom: var(--space-5);
  width: 84px; height: auto;
}
@media (min-width: 1024px) {
  .hero__bandera { right: var(--space-6); bottom: var(--space-6); width: 116px; }
}

/* ── lo propio del hero de la home ─────────────────────────────
   Casi todo lo que antes vivía acá pasó a `.hero` y ahora lo comparten las seis páginas.
   Queda sólo el encuadre, que depende de ESTA foto: en desktop se recorta la franja del
   atardecer y la Ópera, y en mobile la foto es otra —un recorte vertical con las tres
   personas dentro— anclada arriba para que las caras queden por encima de los botones. */
/* 2026-08-02 — corregido. Estaba en 34%, heredado de cuando esta sección no tenía foto
   propia. Con la foto de las tres personas, un valor bajo empuja la ventana visible hacia
   ARRIBA de la imagen (sesga a mostrar el cielo) y recorta la parte de ABAJO, que es
   justamente donde están las personas —les cortaba los pies, y en pantallas anchas y bajas
   directamente medio cuerpo. object-position no recorta el ARCHIVO: decide qué franja de
   la imagen ya cargada se ve dentro de la caja. Subir el valor invierte el sesgo: se
   sacrifica cielo arriba (sobra) y se preserva a las personas abajo (lo que importa). */
.hero--home .hero__fondo { object-position: center 82%; }

.hero__destacado { font-style: normal; color: var(--yma-lima); }

.hero__acciones { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* Tres datos duros bajo el CTA. Es lo único de la primera pantalla que contesta
   "¿por qué ustedes?" antes de pedir un click. */
.datos-duros {
  list-style: none; margin: var(--space-6) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-5);
}
.datos-duros li { border-left: 2px solid rgba(195, 255, 0, .5); padding-left: var(--space-3); }
.datos-duros b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-extrabold, 800);
  line-height: 1;
}
.datos-duros span { font-size: var(--text-sm); color: rgba(255, 255, 255, .68); }
/* OJO: el max-width va en los HIJOS, nunca en `.hero__contenido`. Ese elemento ES el
   `.contenedor` —lleva las dos clases— así que limitarle el ancho no acota la medida del
   texto: le rompe el ancho y el padding a la página entera y deja la columna flotando
   centrada en 258 px. Pasó exactamente eso en el primer intento. */
.hero__titulo { max-width: 12ch; }
.hero__bajada {
  font-size: var(--text-md);
  color: rgba(255,255,255,.86);
  margin-bottom: var(--space-5);
}
.seccion__bajada { color: var(--text-muted); margin-top: calc(var(--space-5) * -1 + var(--space-2)); margin-bottom: var(--space-5); }

/* ── grilla de países ──────────────────────────────────────────
   Seis tarjetas iguales: la sección es el menú de destinos del sitio, y un menú no tiene
   por qué tener un favorito. (Hasta el 2026-08-02 la primera iba al doble de tamaño; eso
   destacaba Australia por su posición en el JSON, no por una decisión de negocio.)

   Cada tarjeta lleva bandera + nombre + flecha. La bandera es el atajo de lectura real:
   con 86% de tráfico mobile, la foto de un skyline nocturno a 160 px de ancho no dice qué
   país es; la bandera sí, y ocupa 26 px.                                                */
.paises { list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-3); grid-template-columns: repeat(2, 1fr); }

/* En móvil el primer destino va a lo ancho y los otros cuatro abajo en 2×2 (Berna,
   2026-08-02). Australia es el destino más buscado del sitio y en dos columnas quedaba
   igual que el resto, con una foto de 175 px donde no se distingue nada.
   La foto del líder va 3:2 y no 4:3: a lo ancho, un 4:3 mide 260 px de alto y empuja el
   2×2 abajo del pliegue. En 3:2 entra el líder y se asoma la fila siguiente, que es lo que
   invita a seguir mirando. */
@media (max-width: 767px) {
  .paises > li:first-child { grid-column: 1 / -1; }
  .paises > li:first-child .pais-card__foto { aspect-ratio: 3 / 2; }

  /* La barra del líder también sube de tamaño. Con el mismo cuerpo que las tarjetas chicas
     el nombre ocupaba el 19% del ancho y dejaba 188 px de vacío hasta la flecha: la foto
     decía "esto es lo importante" y la tipografía decía "esto es uno más".
     Va a --text-xl, que ya existe en la escala; no hace falta un tamaño nuevo. Contra el
     título de sección (--text-2xl, 32 px) queda 1,23 veces más chico: destaca fuerte y
     sigue por debajo del título, que es el que tiene que mandar en la sección. */
  .paises > li:first-child .pais-card__pie { padding: var(--space-4); gap: var(--space-4); }
  .paises > li:first-child .pais-card__nombre { font-size: var(--text-xl); }
  .paises > li:first-child .pais-card__flecha { font-size: var(--text-xl); }
  .paises > li:first-child .pais-card__bandera { width: 46px; height: 34px; }

  /* ── Con CUATRO destinos: las tres de abajo van apiladas a lo ancho ──────────
     (Berna, 2026-08-06 — "opción A", el mismo criterio que se aplicó en desktop.)

     Con cinco destinos el 2×2 de abajo cerraba perfecto. Al dar de baja Canadá quedaron
     tres, y el 2×2 dejaba a la última sola en su fila con media pantalla vacía al lado —
     el mismo hueco que había en desktop.

     Apiladas a lo ancho no queda ningún hueco, y encima cada nombre entra en UNA línea:
     en dos columnas "Nueva Zelanda" se partía en dos y esa tarjeta quedaba más alta que
     la de al lado.

     Cuesta ~190 px más de scroll que el 2×2. Se aceptó a cambio de no romper la jerarquía:
     Australia sigue siendo la única grande (decisión del 2026-08-02, es el destino más
     buscado). La alternativa —cuatro tarjetas iguales en 2×2, la mitad de alto— se
     descartó justamente por eso.

     Se activa SÓLO con cuatro destinos: si Canadá o Malta vuelven, esto deja de aplicar
     solo y vuelve el 2×2 de siempre. */
  .paises:has(> li:nth-child(4):last-child) > li:not(:first-child) {
    grid-column: 1 / -1;
  }
  /* 8:3 y no 16:5 como en desktop: la tarjeta acá mide ~353 px de ancho contra ~510, así
     que con el ratio de desktop la foto quedaría en 110 px de alto y la ciudad se vería
     como una tirita. En 8:3 da ~132 px, parecido en términos absolutos a los 159 px de
     desktop. */
  .paises:has(> li:nth-child(4):last-child) > li:not(:first-child) .pais-card__foto {
    aspect-ratio: 8 / 3;
  }
}

/* Seis columnas y cada tarjeta ocupa dos = tres por fila. La grilla se declara en 6 y no en
   3 para poder partir una fila al medio: con `span 3` entran DOS tarjetas por fila.

   La sección arranca con DOS GRANDES —Australia y Nueva Zelanda— y sigue con las tres
   chicas (Berna, 2026-08-02). Es el mismo criterio que en móvil: los destinos no pesan lo
   mismo y la grilla ahora lo dice. Antes era al revés (tres arriba, dos abajo), que dejaba
   lo más buscado con el tamaño más chico y lo menos buscado en las tarjetas grandes.

   La regla se activa SÓLO con cinco destinos (`:nth-last-child`). Si Malta vuelve —hoy está
   de baja, ver contenido/paises/malta.json— pasan a ser seis, esto deja de aplicar solo y
   queda una grilla pareja de 3 × 2. No hay nada que tocar. */
@media (min-width: 768px) {
  .paises { grid-template-columns: repeat(6, 1fr); gap: var(--space-4); }
  .paises > li { grid-column: span 2; }

  .paises > :is(li:nth-child(1):nth-last-child(5),
                li:nth-child(2):nth-last-child(4)) {
    grid-column: span 3;
  }
  /* 3:2 y no 4:3: a media fila (~540 px) un 4:3 mide 406 px de alto y la primera fila se
     come la pantalla entera. En 3:2 la fila de abajo se asoma. */
  .paises > :is(li:nth-child(1):nth-last-child(5),
                li:nth-child(2):nth-last-child(4)) .pais-card__foto {
    aspect-ratio: 3 / 2;
  }
  .paises > :is(li:nth-child(1):nth-last-child(5),
                li:nth-child(2):nth-last-child(4)) .pais-card__pie {
    padding: var(--space-4) var(--space-5);
  }
  .paises > :is(li:nth-child(1):nth-last-child(5),
                li:nth-child(2):nth-last-child(4)) .pais-card__nombre {
    font-size: var(--text-xl);
  }
  .paises > :is(li:nth-child(1):nth-last-child(5),
                li:nth-child(2):nth-last-child(4)) .pais-card__flecha {
    font-size: var(--text-xl);
  }
  .paises > :is(li:nth-child(1):nth-last-child(5),
                li:nth-child(2):nth-last-child(4)) .pais-card__bandera {
    width: 54px; height: 40px;
  }
}

/* ── Desktop con CUATRO destinos: uno grande a la izquierda, tres apilados a la derecha ──
   (Berna, 2026-08-06.)

   Al dar de baja Canadá quedaron cuatro destinos, y las reglas de arriba están atadas a que
   sean exactamente CINCO (`:nth-last-child(5)`), así que dejaron de aplicar solas: la grilla
   volvía a seis columnas con `span 2`, o sea tres arriba y Dubái sola abajo, ocupando un
   tercio del ancho. Una fila huérfana.

   Ahora: Australia toma la columna izquierda entera —es el destino más buscado— y los otros
   tres se apilan a la derecha en tarjetas anchas y bajas.

   Se activa SÓLO con cuatro destinos. Si Canadá o Malta vuelven, esto deja de aplicar solo y
   manda la regla de cinco (o la grilla pareja con seis). No hay nada que tocar.
   El `:has()` va en el padre porque `grid-template-columns` se declara ahí y no hay forma de
   contar hermanos desde el hijo. Si un navegador no lo soporta, cae en la grilla de seis
   columnas de arriba: queda como estaba, no roto. */
@media (min-width: 768px) {
  .paises:has(> li:nth-child(4):last-child) {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
  /* los tres de la derecha van todos a la segunda columna, uno debajo del otro */
  .paises:has(> li:nth-child(4):last-child) > li { grid-column: 2; }

  .paises:has(> li:nth-child(4):last-child) > li:first-child {
    grid-column: 1;
    grid-row: 1 / span 3;
  }
  /* El líder no lleva `aspect-ratio`: su alto lo fija la columna de la derecha. La foto se
     estira para llenar lo que sobra sobre la barra del nombre, que sigue abajo de todo por
     el `margin-top: auto` del pie. `min-height: 0` es lo que permite que un ítem flex se
     achique por debajo de su tamaño intrínseco: sin eso la foto desborda la tarjeta. */
  .paises:has(> li:nth-child(4):last-child) > li:first-child .pais-card { height: 100%; }
  .paises:has(> li:nth-child(4):last-child) > li:first-child .pais-card__foto {
    aspect-ratio: auto;
    flex: 1 1 auto;
    min-height: 0;
  }
  /* Mismo criterio de jerarquía tipográfica que en la regla de cinco: si la tarjeta es más
     grande, el nombre también, o la foto dice "esto importa" y la tipografía dice lo contrario. */
  .paises:has(> li:nth-child(4):last-child) > li:first-child .pais-card__pie {
    padding: var(--space-4) var(--space-5);
  }
  .paises:has(> li:nth-child(4):last-child) > li:first-child .pais-card__nombre,
  .paises:has(> li:nth-child(4):last-child) > li:first-child .pais-card__flecha {
    font-size: var(--text-xl);
  }
  .paises:has(> li:nth-child(4):last-child) > li:first-child .pais-card__bandera {
    width: 54px; height: 40px;
  }

  /* Las tres de la derecha: foto ancha y baja. El ratio está elegido para que las tres
     apiladas más los dos gaps den un alto parecido al de una tarjeta vertical a media
     pantalla; si se cambia, mirar que Australia no quede desproporcionada. */
  .paises:has(> li:nth-child(4):last-child) > li:not(:first-child) .pais-card__foto {
    aspect-ratio: 16 / 5;
  }
}

/* El pie es una BARRA SÓLIDA debajo de la foto, no un degradado encima (Berna, 2026-08-02).
   Tres cosas mejoran con el cambio:
   · La foto se ve entera. El degradado tapaba el tercio de abajo de todas las fotos, que es
     justo donde suele estar el frente de la ciudad.
   · El nombre se lee siempre igual. Sobre el degradado dependía de qué tan clara fuera la
     foto ahí: en Queenstown, con el lago, quedaba al límite.
   · La bandera pasa a ser una ficha con marco propio en vez de un sello de 26 px sobre la
     imagen — a 160 px de ancho en un celular, es lo que dice de qué país es la tarjeta. */
.pais-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius-xl);
  text-decoration: none;
  /* el mismo tono que la barra: si una foto no carga, la tarjeta sigue siendo un bloque */
  background: var(--violet-800);
  box-shadow: inset 0 0 0 2px transparent;
  transition: transform var(--duration-press) var(--ease-out), box-shadow 200ms var(--ease-out);
}
/* `display: contents` saca al <picture> del árbol de cajas: el <img> queda como hijo flex
   DIRECTO de .pais-card, que es lo que necesitan el `margin-top: auto` del pie y el
   `flex: 1 1 auto` de la foto del líder. Sin esto, el picture pasa a ser el ítem flex, la
   foto deja de estirarse para llenar el alto y la barra del nombre se va al medio.
   El <picture> existe sólo para elegir archivo por viewport (ver `tarjetaAlta` en home.mjs);
   no aporta nada al layout. */
.pais-card picture { display: contents; }

.pais-card__foto {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform 500ms var(--ease-out);
}
.pais-card__pie {
  display: flex; align-items: center; gap: var(--space-3);
  /* pegada abajo: en una fila donde un nombre ocupa dos líneas ("Nueva Zelanda" en móvil)
     las tarjetas se estiran a la más alta, y sin esto la barra de las otras quedaba
     flotando a media altura */
  margin-top: auto;
  padding: var(--space-3) var(--space-4);
  color: #fff;
  background: var(--violet-800);
}
/* La bandera va SOLA: sin marco, sin borde, sin radio y sin sombra (Berna, 2026-08-02).
   Es un símbolo que ya tiene su propia forma; enmarcarlo lo convierte en un ícono de app. */
.pais-card__bandera {
  width: 38px; height: 28px; flex: none;
  object-fit: contain;
}
/* En mobile la grilla es de dos columnas: a --text-lg, "Nueva Zelanda" se parte en dos
   líneas y se le monta la flecha. El nombre arranca en el tamaño de cuerpo y sólo crece
   cuando la tarjeta tiene ancho para bancarlo. */
.pais-card__nombre {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--font-extrabold);
  letter-spacing: -.01em;
  line-height: 1.15;
  min-width: 0;
}
.pais-card__flecha {
  margin-inline-start: auto;
  color: var(--yma-lima);
  font-size: var(--text-lg);
  line-height: 1;
  transition: transform var(--transition-fast);
}
@media (min-width: 768px) {
  .pais-card__pie { padding: var(--space-4) var(--space-5); gap: var(--space-4); }
  .pais-card__bandera { width: 46px; height: 34px; }
  .pais-card__nombre { font-size: var(--text-lg); }
  .pais-card__flecha { font-size: var(--text-xl); }
}

@media (hover: hover) {
  .pais-card:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 0 0 2px var(--yma-lima), 0 12px 28px rgba(41,16,38,.22);
  }
  .pais-card:hover .pais-card__foto { transform: scale(1.06); }
  .pais-card:hover .pais-card__flecha { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .pais-card, .pais-card__foto, .pais-card__flecha { transition: none; }
  .pais-card:hover .pais-card__foto,
  .pais-card:hover .pais-card__flecha { transform: none; }
}

/* ── testimonios ───────────────────────────────────────────────
   Primero la cita, la persona al pie: lo que convence es lo que dijeron, no de quién es la
   cara. La comilla grande de fondo hace que el bloque se lea como una cita antes de leerse.

   Va en violeta y no en lima: acá el fondo es claro, y sobre blanco el lima da 1,19:1.
   Es la misma regla que en el resto del sitio — el lima sólo vive sobre el violeta oscuro. */
.testimonios { list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 768px)  { .testimonios { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .testimonios { grid-template-columns: repeat(3, 1fr); } }

.testimonio {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--bg-cream);
}
.testimonio::before {
  content: '\201C';
  position: absolute; top: -.18em; right: .12em;
  font-family: var(--font-display);
  font-size: 96px; font-weight: var(--font-extrabold);
  line-height: 1;
  color: var(--violet-300);
  opacity: .45;
  pointer-events: none;
}
.testimonio__texto { margin: 0; font-size: var(--text-base); position: relative; }
.testimonio__firma {
  display: flex; align-items: center; gap: var(--space-3);
  margin-top: auto;    /* la firma se pega abajo aunque las citas midan distinto */
}
.testimonio__foto {
  width: 52px; height: 52px; flex: none;
  border-radius: var(--radius-full); object-fit: cover;
  box-shadow: 0 0 0 2px var(--yma-violet);
}
.testimonio__autor { font-family: var(--font-display); font-weight: var(--font-bold); line-height: 1.25; }
.testimonio__autor span { display: block; color: var(--text-muted); font-weight: var(--font-regular);
  font-size: var(--text-sm); }

/* ── quiénes somos ─────────────────────────────────────────── */
.nosotros { position: relative; overflow: hidden; color: #fff; background: var(--yma-violet-dark); }
.nosotros__fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .34; }
.nosotros__contenido { position: relative; z-index: 1; max-width: 640px; }
.nosotros p { margin-bottom: var(--space-5); color: rgba(255,255,255,.9); }

/* ── logos de prensa ───────────────────────────────────────── */
/* ── medios de prensa ──────────────────────────────────────────
   Texto, no logos. Tratamiento traído de la maqueta del rediseño de www
   (new-web/home/index-v6.html): etiqueta chica en versalitas arriba y los nombres de los
   medios en la tipografía de títulos, en una fila que envuelve.

   Sustituye 6 PNG de 2021 que pesaban 172 KB, se veían borrosos en retina y llevaban
   `alt="logos-prensa04"`.                                                              */

.prensa { text-align: center; }

.prensa__etiqueta {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

.prensa__medios {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: var(--space-3) var(--space-5);
  font-family: var(--font-display);
  font-weight: var(--font-bold);
  font-size: var(--text-md);
  color: var(--text-ink-2);
}
@media (min-width: 768px) {
  .prensa__medios { gap: var(--space-3) var(--space-7); font-size: var(--text-lg); }
}

/* ── /contacto/ ────────────────────────────────────────────────
   El hero y el formulario comparten sección. En desktop van lado a lado para que el
   formulario quede arriba del pliegue; en mobile se apilan, con el texto primero (corto)
   y el formulario enseguida. Es la única página cuyo trabajo ES el formulario: hacerlo
   buscar cuesta gente. */
.contacto-hero {
  background: radial-gradient(120% 130% at 15% 0%, #8832D7 0%, #7324BB 45%, #270C40 100%);
  color: #fff;
  padding-block: var(--space-7);
  scroll-margin-top: 80px;
}
@media (min-width: 1024px) { .contacto-hero { padding-block: var(--space-9, 80px); } }

.contacto-hero__grilla { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 1024px) {
  .contacto-hero__grilla { grid-template-columns: 1fr 560px; gap: var(--space-7); }
}

.contacto-hero__texto .hero__titulo { font-size: var(--text-3xl); }
.contacto-hero__puntos {
  list-style: none; margin: var(--space-5) 0 0; padding: 0;
  display: grid; gap: var(--space-3);
}
.contacto-hero__puntos li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3);
  align-items: start;
  color: rgba(255,255,255,.9);
  font-size: var(--text-base);
}
.contacto-hero__puntos li::before {
  content: ''; margin-top: .15em;
  width: 20px; height: 20px;
  border-radius: var(--radius-full);
  background: var(--yma-lima)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23270C40' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / 13px no-repeat;
}
/* dentro del hero de contacto el marco no se centra: ocupa su columna */
.contacto-hero .formulario__marco { max-width: none; margin-inline: 0; }

/* ══════════════════════════════════════════════════════════════
   Programas, institucional, FAQ, legales y gracias
   ══════════════════════════════════════════════════════════════ */

/* ── hero sin foto ─────────────────────────────────────────────
   Las verticales y las institucionales van con degradado y no con foto: las 4 imágenes
   de cabecera que había están para regenerar, y 4 páginas con foto + 1 sin foto se ve
   peor que las 5 iguales. Cuando lleguen las nuevas es agregar `hero__fondo`.        */

.hero--plano {
  min-height: 0;
  background: radial-gradient(120% 130% at 15% 0%, #8832D7 0%, #7324BB 45%, #270C40 100%);
}
.hero--plano .hero__bajada { max-width: 62ch; }
.hero--compacto { padding-block: var(--space-6); }
.hero--compacto .hero__titulo { font-size: var(--text-3xl); margin-bottom: 0; }

/* ── prosa ─────────────────────────────────────────────────────
   Ancho de lectura acotado. Una línea de 1200 px no se puede seguir con la vista:
   el ojo pierde el renglón al volver a la izquierda.                                 */

.prosa { max-width: 68ch; }
.prosa p { margin-bottom: var(--space-4); }
.prosa p:last-child { margin-bottom: 0; }

.contenedor--angosto { max-width: var(--container-md); }

/* En los legales el ancho lo acota el <main> entero, incluido el título del hero. */
.pagina--legal .contenedor { max-width: var(--container-md); }
.pagina--legal .seccion { padding-block: var(--space-6); }
.pagina--legal .seccion__titulo { font-size: var(--text-xl); }

/* ── especificaciones ──────────────────────────────────────────
   Pares dato/valor (precio, duración, requisitos). <dl> y no tabla: no es una matriz.
   En móvil se apila, que es por donde entra el 86% del tráfico.                      */

.especificaciones {
  display: grid; gap: var(--space-4);
  margin: 0; padding: 0;
}
@media (min-width: 768px) { .especificaciones { grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-6); } }

.especificacion {
  padding: var(--space-4);
  background: var(--bg-paper);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.seccion--crema .especificacion { background: #fff; }

.especificacion dt {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--magenta-600);
  margin-bottom: var(--space-1);
}
.especificacion dd { margin: 0; font-size: var(--text-base); color: var(--text-ink); }

/* ── tarjetas ──────────────────────────────────────────────────
   Grilla de título + texto corto. Sin link: si fueran clickeables llevarían <a>.      */

.tarjetas {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-4);
}
@media (min-width: 768px)  { .tarjetas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tarjetas { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }

.tarjeta {
  padding: var(--space-5);
  background: var(--bg-paper);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.seccion--crema .tarjeta { background: #fff; }
.tarjeta h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.tarjeta p  { color: var(--text-ink-2); margin: 0; }

/* ── equipo ────────────────────────────────────────────────────
   Las fotos son de 149×149 px: es lo que había en WordPress. A 96 px se ven bien en
   pantalla común y algo blandas en retina. Están anotadas para regenerar.            */

.equipo {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-5);
}
@media (min-width: 640px)  { .equipo { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .equipo { grid-template-columns: repeat(3, 1fr); } }

.persona {
  padding: var(--space-5);
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.persona__foto {
  width: 96px; height: 96px;
  border-radius: var(--radius-full);
  object-fit: cover;
  margin-bottom: var(--space-3);
}
.persona__rol {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--magenta-600);
  margin-bottom: 2px;
}
.persona__nombre {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-3);
}
.persona__cita {
  margin: 0; padding: 0; border: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-ink-2);
}
.persona__cita::before { content: '“'; }
.persona__cita::after  { content: '”'; }

/* ── cierre ────────────────────────────────────────────────────
   /quienes-somos/ no tiene formulario (en WP tampoco). Sin esto la página termina en
   un callejón sin salida: es la única institucional con tráfico.                     */

.cierre { text-align: center; background: var(--bg-cream); }
.cierre .seccion__titulo { max-width: 22ch; margin-inline: auto; }

/* ── acordeón de FAQ ───────────────────────────────────────────
   <details>/<summary> nativo: abre sin JavaScript, funciona con teclado de fábrica y
   Ctrl+F encuentra el texto aunque esté cerrado. El de WordPress era JS.             */

.faq {
  border-bottom: 1px solid var(--border-subtle);
  /* Sin esto el ancla queda TAPADA por la cabecera sticky. No es cosmético: las 10 URLs
     /faq/<slug>/ del sitio viejo redirigen a #<slug> de esta página, así que caer en el
     lugar correcto es el único trabajo de esos 301. La cabecera mide 64 px con el menú
     colapsado, en las dos pantallas. */
  scroll-margin-top: 80px;
}
.faq summary {
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  width: 12px; height: 12px;
  border-right: 2px solid var(--magenta-600);
  border-bottom: 2px solid var(--magenta-600);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transition-fast);
}
.faq[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq summary:hover { color: var(--yma-violet); }
.faq summary:focus-visible { outline: 2px solid var(--magenta-600); outline-offset: 4px; }

.faq__respuesta { padding-bottom: var(--space-5); max-width: 68ch; }
.faq__respuesta p { margin-bottom: var(--space-3); color: var(--text-ink-2); }
.faq__respuesta p:last-child { margin-bottom: 0; }

/* ── páginas de gracias ────────────────────────────────────────
   La persona ya convirtió: una confirmación clara y una salida. Nada más.            */

.gracias { text-align: center; padding-block: var(--space-9); }
.gracias__marca {
  display: grid; place-items: center;
  width: 64px; height: 64px;
  margin: 0 auto var(--space-5);
  border-radius: var(--radius-full);
  background: var(--yma-lima);
  color: var(--yma-violet-dark);
  font-size: 30px; line-height: 1;
}
.gracias__titulo { font-size: var(--text-3xl); margin-bottom: var(--space-3); }
.gracias__texto  { font-size: var(--text-md); color: var(--text-ink-2); margin-bottom: var(--space-6); }

/* ── el único momento de movimiento del sitio ──────────────────
   Entrada del hero de la home: la foto se asienta desde un 1,06 y el texto sube en tres
   tiempos cortos. Nada más se anima en toda la página.

   Por qué UNO solo: la reacción automática es poner un fade-and-rise por scroll en cada
   sección, y eso no es audacia, es la plantilla. Un momento orquestado en el lugar donde
   se decide si te quedás vale más que ocho iguales repartidos.

   Por qué con `animation` y no con una clase que agrega JavaScript: una animación CSS
   corre sola y termina en el estado normal del elemento. Si el navegador no la ejecuta
   —pestaña en segundo plano, motor de captura, JS caído— el contenido YA está visible,
   porque el estado por defecto es el visible y la animación sólo lo interviene. Atar la
   visibilidad a una clase es como se publican secciones en blanco sin enterarse. */

@keyframes yma-hero-foto {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
@keyframes yma-hero-sube {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* La entrada del hero también se unifica: era sólo de la home y por eso las páginas de país
   aparecían de golpe mientras la home tenía este arranque. */
.hero .hero__fondo {
  animation: yma-hero-foto 1200ms var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
}
.hero .hero__antetitulo { animation: yma-hero-sube 600ms cubic-bezier(.16,1,.3,1) 60ms both; }
.hero .hero__titulo     { animation: yma-hero-sube 700ms cubic-bezier(.16,1,.3,1) 140ms both; }
.hero .hero__bajada     { animation: yma-hero-sube 700ms cubic-bezier(.16,1,.3,1) 240ms both; }
.hero .btn              { animation: yma-hero-sube 700ms cubic-bezier(.16,1,.3,1) 330ms both; }
.hero .datos-duros      { animation: yma-hero-sube 700ms cubic-bezier(.16,1,.3,1) 420ms both; }

@media (prefers-reduced-motion: reduce) {
  .hero .hero__fondo,
  .hero .hero__antetitulo,
  .hero .hero__titulo,
  .hero .hero__bajada,
  .hero .datos-duros,
  .hero .btn { animation: none; }
}


/* ── ritmo de la home ──────────────────────────────────────────
   Todas las secciones tenían el mismo alto de aire, y el único recurso de pausa era
   alternar blanco y gris. Ahora el espaciado dice qué pesa: países y testimonios
   respiran, prensa es una tira fina, y el bloque institucional va a sangre.          */

.pagina-home [data-yma-section="paises"],
.pagina-home [data-yma-section="testimonios"] { padding-block: clamp(56px, 9vw, 112px); }
.pagina-home [data-yma-section="programas"]   { padding-block: clamp(44px, 6vw, 72px); }
.pagina-home [data-yma-section="prensa"]      { padding-block: clamp(28px, 4vw, 44px); }

/* Los programas son la oferta, no una lista de tareas: más tamaño y más aire entre ítems. */
.pagina-home [data-yma-section="programas"] .lista-check { gap: var(--space-5); }
.pagina-home [data-yma-section="programas"] .lista-check li {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  align-items: center;
}