
/* =======================================================
   0) VARIABLES + RESET
   ======================================================= */
:root {
  --navbar-height: 45px;
  --overlay-strength: 0.3; /* sube/baja para más/menos contraste */
  --shadow-strong: 0 10px 30px rgba(0,0,0,0.42);

  /* Tamaños fluidos estilo editorial */
  --title-min: 48px;
  --title-pref: 7vw;
  --title-max: 135px;
  --subtitle-min: 12px;
  --subtitle-pref: 1.8vw;
  --subtitle-max: 18px;
}
/* Reset básico */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow-x: hidden }
html { scroll-behavior: smooth; }  /*


/* =======================================================
   1) BODY (GLOBAL)
   ======================================================= */
body {
  font-family: "Cormorant Garamond", serif;
  color: #222;
  background: #f2eddc;
} 


/* =======================================================
   2) GLOBAL UI (LOADER + reCAPTCHA)
   ======================================================= */
/* CÍRCULO MIENTRAS CARGA */
.loader {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 100%;
  z-index: 9999;
  background: url(../images/loader.gif) center no-repeat #fff;
  pointer-events: none;
}
/* reCAPTCHA v3: mueve el badge */
.grecaptcha-badge{
  bottom: 4px !important;
  left: 4px !important;
  right: auto !important;
  transform: scale(.85);
  transform-origin: left bottom;
  opacity: 0;
} 


/* =======================================================
   3) NAVBAR
   ======================================================= */
/* Navbar SIEMPRE transparente */
nav.navbar,
.slim-navbar,
.navbar.navbar-light,
.navbar.bg-white,
.navbar.navbar-expand-lg {
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Tipografía/links del menú (siempre blancos con sutil sombra) */
.navbar .navbar-brand,
.navbar .nav-link {
  font-family: "Cormorant Garamond", serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;                 /* <-- subimos de 400 a 600 */
  font-size: 14px;                  /* <-- 13px -> 14px (un pelín mayor) */
  color: #fff !important;
  text-shadow: 0 2px 6px rgba(0,0,0,0.55); /* <-- sombra un poco más marcada */
  opacity: 0.98;                    /* <-- más presencia */
  transition: color .2s ease, opacity .2s ease, filter .2s ease;
  position: relative;               /* para el subrayado animado */
}


/* Espaciado y estados */
.navbar .nav-link {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  opacity: 0.92;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #fff !important;
  opacity: 0.75;
  text-decoration: none;
}

/* Hamburguesa (icono blanco sin halo) */
.navbar-light .navbar-toggler {
  border: none !important;
  background: transparent !important;
}
.navbar-light .navbar-toggler-icon {
  filter: invert(1) brightness(1.25) !important; /* icono blanco */
}
.navbar .navbar-toggler:focus,
.navbar .navbar-toggler:active,
.navbar .navbar-toggler:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
} /* Basado en la sección NAVBAR y hamburguesa original, ajustado a blanco/transparente. [1](https://imaginatv-my.sharepoint.com/personal/pacebes_mediapro_tv/Documents/Archivos%20de%20Microsoft%C2%A0Copilot%20Chat/style2.css) */


#nosotros,
#programa,
#detalles,
#confirmacion,
#regalos {
  scroll-margin-top: calc(var(--navbar-height) + 16px); /* margen de seguridad */
}


/* =======================================================
   4) HERO (vídeo fullscreen + overlay)
   ======================================================= */
.hero {
  position: relative;
  width: 100%;
  height: 100vh; 
  margin-top: 0;           /* coloca el hero debajo de la navbar */
  overflow: hidden;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0, var(--overlay-strength)) 0%,
    rgba(0,0,0, calc(var(--overlay-strength) * .70)) 70%,
    rgba(0,0,0, var(--overlay-strength)) 100%
  );
  pointer-events: none;
} /* [1](https://imaginatv-my.sharepoint.com/personal/pacebes_mediapro_tv/Documents/Archivos%20de%20Microsoft%C2%A0Copilot%20Chat/style2.css) */


/* =======================================================
   5) HERO: TEXTO / TITULARES
   ======================================================= */
.hero-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;   /* centra en X */
  justify-content: center; /* centra en Y */
  text-align: center;
  padding: 0 1rem;
  color: #fff;
  text-shadow: var(--shadow-strong);

  /* Aparición lenta y elegante */
  opacity: 0;
  transform: translateY(25px);
  animation: fadeUpSlow 2.2s ease-out 0.4s forwards;
}

/* Título editorial */
.title-script {
  font-family: "Cormorant Garamond", cursive;
  font-weight: 300; /* contraste fino */
  text-transform: uppercase;
  letter-spacing: 0.05em; /* tracking suave */
  font-size: clamp(var(--title-min), var(--title-pref), var(--title-max));
  line-height: 0.96;
  margin: 0 0 .3em 0;
  color: #fff;
}
/* Spans de control */
.title-script .name { display: inline; }
.title-script .amp  { display: inline; padding: 0 .16em; }

/* Subtítulo: fecha/lugar */
.place-date {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: clamp(var(--subtitle-min), var(--subtitle-pref), var(--subtitle-max));
  opacity: 0.92;
  margin: 0;
  color: #fff;
  text-shadow:
    0 2px 6px rgba(0,0,0,.55),          /* refuerza la sombra existente del set */
    0 0 1px rgba(0,0,0,.35);            /* contorno muy sutil */

} 



/* =======================================================
   HERO — CTA inferior centrado
   ======================================================= */
.hero-cta {
  position: absolute;
  left: 0; right: 0;
  bottom: 90px;                    /* separación del borde inferior */
  display: flex;
  justify-content: center;
  pointer-events: none;            /* evita tapar el vídeo salvo el botón */
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUpCTA 1.1s ease-out 1s forwards; /* delay 3s */
}


/* Keyframe más ligero que el del título */
@keyframes fadeUpCTA {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  60% {
    opacity: 0.8;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.btn-hero-confirm {
  pointer-events: auto;            /* el botón sí recibe clics */
  display: inline-block;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: "Cormorant Garamond", serif;
  font-weight: 650;                /* presencia tipo botón */
  font-size: 14px;
  padding: .6rem 1.25rem;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 999px;
  background: rgba(0,0,0,0.12);    /* sutil contraste sobre vídeo */
  backdrop-filter: blur(4px);      /* efecto glass suave si está disponible */
  text-shadow: 0 2px 6px rgba(0,0,0,0.55);
  transition: background .18s ease, border-color .18s ease, transform .18s ease, filter .18s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.22);
}

.btn-hero-confirm:hover,
.btn-hero-confirm:focus {
  background: rgba(255,255,255,0.16);
  border-color: #fff;
  filter: brightness(1.05);
  transform: translateY(-1px);
  outline: none;
}

.btn-hero-confirm:active {
  transform: translateY(0);
}

/* =======================================================
   RESPONSIVE (≤576px) — CTA
   ======================================================= */
@media (max-width: 576px) {
  .hero-cta { bottom: 70px; }
  .btn-hero-confirm {
    font-size: 12px;               /* legible en móvil, consistente con menú */
    padding: .65rem 1.1rem;
    letter-spacing: 0.12em;        /* un pelín menos para ahorrar ancho */
  }
}



/* =======================================================
   6) UTILIDADES + ANIMACIONES
   ======================================================= */
@keyframes fadeUpSlow {
  0%   { opacity: 0;   transform: translateY(25px); }
  40%  { opacity: 0.4; transform: translateY(18px); }
  70%  { opacity: 0.8; transform: translateY(8px); }
  100% { opacity: 1;   transform: translateY(0); }
}
.fade-up {
  opacity: 0;
  transform: translateY(12px);
  animation: fadeUpSlow 1.8s ease-out .2s forwards;
} /* [1](https://imaginatv-my.sharepoint.com/personal/pacebes_mediapro_tv/Documents/Archivos%20de%20Microsoft%C2%A0Copilot%20Chat/style2.css) */


/* =======================================================
   7) RESPONSIVE (≤576px) — agrupado por secciones
   ======================================================= */
@media (max-width: 576px) {

  /* 7.1 Body / variables */
  :root { --navbar-height: 42px; }

  /* 7.2 Navbar (ya es transparente arriba; aquí afinamos menú desplegado y tamaños) */
  .navbar .navbar-brand,
  .navbar .nav-link {
    color: #fff !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.45);
    font-size: 15px;
  }
  .navbar-collapse {
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(6px);
    border-radius: 10px;
    margin: .5rem;
    padding: .5rem;
  }

  /* 7.3 Hero */
  .hero {
    height: 100vh;
    margin-top: 0;
  }

  .hero-text{
    padding-top: clamp(90px, 20vh, 200px) !important;
    justify-content: flex-start !important;
  }

  /* 7.4 Hero: texto/títulos */
  .title-script {
    line-height: 1.02;
    letter-spacing: 0.04em;
  }
  .title-script .name { display: block; }
  .title-script .amp  {
    display: block;
    font-weight: 400;
    font-size: 1.15em; /* un poco más grande para equilibrio visual */
    margin: .05em 0;
    letter-spacing: 0.02em;
  }
} /* [1](https://imaginatv-my.sharepoint.com/personal/pacebes_mediapro_tv/Documents/Archivos%20de%20Microsoft%C2%A0Copilot%20Chat/style2.css) */


/* =======================================================
   8) ACCESIBILIDAD: REDUCCIÓN DE MOVIMIENTO
   ======================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero-text, .fade-up {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .navbar .nav-link { transition: none !important; }
} /* [1](https://imaginatv-my.sharepoint.com/personal/pacebes_mediapro_tv/Documents/Archivos%20de%20Microsoft%C2%A0Copilot%20Chat/style2.css) */


/* =======================================================
   9) SAFE AREAS iOS (opcional)
   ======================================================= */
@supports (padding: max(0px)) {
  .hero {
    padding-left:  max(env(safe-area-inset-left), 0px);
    padding-right: max(env(safe-area-inset-right), 0px);
  }
} /* [1](https://imaginatv-my.sharepoint.com/personal/pacebes_mediapro_tv/Documents/Archivos%20de%20Microsoft%C2%A0Copilot%20Chat/style2.css) */




.section-divider {
  width: min(86%, 1200px);
  margin: clamp(16px, 5vw, 60px) auto;
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(0,0,0,.12), transparent);
}

/* ============ NOSOTROS Intro — versión robusta responsive ============ */

/* Base (mobile-first) */
#nosotros-intro.nos-intro{
  position: relative;
  width: 100%;
  min-height: clamp(67vh, 72vh, 88vh);
  background-image: url("../images/nosotros-desktoop.png");
  background-repeat: no-repeat;
  background-position: 50% 90%;   /* móvil: centrada */
  background-size: 72% auto;      /* móvil: presencia sin recortar */
  padding: clamp(36px, 9vh, 110px) 0;
  overflow: hidden;
  scroll-margin-top: calc(var(--navbar-height) + 16px);
  margin-bottom: 5%;
}

/* Contenedor principal (móvil centrado) */
.nos-intro .container-intro{
  position: relative;
  z-index: 1;
  width: min(96%, 540px);
  margin: 6% auto 0 auto;
  text-align: center;
}

/* Titulares (móvil) */
.nos-intro__header{
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
}
.nos-intro__title{
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: clamp(21px, 5vw, 40px);
  line-height: 1.1;
  color: #5A4634;
  margin-bottom: 3.5%;
}
.nos-intro__supertitle{
  font-family: "Hurricane";
  font-weight: 500; /* contraste fino */
  /* text-transform: uppercase; */
  letter-spacing: 0.05em; /* tracking suave */
  font-size: clamp(35px, 7vw, 75px);
  color: #3B2413;
  line-height: normal;
  text-shadow: 0 2px 6px rgba(255,255,255,.35);
  margin-bottom: 3.5%;
}

/* Tablet (576–999): izquierda, más ancho pero contenido */
@media (min-width: 576px) and (max-width: 999px){
  #nosotros-intro.nos-intro{
    background-position: 90% 90%;   /* foco a la derecha */
    background-size: 65% auto;
  }
  .nos-intro .container-intro{
    margin: 5% 0 0 6%;
    padding-inline: 12px;
    max-width: 680px;
    justify-items: center;
  }
  .nos-intro__header{
    max-width: 560px;
    margin: 0;
    text-align: center;
    justify-items: center;
    gap: 1.4rem;
  }
  .nos-intro__title{ font-size: clamp(19px, 3vw, 28px); }
  .nos-intro__supertitle{ font-size: clamp(26px, 4vw, 40px); }
}

/* Portátil (1000–1400): izquierda, caja más amplia pero limitada */
@media (min-width: 1000px) and (max-width: 1400px){
  #nosotros-intro.nos-intro{
    background-position: 90% 90%;
    background-size: 64% ;       /* un poco menos de zoom para no cortar */
  }
  .nos-intro .container-intro{
    margin: 5% 0 0 6.5%;             /* ¡ojo!: sin centrado */
    max-width: 920px;
    justify-items: center;
  }
  .nos-intro__header{
    max-width: 600px;                 /* texto no se estira */
    margin: 0;
    text-align: center;
    justify-items: center;
    text-wrap: balance;
  }
  .nos-intro__title{ font-size: clamp(20px, 2.8vw, 34px); }
  .nos-intro__supertitle{
    font-size: clamp(28px, 3.4vw, 49px);
    letter-spacing: 0.02em;
  }
}

/* Desktop grande (≥1401): izquierda, fondo con algo más de presencia */
@media (min-width: 1401px){
  #nosotros-intro.nos-intro{
    background-position: 90% 90% !important;
    background-size: 55% ;
  }
  .nos-intro .container-intro{
    margin-left: 3%;
    max-width: 980px;
  }

  .nos-intro__supertitle{
    font-weight: 550;
  }
  .nos-intro__header{ max-width: 640px; }
}

/* Ultra-anchos (≥1600): evita “vacíos” excesivos */
@media (min-width: 1600px){
  #nosotros-intro.nos-intro{
    background-size: 70% ;     /* sube presencia del fondo sin romper */
    background-position: 40% 100%;
  }

   .nos-intro .container-intro{
    margin-left: 8%;
    width:  900px !important;
  }
  .nos-intro__header{ max-width: 900px; }

  .nos-intro__title{ font-size: 50px; }
  .nos-intro__supertitle{ font-size: 55px; } /* CAMBIO */
  

}

/* ==============================
   Calendario elegante (TBY) — V2
   ============================== */
.tby-calendar{
  width: min(340px, 78vw);           /* más ancho en desktop */
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  display: grid;
  justify-items: center;
  padding: 0 1rem 1rem 1rem;
  margin-top: .6rem;

  /* CENTRADO SIEMPRE */
  place-self: center;
  margin-inline: auto;
}


/* ====== Escritorio: D · H · M · S ====== */
.tby-cal-grid{
  width: 100%;
  display: grid;
  grid-auto-flow: column;
  align-items: end;
  justify-content: center;
  column-gap: clamp(10px, 2.4vw, 22px);
  padding-top: 2px;
}

.tby-cal-cell{
  display: grid;
  justify-items: center;
  row-gap: 2px;
  min-width: 58px;
}

.tby-cal-num{
  font-family: "Cinzel", serif;
  font-weight: 700;
  color: #3B2413;                     /* marrón chocolate */
  font-size: clamp(28px, 5vw, 44px);  /* tamaño número */
  line-height: 1;
}

.tby-cal-lab{
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7a6858;                     /* topo claro */
  font-size: clamp(10px, 1.6vw, 12px);
  line-height: 1.1;
}

/* Separadores puntuales */
.tby-cal-sep{
  font-family: "Cinzel", serif;
  color: #b59d86;
  font-size: clamp(18px, 3.2vw, 22px);
  align-self: center;
}

/* ====== Móvil: solo días ====== */
.tby-cal-body--mobile{
  display: none;
  font-family: "Cinzel", serif;
  text-transform: uppercase;
  text-align: center;
  color: #3B2413;
}
.tby-cal-body--mobile span{
  display: block;
  font-size: clamp(34px, 8vw, 52px);
  font-weight: 600;
}
.tby-cal-body--mobile small{
  display: block;
  font-size: clamp(10px, 3vw, 14px);
  color: #7a6858;
  letter-spacing: .2em;
  margin-top: 2px;
}



/* ====== MÓVIL: mostrar D · H · M · S ====== */
@media (max-width: 576px){
  .tby-calendar{
    width: min(230px, 75vw);
    padding: 0 .55rem .5rem .55rem;
  }

  /* MOSTRAR la grid completa en móvil */
  .tby-cal-grid{
    display: grid;
    column-gap: clamp(4px, 2.4vw, 8px);
    align-items: end;
    justify-content: center;
  }

  /* OCULTAR el bloque de solo días */
  .tby-cal-body--mobile{
    display: none;
  }

  /* Ajustes de tamaño para caber en pantallas pequeñas */
  .tby-cal-num{
    font-size: clamp(20px, 6.6vw, 28p);
  }
  .tby-cal-lab{
    font-size: clamp(9px, 2.7vw, 10.5px);
    letter-spacing: .18em;
  }
  .tby-cal-sep{
    font-size: clamp(12px, 3.4vw, 16px);
     transform: translateY(-5px);   
  }
  /* Ajustes ya presentes de tu layout móvil (los mantenemos) */
  .nos-intro .container-intro{
    width: 300px !important;
    margin-bottom: 0 !important;
  }
  #nosotros-intro.nos-intro {
    margin-top: 0% !important;
    background-image: url("../images/nosotros-mv2.png");
    background-repeat: no-repeat;
    background-size: 110% !important;
    margin-bottom: 0 !important;
  }
}

@media (max-height: 700px) and (max-width: 575.98px){
  #nosotros-intro.nos-intro {
    min-height: 85vh !important;
  }

}



/* ============================
   Calendario (TBY) — Layout coherente con el texto
   ============================ */

/* --- Base (móvil): centrado (texto + calendario) --- */
/* Nota: aquí mantenemos tu comportamiento actual de móvil */


/* --- Tablet y escritorio (≥576px): a la IZQUIERDA --- */
@media (min-width: 576px){
  /* Importante: anulamos el centrado por defecto */
  .tby-calendar{
    place-self: auto;            /* anula center del grid-self */
    margin-inline: 0;            /* quita auto-centro */
    margin-left: 0;              /* se apoya en el flujo del contenedor */
    text-align: left;
    width: min(340px, 78vw);     /* tu tamaño de desktop */
    padding: 0 1rem 1rem 1rem;   /* como definiste */
  }

  /* Como el contenedor de texto está a la izquierda, este bloque
     quedará alineado bajo los titulares dentro de .container-intro */
  .tby-cal-grid{ display: grid; }      /* en escritorio/tablet mostramos la grid D·H·M·S */
  .tby-cal-body--mobile{ display: none; }
}

/* --- Tablet (576–999): detalle de separación y ritmos --- */
@media (min-width: 576px) and (max-width: 999px){
  /* Ajustamos el ancho para que respire dentro de la caja de ~560–680px */
  .tby-calendar{
    width: min(300px, 60vw);
    margin-top: .8rem;
  }
  /* Un pequeño ajuste de tipografías para que no “griten” */
  .tby-cal-num{ font-size: clamp(24px, 4.2vw, 38px); }
  .tby-cal-lab{ font-size: clamp(10px, 1.8vw, 12px); }
}

/* --- Portátil (1000–1400): un pelín más de presencia --- */
@media (min-width: 1000px) and (max-width: 1400px){
  .tby-calendar{
    width: min(340px, 42vw);   /* algo más ancho si hay espacio */
    margin-top: 1rem;
  }
}

/* --- Desktop grande (≥1401): conserva proporción sin desbordar --- */
@media (min-width: 1401px){
  .tby-calendar{
    width: min(360px, 34vw);
  }
}

/* ==========================================================
   NOSOTROS — MÓVIL: efecto elegante on-scroll desde la izquierda
   - No mueve la imagen de fondo
   - Solo anima el contenido (container-intro)
========================================================== */
@media (max-width: 800px){

  /* Estado inicial (oculto y desplazado a la izquierda) */
  #nosotros-intro .container-intro,
  #nosotros .container-intro{
    opacity: 0;
    transform: translateX(-22px);
    transition:
      opacity 0.95s ease-out,
      transform 1.05s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
  }

  /* Al entrar en viewport → aparece suave desde la izquierda */
  #nosotros-intro.is-in .container-intro,
  #nosotros.is-in .container-intro{
    opacity: 1;
    transform: translateX(0);
  }
}

/* Accesibilidad: sin animaciones si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  #nosotros-intro .container-intro,
  #nosotros .container-intro{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}



/* ==========================================================
   PROGRAMA — sin cajas | <img> dentro de <li> | con “rayas”
   Desktop: grid 24 columnas (control total)
   Móvil: columna con alternancia izquierda/derecha real
   ========================================================== */

/* -------- Variables específicas de la sección -------- */
:root{
  --prog-ink:       #0f1a1a;   /* color principal del texto */
  --prog-atlantic:  #375b57;   /* color para horas (verde atlántico) */
  --prog-strip-a:   #F3E7D3;   /* arena */
  --prog-strip-b:   #D7E7DF;   /* verde agua pálido */
  --prog-gap:       clamp(6px, 1vw, 14px);
  --prog-maxw:      1400px;
}

/* -------- Contenedor y fondo “isleño + atlántico” -------- */
#programa.prog-nobox{
  position: relative;          /* crea un contexto propio */
  min-height: auto; 
  overflow: visible;
  display: flow-root;
  margin-top: 3%;
 
 /* --prog-blue:   #eef4f1;  */
  --prog-yellow: #f2eddc; /* arena suave (abajo) */

   /* background: linear-gradient(180deg, var(--prog-blue) 0%, var(--prog-yellow) 100%) !important; */
  background-color: var(--prog-yellow) !important; /* fallback */

  padding-top: clamp(20px, 7vw, 50px);
  padding-bottom: clamp(20px, 7vw, 50px) !important;
  transition: background 600ms ease;
}

#programa.prog-nobox::after{
  content: "";
  display: block;
  height: clamp(72px, 12vw, 160px); /* ajusta a tu gusto */
}

/* Si el último hijo deja margen, lo anulamos para que no “se coma” el fondo */
#programa.prog-nobox > *:last-child{
  margin-bottom: 0 !important;
}

/* DESPUÉS: no anules el wrap final */
#programa.prog-nobox > *:last-child:not(.prog-nobox__wrap){
  margin-bottom: 0 !important;
}
.prog-nobox__wrap{ max-width: var(--prog-maxw); margin: 0 auto; margin-bottom: 0% !important; }

.prog-nobox__title{
  font-family: "Cormorant Garamond", cursive;
  text-transform: uppercase;
  line-height: 1.02;
  color: #1E4748;                     /* coherente con body */
  text-align: center !important;
  margin: 0 0 clamp(24px, 6vw, 56px) 0;
  position: relative;
  padding-bottom: 2%;
  font-weight: 700;                       /* más presencia */
  font-size: clamp(42px, 5vw, 65x);      /* ligeramente más grande */
}


.prog-nobox__list{
  list-style: none;
  margin-left: 2%;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(36, 1fr);  /* <— clave para colocar fino */
  grid-auto-rows: 10px;
  gap: clamp(8px, 1.2vw, 18px);    /* unifica con utilidades del sitio */
}

/* Ítems (icono + textos) */
.prog-nobox__item{
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  row-gap: 8px;
}

/* ============ EVENTOS MÁS GRANDES (desktop/tablet) ============ */
.prog-nobox__icon{
  width: clamp(90px, 7vw, 140px);
  height: auto;
  object-fit: contain;
  display: block;  
  filter: saturate(.98) contrast(1.03);
  transition: transform .25s ease, filter .25s ease;
}


.prog-nobox__item:hover .prog-nobox__icon {
  transform: translateY(-2px) scale(1.02);
  filter: saturate(1) contrast(1.06);
}

.prog-nobox__text{ display: grid; gap: 4px; justify-items: center; text-align: center; }

.prog-nobox__name{
  font-family: "Cormorant Garamond", serif; /* alinea con resto */
  text-transform: uppercase;
  /* color: #222;                     sustituye var(--prog-ink) si quieres */
  font-weight: 600 !important;       /* más grueso */
  font-size: clamp(18px, 2.4vw, 23px) !important; 
  color: #3b2413;                    /* marrón chocolate elegante */
  letter-spacing: 0.08em;
  text-shadow: 0 1px 3px rgba(0,0,0,.10); 
}

.prog-nobox__time{
  font-family: "Cormorant Garamond", serif;
  text-transform: uppercase;
  color: #375b57;                  /* mantiene tu “atlantic”, aporta coherencia */
  opacity: 0.95;
  text-align: center;
  font-weight: 700 !important;       /* bien gordito para leer sobre iconos */
  font-size: clamp(14px, 2vw, 18px) !important;
  letter-spacing: 0.12em;
  text-shadow: 0 1px 3px rgba(0,0,0,.15);
}


/* Al mostrarse: transición elegante, delay controlado por --d */
#programa .prog-show {
  opacity: 1 !important;
  transition: opacity .45s ease-out var(--d, 0s); /* sin transform aquí */
}


/* ---- Colocación exacta de cada hito (ajústalo si quieres) ----
   fila 1: 1, 2, 3
   fila 2: 4, 5
*/

/* Ítems */
.prog-nobox__item--1{ grid-column: 1  / span 6; grid-row: 1; }  /* igual: ya está a la izquierda */
.prog-nobox__item--2{ grid-column: 8  / span 6; grid-row: 4; }  /* 9 → 7  (−2) */
.prog-nobox__item--3{ grid-column: 16 / span 6; grid-row: 1; }  /* 17 → 15 (−2)  ⇐ centrado */
.prog-nobox__item--4{ grid-column: 23 / span 6; grid-row: 4; }  /* 25 → 23 (−2) */
.prog-nobox__item--5{ grid-column: 31 / span 4; grid-row: 1; }  /* 33 → 31 (−2) */


/* Rayas (conectores) — “carriles” entre bloques */
.prog-nobox__stripe{
  place-self: center;
  opacity: .95;
  transform: none;
}

.prog-nobox__stripe img{
  height: clamp(20px, 2vw, 50px);
  width: clamp(60px, 3vw, 100px);
  border-radius: 6px;
  opacity: .96;
  filter: saturate(.95) contrast(1.02);
}



/* Stripes (conectores) */
.prog-nobox__stripe--a{ grid-column: 7  / span 2; grid-row: 8; } /* 7  → 5  (−2) */
.prog-nobox__stripe--b{ grid-column: 14 / span 2; grid-row: 8; } /* 14 → 12 (−2) */
.prog-nobox__stripe--c{ grid-column: 22 / span 2; grid-row: 8; } /* 24 → 22 (−2) */
.prog-nobox__stripe--d{ grid-column: 29 / span 2; grid-row: 8; } /* 31 → 29 (−2) */



/* Angulitos suaves en desktop/tablet */
.prog-nobox__stripe--a img{ transform: rotate(200deg);  transform-origin:center; }
.prog-nobox__stripe--b img{ transform: rotate(130deg); transform-origin:center; }
.prog-nobox__stripe--c img{ transform: rotate(220deg);  transform-origin:center; }
.prog-nobox__stripe--d img{ transform: rotate(320deg); transform-origin:center; }


/* Hover sutil (opcional) */
.prog-nobox__item:hover .prog-nobox__icon{
  transform: translateY(-2px) scale(1.015);
  transition: transform .25s ease;
}


/* ------- Desktop / Tablet (≥801px): fade + slide-up en ITEMS; stripes solo fade */
@media (min-width: 801px) {
  /* Estado inicial */

  .prog-nobox__list{ transform: translateX(-1%); } /* rango sugerido: -0.5% a -1% */
  
  #programa.seq-init .prog-nobox__item,
  #programa.seq-init .prog-nobox__stripe {
    opacity: 0;
    transform: translateY(14px);      /* deslizamiento sutil hacia arriba */
    filter: blur(3px);                /* toque elegante */
    scale: 0.995;
  }

  /* Estado visible: transición con mismas curvas/tiempos, controladas por --d */
  #programa .prog-nobox__item.prog-show,
  #programa .prog-nobox__stripe.prog-show {
    opacity: 1 !important;
    transform: none !important;
    filter: blur(0);
    transition:
      opacity   .55s ease-out var(--d, 0s),
      transform .60s cubic-bezier(.22,.61,.36,1) var(--d, 0s),
      filter    .60s ease-out var(--d, 0s);
  }

}

@media (min-width: 801px) and (max-width: 1450px){
/* Ítems */
  .prog-nobox__item--1{ grid-column: 4  / span 6; grid-row: 1; }  /* igual: ya está a la izquierda */
  .prog-nobox__item--2{ grid-column: 10  / span 6; grid-row: 4; }  /* 9 → 7  (−2) */
  .prog-nobox__item--3{ grid-column: 16 / span 6; grid-row: 1; }  /* 17 → 15 (−2)  ⇐ centrado */
  .prog-nobox__item--4{ grid-column: 22 / span 6; grid-row: 4; }  /* 25 → 23 (−2) */
  .prog-nobox__item--5{ grid-column: 28 / span 4; grid-row: 1; }  /* 33 → 31 (−2) */

  .prog-nobox__stripe img{
    height: clamp(20px, 2vw, 50px);
    width: clamp(50px, 2vw, 100px);
    border-radius: 6px;
    opacity: .96;
    filter: saturate(.95) contrast(1.02);
  }

  /* Stripes (conectores) */
  .prog-nobox__stripe--a{ grid-column: 9  / span 2; grid-row: 8; } /* 7  → 5  (−2) */
  .prog-nobox__stripe--b{ grid-column: 15 / span 2; grid-row: 8; } /* 14 → 12 (−2) */
  .prog-nobox__stripe--c{ grid-column: 22 / span 1; grid-row: 8; } /* 24 → 22 (−2) */
  .prog-nobox__stripe--d{ grid-column: 27 / span 2; grid-row: 8; } /* 31 → 29 (−2) */

}

/* ==========================================================
   PROGRAMA — Móvil optimizado
   Alternancia real izquierda/derecha sin modificar el HTML
========================================================== */

@media (max-width: 800px){

  /* Ajustes generales */
  #programa.prog-nobox{
    padding-bottom: 0 !important;
  }

  #programa.prog-nobox__title {
    margin-bottom: clamp(20px, 7vw, 44px);
  }

  /* Columna vertical */
  .prog-nobox__list{
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
  }

  /* Ítems */
  .prog-nobox__item{
    width: 100%;
    text-align: center;
    row-gap: 2px;
    margin: 0;
    max-width: 85%;
  }

  /* Ítems izquierda */
  .prog-nobox__list > li:nth-child(4n + 1).prog-nobox__item{
    align-self: flex-start;
    transform: translateX(-28px); /* forzado móvil */
  }

  /* Ítems derecha */
  .prog-nobox__list > li:nth-child(4n + 3).prog-nobox__item{
    align-self: flex-end;
    transform: translateX(28px); /* forzado móvil */
  }

  /* Rayas */
  .prog-nobox__stripe{
    width: 28%;
    max-width: 44px;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center;
    height: auto !important;
    transform: none !important;
  }

  .prog-nobox__stripe img{
    width: 100%;
    height: auto !important;
    border-radius: 3px;
    object-fit: cover;
  }

  /* Desplazamientos suaves según posición */
  .prog-nobox__list > li:nth-child(4n + 2).prog-nobox__stripe{
    transform: translateX(15%);
  }

  .prog-nobox__list > li:nth-child(4n + 4).prog-nobox__stripe{
    transform: translateX(-15%);
  }

  /* Textos */
  .prog-nobox__text {
    gap: 2px !important;
  }

  .prog-nobox__name {
    font-size: clamp(15px, 4.2vw, 19px) !important;
    line-height: 1.05 !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 0 !important;
  }

  .prog-nobox__time {
    font-size: clamp(11.5px, 3.4vw, 15px) !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
    font-weight: 700 !important;
    margin-top: 0 !important;
    opacity: 1;
  }

  .prog-nobox__name + .prog-nobox__time{
    margin-top: 3px;
  }

  /* Estados de aparición */
  #programa.seq-init .prog-nobox__item,
  #programa.seq-init .prog-nobox__stripe {
    opacity: 0;
  }

  #programa .prog-nobox__item.prog-show,
  #programa .prog-nobox__stripe.prog-show {
    opacity: 1 !important;
    transition: opacity .45s ease-out var(--d, 0s);
  }
}



/* ============================================
   RECOMENDACIONES — Responsive completo
============================================ */

@media (max-width:575px){
  .tby-reco {
    margin-top: 13%;
  }
}

/* ----- SECCIÓN GENERAL ----- */
.tby-reco {
  background: #f2eddc;
  scroll-margin-top: 80px;
 
}

.tby-reco__wrap {
  width: min(1100px, 92%);
  margin: auto;
}

/* ----- TÍTULO ----- */
.tby-reco__title {
  font-family: "Kalam", serif;
  text-align: center;
  font-size: clamp(28px, 6vw, 50px);
  text-transform: uppercase;
  color: #4a2c17;
  margin-bottom: clamp(24px, 6vw, 40px);
  letter-spacing: .12em;
}

/* Contenedor */
.reco-tabs{
  display:flex; flex-wrap:wrap; gap:18px;
  justify-content:center; align-items:center;
  margin: clamp(16px,4vw,28px) 0;
}

/* Enlaces “tab” */
.reco-tab{
  position:relative;
  padding: 6px 2px;
  color:#4a2c17;
  font-weight: 400;
  text-decoration:none;
  font-family:"Kalam";
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size: clamp(13px, 1.8vw, 15px);
  opacity:.9; transition: color .2s ease, opacity .2s ease;
}

/* Subrayado elegante animado */
/* .reco-tab::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px;
  height:2px; background: linear-gradient(90deg,#836957,#4a2c17,#836957);
  transform: scaleX(0); transform-origin: center;
  transition: transform .28s ease;
} */

/* Hover/activo */
.reco-tab:hover{ opacity:1; }
/* .reco-tab.is-active{ color:#3b2413; opacity:1; } */
.reco-tab.is-active::after{ transform: scaleX(1); }

/* En móvil, centradas y más separadas */
@media (max-width:576px){
  .reco-tabs{ gap:12px; }
  .reco-tab{ letter-spacing:.12em; }
}


/* ============================================
   MAPA 100% RESPONSIVE
============================================ */

/* ===== Contenedor elegante y responsive ===== */
.map-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;             /* recorta barras y respeta el radio */
  border-radius: 18px;          /* esquinas monas */
  /* box-shadow: 0 8px 24px rgba(0,0,0,.10); */
  background: #ddd;

  /* MÓVIL (más alto) */
  aspect-ratio: 4 / 5;
  min-height: 300px;
  margin-bottom: 5%;

  /* Recortes (ajustables) */
  --cut-top: 65px;              /* oculta barra superior */
  --cut-bottom: 34px;           /* oculta barra inferior */
}

/* Iframe ocupa todo el contenedor y se recorta por top/bottom */
.map-wrapper iframe {
  position: absolute;
  left: 0;
  width: 100%;
  border: none;
  border-radius: inherit;
  top: calc(-1 * var(--cut-top));
  height: calc(100% + var(--cut-top) + var(--cut-bottom));
}

/* ===== Tablet (más panorámico que móvil) ===== */
@media (min-width: 577px) and (max-width: 991px) {
  .map-wrapper {
    justify-items: center;
    aspect-ratio: 16 / 10;      /* 1.6:1 */
    min-height: 360px;
    --cut-top: 44px;
    --cut-bottom: 36px;
    margin: 0 auto;   /* <-- Centrado REAL */

  }
    h2.prog-nobox__title.tby-title-onda{
    margin: 0 !important;
  }
}

/* ===== Desktop “normal” ===== */
@media (min-width: 992px) and (max-width: 1399px) {
  .map-wrapper {
    justify-items: center;
    height: 450px;
    width: 900px;
    border-radius: 16px;
    --cut-top: 60px;
    --cut-bottom: 38px;
    margin: 0 auto;   /* <-- Centrado REAL */

  }
  h2.prog-nobox__title.tby-title-onda{
    margin: 0 !important;
  }
}

/* ===== NUEVO: Desktop ancho (≥1400px) → “menos largo” =====
   — Hacemos el mapa más panorámico para que no quede alto en exceso.
   — Puedes probar 16/9 si lo quieres más bajito todavía. */
@media (min-width: 1400px) {
  .map-wrapper {
    justify-items: center;
    aspect-ratio: 16 / 9;       /* 1.78:1, más bajo */
    min-height: 400px;          /* conserva una altura cómoda mínima */
    --cut-top: 60px;            /* barras algo mayores en anchos altos */
    --cut-bottom: 40px;
    margin: 0 auto;
  }
   h2.prog-nobox__title.tby-title-onda{
    margin: 0 !important;
  }
}

/* ===== Fallback si el navegador no soporta aspect-ratio ===== */
@supports not (aspect-ratio: 1 / 1) {
  .map-wrapper { height: auto; }
  .map-wrapper::before {
    content: "";
    display: block;
    padding-top: 125%;          /* ≈ 4:5 móvil */
  }
  @media (min-width: 577px) and (max-width: 991px) {
    .map-wrapper::before { padding-top: 62.5%; } /* 16:10 */
  }
  @media (min-width: 992px) and (max-width: 1399px) {
    .map-wrapper::before { padding-top: 66.6667%; } /* 3:2 */
  }
  @media (min-width: 1400px) {
    .map-wrapper::before { padding-top: 56.25%; }   /* 16:9 */
  }
  .map-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: calc(100% + var(--cut-top) + var(--cut-bottom));
    top: calc(-1 * var(--cut-top));
  }
}



/* =========================================================
   RECOMENDACIONES — Tabs estilo "pastilla" en azul del sitio
   — Mantiene tu HTML y JS actuales (.reco-tab / .is-active)
   — Accesible (focus-visible, contraste)
   — Bonito en móvil (gaps y tamaños fluidos)
   ========================================================= */


/* Paleta (si no la tienes en :root, descomenta esta sección) */
:root{
  --reco-teal: #1E4748;
  --reco-teal-ink: #113032;
  --reco-teal-600: #163A3C;
  --reco-teal-wash: #E9F0EF;
}


/* Contenedor: grid con columnas del mismo ancho */
.reco-tabs{
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 10px;
  align-items: center;
  justify-items: center;          /* centra las pastillas en su celda */
  margin: clamp(16px, 4vw, 24px) 8px;
}

/* Pastilla: ancho homogéneo + alto homogéneo */
.reco-tab{
  /* Tamaño consistente */
  inline-size: 100%;
  max-inline-size: 200px;         /* evita pastillas demasiado largas en desktop */
  block-size:36px;               /* alto fijo elegante y táctil */
  padding: 0 14px;                /* el alto lo marca block-size */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;            /* si algún texto es muy largo, ajusta max-inline-size o reduce font */

  /* Estética */
  border-radius: 999px;
  border: 1px solid var(--reco-teal);
  background:  rgba(255,255,255,.72);
  color: var(--reco-teal);
  box-shadow: 0 8px 22px rgba(0,0,0,.06);

  /* Tipografía */
  font-family: "Cormorant Garamond", serif;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;

  /* Interacciones */
  opacity: .95;
  transition:
    background .22s ease, color .22s ease, border-color .22s ease,
    box-shadow .22s ease, transform .18s ease, opacity .18s ease;
}

/* Hover: lavado teal sutil */
.reco-tab:hover{
  background: var(--reco-teal-wash);
  color: var(--reco-teal-ink);
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

/* Activa: inversión a teal pleno */
.reco-tab.is-active{
  background: var(--reco-teal);
  color: #fff;
  border-color: var(--reco-teal);
  box-shadow: 0 12px 34px rgba(22,58,60,.22); /* usa --reco-teal-600 */
  opacity: 1;
}

/* Accesibilidad: focus teclado visible y elegante */
.reco-tab:focus{ outline: none; }
.reco-tab:focus-visible{
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--reco-teal) 28%, white),
    0 10px 28px rgba(0,0,0,.10);
}

/* Ajustes en móviles: misma filosofía, un pelín más compactas */
@media (max-width: 575.98px){
  .reco-tabs{
    display: grid;
    grid-template-columns: repeat(2, 1fr);  /* 2 columnas iguales por fila en móvil */
    gap: 10px;
  }
  .reco-tab{
    block-size: 40px;
    font-size: 13px;
    letter-spacing: .10em;
    max-inline-size: none;                  /* que ocupen toda la celda */
  }
}



/* ==========================================================
   REVEAL GENÉRICO (para Programa y Nosotros)
   - Solo opacity + transform (sin filter/blur)
   - Variables para controlar tiempos
========================================================== */
:root{
  --rev-ease: cubic-bezier(.22,.61,.36,1);
  --rev-move: 18px;         /* desplazamiento inicial */
  --rev-dur: 0.90s;         /* duración por defecto (desktop) */
  --rev-dur-op: 0.80s;      /* opacidad por defecto */
}

/* Móvil: más lento como te gusta */
@media (max-width: 800px){
  :root{
    --rev-move: 16px;
    --rev-dur: 1.10s;
    --rev-dur-op: 1.00s;
  }
}

/* Estado inicial (oculto) */
.reveal {
  opacity: 0;
  transform: translateY(var(--rev-move));
  will-change: opacity, transform;
  transition:
    opacity var(--rev-dur-op) ease-out var(--delay, 0ms),
    transform var(--rev-dur) var(--rev-ease) var(--delay, 0ms);
}

/* Visible (al entrar en viewport) */
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================
   PROGRAMA — aplica reveal vertical en items y rayas
========================================================== */
#programa .prog-nobox__list > * {
  /* nada: el JS añadirá .reveal a cada <li> item/stripe */
}

/* ==========================================================
   NOSOTROS — solo DESKTOP: desde la izquierda
   (en móvil no tocamos tu entrada actual)
========================================================== */
@media (min-width: 801px){
  /* marca estos elementos con .nos-anim en tu HTML si no lo hiciste ya */
  .nos-anim {
    opacity: 0;
    transform: translateX(-26px);
    will-change: opacity, transform;
    transition:
      opacity 0.90s ease-out var(--delay, 0ms),
      transform 1.00s var(--rev-ease) var(--delay, 0ms);
  }
  .nos-anim.is-in {
    opacity: 1;
    transform: none;
  }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.is-visible,
  .nos-anim, .nos-anim.is-in {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ==========================================================
   DETALLES — Tabs (desktop) + cards (móvil)
   Objetivo: mantener la funcionalidad (Bootstrap pills + cards)
   pero con un look coherente con el resto (Cormorant / arena / atlántico)
========================================================== */

:root{
  --dt-ink:#3b2413;        /* marrón editorial */
  --dt-ink-2:#4a2c17;      /* marrón oscuro */
  --dt-sea:#375b57;        /* verde atlántico */
  --dt-paper:#f7f3ee;      /* arena */
  --dt-card:rgba(255,255,255,.72);
  --dt-border:rgba(0,0,0,.08);
  --dt-shadow:0 18px 60px rgba(0,0,0,.10);
}
@media (max-width: 575px){
  #detalles .prog-nobox__wrap{
    margin-top: 5%  !important;
    margin-bottom: 0 !important;
  }
}



/* Sección */
#detalles.dtabs{
  /* background:var(--dt-paper); */
  /* padding-top:clamp(20px,7vw,50px); */
  /* padding-bottom:clamp(72px,12vw,160px); */
}

/* Ornamento bajo el título (líneas + medallón) */
.dtabs__orn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:8px 0 18px;
}
.dtabs__orn > span{
  width:120px;
  height:1px;
  background:rgba(0,0,0,.12);
}
.dtabs__orn .orn-center{
  width:28px;
  height:28px;
  border-radius:999px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(0,0,0,.10);
  box-shadow:0 14px 40px rgba(0,0,0,.14);
  position:relative;
}
.dtabs__orn .orn-center::before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:999px;
  background:rgba(55,91,87,.20);
  border:1px solid rgba(55,91,87,.28);
}

/* ==========================================================
   DESKTOP — Tabs arriba
========================================================== */
.dtabs__topnav{
  gap:12px;
  width:100%;
  justify-content:center !important;
}
.dtabs__topnav .nav-link{
  border-radius:999px;
  padding:12px 20px;
  background:rgba(255,255,255,.70);
  border:1px solid var(--dt-border);
  box-shadow:0 12px 35px rgba(0,0,0,.06);
  font-family:"Cormorant Garamond",serif;
  color:var(--dt-ink-2);
  font-size:14px;
  letter-spacing:.18em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.dtabs__topnav .nav-link:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 45px rgba(0,0,0,.09);
  background:rgba(255,255,255,.82);
}
.dtabs__topnav .nav-link.active{
  background:linear-gradient(135deg, rgba(55,91,87,.96), rgba(15,26,26,.96));
  color:rgba(255,255,255,.95);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 18px 55px rgba(0,0,0,.14);
}
.dtabs__emoji{
  opacity:1 !important;
  font-size:18px;
  line-height:1;
  margin-right:10px;
  transform:translateY(1px);
}

/* ==========================================================
   CONTENIDO — Panel (desktop)
========================================================== */
.dtabs__pane{
  border-radius:22px;
  overflow:hidden;
  background:var(--dt-card);
  border:1px solid var(--dt-border);
  box-shadow:var(--dt-shadow);
}
.dtabs__hero{
  height:clamp(220px,22vw,290px);
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.35)),
    var(--img);
  background-size:cover;
  background-position:center;
  filter:saturate(.95) contrast(1.02);
}
.dtabs__body{ padding:18px; }

.dtabs__place{
  margin:0 0 12px 0;
  font-family:"Cormorant Garamond",serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:clamp(18px,2.2vw,24px);
  background:linear-gradient(to right, #836957 0%, var(--dt-ink-2) 40%, #836957 100%);
  -webkit-background-clip:text;
  color:transparent;
}
.dtabs__grid{
  display:grid;
  gap:12px;
  margin-top:12px;
}

/* Label + value */
.dtabs__item{
  display:grid;
  grid-template-columns:190px 1fr;
  gap:12px;
  padding-top:12px;
  border-top:1px solid rgba(0,0,0,.10);
}
.dtabs__label{
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
  font-family:"Cormorant Garamond",serif;
  font-size:12px;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--dt-sea);
  opacity:1 !important;
}
.dtabs__label span{
  opacity:1 !important;
  width:22px;
  flex:0 0 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  line-height:1;
}
.dtabs__value{
  color:rgba(43,43,43,.95) !important;
  opacity:1 !important;
  line-height:1.55;
}

.dtabs__links a{
  display:inline-block;
  margin-right:18px;
  text-decoration:none;
  font-family:"Cormorant Garamond",serif;
  color:var(--dt-ink-2) !important;
  opacity:1 !important;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  position:relative;
  padding-bottom:3px;
}
.dtabs__links a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:rgba(55,91,87,.45);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .25s ease;
}
.dtabs__links a:hover::after{
  transform:scaleX(1);
  transform-origin:left;
}

/* Altura fija en desktop (evita salto al cambiar tabs) */
@media (min-width:992px){

  /* Layout desktop seguido (sin tabs): 2 filas alternando imagen/texto */
  .dt-desktop{
    width:100%;
    max-width:var(--prog-maxw,1400px);
    margin:0 auto;
    padding:0 clamp(16px,3vw,36px);
  }

  .dt-row{
    display:flex;
    align-items:stretch;
    gap:clamp(24px,3.5vw,64px);
    margin:0 auto clamp(40px,5vw,80px) auto;
  }

  .dt-row--reverse{
    flex-direction:row-reverse; /* foto a la derecha, texto a la izquierda */
  }

  /* Foto “a pelo”: sin tarjeta blanca, sin borde, sin sombra */
  .dt-photo{
    flex:0 0 48%;
    min-height:clamp(360px,28vw,520px);
    background-image:var(--img);
    background-size:cover;
    background-position:center;
    border-radius:0;
    box-shadow:none;
  }

  .dt-text{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:0;
    background:transparent;
  }

  .dt-title{
    margin:0 0 14px 0;
    font-family:"Cormorant Garamond",serif;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.10em;
    font-size:clamp(18px,2.2vw,26px);
    background:linear-gradient(to right, #836957 0%, var(--dt-ink-2, #4a2c17) 40%, #836957 100%);
    -webkit-background-clip:text;
    color:transparent;
  }

  .dt-label{
    margin:14px 0 4px 0;
    font-family:"Cormorant Garamond",serif;
    font-size:12px;
    letter-spacing:.20em;
    text-transform:uppercase;
    color:var(--dt-sea, #1C2A3A);
  }

  .dt-value{
    margin:0;
    font-family:"Cormorant Garamond",serif;
    font-size:18px;
    line-height:1.55;
    color:#1C2A3A;
  }

  .dt-map a{
    display:inline-block;
    text-decoration:none;
    font-family:"Cormorant Garamond",serif;
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--dt-ink-2, #4a2c17) !important;
    position:relative;
    padding-bottom:3px;
  }
  .dt-map a::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:1px;
    background:rgba(55,91,87,.45);
    transform:scaleX(0);
    transform-origin:right;
    transition:transform .25s ease;
  }
  .dt-map a:hover::after{
    transform:scaleX(1);
    transform-origin:left;
  }

  .dt-note{
    margin:14px 0 0 0;
    font-family:"Cormorant Garamond",serif;
    font-size:16px;
    line-height:1.55;
    opacity:.92;
  }
}

/* ==========================================================
   MÓVIL — Cards seguidas
========================================================== */


.dtm{
  display:grid;
  gap:14px;
}
.dtm__card{
  border-radius:18px;
  overflow:hidden;
  background:var(--dt-card);
  border:1px solid var(--dt-border);
  box-shadow:0 14px 45px rgba(0,0,0,.08);
}
/* Foto móvil */
.dtm__media{
  height:170px;
  position:relative;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.35)),
    var(--img);
  background-size:cover;
  background-position:center;
  filter:saturate(.95) contrast(1.02);
}
/* Tag overlay dentro de foto (abajo izq) */
.dtm__tagOverlay{
  position:absolute;
  left:10px;
  bottom:12px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(0,0,0,.10);
  box-shadow:0 12px 30px rgba(0,0,0,.12);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-family:"Cormorant Garamond",serif;
  font-size:11px;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--dt-ink-2);
  opacity:1;
}
.dtm__body{
  padding:14px 14px 16px;
  font-size:13px;
}
.dtm__title{
  margin:0 0 10px 0;
  font-family:"Cormorant Garamond",serif;
  font-weight:600;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--dt-ink-2);
  font-size:18px;
}
.dtm__rows{
  display:grid;
  gap:10px;
}
.dtm__row{
  display:grid;
  grid-template-columns:108px 1fr;
  gap:10px;
  padding-top:10px;
  border-top:1px solid rgba(0,0,0,.10);
}
/* Label móvil */
.dtm__k{
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
  font-family:"Cormorant Garamond",serif;
  font-size:11px;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--dt-sea);
  opacity:1;
}
.dtm__k span{
  opacity:1 !important;
  width:18px;
  flex:0 0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  line-height:1;
}
.dtm__v{
  color:rgba(43,43,43,.95);
  opacity:1;
  line-height:1.5;
}
/* Links móvil */
.dtm__links a{
  text-decoration:none;
  color:inherit;
  font-weight:600;
  letter-spacing:.04em;
  position:relative;
  padding-bottom:2px;
  opacity:1;
}
.dtm__links a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:rgba(55,91,87,.45);
}

/* Responsive: medallón un pelín más pequeño */
@media (max-width:575.98px){
  .dtabs__orn .orn-center{ width:26px; height:26px; }
  .dtabs__orn .orn-center::before{ inset:7px; }
  #detalles.dtabs{
   margin-top:-10%;
  }
}

/* ==========================================================
   DETALLES — Rediseño desktop (más elegante, mejor reparto)
   - No afecta móvil
   - Quita cualquier “línea/ornamento” bajo el título si existiera
========================================================== */
@media (min-width:992px){

  /* El título “DETALLES” respira antes del contenido */
  #detalles .prog-nobox__title{
    margin-bottom:clamp(26px,3vw,44px) !important;
    padding-bottom:0 !important;
    border-bottom:none !important;
  }

  /* Por si en algún momento existiera el ornamento */
  #detalles .dtabs__orn{ display:none !important; }

  /* Un poco de aire desde el título hacia el primer bloque */
  #detalles .dt-desktop{
    margin-top:clamp(18px,2.4vw,36px);
  }

  /* Layout: grid editorial (mejor “reparto” que flex) */
  #detalles .dt-row{
    display:grid !important;
    grid-template-columns:minmax(520px,1.15fr) minmax(380px,.85fr);
    align-items:stretch;
    gap:clamp(28px,4vw,72px);
    margin:0 auto clamp(44px,5vw,88px) auto;
    max-width:1180px;
  }
  #detalles .dt-row--reverse{
    grid-template-columns:minmax(380px,.85fr) minmax(520px,1.15fr);
  }
  #detalles .dt-row--reverse .dt-photo{ order:2; }
  #detalles .dt-row--reverse .dt-text{ order:1; }

  /* Foto: más premium (sombra + overlay sutil) */
  #detalles .dt-photo{
    min-height:clamp(360px,28vw,520px);
    border-radius:28px !important;
    box-shadow:0 22px 70px rgba(0,0,0,.16) !important;
    overflow:hidden;
    position:relative;
    background-image:var(--img);
    background-size:cover;
    background-position:center;
    transform:translateZ(0);
  }
  #detalles .dt-photo::after{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(1200px 600px at 20% 10%, rgba(255,255,255,.18), rgba(255,255,255,0) 55%),
      linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.18) 60%, rgba(0,0,0,.26) 100%);
    pointer-events:none;
  }

  /* Panel de texto: glass + detalle vertical (evita “vacío”) */
  #detalles .dt-text{
    width:100%;
    align-self:center;
    position:relative;
    padding:
      clamp(24px,2.4vw,38px)
      clamp(22px,2.2vw,34px)
      clamp(22px,2.2vw,34px)
      clamp(34px,3.2vw,48px);
    border-radius:28px;
    background:
      radial-gradient(900px 480px at 20% 10%, rgba(55,91,87,.08), rgba(55,91,87,0) 60%),
      rgba(255,255,255,.70);
    border:1px solid rgba(0,0,0,.08);
    box-shadow:0 18px 60px rgba(0,0,0,.10);
    backdrop-filter:blur(8px);
  }
  #detalles .dt-text::before{
    content:"";
    position:absolute;
    left:18px;
    top:18px;
    bottom:18px;
    width:1px;
    background:linear-gradient(180deg, rgba(55,91,87,0), rgba(55,91,87,.45), rgba(55,91,87,0));
    opacity:.95;
  }
  /* “Medallón” decorativo MUY sutil para dar acabado editorial */
  #detalles .dt-text::after{
    content:"";
    position:absolute;
    right:18px;
    top:18px;
    width:46px;
    height:46px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.08);
    background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,.55));
    box-shadow:0 18px 50px rgba(0,0,0,.10);
    opacity:.40;
    pointer-events:none;
  }

  /* Jerarquía tipográfica (H3/H4 diferenciados) */
  #detalles .dt-sectionTitle{
    margin:0 0 10px 0;
    font-family:"Cormorant Garamond",serif;
    font-weight:650;
    text-transform:uppercase;
    letter-spacing:.34em;
    font-size:14px;
    color:var(--dt-sea);
  }
  #detalles .dt-placeTitle{
    margin:0 0 18px 0;
    font-family:"Cormorant Garamond",serif;
    font-weight:500;
    letter-spacing:.02em;
    font-size:clamp(30px,2.8vw,40px);
    color:var(--dt-sea, #1C2A3A);
    line-height:1.05;
    position:relative;
    padding-bottom:12px;
  }
  #detalles .dt-placeTitle::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:72px;
    height:1px;
    background:linear-gradient(to right, rgba(74,44,23,.55), rgba(74,44,23,.12));
  }

  /* Labels y texto */
  #detalles .dt-label{
    margin:10px 0 6px 0;
    font-family:"Cormorant Garamond",serif;
    font-size:12px;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--dt-sea, #1C2A3A);
  }
  #detalles .dt-value{
    margin:0 0 10px 0;
    font-size:18px;
    line-height:1.45;
    color:var(--dt-ink);
    max-width:56ch;
  }
  #detalles .dt-map a{
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:12px;
    color:var(--dt-sea);
    text-decoration:none;
    border-bottom:1px solid rgba(55,91,87,.35);
    padding-bottom:2px;
  }
  #detalles .dt-map a:hover{
    border-bottom-color:rgba(55,91,87,.75);
  }
  #detalles .dt-note{
    margin-top:16px;
    font-size:16px;
    color:rgba(59,36,19,.80);
    font-style:italic;
  }
}

/* --- DETALLES Minimal Override (Final) --- */
@media (min-width:992px){
  #detalles .dt-row{ display:flex; gap:80px; margin-bottom:120px; margin-left:40px; margin-right:40px; }
  #detalles .dt-photo{ border-radius:0 !important; box-shadow:none !important; }
  #detalles .dt-text{ background:none !important; border:none !important; box-shadow:none !important; padding:0 !important; }
  #detalles .dt-text::before, #detalles .dt-text::after{ display:none !important; }
  #detalles .dt-sectionTitle{ font-size:14px; letter-spacing:.3em; }
  #detalles .dt-placeTitle{ font-size:48px; margin-bottom:28px; }
  #detalles .dt-value{ font-size:22px; line-height:1.6; }
}

/* Fix lateral margin for DETALLES desktop */
@media (min-width:992px){
  #detalles .dt-row{ margin-left:40px; margin-right:40px; }
}

/************************************************************
 *  DETALLES — márgenes laterales SOLO en móvil
 *  (en escritorio no se toca nada de DETALLES)
************************************************************/
@media (max-width:991.98px){
  /* Aplica “aire” a cada fila de Detalles en móviles */
  #detalles .dtm{ padding-left:16px; padding-right:16px; }

  /* Garantiza que cada card no se pegue a los bordes */
  #detalles .dtm__card,
  #detalles .dtm .dtm__card{
    margin-left:auto;
    margin-right:auto;
    width:100%;
    /* Si tu CSS previo forzara bordes, puedes añadir:
       box-shadow:0 6px 20px rgba(0,0,0,.08);
       border-radius:14px;
    */
  }

  /* Si la imagen superior “sangra”, resuelve borde interior */
  #detalles .dtm__media{
    border-top-left-radius:14px;
    border-top-right-radius:14px;
    overflow:hidden;
  }
}


/* =========================================================
   DETALLES — Móvil: animación de entrada por scroll
   Ceremonia: desde la izquierda | Celebración: desde la derecha
   Rebote suave, sin blur
   ========================================================= */
@media (max-width: 575.98px) {

  /* Estado inicial (oculto/desplazado) */
  .dtm > .dtm__card {
    opacity: 0;
    transform: translateX(0);
    will-change: opacity, transform;
  }

  /* Primera card (Ceremonia) → desde la IZQUIERDA */
  .dtm > .dtm__card:nth-of-type(1).is-in {
    animation: tby-in-left-bounce .48s cubic-bezier(.16,.84,.44,1) both;
  }

  /* Segunda card (Celebración) → desde la DERECHA */
  .dtm > .dtm__card:nth-of-type(2).is-in {
    animation: tby-in-right-bounce .48s cubic-bezier(.16,.84,.44,1) both;
  }

  /* Keyframes: rebote suave */
  @keyframes tby-in-left-bounce {
    0%   { opacity: 0; transform: translateX(-22px); }
    70%  { opacity: 1; transform: translateX(6px); }
    100% { opacity: 1; transform: translateX(0); }
  }
  @keyframes tby-in-right-bounce {
    0%   { opacity: 0; transform: translateX(22px); }
    70%  { opacity: 1; transform: translateX(-6px); }
    100% { opacity: 1; transform: translateX(0); }
  }
}

/* Accesibilidad: si el usuario reduce movimiento, no animar */
@media (prefers-reduced-motion: reduce){
  .dtm > .dtm__card { opacity: 1 !important; transform: none !important; }
  .dtm > .dtm__card.is-in { animation: none !important; }
}

/* Detalles — micro badge de traslado */
.dt-bus__badge{
  display:inline-block;
  margin-left:.4rem;
  padding:.2rem .5rem;
  font-size: .72rem;
  letter-spacing:.12em;
  text-transform: uppercase;
  border:1px solid rgba(55,91,87,.28);
  border-radius:999px;
  color:#375b57;
  background: rgba(255,255,255,.8);
  white-space: nowrap;
}


/* DETALLES — Desktop: reveal lateral por fila (Ceremonia ←, Celebración →) */
@media (min-width: 992px) {
  /* Estado inicial de cada fila */
  #detalles .dt-desktop .dt-row {
    --tby-shift: 0px;                /* desplazamiento lateral inicial */
    opacity: 0;
    transform: translateX(var(--tby-shift));
    will-change: opacity, transform;
    transition:
      opacity .70s ease-out,
      transform .80s cubic-bezier(.22,.61,.36,1);
  }

  /* Dirección de entrada determinada por data-dir (la marcamos desde JS) */
  #detalles .dt-desktop .dt-row[data-dir="left"]  { --tby-shift: -28px; }
  #detalles .dt-desktop .dt-row[data-dir="right"] { --tby-shift:  28px; }

  /* Cuando el observer activa la fila */
  #detalles .dt-desktop .dt-row.is-in {
    opacity: 1;
    transform: translateX(0);
  }

  /* (Opcional bonito) Micro-desfase del contenido de texto respecto a la foto */
  #detalles .dt-desktop .dt-row .dt-text {
    opacity: 0;
    transform: translateX(calc(var(--tby-shift) * 0.35));
    transition:
      opacity .65s ease-out .05s,
      transform .75s cubic-bezier(.22,.61,.36,1) .05s;
  }
  #detalles .dt-desktop .dt-row.is-in .dt-text {
    opacity: 1;
    transform: none;
  }
}





/* ==========================================================
   ALOJAMIENTO — sección base
========================================================== */
.alojamiento-section {
  /* padding: 80px 0; */
  /* background: #f7f3ee; */
  margin-top: 50px;
}

.aloj-title {
  text-align: center;
  font-family: "Cormorant Garamond";
  font-size: 48px;
  margin-bottom: 40px;
}

.aloj-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ==========================================================
   MÓVIL (<992px)
========================================================== */
@media (max-width: 991.98px) {

  .aloj-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
  }

  .aloj-photo {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
  }

  .aloj-body {
    padding: 20px;
  }

  .aloj-name {
    text-align: left;
    font-size: 24px;
    margin-bottom: 12px;
    font-family: "Cormorant Garamond";
  }
}

/* ==========================================================
   ESCRITORIO (≥992px)
========================================================== */
@media (min-width: 992px) {

  .aloj-card {
    width: 60vw;
    max-width: 1200px;
    margin: auto;
    display: flex;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
  }

  .aloj-photo {
    width: 320px;
    flex: 0 0 320px;
    height: 220px;
    background-size: cover;
    background-position: center;
  }

  .aloj-body {
    padding: 28px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .aloj-name {
    text-align: center;
    font-size: 32px;
    margin-bottom: 16px;
    font-family: "Cormorant Garamond";
  }
}

/* ==========================================================
   ELEMENTOS COMUNES
========================================================== */
.aloj-links a {
  margin-right: 20px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #375b57;
  text-decoration: none;
  border-bottom: 1px solid rgba(55,91,87,.4);
}

.aloj-comment {
  font-size: 14px;
  margin-top: 10px;
  color: #555;
}



/* ==========================================================
   RSVP — Base (tema oscuro botella) + Ornamento + Form
========================================================== */
.rsvp{
  --ink: rgba(15,47,43,.92);
  --muted: rgba(15,47,43,.70);
  --soft: rgba(15,47,43,.45);
  --border: rgba(15,47,43,.12);
  --bg: rgba(255,255,255,.72);
  --bg2: rgba(255,255,255,.90);

  position: relative;
  overflow: hidden;
  color: var(--ink);
}


.rsvp::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:  #f2eddc !important;
}

.rsvp .container{ position: relative; z-index: 1; }

/* ---------------- Header ---------------- */
.rsvp__header{
  text-align: center;
  margin-bottom: clamp(16px, 2.4vw, 24px);
}
.rsvp__kicker{
  color:#fff;
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.7;
}

/* Ornamento */
.rsvp__orn{
  display:flex;align-items:center;justify-content:center;
  gap:14px;margin-top:14px;
}
.rsvp__orn > span:not(.orn-center){
  height:1px;width:120px;background:#fff;opacity:.35;
}
.rsvp__orn .orn-center{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:999px;
  background:#fff;border:1px solid rgba(0,0,0,.08);
  overflow:hidden;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 14px 40px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.6);
}
.rsvp__orn .orn-icon{
  width:64%;height:64%;display:block;
  stroke:rgba(15,47,43,.78);
  pointer-events:none;stroke-width:1.5;
}

/* Hover (solo puntero fino) */
@media (hover:hover) and (pointer:fine){
  .rsvp__orn .orn-center{
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .rsvp__orn .orn-center:hover{
    transform: translateY(-1px);
    box-shadow: 0 18px 55px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.65);
  }
}

/* Ornamento — móvil compacto */
@media (max-width:575.98px){
  .rsvp__orn > span:not(.orn-center){ width:100px; }
  .rsvp__orn .orn-center{ width:26px;height:26px; }
  .rsvp__orn .orn-icon{ width:68%;height:68%; }
}

/* ---------------- Form (card) ---------------- */
.rsvp__form{
  margin-top:clamp(14px, 2.2vw, 20px);
  padding:clamp(16px, 3.2vw, 28px);
  border-radius:26px;
  border:1px solid var(--border);
  background:var(--bg);
  box-shadow:0 26px 90px rgba(0,0,0,.10);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}

/* Grid */
.rsvp__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px 18px;
}

/* Fields */
.rsvp__field{
  display:grid;gap:8px;align-content:start;
}
.rsvp__field--full{ grid-column:1 / -1; }
.rsvp__field > span{
  font-size:11px;letter-spacing:.20em;text-transform:uppercase;
  color:rgba(15,47,43,.74);
}

.rsvp__field input[type="text"],
.rsvp__field select,
.rsvp__field textarea{
  width:100%;
  border-radius:18px;
  border:1px solid var(--border);
  background:var(--bg2);
  color:var(--ink);
  padding:13px 15px;
  font-size:15px;line-height:1.35;
  box-shadow:0 16px 55px rgba(0,0,0,.06);
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}
.rsvp__field textarea{ resize:vertical;min-height:46px; }
.rsvp__field input::placeholder,
.rsvp__field textarea::placeholder{ color:var(--soft); }

.rsvp__field input:focus,
.rsvp__field select:focus,
.rsvp__field textarea:focus{
  outline:none;border-color:rgba(15,47,43,.26);
  background:rgba(255,255,255,.92);
  box-shadow:0 0 0 4px rgba(15,47,43,.08), 0 22px 70px rgba(0,0,0,.10);
}

/* Select arrow */
.rsvp__field select{
  cursor:pointer;appearance:none;-webkit-appearance:none;
  padding-right:40px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(15,47,43,.55) 50%),
    linear-gradient(135deg, rgba(15,47,43,.55) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

.rsvp__field b{ font-weight:700;color:rgba(15,47,43,.70); }

/* ---------------- Guests (dinámico) ---------------- */
#guestsContainer{ padding:0; }

.rsvp__guestsHeader{
  margin-top:10px;
  padding:18px 6px 0;
  border-top:1px solid rgba(15,47,43,.12);
}
.rsvp__guestsTitle{
  margin:0 0 6px;
  font-family:"Cinzel","Playfair Display",Georgia,serif;
  letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  font-size:16px;color:var(--ink);
}
.rsvp__guestsNote{
  margin:0 0 10px;color:rgba(15,47,43,.62);
  font-size:14px;line-height:1.6;
}

.rsvp__guest{
  margin-top:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.78);
  border-radius:20px;
  padding:14px;
  box-shadow:0 22px 70px rgba(0,0,0,.08);
}
.rsvp__guestTitle{
  padding:0 6px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
}
.rsvp__grid--guest{
  display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;margin-top:10px;
}

/* ---------------- Botón + status ---------------- */
.rsvp__button{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;margin-top:18px;
  border:1px solid #1C2A3A;border-radius:999px;
  padding:15px 18px;
  background:linear-gradient(180deg, #1C2A3A, #131d29);
  color:rgba(255,255,255,.94);
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  box-shadow:0 26px 90px rgba(0,0,0,.16);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  cursor:pointer;
}
.rsvp__button:hover{ transform:translateY(-2px);box-shadow:0 30px 100px rgba(0,0,0,.18); }
.rsvp__button:active{ transform:translateY(0);box-shadow:0 18px 70px rgba(0,0,0,.14); }
.rsvp__button:disabled{ opacity:.70;cursor:default;transform:none; }

/* Mensajes */
.rsvp__note{
  min-height:24px;margin:12px 0 0;text-align:center;
  font-size:13px;line-height:1.6;color:var(--muted);
}
#rsvpStatus:not(:empty){
  display:inline-block;width:100%;
  padding:10px 12px;border-radius:16px;
  background:rgba(255,255,255,.72);
  border:1px solid var(--border);
  box-shadow:0 14px 45px rgba(0,0,0,.08);
}

/* Honeypot */
.rsvp__hp{
  position:absolute !important;left:-9999px !important;
  width:1px !important;height:1px !important;
  opacity:0 !important;pointer-events:none !important;
}

/* Responsive */
@media (max-width:991.98px){
  .rsvp__grid, .rsvp__grid--guest{ grid-template-columns:1fr; }
}

@media(max-width:575.98px){
  .rsvp__introText{
    margin-left: 10px;
    margin-right: 10px;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion:reduce){
  #guestsContainer, .rsvp__guest{ animation:none !important; }
  .rsvp__field input[type="text"], .rsvp__field select, .rsvp__field textarea, .rsvp__button{ transition:none !important; }
}

/* ==========================================================
   RSVP — Tema “arena editorial” (override de estilo)
   Reutiliza paleta global y pisa el tema oscuro cuando #rsvp.rsvp
========================================================== */
:root{
  --paper:#f7f3ee;
  --ink:#3b2413;
  --ink-2:#4a2c17;
  --atlantic:#375b57;
  --hairline:rgba(0,0,0,.10);
  --card-bg:rgba(255,255,255,.72);
  --card-border:rgba(0,0,0,.08);
  --card-shadow:0 18px 60px rgba(0,0,0,.10);
}

/* Contenedor y fondo */
#rsvp.rsvp{
  /* background:var(--paper) !important; */
  /* color:var(--ink) !important; */
}
#rsvp.rsvp::before{
  /* background:
    radial-gradient(900px 420px at 20% 15%, rgba(55,91,87,.10), transparent 55%),
    radial-gradient(760px 360px at 85% 35%, rgba(131,105,87,.10), transparent 60%); */
} 

/* Header (Cormorant + degradado “detalles”) */
.rsvp__kicker{
  font-family:"Cormorant Garamond",serif;
  color:rgba(59,36,19,.70) !important;
  letter-spacing:.18em;
}


/* Ornamento “detalles” */
.rsvp__orn > span:not(.orn-center){
  background:rgba(0,0,0,.12) !important;opacity:1 !important;
}
.rsvp__orn .orn-center{
  background:rgba(255,255,255,.86) !important;
  border:1px solid rgba(0,0,0,.10) !important;
  box-shadow:0 14px 40px rgba(0,0,0,.14) !important;
}
.rsvp__orn .orn-icon{ stroke:rgba(55,91,87,.82) !important; }

/* Form card “glass” */
.rsvp__form{
  background:var(--card-bg) !important;
  border:1px solid var(--card-border) !important;
  box-shadow:var(--card-shadow) !important;
}

/* Labels */
.rsvp__field > span{
  font-family:"Cormorant Garamond",serif;
  letter-spacing:.20em;text-transform:uppercase;
  color:var(--atlantic) !important;
}

/* Inputs */
.rsvp__field input,
.rsvp__field select,
.rsvp__field textarea{
  font-family:"Cormorant Garamond",serif !important;
  border-radius:16px !important;
  border:1px solid rgba(0,0,0,.12) !important;
  background:rgba(255,255,255,.88) !important;
  color:rgba(43,43,43,.95) !important;
  box-shadow:none !important;
}
.rsvp__field input:focus,
.rsvp__field select:focus,
.rsvp__field textarea:focus{
  outline:none !important;
  border-color:rgba(55,91,87,.40) !important;
  box-shadow:0 0 0 4px rgba(55,91,87,.12) !important;
}

/* Botón enviar */
.rsvp__button{
  font-family:"Cormorant Garamond",serif !important;
  letter-spacing:.18em !important;
  text-transform:uppercase;
  border-radius:999px !important;
  padding:.8rem 1.25rem !important;
  background:#1E4748 !important;
  color:rgba(255,255,255,.95) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 18px 55px rgba(0,0,0,.14) !important;
  transition:transform .18s ease, filter .18s ease;
}
.rsvp__button:hover,
.rsvp__button:focus{
  transform:translateY(-1px);
  filter:brightness(1.05);
  outline:none;
}

/* Nota */
.rsvp__note{
  font-family:"Cormorant Garamond",serif;
  color:rgba(59,36,19,.70) !important;
}



/* RSVP — Fondo azul mar oscuro con vignette suave */
#rsvp.rsvp{
  background: #f2eddc !important; /* base azul mar */
}

/* Vignette discreta para profundidad y lectura */
#rsvp.rsvp::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1100px 520px at 20% 10%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.22)); /* muy sutil */
}



/* ===========================================
   RSVP – Pills con blink sincronizado
   =========================================== */

/* Paleta: 
   - Primaria (alerta elegante): teal atlántico.
   - Acento (reservar YA): ámbar, para sensación de “precio en subida”. */
:root{
  --pill-ink:           #2a1208;  /* texto oscuro coherente con tu gama */
  --pill-primary:       #00AFA0;  /* teal vibrante (alerta elegante) */
  --pill-primary-2:     #2CC5B9;  /* variante clara teal */
  --pill-accent:        #FFB020;  /* ámbar (urgencia/precio) */
  --pill-accent-2:      #FFC15A;  /* variante clara ámbar */
}

/* Base */
.rsvp-pill{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: .35rem 0;
  padding: .55rem .75rem;
  border-radius: 999px;
  font-size: clamp(14px, 2.4vw, 16px);
  letter-spacing: .02em;
  color: var(--pill-ink);
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  isolation: isolate;
}

/* Variantes de color por pill */
.rsvp-pill--primary{  /* Confirma… */
  --pill-accent-current: var(--pill-primary);
  --pill-accent-soft:   var(--pill-primary-2);
  border-color: color-mix(in oklab, var(--pill-primary) 45%, white);
}
.rsvp-pill--accent{   /* ¡Resérvalos…! */
  --pill-accent-current: var(--pill-accent);
  --pill-accent-soft:   var(--pill-accent-2);
  border-color: color-mix(in oklab, var(--pill-accent) 45%, white);
}

/* Texto + icono */
.rsvp-pill__text{ position: relative; z-index: 1; }
.rsvp-pill__icon{
  font-size: 1.05em;
  line-height: 1;
  transform: translateY(1px);
  opacity: .95;
}

/* Capa luminosa detrás (animable) */
.rsvp-pill::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0; /* visible solo durante el pulso */
  background: var(--pill-accent-current, #00AFA0);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--pill-accent-current, #00AFA0) 18%, transparent);
}

/* ====== Blink cíclico (infinito) ======
   Se activa con .is-live + data-anim="blink".
   La periodicidad se toma de --blink-interval (ej. 5s). */
.rsvp-pill.is-live[data-anim="blink"]::before{
  animation: pill-blink var(--blink-interval, 5s) ease-in-out infinite;
}
.rsvp-pill.is-live[data-anim="blink"] .rsvp-pill__icon{
  animation: pill-icon var(--blink-interval, 5s) ease-in-out infinite;
}

/* Keyframes: pulso sincronizado y elegante */
@keyframes pill-blink{
  /* 0% y 100% iguales → arranque en fase para todos los que compartan duración */
  0%, 80%, 100% { opacity: 0; box-shadow: none; }
  14%          { opacity: .90; box-shadow: 0 0 0 8px color-mix(in srgb, var(--pill-accent-current) 18%, transparent); }
  32%          { opacity: .30; box-shadow: 0 0 0 0  color-mix(in srgb, var(--pill-accent-current)  0%, transparent); }
  46%          { opacity: .75; box-shadow: 0 0 0 6px color-mix(in srgb, var(--pill-accent-current) 12%, transparent); }
}
@keyframes pill-icon{
  0%, 80%, 100% { opacity: .95; transform: translateY(1px) scale(1);   filter: none; }
  14%           { opacity: 1;   transform: translateY(0)    scale(1.10); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--pill-accent-current) 60%, transparent)); }
  46%           { opacity: .98; transform: translateY(1px)  scale(1.02); filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
}

/* Móvil: un poco más de aire */
@media (max-width: 575.98px){
  .rsvp-pill{ padding: .6rem .8rem; }
}

/* Accesibilidad: reduced motion → destacar sin animar */
@media (prefers-reduced-motion: reduce){
  .rsvp-pill::before,
  .rsvp-pill,
  .rsvp-pill__icon{
    animation: none !important;
  }
  .rsvp-pill::before{
    opacity: .80;
    background: var(--pill-accent-soft, #2CC5B9);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--pill-accent-current, #00AFA0) 12%, transparent);
  }
}




/************************************************************
  REGALOS — SISTEMA LIMPIO  
  Móvil = .giftband.giftband--light
  Desktop = .giftband.giftband--photo
************************************************************/

/* ------------------------------ */
/* BASE GENERAL GIFTBAND          */
/* ------------------------------ */
.giftband{
  position: relative;
  overflow: hidden;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Toast */
.giftband__toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%) translateY(16px);
  opacity: 0;
  pointer-events: none;
  z-index: 2000;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: rgba(15,47,43,.92);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: opacity .18s ease, transform .18s ease;
}
.giftband__toast.is-show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* IBAN Shine effect */
.giftband__iban{
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  word-break: keep-all;
  font-variant-numeric: tabular-nums;
}
.giftband__iban::after{
  content:"";
  position: absolute; inset: -30%;
  background: linear-gradient(60deg,
              rgba(255,255,255,0) 40%,
              rgba(255,255,255,.18) 50%,
              rgba(255,255,255,0) 60%);
  transform: translateX(-120%);
  animation: iban-shine 3s ease-in-out infinite;
}
@keyframes iban-shine{
  0%, 75% { transform: translateX(-120%); }
  85%     { transform: translateX(20%); }
  100%    { transform: translateX(120%); }
}

/************************************************************
  📱 MÓVIL (≤ 991.98px)
************************************************************/
@media (max-width: 991.98px){

  .giftband--light{
    background: #f2eddc;
    height: 500px;
  }

  .giftband--light::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background-image: url("../images/foto_buceo2.png");
    background-size: cover;
    background-position: center 35%;
    z-index:0;
  }

  .giftband--light::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
    background:
      linear-gradient(180deg,
        rgba(0,0,0,.25), 
        rgba(0,0,0,.10) 45%, 
        rgba(0,0,0,.30));
  }

  #regalos .container{
    position: relative;
    z-index:1;
    text-align:center;
    display:grid;
    gap:16px;
    width:min(92%, 640px);
    margin:auto;
    padding:40px 0;
  }

  .giftband__title{
    color:#fff !important;
    font-family:"Cinzel", serif;
    font-weight:600;
    letter-spacing:.08em;
    text-shadow:0 2px 10px rgba(0,0,0,.45);
  }

  .giftband__intro{
    max-width:36ch;
    color:#fff !important;
    text-shadow:0 1px 6px rgba(0,0,0,.35);
    margin:auto;
  }

  .giftband__stripeInner{
    display:grid;
    gap:10px;
    justify-items:center;
  }

  .giftband__label{
    color:#fff;
    font-size:11px;
    letter-spacing:.22em;
    text-transform:uppercase;
  }

  .giftband__iban{
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
    padding:12px 16px;
    color:#fff;
    font-weight:500;
    letter-spacing:.12em;
  }

  .giftband__copyMini{
    color:#fff;
    font-size:11px;
    letter-spacing:.20em;
    text-transform:uppercase;
    display:flex;
    align-items:center;
    gap:8px;
  }
}

/************************************************************
  🖥 DESKTOP (≥ 992px) — VERSIÓN BLUE PHOTO
************************************************************/
@media (min-width: 992px){

  #regalos {
    background-image: url(../images/buceo.png);
    height: 550px;
  }

  #regalos.giftband--photo{
    display:grid;
    place-items:center;
    text-align:center;
    min-height:150vh;
    position:relative;
    overflow:hidden;
  }

  #regalos.giftband--photo .giftband__media{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center 30%;
    z-index:0;
  }

  #regalos.giftband--photo .giftband__overlay{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
      linear-gradient(180deg,
        rgba(0,20,40,.55),
        rgba(0,20,40,.45) 50%,
        rgba(0,20,40,.60));
  }

  #regalos.giftband--photo .container{
    position:relative;
    z-index:2;
    display:grid;
    gap:22px;
    justify-items:center;
    padding:0;
    width:min(880px,90%);
  }

  .giftband__title,
  .giftband__intro,
  .giftband__label,
  .giftband__iban,
  .giftband__copyMini{
    color:#fff !important;
    text-shadow:0 2px 10px rgba(0,0,0,.35);
  }

  .giftband__intro{
    max-width:62ch;
    margin:0 auto;
    margin-top: 13%
  }

  .giftband__stripe{
    display:flex;
    justify-content:center;
    width:100%;
  }

  .giftband__stripeInner{
    display:flex;
    flex-direction:column;
    gap:12px;
    align-items:center;
  }

  .giftband__iban{
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.22);
    padding:10px 16px;
    border-radius:999px;
    letter-spacing:.14em;
  }

  .giftband__copyMini{
    background:transparent;
    border:none;
    cursor:pointer;
    position:relative;
  }

  .giftband__copyMini::after{
    content:"";
    position:absolute;
    left:0; right:0;
    bottom:-6px;
    height:1px;
    background:rgba(255,255,255,.55);
    transform:scaleX(.65);
    transition:transform .18s ease;
  }

  .giftband__copyMini:hover::after{
    transform:scaleX(1);
  }
}


/* ================================================
   REGALOS — Móvil (≤575.98): banda editorial elegante
   - Fullscreen hero con cover
   - Vignette + wash para legibilidad
   - Stack centrado y tipografía clara
   - IBAN pill minimal
   ================================================ */
@media (max-width: 575.98px) {
  /* 0) Sección a pantalla completa y centrada */
  #regalos.giftband {
    min-height: 70vh;              /* ocupa la pantalla */
    display: grid;
    place-items: center;            /* centro óptico */
    background-image: none !important; /* evita dobles fondos */
    padding: 42px 18px;             /* aire estable */
  }

  /* 1) Fondo: cover + encuadre alto (menos parte inferior) */
  .giftband--light::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("../images/foto_buceo2.png"); /* ← tu imagen */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 30%;  /* ajusta 12–25% según encuadre */
    z-index: 0;
  }

  /* 2) Vignette + wash sutil: contraste sin “lavar” la foto */
  .giftband--light::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    /* capa 1: vignette oscuro arriba/abajo; capa 2: wash claro muy leve */
    background:
      linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.10) 35%, rgba(0,0,0,.12) 65%, rgba(0,0,0,.30)),
      linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.05));
  }

  /* 3) Contenedor de contenido: stack vertical elegante */
  #regalos .container {
    position: relative;
    z-index: 1;                     /* sobre el fondo */
    display: grid;
    justify-items: center;
    text-align: center;
    width: min(92%, 640px);
    gap: 16px;                      /* ritmo entre piezas */
    padding: 0;
  }

  /* 4) Tipografía clara y jerarquía */
  /* Título */
  .giftband__title {
    margin: 0;
    color: #fff !important;
    font-family: "Cinzel","Playfair Display",Georgia,serif;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: clamp(26px, 5.6vw, 36px);
    text-shadow: 0 2px 10px rgba(0,0,0,.45);
  }

  /* Párrafos intro: ancho controlado y tracking coherente */
  .giftband__intro {
    color: rgba(255,255,255,.94) !important;
    font-family: "Cormorant Garamond", serif;
    font-size: 15px;
    line-height: 1.75;
    letter-spacing: .02em;
    text-shadow: 0 1px 6px rgba(0,0,0,.40);
    width: 100%;
    max-width: 36ch;                /* medida cómoda de lectura */
    margin: 0;
  }

  /* Grupo IBAN (label + pill) en un mini stack */
  .giftband__stripeInner {
    width: 100%;
    margin: 0;
    padding: 6px 0 0;
    display: grid;
    justify-items: center;
    gap: 10px;
  }

  .giftband__label {
    color: rgba(255,255,255,.85);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 600;
    text-shadow: 0 1px 6px rgba(0,0,0,.35);
  }

  /* IBAN pill minimal */
  .giftband__iban {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    letter-spacing: .14em;
    font-weight: 550;
    color: #102624;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 999px;
    padding: 12px 16px;
    line-height: 1.25;
    text-shadow: none;
    box-shadow: 0 12px 28px rgba(0,0,0,.16);
    backdrop-filter: blur(2px);
  }

  /* Botón “Copiar” minimal y alineado al tono */
  .giftband__copyMini {
    color: rgba(255,255,255,.92);
    font-size: 11px;
    letter-spacing: .20em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
  }
  .giftband__copyMini::after {
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    background: rgba(255,255,255,.45);
    transform: translateY(6px) scaleX(.58);
    transform-origin: center;
  }

  /* Nota inferior (si la usas) */
  .giftband__note {
    color: rgba(255,255,255,.84) !important;
    font-size: 13px;
    text-shadow: 0 1px 6px rgba(0,0,0,.35);
    max-width: 44ch;
  }
}


/* =========================================================
   REGALOS — Móvil: foto protagonista y texto abajo (elegante)
   ========================================================= */
@media (max-width: 575.98px) {

  /* 0) Sección: pantalla completa y layout “anclado abajo” */
  #regalos.giftband {
    min-height: 80vh;                /* ocupa toda la pantalla */
    min-height: 80svh;               /* iOS/Android modernos: altura segura */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;        /* ⬅️ empuja el contenido hacia abajo */
    align-items: center;
    padding: 0 18px calc(22px + env(safe-area-inset-bottom));
    background-image: none !important;/* evita dobles fondos */
    gap: 0;                           /* stack compacto */
  }

  /* 1) Fondo: cover + foco alto (menos parte inferior) */
  .giftband--light::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("../images/foto_buceo2.png"); /* ← tu imagen */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 80%;  /* prueba 12–24% según encuadre */
  }

  /* 2) Vignette inferior para legibilidad (suave y elegante) */
  .giftband--light::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      /* oscurece la franja inferior para leer mejor */
      linear-gradient(180deg,
        rgba(0,0,0,0.00) 0%,
        rgba(0,0,0,0.10) 50%,
        rgba(0,0,0,0.28) 75%,
        rgba(0,0,0,0.36) 100%
      );
  }

  /* 3) Contenido: apilado al final, centrado y con gaps justos */
  #regalos .container {
    position: relative;
    z-index: 1;                       /* sobre el fondo */
    width: min(92%, 640px);
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 14px;                        /* ritmo entre bloques */
    margin: 0;                        /* sin márgenes exteriores */
    padding: 0;                       /* gestionamos padding desde #regalos */
  }

  /* 4) Tipografías claras y jerarquía editorial */
  .giftband__title{
    margin: 0;
    color: #fff !important;
    font-family: "Cinzel","Playfair Display",Georgia,serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: clamp(24px, 5.4vw, 34px);
    text-shadow: 0 2px 10px rgba(0,0,0,.45);
  }
  .giftband__intro{
    color: rgba(255,255,255,.94) !important;
    font-family: "Cormorant Garamond", serif;
    font-size: 15px;
    line-height: 1.75;
    letter-spacing: .02em;
    text-shadow: 0 1px 6px rgba(0,0,0,.40);
    max-width: 36ch;
    margin: 0;
  }

  /* 5) Grupo IBAN alineado y limpio en la parte baja */
  .giftband__stripeInner{
    width: 100%;
    display: grid;
    justify-items: center;
    gap: 10px;
    margin: 2px 0 0;
    padding: 0;
  }
  .giftband__label{
    color: rgba(255,255,255,.85);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 600;
    text-shadow: 0 1px 6px rgba(0,0,0,.35);
  }
  .giftband__iban{
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    letter-spacing: .14em;
    font-weight: 550;
    color: #102624;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 999px;
    padding: 12px 16px;
    line-height: 1.25;
    box-shadow: 0 12px 28px rgba(0,0,0,.16);
  }
  .giftband__copyMini{
    color: rgba(255,255,255,.92);
    font-size: 11px;
    letter-spacing: .20em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
  }

  /* 6) Pequeños ajustes de layout para evitar “salto” al teclado */
  @supports (height: 80svh) {
    #regalos.giftband { min-height: 80svh; }
  }
}

@media (min-width: 1400px) {

  #regalos{
    height: 650px;
    background-position: center 40% !important;
  }
 

}

/* =========================================================
   REGALOS — Móvil: texto (título + párrafos) ARRIBA
   y bloque IBAN ABAJO, con foto fullscreen elegante
   ========================================================= */
@media (max-width: 575.98px) {


  /* Copiar micro elegante (visible pero discreto) */
.giftband__copyMini{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  padding: 4px 2px;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: .20em;
  text-transform: uppercase;
  line-height: 1;

  font-weight: 600;
  color: rgba(10,28,26,.78);

  position: relative;
}

.giftband__copyMini::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 1px;

  background: rgba(15,47,43,.28);
  transform: scaleX(.75);
  transform-origin: center;
  transition: transform .18s ease, background .18s ease;
}

.giftband__copyMini:hover::after{
  transform: scaleX(1);
  background: rgba(15,47,43,.42);
}

.giftband__copyMini:focus{ outline: none; }
.giftband__copyMini:focus-visible::after{
  transform: scaleX(1);
  background: rgba(15,47,43,.55);
}

   /* Botón “Copiar” minimal y alineado al tono */
  .giftband__copyMini {
    color: rgba(255,255,255,.92);
    font-size: 11px;
    letter-spacing: .20em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
  }
  .giftband__copyMini::after {
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    transform: translateY(6px) scaleX(.58);
    transform-origin: center;
  }

  /* Nota inferior (si la usas) */
  .giftband__note {
    color: rgba(255,255,255,.84) !important;
    font-size: 13px;
    text-shadow: 0 1px 6px rgba(0,0,0,.35);
    max-width: 44ch;
  }

  /* 0) Sección a pantalla completa y fondo con encuadre alto */
  #regalos.giftband {
    min-height: 80vh;
    min-height: 80svh;                 /* iOS/Android modernos */
    display: block;                      /* el layout lo controla .container */
    background-image: none !important;   /* evita dobles fondos */
    padding: 0 18px calc(22px + env(safe-area-inset-bottom));
  }
  .giftband--light::before{
    content:"";
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image: url("../images/iban2.png"); /* ← tu imagen */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 0%;     /* 12–24% para ajustar encuadre */
  }
  /* Vignette inferior para que el IBAN se lea perfecto */
  .giftband--light::after{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:
      linear-gradient(180deg,
        rgba(0,0,0,0.00) 0%,
        rgba(0,0,0,0.12) 55%,
        rgba(0,0,0,0.26) 78%,
        rgba(0,0,0,0.36) 100%
      );
  }

  /* 1) El contenedor apila en columna y reparte el espacio */
  #regalos .container{
    position: relative; z-index: 1;
    display: flex; flex-direction: column;
    align-items: center; text-align: center;
    width: min(92%, 640px);
    gap: 14px;
    min-height: calc(80vh - 0px);
    min-height: calc(80svh - 0px);
    
  }

  /* 2) Título + párrafos ARRIBA (se quedan por orden natural) */
  .giftband__head{ order: 1; }
  .giftband__title{
    margin: 0;
    color: #fff !important;
    font-family: "Cinzel","Playfair Display",Georgia,serif;
    font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
    font-size: clamp(24px, 5.4vw, 34px);
    text-shadow: 0 2px 10px rgba(0,0,0,.45);
  }
  .giftband__intro{
    order: 2;                           /* párrafos justo debajo del título */
    color: rgba(255,255,255,.94) !important;
    font-family: "Cormorant Garamond", serif;
    font-size: 15px; line-height: 1,10; letter-spacing: .02em;
    text-shadow: 0 1px 6px rgba(0,0,0,.40);
    max-width: 36ch; margin: -7%;
  }

  /* 3) IBAN ABAJO: nos “anclamos” al pie con margin-top:auto */
  .giftband__stripe{ order: 3; margin-top: auto; width: 100%; }
  .giftband__stripeInner{
    display: grid; justify-items: center; gap: 10px; width: 100%;
    padding: 0; margin: 0 0 2px;
  }
  .giftband__label{
    color: rgba(255,255,255,.88);
    font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
    font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,.35);
  }
  .giftband__iban{
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    letter-spacing: .14em; font-weight: 500;
    color: rgba(255,255,255,.88);
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 999px;
    padding: 12px 16px; line-height: 1.25;
    box-shadow: 0 12px 28px rgba(0,0,0,.16);
  }
  .giftband__copyMini{
    color: rgba(255,255,255,.92);
    background: transparent !important;
    font-size: 11px; letter-spacing: .20em; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 8px; padding: 3px 0;
  }
}

@media (max-height: 700px) and (max-width: 575.98px){
  #regalos.giftband {
    min-height: 100vh;
    min-height: 100svh;                 /* iOS/Android modernos */
  }

  .giftband__stripe{ margin-top: 115% !important;  }
}


/* -----------------------------------------------------------
   POLAROID
----------------------------------------------------------- */

#fotos{
  margin-bottom: 30px;
}

.polaroid-stack{
  position: relative;
  max-width: 520px;
  height: 420px;
  margin-inline: auto;
  perspective: 900px;
  margin-bottom: clamp(40px, 7vw, 90px);
}

.polaroid{
  position: absolute;
  width: min(320px, 72%);
  background: rgba(255,255,255,.72);
  padding: 12px 12px 30px;
  border-radius: 14px;
  /* box-shadow: 0 18px 60px rgba(0,0,0,.16); */
  /* border: 1px solid rgba(0,0,0,.06); */

  transform-style: preserve-3d;
  transform-origin: 50% 20%;
  transition: box-shadow .22s ease, z-index .1s ease;

  /* Variables para el movimiento */
  --rot: 0deg;
  --mx: 0px;
  --my: 0px;
  --tiltX: 0deg;
  --tiltY: 0deg;
  --lift: 0px;

  transform:
    translate3d(var(--mx), calc(var(--my) + var(--lift)), 0)
    rotate(var(--rot))
    rotateX(var(--tiltX))
    rotateY(var(--tiltY));
}

.polaroid img{
  display:block;
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 10px;
}

.polaroid figcaption{
  margin-top: 10px;
  text-align: center;
  font-family: "Sacramento", cursive;
  font-size: 26px;
  color: rgba(0,0,0,.75);
}

.polaroid::before{
  content:"";
  position:absolute;
  top: -10px;
  left: 50%;
  width: 92px;
  height: 26px;
  transform: translateX(-50%) rotate(-2deg);
  /* background: rgba(215,223,230,.55); */
  /* border: 1px solid rgba(0,0,0,.06); */
  border-radius: 8px;
  /* box-shadow: 0 10px 20px rgba(0,0,0,.08); */
}

.polaroid.is-hover{
  --lift: -6px;
  z-index: 5;
  /* box-shadow: 0 24px 70px rgba(0,0,0,.22); */
}

/* Posiciones + rotación base */
.polaroid.p1{ top: 22px; left: 0;   --rot: -6deg; z-index: 1; }
.polaroid.p2{ top: 90px; right: 0;  --rot:  7deg; z-index: 2; }
.polaroid.p3{ top: 190px; left: 18%;--rot: -1.5deg; z-index: 3; }

/* Mobile: centrado texto + contador */
@media (max-width: 991.98px){
  .section-nosotros{
    text-align: center;
  }
  .nosotros-ornament{
    margin-inline: auto;
  }
  .countdown{
    justify-content: center;
  }
}

/* -----------------------------------------------------------
   POLAROID MOVIL
----------------------------------------------------------- */

.carousel-inner{
  padding-left: 15px;
  padding-right: 15px;
}

/* Evita el “flash”/resaltado al tocar (iOS/Android) */
.polaroid,
.polaroid img,
.polaroid-mobile img,
.polaroid-lightbox__img{
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.polaroid img:active,
.polaroid-mobile img:active{
  opacity: 1 !important;
  filter: none !important;
}


.wedding-carousel{
  max-width: 520px;
  margin-inline: auto;
}


.wedding-carousel,
.wedding-carousel .carousel-inner{
  text-align: center;
}

.polaroid-mobile{
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  transform: none;
  /* box-shadow: 0 18px 60px rgba(0,0,0,.16); */
}

.polaroid-mobile::before{
  display:none;
}

.polaroid-mobile img{
  /*height: 260px;*/
  height: min(60vh, 380px); /* antes 260px */
  -webkit-user-drag: none;
  user-select: none;
  touch-action: manipulation;

}

.carousel-control-prev,
.carousel-control-next{
  width: 12%;
}
.polaroid-dots{
  justify-content: center;
  margin-top: 10px;
}

/*Placa translúcida detrás de los puntos: más compacta */
.wedding-carousel .carousel-indicators{
  position: static;          /* debajo del carrusel */
  margin: 10px 0 0;          /* separación con el carrusel */
  padding: 0;                /* sin fondo/box */
  display: flex;
  justify-content: center;
  gap: 6px;  
}


/* Estilo de los puntos */

/* Puntos: pequeños y totalmente redondos */
.wedding-carousel .carousel-indicators [data-bs-target]{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #d8dde3;   /* gris clarito */
  border: 0;
  opacity: 1;                   /* evita opacidad baja por defecto */
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
  /* micro contorno para que se vean en fotos muy claras, sin parecer “box” */
  box-shadow: 0 0 0 1px rgba(0,0,0,0.10);
}


/* Activo (resalta el punto actual) */
.polaroid-dots .carousel-indicators .active{
  background-color: #ffffff;
  transform: scale(1.22);
  /* refuerzo del contorno, muy sutil */
  box-shadow: 0 0 0 1px rgba(0,0,0,0.12);

}

/* Variable reutilizable (añádela en :root si aún no la tienes) */
:root{
  --choco: #3B2413; /* marrón chocolate del sitio */
}

/* Marco exterior de la “polaroid” (apilada y móvil) */
.polaroid,
.polaroid-mobile{
  /* border: 1.25px solid var(--choco); */
  background: rgba(255,255,255,.72);                  /* mantiene el blanco “papel” */
}

/* Marco sutil de la fotografía (tono chocolate con poca presencia) */
.polaroid img,
.polaroid-mobile img{
  /* border: 1px solid rgba(59,36,19,.16);  */
  border-radius: 10px;                  /* conservas tu radio actual */
}

/* =========================================================
   POLAROID (SOLO #fotos) — Entrada elegante SOLO para 1ª
   ========================================================= */

/* Por defecto: en #fotos NO ocultamos nada (para que al deslizar no anime) */
#fotos .polaroid,
#fotos .polaroid-mobile{
  opacity: 1;
  transform: none;
}

/* Solo la que marcamos con .polaroid--reveal arranca “oculta” */
#fotos .polaroid--reveal,
#fotos .polaroid--reveal.polaroid-mobile{
  will-change: transform, opacity;
  transform: translateY(-16px) scale(.995);
  opacity: 0;
}

#fotos .polaroid--reveal img{
  will-change: transform, opacity;
  transform: translateY(-22px) scale(.995);
  opacity: 0;
}

/* Animación SOLO para la primera (cuando JS añade .is-in) */
#fotos .polaroid--reveal.is-in{
  animation: polaroid-frame-in .85s cubic-bezier(.22,61,36,1) both;
}
#fotos .polaroid--reveal.is-in img{
  animation: polaroid-drop-in .75s cubic-bezier(.22,61,36,1) .08s both;
}



/* ===========================================
   REGALOS — Orden de entrada: 1) Fondo → 2) Contenido
   =========================================== */

/* Duración centralizada para poder coordinar con JS */
:root{
  --gb-reveal-dur: 1.15s; /* ajusta 0.95–1.35s al gusto */
}

/* 1) ESTADO INICIAL: el FONDO (en ::before) “cerrado” (no visible) */
#regalos.giftband.giftband--light::before{
  /* Tu imagen de fondo ya la pintas aquí. Añadimos la máscara animable. */
  clip-path: inset(100% 0 0 0);               /* 100% desde arriba => oculto */
  transition: clip-path var(--gb-reveal-dur) cubic-bezier(.22,.61,.36,1);
  will-change: clip-path;
}

/* 1) REVEAL DEL FONDO: se abre de abajo hacia arriba */
#regalos.giftband.giftband--light.is-bg-in::before{
  clip-path: inset(0% 0 0 0);
}

/* 2) ESTADO INICIAL DEL CONTENIDO: oculto y 12px abajo */
#regalos .giftband__head,
#regalos .giftband__intro,
#regalos .giftband__stripe{
  opacity: 0;
  transform: translateY(12px);
  will-change: opacity, transform;
}

/* 2) APARICIÓN DEL CONTENIDO (cuando el fondo YA ha acabado) */
#regalos.is-content-in .giftband__head,
#regalos.is-content-in .giftband__intro,
#regalos.is-content-in .giftband__stripe{
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity .70s ease-out,
    transform .70s cubic-bezier(.22,.61,.36,1);
}

/* Opcional: micro-escalonado para jerarquía */
#regalos.is-content-in .giftband__head  { transition-delay: .06s; }
#regalos.is-content-in .giftband__intro { transition-delay: .12s; }
#regalos.is-content-in .giftband__stripe{ transition-delay: .18s; }

/* Accesibilidad: evitar animaciones si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  #regalos.giftband.giftband--light::before{
    clip-path: inset(0 0 0 0) !important;
    transition: none !important;
  }
  #regalos .giftband__head,
  #regalos .giftband__intro,
  #regalos .giftband__stripe{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}



/* ========= Regalos (desktop): fondo en ::before + reveal ========= */
@media (min-width: 992px){

  /* 1) El fondo pasa al pseudo-elemento ::before para poder animarlo */
  #regalos.giftband::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;                 /* por debajo del contenido */
    pointer-events:none;

    /* La imagen de escritorio que tenías antes en #regalos */
    background-image: url("../images/buceo.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 40%;

    /* Estado INICIAL (oculto): igual que móvil */
    clip-path: inset(100% 0 0 0);                  /* cerrado desde arriba */
    transform: translateY(14px) scale(1.015);      /* leve subida al aparecer */
    opacity: .98;
    transition:
      clip-path var(--gb-reveal-dur, 1.15s) cubic-bezier(.22,.61,.36,1),
      transform var(--gb-reveal-dur, 1.15s) cubic-bezier(.22,.61,.36,1),
      opacity   var(--gb-reveal-dur, 1.15s) ease-out;
  }

  /* 2) Estado VISIBLE (cuando JS añade .is-bg-in) */
  #regalos.giftband.is-bg-in::before{
    clip-path: inset(0 0 0 0);
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  /* 3) Quita el fondo directo en #regalos para no duplicar */
  #regalos{
    background-image: none !important;
    height: 550px;  /* conserva tu altura de desktop */
    position: relative; /* por seguridad, garantiza el stacking */
  }
}


/* -----------------------------------------------------------
   GO TO TOP 
----------------------------------------------------------- */

.gototop{
  position: fixed;
  right: 20px !important;
  bottom: 20px !important;
  left: auto !important;
  top: auto !important;

  z-index: 1060;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  pointer-events: none;
}

.gototop.active{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.gototop-btn{
  pointer-events: auto;
  width: 54px;
  height: 54px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Más claro y “premium” */
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.10);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow:
    0 18px 55px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.55);

  color: rgba(0,0,0,.70);
  cursor: pointer;
  padding: 0;
}

.gototop-icon{
  stroke: currentColor;
  transform: translateY(-1px);
}

.gototop-btn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.84);
  box-shadow:
    0 22px 65px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.70);
}

.gototop-btn:focus{ outline: none; }
.gototop-btn:focus-visible{
  box-shadow:
    0 0 0 3px rgba(0,0,0,.10),
    0 22px 65px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.70);
}
@media (max-width: 575.98px){
  .gototop-btn{ width: 48px; height: 48px; }
}

/* iOS/Android: evita cambios de luminosidad durante el scroll (bug de composición con backdrop-filter) */
@media (hover: none) and (pointer: coarse){
  .gototop-btn,
  .audiotoggle-btn{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(255,255,255,.92) !important; /* compensación: sin blur, más opaco */
  }
}

/* ============================================
   MOBILE REVEAL — Recomendaciones + RSVP
   Solo en móvil; desktop queda como está.
============================================ */
@media (max-width: 800px) {
  /* Estado inicial: oculto y 16px abajo */
  #recomendaciones.tby-reco,
  #rsvp.rsvp {
    opacity: 0;
    transform: translateY(16px);
    will-change: opacity, transform;
    transition:
      opacity .85s ease-out,
      transform .95s cubic-bezier(.22,.61,.36,1);
  }
  /* Visible: cuando JS añade .is-in */
  #recomendaciones.tby-reco.is-in,
  #rsvp.rsvp.is-in {
    opacity: 1;
    transform: translateY(0);
  }

  /* Pequeño escalonado del contenido interno para más “premiun feel” */
  #recomendaciones.tby-reco.is-in .reco-tabs { transition-delay: .04s; }
  #recomendaciones.tby-reco.is-in .map-wrapper { transition-delay: .08s; }

  /* Dentro de RSVP, suavizamos header -> form -> nota */
  #rsvp.rsvp .rsvp__header,
  #rsvp.rsvp .rsvp__form,
  #rsvp.rsvp .rsvp__note {
    /* si alguno no existe, no pasa nada */
    transition:
      opacity .75s ease-out .06s,
      transform .85s cubic-bezier(.22,.61,.36,1) .06s;
    opacity: 0;
    transform: translateY(12px);
  }
  #rsvp.rsvp.is-in .rsvp__header { opacity: 1; transform: none; transition-delay: .02s; }
  #rsvp.rsvp.is-in .rsvp__form   { opacity: 1; transform: none; transition-delay: .08s; }
  #rsvp.rsvp.is-in .rsvp__note   { opacity: 1; transform: none; transition-delay: .12s; }
}

/* Accesibilidad: sin animaciones si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
  #recomendaciones.tby-reco,
  #rsvp.rsvp,
  #rsvp.rsvp .rsvp__header,
  #rsvp.rsvp .rsvp__form,
  #rsvp.rsvp .rsvp__note {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}