/* QA — estilo A con: WhatsApp en header y hero, Actividades ocultas por ahora,
   y Cómo llegar · Instagram · Reservas en una sola fila. Se carga después de a.css. */
.a-header__right { display: flex; align-items: center; gap: 36px; }
.a-header__right .menu-btn { margin-left: -12px; }
.btn--lagoon { background: var(--lagoon); color: var(--cream); margin-top: 24px; }

.contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-top: 128px; padding-bottom: 128px; align-items: stretch; }
.contact .h2 { font-size: 40px; }
.contact__col { display: flex; flex-direction: column; min-width: 0; }
.contact__col p { color: var(--ink); line-height: 1.6; }
.contact .where__map { width: 100%; height: 300px; border: 0; border-radius: 20px; margin: 24px 0 20px; background: var(--sand); }
.contact .ig__handle { font-size: 30px; margin: 12px 0 24px; }
.contact .ig__grid { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 24px; }
.contact .btn--line { align-self: flex-start; margin-top: auto; }
.contact .btn--lagoon { align-self: flex-start; margin-top: auto; }
.contact .rsv { padding: 36px; }
.contact .rsv .btn { max-width: none; }

@media (max-width: 1100px) and (min-width: 768px) {
  .contact { grid-template-columns: 1fr 1fr; }
  .contact .rsv { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
  .a-header__right { gap: 4px; }
  .a-wa { width: 44px; min-height: 44px; padding: 0; font-size: 22px; }
  .a-wa__txt { display: none; }
  .a-header__right .menu-btn { margin-left: 0; }
  .a-hero__cta .btn--line-light { display: inline-flex; }
  .contact { grid-template-columns: 1fr; gap: 48px; padding: 80px 20px 100px; }
  .contact .h2 { font-size: 34px; }
  .contact .where__map { height: 230px; }
  .contact .rsv { padding: 32px 24px; }
}

/* La foto de día tiene cielo muy claro: más scrim arriba y abajo para que el texto crema se lea */
.a-hero .hero__scrim { background: linear-gradient(180deg, rgba(20, 30, 28, .6) 0%, rgba(20, 30, 28, .2) 28%, rgba(20, 30, 28, .22) 50%, rgba(20, 30, 28, .78) 100%); }

/* Movimiento suave: scroll de anclas + aparición al entrar en pantalla (shared.js: data-reveal, una sola vez) */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 24px; }
.js [data-reveal] { opacity: 0; transform: translateY(36px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
/* las 3 columnas de contacto entran escalonadas */
.contact [data-reveal]:nth-child(2) { transition-delay: .12s; }
.contact [data-reveal]:nth-child(3) { transition-delay: .24s; }
.btn { transition: transform .35s var(--ease-out), background-color .25s, color .25s, border-color .25s, box-shadow .35s; }
.btn:hover { box-shadow: 0 8px 20px rgba(27, 38, 34, .18); }
@media (max-width: 767.98px) { .js [data-reveal] { transform: translateY(28px); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js [data-reveal] { opacity: 1; transform: none; } }

/* Hero nunca más alto que la pantalla: se ven título y botones sin scrollear */
.a-hero { height: min(860px, 100svh); min-height: 560px; }
@media (max-width: 767.98px) { .a-hero { height: min(760px, 100svh); } }

/* Galería (desktop): carrusel horizontal. Patrón: 1 foto grande + 2 chicas apiladas, repetido.
   Con 10 fotos: grande · 2 · grande · 2 · grande · 2 · grande. En mobile sigue el carrusel de 1 foto. */
@media (min-width: 768px) {
  .gallery { display: block; position: relative; }
  .g-track { position: relative; display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, 250px);
    grid-template-columns: 560px 300px 560px 300px 560px 300px 560px; gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-right: -80px; padding-right: 80px; }              /* la tira sale hasta el borde derecho */
  .g-track::-webkit-scrollbar { display: none; }
  .g-track .g-item { grid-row: auto; scroll-snap-align: start; }
  .g-track .g-item:nth-child(3n + 1) { grid-row: span 2; }
  .car-btn { display: grid; place-items: center; position: absolute; top: -76px; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--night); background: transparent; color: var(--night); font-size: 22px; transition: background-color .2s, opacity .2s; }
  .car-btn:hover:not(:disabled) { background: rgba(27, 38, 34, .08); }
  .car-btn:disabled { opacity: .3; cursor: default; }
  .car-btn--prev { right: 60px; }
  .car-btn--next { right: 0; }
}

/* Botón "volver arriba": desktop abajo a la derecha; mobile apilado encima del WhatsApp flotante.
   Aro crema: se ve igual sobre fondos claros (crema) y oscuros (footer, reservas). */
.to-top { position: fixed; right: 28px; bottom: 28px; z-index: 40; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--night); color: var(--cream); border: 2px solid var(--cream); box-shadow: 0 8px 22px rgba(27, 38, 34, .35); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s, transform .35s var(--ease-out), visibility 0s .3s, background-color .2s; --focus: var(--lagoon); }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-top:hover { background: var(--lagoon); }
@media (max-width: 767.98px) { .to-top { right: 22px; bottom: 92px; width: 44px; height: 44px; } } /* WhatsApp: 56px a bottom 20px → queda 16px de aire */

/* El eyebrow lleva sombra para leerse sobre la foto del hero. */
.a-hero .eyebrow { font-weight: 700; text-shadow: 0 1px 12px rgba(20, 30, 28, .6); }

/* Menos aire entre secciones: hero → El parador → Galería → Contacto */
.parador { padding: 80px 80px 48px; }
.sec { padding-top: 48px; }
.contact { padding-top: 88px; padding-bottom: 96px; }
@media (max-width: 767.98px) {
  .parador { padding: 52px 20px 36px; gap: 28px; }
  .sec { padding-top: 36px; }
  .contact { padding: 64px 20px 84px; }
}

/* Video junto a "El parador": 16:9 (desktop se centra en la columna; mobile va debajo del texto) */
.parador__video { height: auto; aspect-ratio: 16 / 9; background: var(--night); }

/* Botones de WhatsApp en verde (antes terracota) */
:root { --wa: #1A8550; --wa-hover: #146B41; }
.btn--accent, .rsv .btn, .wa-float { background: var(--wa); color: #fff; }
.btn--accent:hover, .rsv .btn:hover, .wa-float:hover { background: var(--wa-hover); }
.rsv .btn { border-color: rgba(242, 237, 227, .55); }  /* sobre el azul de la laguna el verde necesita borde */
.car-dot.is-active { background: var(--wa); }