/* ==========================================================================
   Secciones — los bloques grandes de cada página.
   ========================================================================== */

/* ==========================================================================
   Hero de la home

   Sin fotografía: un titular enorme centrado sobre piedra oscura, al estilo de
   los carteles de una sola palabra. La foto salió por petición del cliente; el
   color de la página lo ponen las puertas que vienen debajo.
   ========================================================================== */

.hero {
  container-type: inline-size;   /* --fs-word mide contra ESTA caja, no la pantalla */
  /* Piedra de noche: el centro apenas un punto más claro que los bordes, para
     que se lea como un foco sobre el titular y no como un panel plano. */
  background: radial-gradient(115% 90% at 50% 42%, #2B2B28 0%, #161615 78%);
  color: var(--on-dark);
  padding-top: clamp(var(--s8), 9vw, var(--s11));
  padding-bottom: clamp(var(--s8), 10vw, var(--s11));
  text-align: center;
}

.hero__reja {
  display: grid;
  justify-items: center;
  gap: var(--s6);
}

.hero__titulo {
  font-size: var(--fs-word);
  font-weight: 400;   /* Instrument Serif solo tiene este peso; ver base.css */
  line-height: 0.98;
  letter-spacing: -0.018em;
  text-wrap: balance;
  /* EN «em» Y NO EN PÍXELES, y esto es el fondo del asunto: con line-height
     menor que 1 la caja de línea es MÁS BAJA que las letras, así que el
     descendente de la «q» de «quedarse» se sale por abajo. El margen del
     párrafo siguiente se mide desde la caja, no desde el trazo, y por eso el
     texto se le montaba encima.
     Un hueco fijo en píxeles no sirve: el titular va con clamp() y crece con
     la pantalla, así que el desbordamiento crece con él y solo se arreglaría
     en el ancho donde se midió. En em, el hueco crece a la vez que la letra. */
  margin-bottom: 0.14em;
}

/* El segundo verso en cursiva y en un verde claro: es lo único que rompe el
   crema del titular, y por eso no hace falta nada más para dirigir la mirada.
   #A9BCA4 da 9,5:1 sobre el fondo oscuro: sobra para texto grande. */
.hero__giro {
  display: block;
  font-style: italic;
  color: #A9BCA4;
}

/* La entradilla va centrada y apagada: sobre el oscuro, el gris de texto
   normal del sitio no llegaría ni a adorno. */
.hero .lead {
  margin-inline: auto;
  color: var(--on-dark-muted);
}

/* El pie del hero es la versalita ancha del rótulo pequeño: las dos ciudades
   como el «BY BAKER» de un cartel. */
.hero__pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s4);
  font-size: var(--fs-etiqueta);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}

/* En pantalla ancha, la misma pareja se pone en columnas: ahí el cuadro es
   apaisado y en filas quedarían dos franjas demasiado bajas. */
/* Mismo minmax(0, …) que arriba, aquí por el ANCHO intrínseco: sin el 0, cada
   columna exige los 1536 px de la foto original y la pareja revienta la fila. */
.duo-foto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  background: var(--line-fuerte);
  aspect-ratio: 21 / 9;
  overflow: hidden;
}

.duo-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mismo criterio de encuadre de siempre: en la calle interesa la figura,
   que va alta; en el monte, la persona y el perro, que van bajos. */
.duo-foto img:first-child { object-position: 50% 38%; }
.duo-foto img:last-child { object-position: 50% 62%; }

@media (max-width: 640px) {
  .duo-foto {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: minmax(0, 1fr);
    aspect-ratio: 4 / 5;
  }
}

/* ==========================================================================
   Las dos puertas

   El cruce de caminos de la home: habitaciones o casa rural. Es la decisión
   más importante de todo el sitio, así que ocupa media pantalla y no es una
   tarjeta más de una fila de tres.
   ========================================================================== */

.puertas {
  display: grid;
  /* min(100%, 320px): mismo criterio que en .fichas y .duo — en pantallas de
     menos de ~360 px el mínimo fijo desbordaba la rejilla. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 1px;                       /* el filete que las separa es el hueco */
  background: var(--line);        /* …y se ve porque el fondo asoma */
  border-block: 1px solid var(--line);
}

.puerta {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(360px, 46vw, 560px);
  padding: clamp(var(--s6), 4vw, var(--s8));
  background: var(--page);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: background-color var(--t-base) var(--entra);
}

/* Cada puerta trae su propio ambiente puesto en el marcado, así que ya toma
   sus colores de [data-ambiente] sin ninguna regla específica aquí. */
.puerta:hover,
.puerta:focus-visible { background: var(--acento-suave); }

/* ----------------------------------------------------------------------
   Variante con fotografía: la puerta ES la foto de la casa, no una tarjeta
   con un icono delante. El texto pasa a leerse en claro sobre un velo
   oscuro — no una sombra de caja, un degradado real hacia el pie, que es
   donde vive el titular. */
.puerta--foto { background: var(--dark); }

/**
 * -2, NO -1, y esto es lo único que hace que el velo de abajo sirva de algo.
 *
 * El velo es un ::before y la foto es un <img>. Si los dos van a z-index: -1
 * quedan empatados, y a igualdad de z-index manda el orden de pintado: el
 * pseudoelemento se genera como PRIMER hijo, así que se pinta antes y la foto
 * le cae encima. Resultado: un degradado perfectamente escrito que no oscurece
 * nada, y un titular blanco sobre un cielo azul.
 *
 * Costó verlo porque la tarjeta de A Fonsagrada parecía correcta: su foto es
 * oscura de por sí y el texto se leía igual. Solo fallaba a la vista en la de
 * A Coruña, que es un edificio blanco a pleno sol.
 */
.puerta__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-largo) var(--entra);
}

/**
 * El velo tiene que aguantar TEXTO BLANCO, no solo «oscurecer un poco».
 *
 * La primera versión se quedaba en 0.32 a media altura y funcionaba con la
 * foto de A Fonsagrada —que es oscura de por sí— y fallaba estrepitosamente
 * con la de A Coruña, que es un edificio blanco contra un cielo blanco: ahí el
 * titular en claro se quedaba en 2:1 largos y no se leía.
 *
 * Los porcentajes están puestos midiendo DÓNDE cae el texto, que en esta
 * tarjeta ocupa del 12% al 62% contando desde abajo (rótulo, titular, párrafo
 * y enlace). Por eso el velo se mantiene fuerte hasta el 60% y solo se abre
 * por arriba, que es donde no hay nada escrito y la foto puede respirar.
 */
.puerta--foto::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    0deg,
    rgba(16, 18, 16, 0.92) 0%,
    rgba(16, 18, 16, 0.80) 50%,
    rgba(16, 18, 16, 0.34) 78%,
    rgba(16, 18, 16, 0.30) 100%
  );
}

.puerta--foto:hover .puerta__foto,
.puerta--foto:focus-visible .puerta__foto { transform: scale(1.045); }

.puerta--foto:hover,
.puerta--foto:focus-visible { background: var(--dark); }

/**
 * En la versión con foto, el rótulo BAJA a juntarse con el titular en vez de
 * quedarse clavado arriba. No es capricho de composición: arriba el velo es
 * el más flojo a propósito —si no, taparía la foto entera— y sobre un cielo
 * blanco como el del edificio, un rótulo claro ahí se queda muy por debajo de
 * 4,5:1. Por mucho gradiente que se le eche, oscurecer el cielo lo suficiente
 * para sostener texto blanco es oscurecer la foto hasta estropearla.
 *
 * Abajo, donde el velo llega al 86%, el contraste sale solo. Y de paso el
 * rótulo y el titular se leen como lo que son: un antetítulo y su título.
 */
.puerta--foto .puerta__numero {
  margin-top: auto;
  color: var(--on-dark);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.puerta--foto .puerta__titulo { margin-top: var(--s3); }
.puerta--foto .puerta__titulo,
.puerta--foto .puerta__sitio { color: var(--on-dark); }
.puerta--foto .puerta__texto { color: var(--on-dark-muted); }
.puerta--foto .puerta__ir { color: var(--on-dark); }

/* Este rótulo va en la de TEXTO y no en la display, al contrario que antes: a
   cuerpo de 0.78rem y con 0.14em de tracking, los trazos finos de una serif de
   contraste alto se quedan en nada —sobre todo encima de una foto—. La misma
   razón por la que .etiqueta usa la de texto. */
.puerta__numero {
  font-size: var(--fs-etiqueta);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--acento-texto);
}

.puerta__titulo {
  margin-top: auto;               /* empuja el título al pie de la caja */
  font-family: var(--display);
  font-size: clamp(2.05rem, 1.2rem + 2.6vw, 3.3rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.014em;
  /* Mismo motivo que en .hero__titulo: la cursiva de «en la montaña» baja por
     debajo de su caja de línea. En em para que aguante en todos los anchos. */
  padding-bottom: 0.06em;
}

.puerta__sitio {
  display: block;
  font-style: italic;
  color: var(--acento-texto);
}

.puerta__texto {
  margin-top: var(--s4);
  max-width: 34ch;
  color: var(--muted);
  font-size: var(--fs-pequeno);
}

.puerta__ir {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s5);
  font-weight: 600;
  font-size: var(--fs-pequeno);
  color: var(--acento-texto);
}

.puerta:hover .puerta__ir svg,
.puerta:focus-visible .puerta__ir svg { transform: translateX(5px); }

.puerta__ir svg { transition: transform var(--t-micro) var(--entra); }

/* ==========================================================================
   Cabecera de página interior
   ========================================================================== */

.cabecera {
  padding-block: clamp(var(--s7), 6vw, var(--s9)) clamp(var(--s6), 4vw, var(--s8));
}

.cabecera__titulo { margin-top: var(--s4); }

.cabecera__entrada {
  margin-top: var(--s5);
  max-width: 52ch;
  font-size: var(--fs-lead);
  color: var(--muted);
}

/* ==========================================================================
   Prosa — las secciones de texto con título a un lado
   ========================================================================== */

.prosa { padding-block: clamp(var(--s7), 6vw, var(--s9)); }

.prosa__division {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(var(--s5), 4vw, var(--s8));
  padding-top: var(--s6);
  border-top: 1px solid var(--line);
}

.prosa__division + .prosa__division { margin-top: var(--s8); }

.prosa__cuerpo > * + * { margin-top: var(--s4); }

@media (max-width: 760px) {
  .prosa__division { grid-template-columns: 1fr; gap: var(--s4); }
}

/* ==========================================================================
   Fichas — una habitación, un espacio de la casa
   ========================================================================== */

.fichas {
  display: grid;
  /* min(100%, 290px): sin el min(), en un móvil de 320 px la ficha exige 290
     de mínimo y la rejilla desborda por la derecha. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: clamp(var(--s5), 3vw, var(--s7));
}

.ficha {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
}

.ficha__foto {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--acento-suave);
}

.ficha__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-largo) var(--entra);
}

.ficha:hover .ficha__foto img { transform: scale(1.04); }

.ficha__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s5);
  flex: 1;
}

/* El precio es lo primero que busca quien alquila. Va en la display y a buen
   tamaño: esconderlo en el cuerpo del texto es lo que hace que la gente se
   vaya a preguntar a otro sitio. */
.ficha__precio {
  font-family: var(--display);
  font-size: 1.85rem;
  font-weight: 400;   /* Instrument Serif solo tiene este peso; ver base.css */
  letter-spacing: -0.008em;
}

.ficha__precio small {
  font-family: var(--texto);
  font-size: var(--fs-pequeno);
  font-weight: 400;
  color: var(--muted);
}

.ficha__datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin-top: auto;
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-etiqueta);
  color: var(--muted);
  list-style: none;
}

/* ==========================================================================
   Galería
   ========================================================================== */

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s2);
}

/* La primera ocupa el doble: una cuadrícula de fotos todas iguales no tiene
   jerarquía y el ojo no sabe por dónde empezar. */
.galeria__hueco:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

.galeria__hueco {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--acento-suave);
}

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

/* El pie de foto: qué zona es la que se está viendo. Va sobre un degradado
   propio y no sobre el fondo de la ficha, porque una foto clara con texto
   oscuro encima sin velo se traga la letra justo donde más falta. */
.galeria__pie {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  margin: 0;
  padding: var(--s2) var(--s3) var(--s2);
  padding-top: var(--s6);
  background: linear-gradient(0deg, rgba(20, 22, 20, 0.72) 0%, rgba(20, 22, 20, 0) 100%);
  color: var(--on-dark);
  font-size: var(--fs-etiqueta);
  font-weight: 600;
  letter-spacing: 0.02em;
}

@media (max-width: 640px) {
  .galeria__hueco:first-child { grid-column: span 2; grid-row: auto; }
}

/* Por debajo de ~528 px de viewport solo cabe UNA columna (2×240 + hueco no
   entran), y un «span 2» ahí crea una columna implícita que desborda por la
   derecha: la primera foto deja de ensancharse. */
@media (max-width: 527px) {
  .galeria__hueco:first-child { grid-column: auto; }
}

/* ==========================================================================
   Cierre — la llamada del final de cada página
   ========================================================================== */

.cierre {
  padding-block: clamp(var(--s8), 7vw, var(--s10));
  border-top: 1px solid var(--line);
}

/* Si el cierre va sobre banda, el filete sobra: el cambio de gris ya separa,
   y un borde encima de un cambio de fondo se lee como una costura. */
.cierre.banda { border-top: none; }

.cierre__titulo { max-width: 18ch; }

.cierre__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-top: var(--s6);
}