/* =========================================================
   Paleta de colores - Arena y Mar
   Ivory: #F2EEE9 | Sand: #E6DECF | Stone: #D3D1CC
   Sage: #A3ADA0 | Navy: #2F4667  | Champagne: #C6B28A
   Text Dark: #3F3A36 | Text Muted: #6B5F56
========================================================= */

/* -------------------- Base -------------------- */
:root {
  --sm-accent: #C6B28A;
}

* { box-sizing: border-box; }

body {
  font-family: 'Lato', sans-serif;
  margin: 0;
  line-height: 1.6;
  background-color: #F2EEE9; /* Ivory */
  color: #3F3A36;            /* Text Dark (por defecto) */
}

/* -------------------- Barra de iconos simple (si la usas en alguna página) -------------------- */
.menu-navegacion ul{
  list-style:none;
  padding:10px 5px;
  margin:0;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  background:#F2EEE9;
}
.menu-navegacion li{ margin:5px 15px; }
.menu-navegacion a{
  text-decoration:none;
  color:#A3ADA0;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
  transition:color .3s ease;
}
.icono{ font-size:24px; margin-bottom:5px; width:30px; text-align:center; }
.nombre-menu{
  display:none;
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:rgba(63,58,54,.85); color:#F2EEE9; padding:4px 8px; border-radius:4px;
  font-size:12px; white-space:nowrap; margin-top:8px; z-index:10; pointer-events:none;
}
.menu-navegacion a:hover{ color:#2F4667; }
.menu-navegacion a:hover .nombre-menu{ display:block; }

/* -------------------- HERO -------------------- */
.hero-section{
  background-image:url('Portada.jpg');
  background-color:#E6DECF;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  background-attachment:fixed;

  min-height:85vh;
  padding:60px 20px;
  display:flex; justify-content:center; align-items:center; text-align:center;
  position:relative; color:#3F3A36;

  /* Para efecto linterna */
  --mouse-x:50%; --mouse-y:50%; --radius:250px;
  transition: transform .6s ease, width .6s ease; /* para ajuste con menú */
}
.hero-section::before{
  content:""; position:absolute; inset:0;
  background-color:rgba(63,58,54,.3);
  z-index:1;
}
.hero-content{ position:relative; z-index:2; }
.hero-section h1{
  font-family:'Dancing Script', cursive;
  font-size:calc(2.5rem + 3vw);
  margin:.0 0 .1em 0;
  font-weight:700;
  color:#3F3A36;
  text-shadow:1px 1px 3px rgba(242,238,233,.5);
}
.hero-section .fecha-boda{
  font-size:calc(1.1rem + .8vw);
  margin-top:0;
  font-weight:400;
  color:#6B5F56;
  letter-spacing:1px;
}

/* Efecto linterna (chroma) */
.chroma-effect-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-color:transparent;
  backdrop-filter:grayscale(1) brightness(.7);
  -webkit-backdrop-filter:grayscale(1) brightness(.7);
  mask-image:radial-gradient(circle var(--radius) at var(--mouse-x) var(--mouse-y),
    transparent 0%, transparent 30%, rgba(0,0,0,1) 60%);
  -webkit-mask-image:radial-gradient(circle var(--radius) at var(--mouse-x) var(--mouse-y),
    transparent 0%, transparent 30%, rgba(0,0,0,1) 60%);
  /* oscurecimiento de respaldo */
  background-color:rgba(63,58,54,.4);
}

/* Ajustes hero cuando el menú está abierto (solo si agregas body.menu-open) */
.menu-open .hero-section{
  transform:translateX(-18vw);
  width:82vw;
  background-attachment:scroll;
}

@media (max-width:768px){
  .hero-section{ min-height:60vh; background-attachment:scroll; }
  .hero-section h1{ font-size:calc(2rem + 4vw); }
  .hero-section .fecha-boda{ font-size:calc(1rem + 1vw); }
  .menu-open .hero-section{ transform:none; width:100vw; }
}

/* -------------------- Contenido genérico de secciones -------------------- */
.contenido-seccion{
  padding:40px 20px;
  max-width:900px; margin:20px auto;
  background:#F2EEE9;
  box-shadow:0 2px 5px rgba(63,58,54,.1);
}
.contenido-seccion h2{
  text-align:center; color:#3F3A36; margin-bottom:20px;
}

/* -------------------- Páginas internas: bloque central -------------------- */
.contenido-pagina{
  max-width:850px; margin:40px auto; padding:25px 40px;
  background:#F2EEE9; box-shadow:0 3px 10px rgba(63,58,54,.1);
  border-radius:8px; text-align:center;
}
.contenido-pagina h1{
  color:#3F3A36; margin-bottom:25px;
  font-family:'Dancing Script', cursive; font-size:3em;
  border-bottom:1px solid #D3D1CC; padding-bottom:15px;
}
.contenido-pagina h2{
  color:#6B5F56; margin:35px 0 15px; font-weight:400; font-size:1.8em;
}
@media (max-width:768px){
  .contenido-pagina{ margin:20px; padding:20px 25px; }
  .contenido-pagina h1{ font-size:2.4em; }
}
@media (max-width:480px){
  .fecha-grande, .hora-grande{ font-size:1.8em; }
}

/* -------------------- Fecha/Hora destacados -------------------- */
.detalle-fecha-hora{
  margin-bottom:30px; padding:25px;
  background:#E6DECF; border:1px solid #D3D1CC; border-radius:5px;
}
.fecha-grande, .hora-grande{
  font-size:2.8em; color:#C6B28A; margin:8px 0; font-weight:700; line-height:1.2;
}
.lugar-ceremonia{ font-size:1.2em; color:#6B5F56; margin-top:20px; }
.lugar-ceremonia .fa-location-dot{ margin-right:8px; color:#C6B28A; }

.detalle-lugar p{ color:#6B5F56; line-height:1.7; margin-bottom:15px; text-align:justify; }
.detalle-lugar strong{ color:#3F3A36; font-weight:600; }

.navegacion-volver{ margin-top:40px; padding-top:20px; border-top:1px solid #D3D1CC; text-align:center; }
.boton-volver{
  display:inline-block; padding:12px 25px; background:#A3ADA0; color:#F2EEE9;
  text-decoration:none; border-radius:5px; transition: background-color .3s ease, transform .2s ease;
  font-size:1em;
}
.boton-volver:hover{
  background:#6B5F56; transform:translateY(-2px);
  box-shadow:0 4px 8px rgba(63,58,54,.15);
}

/* -------------------- Hospedaje -------------------- */
.introduccion-hospedaje{
  font-size:1.1em; color:#6B5F56; margin-bottom:40px; text-align:center; max-width:700px; margin-inline:auto;
}
.opcion-hotel{
  display:flex; flex-direction:row; align-items:center; margin-bottom:25px;
}
.logo-hotel{
  width:120px; height:120px; object-fit:contain; margin-right:30px; flex-shrink:0;
  border:1px solid #D3D1CC; padding:5px; background:#F2EEE9;
}
.logo-hotel-generico{
  font-size:60px; color:#A3ADA0; width:120px; height:120px; display:flex; justify-content:center; align-items:center;
  margin-right:30px; flex-shrink:0; background:#E6DECF; border-radius:5px;
}
.descripcion-hotel{ flex-grow:1; text-align:left; }
.descripcion-hotel h2{
  margin:0 0 10px; color:#6B5F56; font-size:1.7em; font-weight:600; padding-bottom:5px;
  border-bottom:2px solid #D3D1CC; display:inline-block;
}
.descripcion-hotel p{ margin-bottom:10px; color:#6B5F56; line-height:1.6; }
.descripcion-hotel p strong{ color:#3F3A36; font-weight:600; }
.boton-hotel{
  display:inline-block; padding:8px 18px; background:#D3D1CC; color:#3F3A36; text-decoration:none;
  border:1px solid #A3ADA0; border-radius:4px; font-size:.9em; margin-top:10px; transition:all .3s ease;
}
.boton-hotel:hover{ background:#A3ADA0; border-color:#6B5F56; box-shadow:0 1px 3px rgba(63,58,54,.1); }
.separador-hotel{
  border:0; height:1px; background:linear-gradient(to right, transparent, #D3D1CC, transparent);
  margin:30px 0 40px;
}
.nota-importante-hospedaje{
  margin-top:40px; padding:25px; background:#E6DECF; border-left:5px solid #C6B28A; text-align:left;
  border-radius:0 5px 5px 0;
}
.nota-importante-hospedaje h3{ margin:0 0 10px; color:#6B5F56; font-size:1.3em; }
.nota-importante-hospedaje p{ color:#6B5F56; margin-bottom:10px; }
.nota-importante-hospedaje strong{ color:#3F3A36; font-weight:600; }

@media (max-width:768px){
  .opcion-hotel{ flex-direction:column; align-items:center; text-align:center; }
  .logo-hotel, .logo-hotel-generico{ margin-right:0; margin-bottom:20px; width:100px; height:100px; }
  .logo-hotel-generico{ font-size:50px; }
  .descripcion-hotel{ text-align:center; }
  .descripcion-hotel h2{ display:block; border-bottom:none; padding-bottom:0; }
  .descripcion-hotel h2::after{
    content:''; display:block; width:50px; height:2px; background:#C6B28A; margin:5px auto 0;
  }
  .descripcion-hotel p{ text-align:justify; }
  .nota-importante-hospedaje{
    text-align:center; border-left-width:0; border-top:4px solid #C6B28A; border-radius:5px; padding:20px;
  }
}

/* -------------------- Calculadora -------------------- */
.introduccion-calculadora{
  font-size:1.1em; color:#6B5F56; margin-bottom:35px; text-align:center; max-width:700px; margin-inline:auto; line-height:1.6;
}
.calculadora-form{
  background:#F2EEE9; padding:25px 35px; border-radius:8px;
  box-shadow:0 4px 12px rgba(63,58,54,.08); margin-bottom:35px;
}
.form-row{ display:flex; flex-wrap:wrap; gap:25px; margin-bottom:25px; }
.form-row:last-child{ margin-bottom:10px; }
.form-group{ flex:1; min-width:200px; display:flex; flex-direction:column; }
.form-group label{
  margin-bottom:8px; font-weight:600; color:#3F3A36; font-size:.9em; text-transform:uppercase; letter-spacing:.5px;
}
.form-group label i{ margin-right:6px; color:#6B5F56; }
.form-group select,
.form-group input[type="date"],
.form-group input[type="number"]{
  width:100%; padding:12px 15px; border:1px solid #D3D1CC; border-radius:5px; font-size:1em; background:#F2EEE9;
  transition:border-color .2s ease, box-shadow .2s ease; height:45px;
}
.form-group select:focus,
.form-group input:focus{
  border-color:#A3ADA0; outline:none; box-shadow:0 0 0 3px rgba(163,173,160,.25);
}
.calculadora-resultados{
  background:#E6DECF; padding:30px 35px; border-radius:8px; border:1px solid #D3D1CC; margin-bottom:35px;
  box-shadow:0 2px 8px rgba(63,58,54,.05);
}
.calculadora-resultados h2{
  margin:0 0 30px; text-align:center; color:#6B5F56; font-weight:600; font-size:1.8em; text-transform:uppercase; letter-spacing:1px;
}
.calculadora-resultados h2 i{ margin-right:10px; }
.resultado-item{
  display:flex; justify-content:space-between; align-items:baseline; padding:15px 0;
  border-bottom:1px dashed #D3D1CC; font-size:1.1em;
}
.resultado-label{ color:#6B5F56; margin-right:20px; font-weight:400; }
.resultado-valor{ font-weight:600; color:#3F3A36; font-size:1.1em; text-align:right; }
.resultado-item.total{
  border-top:1px solid #D3D1CC; border-bottom:none; margin-top:20px; padding-top:20px; font-size:1.25em;
}
.resultado-item.total .resultado-label{ color:#3F3A36; font-weight:600; }
.resultado-item.total .resultado-valor{ color:#C6B28A; font-size:1.3em; font-weight:700; }
.nota-calculadora{
  margin-top:30px; padding-top:20px; border-top:1px solid #D3D1CC;
  font-size:.9em; color:#6B5F56; text-align:center; line-height:1.6;
}
@media (max-width:768px){
  .calculadora-form, .calculadora-resultados{ padding:20px 25px; }
  .form-row{ gap:20px; }
  .form-group{ min-width:calc(50% - 10px); }
}
@media (max-width:500px){
  .form-group{ min-width:100%; }
  .resultado-item{ font-size:1em; flex-direction:column; align-items:flex-start; padding:10px 0; }
  .resultado-valor{ margin-top:5px; font-size:1.1em; text-align:left; }
  .resultado-item.total{ font-size:1.1em; }
  .resultado-item.total .resultado-valor{ font-size:1.2em; }
}

/* -------------------- Vuelos -------------------- */
.introduccion-vuelos{
  font-size:1.1em; color:#6B5F56; margin-bottom:20px; text-align:center; max-width:800px; margin-inline:auto; line-height:1.6;
}
.nota-importante-vuelos{
  background:#E6DECF; border:1px solid #D3D1CC; color:#3F3A36;
  padding:15px 25px; border-radius:6px; margin-bottom:40px; text-align:left; font-size:.95em; line-height:1.6;
}
.nota-importante-vuelos i{ margin-right:8px; }
.buscadores-vuelos{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:35px; margin:30px 0 40px;
}
.buscador-item{
  background:#F2EEE9; padding:30px; border-radius:10px; box-shadow:0 5px 15px rgba(63,58,54,.08);
  text-align:center; border-top:5px solid; display:flex; flex-direction:column; transition:transform .3s ease, box-shadow .3s ease;
}
.buscador-item:hover{ transform:translateY(-6px); box-shadow:0 10px 20px rgba(63,58,54,.12); }
.buscador-item.google{ border-color:#2F4667; }
.buscador-item.skyscanner{ border-color:#A3ADA0; }
.buscador-item.kayak{ border-color:#C6B28A; }
.buscador-icono{ font-size:3.5em; margin-bottom:20px; }
.buscador-item.google .buscador-icono{ color:#2F4667; }
.buscador-item.skyscanner .buscador-icono{ color:#A3ADA0; }
.buscador-item.kayak .buscador-icono{ color:#C6B28A; }
.buscador-item h2{ margin:0 0 15px; font-size:1.6em; color:#3F3A36; font-weight:600; }
.buscador-item p{ color:#6B5F56; font-size:1em; line-height:1.6; flex-grow:1; margin-bottom:25px; }
.boton-buscador{
  display:inline-block; padding:12px 30px; background:#2F4667; color:#F2EEE9; text-decoration:none; border-radius:5px;
  font-weight:600; transition:all .3s ease; margin-top:auto; align-self:center; border:none; cursor:pointer; font-size:1em;
}
.boton-buscador:hover{ background:#3F3A36; transform:scale(1.05); box-shadow:0 4px 8px rgba(63,58,54,.1); }
@media (max-width:650px){
  .buscadores-vuelos{ grid-template-columns:1fr; gap:25px; }
  .buscador-item{ padding:25px; }
}

/* -------------------- Regalos -------------------- */
.mensaje-regalos{
  text-align:center; margin:20px 0 40px; padding:25px 20px; background:#F2EEE9;
  border-radius:8px; box-shadow:0 2px 8px rgba(63,58,54,.06);
}
.mensaje-regalos .frase-principal{
  font-size:1.6em; font-weight:600; color:#6B5F56; margin-bottom:15px; font-family:'Dancing Script', cursive;
}
.mensaje-regalos p{
  font-size:1.1em; color:#6B5F56; line-height:1.7; margin-bottom:10px; max-width:600px; margin-inline:auto;
}
.separador-mensaje{
  border:0; height:1px; background:linear-gradient(to right, transparent, #D3D1CC, transparent);
  margin:25px auto; width:80%;
}
.mensaje-regalos .agradecimiento{ font-style:italic; color:#6B5F56; margin-top:20px; font-size:1em; }
.enlace-mesa-regalos{
  text-align:center; padding:35px 20px; background:#E6DECF; border-radius:8px; margin:30px 0 40px;
}
.enlace-mesa-regalos p{ margin-bottom:25px; color:#6B5F56; font-size:1.1em; }
.boton-regalos{
  display:inline-block; padding:14px 40px; background:#C6B28A; color:#3F3A36; text-decoration:none; border-radius:50px;
  font-weight:600; font-size:1.2em; letter-spacing:.5px; transition:all .35s ease; border:none; cursor:pointer;
  box-shadow:0 5px 15px rgba(63,58,54,.18);
}
.boton-regalos i{ margin-right:12px; font-size:.95em; }
.boton-regalos:hover{
  background:#A3ADA0; color:#F2EEE9; transform:translateY(-4px) scale(1.03);
  box-shadow:0 8px 20px rgba(63,58,54,.22);
}
@media (max-width:600px){
  .mensaje-regalos .frase-principal{ font-size:1.4em; }
  .mensaje-regalos p{ font-size:1em; }
  .boton-regalos{ padding:12px 30px; font-size:1.1em; }
  .enlace-mesa-regalos{ padding:25px 15px; }
}

/* -------------------- Lugar -------------------- */
.descripcion-lugar{ text-align:center; margin-bottom:35px; padding:0 10px; }
.descripcion-lugar p{
  font-size:1.15em; color:#6B5F56; line-height:1.7; max-width:750px; margin:12px auto;
}
.descripcion-lugar p strong{ color:#3F3A36; font-weight:600; }
.descripcion-lugar p a{ color:#A3ADA0; text-decoration:underline; font-weight:600; transition:color .3s ease; }
.descripcion-lugar p a:hover{ color:#C6B28A; }

.mapa-container{ margin-bottom:35px; }
.mapa-container h2{
  text-align:center; color:#6B5F56; margin-bottom:15px; font-size:1.7em; font-weight:600;
}
.mapa-container h2 i{ margin-right:10px; }
.google-map-iframe-container{
  position:relative; overflow:hidden; width:100%; max-width:950px; margin:0 auto;
  padding-top:56.25%; border-radius:10px; box-shadow:0 5px 15px rgba(63,58,54,.12);
}
.google-map-iframe-container iframe{
  position:absolute; inset:0; width:100%; height:100%; border:none; border-radius:10px;
}
.direccion-info{
  text-align:center; margin-top:35px; padding:30px 25px; background:#E6DECF; border-radius:8px; border:1px solid #D3D1CC;
  max-width:700px; margin-inline:auto;
}
.direccion-info h3{ margin:0 0 15px; color:#6B5F56; font-size:1.4em; font-weight:600; }
.direccion-info h3 i{ margin-right:10px; color:#C6B28A; }
.direccion-info address{ font-style:normal; font-size:1.1em; color:#6B5F56; line-height:1.7; margin-bottom:25px; }
.boton-como-llegar{
  display:inline-block; padding:12px 28px; background:#A3ADA0; color:#F2EEE9; text-decoration:none; border-radius:5px;
  font-weight:600; transition:all .3s ease; font-size:1.1em; border:none; cursor:pointer; box-shadow:0 3px 8px rgba(63,58,54,.1);
}
.boton-como-llegar i{ margin-right:8px; }
.boton-como-llegar:hover{ background:#6B5F56; box-shadow:0 5px 12px rgba(63,58,54,.15); transform:translateY(-2px); }
@media (max-width:600px){
  .descripcion-lugar p{ font-size:1.05em; }
  .direccion-info{ padding:25px 20px; }
  .direccion-info h3{ font-size:1.3em; }
  .direccion-info address{ font-size:1em; }
  .boton-como-llegar{ padding:10px 22px; font-size:1em; }
}

/* -------------------- Cuenta regresiva (Time) -------------------- */
.page-time{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  min-height:100vh; background:#E6DECF; text-align:center;
}
.page-time h1{ color:#3F3A36; margin-bottom:30px; }
.page-time #countdown-timer{
  display:flex; gap:20px; background:#F2EEE9; padding:30px 40px; border-radius:10px; box-shadow:0 4px 15px rgba(63,58,54,.1);
}
.page-time .time-block{ display:flex; flex-direction:column; align-items:center; min-width:80px; }
.page-time .number{
  font-size:3em; font-weight:bold; color:#A3ADA0; line-height:1; padding:5px 0;
  transition:transform .2s ease-out, opacity .2s ease-out;
}
.page-time .label{ font-size:.9em; color:#6B5F56; text-transform:uppercase; margin-top:5px; }
.page-time .tick{ animation:numberTick .3s ease-out forwards; }
@keyframes numberTick{
  0%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.2); opacity:.7; }
  100%{ transform:scale(1); opacity:1; }
}
.page-time #message{ display:none; margin-top:20px; font-size:1.5em; color:#A3ADA0; }

/* =======================================================
   MENÚ LATERAL (GSAP)
======================================================= */
.staggered-menu-wrapper{
  position:fixed; top:0; left:0; width:100%; height:100vh; z-index:999; pointer-events:none;
}
.staggered-menu-header{
  position:absolute; top:0; left:0; width:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:2em; z-index:20;
}
.staggered-menu-header > *{ pointer-events:auto; }

/* Logo (texto o imagen) */
.sm-logo{ user-select:none; text-decoration:none; }
.sm-logo-text{
  font-family:'Dancing Script', cursive; font-size:28px; color:#3F3A36; font-weight:700; transition:color .4s ease;
}
.staggered-menu-wrapper[data-open] .sm-logo-text{ color:#F2EEE9; }

/* Logo imagen grande (si usas <img class="sm-logo-img">) */
.sm-logo-img{
  height:90px; width:auto; display:block; transition:filter .3s ease, transform .3s ease;
}
@media (max-width:768px){ .sm-logo-img{ height:70px; } }
/* En portada, si el logo es oscuro, iluminar mientras el menú está cerrado */
.home-page:not(.menu-open) .sm-logo-img{
  filter: invert(1) brightness(2) contrast(1);
}

/* Botón de menú */
.sm-toggle{
  position:relative; display:inline-flex; align-items:center; gap:.5rem; background:transparent; border:none; cursor:pointer;
  font-family:'Lato', sans-serif; font-weight:500; line-height:1;
  padding:.5em 1.2em; border-radius:8px; font-size:1.1em;
  transition: background-color .3s ease, color .4s ease;
  color:#3F3A36; /* default páginas internas */
}
.home-page .sm-toggle{ color:#F2EEE9; } /* portada */
.home-page .sm-toggle:hover{ background-color:rgba(255,255,255,.15); color:#F2EEE9; }
.staggered-menu-wrapper[data-open] .sm-toggle{ color:#3F3A36; }
.staggered-menu-wrapper[data-open] .sm-toggle:hover{ background-color:rgba(0,0,0,.08); color:#3F3A36; }

.sm-toggle-textWrap{ position:relative; display:inline-block; height:1em; white-space:nowrap; min-width:55px; text-align:left; }
.sm-toggle-textInner{ display:flex; flex-direction:column; line-height:1; }
.sm-toggle-line{ display:block; height:1em; line-height:1; }
.sm-icon{ position:relative; width:14px; height:14px; flex:0 0 14px; }
.sm-icon-line{
  position:absolute; left:50%; top:50%; width:100%; height:2px; background:currentColor; border-radius:2px; transform:translate(-50%,-50%);
}

/* Panel y pre-layers */
.staggered-menu-panel{
  position:absolute; top:0; right:0; width:clamp(300px, 38vw, 420px); height:100%;
  background:#F2EEE9; display:flex; flex-direction:column; padding:7em 2em 2em; overflow-y:auto; z-index:10; pointer-events:auto;

  /* estado cerrado/abierto (se anima con GSAP y también con CSS por si acaso) */
  transform:translateX(100%); transition:transform .5s ease;
}
.staggered-menu-wrapper[data-open] .staggered-menu-panel{ transform:translateX(0); }

.sm-prelayers{
  position:absolute; top:0; right:0; bottom:0; width:clamp(300px,38vw,420px); pointer-events:none; z-index:5;
}
.sm-prelayer{ position:absolute; top:0; right:0; height:100%; width:100%; }

/* Lista del panel */
.sm-panel-inner{ flex:1; display:flex; flex-direction:column; gap:1.25rem; }
.sm-panel-list{
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; counter-reset:smItem;
}
.sm-panel-itemWrap{ position:relative; overflow:hidden; line-height:1.1; }
.sm-panel-item{
  position:relative; color:#3F3A36; font-weight:600; font-size:clamp(2rem, 5vw, 3rem);
  cursor:pointer; line-height:1.1; letter-spacing:-2px; text-transform:uppercase; transition:color .25s ease;
  display:inline-block; text-decoration:none; padding-right:1.4em;
}
.sm-panel-item:hover{ color:var(--sm-accent); }
.sm-panel-itemLabel{ display:inline-block; transform-origin:0% 100%; }

/* Numeración */
.sm-panel-item::after{
  counter-increment:smItem; content:counter(smItem, decimal-leading-zero);
  position:absolute; top:.1em; right:0; font-size:16px; font-weight:400; color:var(--sm-accent); letter-spacing:0;
  pointer-events:none; user-select:none; opacity:var(--sm-num-opacity, 0); transition:opacity .4s ease;
}

/* Colores del header según página */
.sm-logo-text, .sm-toggle{ color:#3F3A36; }           /* internas */
.home-page .sm-logo-text, .home-page .sm-toggle{ color:#F2EEE9; } /* portada */
.staggered-menu-wrapper[data-open] .sm-logo-text,
.staggered-menu-wrapper[data-open] .sm-toggle{ color:#3F3A36; }

/* Fijar visibilidad si abres por JS antes de animar (fallback seguro) */
.staggered-menu-wrapper[data-open] .sm-panel-list,
.staggered-menu-wrapper[data-open] .sm-panel-itemWrap,
.staggered-menu-wrapper[data-open] .sm-panel-item,
.staggered-menu-wrapper[data-open] .sm-panel-itemLabel{
  opacity:1 !important; transform:none !important; visibility:visible !important;
  height:auto !important; overflow:visible !important;
}

/* Responsive menú */
@media (max-width:640px){
  .staggered-menu-header{ padding:1.5em; }
  .staggered-menu-panel{ width:100%; left:0; right:0; padding-left:2.5em; padding-right:2.5em; }
  .sm-prelayers{ width:100%; }
}
/* ===== FIX VISIBILIDAD MENÚ (forzar texto visible) ===== */
.staggered-menu-wrapper[data-open] .sm-panel-list,
.staggered-menu-wrapper[data-open] .sm-panel-itemWrap,
.staggered-menu-wrapper[data-open] .sm-panel-item,
.staggered-menu-wrapper[data-open] .sm-panel-itemLabel{
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
}

/* Color de enlaces dentro del panel (fondo marfil) */
.staggered-menu-panel { background: #F2EEE9; z-index: 10; }
.sm-panel-item { color:#3F3A36; }
.sm-panel-item:hover { color:#C6B28A; }
/* ==== FIX menú clickeable en TODAS las páginas ==== */
.staggered-menu-wrapper{
  /* en reposo puedes dejarlo en none si quieres “clic a través”… */
  pointer-events: none;
}

/* …pero cuando el menú está ABIERTO debe aceptar clics */
.staggered-menu-wrapper[data-open]{
  pointer-events: auto;
}

/* Asegura que el panel esté encima y reciba clics */
.staggered-menu-panel{
  z-index: 9999;           /* más alto que cualquier contenido */
  pointer-events: auto;    /* el panel sí recibe clics */
  background: #F2EEE9;     /* fondo para que el texto contraste */
}

/* El texto siempre visible al abrir (por si la animación no corre) */
.staggered-menu-wrapper[data-open] .sm-panel-list,
.staggered-menu-wrapper[data-open] .sm-panel-item,
.staggered-menu-wrapper[data-open] .sm-panel-itemLabel{
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Colores legibles del listado */
.sm-panel-item{ color:#3F3A36; }
.sm-panel-item:hover{ color:#C6B28A; }

/* ==== Icono hamburguesa animado ==== */
.sm-icon {
  width: 30px;
  height: 22px;
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.sm-icon-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #3F3A36;
  border-radius: 2px;
  transition: transform .3s ease, opacity .25s ease;
}
.sm-icon-line:nth-child(1) { top: 0; }
.sm-icon-line:nth-child(2) { top: 9px; }
.sm-icon-line:nth-child(3) { top: 18px; }
.sm-toggle:hover .sm-icon-line { background-color: #C6B28A; }

/* vibración ligera */
.sm-toggle:hover .sm-icon {
  animation: wiggle 0.3s ease-in-out;
}
@keyframes wiggle {
  0%,100% { transform: rotate(0deg); }
  25% { transform: rotate(3deg); }
  75% { transform: rotate(-3deg); }
}

/* ==== Tooltip animado ==== */
.menu-tooltip {
  position: absolute;
  right: 45px;
  top: 50%;
  transform: translateY(-50%);
  background: #2F4667;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
  white-space: nowrap;
  z-index: 9999;
}
.menu-tooltip::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 6px solid #2F4667;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.menu-tooltip.visible {
  opacity: 1;
  transform: translateY(-50%) translateX(-5px);
}

/* ===== FIX: pre-capas ocultas cuando el menú está cerrado ===== */
.sm-prelayers{
  position:absolute;
  top:0; right:0; bottom:0;
  width:clamp(300px,38vw,420px);
  pointer-events:none;
  z-index:5;

  /* Cerrado por defecto (sin depender de GSAP) */
  transform: translateX(100%);
  transition: transform .5s ease;
  display: none;            /* <- clave para eliminar la franja */
}
.staggered-menu-wrapper[data-open] .sm-prelayers{
  transform: translateX(0);
  display: block;
}

/* El panel también cerrado por defecto */
.staggered-menu-panel{
  transform: translateX(100%);
  transition: transform .5s ease;
  background: #F2EEE9;
  z-index: 10;
}
.staggered-menu-wrapper[data-open] .staggered-menu-panel{
  transform: translateX(0);
}

/* (Por si algún estilo previo los hacía visibles/transparentes) */
.staggered-menu-wrapper[data-open] .sm-panel-list,
.staggered-menu-wrapper[data-open] .sm-panel-itemWrap,
.staggered-menu-wrapper[data-open] .sm-panel-item,
.staggered-menu-wrapper[data-open] .sm-panel-itemLabel{
  opacity:1 !important; visibility:visible !important; transform:none !important;
}
/* --- Guía de texto junto al ícono de menú --- */
.menu-guide {
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #2F4667;
  margin-left: 10px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
  display: inline-block;
  pointer-events: none;
}

/* Visible al cargar (animación de entrada) */
.menu-guide.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Se oculta al abrir el menú o al pasar el mouse */
.menu-open .menu-guide,
.sm-toggle:hover .menu-guide {
  opacity: 0;
  transform: translateY(-5px);
}

/* Contenedor del botón */
.sm-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
}
.menu-guide {
  cursor: pointer;                 /* ahora parece botón */
  user-select: none;               /* no selecciona texto al hacer click */
  right: 120px;                    /* lo alejamos para no tapar al toggle */
}

.menu-guide:focus-visible {
  outline: 2px solid #C6B28A;      /* accesible con teclado */
  outline-offset: 2px;
}

/* ===== PARALLAX STRIP GALLERY ===== */
.parallax-gallery{
  position: relative;
  overflow: clip;
  background: #F2EEE9;
}

.pg-strip{
  position: relative;
  min-height: 70vh; /* alto de cada foto */
  display: grid;
  place-items: center;
  overflow: hidden;
}

.pg-bg{
  position: absolute;
  inset: -10% -10%; /* margen extra para que no se vean bordes al mover */
  background-size: cover;
  background-position: center;
  will-change: transform;
  transform: translateY(0);
}

.pg-content{
  position: relative;
  z-index: 2;
  text-align: center;
  color: #F2EEE9;
  text-shadow: 0 8px 28px rgba(0,0,0,.45);
  opacity: 0;
  transform: translateY(20px);
}

.pg-content h2{
  font: 700 clamp(28px, 4vw, 48px) 'Dancing Script', cursive;
  margin: 0 12px 6px;
}
.pg-content p{
  font: 400 clamp(14px, 1.6vw, 18px) 'Lato', sans-serif;
  margin: 0 16px;
}

/* Un separador sutil entre strips si quieres */
.pg-sep{
  height: 2px;
  background: linear-gradient(to right, transparent, rgba(0,0,0,.08), transparent);
  margin: clamp(8px, 1.5vw, 14px) 0;
}

/* Modo claro sobre fotos oscuras / modo oscuro sobre fotos claras (opcional según la foto) */
.pg-light .pg-content{ color: #F2EEE9; }
.pg-dark  .pg-content{ color: #2F4667; text-shadow: none; }

/* Responsive tweak si lo necesitas en móviles para reducir altura */
@media (max-width: 600px){
  .pg-strip{ min-height: 60vh; }
}

/* ======= FUENTE DE BODA PARA EL MENÚ (override) ======= */
/* Usa la Dancing Script que ya cargas en el sitio */
.staggered-menu-panel .sm-panel-item,
.staggered-menu-panel .sm-panel-itemLabel,
.staggered-menu-panel .sm-panel-item .sm-panel-itemLabel {
  font-family: "Dancing Script", cursive !important;
  font-weight: 700 !important;
  text-transform: none !important;     /* quita MAYÚSCULAS */
  letter-spacing: 0.5px !important;     /* más elegante */
  line-height: 1.05 !important;
  font-size: clamp(2.2rem, 6vw, 3.4rem) !important; /* un pelín más grande */
}

/* Opcional: deja la numeración como está (moderno y legible) */
.staggered-menu-panel .sm-panel-item::after {
  font-family: "Lato", sans-serif !important;
  font-weight: 600;
}
/* ====== MENU BUTTON — refinado y accesible ====== */
:root{
  /* Ajusta a tu paleta */
  --sm-fg: #F2EEE9;                 /* texto claro sobre botón oscuro */
  --sm-fg-active: #3F3A36;          /* texto cuando está abierto */
  --sm-bg: rgba(0,0,0,.28);         /* fondo del botón */
  --sm-bg-active: rgba(255,255,255,.85);
  --sm-ring: rgb(203, 184, 147);  /* anillo de enfoque */
  --sm-hover: rgba(0,0,0,.36);
}

.sm-toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  background:var(--sm-bg);
  color:var(--sm-fg);
  border:none;
  cursor:pointer;
  padding:.82em 1.5em;
  border-radius:999px;
  backdrop-filter: blur(6px);
  font: 700 0.95rem/1 'Lato', system-ui, -apple-system, sans-serif;
  letter-spacing:.5px;
  text-transform:uppercase;
  overflow:hidden;
  width:110px; /* evita “saltos” al cambiar de texto */
  transition: background .25s ease, color .25s ease, transform .08s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.sm-toggle:hover{ background:var(--sm-hover); }
.sm-toggle:active{ transform: translateY(1px) scale(.99); }
.sm-toggle:focus{ outline: none; }
.sm-toggle:focus-visible{
  box-shadow: 0 0 0 3px var(--sm-ring);
}

/* Estado abierto */
.staggered-menu-wrapper[data-open] .sm-toggle{
  background:var(--sm-bg-active);
  color:var(--sm-fg-active);
}



/* Respeta usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  .sm-toggle,
  .sm-toggle-text-open,.sm-toggle-text-close{
    transition: none !important;
  }
}

/* Bloqueo de scroll al abrir */
body.menu-open{ overflow:hidden; }

/* Panel — pequeños retoques de accesibilidad */
.staggered-menu-panel[aria-hidden="true"]{ visibility:hidden; }
.staggered-menu-panel[aria-hidden="false"]{ visibility:visible; }

/* Logo: aclara al abrir si lo necesitas (opcional) */
.menu-open .sm-logo-img{ filter:none; }

/* Opcional: modo oscuro automático si el header tiene fondo claro detrás */
@media (max-width:640px){
  .sm-toggle{ padding:.78em 1.35em; }
}
* { -webkit-tap-highlight-color: rgba(0,0,0,0) !important; }
/* ===== Footer legal – Paleta Arena y Mar ===== */
.footer-legal{
  background: linear-gradient(
    180deg,
    rgba(231,220,203,0.35), /* Arena */
    rgba(230,222,207,0.65)
  );
  border-top: 1px solid rgba(0,0,0,0.08);
  margin-top: 80px;
}

.footer-legal__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 36px 18px 28px;
  text-align: center;
}

.footer-legal__title{
  font-family: 'Dancing Script', cursive;
  font-size: 1.6rem;
  margin: 0 0 12px;
  color: var(--brand, #2F4667); /* Azul elegante */
}

.footer-legal__text{
  font-family: 'Lato', sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #3F3A36; /* Tinta */
  margin: 0 0 10px;
}

.footer-legal__text strong{
  color: var(--brand, #2F4667);
  font-weight: 700;
}

.footer-legal__small{
  font-family: 'Lato', sans-serif;
  font-size: 0.8rem;
  opacity: 0.7;
  margin-top: 14px;
  color: #3F3A36;
}

/* Responsive */
@media (max-width: 640px){
  .footer-legal__title{
    font-size: 1.35rem;
  }
  .footer-legal__text{
    font-size: 0.9rem;
  }
}