/* ═══════════════════════════════════════════
   CABANA — Estilos página individual
   Hereda variables de ../css/styles.css
   ═══════════════════════════════════════════ */

/* ── Hero ── */
.cab-hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.cab-hero__slides { position: absolute; inset: 0; }

.cab-hero__slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--slate);
  opacity: 0;
  transition: opacity 1.2s ease;
}
.cab-hero__slide.active {
  opacity: 1;
  animation: slowZoom 8s ease forwards;
}
@keyframes slowZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

.cab-hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right, rgba(12,18,22,0.88) 0%, rgba(12,18,22,0.5) 55%, rgba(12,18,22,0.2) 100%),
    linear-gradient(to top, rgba(12,18,22,0.6) 0%, transparent 50%);
}

.cab-hero__progress {
  position: absolute; bottom: 0; left: 0;
  height: 2px; background: var(--copper);
  z-index: 3; width: 0%;
}

.cab-hero__dots {
  position: absolute;
  bottom: clamp(1.5rem, 3vh, 2.5rem);
  left: 50%; transform: translateX(-50%);
  z-index: 3;
  display: flex; gap: 0.6rem;
}

.cab-hero__content {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x) clamp(4rem, 8vh, 6rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 3rem;
  padding-top: calc(var(--nav-h) + 1rem);
}

/* Hero texto */
.cab-hero__eyebrow {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 1rem;
  opacity: 0;
  animation: fadeUp 0.9s ease 0.3s forwards;
}

.cab-hero__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(3.5rem, 8vw, 7rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin-bottom: 1rem;
  opacity: 0;
  animation: fadeUp 1s ease 0.5s forwards;
}
.cab-hero__title em { font-style: italic; color: var(--sky); }

.cab-hero__cap {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--water);
  margin-bottom: 1.4rem;
  opacity: 0;
  animation: fadeUp 1s ease 0.65s forwards;
}

.cab-hero__desc {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(0.85rem, 1.5vw, 0.98rem);
  line-height: 1.75;
  color: rgba(238,232,222,0.68);
  max-width: 440px;
  margin-bottom: 2.2rem;
  opacity: 0;
  animation: fadeUp 1s ease 0.8s forwards;
}

.cab-hero__actions {
  display: flex; gap: 1.2rem; flex-wrap: wrap;
  opacity: 0; animation: fadeUp 1s ease 1s forwards;
}

/* Hero card de reserva */
.cab-hero__card {
  background: rgba(255,255,255,0.97);
  border-radius: 14px;
  padding: 2rem 2rem 1.6rem;
  box-shadow: 0 28px 70px rgba(0,0,0,0.5);
  color: #1a1a1a;
  opacity: 0;
  animation: fadeUp 1.1s ease 0.9s forwards;
}

.cab-card__eyebrow {
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #aaa;
  margin-bottom: 0.8rem;
}

.cab-card__precio {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-bottom: 0.2rem;
}
.cab-card__desde { font-size: 0.6rem; color: #999; text-transform: uppercase; letter-spacing: 0.12em; }
.cab-card__valor { font-family: var(--font-serif); font-size: 2.2rem; font-weight: 300; color: #111; line-height: 1; }
.cab-card__noche { font-size: 0.68rem; color: #999; }
.cab-card__clp   { font-size: 0.65rem; color: #bbb; margin-bottom: 1.4rem; }

.cab-card__divider {
  height: 1px; background: #eee; margin-bottom: 1.2rem;
}

.cab-card__features {
  list-style: none;
  display: flex; flex-direction: column; gap: 0.65rem;
  margin-bottom: 1.4rem;
}
.cab-card__features li {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.82rem; font-family: var(--font-sans); font-weight: 300; color: #333;
}
.cab-card__features svg { width: 14px; height: 14px; color: var(--copper); flex-shrink: 0; }

.cab-card__btn {
  display: block; width: 100%;
  padding: 0.85rem; text-align: center;
  background: var(--copper); color: #fff;
  border-radius: 4px;
  font-family: var(--font-sans); font-weight: 500;
  font-size: 0.65rem; letter-spacing: 0.18em;
  text-transform: uppercase; text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}
.cab-card__btn:hover { background: var(--copper-h); transform: translateY(-1px); }

.cab-card__note {
  font-size: 0.58rem; color: #bbb;
  text-align: center; margin-top: 0.7rem;
}

/* ── Galería ── */
.cab-galeria {
  background: #0a1014;
  padding: clamp(3.5rem, 7vw, 6rem) var(--pad-x);
  border-top: 1px solid rgba(74,107,120,0.12);
}

.cab-galeria__inner {
  max-width: var(--max-w); margin: 0 auto;
}

.cab-galeria__inner .section-eyebrow { margin-bottom: 0.7rem; }
.cab-galeria__inner .section-title   { margin-bottom: 2.5rem; }

.cab-galeria__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  border-radius: 12px;
  overflow: hidden;
  height: 480px;
}

.cab-gal-item {
  overflow: hidden; background: var(--slate);
}
.cab-gal-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.cab-gal-item:hover img { transform: scale(1.04); }

.cab-gal-item--featured {
  grid-row: 1 / 3;
}

/* Con 4 fotos: la cuarta ocupa la columna derecha completa.
   Sin esto la celda inferior derecha quedaba vacía (hueco). */
.cab-galeria__grid > .cab-gal-item:nth-child(4) {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}

/* ── Detalle ── */
.cab-detalle {
  background: #0e1518;
  padding: clamp(4rem, 7vw, 6rem) var(--pad-x);
}
.cab-detalle__inner {
  max-width: var(--max-w); margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
}

.cab-desc .section-eyebrow { margin-bottom: 0.7rem; }
.cab-desc .section-title   { margin-bottom: 1.8rem; }

.cab-desc__text {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(0.88rem, 1.4vw, 0.98rem);
  line-height: 1.85;
  color: rgba(238,232,222,0.65);
  margin-bottom: 1.2rem;
}

.cab-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(74,107,120,0.15);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 2rem;
}
.cab-info-item {
  background: #12191e;
  padding: 1rem 1.2rem;
  display: flex; flex-direction: column; gap: 0.25rem;
}
.cab-info-label {
  font-family: var(--font-sans); font-size: 0.52rem;
  font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--water);
}
.cab-info-value {
  font-family: var(--font-sans); font-size: 0.9rem;
  font-weight: 300; color: var(--cream);
}

/* Amenidades */
.cab-amenidades .section-eyebrow { margin-bottom: 0.7rem; }
.cab-amenidades .section-title   { margin-bottom: 2rem; }

.cab-amen-grupos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.cab-amen-titulo {
  font-family: var(--font-sans);
  font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--copper); margin-bottom: 0.8rem;
}

.cab-amen-lista {
  list-style: none;
  display: flex; flex-direction: column; gap: 0.45rem;
}
.cab-amen-lista li {
  font-family: var(--font-sans); font-weight: 300;
  font-size: 0.82rem;
  color: rgba(238,232,222,0.65);
  padding-left: 1rem;
  position: relative;
  line-height: 1.4;
}
.cab-amen-lista li::before {
  content: '';
  position: absolute; left: 0; top: 0.45em;
  width: 4px; height: 4px;
  border-radius: 50%; background: var(--copper);
}

/* ── Precios ── */
.cab-precios {
  background: #0a1014;
  padding: clamp(4rem, 7vw, 6rem) var(--pad-x);
  border-top: 1px solid rgba(74,107,120,0.12);
  text-align: center;
}
.cab-precios__inner {
  max-width: 860px; margin: 0 auto;
}
.cab-precios__inner .section-eyebrow { margin-bottom: 0.7rem; }
.cab-precios__inner .section-title   { margin-bottom: 1rem; }

.cab-precios__nota {
  font-family: var(--font-sans); font-weight: 300;
  font-size: 0.88rem; line-height: 1.7;
  color: rgba(238,232,222,0.5);
  margin-bottom: 2.5rem;
}

.cab-precios__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: rgba(74,107,120,0.12);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.cab-precio-card {
  background: #12191e;
  padding: 2rem 1.5rem;
  display: flex; flex-direction: column;
  align-items: center; gap: 0.3rem;
  position: relative;
  transition: background 0.2s;
}
.cab-precio-card:hover { background: #16202a; }

.cab-precio-card--featured {
  background: rgba(155,35,53,0.08);
  border: 1px solid rgba(155,35,53,0.25);
  border-radius: 0;
}

.cab-precio-badge {
  font-family: var(--font-sans); font-size: 0.5rem;
  font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: #fff;
  background: var(--copper);
  padding: 0.2rem 0.7rem; border-radius: 2px;
  margin-bottom: 0.5rem;
}

.cab-precio-temporada {
  font-family: var(--font-sans); font-size: 0.72rem;
  font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--cream);
}

.cab-precio-meses {
  font-family: var(--font-sans); font-size: 0.65rem;
  color: var(--water); margin-bottom: 0.8rem;
}

.cab-precio-valor {
  display: flex; align-items: baseline; gap: 0.3rem;
}
.cab-precio-num {
  font-family: var(--font-serif); font-size: 2.5rem;
  font-weight: 300; color: var(--cream); line-height: 1;
}
.cab-precio-noche {
  font-family: var(--font-sans); font-size: 0.65rem;
  color: var(--water);
}
.cab-precio-clp {
  font-family: var(--font-sans); font-size: 0.65rem;
  color: rgba(155,190,200,0.4);
}

.cab-precios__aviso {
  font-family: var(--font-sans); font-size: 0.65rem;
  color: rgba(155,190,200,0.3);
  line-height: 1.6;
}

/* ── Ubicación ── */
.cab-ubicacion {
  background: #0e1518;
  padding: clamp(4rem, 7vw, 6rem) var(--pad-x);
  border-top: 1px solid rgba(74,107,120,0.12);
}
.cab-ubicacion__inner {
  max-width: var(--max-w); margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}
.cab-ubicacion__info .section-eyebrow { margin-bottom: 0.7rem; }
.cab-ubicacion__info .section-title   { margin-bottom: 1.5rem; }
.cab-ubicacion__info .cab-desc__text  { margin-bottom: 2rem; }

.cab-distancias {
  list-style: none;
  display: flex; flex-direction: column;
  gap: 0;
  margin-bottom: 2rem;
}
.cab-distancias li {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(74,107,120,0.12);
}
.cab-distancias li:first-child { border-top: 1px solid rgba(74,107,120,0.12); }

.cab-dist-num {
  font-family: var(--font-serif); font-size: 1.1rem;
  font-weight: 300; color: var(--copper);
  min-width: 3.5rem;
}
.cab-dist-desc {
  font-family: var(--font-sans); font-weight: 300;
  font-size: 0.85rem; color: rgba(238,232,222,0.6);
}

.cab-ubicacion__mapa {
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
  border: 1px solid rgba(74,107,120,0.15);
  position: sticky; top: calc(var(--nav-h) + 2rem);
}

/* ── Otras cabañas ── */
.cab-otras {
  background: #0a1014;
  padding: clamp(3.5rem, 6vw, 5rem) var(--pad-x);
  border-top: 1px solid rgba(74,107,120,0.12);
}
.cab-otras__inner {
  max-width: var(--max-w); margin: 0 auto;
}
.cab-otras__inner .section-eyebrow { margin-bottom: 0.7rem; }
.cab-otras__inner .section-title   { margin-bottom: 2.5rem; }

.cab-otras__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: rgba(74,107,120,0.12);
  border-radius: 12px;
  overflow: hidden;
}

.cab-otra-card {
  background: #12191e;
  text-decoration: none;
  overflow: hidden;
  transition: background 0.25s;
  display: flex; flex-direction: column;
}
.cab-otra-card:hover { background: #16202a; }

.cab-otra-img {
  height: 200px; overflow: hidden;
}
.cab-otra-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.cab-otra-card:hover .cab-otra-img img { transform: scale(1.05); }

.cab-otra-body {
  padding: 1.2rem 1.4rem;
  display: flex; flex-direction: column; gap: 0.3rem;
}
.cab-otra-cap {
  font-family: var(--font-sans); font-size: 0.55rem;
  font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--water);
}
.cab-otra-nombre {
  font-family: var(--font-serif); font-weight: 300;
  font-size: 1.2rem; color: var(--cream); line-height: 1.1;
}
.cab-otra-nombre em { font-style: italic; color: var(--sky); }
.cab-otra-precio {
  font-family: var(--font-sans); font-size: 0.78rem;
  font-weight: 300; color: var(--copper);
}

/* ── CTA final ── */
.cab-cta-final {
  background: #080d10;
  padding: clamp(4rem, 8vw, 7rem) var(--pad-x);
  text-align: center;
  border-top: 1px solid rgba(74,107,120,0.12);
}
.cab-cta-final__inner {
  max-width: 600px; margin: 0 auto;
}
.cab-cta-final__inner .section-eyebrow { margin-bottom: 1rem; }

.cab-cta-final__title {
  font-family: var(--font-serif); font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  color: var(--cream); line-height: 1.1;
  margin-bottom: 1.2rem;
}
.cab-cta-final__title em { font-style: italic; color: var(--sky); }

.cab-cta-final__desc {
  font-family: var(--font-sans); font-weight: 300;
  font-size: 0.92rem; line-height: 1.8;
  color: rgba(238,232,222,0.5);
  margin-bottom: 2.2rem;
}

.cab-cta-final__btns {
  display: flex; align-items: center;
  justify-content: center; gap: 1.2rem; flex-wrap: wrap;
}

.cab-cta-wa {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.8rem 1.6rem;
  background: #25D366; color: #fff;
  border-radius: 4px;
  font-family: var(--font-sans); font-weight: 500;
  font-size: 0.65rem; letter-spacing: 0.18em;
  text-transform: uppercase; text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}
.cab-cta-wa svg { width: 18px; height: 18px; }
.cab-cta-wa:hover { background: #1fb558; transform: translateY(-1px); }

/* ── Animaciones ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .cab-hero__content { grid-template-columns: 1fr; }
  .cab-hero__card { max-width: 420px; }
  .cab-detalle__inner { grid-template-columns: 1fr; }
  .cab-ubicacion__inner { grid-template-columns: 1fr; }
  .cab-ubicacion__mapa { position: static; }
  .cab-otras__grid { grid-template-columns: 1fr; }
  .cab-galeria__grid { height: auto; grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .cab-gal-item { height: 240px; }
  .cab-gal-item--featured { grid-row: auto; grid-column: 1 / 3; height: 240px; }
  /* Con 4 fotos la última ocupa el ancho completo: sin esto quedaba media fila vacía */
  .cab-galeria__grid > .cab-gal-item:nth-child(4) { grid-column: 1 / 3; grid-row: auto; }
}

@media (max-width: 600px) {
  .cab-amen-grupos { grid-template-columns: 1fr; }
  .cab-precios__grid { grid-template-columns: 1fr; }
  .cab-info-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════
   RESTAURANTE — ajustes propios de esta página
   Todo lo demás (hero, galería, detalle, ubicación, otras opciones y CTA)
   se hereda tal cual de cabana.css: la página del restaurante es la misma
   estructura que la de una cabaña.
   ═══════════════════════════════════════════ */

/* Título del hero: "Restaurante Quelen" es una palabra larga, así que en
   desktop bajamos un poco el tamaño para que no se parta de forma fea. */
.resto-hero .cab-hero__title { font-size: clamp(2.9rem, 6.5vw, 5.6rem); }

/* El slide de la terraza es claro (cielo al atardecer), así que reforzamos el
   velo: en las cabañas las fotos son de interior y el degradado horizontal
   alcanzaba, aquí no. En mobile el velo pasa a ser vertical, porque el texto
   queda centrado sobre la parte alta de la foto. */
.resto-hero .cab-hero__overlay {
  background:
    linear-gradient(to right, rgba(12,18,22,0.9) 0%, rgba(12,18,22,0.62) 55%, rgba(12,18,22,0.32) 100%),
    linear-gradient(to top, rgba(12,18,22,0.75) 0%, rgba(12,18,22,0.25) 55%, transparent 100%);
}

@media (max-width: 960px) {
  .resto-hero .cab-hero__overlay {
    background:
      linear-gradient(to bottom, rgba(12,18,22,0.78) 0%, rgba(12,18,22,0.55) 40%, rgba(12,18,22,0.85) 100%);
  }
}

/* Slides del hero con <img> real: antes eran background-image, pero así cada
   foto puede llevar su alt. La imagen llena el slide igual que hacía
   background-size: cover; el fade y el zoom siguen en .cab-hero__slide. */
.resto-hero .cab-hero__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ── Galería con autoplay ──
   El grid muestra una "ventana" de 4 fotos (la destacada + 3) y la rota cada
   4 s. Las fotos que no están en la ventana se ocultan, pero siguen en el DOM
   para que el lightbox las recorra todas. Como la 4ª foto visible ya no es
   siempre la 4ª del DOM, la celda de la derecha se marca con una clase en vez
   de depender de :nth-child(4), que solo acierta en la primera ventana. */
.resto-galeria__grid {
  position: relative;                 /* contiene a las fotos del cruce (absolute) */
}
.resto-galeria__grid > .cab-gal-item:not(.is-on):not(.is-out) { display: none; }

.resto-galeria__grid > .cab-gal-item--right {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}

/* ── Cruce entre ventanas (0.5 s, ease-in-out) ──
   Las 4 fotos que salen se sacan del flujo del grid —el script las deja en
   position: absolute, clavadas en la posición que tenían— y se apagan encima
   de las 4 que entran, que llegan opacas debajo. A propósito anima solo la capa
   de arriba: si las dos ventanas se cruzaran al 50% de opacidad, en la mitad
   del cambio el grid daría un bajón hacia el fondo (#0a1014) que se leería como
   un parpadeo oscuro. El cruce percibido (unas se apagan, otras aparecen) es el
   mismo, sin el hoyo. */
.resto-galeria__grid > .cab-gal-item.is-out {
  position: absolute;
  /* Su bloque contenedor tiene que ser el grid completo. Si la foto conservara
     su colocación en el grid (:nth-child(4) o la clase --right), el bloque
     contenedor sería esa área del grid y el left/top medido se aplicaría dos
     veces (la foto se iría al doble de distancia). */
  grid-area: auto;
  z-index: 1;                         /* por encima de las que entran */
  pointer-events: none;               /* mientras se apagan no reciben clicks */
  animation: galeriaFadeOut 0.5s ease-in-out both;
}

@keyframes galeriaFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@media (max-width: 960px) {
  /* En mobile la cuarta foto visible ocupa el ancho completo, igual que hoy */
  .resto-galeria__grid > .cab-gal-item--right { grid-column: 1 / 3; grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
  /* Sin animación el cambio es instantáneo (el script tampoco encadena el cruce) */
  .resto-galeria__grid > .cab-gal-item.is-out { animation: none; opacity: 0; }
}

/* ── Tarjeta del hero: horarios en vez de características ── */
.resto-horarios {
  list-style: none;
  margin-bottom: 1.4rem;
}
.resto-horarios li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid #eee;
  font-family: var(--font-sans);
}
.resto-horarios li:first-child { border-top: 1px solid #eee; }

.resto-horarios__dias {
  font-size: 0.8rem;
  font-weight: 300;
  color: #555;
}
.resto-horarios__hora {
  font-size: 0.82rem;
  font-weight: 500;
  color: #111;
  white-space: nowrap;
}
.resto-horarios li.cerrado .resto-horarios__dias,
.resto-horarios li.cerrado .resto-horarios__hora { color: #aaa; }

/* ── Descripción: sin columna de amenidades, una sola columna legible ── */
.resto-detalle__inner {
  grid-template-columns: 1fr;
  max-width: 820px;
}

@media (max-width: 960px) {
  .resto-detalle__inner { max-width: none; }
}