/* ===============================================================
   SOL BEACH · v2  ·  Editorial Light Cream + Puente Romano hero
   Paleta: blanco cálido + marrón claro + turquesa del logo
   =============================================================== */

/* ------------------ TOKENS ------------------ */
:root{
  --bg:         #FEFCF9;
  --bg-alt:     #F3EBE0;
  --bg-warm:    #F7EFE4;
  --ink:        #6B5A49;
  --ink-mute:   #A2907C;
  --ink-strong: #4A3E32;
  --accent:     #8A7461;
  --turquoise:  #8FBFB0;
  --turq-soft:  #B7D6CC;
  --white:      #FFFFFF;
  --hairline:   rgba(107,90,73,0.18);

  --serif:      "Cormorant Garamond", "Fraunces", Georgia, serif;
  --sans:       "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap:       1200px;
  --wrap-wide:  1360px;
  --wrap-narrow: 780px;

  --radius:     2px;

  --ease:       cubic-bezier(.22,.61,.36,1);
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --dur:        .6s;

  --nav-h:      72px;
}

/* ------------------ RESET ------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
}

/* Sutil textura de fondo (manchas muy suaves — efecto tikitano) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1200px 800px at 10% 10%, rgba(143,191,176,.045), transparent 60%),
    radial-gradient(900px 700px at 90% 30%, rgba(183,161,136,.06), transparent 60%),
    radial-gradient(1000px 900px at 50% 100%, rgba(143,191,176,.035), transparent 55%);
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
.container-narrow { max-width: var(--wrap-narrow); }
.container-wide { max-width: var(--wrap-wide); }

.skip-link {
  position: absolute; left: 0; top: -60px;
  padding: 10px 16px; background: var(--ink); color: var(--white); z-index: 1000;
  transition: top .2s;
}
.skip-link:focus { top: 0; }

/* ------------------ TYPOGRAPHY ------------------ */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 300; color: var(--ink-strong); margin: 0; letter-spacing: .01em; }
p { margin: 0 0 1em; }
em { font-style: italic; font-family: var(--serif); font-weight: 300; }

.kicker {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 0 0 6px;
  position: relative;
}
.kicker::before {
  content: "";
  display: inline-block;
  width: 32px; height: 1px;
  background: var(--turquoise);
  vertical-align: middle;
  margin-right: 14px;
  transform: translateY(-2px);
}

.eyebrow {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.section-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -.003em;
  color: var(--ink-strong);
}
.section-title em { color: var(--ink); }

.section-lead {
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.85;
  color: var(--ink);
  max-width: 62ch;
}

/* Bilingüe */
[data-lang="es"] .en { display: none !important; }
[data-lang="en"] .es { display: none !important; }

/* Ancla-scroll: cuando se pulsa un enlace del nav, deja aire bajo la barra fija */
#quienes, #carta, #musica, #eventos, #galeria, #contacto {
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
/* El logo del intro tiene su propio ancla y necesita más aire (queda arriba,
   sin que el fade del hero se cuele visualmente por detrás del nav) */
#quienes {
  scroll-margin-top: calc(var(--nav-h) + 40px);
}

/* ------------------ REVEAL ------------------
   Estado inicial oculto → GSAP anima al entrar en viewport.
   Si JS no carga, el safety net del propio JS los muestra a los 6s.
   Si el usuario prefiere reduce-motion, los pintamos ya visibles. */
.reveal { opacity: 0; transform: translateY(16px); will-change: opacity, transform; }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-split] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ------------------ BUTTONS ------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  padding: 14px 26px;
  border: 1px solid var(--ink);
  color: var(--ink-strong);
  background: transparent;
  border-radius: 999px;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
  cursor: pointer;
  line-height: 1;
}
.btn:hover { background: var(--ink); color: var(--white); }
.btn-solid { background: var(--ink-strong); color: var(--white); border-color: var(--ink-strong); }
.btn-solid:hover { background: var(--accent); border-color: var(--accent); }
.btn-turq { background: var(--turquoise); border-color: var(--turquoise); color: #ffffff; }
.btn-turq:hover { background: #7BB0A0; border-color: #7BB0A0; }
.btn-ghost-light { color: var(--white); border-color: rgba(255,255,255,.7); }
.btn-ghost-light:hover { background: var(--white); color: var(--ink-strong); border-color: var(--white); }
.btn-lg { padding: 17px 34px; font-size: 12.5px; letter-spacing: .3em; }
.btn-block { display: flex; width: 100%; }

/* ------------------ NAV ------------------ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  transition: background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  background: transparent;
  border-bottom: 1px solid transparent;
}
.nav-inner {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
}

.nav-links {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: clamp(16px, 2.2vw, 30px);
  font-family: var(--sans);
  font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 400;
  align-items: center;
}
.nav-links li { white-space: nowrap; }
.nav-links a { color: var(--white); transition: color .3s, opacity .3s; opacity: .92; white-space: nowrap; }
.nav-links a:hover { opacity: 1; }

.nav-center { display: flex; justify-content: center; align-items: center; }

.nav-logo {
  display: block;
  width: 130px;
  aspect-ratio: 4484 / 1004;
  -webkit-mask: url("assets/img/logo.svg") center/contain no-repeat;
          mask: url("assets/img/logo.svg") center/contain no-repeat;
  background-color: var(--white);
  opacity: 0;
  transition: opacity .4s var(--ease), background-color .4s var(--ease);
}

.nav-right {
  display: flex; justify-content: flex-end; align-items: center; gap: 14px;
}
.lang-btn {
  font-family: var(--sans);
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase; font-weight: 500;
  color: var(--white);
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 999px;
  transition: background .3s, color .3s, border-color .3s;
}
.lang-btn:hover { background: var(--white); color: var(--ink-strong); border-color: var(--white); }

.btn-reserva-nav {
  font-family: var(--sans);
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase; font-weight: 500;
  color: var(--white);
  padding: 10px 22px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 999px;
  transition: background .35s, color .35s, border-color .35s;
}
.btn-reserva-nav:hover { background: var(--white); color: var(--ink-strong); border-color: var(--white); }

.nav.is-scrolled {
  background: rgba(254,252,249,.92);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom-color: var(--hairline);
}
.nav.is-scrolled .nav-links a,
.nav.is-scrolled .lang-btn,
.nav.is-scrolled .btn-reserva-nav { color: var(--ink-strong); }
.nav.is-scrolled .lang-btn { border-color: var(--hairline); }
.nav.is-scrolled .lang-btn:hover { background: var(--ink-strong); color: var(--white); border-color: var(--ink-strong); }
.nav.is-scrolled .btn-reserva-nav { border-color: var(--ink); background: transparent; }
.nav.is-scrolled .btn-reserva-nav:hover { background: var(--ink); color: var(--white); }
.nav.is-scrolled .nav-logo { opacity: 1; background-color: var(--turquoise); }

.nav-burger {
  display: none;
  width: 44px; height: 44px;
  padding: 12px 10px;
  flex-direction: column; justify-content: space-between;
  cursor: pointer;
}
.nav-burger span {
  display: block;
  height: 1.5px;
  background: var(--white);
  transition: transform .35s var(--ease), opacity .3s, background .3s;
}
.nav.is-scrolled .nav-burger span { background: var(--ink-strong); }
.nav.is-open .nav-burger span:nth-child(1) { transform: translateY(8.25px) rotate(45deg); }
.nav.is-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav-burger span:nth-child(3) { transform: translateY(-8.25px) rotate(-45deg); }

/* ------------------ HERO (patrón Puente Romano) ------------------ */
.hero {
  position: relative;
  height: 62vh;
  min-height: 460px;
  max-height: 780px;
  overflow: hidden;
  background: #2a2119;
}
.hero-media {
  position: absolute; inset: 0;
  will-change: transform;
}
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 52%;
  transform: scale(1.02);
}
.hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.05) 40%, rgba(0,0,0,.15) 100%);
}
/* Degradado suave hacia el blanco: funde la arena con el bloque siguiente.
   Curva más larga y stops más suaves para que la transición no marque línea. */
.hero-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 140px;
  background: linear-gradient(to top,
    var(--bg) 0%,
    rgba(254,252,249,.98) 20%,
    rgba(254,252,249,.75) 45%,
    rgba(254,252,249,.35) 75%,
    transparent 100%);
  pointer-events: none;
  z-index: 3;
}

.hero-intro {
  /* Padding-top reducido para acercar el bloque a la arena de la foto */
  padding: clamp(8px, 1.5vw, 18px) 0 clamp(46px, 6vw, 80px);
  text-align: center;
  position: relative;
}
.hero-intro-logo { margin-top: 0; }
.hero-intro-inner { max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 clamp(20px, 4vw, 32px); position: relative; z-index: 1; }

/* Logo turquesa que preside el bloque */
.hero-intro-logo {
  display: block;
  margin: 0 auto 22px;
  width: min(58vw, 340px);
  aspect-ratio: 4484 / 1004;
  -webkit-mask: url("assets/img/logo.svg") center/contain no-repeat;
          mask: url("assets/img/logo.svg") center/contain no-repeat;
  background-color: var(--turquoise);
}

.hero-intro-eyebrow {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}

/* Título y párrafo del hero comparten el MISMO max-width para
   quedar visualmente alineados como bloque. */
.hero-title,
.hero-intro-text {
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}

.hero-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  line-height: 1.25;
  letter-spacing: -.003em;
  color: var(--ink-strong);
  margin-top: 0;
  margin-bottom: 22px;
  white-space: nowrap;
}
.hero-title em { color: var(--ink); font-style: italic; }

.hero-intro-text {
  font-size: clamp(.95rem, 1.05vw, 1.02rem);
  line-height: 1.85;
  color: var(--ink);
  margin-top: 0;
  margin-bottom: 32px;
}

/* En pantallas estrechas relajamos el nowrap para que no se corte */
@media (max-width: 720px) {
  .hero-title { white-space: normal; font-size: clamp(1.35rem, 4vw, 1.7rem); }
}

.hero-actions { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

.divider {
  width: 60px; height: 1px;
  background: var(--turquoise);
  margin: 32px auto;
  display: block;
  position: relative;
}
.divider::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: 6px; height: 6px;
  background: var(--turquoise);
  border-radius: 50%;
}

.strip {
  padding: 60px 0;
  text-align: center;
  background: var(--bg-alt);
  position: relative;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
}
.strip > .strip-inner { position: relative; z-index: 1; }
.strip-inner { max-width: 780px; margin: 0 auto; padding: 0 24px; }
.strip-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  color: var(--ink-strong);
  line-height: 1.35;
  margin: 0;
}

/* ------------------ SECTION SHELL ------------------ */
.section { padding: clamp(56px, 7vw, 100px) 0; position: relative; }
.section-alt { background: var(--bg-warm); }
.section-header { text-align: center; margin: 0 auto clamp(32px, 4vw, 52px); max-width: 720px; }
.section-header .section-title { margin: 12px 0 16px; }

/* ------------------ FOTO CON MARCO GEOMÉTRICO ------------------ */
.framed {
  position: relative;
  isolation: isolate;
}
.framed::before {
  content: "";
  position: absolute;
  inset: 12px -12px -12px 12px;
  border: 1px solid var(--turquoise);
  z-index: 0;
  pointer-events: none;
  transition: inset .5s var(--ease);
}
.framed .framed-img {
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 100%; height: 100%;
}
.framed .framed-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.framed:hover::before { inset: 8px -8px -8px 8px; }
.framed:hover .framed-img img { transform: scale(1.03); }

.framed--right::before {
  inset: 12px 12px -12px -12px;
}
.framed--right:hover::before { inset: 8px 8px -8px -8px; }

@media (max-width: 700px) {
  .framed::before, .framed--right::before {
    inset: 8px -8px -8px 8px;
  }
  .framed--right::before {
    inset: 8px 8px -8px -8px;
  }
}

/* ------------------ CARTA ------------------ */
.menu-sec { padding: clamp(60px, 7vw, 110px) 0; background: var(--bg); }
.menu-header { text-align: center; margin: 0 auto 48px; max-width: 720px; }
.menu-intro-text {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--ink);
  margin: 20px auto 22px;
  max-width: 60ch;
}
.menu-note {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-family: var(--sans);
  font-weight: 400;
  margin: 0;
}

.menu-mobile-nav { display: none; margin-bottom: 32px; }
.menu-select {
  width: 100%;
  padding: 14px 18px;
  background: var(--white);
  border: 1px solid var(--hairline);
  color: var(--ink-strong);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath fill='none' stroke='%236B5A49' stroke-width='1.4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}

.menu-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: flex-start;
}
.menu-tabs-col {
  position: sticky; top: calc(var(--nav-h) + 20px);
  display: flex; flex-direction: column;
  border-top: 1px solid var(--hairline);
}
.menu-tab {
  padding: 18px 4px;
  text-align: left;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.05rem;
  color: var(--ink-mute);
  border-bottom: 1px solid var(--hairline);
  transition: color .3s, padding-left .3s;
  position: relative;
}
.menu-tab::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 0; height: 1px;
  background: var(--turquoise);
  transform: translateY(-50%);
  transition: width .35s var(--ease);
}
.menu-tab:hover { color: var(--ink); padding-left: 8px; }
.menu-tab.is-active {
  color: var(--ink-strong);
  font-weight: 400;
  padding-left: 24px;
}
.menu-tab.is-active::before { width: 16px; }

.menu-panels-col { min-height: 400px; }
.menu-panel { display: none; animation: menuFade .5s var(--ease-out); }
.menu-panel.is-active { display: block; }
@keyframes menuFade {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.panel-cat-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: var(--ink-strong);
  margin: 0 0 8px;
  letter-spacing: .01em;
}
.panel-note {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 26px;
}
.menu-list { list-style: none; padding: 0; margin: 26px 0 0; }
.menu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
}
.menu-item:last-child { border-bottom: 0; }
.mi-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.12rem;
  color: var(--ink-strong);
  margin: 0;
  line-height: 1.3;
}
.mi-desc {
  font-family: var(--sans);
  font-weight: 300;
  font-size: .88rem;
  color: var(--ink-mute);
  margin: 4px 0 0;
  line-height: 1.55;
  max-width: 56ch;
}
.mi-price {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--accent);
  align-self: start;
  padding-top: 2px;
  white-space: nowrap;
}

/* ------------------ MÚSICA (foto grande) ------------------ */
.music-sec {
  padding: clamp(52px, 6vw, 90px) 0;
  background: var(--bg-warm);
  position: relative;
}
.music-inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
  position: relative; z-index: 1;
}
.music-img-wrap { aspect-ratio: 4/3; width: 100%; }
.music-content .section-title { margin: 12px 0 18px; }
.music-body { margin-bottom: 24px; }
.music-body {
  font-size: 1rem;
  line-height: 1.85;
  max-width: 46ch;
  margin: 0 0 32px;
}
.music-days { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  padding: 8px 16px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink);
  background: var(--white);
}
.chip--accent {
  color: var(--white);
  background: var(--turquoise);
  border-color: var(--turquoise);
}

/* ------------------ EVENTOS ------------------ */
.events-sec { padding: clamp(52px, 6vw, 90px) 0 clamp(30px, 4vw, 50px); background: var(--bg); position: relative; }
.events-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
  margin-bottom: clamp(36px, 4vw, 60px);
  position: relative; z-index: 1;
}
.events-content .section-title { margin: 12px 0 18px; }
.events-body { max-width: 48ch; margin-bottom: 22px; }
.events-list {
  list-style: none; padding: 0; margin: 0 0 32px;
  display: grid; gap: 10px;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--ink-strong);
}
.events-list li {
  padding-left: 20px;
  position: relative;
}
.events-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 13px;
  width: 8px; height: 1px;
  background: var(--turquoise);
}
.events-img-wrap { aspect-ratio: 4/3; width: 100%; }

/* ---- EVENTOS · composición 2 fotos superpuestas ---- */
.events-img-duo {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: visible;
}
/* GRANDE de fondo — usa .framed (marco offset turquesa + hover-zoom).
   overflow visible en el propio contenedor para que el frame asome. */
.events-img-duo-back {
  position: absolute;
  top: 0; left: 0;
  width: 80%;
  height: 86%;
  overflow: visible;
}
/* PEQUEÑA overlay con marco crema.
   Border en el propio contenedor (no padding + inner div) → marco perfectamente
   simétrico por definición y sin problemas de zoom. */
.events-img-duo-front {
  position: absolute;
  right: 0;
  bottom: -24px;                     /* bajada ~24px para no cortar el chiringuito */
  width: 44%;
  height: 50%;
  border: 8px solid var(--bg);       /* marco crema, mismos 8px por los 4 lados */
  background: var(--bg);
  box-shadow: 0 8px 24px rgba(74,62,50,.14);
  z-index: 2;
  box-sizing: border-box;
  overflow: hidden;                  /* clip del zoom */
}
.events-img-duo-front img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  /* Mismo hover que la foto de Música en vivo */
  transition: transform .8s var(--ease-out);
}
.events-img-duo-front:hover img { transform: scale(1.03); }

/* Móvil: reducir superposición y bajada */
@media (max-width: 700px) {
  .events-img-duo-back  { width: 88%; height: 80%; }
  .events-img-duo-front { width: 52%; height: 46%; border-width: 6px; bottom: -16px; }
}

/* Wrapper exterior: caja crema con borde gris fino. Su PADDING = el offset
   del marco turquesa. El marco vive en un div interior REAL (border sobre
   .events-form-inner), no en un pseudo-elemento → imposible que desborde. */
.events-form-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 16px;                       /* margen del marco turquesa por los 4 lados */
  background: var(--bg-warm);
  border: 1px solid var(--hairline);
  box-sizing: border-box;
}
.events-form-inner {
  border: 1px solid var(--turquoise);  /* el marco turquesa REAL */
  padding: clamp(22px, 4vw, 46px);     /* padding del contenido dentro del marco */
  box-sizing: border-box;
}
.events-form-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: var(--ink-strong);
  text-align: center;
  margin: 0 0 8px;
  line-height: 1.15;
}
.events-form-lead {
  text-align: center;
  color: var(--ink-mute);
  font-size: .95rem;
  margin: 0 0 36px;
  max-width: 52ch;
  margin-left: auto; margin-right: auto;
}

/* ------------------ FORMS ------------------ */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field-full { grid-column: 1 / -1; }
.field label {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--hairline);
  color: var(--ink-strong);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  border-radius: 2px;
  transition: border-color .3s, box-shadow .3s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--turquoise);
  box-shadow: 0 0 0 3px rgba(143,191,176,.15);
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath fill='none' stroke='%236B5A49' stroke-width='1.4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}
.field textarea { resize: vertical; min-height: 90px; font-family: var(--sans); }
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-mute); opacity: .6; }

.check {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; line-height: 1.5;
  color: var(--ink);
}
.check input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--turquoise); }
.check a { color: var(--ink-strong); text-decoration: underline; text-decoration-color: var(--turquoise); text-underline-offset: 3px; }

.form-notice {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-mute);
  line-height: 1.55;
  padding: 14px 16px;
  background: rgba(143,191,176,.08);
  border-left: 2px solid var(--turquoise);
  margin: 24px 0 20px;
}

.form-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 4px;
}

/* ------------------ GALERÍA — CARRUSEL HORIZONTAL ------------------
   Todas las fotos misma ALTURA, ancho natural (sin recortar aspecto).
   Dos líneas turquesa (top/bottom), sin bordes laterales.
   Desktop: auto-scroll continuo (pausa al hover).
   Móvil/touch: swipe manual con overflow-x.
------------------------------------------------------------------- */
.gallery-sec { padding: clamp(30px, 3.5vw, 56px) 0 clamp(56px, 6vw, 90px); background: var(--bg); position: relative; }

/* Contenedor con las dos líneas turquesa. Base: touch = swipe. */
.carousel {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 14px 0;
  border-top: 1px solid var(--turquoise);
  border-bottom: 1px solid var(--turquoise);
  z-index: 1;
  /* Fundido lateral hacia el color de fondo, para que las fotos "aparezcan"
     por la izquierda y "desaparezcan" por la derecha. */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0,
    black clamp(40px, 8vw, 120px),
    black calc(100% - clamp(40px, 8vw, 120px)),
    transparent 100%);
          mask-image: linear-gradient(to right,
    transparent 0,
    black clamp(40px, 8vw, 120px),
    black calc(100% - clamp(40px, 8vw, 120px)),
    transparent 100%);
}
.carousel::-webkit-scrollbar { display: none; }

.carousel-track {
  display: flex;
  gap: 10px;
  width: max-content;
  will-change: transform;
}

.carousel-item {
  flex: 0 0 auto;
  height: clamp(220px, 30vw, 340px);
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--bg-alt);
  isolation: isolate;
  margin: 0;   /* reset del margin por defecto de <figure> */
  padding: 0;
}
.carousel-item img {
  height: 100%;
  width: auto;
  display: block;
  transition: transform 1s var(--ease-out);
  pointer-events: none;   /* clic pasa a la figure */
}

/* Overlay oscuro suave + icono "ampliar" al hover */
.carousel-item::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(30,25,20,.24);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
  z-index: 1;
}
.carousel-zoom {
  position: absolute;
  top: 50%; left: 50%;
  width: 42px; height: 42px;
  transform: translate(-50%,-50%) scale(.85);
  background: rgba(254,252,249,.95);
  color: var(--ink-strong);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .35s var(--ease), transform .45s var(--ease);
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 4px 18px rgba(30,25,20,.15);
}
.carousel-zoom svg { width: 18px; height: 18px; display: block; }

.carousel-item:hover img { transform: scale(1.06); }
.carousel-item:hover::after { opacity: 1; }
.carousel-item:hover .carousel-zoom { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.carousel-item:focus-visible .carousel-zoom { opacity: 1; transform: translate(-50%,-50%) scale(1); }

/* Clones (añadidos por JS para el bucle infinito) */
.carousel-item.is-clone { pointer-events: auto; }

/* Animación de bucle: mueve exactamente 1 "juego" (50% del track duplicado) */
@keyframes carouselScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Desktop hover-capable: auto-scroll continuo */
@media (hover: hover) and (pointer: fine) {
  .carousel {
    overflow: hidden;
  }
  .carousel-track {
    animation: carouselScroll 80s linear infinite;
  }
  .carousel:hover .carousel-track,
  .carousel:focus-within .carousel-track {
    animation-play-state: paused;
  }
}

/* Reduced motion: sin animación */
@media (prefers-reduced-motion: reduce) {
  .carousel-track { animation: none !important; }
  .carousel { overflow-x: auto; }
}

/* Touch / mobile: sin clones, sin animación, ocultamos zoom icon */
@media (hover: none), (max-width: 960px) {
  .carousel-item.is-clone { display: none; }
  .carousel-zoom { display: none; }
}


.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(30,25,20,.94);
  padding: 60px 40px;
}
.lightbox.is-open { display: flex; }
.lightbox-img {
  max-width: min(1200px, 92vw);
  max-height: 84vh;
  width: auto; height: auto;
  border: 1px solid rgba(255,255,255,.12);
  object-fit: contain;
}
.lightbox-btn {
  position: absolute;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s;
}
.lightbox-btn:hover { background: rgba(255,255,255,.22); }
.lightbox-close { top: 24px; right: 24px; }
.lightbox-prev { top: 50%; left: 24px; transform: translateY(-50%); }
.lightbox-next { top: 50%; right: 24px; transform: translateY(-50%); }

/* ------------------ CONTACTO ------------------ */
.contact-sec { padding: clamp(60px, 7vw, 100px) 0; background: var(--bg-warm); position: relative; }
.contact-sec > .container { position: relative; z-index: 1; }
.contact-map-wrap {
  width: 100%;
  aspect-ratio: 16/6;
  min-height: 320px;
  overflow: hidden;
  margin-bottom: 50px;
  border: 1px solid var(--hairline);
  filter: sepia(6%) contrast(.98) saturate(.9);
}
.contact-map-wrap iframe { width: 100%; height: 100%; border: 0; }
.contact-info-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.contact-info-block {
  padding: 0;
  text-align: left;
}
.contact-info-block h3 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}
.contact-info-main {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.35rem;
  color: var(--ink-strong);
  margin: 0 0 6px;
  line-height: 1.3;
}
.contact-info-time {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 300;
  color: var(--turquoise);
  margin: 0 0 6px;
  line-height: 1;
  letter-spacing: .02em;
}
.contact-info-sub {
  font-size: 13px;
  color: var(--ink-mute);
  margin: 0;
}
.contact-address { font-style: normal; }
.contact-address p {
  margin: 0 0 2px;
  color: var(--ink);
  line-height: 1.5;
}
.contact-map-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--turquoise);
  border-bottom: 1px solid var(--turquoise);
  padding-bottom: 3px;
  transition: color .3s, border-color .3s;
}
.contact-map-link:hover { color: var(--accent); border-color: var(--accent); }

.contact-info-phone {
  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--ink-strong);
  margin: 0 0 14px;
  letter-spacing: .01em;
}
.contact-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.contact-btns .btn { padding: 12px 20px; font-size: 11px; }
.icon { width: 14px; height: 14px; }

/* ------------------ FOOTER ------------------ */
.footer {
  background: var(--ink-strong);
  color: rgba(254,252,249,.78);
  padding: 70px 0 40px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 40px;
  align-items: flex-start;
}
.footer-logo {
  width: 200px;
  aspect-ratio: 4484 / 1004;
  -webkit-mask: url("assets/img/logo.svg") center/contain no-repeat;
          mask: url("assets/img/logo.svg") center/contain no-repeat;
  background-color: var(--turquoise);
  margin-bottom: 20px;
}
.footer-tagline {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(254,252,249,.6);
  margin: 0;
}

.footer-col h4 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--turquoise);
  margin: 0 0 18px;
}
.footer-col p, .footer-col a {
  font-size: 14px;
  line-height: 1.75;
  margin: 0 0 4px;
  color: rgba(254,252,249,.78);
}
.footer-col a { display: inline-block; transition: color .3s; }
.footer-col a:hover { color: var(--turquoise); }

.footer-social {
  display: flex; gap: 10px; margin-top: 8px;
}
.footer-social a {
  width: 40px; height: 40px;
  border: 1px solid rgba(254,252,249,.2);
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
  transition: background .3s, border-color .3s;
}
.footer-social a:hover { background: var(--turquoise); border-color: var(--turquoise); }

.footer-bottom {
  margin-top: 50px;
  padding-top: 26px;
  border-top: 1px solid rgba(254,252,249,.1);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  font-size: 12px;
  color: rgba(254,252,249,.55);
  letter-spacing: .05em;
}
.footer-bottom nav { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-bottom a { color: rgba(254,252,249,.65); transition: color .3s; }
.footer-bottom a:hover { color: var(--turquoise); }

/* ------------------ MODAL ------------------ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(30,25,20,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal.is-open { display: flex; animation: modalFade .35s var(--ease-out); }
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--hairline);
  padding: clamp(30px, 5vw, 48px);
  animation: modalSlide .5s var(--ease-out);
}
@keyframes modalSlide { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

.modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  transition: background .3s;
}
.modal-close:hover { background: var(--bg-alt); }

.modal-eyebrow {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--turquoise);
  margin: 0 0 10px;
  text-align: center;
}
.modal-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2rem);
  color: var(--ink-strong);
  text-align: center;
  line-height: 1.15;
  margin: 0 0 8px;
}
.modal-lead {
  text-align: center;
  color: var(--ink-mute);
  font-size: .95rem;
  margin: 0 0 28px;
  line-height: 1.55;
}

/* ------------------ COOKIE BANNER ------------------ */
.cookie-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 800;
  padding: 18px 20px;
  background: rgba(74,62,50,.97);
  color: var(--bg);
  transform: translateY(100%);
  transition: transform .5s var(--ease-out);
  border-top: 1px solid var(--turquoise);
}
.cookie-bar.is-visible { transform: none; }
.cookie-inner {
  max-width: var(--wrap-wide);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.cookie-text {
  flex: 1 1 320px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(254,252,249,.85);
  margin: 0;
}
.cookie-text a {
  color: var(--turquoise);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-actions .btn {
  padding: 10px 18px;
  font-size: 11px;
  letter-spacing: .24em;
}
.cookie-actions .btn-outline-light {
  color: var(--bg);
  border-color: rgba(254,252,249,.4);
}
.cookie-actions .btn-outline-light:hover { background: var(--bg); color: var(--ink-strong); }

/* ------------------ LEGAL PAGES ------------------ */
.legal-page { padding-top: calc(var(--nav-h) + 40px); }
.legal-page .nav { background: var(--bg); border-bottom-color: var(--hairline); }
.legal-page .nav .nav-links a,
.legal-page .nav .lang-btn,
.legal-page .nav .btn-reserva-nav { color: var(--ink-strong); }
.legal-page .nav .lang-btn { border-color: var(--hairline); }
.legal-page .nav .btn-reserva-nav { border-color: var(--ink); }
.legal-page .nav .nav-logo { opacity: 1; background-color: var(--turquoise); }
.legal-page .nav .nav-burger span { background: var(--ink-strong); }
.legal-content {
  max-width: 780px;
  margin: 0 auto;
  padding: 40px 24px 100px;
}
.legal-content h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--ink-strong);
  margin: 0 0 14px;
  line-height: 1.1;
}
.legal-content h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--ink-strong);
  margin: 40px 0 12px;
}
.legal-content h3 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 26px 0 10px;
}
.legal-content p,
.legal-content li {
  color: var(--ink);
  line-height: 1.75;
  font-size: 15px;
}
.legal-content ul { padding-left: 22px; margin: 8px 0 16px; }
.legal-content .legal-meta {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 6px 0 40px;
}

/* ------------------ RESPONSIVE ------------------ */
@media (max-width: 960px) {
  .nav-inner { grid-template-columns: 1fr auto 1fr; }
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .nav-right { gap: 8px; }
  .lang-btn { padding: 7px 10px; font-size: 10px; }
  .btn-reserva-nav { padding: 8px 14px; font-size: 10px; letter-spacing: .22em; }

  .nav.is-open .nav-links {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--bg);
    flex-direction: column;
    padding: 20px 24px 30px;
    gap: 0;
    border-bottom: 1px solid var(--hairline);
    box-shadow: 0 8px 24px rgba(74,62,50,.08);
  }
  .nav.is-open .nav-links li { border: 0; }
  .nav.is-open .nav-links a {
    color: var(--ink-strong);
    padding: 18px 0;
    border: 0;
    text-decoration: none;
    display: block;
  }

  .hero { height: 54vh; min-height: 400px; }
  .hero-intro-logo { width: min(64vw, 260px); }

  .music-inner { display: flex; flex-direction: column; gap: 36px; }
  .music-content { position: relative; z-index: 3; }
  .events-grid { grid-template-columns: 1fr; gap: 32px; }
  .events-img-wrap { order: -1; }
  .music-img-wrap, .events-img-wrap { aspect-ratio: 5/4; max-height: 460px; }

  .menu-layout { grid-template-columns: 1fr; }
  .menu-tabs-col { display: none; }
  .menu-mobile-nav { display: block; }

  .contact-info-cols { grid-template-columns: 1fr; gap: 30px; }

  .footer-inner { grid-template-columns: 1fr; gap: 40px; }

  /* Carrusel móvil/tablet: ligera reducción de altura + fundido menor */
  .carousel {
    padding: 10px 0;
    -webkit-mask-image: linear-gradient(to right,
      transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right,
      transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
  }
  .carousel-item { height: clamp(200px, 46vw, 280px); }
  .carousel-track { gap: 10px; }

  .form-grid { grid-template-columns: 1fr; }
  .form-actions { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  body { font-size: 15.5px; }
  .hero { height: 50vh; min-height: 360px; }
  .hero-intro-logo { width: min(78vw, 260px); }
  .hero-intro { padding: 8px 0 40px; }
  .strip { padding: 40px 0; }

  .framed::before,
  .framed--right::before { inset: 12px -12px -12px 12px; }
  .framed--right::before { inset: 12px 12px -12px -12px; }

  /* Carrusel móvil pequeño */
  .carousel { padding: 8px 0; }
  .carousel-item { height: clamp(180px, 55vw, 240px); }
  .carousel-track { gap: 10px; }

  .lightbox { padding: 20px; }
  .lightbox-close { top: 12px; right: 12px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }

  .contact-map-wrap { aspect-ratio: 4/5; }
}

/* ------------------ ACCESIBILIDAD ------------------ */
@media (prefers-reduced-motion: reduce) {
  .hero-media { transform: none !important; }
}

/* Foco visible */
:focus-visible {
  outline: 2px solid var(--turquoise);
  outline-offset: 3px;
}

/* ============================================================================
   MÓVIL — refuerzos de contención y ajustes finos
   ============================================================================ */
@media (max-width: 960px) {
  /* Ninguna sección debe permitir scroll horizontal. Los decos con
     right: -Npx quedan clipeados dentro de su propia sección. */
  main > section,
  section.hero,
  section.hero-intro,
  section.strip,
  .music-sec, .events-sec, .gallery-sec, .contact-sec, .menu-sec {
    overflow-x: clip;
  }
}

@media (max-width: 700px) {
  /* ── HERO MÓVIL: funde foto con fondo color arena ──────────────────────────
     Color extraído de hero.webp (franja inferior): #C8BDAF = rgb(200,189,175).
     El fade termina en ese tono → empalma perfectamente con el fondo arena
     de la sección hero-intro → el corte de la foto queda INVISIBLE. */
  .hero-fade {
    background: linear-gradient(to top,
      #C8BDAF 0%,
      rgba(200,189,175,.98) 20%,
      rgba(200,189,175,.75) 45%,
      rgba(200,189,175,.35) 75%,
      transparent 100%);
  }
  /* Fondo de hero-intro: arena arriba, transición suave a crema */
  .hero-intro {
    background: linear-gradient(to bottom,
      #C8BDAF 0%,
      #C8BDAF 48%,
      var(--bg) 100%);
  }
  /* Logo: pasa a tono oscuro para tener contraste sobre el fondo arena */
  .hero-intro-logo { background-color: var(--ink-strong); }
  /* ─────────────────────────────────────────────────────────────────────── */
  /* Ocultar el motivo sol+olas del hero-intro solo en móvil */
  .hero-intro > .deco-sun { display: none; }
  /* Reforzar todas las input/select del formulario para que NO desborden.
     Especialmente <input type="date"> que en iOS coge un ancho intrínseco mayor. */
  .field { min-width: 0; }
  .field input,
  .field select,
  .field textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .field input[type="date"],
  .field input[type="time"],
  .field input[type="number"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
  }
}

/* ------------------ LANDSCAPE (móvil en horizontal) ------------------
   viewport-fit=cover llena el ancho físico completo (incluye safe areas iPhone).
   Ajustes adicionales de layout en landscape estrecho. */
@media (orientation: landscape) and (max-width: 960px) {
  /* Hero: fondo arena en landscape (anchos 700-960px quedan fuera del @media max-width:700px) */
  .hero-fade {
    background: linear-gradient(to top,
      #C8BDAF 0%,
      rgba(200,189,175,.98) 20%,
      rgba(200,189,175,.75) 45%,
      rgba(200,189,175,.35) 75%,
      transparent 100%);
  }
  .hero-intro {
    background: linear-gradient(to bottom,
      #C8BDAF 0%,
      #C8BDAF 48%,
      var(--bg) 100%);
  }
  .hero-intro-logo { background-color: var(--ink-strong); }
  .hero-intro > .deco-sun { display: none; }

  /* ── MÚSICA EN VIVO — layout de bloque puro ───────────────────────────────
     display:block es el layout más simple: cada hijo ocupa su fila completa
     en orden DOM (foto primero, texto después). Sin ejes flex/grid, sin
     alineación, sin capas de composición. Imposible solapar en block flow.
     Las animaciones reveal se desactivan con !important (gana a inline GSAP)
     para evitar cualquier transform que pueda crear capas GPU.             */

  .music-sec .reveal {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
  }

  .music-inner {
    display: block !important;
  }

  .music-img-wrap {
    display: block;
    width: 100%;
    height: 240px;
    max-height: 240px;
    aspect-ratio: auto;
    margin-bottom: 24px;
  }

  .music-content {
    display: block;
  }
}

/* Selección */
::selection { background: var(--turquoise); color: #fff; }

/* ------------------ MOTIVOS DECORATIVOS (marcas de agua) ------------------
   Tres tipos: OLA (turquesa), PALMERA (marrón cálido) y SOL (turquesa,
   inspirado en el icono del logo — círculo + ola bajo él).
   Se reparten por todas las secciones (menos la carta).
   Opacidad interna del SVG ≈ 0.6, opacidad de contenedor 0.9 → visibles pero
   claramente en modo marca de agua.
------------------------------------------------------------------- */
.deco-wave, .deco-palm, .deco-sun,
.deco-monstera, .deco-seastar {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: .9;
}

/* --- OLA (tres líneas onduladas horizontales, turquesa) --- */
.deco-wave {
  width: 210px;
  height: 80px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 210 80' fill='none' stroke='%238FBFB0' stroke-opacity='0.58' stroke-width='1.4' stroke-linecap='round'><path d='M0 20 Q 15 6, 30 20 T 60 20 T 90 20 T 120 20 T 150 20 T 180 20 T 210 20'/><path d='M0 42 Q 15 28, 30 42 T 60 42 T 90 42 T 120 42 T 150 42 T 180 42 T 210 42'/><path d='M0 64 Q 15 50, 30 64 T 60 64 T 90 64 T 120 64 T 150 64 T 180 64 T 210 64'/></svg>") no-repeat center/contain;
}
.deco-wave--sm { width: 140px; height: 55px; }
.deco-wave--tl { top: 30px;  left: 24px; }
.deco-wave--tr { top: 30px;  right: 24px; }
.deco-wave--br { bottom: 24px; right: 24px; }
.deco-wave--bl { bottom: 24px; left: 24px; }
.deco-wave--mr { top: 50%; right: 20px; transform: translateY(-50%); }

/* --- PALMERA (hoja estilizada, marrón cálido) --- */
.deco-palm {
  width: 200px;
  height: 260px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 260' fill='none' stroke='%23A08065' stroke-opacity='0.5' stroke-width='1.1' stroke-linecap='round'><path d='M100 250 Q 100 180, 100 60'/><path d='M100 90 Q 60 60, 20 40 M100 90 Q 55 55, 20 40'/><path d='M100 90 Q 140 60, 180 40 M100 90 Q 145 55, 180 40'/><path d='M100 110 Q 55 90, 15 90'/><path d='M100 110 Q 145 90, 185 90'/><path d='M100 130 Q 60 130, 25 145'/><path d='M100 130 Q 140 130, 175 145'/><path d='M100 155 Q 65 165, 40 190'/><path d='M100 155 Q 135 165, 160 190'/><path d='M100 70 Q 70 40, 45 15'/><path d='M100 70 Q 130 40, 155 15'/></svg>") no-repeat center/contain;
  transform: rotate(-14deg);
}
.deco-palm--sm { width: 140px; height: 180px; }
.deco-palm--tl { top: 20px;    left: -20px; }
.deco-palm--tr { top: 20px;    right: -20px; transform: rotate(14deg) scaleX(-1); }
.deco-palm--bl { bottom: 20px; left: -20px; transform: rotate(-30deg); }
.deco-palm--br { bottom: 20px; right: -20px; transform: rotate(30deg) scaleX(-1); }

/* --- SOL + OLA (icono del logo simplificado) --- */
.deco-sun {
  width: 140px;
  height: 140px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' fill='none' stroke='%238FBFB0' stroke-opacity='0.62' stroke-width='1.6' stroke-linecap='round'><circle cx='70' cy='60' r='24'/><path d='M12 108 Q 26 96, 40 108 T 68 108 T 96 108 T 124 108'/><path d='M12 122 Q 26 110, 40 122 T 68 122 T 96 122 T 124 122'/></svg>") no-repeat center/contain;
}
.deco-sun--sm { width: 90px; height: 90px; }
.deco-sun--lg { width: 200px; height: 200px; }
.deco-sun--tl { top: 30px;    left: 30px; }
.deco-sun--tr { top: 30px;    right: 30px; }
.deco-sun--bl { bottom: 30px; left: 30px; }
.deco-sun--br { bottom: 30px; right: 30px; }
.deco-sun--bc { bottom: 40px; left: 50%; transform: translateX(-50%); }
.deco-sun--tc { top: 30px;    left: 50%; transform: translateX(-50%); }

/* Aseguramos que los decos NO impidan el clic en botones/enlaces */
.deco-wave, .deco-palm, .deco-sun,
.deco-monstera, .deco-seastar { user-select: none; }

/* --- HOJA MONSTERA (marrón cálido) --- */
.deco-monstera {
  width: 170px;
  height: 200px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 140' fill='none' stroke='%23A08065' stroke-opacity='0.5' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'><line x1='60' y1='135' x2='60' y2='90'/><path d='M60 90 Q 40 90, 28 78 Q 34 74, 42 78 M42 78 Q 24 68, 18 54 Q 27 53, 36 60 M36 60 Q 20 48, 22 30 Q 32 32, 42 42 M42 42 Q 34 24, 46 16 Q 53 26, 57 40 M57 40 Q 60 22, 60 12'/><path d='M60 90 Q 80 90, 92 78 Q 86 74, 78 78 M78 78 Q 96 68, 102 54 Q 93 53, 84 60 M84 60 Q 100 48, 98 30 Q 88 32, 78 42 M78 42 Q 86 24, 74 16 Q 67 26, 63 40'/></svg>") no-repeat center/contain;
  transform: rotate(-8deg);
}
.deco-monstera--sm { width: 130px; height: 155px; }
.deco-monstera--tl { top: 10px;    left: -20px; }
.deco-monstera--tr { top: 10px;    right: -20px; transform: rotate(8deg) scaleX(-1); }
.deco-monstera--bl { bottom: 10px; left: -20px; transform: rotate(-24deg); }
.deco-monstera--br { bottom: 10px; right: -20px; transform: rotate(14deg) scaleX(-1); }

/* --- ESTRELLA DE MAR ORGÁNICA (5 brazos redondeados, marrón) --- */
.deco-seastar {
  width: 110px;
  height: 110px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23A08065' stroke-opacity='0.5' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M50 12 Q55 26 60 38 Q74 34 88 40 Q76 50 66 55 Q78 66 74 84 Q60 72 50 66 Q40 72 26 84 Q22 66 34 55 Q24 50 12 40 Q26 34 40 38 Q45 26 50 12 Z'/><circle cx='50' cy='50' r='4' fill='%23A08065' fill-opacity='0.18' stroke='none'/><circle cx='50' cy='30' r='0.9' fill='%23A08065' fill-opacity='0.4' stroke='none'/><circle cx='68' cy='44' r='0.9' fill='%23A08065' fill-opacity='0.4' stroke='none'/><circle cx='60' cy='68' r='0.9' fill='%23A08065' fill-opacity='0.4' stroke='none'/><circle cx='40' cy='68' r='0.9' fill='%23A08065' fill-opacity='0.4' stroke='none'/><circle cx='32' cy='44' r='0.9' fill='%23A08065' fill-opacity='0.4' stroke='none'/></svg>") no-repeat center/contain;
  transform: rotate(-14deg);
}
.deco-seastar--sm { width: 80px; height: 80px; }
.deco-seastar--tl { top: 26px;    left: 26px;  transform: rotate(-14deg); }
.deco-seastar--tr { top: 26px;    right: 26px; transform: rotate(20deg); }
.deco-seastar--bl { bottom: 26px; left: 26px;  transform: rotate(-25deg); }
.deco-seastar--br { bottom: 26px; right: 26px; transform: rotate(25deg); }

/* Escala para móvil */
@media (max-width: 700px) {
  .deco-wave     { width: 130px; height: 52px;  opacity: .8; }
  .deco-palm     { width: 130px; height: 170px; opacity: .75; }
  .deco-sun      { width: 100px; height: 100px; opacity: .8; }
  .deco-sun--lg  { width: 130px; height: 130px; }
  .deco-monstera { width: 120px; height: 145px; opacity: .7; }
  .deco-monstera--sm { width: 95px; height: 115px; }
  .deco-seastar  { width: 78px;  height: 78px;  opacity: .78; }
  .deco-seastar--sm  { width: 60px;  height: 60px; }
  .deco-wave--tr, .deco-wave--br  { right: 8px; }
  .deco-wave--tl, .deco-wave--bl  { left: 8px; }
  .deco-palm--tl, .deco-palm--bl  { left: -60px; }
  .deco-palm--tr, .deco-palm--br  { right: -60px; }
  .deco-sun--tr,  .deco-sun--br   { right: 12px; }
  .deco-sun--tl,  .deco-sun--bl   { left: 12px; }
  .deco-seastar--tr, .deco-seastar--br { right: 12px; }
  .deco-seastar--tl, .deco-seastar--bl { left: 12px; }
  .deco-monstera--tl, .deco-monstera--bl { left: -40px; }
  .deco-monstera--tr, .deco-monstera--br { right: -40px; }
}