/* site.css — composición de la página. Solo consume tokens de design-system.css. */

/* ── Nav ── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding: var(--s-2) var(--gutter);
  color: var(--papel-100);
  transition: color var(--d-base) var(--ease), background var(--d-base) var(--ease);
}
.nav.is-papel { color: var(--fg); background: color-mix(in oklch, var(--papel-100) 88%, transparent); backdrop-filter: blur(8px); }
.nav.is-piedra { color: var(--papel-100); background: color-mix(in oklch, var(--piedra-800) 88%, transparent); backdrop-filter: blur(8px); }
.marca { display: flex; align-items: center; gap: var(--s-1); }
.marca__logo { width: 2.75rem; height: auto; transition: filter var(--d-base) var(--ease); }
.nav.is-papel .marca__logo { filter: invert(1) brightness(.25); }   /* logo blanco → tinta sobre papel */
.pie__marca { display: grid; gap: var(--s-1); justify-items: start; }
.pie__marca img { width: 4.5rem; height: auto; }
.wordmark { font-family: var(--f-display); font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; font-size: var(--t-base); line-height: 1; }
.wordmark small { display: block; font-family: var(--f-body); font-weight: 500; letter-spacing: var(--track-caps); font-size: 0.6rem; opacity: .8; margin-top: 2px; }
.nav__links { display: none; gap: var(--s-3); font-size: var(--t-sm); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.nav__links a { opacity: .8; transition: opacity var(--d-fast) var(--ease); }
.nav__links a:hover { opacity: 1; }
@media (min-width: 60rem) { .nav__links { display: flex; } }
.btn--nav { min-height: 2.5rem; padding: 0 var(--s-2); font-size: var(--t-sm); white-space: nowrap; flex-shrink: 0; }
@media (max-width: 47.99rem) { .btn--nav .btn__largo { display: none; } }
@media (min-width: 48rem) { .btn--nav .btn__corto { display: none; } }

/* ── Hero ── */
.hero { position: relative; height: 420vh; color: var(--papel-100); background: var(--piedra-900); }
.hero__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); }
.hero__media { position: absolute; inset: 0; background: var(--piedra-900); }
.hero__poster, .hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__canvas { opacity: 0; transition: opacity var(--d-slow) var(--ease); }
.hero__canvas.is-listo { opacity: 1; }

/* Capa 2: capítulos del recorrido */
.hero__capitulos { position: absolute; inset: 0; z-index: 2; display: grid; align-content: center; pointer-events: none; }
.hero__cap { grid-area: 1 / 1; display: grid; gap: var(--s-1); max-width: 26rem; opacity: 0; transform: translateY(24px); will-change: transform, opacity; }
.hero__cap .indice { color: oklch(80% 0.01 75); }
.hero__cap .h-sub { font-size: var(--t-3xl); font-weight: 300; text-transform: uppercase; letter-spacing: var(--track-display); }
.hero__cap .meta { color: oklch(86% 0.01 75); font-size: var(--t-base); }
.hero__progreso { position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--s-3); z-index: 3; height: 1px; background: oklch(100% 0 0 / .25); }
.hero__barra { display: block; height: 100%; width: 100%; background: var(--papel-100); transform-origin: left; transform: scaleX(0); }
@media (max-width: 47.99rem) {
  .hero { height: 340vh; }                                   /* recorrido también en móvil, más corto */
  .hero__cap .h-sub { font-size: var(--t-2xl); }
  .hero__cap .meta { font-size: var(--t-sm); }
  .hero__copy { padding-bottom: var(--s-8); }
}
.hero__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, oklch(17% 0.008 60 / .9) 0%, oklch(17% 0.008 60 / .35) 40%, transparent 65%),
              linear-gradient(to right, oklch(17% 0.008 60 / .6) 0%, oklch(17% 0.008 60 / .25) 35%, transparent 60%),
              linear-gradient(to bottom, oklch(17% 0.008 60 / .5) 0%, transparent 25%);
}
.hero__copy { position: relative; z-index: 2; align-self: end; padding-bottom: var(--s-6); display: grid; gap: var(--s-2); min-width: 0; }
.hero__copy .eyebrow { color: oklch(86% 0.01 75); }
.hero__lead { max-width: 30rem; color: oklch(92% 0.008 80); }
.hero__pie { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-2); }
.hero__pie .indice { color: oklch(80% 0.01 75); }
.hero__scroll { font-size: var(--t-sm); letter-spacing: 0.06em; text-transform: uppercase; opacity: .85; }
[data-word] { display: inline-block; }
.hero.is-flat { height: auto; }
.hero.is-flat .hero__sticky { position: relative; height: min(100svh, 46rem); }
.hero.is-flat .hero__capitulos, .hero.is-flat .hero__progreso, .hero.is-flat .hero__canvas { display: none; }
.scrub.is-flat .scrub__cap { opacity: 1; transform: none; }
.scrub.is-flat .scrub__cap:not(:first-child) { display: none; }

/* ── Capítulos ── */
.cap__head { display: grid; gap: var(--s-2); margin-bottom: var(--s-8); }
.cap__head .lead { margin-top: var(--s-2); }

/* Salón */
.cifras { display: grid; grid-template-columns: 1fr; gap: var(--s-4); margin-bottom: var(--s-12); border-top: 1px solid var(--linea); }
@media (min-width: 48rem) { .cifras { grid-template-columns: repeat(3, 1fr); } }
.cifra { padding-top: var(--s-3); display: grid; gap: var(--s-1); }
.cifra .num { line-height: .9; }
.cifra__u { font-family: var(--f-display); font-weight: 400; font-size: var(--t-lg); color: var(--fg-2); }
.salon__foto { margin: 0; grid-column: 1 / -1; }
.salon__foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.salon__foto figcaption { margin-top: var(--s-1); }
.salon__txt { grid-column: 1 / -1; display: grid; gap: var(--s-4); align-content: start; }
@media (min-width: 60rem) { .salon__foto { grid-column: 1 / 8; } .salon__txt { grid-column: 9 / 13; } }
.ficha { margin: 0; display: grid; gap: var(--s-2); }
.ficha div { display: grid; gap: 2px; padding-top: var(--s-2); border-top: 1px solid var(--linea); }
.ficha dt { font-size: var(--t-sm); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
.ficha dd { margin: 0; color: var(--fg-2); }

/* BBQ */
/* Fila 1: texto | foto grande · Fila 2: lista | foto vertical | cifras */
.bbq__head { grid-column: 1 / -1; margin-bottom: var(--s-4); }
.bbq__foto { margin: 0; grid-column: 1 / -1; }
.bbq__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.bbq__foto figcaption { margin-top: var(--s-1); }
.bbq__lista { grid-column: 1 / -1; align-self: start; }
.bbq__cifras { grid-column: 1 / -1; display: grid; gap: var(--s-3); align-content: start; border-top: 1px solid var(--linea); }
.bbq__cifras .num { font-size: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); line-height: .9; }
@media (min-width: 60rem) {
  .bbq .grid-12 { row-gap: var(--s-12); align-items: start; }
  .bbq__head  { grid-column: 1 / 6;  grid-row: 1; margin-bottom: 0; align-self: end; }
  .bbq__foto  { grid-column: 6 / 13; grid-row: 1; }
  .bbq__lista { grid-column: 1 / 6;  grid-row: 2; }
  .bbq .bbq__foto2 { grid-column: 6 / 10; grid-row: 2; margin-top: 0; }   /* gana a la regla base declarada más abajo */
  .bbq__cifras{ grid-column: 10 / 13; grid-row: 2; }
}
.lista { list-style: none; margin: 0; padding: 0; display: grid; }
.lista li { padding: var(--s-2) 0; border-top: 1px solid var(--linea); color: var(--fg-2); }
.lista li strong { color: var(--fg); font-weight: 500; }

/* Hospedaje */
.galeria { display: grid; gap: var(--s-2); margin-bottom: var(--s-8); }
.galeria.galeria--2 { grid-template-columns: 1fr; }
@media (min-width: 48rem) {
  .galeria.galeria--2 { grid-template-columns: 1fr 1fr; align-items: start; }
  .hospedaje .galeria.galeria--2 figure img { aspect-ratio: 4 / 3; }   /* más específica que la regla nth-child de la primera galería */
}
.bbq__foto2 { margin: 0; grid-column: 1 / -1; }
.bbq__foto2 img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.galeria figure { margin: 0; }
.galeria img { width: 100%; height: 100%; object-fit: cover; }
.galeria figcaption { margin-top: var(--s-1); }
@media (min-width: 48rem) {
  .galeria { grid-template-columns: 2fr 3fr 2fr; align-items: stretch; }
  .galeria figure:nth-child(1) img, .galeria figure:nth-child(3) img { aspect-ratio: 4 / 5; }
  .galeria figure:nth-child(2) img { aspect-ratio: 16 / 10; }
}
.habitaciones { width: 100%; border-collapse: collapse; margin-bottom: var(--s-8); font-size: var(--t-base); }
.habitaciones th, .habitaciones td { text-align: left; padding: var(--s-2) var(--s-1); border-top: 1px solid var(--linea); vertical-align: top; }
.habitaciones th { font-size: var(--t-sm); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); border-top: 0; }
.habitaciones td:first-child { font-family: var(--f-display); font-size: var(--t-lg); font-weight: 400; }
@media (max-width: 47.99rem) {
  .habitaciones thead { display: none; }
  .habitaciones tr { display: grid; grid-template-columns: 1fr 1fr; gap: 2px var(--s-2); padding: var(--s-2) 0; border-top: 1px solid var(--linea); }
  .habitaciones td { border: 0; padding: 0; }
  .habitaciones td:first-child { grid-column: 1 / -1; }
  .habitaciones td:last-child { grid-column: 1 / -1; color: var(--fg-2); }
}
.amenidades, .terraza { display: grid; gap: var(--s-1); padding-top: var(--s-3); border-top: 1px solid var(--linea); margin-bottom: var(--s-4); }

/* Índices de capítulo bajo la barra (activo resaltado) */
.indices { position: absolute; left: var(--gutter); bottom: calc(var(--s-3) + 0.75rem); z-index: 3; margin: 0; padding: 0; list-style: none; display: flex; gap: var(--s-2); font-family: var(--f-display); font-size: var(--t-sm); letter-spacing: 0.08em; color: oklch(100% 0 0 / .45); }
.indices li { transition: color var(--d-base) var(--ease); }
.indices li.is-on { color: var(--papel-100); }
.is-flat .indices { display: none; }
@media (max-width: 47.99rem) { .indices { display: none; } }   /* en móvil chocan con el pie del hero; queda la barra */

/* Botón flotante de WhatsApp (decisión del cliente 2026-09-24): discreto, un solo CTA por pantalla */
.wa-flotante {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 30;
  width: 3.5rem; height: 3.5rem; display: grid; place-items: center;
  border-radius: 50%;                                   /* solo para el foco de teclado */
  filter: drop-shadow(0 6px 16px oklch(17% 0.008 60 / .3));
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity var(--d-base) var(--ease), transform var(--d-base) var(--ease);
}
.wa-flotante svg { width: 100%; height: 100%; transition: transform var(--d-fast) var(--ease); }
.wa-flotante.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.wa-flotante:hover svg { transform: scale(1.06); }
@media (max-width: 47.99rem) {
  .wa-flotante { opacity: 1; transform: none; pointer-events: auto; }   /* en móvil siempre visible */
  .nav .btn--nav { display: none; }                                      /* y sustituye al botón de la nav */
}

/* Scrub secundario (hospedaje): mismo mecanismo que el hero, recorrido más corto */
.scrub { position: relative; height: 400vh; color: var(--papel-100); background: var(--piedra-900); margin-bottom: var(--s-12); }
.scrub__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); }
.scrub__media { position: absolute; inset: 0; background: var(--piedra-900); }
.scrub__poster, .scrub__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scrub__canvas { opacity: 0; transition: opacity var(--d-slow) var(--ease); }
.scrub__canvas.is-listo { opacity: 1; }
.scrub__media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, oklch(17% 0.008 60 / .6) 0%, oklch(17% 0.008 60 / .25) 35%, transparent 60%),
              linear-gradient(to top, oklch(17% 0.008 60 / .6) 0%, transparent 35%); }
.scrub__caps { position: absolute; inset: 0; z-index: 2; display: grid; align-content: center; pointer-events: none; }
.scrub__cap { grid-area: 1 / 1; display: grid; gap: var(--s-1); max-width: 28rem; opacity: 0; transform: translateY(24px); will-change: transform, opacity; }
.scrub__cap .indice { font-size: var(--t-num); line-height: .9; color: var(--papel-100); font-weight: 300; letter-spacing: var(--track-display); }
.scrub__cap .h-sub { font-weight: 300; font-size: var(--t-xl); text-transform: uppercase; letter-spacing: 0.02em; }
.scrub__cap .meta { color: oklch(86% 0.01 75); font-size: var(--t-base); }
.scrub__progreso { position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--s-3); z-index: 3; height: 1px; background: oklch(100% 0 0 / .25); }
.scrub__barra { display: block; height: 100%; width: 100%; background: var(--papel-100); transform-origin: left; transform: scaleX(0); }
/* Móvil: mismo recorrido, más corto y con leyendas compactas */
@media (max-width: 47.99rem) {
  .scrub { height: 320vh; }
  .scrub__cap .indice { font-size: var(--t-2xl); }
  .scrub__cap .h-sub { font-size: var(--t-lg); }
  .scrub__cap .meta { font-size: var(--t-sm); }
}
.scrub.is-flat { height: auto; }
.scrub.is-flat .scrub__sticky { position: relative; height: min(100svh, 40rem); }
.scrub.is-flat .scrub__canvas, .scrub.is-flat .scrub__progreso { display: none; }
.scrub.is-flat .scrub__cap { opacity: 1; transform: none; }
.scrub.is-flat .scrub__cap:not(:first-child) { display: none; }

/* Reservar */
.reservar { background: var(--bg-hundido); }
.reservar__head { grid-column: 1 / -1; }
.form { grid-column: 1 / -1; display: grid; gap: var(--s-3); align-content: start; }
@media (min-width: 60rem) { .reservar__head { grid-column: 1 / 6; } .form { grid-column: 7 / 13; } }
.form__fechas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.form__error { color: oklch(45% 0.15 25); }

/* Íconos de redes (Instagram, WhatsApp): trazo propio, 1.6px, sin sets mezclados */
.nav__acciones { display: flex; align-items: center; gap: var(--s-2); }
.red { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid currentColor; opacity: .85; transition: opacity var(--d-fast) var(--ease), background var(--d-base) var(--ease); }
.red:hover { opacity: 1; background: oklch(50% 0.01 60 / .12); }
.pie__redes { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-2); align-items: center; }

/* Pie */
.pie { padding: var(--s-8) 0; border-top: 1px solid var(--linea); }
.pie__grid { display: grid; gap: var(--s-4); }
@media (min-width: 60rem) { .pie__grid { grid-template-columns: 1fr 1fr; } .pie__nota { grid-column: 1 / -1; } }
.pie__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.pie__links a { border-bottom: 1px solid var(--linea); transition: border-color var(--d-base) var(--ease); }
.pie__links a:hover { border-color: var(--fg); }