/* ==========================================================================
   VEGAS DEL VERDE — sections/ecoposada.css
   Bloque #ecoposada (cabaña para 8) + bloque #colegios (grupos educativos).
   Depende de tokens.css y base.css. No declara ningún valor literal.
   ========================================================================== */

/* ==========================================================================
   1. ECOPOSADA
   ========================================================================== */
.ecoposada__cuerpo {
  display: grid;
  gap: var(--gap-lg);
  align-items: center;
}

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

/* ---- Mosaico de fotografías --------------------------------------------- */
.ecoposada__mosaico {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-sm);
  min-width: 0;
}

.ecoposada__foto {
  min-width: 0;
}

.ecoposada__foto--principal {
  grid-column: 1 / -1;
}

.ecoposada__foto .marco {
  box-shadow: var(--sombra-md);
}

/* A partir de escritorio la foto principal ocupa la columna alta y las dos
   secundarias se apilan a su derecha, igualando la altura total. */
@media (min-width: 46em) {
  .ecoposada__mosaico {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }

  .ecoposada__foto--principal {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .ecoposada__foto--principal .marco {
    aspect-ratio: auto;
    height: 100%;
  }
}

/* ---- Panel de contenido -------------------------------------------------- */
.ecoposada__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-md);
  min-width: 0;
}

.ecoposada__cifras {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-sm);
  width: 100%;
  margin: 0;
  padding-bottom: var(--esp-sm);
  border-bottom: 1px solid var(--color-borde-suave);
}

.ecoposada__cifras .cifra {
  font-size: var(--paso-3);
}

.ecoposada__cifras .cifra-etiqueta {
  line-height: var(--alto-linea-titulo);
}

.ecoposada__incluye {
  width: 100%;
}

.ecoposada__incluye .titulo-seccion {
  margin-bottom: var(--esp-sm);
  color: var(--color-texto-suave);
}

.ecoposada__servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: var(--gap-sm);
  margin: 0;
}

.ecoposada__servicio {
  display: flex;
  align-items: center;
  gap: var(--esp-xs);
  padding: var(--esp-xs) var(--esp-sm);
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-md);
  font-family: var(--fuente-titulo);
  font-size: var(--fs-pequeno);
  letter-spacing: var(--track-titulo);
  line-height: var(--alto-linea-titulo);
}

.ecoposada__servicio svg {
  width: var(--esp-md);
  height: var(--esp-md);
  flex: none;
  color: var(--color-acento-texto);
}

.ecoposada__panel .nota {
  max-width: var(--medida);
}

/* ==========================================================================
   2. COLEGIOS Y GRUPOS EDUCATIVOS
   ========================================================================== */

/* ---- Tira de fotografías ------------------------------------------------- */
.colegios__galeria {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-sm);
  margin-bottom: var(--gap-lg);
}

@media (min-width: 62em) {
  .colegios__galeria {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap);
  }
}

.colegios__foto {
  min-width: 0;
}

.colegios__foto .marco {
  box-shadow: var(--sombra-sm);
}

.colegios__foto figcaption {
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
}

/* ---- Rejilla de la oferta ------------------------------------------------ */
.colegios__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15.5rem, 100%), 1fr));
  gap: var(--gap);
  margin: 0;
}

.colegios__tarjeta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-2xs);
  padding: var(--esp-md);
  background-color: var(--color-superficie-solida);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-lg);
  transition:
    transform var(--transicion),
    box-shadow var(--transicion),
    border-color var(--transicion);
}

.colegios__tarjeta:hover,
.colegios__tarjeta:focus-within {
  transform: translateY(calc(var(--esp-3xs) * -1));
  box-shadow: var(--sombra-md);
  border-color: rgb(var(--verde-oliva-rgb) / 0.3);
}

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

.colegios__tarjeta .enlace-flecha {
  margin-top: auto;
  padding-top: var(--esp-2xs);
}

.colegios__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--esp-xl);
  height: var(--esp-xl);
  margin-bottom: var(--esp-2xs);
  border-radius: var(--radio-full);
  background-color: rgb(var(--verde-menta-rgb) / 0.2);
  color: var(--color-acento-texto);
  flex: none;
}

.colegios__icono svg {
  width: var(--esp-md);
  height: var(--esp-md);
}

/* ---- Cierre con CTA ------------------------------------------------------ */
.colegios__cierre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  margin-top: var(--gap-lg);
  padding: var(--esp-lg);
  border-radius: var(--radio-xl);
  background-color: var(--color-fondo-oscuro);
  color: var(--color-texto-inverso);
  box-shadow: var(--sombra-lg);
}

.colegios__cierre-texto {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2xs);
  min-width: 0;
  flex: 1 1 var(--ancho-xs);
}

.colegios__cierre-texto .titulo-seccion {
  color: var(--color-texto-inverso);
}

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

@media (min-width: 62em) {
  .colegios__cierre {
    padding: var(--esp-xl);
    flex-wrap: nowrap;
  }
}