/* ═══════════════════════════════════════════════════════════
   Página /alojamiento.html — Boda Lidia & David
   ───────────────────────────────────────────────────────────
   Cada hotel es una .hotel-card propia de esta página (medallón con
   el icono, nombre, un divisor en rombo y un enlace con flecha que
   crece al pasar el ratón), agrupadas por zona. Para añadir un hotel,
   se copia un <article class="hotel-card">; para añadir una zona, se
   copia un <section class="alojamiento__grupo">.
   ═══════════════════════════════════════════════════════════ */

.alojamiento-body {
  min-height: 100svh;
  padding: clamp(2.4rem, 7vw, 4.5rem) clamp(1.2rem, 5vw, 2.5rem);
}

.alojamiento {
  max-width: 960px;
  margin: 0 auto;
}

.alojamiento__cabecera {
  text-align: center;
  margin-bottom: clamp(2.4rem, 6vw, 3.4rem);
}

.alojamiento__intro {
  max-width: 46ch;
  margin: 1.1rem auto 0;
  color: var(--tinta-suave);
}

.alojamiento__grupo + .alojamiento__grupo {
  margin-top: clamp(2.4rem, 6vw, 3.4rem);
}

/* display:table para que se ajuste al contenido y se pueda centrar con
   margin:auto, con una placa de fondo detrás: sin ella el texto caía
   directamente sobre la foto y perdía legibilidad segun la zona. */
.alojamiento__grupo-titulo {
  display: table;
  margin: 0 auto clamp(1.4rem, 4vw, 2rem);
  padding: .5rem 1.5rem;
  background: rgba(250, 246, 239, .92);
  border: 1px solid rgba(197, 165, 90, .35);
  font-family: var(--f-serif);
  font-size: clamp(1.4rem, 3.5vw, 1.7rem);
  font-weight: 500;
  text-align: center;
  color: var(--verde-oscuro);
}

/* ── Las tarjetas de hotel ──────────────────────────────────
   Grid propio: igual de ancho de columna que .details__cards del
   sitio, pero el resto del diseño es solo de esta página. */
.alojamiento__cards {
  max-width: var(--ancho);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.6rem, 4vw, 2.2rem);
}

.alojamiento__cards--single {
  grid-template-columns: min(100%, 340px);
  justify-content: center;
}

.hotel-card {
  position: relative;
  background: rgba(250, 246, 239, .93);
  padding: clamp(2.4rem, 5vw, 2.8rem) 1.6rem 2.1rem;
  text-align: center;
  border: 1px solid rgba(197, 165, 90, .3);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

/* Un par de esquinas en diagonal, a modo de marco de invitación,
   en vez del borde uniforme y el sello de .card que ya usa el resto
   de la web: asi estas tarjetas se leen como algo aparte. */
.hotel-card::before,
.hotel-card::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--dorado);
  transition: width .35s ease, height .35s ease;
}

.hotel-card::before { top: 9px; left: 9px; border-width: 1.5px 0 0 1.5px; }
.hotel-card::after { bottom: 9px; right: 9px; border-width: 0 1.5px 1.5px 0; }

.hotel-card:hover {
  transform: translateY(-6px);
  border-color: rgba(197, 165, 90, .5);
  box-shadow: 0 26px 50px -26px rgba(74, 93, 67, .35);
}

.hotel-card:hover::before,
.hotel-card:hover::after { width: 26px; height: 26px; }

.hotel-card__icono-aro {
  width: 62px;
  height: 62px;
  margin: 0 auto 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--dorado-claro);
  background: rgba(197, 165, 90, .08);
}

.hotel-card__icono {
  width: 28px;
  height: 28px;
  color: var(--salvia);
}

.hotel-card__titulo {
  font-family: var(--f-serif);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--verde-oscuro);
}

/* Divisor: una linea corta con un rombo dorado en el centro */
.hotel-card__divisor {
  display: block;
  width: 32px;
  height: 1px;
  margin: 1rem auto 1.3rem;
  background: var(--dorado-claro);
  position: relative;
}

.hotel-card__divisor::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 5px; height: 5px;
  background: var(--dorado);
  transform: translate(-50%, -50%) rotate(45deg);
}

.hotel-card__enlace {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--verde-oscuro);
  padding-bottom: .3rem;
  border-bottom: 1px solid transparent;
  transition: color .3s ease, border-color .3s ease, gap .3s ease;
}

.hotel-card__enlace svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform .3s ease;
}

.hotel-card__enlace:hover,
.hotel-card__enlace:focus-visible {
  color: var(--dorado);
  border-color: var(--dorado);
  gap: .6rem;
}

/* ── Salobreña Suites: aparte del resto ─────────────────────── */

.alojamiento__extra {
  margin-top: clamp(2.8rem, 7vw, 4rem);
  padding-top: clamp(2.4rem, 6vw, 3.4rem);
  border-top: 1px solid rgba(197, 165, 90, .35);
}

/* Antes iba sin fondo directamente sobre la foto y, según la zona,
   se leía muy mal: ahora lleva su propia placa, igual que el resto
   de textos de la página. Los <br class="alojamiento__salto--movil">
   reparten el texto en 2 renglones en escritorio y 4 en móvil (ver
   media query mas abajo). El ancho va "a sangre" (ignora el padding
   del contenedor, centrado con margin-left:50%+transform) porque con
   el ancho normal de la página el texto no cabía en esos renglones. */
.alojamiento__extra-texto {
  width: min(94vw, 880px);
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 0;
  margin-bottom: clamp(1.8rem, 5vw, 2.4rem);
  padding: clamp(1.2rem, 4vw, 1.6rem) clamp(1rem, 4vw, 2rem);
  background: rgba(250, 246, 239, .92);
  border: 1px solid rgba(197, 165, 90, .35);
  text-align: center;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.65;
  color: var(--tinta-suave);
}

.alojamiento__salto--movil { display: none; }

.alojamiento__extra-texto strong {
  font-style: normal;
  font-weight: 600;
  color: var(--verde-oscuro);
}

.alojamiento__pie {
  margin-top: clamp(2rem, 5vw, 3rem);
  text-align: center;
  font-size: .8rem;
  letter-spacing: .08em;
}

.alojamiento__pie a {
  color: var(--tinta-suave);
  text-decoration: none;
}

.alojamiento__pie a:hover { color: var(--verde-oscuro); }

@media (max-width: 640px) {
  .alojamiento__salto--movil { display: inline; }
}