/* ==========================================================================
   Bon VoyArmy — Corea 2027
   Variables, grilla de fondo, tipografía y componente de ventanita retro.
   ========================================================================== */

@font-face {
  font-family: "Pixeloid";
  src: url("assets/fonts/PixeloidSans.ttf") format("truetype");
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pixeloid";
  src: url("assets/fonts/PixeloidSans-Bold.ttf") format("truetype");
  font-weight: bold;
  font-display: swap;
}

:root {
  /* Paleta */
  --lila:        #A78BFA;
  --lila-claro:  #DDD6FE;
  --rosa:        #FF3EA5;
  --rosa-suave:  #FF8FC5;
  --azul:        #16324F;
  --amarillo:    #FFD466;
  --celeste:     #3ECFDF;
  --rojo:        #F0544F;
  --fondo:       #F8F7F5;
  --grilla:      #EAEAE8;

  /* Acento extra para el marco del hero */
  --naranja:     #FF9142;

  /* Tipografía */
  --fuente-pixel: "Pixeloid", monospace;
  --fuente-texto: "Pixeloid", system-ui, sans-serif;

  /* Ventanita retro */
  --borde-grosor: 3px;
  --sombra-dura: 6px 6px 0 var(--azul);
}

@media (min-width: 768px) {
  :root {
    --borde-grosor: 4px;
    --sombra-dura: 8px 8px 0 var(--azul);
  }
}

/* ==========================================================================
   Reset básico
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  display: block;
}

/* ==========================================================================
   Base
   ========================================================================== */

/* La grilla tenue y los sparkles/pixeles sueltos van en el propio
   background-image de body, en capas (la grilla arriba, los
   sparkles abajo). Un background es siempre el fondo del elemento:
   se pinta detras de TODOS sus hijos por definicion, sin necesitar
   z-index ni JS — donde despues cae una ventanita (o el hero, la
   navbar, cualquier caja con su propio fondo opaco) esta capa queda
   tapada sola. El tile de sparkles (assets/img/fondo/sparkles-tile.svg,
   640x860) se repite con background-repeat normal: como es un
   background-image, cubre automaticamente el alto real de la pagina
   (el que sea, en cualquier ancho) sin depender de conocer esa
   altura de antemano — a diferencia de un layer de decoracion
   position:absolute aparte, que si necesita saber la altura total
   del documento para estirarse. Las posiciones de los sparkles
   DENTRO del tile no tienen ninguna relacion con donde caen las
   ventanitas (se generaron sueltas, sin mirar el layout de las
   secciones) — eso es a proposito: se probo antes una version que
   los ubicaba pegados al borde de cada ventanita y terminaba
   formando una especie de halo alrededor de cada una, que no es lo
   que se buscaba. Ver mas abajo (justo despues de .ventana) por que
   se descarto esa version. */
body {
  background-color: var(--fondo);
  background-image:
    linear-gradient(var(--grilla) 1px, transparent 1px),
    linear-gradient(90deg, var(--grilla) 1px, transparent 1px),
    url("assets/img/fondo/sparkles-tile.svg");
  background-size: 24px 24px, 24px 24px, 640px 860px;
  background-repeat: repeat, repeat, repeat;
  color: var(--azul);
  font-family: var(--fuente-texto);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1, h2, h3 {
  font-family: var(--fuente-pixel);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.3;
  margin: 0 0 1rem;
  color: var(--lila);
}

/* Los títulos alternan lila / rosa sección a sección */
.ventana:nth-of-type(even) h1,
.ventana:nth-of-type(even) h2,
.ventana:nth-of-type(even) h3 {
  color: var(--rosa);
}

p {
  color: var(--azul);
  margin: 0 0 1rem;
}

/* ==========================================================================
   Botón — .boton es el único CTA del sitio ("Quiero sumarme"). La
   variante --secundario es para acciones de apoyo (ver el PDF del
   itinerario), nunca para sumar una segunda llamada a la acción.
   ========================================================================== */

.boton {
  display: inline-block;
  font-family: var(--fuente-pixel);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1rem;
  color: var(--azul);
  background-color: var(--amarillo);
  border: var(--borde-grosor) solid var(--azul);
  box-shadow: var(--sombra-dura);
  padding: 0.75em 1.5em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.boton:hover,
.boton:focus-visible {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 var(--azul);
}

@media (min-width: 768px) {
  .boton {
    font-size: 1.15rem;
  }
}

/* Glitch del botón "Quiero sumarme" (hero y navbar, .boton--glitch —
   no .boton en general, para no afectar al secundario del PDF):
   mismo recurso visual que el glitch del título del hero
   (::before/::after con content:attr(data-text), un canal rosa y
   otro celeste desfasados), pero con una diferencia clave a
   propósito: el título queda con un desfasaje chico permanente
   durante todo el ciclo y solo el TAMAÑO de ese desfasaje crece un
   instante (nunca vuelve a cero) — para el título eso lee bien
   porque es un efecto ambiental de fondo. Para el botón, en cambio,
   el estado base tiene que ser el diseño original sin ningún
   desdoblamiento (fondo amarillo, borde y sombra oscuros lisos): por
   eso acá los pseudo-elementos arrancan en opacity:0 (invisibles) y
   la animación anima OPACITY ademas de transform, no solo transform
   — la mayor parte del ciclo de 5s quedan en opacity:0 pegados al
   botón (transform:translate(0,0), sin desfasaje), y solo entre el
   90% y el 92% del ciclo (unos 100ms) se hacen visibles de golpe con
   el desfasaje de color, para volver a opacity:0 enseguida. Un
   z-index negativo no alcanzaría para esto (dejaría el desfasaje
   siempre ahí, solo que tapado por el fondo opaco del botón en vez
   de ausente).
   Cada pseudo-elemento duplica el botón entero, no solo el texto:
   mismo padding, mismo borde (coloreado) y misma sombra dura
   (coloreada) — así al aparecer arrastra texto, borde y sombra como
   una sola unidad. inset:calc(-1 * var(--borde-grosor)) en vez de
   inset:0 para que el pseudo-elemento mida exactamente la caja real
   CON su borde (inset:0 se alinea con el padding-box del contenedor
   posicionado, que quedaría más chico que el botón real por el
   ancho del borde). */
.boton--glitch {
  position: relative;
}

.boton--glitch::before,
.boton--glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: calc(-1 * var(--borde-grosor));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75em 1.5em;
  background: transparent;
  border: var(--borde-grosor) solid transparent;
  pointer-events: none;
  opacity: 0;
}

.boton--glitch::before {
  color: var(--rosa);
  border-color: var(--rosa);
  box-shadow: 6px 6px 0 var(--rosa);
  animation: glitch-boton-rosa 5s ease-in-out infinite;
}

.boton--glitch::after {
  color: var(--celeste);
  border-color: var(--celeste);
  box-shadow: 6px 6px 0 var(--celeste);
  animation: glitch-boton-celeste 5s ease-in-out infinite;
}

@media (min-width: 768px) {
  .boton--glitch::before {
    box-shadow: 8px 8px 0 var(--rosa);
  }

  .boton--glitch::after {
    box-shadow: 8px 8px 0 var(--celeste);
  }
}

/* Casi todo el ciclo en opacity:0 sin desfasaje; el "golpe" de
   glitch dura de 90% a 92% (~100ms de los 5s) y vuelve a 0 enseguida.
   Dos instantes visibles (90% y 91%) con offsets distintos en vez de
   uno solo, para que dentro de ese golpe haya un pequeño temblor y
   no una única foto fija. */
@keyframes glitch-boton-rosa {
  0%, 89%, 92%, 100% { opacity: 0; transform: translate(0, 0); }
  90%                { opacity: 0.85; transform: translate(-9px, 5px); }
  91%                { opacity: 0.85; transform: translate(-4px, 3px); }
}

@keyframes glitch-boton-celeste {
  0%, 89%, 92%, 100% { opacity: 0; transform: translate(0, 0); }
  90%                { opacity: 0.85; transform: translate(9px, -5px); }
  91%                { opacity: 0.85; transform: translate(4px, -3px); }
}

.boton--secundario {
  background-color: var(--fondo);
  border-color: var(--amarillo);
}

.boton--secundario:hover,
.boton--secundario:focus-visible {
  background-color: var(--fondo);
}

/* Botón cuadrado solo-ícono (flechas, cerrar): mismo lenguaje visual que
   .boton pero recortado a un cuadrado, para la galería y el lightbox. */
.boton-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  font-family: var(--fuente-pixel);
  font-weight: bold;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--azul);
  background-color: var(--amarillo);
  border: var(--borde-grosor) solid var(--azul);
  box-shadow: var(--sombra-dura);
  padding: 0;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.boton-icono:hover,
.boton-icono:focus-visible {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 var(--azul);
}

/* ==========================================================================
   Navbar fija — oculta mientras se ve el hero; aparece al scrollear
   más allá (lo controla el JS agregando/sacando .navbar--visible).
   Mismo lenguaje visual que el hero: fondo lila con grilla.
   ========================================================================== */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background-color: var(--lila);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px);
  background-size: 24px 24px;
  border-bottom: var(--borde-grosor) solid var(--azul);
  box-shadow: 0 5px 0 var(--azul);
  padding: 0.5rem 1rem;
  /* -100% mueve la caja, pero no la sombra que sobresale 5px por
     debajo; se resta ese margen extra para que oculta no deje ni un
     hilo de sombra asomando arriba de todo. */
  transform: translateY(calc(-100% - 10px));
  transition: transform 0.35s ease;
}

.navbar--visible {
  transform: translateY(0);
}

.navbar__fila {
  display: flex;
  align-items: center;
  /* Con el título oculto (<600px) quedan solo dos ítems: space-evenly
     les da el mismo aire respecto de los bordes que entre ellos, en
     vez de quedar pegados cada uno a su borde (space-between). Desde
     600px el título ocupa todo el espacio libre por su flex-grow, así
     que esto deja de notarse: no hay espacio sobrante que repartir. */
  justify-content: space-evenly;
  gap: 0.75rem;
  max-width: 1300px;
  margin: 0 auto;
}

.navbar__logo {
  flex: 0 0 auto;
  height: 34px;
  width: auto;
  /* Nudge óptico: el botón tiene sombra dura hacia abajo que le suma
     peso visual debajo, así que sin esto el logo (sin sombra) se ve
     corrido hacia arriba aunque las cajas ya estén centradas. */
  margin-top: 3px;
}

/* En mobile, si no entran los tres elementos cómodos, se prioriza el
   logo y el botón: el título del medio se oculta por debajo de 600px.
   Entre 600 y 1300px el tamaño de letra se achica de forma fluida en
   vez de saltar de golpe en un breakpoint fijo; si en el extremo más
   angosto igual no entra en una línea, se deja envolver a dos (no hay
   white-space:nowrap) antes que recortarlo. */
.navbar__titulo {
  display: none;
  flex: 1 1 auto;
  text-align: center;
  font-family: var(--fuente-pixel);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(0.8rem, 0.46rem + 0.91vw, 1.2rem);
  line-height: 1.2;
  color: var(--fondo);
  margin: 0;
}

@media (min-width: 600px) {
  .navbar__titulo {
    display: block;
  }
}

.navbar__boton {
  flex: 0 0 auto;
  font-size: 0.8rem;
  padding: 0.5em 1em;
  box-shadow: 4px 4px 0 var(--azul);
}

.navbar__boton:hover,
.navbar__boton:focus-visible {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--azul);
}

@media (min-width: 768px) {
  .navbar {
    padding: 0.6rem 2rem;
  }

  .navbar__logo {
    height: 44px;
  }

  .navbar__boton {
    font-size: 0.95rem;
    padding: 0.6em 1.3em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .navbar {
    transition: none;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  align-self: stretch;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--lila);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px);
  background-size: 24px 24px;
  text-align: center;
  padding: 1.5rem 1.25rem;
}

.hero__decoracion {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__contenido {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 680px;
}

.hero__fila {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Destacados en amarillo con contorno/sombra dura en cualquier tamaño de
   pantalla; lo único que cambia entre breakpoints es su posición. */
.hero__kicker,
.hero__operador {
  font-family: var(--fuente-pixel);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
  font-size: clamp(0.9rem, 3vw, 1.35rem);
  color: var(--amarillo);
  margin: 0;
  text-shadow:
    -1px -1px 0 var(--azul),
     1px -1px 0 var(--azul),
    -1px  1px 0 var(--azul),
     1px  1px 0 var(--azul),
     3px  3px 0 var(--azul);
}

@media (min-width: 900px) {
  .hero__contenido {
    gap: 1.4rem;
    max-width: 1300px;
  }
}

/* Menos de 1180px: "bon voyarmy", el marco y "tendencias viajes" se
   apilan centrados, en flujo normal, dentro de hero__titulo-wrap (esto
   incluye la franja 900-1180px, donde Voya ya pasa a la esquina pero
   todavía no hay ancho de sobra para poner los laterales a los costados
   del marco sin que se corten). Como marco es siempre el hijo más
   ancho, el contenedor flex ya queda del ancho de marco sin necesidad
   de ningún cambio de display — eso es lo que deja a Voya (posicionada
   relativa a este mismo elemento) bien pegada a la esquina del marco
   incluso en esa franja intermedia. */
.hero__titulo-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

/* Desde 1180px, que es donde por fin hay ancho de sobra para los tres
   en una fila sin cortarse, "bon voyarmy" y "tendencias viajes" pasan a
   posicionarse absolute respecto del propio marco (no de
   hero__titulo-wrap, que por el margin-top de abajo no tiene el mismo
   alto que él): quedan a los costados, en diagonal opuesta, y se mueven
   con el marco porque al sacarlos del flujo, hero__titulo-wrap termina
   conteniendo solo a marco y su caja pasa a coincidir con la de él. El
   top de kicker compensa ese margin-top para calzar con el borde
   superior real del marco (el de operador no necesita compensación: el
   borde inferior de hero__titulo-wrap ya coincide con el del marco, no
   hay nada debajo). */
@media (min-width: 1180px) {
  .hero__kicker,
  .hero__operador {
    font-size: clamp(1.1rem, 1.4vw, 1.6rem);
  }

  .hero__kicker {
    position: absolute;
    /* rem, no em: .hero__marco tiene margin-top en em relativo a su
       propia fuente (heredada, 16px = 1rem), pero .hero__kicker tiene
       su propio font-size más grande — en em ahí quedaba mal calzado. */
    top: 2.75rem;
    right: calc(100% + 1.25rem);
  }

  /* bottom:0 (no top:100%) para que quede en diagonal exacta con
     kicker: kicker tiene su borde SUPERIOR pegado al borde superior
     del marco, así que operador tiene que tener su borde INFERIOR
     pegado al borde inferior — mismo criterio, espejado. Con
     top:100% el texto quedaba por debajo de esa línea (no alineado
     con ella) y se acercaba demasiado a la fecha. */
  .hero__operador {
    position: absolute;
    bottom: 0;
    left: calc(100% + 1.25rem);
  }

  /* Con kicker y operador ya afuera del flujo, el aire para Voya (el
     margin-top de marco) queda pesando solo arriba de todo el bloque
     y no tiene contraparte abajo — descentra el conjunto hacia abajo.
     Se sube el bloque entero la mitad de ese margin-top para volver a
     quedar centrado en la pantalla. Con transform en vez de margin
     negativo: un margin-top negativo en un flex item con
     align-items:center corre el contenido la mitad de lo esperado
     (el propio centrado "absorbe" la otra mitad), así que con
     transform, que no participa de ese cálculo, se ve el corrimiento
     completo. */
  .hero__contenido {
    transform: translateY(-1.375rem);
  }
}

@media (min-width: 1200px) {
  .hero__contenido {
    transform: translateY(-1.875rem);
  }

  .hero__kicker {
    top: 3.75rem;
  }
}

.hero__voya {
  box-shadow: none;
  filter: none;
}

/* Menos de 900px: Voya se saca del marco y va centrada arriba de todo
   el bloque, en flujo normal (no se puede superponer con nada). */
.hero__voya--top {
  width: clamp(70px, 16vw, 110px);
  animation: flotar 3s ease-in-out infinite;
}

.hero__voya--esquina {
  display: none;
}

/* Desde 900px: Voya se apoya en la esquina inferior izquierda del
   hero (no del marco: es hijo directo de .hero, no de
   hero__titulo-wrap, así que no la mueve ni el transform que centra
   el bloque ni ningún cambio del marco). Antes estaba arriba a la
   derecha del marco y el borde superior de la pantalla se la cortaba
   en varios anchos; abajo a la izquierda hay más aire y queda
   siempre entera. El padding del propio .hero ya le da separación al
   botón, que cae centrado. */
@media (min-width: 900px) {
  .hero__voya--top {
    display: none;
  }

  .hero__voya--esquina {
    display: block;
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    width: 130px;
    z-index: 2;
    animation: flotar 3s ease-in-out infinite;
  }
}

@media (min-width: 1200px) {
  .hero__voya--esquina {
    width: 180px;
  }
}

.hero__marco {
  position: relative;
  display: inline-block;
  padding: 0.6em 1.4em;
}

/* Más aire arriba del marco (afuera, no padding) en estos anchos para que
   el pedacito de Voya que se apoya en la esquina nunca llegue a pisar el
   texto. Va como margin y no como padding para que el marco (y el doble
   borde, que sigue su caja con inset:0) quede siempre ajustado y centrado
   respecto del texto. */
@media (min-width: 900px) {
  .hero__marco {
    margin-top: 2.75em;
  }
}

@media (min-width: 1200px) {
  .hero__marco {
    margin-top: 3.75em;
  }
}

.hero__marco::before,
.hero__marco::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid;
  pointer-events: none;
}

.hero__marco::before {
  border-color: var(--rosa);
  transform: translate(-5px, -5px);
}

.hero__marco::after {
  border-color: var(--naranja);
  transform: translate(5px, 5px);
}

.hero__titulo {
  margin: 0;
  color: var(--fondo);
  font-size: clamp(1.6rem, 6vw, 3.4rem);
  line-height: 1.05;
}

/* Dos líneas fijas — "Corea Japón" arriba, "2027" abajo — para que el
   marco quede claramente rectangular y nunca se parta en tres. */
.hero__titulo-linea {
  position: relative;
  display: block;
  white-space: nowrap;
}

/* Glitch sutil: canales rosa/celeste desfasados detrás del texto,
   como el desregistro de tinta del material impreso. */
.hero__titulo-linea::before,
.hero__titulo-linea::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.7;
}

.hero__titulo-linea::before {
  color: var(--rosa);
  transform: translate(-3px, 2px);
  animation: glitch-rosa 5s ease-in-out infinite;
}

.hero__titulo-linea::after {
  color: var(--celeste);
  transform: translate(3px, -2px);
  animation: glitch-celeste 5s ease-in-out infinite;
}

.hero__fecha {
  font-family: var(--fuente-pixel);
  font-weight: bold;
  font-size: clamp(1rem, 3vw, 1.25rem);
  color: var(--fondo);
  margin: 0 0 0.4rem;
}

@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@keyframes glitch-rosa {
  0%, 88%, 100% { transform: translate(-3px, 2px); }
  90%           { transform: translate(-6px, 3px); }
  92%           { transform: translate(-1px, 0); }
}

@keyframes glitch-celeste {
  0%, 88%, 100% { transform: translate(3px, -2px); }
  90%           { transform: translate(6px, -3px); }
  92%           { transform: translate(1px, 0); }
}

/* Pixeles y sparkles dispersos */

.pixel {
  position: absolute;
  width: 8px;
  height: 8px;
}

.pixel--sm { width: 5px; height: 5px; }
.pixel--lg { width: 11px; height: 11px; }

.pixel--amarillo { background-color: var(--amarillo); }
.pixel--celeste  { background-color: var(--celeste); }
.pixel--rosa     { background-color: var(--rosa-suave); }
.pixel--rojo     { background-color: var(--rojo); }

.sparkle {
  position: absolute;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}

.sparkle--sm { width: 9px; height: 9px; }
.sparkle--lg { width: 20px; height: 20px; }

.sparkle--amarillo { color: var(--amarillo); }
.sparkle--celeste  { color: var(--celeste); }
.sparkle--rosa     { color: var(--rosa-suave); }
.sparkle--rojo     { color: var(--rojo); }

/* ==========================================================================
   Componente: ventanita retro
   ========================================================================== */

.ventana {
  background-color: var(--lila-claro);
  border: var(--borde-grosor) solid var(--azul);
  box-shadow: var(--sombra-dura);
  align-self: center;
  width: min(92%, 800px);
  margin-block: 1.5rem;
  margin-inline: 1rem;
}

/* Todas las ventanitas quedan centradas (align-self:center, heredado de
   .ventana más arriba). El ancho sigue variando según el contenido de
   cada una (tope 800px) — esa es la variación entre secciones, ya no la
   alineación. Los circulitos quedan siempre a la izquierda. */
@media (min-width: 768px) {
  .ventana {
    width: fit-content;
    max-width: min(92%, 800px);
    margin-block: 3rem;
    margin-inline: 2rem;
  }
}

/* Desde 1200px todas las ventanitas pasan a 1100px de ancho fijo (no
   solo de tope): a diferencia del breakpoint anterior, acá se
   despriorizada el fit-content para que las secciones con contenido
   angosto (testimonios, FAQ, contacto) también se vean más anchas,
   parejas con galería y qué incluye. En mobile y en pantallas más
   chicas de escritorio (768-1199px) se mantiene el comportamiento de
   siempre (ancho según contenido, tope 800px). */
@media (min-width: 1200px) {
  .ventana {
    width: min(92%, 1100px);
    /* El max-width:800px del breakpoint de 768px sigue activo y sin
       esto le seguiría ganando al width de acá arriba (max-width
       siempre gana sobre width, sea cual sea su valor). */
    max-width: min(92%, 1100px);
  }
}

.ventana__barra {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--azul);
  border-bottom: var(--borde-grosor) solid var(--azul);
  padding: 8px 10px;
}

.ventana__circulo {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--azul);
  display: inline-block;
}

.ventana__circulo--amarillo { background-color: var(--amarillo); }
.ventana__circulo--celeste  { background-color: var(--celeste); }
.ventana__circulo--rojo     { background-color: var(--rojo); }

.ventana__contenido {
  padding: 1.5rem 1.25rem;
}

@media (min-width: 768px) {
  .ventana__contenido {
    padding: 2.5rem 2rem;
  }
}

/* ==========================================================================
   Qué es esto — sin título, arranca directo con una apertura de tres
   líneas más grande que el resto del texto.
   ========================================================================== */

.que-es-esto__apertura {
  margin-bottom: 1.5rem;
}

.que-es-esto__apertura p {
  font-weight: bold;
  font-size: clamp(1.05rem, 2.4vw, 1.2rem);
  line-height: 1.35;
  color: var(--azul);
  margin: 0 0 0.25em;
}

.que-es-esto__apertura p:last-child {
  margin-bottom: 0;
}

/* Párrafos de cuerpo: un poco más grandes que la base del sitio (para
   que la apertura, ahora más chica, no quede demasiado lejos en
   tamaño) y con más aire entre ellos que el margin-bottom por
   defecto de los <p>, que los dejaba muy pegados. Excluye
   .que-es-esto__destacado, que ya tiene su propio tratamiento. */
.que-es-esto__contenido > p:not(.que-es-esto__destacado) {
  font-size: 1.05rem;
  margin-bottom: 1.4rem;
}

.que-es-esto__destacado {
  font-weight: bold;
  font-size: clamp(1.05rem, 2.6vw, 1.25rem);
  /* Antes lila sobre el fondo lila-claro de la ventanita: casi sin
     contraste. Rosa sí contrasta bien contra ese fondo. */
  color: var(--rosa);
}

/* ==========================================================================
   Galería de ediciones anteriores — una sola tira por vez, con pestañas
   retro para elegir el año. Scroll horizontal nativo (con scrollbar
   oculta) más flechas en desktop; en mobile se arrastra con el dedo.
   ========================================================================== */

.galeria__tabs {
  display: flex;
  gap: 0.6rem;
  margin: 0 0 1rem;
}

.galeria__tab {
  font-family: var(--fuente-pixel);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.95rem;
  color: var(--azul);
  background-color: var(--fondo);
  border: var(--borde-grosor) solid var(--azul);
  padding: 0.5em 1.3em;
  cursor: pointer;
}

.galeria__tab:hover {
  background-color: var(--lila-claro);
}

/* La pestaña activa se ve "hundida" y rellena: sombra dura hacia adentro
   en vez de proyectada, y color sólido en vez de fondo plano. */
.galeria__tab--activa,
.galeria__tab--activa:hover {
  background-color: var(--lila);
  color: var(--fondo);
  box-shadow: inset 3px 3px 0 rgba(22, 50, 79, 0.45);
}

.galeria__visor {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.galeria__flecha {
  display: none;
}

@media (min-width: 768px) {
  .galeria__flecha {
    display: inline-flex;
  }
}

.galeria__tira {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-block: 0.25rem 0.75rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.galeria__tira[hidden] {
  display: none;
}

.galeria__tira::-webkit-scrollbar {
  display: none;
}

.galeria__item {
  flex: 0 0 auto;
  display: block;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  scroll-snap-align: start;
}

.galeria__item:focus-visible .galeria__foto {
  outline: 3px solid var(--rosa);
  outline-offset: 2px;
}

.galeria__foto {
  display: block;
  width: clamp(110px, 30vw, 168px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background-color: var(--lila-claro);
  border: var(--borde-grosor) solid var(--azul);
  box-shadow: 4px 4px 0 var(--azul);
}

/* Miniaturas más grandes solo en el desktop grande que ya tiene la
   ventanita a 1100px (ver más abajo): menos fotos a la vez, pero se
   ve cada una mejor. En mobile y hasta 1199px queda el tamaño de
   siempre (clamp de arriba). 260px + el gap de 0.75rem del contenedor
   está elegido a propósito para que, con el ancho fijo que tiene acá
   .galeria__visor, sobre siempre un pedazo de la próxima foto
   asomando en el borde derecho (avisa que hay más para el costado). */
@media (min-width: 1200px) {
  .galeria__foto {
    width: 260px;
  }
}

/* Video del canal — facade: se ve la miniatura con un play pixelado
   encima, y el iframe de YouTube recién se crea al clickear, para no
   sumar sus scripts en cada visita a la página. */

.galeria__video {
  margin-top: 2rem;
}

.video-facade {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--azul);
  border: var(--borde-grosor) solid var(--azul);
  box-shadow: var(--sombra-dura);
}

/* En mobile ocupa todo el ancho de la ventanita (tal cual estaba).
   Desde desktop se achica y centra, para que no se sienta tan
   pesado ocupando toda la ventanita ensanchada. */
@media (min-width: 768px) {
  .video-facade {
    max-width: 700px;
    margin-inline: auto;
  }
}

.video-facade__miniatura {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-facade__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(3.25rem, 9vw, 4.75rem);
  height: clamp(3.25rem, 9vw, 4.75rem);
  padding: 0;
  background-color: var(--amarillo);
  border: var(--borde-grosor) solid var(--azul);
  box-shadow: var(--sombra-dura);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.video-facade__play:hover,
.video-facade__play:focus-visible {
  transform: translate(-50%, -50%) translate(3px, 3px);
  box-shadow: 3px 3px 0 var(--azul);
}

/* Triángulo de play "pixelado": mismo polígono recortado en escalones
   en vez de un borde diagonal liso. */
.video-facade__play-icono {
  width: 42%;
  height: 48%;
  margin-left: 12%;
  background-color: var(--azul);
  clip-path: polygon(
    0 0, 25% 0, 25% 12.5%, 37.5% 12.5%, 37.5% 25%, 50% 25%,
    50% 37.5%, 62.5% 37.5%, 62.5% 62.5%, 50% 62.5%, 50% 75%,
    37.5% 75%, 37.5% 87.5%, 25% 87.5%, 25% 100%, 0 100%
  );
}

.video-facade__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.galeria__video-texto {
  margin-top: 0.9rem;
  margin-bottom: 0;
}

.galeria__video-texto a {
  color: var(--rosa);
  font-weight: bold;
}

/* ==========================================================================
   Qué incluye — grilla de bloques chicos, cada uno como una ventanita
   propia (borde grueso, sombra dura) con su lista de ítems.
   ========================================================================== */

.incluye__grid {
  display: grid;
  grid-template-columns: 1fr;
  /* Cada bloque conserva su alto natural en vez de estirarse para
     igualar al de al lado (comportamiento por defecto de grid). Se
     centra (no "start") para que el bloque mas bajo de una fila
     quede centrado respecto del mas alto en vez de pegado arriba.
     En mobile (1 sola columna) no cambia nada visualmente; es lo que
     permite que "Alojamiento" quede compacto y no se lea como
     grilla pareja desde el breakpoint de abajo. */
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.incluye__boton-wrap {
  text-align: center;
}

@media (min-width: 560px) {
  .incluye__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Desde 1200px (donde la ventanita ya mide 1100px y hay lugar de
   sobra) la grilla pasa a un mosaico tipo "bento": 5 columnas
   iguales, y cada bloque ocupa tantas como items tiene su lista
   (4+1+2+3 = 5+5, dos filas de 5). El ancho queda proporcional al
   contenido — Vuelos, el más largo, el más ancho; Alojamiento, el
   más corto, el más angosto — y junto con el align-items:center de
   arriba, el conjunto se lee como ventanitas de distinto tamaño
   dispersas en el escritorio en vez de una grilla uniforme. */
@media (min-width: 1200px) {
  .incluye__grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .incluye__bloque:nth-child(1) {
    grid-column: span 3;
  }

  .incluye__bloque:nth-child(2) {
    grid-column: span 2;
  }

  .incluye__bloque:nth-child(3) {
    grid-column: span 3;
  }

  .incluye__bloque:nth-child(4) {
    grid-column: span 2;
  }
}

.incluye__bloque {
  background-color: var(--fondo);
  border: var(--borde-grosor) solid var(--azul);
  box-shadow: 4px 4px 0 var(--azul);
  padding: 1em 1.1em;
}

.incluye__titulo {
  font-family: var(--fuente-pixel);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1rem;
  color: var(--lila);
  margin: 0 0 0.7em;
}

/* Los títulos de los bloques van en diagonal: 1 y 4 lila, 2 y 3 rosa
   (no es un simple alternado par/impar). Se fijan los cuatro casos
   explícitos porque si no, cuando "Qué incluye" cae en una sección
   par del sitio, la regla que alterna los títulos de sección (más
   específica que el color base de .incluye__titulo) le gana y pinta
   los cuatro de rosa. */
.incluye__bloque:nth-child(1) .incluye__titulo,
.incluye__bloque:nth-child(4) .incluye__titulo {
  color: var(--lila);
}

.incluye__bloque:nth-child(2) .incluye__titulo,
.incluye__bloque:nth-child(3) .incluye__titulo {
  color: var(--rosa);
}

.incluye__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.incluye__item {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  font-size: 0.95rem;
}

.incluye__item + .incluye__item {
  margin-top: 0.6em;
}

/* Tilde pixelada dibujada a puro box-shadow: cada sombra es un
   "pixel" de 2px sobre una grilla de 8x8, sin curvas ni diagonales.
   El box-shadow copia el tamaño del propio elemento, así que si
   .incluye__check midiera 16x14px (el tamaño del dibujo completo)
   cada "pixel" se agrandaría a 16x14px también y el ícono se
   desbordaba. Por eso el dibujo va en ::before, chiquito (2px) como
   corresponde a cada pixel; .incluye__check queda invisible pero
   mide 16x14px (el tamaño real del dibujo) solo para reservar ese
   lugar en el layout del flex, que es lo que separa el tick del
   texto y arma la sangría francesa en las líneas que envuelven. */
.incluye__check {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 14px;
  margin-top: 0.3em;
}

.incluye__check::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  box-shadow:
    14px 0px  0 var(--lila),
    12px 2px  0 var(--lila), 14px 2px  0 var(--lila),
    10px 4px  0 var(--lila), 12px 4px  0 var(--lila),
     8px 6px  0 var(--lila), 10px 6px  0 var(--lila),
     0px 8px  0 var(--lila),  6px 8px  0 var(--lila), 8px 8px 0 var(--lila),
     0px 10px 0 var(--lila),  2px 10px 0 var(--lila), 4px 10px 0 var(--lila), 6px 10px 0 var(--lila),
     2px 12px 0 var(--lila),  4px 12px 0 var(--lila);
}

/* ==========================================================================
   Testimonios — carrusel de tarjetas, todas con el mismo estilo
   (antes había 4 variantes distintas de prueba; se descartaron 3 y
   se quedó la que ganó: tarjeta con fondo claro, borde y sombra dura
   simples, texto alineado a la izquierda). Mismo patrón que la
   galería: una tira con scroll horizontal + flechas a los costados,
   .testimonios__flecha reusa .boton-icono tal cual. A diferencia de
   la galería, acá las flechas no se ocultan por breakpoint
   (.galeria__flecha es display:none hasta 768px porque en mobile se
   arrastra con el dedo) — acá 1 por fila en mobile ya implica
   overflow con más de un testimonio, así que hacen falta ahí también.
   Se muestran u ocultan solo con el atributo hidden, decidido por JS
   según si la tira realmente desborda (tira.scrollWidth >
   tira.clientWidth) — con 10 testimonios hay overflow en cualquier
   ancho, pero la lógica es genérica: si algún día quedan 3 o menos
   (los que entran justos en una fila de desktop) las flechas se
   ocultarían solas ahí. Se recalcula en resize. Ver el <script> de
   testimonios en el HTML. [hidden] necesita su propia regla porque
   .boton-icono ya define su propio display (mismo motivo que
   .galeria__tira[hidden] más abajo: una regla de autor con display
   distinto le gana al display:none del user-agent para [hidden] si
   no se es explícito). El scroll nativo (overflow-x:auto +
   -webkit-overflow-scrolling:touch) ya permite deslizar con el dedo
   en mobile sin JS adicional, igual que en la galería.

   Todas las tarjetas quedan a la misma altura sin JS ni grid: como
   .testimonios__tira es un único flex row (nunca hace salto de
   línea, solo desborda) con align-items:stretch por default, CADA
   .testimonio ya se estira a la altura de la más alta de TODA la
   tira — no hace falta recalcular "por página visible de 3" porque
   en un carrusel continuo esa agrupación ni existe (qué 3 se ven
   juntas cambia con cada scroll). Dentro de esa altura pareja, cada
   tarjeta es a su vez un flex column con gap chico entre cita y
   firma, y .testimonio__autor lleva margin-top:auto para quedar
   pegada abajo del todo — en la tarjeta más alta (la que define la
   altura de todas) el margin auto no suma nada extra (ya no sobra
   espacio) y el gap se ve normal; en las más cortas, el margin auto
   consume el espacio de sobra y empuja el nombre hasta el borde
   inferior. */

.testimonios__visor {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.testimonios__flecha[hidden] {
  display: none;
}

.testimonios__tira {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.testimonios__tira::-webkit-scrollbar {
  display: none;
}

.testimonio {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background-color: var(--fondo);
  border: var(--borde-grosor) solid var(--azul);
  box-shadow: var(--sombra-dura);
  padding: 1.25rem 1.5rem;
  text-align: left;
}

@media (min-width: 768px) {
  /* 3 por fila: el ancho de cada una descuenta los 2 gaps de 1rem
     que quedan entre las 3 (no el gap contra las flechas, ese ya lo
     absorbe .testimonios__visor por fuera de la tira). */
  .testimonio {
    flex-basis: calc((100% - 2rem) / 3);
  }
}

.testimonio__frase {
  margin: 0;
  color: var(--azul);
  font-size: 0.95rem;
  line-height: 1.5;
}

.testimonio__autor {
  display: block;
  font-size: 0.8rem;
  color: var(--azul);
  opacity: 0.6;
  margin-top: auto;
}

/* ==========================================================================
   FAQ — acordeón con <details> nativo, funciona sin JS. La animación de
   apertura es CSS puro: grid-template-rows de 0fr a 1fr en un wrapper,
   pisando el display:none que el navegador le pone por defecto al
   contenido de un <details> cerrado (una regla de autor como esta
   siempre gana por sobre la hoja de estilos del user-agent).
   ========================================================================== */

.faq__item {
  background-color: var(--fondo);
  border: var(--borde-grosor) solid var(--azul);
  box-shadow: var(--sombra-dura);
  margin-bottom: 1rem;
}

.faq__item:last-of-type {
  margin-bottom: 0;
}

.faq__pregunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9em 1em;
  cursor: pointer;
  list-style: none;
  font-family: var(--fuente-pixel);
  font-weight: bold;
  font-size: 1rem;
  color: var(--azul);
}

.faq__pregunta::-webkit-details-marker {
  display: none;
}

.faq__pregunta-texto {
  flex: 1 1 auto;
}

/* Indicador +/− pixelado: dos barras solidas; la vertical rota 90° al
   abrir y queda superpuesta a la horizontal, formando el "−". */
.faq__indicador {
  position: relative;
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  background-color: var(--amarillo);
  border: var(--borde-grosor) solid var(--azul);
  box-shadow: 3px 3px 0 var(--azul);
}

.faq__indicador::before,
.faq__indicador::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--azul);
  transition: transform 0.25s ease;
}

.faq__indicador::before {
  width: 55%;
  height: 3px;
  transform: translate(-50%, -50%);
}

.faq__indicador::after {
  width: 3px;
  height: 55%;
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq__item[open] .faq__indicador::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq__respuesta-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.faq__item[open] > .faq__respuesta-wrap {
  grid-template-rows: 1fr;
}

.faq__respuesta-inner {
  overflow: hidden;
}

.faq__respuesta {
  margin: 0;
  padding: 0 1em 1em;
}

@media (prefers-reduced-motion: reduce) {
  .faq__respuesta-wrap,
  .faq__indicador::after {
    transition: none;
  }
}

/* ==========================================================================
   Contacto — tres tarjetas de WhatsApp (persona + rol) y, debajo, los
   links a redes.
   ========================================================================== */

.contacto__personas {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

@media (min-width: 768px) {
  .contacto__personas {
    flex-direction: row;
  }
}

.contacto__persona {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.4rem;
  flex: 1 1 0;
  padding: 1.5rem 1rem;
  background-color: var(--fondo);
  border: var(--borde-grosor) solid var(--azul);
  box-shadow: var(--sombra-dura);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.contacto__persona:hover,
.contacto__persona:focus-visible {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 var(--azul);
}

.contacto__nombre {
  font-family: var(--fuente-pixel);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.2rem;
  color: var(--azul);
}

/* Más chica y en un tono más suave que el nombre: se lee como
   aclaración ("quién es esta persona"), no como algo que compite. */
.contacto__etiqueta {
  font-size: 0.8rem;
  color: var(--azul);
  opacity: 0.6;
}

/* Ícono de WhatsApp: insignia verde (el verde de marca de WhatsApp,
   la única vez que se usa fuera de la paleta del sitio — es lo que lo
   hace reconocible) con el logo real en SVG adentro (globo de chat +
   tubo de teléfono). En pixel art a este tamaño no se leía, así que
   se usa el ícono oficial simplificado en vez de pixelarlo. */
.whatsapp-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: #25d366;
  border: 2px solid var(--azul);
  clip-path: polygon(
    30% 0%, 70% 0%, 100% 30%, 100% 70%,
    70% 100%, 30% 100%, 0% 70%, 0% 30%
  );
}

.whatsapp-icono svg {
  width: 18px;
  height: 18px;
  fill: var(--fondo);
}

/* Redes: dos grupos separados (Bon VoyArmy / Tendencias Viajes), cada
   uno con su etiqueta chica arriba. Apilados en mobile con una línea
   arriba del segundo grupo; uno al lado del otro en desktop, ahí la
   línea pasa a estar a la izquierda del segundo grupo en vez de
   arriba. */
.contacto__redes-grupos {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin-top: 3.5rem;
}

.contacto__redes-grupo + .contacto__redes-grupo {
  border-top: 2px solid var(--azul);
  padding-top: 1.75rem;
}

/* Desde 768px, los dos grupos pasan a ocupar cada uno la mitad real
   del ancho (flex:1 1 0 ignora el ancho de su contenido, que es
   distinto: Bon VoyArmy tiene 3 redes, Tendencias Viajes 1 sola) en
   vez de encogerse a su contenido — así cada grupo queda centrado
   (align-items:center, ver mas abajo) dentro de su propia mitad y no
   solo dentro de un bloque conjunto mas angosto que el contenedor.
   La linea separadora se dibuja aparte, como ::before centrado al
   50% del contenedor con transform:translateX(-50%): si en cambio
   fuera un border-left sobre el segundo grupo (como se probo
   primero), quedaba pegada al borde de ese grupo, es decir corrida
   del centro real por la mitad del gap — con el ::before separado
   queda exactamente en el medio sin importar el gap ni el ancho del
   contenido de cada grupo. */
@media (min-width: 768px) {
  .contacto__redes-grupos {
    flex-direction: row;
    gap: 3rem;
    position: relative;
  }

  .contacto__redes-grupo {
    flex: 1 1 0;
  }

  .contacto__redes-grupos::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background-color: var(--azul);
    transform: translateX(-50%);
  }

  .contacto__redes-grupo + .contacto__redes-grupo {
    border-top: none;
    padding-top: 0;
  }
}

.contacto__redes-grupo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.contacto__redes-etiqueta {
  font-family: var(--fuente-pixel);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1rem;
  color: var(--azul);
  margin: 0 0 0.5rem;
}

.contacto__red {
  display: flex;
  align-items: center;
  gap: 0.5em;
  color: var(--rosa);
  font-weight: bold;
  text-decoration: underline;
}

.contacto__red-icono {
  flex: 0 0 auto;
  width: 1.15em;
  height: 1.15em;
}

/* ==========================================================================
   Lightbox — visor de foto a pantalla completa
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(22, 50, 79, 0.92);
  padding: 4.5rem 1rem 1rem;
}

.lightbox[hidden] {
  display: none;
}

body.lightbox-abierto {
  overflow: hidden;
}

.lightbox__marco {
  position: relative;
  max-width: min(94vw, 900px);
  max-height: 100%;
  background-color: var(--azul);
  border: var(--borde-grosor) solid var(--fondo);
  box-shadow: var(--sombra-dura);
  padding: 0.5rem;
  display: flex;
}

.lightbox__foto {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 8rem);
  object-fit: contain;
}

.lightbox__cerrar {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 101;
}

.lightbox__flecha {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 101;
  display: inline-flex;
}

.lightbox__flecha--izq {
  left: 0.75rem;
}

.lightbox__flecha--der {
  right: 0.75rem;
}

@media (min-width: 768px) {
  .lightbox__flecha--izq {
    left: 1.5rem;
  }

  .lightbox__flecha--der {
    right: 1.5rem;
  }
}

/* ==========================================================================
   Footer — pie de página discreto: no es una ventanita mas (sin
   borde grueso completo ni sombra dura), solo un borde superior que
   lo separa del contenido de arriba y texto chico en tono suave.
   ========================================================================== */

.footer {
  align-self: stretch;
  border-top: var(--borde-grosor) solid var(--azul);
  padding: 1.5rem 1.25rem;
  text-align: center;
}

.footer p {
  font-size: 0.8rem;
  color: var(--azul);
  opacity: 0.6;
  margin: 0;
}

.footer p + p {
  margin-top: 0.35rem;
}

/* ==========================================================================
   Aparición al scrollear
   ========================================================================== */

.js .ventana {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .ventana.visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .ventana {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero__voya--top,
  .hero__voya--esquina {
    animation: none;
  }

  .hero__titulo-linea::before,
  .hero__titulo-linea::after {
    animation: none;
  }

  .boton--glitch::before,
  .boton--glitch::after {
    animation: none;
  }
}