/* ==========================================================
   Páginas interiores — piezas compartidas
   (hero de página, cabeceras de sección, banda de reserva,
    listas con puntos guía, figuras y créditos)
   Se apoya en base.css, hero.css (.hero-photo, .seq) y sections.css (.band)
   ========================================================== */

/* ---------- Estado activo del menú ---------- */
.menu-list a[aria-current="page"] { color: var(--gold); }
.menu-list a[aria-current="page"] small { opacity: 1; }

/* ---------- Hero de página ---------- */
.page-hero {
  position: relative; z-index: 2; isolation: isolate;
  min-height: 86svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 150px var(--gutter) clamp(110px, 14vh, 150px);
  background: var(--ink); color: var(--cream);
  text-align: center;
  overflow-x: clip;
}
.page-hero.has-booking { padding-bottom: clamp(160px, 20vh, 210px); }
.page-hero.is-bare { min-height: 72svh; }
.page-hero.is-bare::after {
  /* sin foto: halo muy tenue, al estilo Villa Clementina */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 50% 55%, rgba(210,165,59,.08), transparent 70%);
}
.page-hero .hero-eyebrow { margin-bottom: 26px; }
.page-hero .ornament-row { margin: 0 0 30px; }
.page-hero .ornament-row svg { width: 22px; height: 22px; }

.page-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(64px, 11.5vw, 188px);
  line-height: .9; letter-spacing: -.02em;
  text-transform: uppercase;
}
.page-title em {
  font-style: italic; text-transform: none; letter-spacing: -.01em;
  color: var(--gold); font-size: .78em;
}
.pt-line { display: block; overflow: hidden; padding: .02em .04em .08em; }
.pt-in { display: inline-block; transform: translateY(108%); opacity: 0; }
.is-loaded .pt-in { animation: letterUp 1.6s var(--ease-out) forwards; }
.is-loaded .pt-line:nth-child(1) .pt-in { animation-delay: .55s; }
.is-loaded .pt-line:nth-child(2) .pt-in { animation-delay: .72s; }
.page-hero .hero-tagline { margin-top: 30px; max-width: 30ch; }
.page-hero .is-loaded-fade { opacity: 0; }

/* La foto de las páginas interiores enfoca más rápido que en la home */
.page-hero .hero-photo img { object-position: 50% 50%; }
.is-loaded .page-hero .hero-photo img {
  animation: photoFocus 2.2s var(--ease-soft) .2s forwards, photoDrift 40s linear 3s infinite alternate;
}
.hero-credit {
  position: absolute; right: var(--gutter); bottom: 18px; z-index: 1;
  font-size: 10px; letter-spacing: .12em; opacity: .5;
}
.page-hero.has-booking .hero-credit { bottom: auto; top: 110px; }

@media (prefers-reduced-motion: reduce) {
  .pt-in { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* Banda que sigue a un hero con barra de reservas flotante (la barra cabalga el borde) */
.after-booking { padding-top: clamp(150px, 15vw, 220px); }

/* ---------- Cabeceras de sección ---------- */
.section-head {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: clamp(28px, 6vw, 110px);
  align-items: end;
  margin-bottom: clamp(56px, 7vw, 100px);
}
.section-head .eyebrow { margin-bottom: 26px; }
.section-head .lead, .section-head > p { max-width: 46ch; font-size: 18px; line-height: 1.7; }
.section-head.center { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.section-head.center .ornament-row { margin-bottom: 30px; }

.big-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 5vw, 76px); line-height: 1.03; letter-spacing: -.012em;
}
.big-title em { font-style: italic; color: var(--gold); }
.band-cream .big-title em, .band-cream .page-title em { color: #b8862a; }

.lead-serif {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(22px, 2.3vw, 32px); line-height: 1.35;
}

/* ---------- Iconos + etiqueta (servicios) ---------- */
.amenities {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid currentColor; border-bottom: 1px solid currentColor;
  border-color: rgba(21,32,42,.14);
}
.band-ink .amenities { border-color: rgba(241,235,223,.14); }
.amenities li {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 30px 10px; text-align: center;
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase; font-weight: 400;
}
.amenities svg { width: 34px; height: 34px; color: #b8862a; }
.band-ink .amenities svg { color: var(--gold); }

/* ---------- Listas con puntos guía (cartas, precios) ---------- */
.leaders li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(21,32,42,.1);
}
.band-ink .leaders li { border-color: rgba(241,235,223,.1); }
.leaders .ld-name { flex: 0 1 auto; }
.leaders .ld-name small { display: block; font-size: 12px; opacity: .6; letter-spacing: .04em; margin-top: 2px; }
.leaders .ld-dots { flex: 1 1 auto; min-width: 20px; border-bottom: 1px dotted currentColor; opacity: .35; transform: translateY(-4px); }
.leaders .ld-price { flex: 0 0 auto; font-family: var(--serif); font-size: 22px; line-height: 1; white-space: nowrap; }

/* ---------- Figuras ---------- */
.fig { position: relative; }
.fig img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.88) contrast(1.02); }
.fig figcaption, .fig-cap {
  margin-top: 14px; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; opacity: .6;
}
.credit { font-size: 10px !important; letter-spacing: .1em !important; text-transform: none !important; opacity: .55; }
.band-cream .pending-frame {
  border-color: rgba(21,32,42,.25);
  background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(21,32,42,.04) 14px 15px);
}
.band-cream .pending-frame svg, .band-cream .pending-frame span { color: #b8862a; }

/* ---------- Banda de reserva (widget en el flujo, no flotante) ---------- */
.booking-band { text-align: center; display: flex; flex-direction: column; align-items: center; }
.booking-band .big-title { margin: 44px 0 20px; }
.booking-band > p { max-width: 52ch; opacity: .8; margin-bottom: 56px; }
.booking.booking-inline {
  position: relative; left: auto; bottom: auto;
  transform: none; animation: none;
  width: min(1120px, 100%);
  margin: 0 auto;
}
.booking-inline .bk-note { color: var(--cream-soft); }
.booking-inline .bk-note b { color: var(--cream); }
.band-cream .booking-inline .bk-note { color: var(--text-soft); }
.band-cream .booking-inline .bk-note b { color: var(--text); }

/* ---------- Enlaces de página siguiente ---------- */
.next-page {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 56px var(--gutter);
  background: var(--cream); color: var(--text);
  border-top: 1px solid rgba(21,32,42,.12);
}
.next-page .eyebrow { color: var(--text-soft); opacity: 1; }
.next-page a.np-link {
  display: inline-flex; align-items: center; gap: 22px;
  font-family: var(--serif); font-size: clamp(34px, 4.4vw, 64px); line-height: 1;
}
.next-page a.np-link svg { width: 44px; height: 22px; color: #b8862a; transition: transform .5s var(--ease-out); }
.next-page a.np-link:hover svg { transform: translateX(10px); }

@media (max-width: 900px) {
  .section-head { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 700px) {
  .page-hero { min-height: 78svh; padding-top: 120px; }
  .page-hero.has-booking { min-height: 0; padding-bottom: 0; }
  .page-hero.has-booking .booking { margin-top: 56px; }
  .after-booking { padding-top: 230px; }
  .hero-credit, .page-hero.has-booking .hero-credit { position: static; margin-top: 28px; }
  .booking.booking-inline { width: 100%; margin: 0; }
  .leaders .ld-price { font-size: 19px; }
  .next-page { flex-direction: column; align-items: flex-start; }
}