/* Amaragua Spa — pantalla de aviso de cierre temporal (a pantalla completa, la web de fondo no se ve). */

html.cierre-abierto { overflow: hidden; }
/* La cinta de frases de la web de atrás se lee aunque esté difuminada: fuera */
html.cierre-abierto .marquee { visibility: hidden; }

.cierre {
  position: fixed; inset: 0; z-index: var(--z-modal, 1000);
  display: none; overflow-y: auto; overscroll-behavior: contain;
  padding: 2rem 1.2rem 3rem;
  /* La web antigua se intuye detrás: muy difuminada y teñida de azul. --cierre-velo: más alto = se ve menos. */
  --cierre-velo: .5;
  background: linear-gradient(180deg, rgba(18, 53, 64, calc(var(--cierre-velo) + .06)) 0%, rgba(18, 53, 64, var(--cierre-velo)) 100%);
  -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1);
  color: var(--crema, #FAF6EF);
}
html.cierre-abierto .cierre { display: grid; place-items: center; }

.cierre__marco { width: 100%; max-width: 1040px; display: flex; flex-direction: column; align-items: center; margin: auto; }
.cierre__logo { height: 92px; width: auto; margin-bottom: 1.6rem; }

.cierre__panel {
  position: relative; width: 100%; display: grid; grid-template-columns: 5fr 7fr; min-height: 540px;
  background: var(--crema, #FAF6EF); color: var(--carbon, #241D16); outline: none;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  animation: cierre-entra .6s var(--ease-out, cubic-bezier(.22, 1, .36, 1)) both;
}
@keyframes cierre-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cierre__panel { animation: none; } }

.cierre__media { position: relative; min-height: 100%; overflow: hidden; }
.cierre__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }

.cierre__cuerpo { padding: 2.2rem 3rem 3rem; display: flex; flex-direction: column; justify-content: center; }
.cierre__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; }
.cierre__etiqueta {
  margin: 0; display: flex; align-items: center; gap: .8rem;
  font-family: var(--sans, "DM Sans", sans-serif); font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--terracota, #B5673A);
}
.cierre__etiqueta::before { content: ""; width: 2rem; height: 1px; background: currentColor; flex-shrink: 0; }

.cierre__idioma { display: flex; flex-shrink: 0; border: 1px solid rgba(36, 29, 22, .22); }
.cierre__idioma a {
  display: block; min-width: 2.6rem; padding: .5rem .7rem; text-align: center; text-decoration: none;
  font: 600 .74rem/1 var(--sans, "DM Sans", sans-serif); letter-spacing: .1em; color: rgba(36, 29, 22, .6);
}
.cierre__idioma a:hover { color: var(--carbon, #241D16); background: rgba(36, 29, 22, .05); }
.cierre__idioma a[aria-current="true"] { background: var(--carbon, #241D16); color: var(--crema, #FAF6EF); }

.cierre__cuerpo h2 {
  font-family: var(--serif, "Fraunces", Georgia, serif); font-weight: 420; line-height: 1.04;
  font-size: clamp(2.3rem, 4.4vw, 3.6rem); margin: 0 0 1.3rem; text-wrap: balance;
}
.cierre__texto { font-size: 1.05rem; line-height: 1.6; margin: 0 0 2rem; color: rgba(36, 29, 22, .78); max-width: 44ch; }

.cierre__botones { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; width: 100%; max-width: 32rem; }
.cierre-btn--ancho { grid-column: 1 / -1; }
.cierre-btn--grande { gap: .8rem; padding: 1.35rem 1rem; font-size: .88rem; }
.cierre-btn__ico { width: 1.35rem; height: 1.35rem; flex-shrink: 0; }
.cierre-btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--sans, "DM Sans", sans-serif); font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: 1.05rem .9rem; border: 1px solid transparent; text-decoration: none; cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.cierre-btn--primario { background: var(--terracota, #B5673A); color: var(--crema, #FAF6EF); }
.cierre-btn--primario:hover { background: var(--terracota-2, #96502A); }
.cierre-btn--linea { background: transparent; color: var(--carbon, #241D16); border-color: rgba(36, 29, 22, .35); }
.cierre-btn--linea:hover { border-color: var(--carbon, #241D16); background: rgba(36, 29, 22, .05); }
.cierre-btn--azul { background: var(--azul, #1B4B58); color: var(--crema, #FAF6EF); }
.cierre-btn--azul:hover { background: var(--azul-oscuro, #123540); }

.cierre a:focus-visible, .cierre__idioma a:focus-visible { outline: 2px solid var(--terracota, #B5673A); outline-offset: 3px; }

/* ---------- Móvil ---------- */
@media (max-width: 760px) {
  .cierre { padding: 1.1rem .8rem 2rem; place-items: start center; }
  .cierre__logo { height: 56px; margin-bottom: .8rem; }
  .cierre__panel { grid-template-columns: 1fr; min-height: 0; }
  .cierre__media { height: 150px; }
  .cierre__media img { object-position: 78% 18% !important; }
  .cierre__cuerpo { padding: 1.1rem 1.3rem 1.6rem; }
  .cierre__cabecera { flex-direction: column; align-items: stretch; gap: .7rem; margin-bottom: .9rem; }
  .cierre__idioma { order: -1; align-self: flex-end; }
  .cierre__etiqueta { font-size: .72rem; }
  .cierre__etiqueta::before { width: 1.2rem; }
  .cierre__cuerpo h2 { font-size: 2.15rem; margin-bottom: 1rem; }
  .cierre__texto { font-size: .97rem; margin-bottom: 1.4rem; }
  .cierre__botones { grid-template-columns: 1fr; max-width: none; }
  .cierre-btn { padding: 1rem; }
}

/* ---------- Secciones de la web (ocultas tras el aviso, coherentes por si se apaga solo la pantalla) ---------- */
.reserva__aside--raices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 1100px) { .reserva__aside--raices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .reserva__aside--raices { grid-template-columns: 1fr; } }
.carta-aviso {
  max-width: 62ch; margin: 0 0 2.2rem; padding: .9rem 1.1rem; border-left: 3px solid var(--terracota, #B5673A);
  background: var(--crema-2, #F2E9DA); font-size: .95rem; line-height: 1.55; color: rgba(36, 29, 22, .85);
}

/* ---------- Banner de cookies más compacto en móvil mientras está el aviso (Aceptar y Rechazar siguen iguales) ---------- */
@media (max-width: 700px) {
  html.con-cierre #cc-banner.cc-simple .cc-inner { padding: .5rem .8rem; gap: .45rem; }
  html.con-cierre #cc-banner.cc-simple .cc-text { font-size: .7rem; line-height: 1.3; }
  html.con-cierre #cc-banner.cc-simple .cc-actions { flex-wrap: nowrap; gap: .35rem; }
  html.con-cierre #cc-banner.cc-simple .cc-btn { flex: 1 1 0; min-width: 0; padding: .5rem .25rem; font-size: .72rem; }
}