/* ==========================================================================
   VEGAS DEL VERDE — sections/experiencias.css  ·  v2 «Vende la escapada»
   Cubre cuatro bloques hermanos:
     #experiencias  celebraciones y eventos (mosaicos + lightbox)
     #bienestar     bienestar físico y emocional
     #cultura       actividades sociales y culturales, sobre collage de aves
     #colegios      colegios y grupos educativos (venía de ecoposada.html)

   Prefijo propio: .exp-*
   Todos los valores salen de tokens.css. No se redefine ninguna utilidad de
   base.css: aquí sólo hay piezas nuevas, y ninguna regla pisa un color suyo.

   QUÉ CAMBIÓ EN v2
   · El pie de foto deja las MAYÚSCULAS: sólo sobreviven en .eyebrow y en las
     micro-etiquetas del sistema (§3 del CONTRATO-V2).
   · .exp-practica__nombre deja de declarar font-family: hereda el cuerpo.
   · Nace .exp-duo — pareja de fotos con proporción propia, para los bloques
     de dos imágenes que el mosaico de filas fijas no sabe cuadrar.
   · Nace el fondo de #cultura: collage de cuatro aves bajo velo de bosque.
   · Nace .exp-oferta — las siete puertas de la oferta escolar. SIN iconos:
     lo que se puede fotografiar va arriba, en fotos reales del predio.
   ========================================================================== */

/* ==========================================================================
   1. BLOQUE POR TIPO DE CELEBRACIÓN
   ========================================================================== */
.exp-tipo + .exp-tipo {
  margin-top: var(--gap-lg);
}

.exp-tipo__encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--esp-sm) var(--gap);
  margin-bottom: var(--esp-md);
  padding-bottom: var(--esp-xs);
  border-bottom: 1px solid var(--color-borde-suave);
}

.exp-tipo__encabezado > div {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3xs);
}

.exp-tipo__linea {
  max-width: var(--medida);
  font-size: var(--fs-pequeno);
  font-weight: var(--peso-ligero);
  color: var(--color-texto-suave);
}

.exp-tipo__encabezado .btn {
  flex: none;
}

.exp-tipo__remate {
  margin-top: var(--esp-md);
}

/* ==========================================================================
   2. MOSAICO DE FOTOS
   Rejilla de altura de fila fija: los recortes conviven sin saltos y el
   mosaico conserva su ritmo aunque las fotos vengan en distintos formatos.

   La altura de fila se mide contra el ANCHO DEL PROPIO MOSAICO (unidades de
   contenedor), no contra el viewport: así una pieza "ancha" mantiene su
   proporción tanto a página completa como dentro de una columna estrecha.
   El respaldo en vw cubre navegadores sin container queries.
   ========================================================================== */
.exp-mosaico {
  --exp-fila: clamp(7rem, 33vw, 15rem); /* respaldo sin container queries */

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: var(--exp-fila);
  grid-auto-flow: dense;
  gap: var(--gap-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 60em) {
  .exp-mosaico {
    --exp-fila: clamp(8rem, 17vw, 14rem);

    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Variante de dos columnas fijas: mosaico dentro de una columna estrecha */
  .exp-mosaico--par {
    --exp-fila: clamp(7rem, 33vw, 15rem);

    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@supports (container-type: inline-size) {
  .exp-tipo,
  .exp-lienzo,
  .exp-colegios .contenedor {
    container-type: inline-size;
  }

  .exp-mosaico,
  .exp-mosaico--par {
    --exp-fila: clamp(7rem, 38cqw, 20rem);
  }

  @media (min-width: 60em) {
    .exp-mosaico {
      --exp-fila: clamp(8rem, 18.5cqw, 15rem);
    }

    .exp-mosaico--par {
      --exp-fila: clamp(7rem, 38cqw, 20rem);
    }
  }
}

.exp-foto {
  position: relative;
  min-width: 0;
}

.exp-foto--ancha {
  grid-column: span 2;
}

.exp-foto--alta {
  grid-row: span 2;
}

.exp-foto--grande {
  grid-column: span 2;
  grid-row: span 2;
}

/* --------------------------------------------------------------------------
   2.1 Pareja de fotos con proporción propia
   Dos imágenes no cuadran en una rejilla de filas fijas sin dejar un hueco.
   Aquí cada una conserva su formato y las dos se centran entre sí: el
   contraste vertical/horizontal es intencionado, no un descuadre.
   -------------------------------------------------------------------------- */
.exp-duo {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--gap-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 44em) {
  .exp-duo {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--gap);
  }
}

.exp-duo .exp-foto--alto .exp-foto__btn {
  aspect-ratio: 3 / 4;
}

.exp-duo .exp-foto--paisaje .exp-foto__btn {
  aspect-ratio: 4 / 3;
}

/* --------------------------------------------------------------------------
   2.2 Disparador del lightbox
   El visor lo escribe el integrador (js/app.js) escuchando [data-lightbox].
   -------------------------------------------------------------------------- */
.exp-foto__btn {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radio-md);
  background-color: rgb(var(--gris-verde-rgb) / 0.3);
  box-shadow: var(--sombra-sm);
  transition:
    box-shadow var(--transicion),
    transform var(--transicion-rapida);
}

.exp-foto__btn > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-lenta) var(--ease-suave);
}

.exp-foto__btn:hover {
  box-shadow: var(--sombra-lg);
}

.exp-foto__btn:hover > img,
.exp-foto__btn:focus-visible > img {
  transform: scale(var(--escala-hover));
}

/* El grupo posa en la mitad inferior del cuadro: subir el recorte le cortaría
   la cabeza a media fila de personas. */
.exp-foto--alta .exp-foto__btn > img[src$="parque-21.jpg"] {
  object-position: center 62%;
}

/* --------------------------------------------------------------------------
   2.3 Pie sobre la foto
   v1 lo ponía en MAYÚSCULAS: fuera de la lista del §3 y, a este cuerpo,
   ilegible. Se queda en caja alta y baja, con el tracking del botón.
   -------------------------------------------------------------------------- */
.exp-foto__pie {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: block;
  padding: var(--esp-xl) var(--esp-xs) var(--esp-2xs);
  font-family: var(--fuente-titulo);
  font-size: var(--fs-micro);
  font-weight: var(--peso-medio);
  line-height: var(--alto-linea-titulo);
  text-align: left;
  letter-spacing: var(--track-boton);
  color: var(--color-texto-inverso);
  background-image: linear-gradient(
    to top,
    rgb(var(--verde-bosque-hondo-rgb) / 0.85),
    rgb(var(--verde-bosque-hondo-rgb) / 0.45) 45%,
    rgb(var(--verde-bosque-hondo-rgb) / 0)
  );
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   2.4 Insignia de ampliar
   -------------------------------------------------------------------------- */
.exp-foto__lupa {
  position: absolute;
  top: var(--esp-2xs);
  right: var(--esp-2xs);
  display: grid;
  place-items: center;
  width: var(--esp-lg);
  height: var(--esp-lg);
  border-radius: var(--radio-full);
  background-color: rgb(var(--crema-rgb) / 0.92);
  color: var(--verde-bosque);
  box-shadow: var(--sombra-sm);
  opacity: 0;
  transform: scale(0.82);
  transition:
    opacity var(--transicion),
    transform var(--transicion);
  pointer-events: none;
}

.exp-foto__lupa > svg {
  width: var(--esp-sm);
  height: var(--esp-sm);
  stroke-linecap: round;
}

.exp-foto__btn:hover .exp-foto__lupa,
.exp-foto__btn:focus-visible .exp-foto__lupa {
  opacity: 1;
  transform: none;
}

/* En pantallas táctiles no hay hover: la insignia se muestra siempre */
@media (hover: none) {
  .exp-foto__lupa {
    opacity: 1;
    transform: none;
  }
}

/* Sin JavaScript el visor no existe: se retira la señal de "ampliable" */
html:not(.js) .exp-foto__lupa {
  display: none;
}

html:not(.js) .exp-foto__btn {
  cursor: default;
}

/* ==========================================================================
   3. BIENESTAR — media + listado de prácticas
   ========================================================================== */
.exp-bienestar {
  display: grid;
  gap: var(--gap-lg);
  align-items: start;
}

@media (min-width: 60em) {
  .exp-bienestar {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--gap-lg);
  }
}

.exp-bienestar__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-md);
}

.exp-bienestar__texto .btn {
  margin-top: var(--esp-2xs);
}

/* ==========================================================================
   4. LISTAS DE PRÁCTICAS Y ACTIVIDADES
   Rejilla tipográfica: índice fino + nombre, separados por filete.
   ========================================================================== */
.exp-practicas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--gap);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 30em) {
  .exp-practicas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.exp-practica {
  display: flex;
  align-items: baseline;
  gap: var(--esp-xs);
  padding-block: var(--esp-xs);
  border-top: 1px solid var(--color-borde-suave);
}

.exp-practica__indice {
  flex: none;
  font-family: var(--fuente-display);
  font-size: var(--fs-pequeno);
  font-variation-settings: var(--ejes-display-sobrio);
  line-height: 1;
  letter-spacing: var(--track-caps);
  color: var(--color-acento-texto);
}

/* Sin font-family: el nombre es texto corriente y hereda el cuerpo (Jost). */
.exp-practica__nombre {
  font-size: var(--fs-cuerpo);
  font-weight: var(--peso-normal);
  line-height: var(--alto-linea-titulo);
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   4.1 Variante sobre fondo oscuro (actividades sociales y culturales)
   -------------------------------------------------------------------------- */
.exp-practicas--cultura {
  margin-top: var(--gap-lg);
}

@media (min-width: 60em) {
  .exp-practicas--cultura {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.exp-practicas--cultura .exp-practica {
  border-top-color: var(--color-borde-inverso);
}

.exp-practicas--cultura .exp-practica__indice {
  color: var(--color-acento);
}

/* ==========================================================================
   5. #CULTURA — COLLAGE DE AVES AL FONDO
   Las 57 fotos del concurso dejan de vivir sólo en su galería. Aquí cuatro
   de ellas son el fondo de la sección.

   EL VELO ES ESTRUCTURAL, NO DECORACIÓN: el collage sube la luminancia del
   fondo y, sin él, el coral claro del .eyebrow y el menta de los índices
   caerían por debajo de 4.5:1. Con la foto al 34 % y el velo al 88–94 %, la
   luz que atraviesa es del 4 %: en el peor caso imaginable (una foto blanca)
   el eyebrow mide 5.0:1 y el texto de crema, 8.9:1. No aclares ninguno de
   los dos números.
   ========================================================================== */
.exp-cultura {
  position: relative;
  overflow: hidden;
}

.exp-cultura__fondo {
  position: absolute;
  inset: 0;
  z-index: var(--z-fondo);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

@media (min-width: 60em) {
  .exp-cultura__fondo {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
  }
}

.exp-cultura__fondo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.34;
  /* sin el relleno de reserva de base.css: aquí clarearía la sección
     mientras las fotos cargan */
  background-color: transparent;
}

.exp-cultura__fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to bottom,
    rgb(var(--verde-bosque-rgb) / 0.88),
    rgb(var(--verde-bosque-hondo-rgb) / 0.94)
  );
}

.exp-cultura__contenido {
  position: relative;
  z-index: var(--z-base);
}

/* Crédito de las cuatro fotos del fondo. No usa .credito porque ese token de
   color está pensado para fondo claro: aquí iría a 2:1. */
.exp-cultura__credito {
  max-width: var(--medida);
  margin-top: var(--esp-md);
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  color: var(--color-texto-inverso-suave);
}

.exp-cultura__credito > a {
  margin-inline-start: 0.35em;
}

/* ==========================================================================
   6. #COLEGIOS — LAS SIETE PUERTAS DE LA OFERTA ESCOLAR
   Sin iconos: lo que existe y se puede fotografiar ya está arriba, en fotos
   reales del predio. Aquí sólo hay tipografía.
   ========================================================================== */
.exp-colegios .exp-mosaico {
  margin-bottom: var(--gap-lg);
}

.exp-oferta {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 44em) {
  .exp-oferta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 68em) {
  .exp-oferta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.exp-oferta__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-2xs);
  padding: var(--esp-lg) var(--esp-md) var(--esp-md);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-lg);
  background-color: var(--color-superficie);
}

.exp-oferta__indice {
  position: absolute;
  top: var(--esp-xs);
  right: var(--esp-md);
  font-family: var(--fuente-display);
  font-size: var(--fs-pequeno);
  font-variation-settings: var(--ejes-display-sobrio);
  line-height: 1;
  letter-spacing: var(--track-caps);
  color: var(--color-acento-texto);
}

.exp-oferta__item p {
  font-size: var(--fs-pequeno);
  color: var(--color-texto-suave);
}

.exp-oferta__item .enlace-flecha {
  margin-top: var(--esp-2xs);
}

/* ==========================================================================
   7. CIERRE CON LLAMADA A LA ACCIÓN
   ========================================================================== */
.exp-cierre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-md) var(--gap);
  margin-top: var(--gap-lg);
  padding: var(--esp-lg);
  border: 1px solid var(--color-borde-inverso);
  border-radius: var(--radio-lg);
  background-color: var(--color-superficie-oscura);
}

.exp-cierre__bloque {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2xs);
  max-width: var(--medida);
}

.exp-cierre__texto {
  max-width: var(--medida-corta);
  margin: 0;
  font-size: var(--fs-grande);
  font-weight: var(--peso-ligero);
  line-height: var(--alto-linea-suelto);
  color: var(--color-texto-inverso-suave);
}

.exp-cierre .btn {
  flex: none;
}

/* Variante sobre fondo claro (#colegios) */
.exp-cierre--claro {
  border-color: var(--color-borde-suave);
  background-color: var(--color-superficie);
}

.exp-cierre--claro .exp-cierre__texto {
  max-width: var(--medida);
  font-size: var(--fs-cuerpo);
  color: var(--color-texto-suave);
}