/* Hotel Palacio Albariza — secciones de contenido. Depende de los tokens de
   styles.css, que se carga antes. */

.seccion__cabecera { max-width: var(--ancho-max); margin: 0 auto var(--ritmo-corto); }
.seccion__entrada {
  max-width: var(--ancho-lectura); margin-top: 1.4rem;
  font-size: 1.05rem; color: var(--texto-suave);
}
.seccion__cabecera--claro .seccion__entrada { color: rgba(247, 242, 234, 0.78); }

/* ── Habitaciones: filas editoriales, la imagen sangra y el texto la pisa ─ */

.habitaciones {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 var(--canal) var(--ritmo-largo);
}
.habitaciones .seccion__cabecera { margin-bottom: var(--ritmo-medio); }

.habitacion {
  position: relative;
  display: grid; gap: 1.5rem;
  padding-bottom: var(--ritmo-medio);
}
.habitacion + .habitacion { padding-top: var(--ritmo-corto); border-top: 1px solid var(--borde); }

.habitacion__indice {
  position: relative; z-index: 3;
  font-family: var(--fuente-display);
  font-size: clamp(3.5rem, 2rem + 6vw, 8rem);
  line-height: 0.8; margin: 0;
  color: var(--arena-honda);
  mix-blend-mode: multiply;
}
.habitacion__imagen { margin: 0; }
.habitacion__imagen img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.habitacion__nombre { font-family: var(--fuente-display); font-size: clamp(1.8rem, 1.3rem + 1.8vw, 3rem); }
.habitacion__precio {
  margin: 0.5rem 0 1.2rem;
  font-size: var(--texto-menudo); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--texto-suave);
}
.habitacion__precio strong {
  font-family: var(--fuente-display); font-size: 1.45rem; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--terracota-honda);
}
.habitacion__cuerpo p { max-width: 38ch; color: var(--texto-suave); }
.habitacion__cuerpo .lista-datos { margin-top: 1.5rem; max-width: 24rem; }

@media (min-width: 55rem) {
  .habitacion {
    grid-template-columns: 5.5rem minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center; gap: 0 clamp(1.5rem, 4vw, 4rem);
  }
  .habitacion__indice { grid-column: 1; align-self: start; padding-top: 0.6rem; }
  .habitacion__imagen { grid-column: 2; margin-left: calc(-1 * var(--canal) - 5.5rem - clamp(1.5rem, 4vw, 4rem)); }
  .habitacion__cuerpo { grid-column: 3; position: relative; z-index: 2; }
  .habitacion--invertida { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) 5.5rem; }
  .habitacion--invertida .habitacion__indice { grid-column: 3; text-align: right; }
  .habitacion--invertida .habitacion__imagen {
    grid-column: 2; margin-left: 0;
    margin-right: calc(-1 * var(--canal) - 5.5rem - clamp(1.5rem, 4vw, 4rem));
  }
  .habitacion--invertida .habitacion__cuerpo { grid-column: 1; grid-row: 1; }
  /* Las fotos son 3:2 (1200×800); se respeta en los dos anchos. */
  .habitacion__imagen img { aspect-ratio: 3 / 2; }
  .habitacion__cuerpo { margin-left: clamp(-4rem, -3vw, 0rem); background: var(--superficie); padding: 1.75rem; }
  .habitacion--invertida .habitacion__cuerpo { margin-left: 0; margin-right: clamp(-4rem, -3vw, 0rem); }
}

/* ── El hotel: bento de tres piezas, la primera manda ─────────────────── */

.hotel {
  background: var(--arena-clara);
  padding: var(--ritmo-medio) var(--canal) var(--ritmo-largo);
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}
.hotel__rejilla {
  max-width: var(--ancho-max); margin: 0 auto;
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
}
.espacio {
  background: var(--superficie-alta);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform var(--duracion-normal) var(--curva),
              box-shadow var(--duracion-normal) var(--curva);
}
.espacio:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.espacio__imagen { margin: 0; }
.espacio__imagen img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.espacio__cuerpo { padding: clamp(1.4rem, 2.5vw, 2.25rem); display: flex; flex-direction: column; flex: 1; }
.espacio__cuerpo h3 { font-family: var(--fuente-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); margin-bottom: 0.9rem; }
.espacio__cuerpo p { color: var(--texto-suave); }
.espacio__cuerpo .datos { margin-top: auto; }

/* La Sacristía no tiene foto: es la pieza de texto que cierra el bento. Ocupa
   el ancho de la rejilla —titular y párrafo a un lado, datos al otro— para que
   no quede un hueco vacío en la tercera fila, y va perfilada en vez de rellena
   para que se lea como pieza distinta, no como una cuarta foto que falta. */
.espacio--ancho { grid-column: 1 / -1; background: transparent; border: 1px solid var(--arena-honda); }
.espacio--ancho .espacio__cuerpo p { max-width: 46ch; }
.espacio--ancho:hover { transform: none; box-shadow: none; }

@media (min-width: 55rem) {
  .hotel__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .espacio--alto { grid-row: span 2; }
  /* `1fr` en la segunda fila a propósito: los datos ocupan las dos filas y, sin
     ese `1fr`, el alto sobrante se repartía entre ambas y abría un hueco entre
     el titular y el párrafo. Con él, la holgura se la queda la fila del texto. */
  .espacio--ancho .espacio__cuerpo {
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 0.9rem clamp(1.5rem, 4vw, 3.5rem); align-items: start;
  }
  .espacio--ancho .espacio__cuerpo h3 { grid-column: 1; margin-bottom: 0; }
  .espacio--ancho .espacio__cuerpo p { grid-column: 1; margin: 0; align-self: start; }
  .espacio--ancho .espacio__cuerpo .datos { grid-column: 2; grid-row: 1 / span 2; margin-top: 0.35rem; }
  /* En la tarjeta alta el hueco sobrante se lo queda la imagen, no el texto:
     con `margin-top: auto` en los datos quedaban 400 px de vacío. */
  .espacio--alto .espacio__imagen { flex: 1; min-height: 18rem; }
  .espacio--alto .espacio__imagen img { height: 100%; aspect-ratio: auto; }
  .espacio--alto .espacio__cuerpo { flex: 0 0 auto; }
  .espacio--alto .espacio__cuerpo .datos { margin-top: 1.75rem; }
  .espacio--alto .espacio__cuerpo h3 { font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem); }
}
@media (min-width: 78rem) {
  .hotel__rejilla { grid-template-columns: 1.15fr 1fr; }
}

/* ── Alrededores: lista de planes + panel de cómo llegar ──────────────── */

.alrededores {
  max-width: var(--ancho-max); margin: 0 auto;
  padding: var(--ritmo-medio) var(--canal) var(--ritmo-largo);
}
.alrededores__columnas { display: grid; gap: var(--ritmo-corto); }

.planes { counter-reset: plan; margin-bottom: var(--ritmo-corto); }
.plan {
  counter-increment: plan;
  position: relative;
  padding: 1.35rem 0 1.35rem 3.5rem;
  border-top: 1px solid var(--borde);
}
.plan:last-child { border-bottom: 1px solid var(--borde); }
.plan::before {
  content: counter(plan, decimal-leading-zero);
  position: absolute; left: 0; top: 1.5rem;
  font-family: var(--fuente-display); font-size: 1.1rem;
  color: var(--terracota);
}
.plan h4 { font-size: 1.15rem; font-weight: 500; margin-bottom: 0.4rem; }
.plan p { margin: 0 0 0.35rem; color: var(--texto-suave); max-width: 46ch; }
.plan__datos {
  font-size: var(--texto-menudo); letter-spacing: 0.05em;
  color: var(--terracota-honda) !important;
}

.restaurantes li {
  padding: 0.85rem 0; border-bottom: 1px solid var(--borde);
  font-size: 0.95rem; color: var(--texto-suave);
}
.restaurantes strong { color: var(--texto); font-weight: 500; }
.restaurantes + .nota { margin-top: 1.2rem; }

.llegar {
  background: var(--tinta); color: var(--marfil);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  border-radius: var(--radio);
}
.llegar .titulo-menor { color: var(--marfil-claro); }
.llegar__mapa { margin: 0 0 1.5rem; }
.llegar__mapa img { width: 100%; border-radius: var(--radio); }
.llegar .datos > div { border-top-color: rgba(247, 242, 234, 0.2); }
.llegar dt { color: rgba(247, 242, 234, 0.6); }
.llegar dd { color: var(--marfil-claro); }

@media (min-width: 62rem) {
  .alrededores__columnas { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); }
  .llegar { position: sticky; top: 6.5rem; align-self: start; }
}

/* ── Preguntas frecuentes ─────────────────────────────────────────────── */

.preguntas {
  background: var(--arena-clara);
  border-top: 1px solid var(--borde);
  padding: var(--ritmo-medio) var(--canal) var(--ritmo-medio);
}
.preguntas__lista {
  max-width: var(--ancho-max); margin: 0 auto;
  display: grid; gap: 0 clamp(2rem, 4vw, 4rem);
}
.preguntas__columna { display: flex; flex-direction: column; align-self: start; }
/* En una sola columna las dos pilas van seguidas: la primera pregunta de la
   segunda pila no repite la línea que ya cierra la primera. */
.preguntas__columna + .preguntas__columna .pregunta:first-child { border-top: 0; }
.pregunta { border-top: 1px solid var(--arena-honda); }
.pregunta:last-child { border-bottom: 1px solid var(--arena-honda); }
.pregunta summary {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.2rem 0; cursor: pointer;
  font-family: var(--fuente-display); font-size: 1.2rem; line-height: 1.3;
  list-style: none;
  transition: color var(--duracion-rapida) var(--curva);
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
  content: ""; flex: none; margin-left: auto; margin-top: 0.55rem;
  width: 0.85rem; height: 0.85rem;
  background:
    linear-gradient(var(--terracota), var(--terracota)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--terracota), var(--terracota)) center / 1.5px 100% no-repeat;
  transition: transform var(--duracion-normal) var(--curva);
}
/* Abierto = "−": se oculta la barra horizontal y se rota la vertical, que cae
   en horizontal. Con la combinación contraria se veía un "|". Misma regla en
   `faq/faq.css`, que clona este acordeón. */
.pregunta[open] summary::after { transform: rotate(90deg); background-size: 0 1.5px, 1.5px 100%; }
.pregunta summary:hover { color: var(--terracota-honda); }
.pregunta p { padding: 0 3rem 1.4rem 0; margin: 0; color: var(--texto-suave); max-width: 52ch; }
.preguntas__pie { max-width: var(--ancho-max); margin: var(--ritmo-corto) auto 0; }

/* Dos pilas independientes, no una rejilla de filas: abrir una pregunta solo
   empuja a las de su columna y no deja un hueco al lado. */
@media (min-width: 62rem) {
  .preguntas__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .preguntas__columna + .preguntas__columna .pregunta:first-child { border-top: 1px solid var(--arena-honda); }
}

/* ── Contacto: panel de tinta, la única sección oscura ────────────────── */

.contacto {
  background: var(--tinta); color: var(--marfil);
  padding: var(--ritmo-medio) var(--canal) var(--ritmo-medio);
}
.contacto__interior { max-width: var(--ancho-max); margin: 0 auto; }
.contacto .titulo-seccion, .contacto .titulo-menor { color: var(--marfil-claro); }
.contacto .antetitulo { color: color-mix(in srgb, var(--terracota) 65%, var(--marfil)); }
.contacto__rejilla { display: grid; gap: var(--ritmo-corto); }
.contacto__rejilla a { color: var(--marfil-claro); text-decoration-color: var(--terracota); text-underline-offset: 4px; }
.contacto__rejilla a:hover { color: color-mix(in srgb, var(--terracota) 55%, var(--marfil)); }
.contacto__indicaciones p { color: rgba(247, 242, 234, 0.74); max-width: 46ch; }

@media (min-width: 55rem) {
  .contacto__rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); }
}

/* ── Pie ──────────────────────────────────────────────────────────────── */

.pie { background: var(--tinta); color: rgba(247, 242, 234, 0.66); padding: 0 var(--canal) var(--ritmo-corto); }
.pie__interior {
  max-width: var(--ancho-max); margin: 0 auto;
  padding-top: var(--ritmo-corto);
  border-top: 1px solid rgba(247, 242, 234, 0.16);
  display: grid; gap: 1.25rem;
}
.pie__marca { font-family: var(--fuente-display); font-size: 1.15rem; color: var(--marfil-claro); margin: 0; }
.pie__nav ul { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.pie__nav a { font-size: var(--texto-menudo); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; }
.pie__nav a:hover { color: var(--marfil-claro); }
.pie__aviso { font-size: 0.78rem; max-width: 52ch; margin: 0; opacity: 0.75; }

@media (min-width: 55rem) {
  .pie__interior { grid-template-columns: auto 1fr; align-items: center; }
  .pie__aviso { grid-column: 1 / -1; }
}

.llegar a { color: var(--marfil-claro); text-underline-offset: 4px; }