/* -----------------------------------------------------------
   CIRCULO PARA MIENTRAS CARGA LA PAGINA
----------------------------------------------------------- */
.loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url(../images/loader.gif) center no-repeat #fff;
  pointer-events: none;
}

/* -----------------------------------------------------------
   ESTILO BASICO TODA LA WEB
----------------------------------------------------------- */


/* El sitio está diseñado para modo claro; evita el auto-darkening */
:root {
  color-scheme: light; /* hint al UA */
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light; /* fuerza claro incluso si el SO está oscuro */
  }
}


html {
  height: 100%;
  overflow-y: auto;
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  overflow-y: auto;
  overflow-x: clip;
  scroll-behavior: smooth;
  height: 100%;
  margin: 0;
  font-family: "Work Sans", Arial, sans-serif;    /* tipografía global */
  font-weight: 400;                               /* peso base */
  font-size: 16px;                                /* tamaño base */
  line-height: 1.7;                               /* altura de línea */
  color: #828282;                               /* color del texto */
  background: #fff;                             /* fondo general */
  text-rendering: optimizeLegibility; /* Mejora el renderizado de texto y layout */
}

#page {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 100%;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  overflow: visible;  
}


/* -----------------------------------------------------------
   HOME ESTATICO
----------------------------------------------------------- */
#home {
  position: relative;
  width: 100%;
  min-height: 100vh;                                  /* que como mínimo ocupe la altura de la ventana */
  background-position: center 20%;                    /* centrada en ambos ejes */
  background-size: cover;                             /* cubre sin deformar */
  background-repeat: no-repeat;
  background-color: #000;                             /* color de fondo de seguridad */
  background-image:
    linear-gradient(rgba(0,0,0,0.20), rgba(0,0,0,0.20)), /* (opcional) overlay suave para mejorar legibilidad de textos */
      image-set(
      url("../images/home-2200.webp") type("image/webp")
    );
  color: #fff;    
  padding-bottom: clamp(28px, 6vw, 80px);
}


@media (max-width: 575.98px){
  #home{
    /* antes: background-position: center 20%; → equivale a 50% 20% */
    background-position: 60% 20%;  /* 35% en X = más a la izquierda */
    background-image:
      linear-gradient(rgba(0,0,0,0.20), rgba(0,0,0,0.20)),
      image-set(
        url("../images/home-1600.webp") type("image/webp")
      );
  }
}



/* -----------------------------------------------------------
   LETRAS HOME EA
----------------------------------------------------------- */
.letras{
  min-height: 100svh;
  display: grid; 
  place-items: center;
  padding: 0;
}
/* --- El SVG se escala por el contenedor --- */
.monograma{
  display: block;
  margin-inline: auto; /* centra horizontalmente */
  width: clamp(140px, 28vw, 440px);  
  aspect-ratio: 400 / 520;
  height: auto;
}

.monograma .letraA{
  fill:#d7dfe6; 
  opacity:.80; 
  font-family: 'Alex Brush', cursive;
  font-size: 270px;
  font-kerning: normal;
}
.monograma .letraE{
  fill:#d7dfe6;
  font-family: 'Great Vibes', cursive;
  font-size: 180px;
  font-kerning: normal;
}
/* Breakpoints opcionales (puedes simplificarlos si usas un clamp generoso arriba) */
@media (max-width: 600px){ .monograma{ width: clamp(120px, 45vw, 360px); } }
@media (max-width: 420px){ .monograma{ width: clamp(110px, 52vw, 300px); } }
@media (max-width: 360px){ .monograma{ width: clamp(100px, 58vw, 260px); } }


/* -----------------------------------------------------------
   FECHA BODA
----------------------------------------------------------- */
.fecha-boda{
  margin-top: clamp(-200px, -11vw, -40px);
  padding-inline: clamp(12px, 6vw, 48px);
  text-align: center;
  color:#edf0f2;
}
.fecha-boda .mes{
  font-family: 'Playfair Display', serif;
  font-size: clamp(14px, 2.8vw, 22px);
  letter-spacing: .12em;
  margin-bottom: clamp(12px, 3vw, 24px);
}
.fecha-boda .fecha-grid{
  display: grid;
  grid-template-columns: max-content auto max-content;
  align-items: center;
  column-gap: clamp(50px, 13vw, 96px);
  row-gap: 0;
  margin-bottom: clamp(12px, 3vw, 24px);
  width: max-content;
  margin-inline: auto;

}
.fecha-boda .dia-numero{
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: clamp(40px, 12vw, 96px);
  line-height: 1;
}
.fecha-boda .dia-semana,
.fecha-boda .hora{
  display: grid;
  grid-template-rows: auto auto auto;
  justify-items: center;
  align-items: center;
  
}
.fecha-boda .texto{
  font-family: 'Playfair Display', serif;
  font-size: clamp(12px, 2.8vw, 18px);
  letter-spacing: .08em;

}
.fecha-boda .linea{
  display: block;
  width: clamp(60px, 12vw, 160px);   /* antes 60–160px; capamos el máximo en 120px */
  height: 2px;
  background: #b7bfc7;
}
.fecha-boda .linea-top{ margin-bottom: 6px; }
.fecha-boda .linea-bottom{ margin-top: 6px; }
.fecha-boda .anio{
  font-family: 'Playfair Display', serif;
  font-size: clamp(16px, 3vw, 25px);
  letter-spacing: .08em;
  opacity: .9;
}
/* Móviles: muy pegado, sin solapar en la mayoría de casos */
@media (max-width: 480px){
  .fecha-boda{
    /* más negativo y ligado a altura */
    margin-top: clamp(-190px, -24svh, -110px);
  }
}
/* Móviles muy estrechos: más pegado aún */
@media (max-width: 380px){
  .fecha-boda{
    margin-top: clamp(-170px, -22svh, -90px);
 }
}





/* ==========================================
   HOME — CTA "CONFIRMA TU ASISTENCIA"
   Botón ghost glass (más elegante y transparente)
   ========================================== */

.home-cta-wrap{
  display: grid;
  place-items: center;
  margin-top: clamp(20px,6vw, 50px);
  z-index:999;
}

/* --- Botón ghost glass --- */
.home-cta-btn{
  --cta-ink: rgba(255,255,255,.92);   /* texto principal */
  --cta-ink-weak: rgba(255,255,255,.75);
  --cta-bg: rgba(255,255,255,.18);    /* fondo muy transparente */
  --cta-bg-hover: rgba(255,255,255,.28);
  --cta-border: rgba(255,255,255,.38);/* borde sutil claro */
  --cta-border-hover: rgba(255,255,255,.55);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  
  pointer-events: auto;    /* explícito, por si hereda algo raro */
  touch-action: manipulation; /* evita retrasos de 300ms en iOS antiguos */


  padding: 11px 18px;                 /* algo más fino */
  border-radius: 999px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 12px;
  font-weight: 600;

  color: var(--cta-ink);
  background: var(--cta-bg);
  border: 1px solid var(--cta-border);

  /* glass */
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);

  /* sombras: suave, no “discoteca” */
  box-shadow:
    0 22px 80px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.35);

  /* micro animaciones */
  transition:
    transform .18s ease,
    box-shadow .22s ease,
    background-color .22s ease,
    border-color .22s ease,
    color .22s ease;
}

/* hover/active más etéreo */
.home-cta-btn:hover{
  transform: translateY(-2px);
  background: var(--cta-bg-hover);
  border-color: var(--cta-border-hover);
  box-shadow:
    0 28px 110px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.45);
}

.home-cta-btn:active{
  transform: translateY(-1px);
  box-shadow:
    0 20px 70px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.35);
}

/* foco accesible y elegante */
.home-cta-btn:focus{ outline: none; }
.home-cta-btn:focus-visible{
  box-shadow:
    0 0 0 3px rgba(255,255,255,.35),
    0 28px 110px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.45);
  transform: translateY(-1px);
}

/* Mejora de legibilidad en fondos muy claros:
   añade un sutil contorno oscuro al texto si la foto del home es muy luminosa */
.home-cta-btn{
  text-shadow:
    0 1px 10px rgba(0,0,0,.35),
    0 0 1px rgba(0,0,0,.25);
}

/* Responsive pequeños ajustes */
@media (max-width: 575.98px){
  .home-cta-btn{
    padding: 6px 10px;
    font-size: 8px;
    letter-spacing: .16em;
    
    gap: .45rem;                /* menos separación icono-texto */
    border-radius: 999px;       /* mantenemos la forma pill */
    /* sombras algo más suaves para no parecer tan grande */
    
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .home-cta-btn{ transition: none !important; }
}




/* -----------------------------------------------------------
   NAVEGADOR
----------------------------------------------------------- */
/* Bootstrap 5 nav overlay (desktop) + offcanvas (mobile) */
:root{ --wedding-nav-h: 72px; }
[id]{ scroll-margin-top: calc(var(--wedding-nav-h) + 14px); }
.wedding-nav{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--wedding-nav-h);
  z-index: 1055;
  background: transparent;
  pointer-events: none;

}
.wedding-nav .container-fluid{
  height: 100%;
  display: flex;
  align-items: center;
  pointer-events: auto;
}
.wedding-toggler{
  border: 0;
  padding: 0.5rem;
}
.wedding-toggler:focus{ box-shadow: none; }
.wedding-links .nav-link{
  color: rgba(237,240,242,.95);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 14px;
  padding: 10px 2px;
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
  position: relative;
}
.wedding-links .nav-link::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 1px;
  background: rgba(237,240,242,.85);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .28s ease;
}
.wedding-links .nav-link:hover::after,
.wedding-links .nav-link:focus-visible::after{
  transform: scaleX(1);
  transform-origin: left;
}

@media (max-width: 767.98px){
  .wedding-offcanvas{
    background: rgba(10,10,10,.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-left: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 14px 40px rgba(0,0,0,.35);
  }
  .wedding-offcanvas .nav-link{
    border-radius: 12px;
    padding: 12px 12px;
  }
  .wedding-offcanvas .nav-link:hover,
  .wedding-offcanvas .nav-link:focus-visible{
    background: rgba(255,255,255,.10);
  }
  .offcanvas-backdrop.show{ opacity: .25; }
}
.wedding-nav--hidden{
  display: none !important;
}
/* === Color verde botella SOLO en el navegador cuando .nav--green está activo === */
.wedding-nav.nav--green .nav-link{
  color: #0b3d2e !important; /* verde botella */
  text-shadow: none !important;
}

.wedding-nav.nav--green .nav-link::after{
  background: #0b3d2e !important;
}



/* -----------------------------------------------------------
   #NOSOTROS (mensaje + countdown + polaroids + mobile carousel)
----------------------------------------------------------- */

.section-nosotros{
  position: relative;
  color: #2b2b2b;
  background:
    radial-gradient(1200px 500px at 20% 0%, rgba(215,223,230,.45), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(183,191,199,.25), transparent 55%),
    linear-gradient(180deg, #ffffff, #f5ece3);
  padding-bottom: clamp(20px, 4vw, 75px);
}

@media (max-width: 991px) {
  .section-nosotros {
    background:
      linear-gradient(180deg, #ffffff, #f5ece3); /* solo el fondo claro */
  }
}
/* Centrar verticalmente el bloque de texto + countdown dentro de su columna */
.section-nosotros .col-12.col-lg-6:first-child{
  display: flex;
  flex-direction: column;
  align-items: center;    /* centra todos los hijos, incluidos textos y countdown */
  text-align: center;     /* centra las líneas de los textos */
}


.nosotros-kicker{
  font-size: 13px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(0,0,0,.60);
}

.nosotros-title{
  /* Nueva letra (serif elegante). Si no añades una fuente externa, cae en Georgia/serif */
  font-family: "Cinzel", "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: clamp(34px, 5vw, 52px);
  letter-spacing: .04em;
  line-height: 1.1;
  color: #0f2f2b;
  text-transform: uppercase;
}

/* Ornamento nuevo (más fino que el guion anterior) */
.nosotros-ornament{
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 360px;
  width: clamp(200px, 60vw, 360px);
  margin-inline: auto;
}
.nosotros-ornament::before,
.nosotros-ornament::after{
  content:"";
  height: 1px;
  flex: 1;
  background: rgba(0,0,0,.16);
}
.nosotros-ornament .orn-center{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: rgba(0,0,0,.55);
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 16px;
  
}

.orn-center svg { fill: rgba(0,0,0,.55); }

.nosotros-sub{
  font-size: 18px;
  color: rgba(0,0,0,.70);
  margin: 0;
}

/* -----------------------------------------------------------
   CUENTA ATRAS
----------------------------------------------------------- */
.countdown{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
}

.cd-item{
  flex: 1 1 110px;
  min-width: 110px;
  text-align: center;
  padding: 14px 12px;
  border-radius: 18px;

  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.cd-num{
  display:block;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: .02em;
  color: #0f2f2b;
  line-height: 1.1;
}

.cd-lbl{
  display:block;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
  margin-top: 4px;
}


/* =========================
   COUNTDOWN — Hover suave (1 + 3) + Bonus reveal
   ========================= */

/* Variables de color para el contador (opcional, usa tu paleta actual) */
:root {
  --count-ink: #0f2f2b;      /* coincide con tu tema */
  --count-accent: #144b43;   /* un tono un punto más intenso */
}

/* Aseguramos que el item admite overlays y transiciones */
.countdown .cd-item {
  position: relative;
  overflow: hidden; /* para futuros brillos; no afecta al layout actual */
}

/* ---------- Opción 1: Lift + glow ---------- */
@media (hover:hover) and (pointer:fine) {
  .countdown .cd-item {
    transition:
      transform .22s ease,
      box-shadow .22s ease,
      background .22s ease,
      border-color .22s ease;
    will-change: transform;
  }
  .countdown .cd-item:hover {
    transform: translateY(-3px);
    background: rgba(255,255,255,.78);                /* un poco más “glass” al hover */
    border-color: rgba(0,0,0,.12);
    box-shadow: 0 20px 60px rgba(0,0,0,.14);
  }
  .countdown .cd-item:hover .cd-num {
    text-shadow: 0 6px 18px rgba(15,47,43,.18);
  }
}

/* ---------- Opción 3: Numeral tint ---------- */
@media (hover:hover) and (pointer:fine) {
  .countdown .cd-num,
  .countdown .cd-lbl {
    transition: color .22s ease, transform .22s ease, opacity .22s ease;
  }
  .countdown .cd-item:hover .cd-num {
    color: var(--count-accent); /* leve acento al número */
  }
  .countdown .cd-item:hover .cd-lbl {
    transform: translateY(-2px);
    opacity: .9;
  }
}

/* ---------- Bonus: animación de entrada al aparecer ---------- */
/* Estado inicial: leve desplazamiento y fade */
.countdown .cd-num,
.countdown .cd-lbl {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .60s ease, transform .60s ease;
}
/* Activado cuando el JS añada .is-revealed */
.countdown.is-revealed .cd-num,
.countdown.is-revealed .cd-lbl {
  opacity: 1;
  transform: translateY(0);
}
/* Cascada suave entre items */
.countdown.is-revealed .cd-item:nth-child(1) .cd-num,
.countdown.is-revealed .cd-item:nth-child(1) .cd-lbl { transition-delay: 0.07s; }
.countdown.is-revealed .cd-item:nth-child(2) .cd-num,
.countdown.is-revealed .cd-item:nth-child(2) .cd-lbl { transition-delay: 0.21s; }
.countdown.is-revealed .cd-item:nth-child(3) .cd-num,
.countdown.is-revealed .cd-item:nth-child(3) .cd-lbl { transition-delay: 0.43s; }
.countdown.is-revealed .cd-item:nth-child(4) .cd-num,
.countdown.is-revealed .cd-item:nth-child(4) .cd-lbl { transition-delay: 0.65s; }

/* Accesibilidad: respeta reduced motion */
@media (prefers-reduced-motion: reduce) {
  .countdown .cd-item,
  .countdown .cd-num,
  .countdown .cd-lbl {
    transition: none !important;
    transform: none !important;
  }
  .countdown .cd-num, .countdown .cd-lbl {
    opacity: 1 !important;
  }
}


/* En móviles/táctiles, activamos los mismos estilos de hover cuando .is-tap esté presente */
.is-touch .countdown .cd-item {
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background .22s ease,
    border-color .22s ease;
  will-change: transform;
}

/* Lift + glow + numeral tint cuando el usuario toca (tap) */
.is-touch .countdown .cd-item.is-tap {
  transform: translateY(-3px);
  background: rgba(255,255,255,.78);
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 20px 60px rgba(0,0,0,.14);
}

.is-touch .countdown .cd-item.is-tap .cd-num,
.is-touch .countdown .cd-item.is-tap .cd-lbl {
  transition: color .22s ease, transform .22s ease, opacity .22s ease;
}

:root {
  /* por si no se definió antes; usa tu paleta */
  --count-accent: #144b43;
}

.is-touch .countdown .cd-item.is-tap .cd-num {
  color: var(--count-accent);
  text-shadow: 0 6px 18px rgba(15,47,43,.18);
}
.is-touch .countdown .cd-item.is-tap .cd-lbl {
  transform: translateY(-2px);
  opacity: .9;
}

/* Si pediste "más lento" en la entrada, mantenemos esas duraciones en móvil también */
.is-touch .countdown .cd-num,
.is-touch .countdown .cd-lbl {
  transition-duration: .60s; /* mantiene la entrada más pausada */
}

/* Accesibilidad: reduce motion también en táctil */
@media (prefers-reduced-motion: reduce) {
  .is-touch .countdown .cd-item,
  .is-touch .countdown .cd-num,
  .is-touch .countdown .cd-lbl {
    transition: none !important;
    transform: none !important;
  }
  .is-touch .countdown .cd-num,
  .is-touch .countdown .cd-lbl {
    opacity: 1 !important;
  }
}


/* -----------------------------------------------------------
   POLAROID
----------------------------------------------------------- */


.polaroid-stack{
  position: relative;
  max-width: 520px;
  height: 420px;
  margin-inline: auto;
  perspective: 900px;
  margin-bottom: clamp(28px, 5vw, 72px);
}

.polaroid{
  position: absolute;
  width: min(320px, 72%);
  background: #fff;
  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
----------------------------------------------------------- */
/* 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, 420px); /* 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);

}



/* -----------------------------------------------------------
   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 */
  }
}

/* -----------------------------------------------------------
   AUDIO TOGGLE (mute/unmute) — botón flotante
----------------------------------------------------------- */

.audiotoggle{
  position: fixed;
  left: 20px !important;
  bottom: 20px !important; /* por encima del gototop (que está a 20px) */
  right: auto !important;
  top: auto !important;

  z-index: 1060;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: none; /* activamos en el botón */
}

.audiotoggle-btn{
  pointer-events: auto;
  width: 54px;
  height: 54px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  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;

  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.audiotoggle-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);
}

.audiotoggle-btn:focus{ outline: none; }
.audiotoggle-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);
}

.audiotoggle-icon{ display: none; }
.audiotoggle-btn[aria-pressed="true"] .audiotoggle-icon.is-muted{ display: block; }
.audiotoggle-btn[aria-pressed="false"] .audiotoggle-icon.is-unmuted{ display: block; }

/* Responsive (similar al gototop) */
@media (max-width: 575.98px){
  .audiotoggle-btn{ width: 48px; height: 48px; }
  .audiotoggle{ bottom: 20px !important; }
}


/* ===========================================================
   PROGRAMA (definitivo)
   Clases: w-program...
=========================================================== */

.w-program{
  --ink: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --line: rgba(255,255,255,.22);
  --glass: rgba(255,255,255,.10);
  --shadow: 0 18px 55px rgba(0,0,0,.22);
  --dot: 74px;

  position: relative;
  color: var(--ink);

  background:
    /* barras horizontales blancas MUY sutiles */
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.08) 0px,
      rgba(255,255,255,.08) 1px,
      transparent 1px,
      transparent 22px
    ),
    /* luces suaves para profundidad */
    radial-gradient(900px 420px at 15% 10%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(900px 420px at 85% 30%, rgba(255,255,255,.08), transparent 55%),

    /* tu fondo fuerte */
    linear-gradient(135deg, #0f2f2b, #0b3d2e);
}

/* micro textura sutil */
.w-program::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.10) 0px,
      rgba(255,255,255,.10) 1px,
      transparent 1px,
      transparent 10px);
}

.w-program > .container{ position: relative; z-index: 1; }

.w-program__kicker{
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.w-program__title{
  font-family: "Cinzel","Playfair Display",Georgia,serif;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: clamp(26px, 3.6vw, 40px);
  margin: 0;
}

/* Ornamento */


.w-program__orn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}

/* Líneas laterales */
.w-program__orn > span:not(.orn-center){
  height: 1px;
  width: 110px;
  /* Si el fondo de la sección es oscuro, esta transparencia funciona bien */
  background: rgba(255,255,255,.22);
}

/* Círculo central: blanco, borde sutil y efecto glass */
.w-program__orn .orn-center{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;              /* tu medida */
  height: 28px;
  border-radius: 999px;

  background:rgba(243,239,230,.95);
  /* Borde muy sutil para separar del fondo claro/oscuro */
  border: 1px solid rgba(0,0,0,.08);

  /* Glass suave */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

}

/* Imagen dentro del círculo (la pones tú) */
.w-program__orn .orn-img{
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
  pointer-events: none;
  /* no usamos `color` porque las imágenes no lo heredan como el SVG */
}

/* Hover sutil (solo desktop) */
@media (hover:hover) and (pointer:fine){
  .w-program__orn .orn-center{
    transition: transform .18s ease,
                box-shadow .18s ease,
                background .18s ease,
                border-color .18s ease;
  }
  .w-program__orn .orn-center:hover{
    transform: translateY(-1px);
    /* mantenemos fondo blanco; solo realzamos borde y sombra */
    border-color: rgba(0,0,0,.12);
    box-shadow:
      0 18px 55px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.55);
  }
}

/* Móvil: un pelín más pequeño (ajusta si quieres) */
@media (max-width: 575.98px){
  .w-program__orn > span:not(.orn-center){
    width: 90px;
  }
  .w-program__orn .orn-center{
    width: 24px;
    height: 24px;
  }
  .w-program__orn .orn-img{
    width: 14px;
    height: 14px;
  }
}



/* TRACK desktop */
.w-program__track{
  list-style: none;
  padding: 10px 0 0;
  margin: 0;
  margin-top: clamp(-14px, -4vw, -30px);
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  min-height: 380px;
}

/* Línea horizontal */
.w-program__track::before{
  content:"";
  position:absolute;
  left: -30px;
  right: 0;
  top: 50%;
  height: 3px;
  background: var(--line);
  border-radius: 999px;
  width: calc(100% + 60px);   /* sobresale 30px a cada lado */
}

/* Cada step */
.w-program__step{
  flex: 1 1 0;
  min-width: 150px;
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* Icono sobre la línea */
.w-program__dot{
  width: var(--dot);
  height: var(--dot);
  display:grid;
  place-items:center;
  position: relative;
  z-index: 2;
}
.w-program__dot img{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: contain;
  border-radius: 999px;
  filter: drop-shadow(0 16px 34px rgba(0,0,0,.22));
  transform: translateZ(0);
  transition: transform .18s ease, filter .18s ease;
}
.w-program__step:hover .w-program__dot img{
  transform: translateY(-2px) scale(1.02);
  filter: drop-shadow(0 22px 44px rgba(0,0,0,.26));
}

/* Card glass (ligera, no “cajote”) */
.w-program__card{
  width: min(250px, 100%);
  text-align: center;

  padding: 12px 12px;
  border-radius: 18px;

  background: var(--glass);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 12px 34px rgba(0,0,0,.18);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.w-program__step:hover .w-program__card{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  background: rgba(255,255,255,.14);
}

/* Alternancia arriba/abajo */
.w-program__step.is-top .w-program__card{ margin-bottom: 18px; }
.w-program__step.is-bottom .w-program__card{ order: 3; margin-top: 18px; }

/* Tipografía */
.w-program__time{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;

  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 24px rgba(0,0,0,.20);

  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  margin-bottom: 10px;
}

.w-program__name{
  margin: 0 0 6px 0;
  font-family: "Cinzel","Playfair Display",Georgia,serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
}

.w-program__desc{
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255,255,255,.78);
  max-width: 28ch;
  margin-inline: auto;
}



/* =========================
   Mobile: lista centrada, icono a la derecha, SIN descripción
========================= */
@media (max-width: 991.98px){

    .w-program__track{
      display: block;
      max-width: 560px;
      margin: 0 auto;
      padding: 8px 12px 0;
      position: relative;
    }

    /* Línea vertical */
    .w-program__track::before{
      content:"";
      position:absolute;
      left: 50px;          /* centro del icono */
      top: 50%;
      bottom: 10px;
      width: 1.5px;
      height: 83%;
      background: rgba(243,239,230,.95);
      border-radius: 999px;
      z-index: 0;
      transform: translateY(-50%);
    }

    /* Item: 2 columnas (icono | texto) */
    .w-program__step{
      display: grid;
      grid-template-columns: 68px 1fr;
      column-gap: 14px;
      align-items: start;
      padding: 14px 0;
      position: relative;
      z-index: 1;

      /* sin cajas */
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
    }

    /* Colocamos icono a la izquierda aunque en el HTML venga después */
    .w-program__dot{ grid-area: dot; }
    .w-program__card{ grid-area: card; }

    .w-program__step{
      grid-template-areas: "dot card";
    }

    /* Icono circular “anclado” a la línea */
    .w-program__dot{
      width: 55px;
      height: 55px;
      margin-left: 11px;          /* para centrarlo sobre la línea */
      border-radius: 999px;

      display: grid;
      place-items: center;

      background: rgba(255,255,255,.92);
      border: 2px solid rgba(0,0,0,.06);
      box-shadow: 0 12px 26px rgba(0,0,0,.10);

      position: relative;
      z-index: 2;
      overflow: hidden;           /* si tus iconos son fotos, recorta bien */
    }

    .w-program__dot img{
      width: 100%;
      height: 100%;
      object-fit: cover;     /* llena el círculo */
      filter: none;
    }

    /* Texto (sin “card”) */
    .w-program__card{
      width: 100%;
      padding: 0 !important;
      text-align: left !important;

      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    /* Hora pill como en la imagen */
    .w-program__time{
    
      display: inline-block;
      padding: 2px 6px;
      border-radius: 6px;

      background: rgba(243,239,230,.95); /* beige clarito */
      color: rgba(15,47,43,.92);         /* texto verde oscuro */

      font-size: 12px;
      letter-spacing: .02em;
      margin: 0 10px 0 0;

      box-shadow: 0 10px 20px rgba(0,0,0,.12);
      border: 1px solid rgba(0,0,0,.08);
  }
    

    /* Título + subtítulo en la misma línea visual */
    .w-program__name{
      display: inline;
      margin: 0;
      font-size: 18px;
      font-family: "Cinzel","Playfair Display",Georgia,serif;
      font-weight: 600;
      letter-spacing: .02em;
      text-transform: none;
      color: rgba(255,255,255,.95);
    }

    /* Subtítulo visible (tu CSS lo estaba ocultando) */
    .w-program__desc{
      display: -webkit-box !important;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;   /* pon 2 si quieres un poco más de texto */
      overflow: hidden;

      margin: 2px 0 0 0;
      font-size: 14px;
      line-height: 1.35;
      color: rgba(255,255,255,.72);

      max-width: 320px;        /* asegura el mismo “corte” */
      padding-right: 10px;     /* margen a la derecha */
    }
    .w-program__step.is-top .w-program__card,
    .w-program__step.is-bottom .w-program__card{
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      order: 0 !important;
  }
}


/* ================== W-PROGRAM — SOLO ESCRITORIO ================== */
@media (min-width: 1024px) {

  /* Paleta y tipografías: ajusta a tu branding */
  .w-program__track {
    --prog-bg: #efe9dd;          /* fondo del bloque (opcional, quítalo si ya tienes uno) */
    --prog-line: #cfc6b8;        /* línea del timeline */
    --prog-dot: #f2eee6;         /* fondo círculo icono */
    --prog-dot-border: #d8d0c4;  /* borde círculo icono */
    --prog-pill-bg: #2f4735;     /* cápsula hora */   
    
    --prog-title: #F3EEE6;  /* marfil cálido */
    --prog-text:  #fff;  /* champán suave */
    --prog-line:  #E2D9CA;  /* línea a juego, clara pero no blanca */


    --prog-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  }

  /* Contenedor de la pista/hitos (hace la fila y la línea) */
  .w-program__track {
    list-style: none;
    margin: 0 48px;                  /* respira lateral */
    padding: 48px 0 64px;            /* espacio arriba/abajo */
    display: grid;
    grid-auto-flow: column;          /* hito → hito en horizontal */
    grid-auto-columns: 1fr;          /* cada hito ocupa la misma anchura */
    gap: 40px;
    align-items: start;
    position: relative;
    font-family: var(--prog-font);
  }

  /* Línea horizontal del timeline */
  .w-program__track::before {
    content: "";
    position: absolute;
    top: 135px;                       /* altura donde cruza la línea (ajusta si cambias tamaños) */
    left: 0;
    right: 0;
    height: 1px;
    background: var(--prog-line);
  }

  /* Cada hito: colocamos hora → icono → título → descripción */
  .w-program__step {
    display: grid;
    grid-template-rows: auto 88px auto auto; /* hora / icono / título / desc */
    grid-template-areas:
      "hora"
      "icono"
      "titulo"
      "desc";
    justify-items: center;
    text-align: center;
    position: relative;
  }

  /* Tarjeta interna solo gestiona hora, título y texto (vertical) */
  .w-program__card {
    display: contents; /* así las áreas las controlan los hijos directamente */
  }

  /* Hora en cápsula arriba */
  .w-program__time {
    grid-area: hora;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--prog-pill-bg);
    color: var(--prog-pill-text);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
  }

  /* Icono circular que “toca” la línea */
  .w-program__dot {
    grid-area: icono;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--prog-dot-border);
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
  }

  .w-program__dot > img {
    object-fit: contain;
    display: block;
    background: #fff;
  }

  /* Pequeño “palito” conectando icono con la línea */
  .w-program__dot::after {
    content: "";
    position: absolute;
    top: -20px;                      /* distancia desde el borde superior del icono hasta la línea */
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 20px;
    background: var(--prog-line);
  }

  /* Título y descripción */
  .w-program__name {
    grid-area: titulo;
    margin: 16px 0 6px;
    color: var(--prog-title);
    font-weight: 600;
    font-size: 18px;
  }

  .w-program__desc {
    grid-area: desc;
    color: var(--prog-text);
    font-size: 13px;
    line-height: 1.5;
    max-width: 200px;
    margin: 0;
    opacity: .95; 
  }

  /* Hover sutil (opcional) */
  .w-program__step:hover .w-program__dot {
    box-shadow: 0 2px 0 rgba(0,0,0,.04), 0 6px 16px rgba(0,0,0,.06);
    transform: translateY(-1px);
    transition: all .2s ease;
  }

  /* Si tienes variantes .is-top / .is-bottom y quieres un pequeño ajuste vertical, puedes usar: */
  .w-program__step.is-top   { transform: translateY(0); }
  .w-program__step.is-bottom{ transform: translateY(0); } /* deja ambos alineados en una única línea */
}
/* ================== FIN SOLO ESCRITORIO ================== */


/* Paleta para la hora (ajusta a tu branding) */
.w-program__track {
  --prog-pill-bg:        #2f4735; /* color actual de la píldora */
  --prog-pill-hover-bg:  #3a5b44; /* un pelín más claro/contrastado al hover */
  --prog-pill-text:      #ffffff; /* texto dentro de la píldora */

  /* tiempos/timing para animaciones */
  --reveal-duration: 1200ms;
  --reveal-ease: cubic-bezier(.16,.84,.44,1); /* ease-out suave */
  --reveal-stagger: 200ms;                     /* distancia entre ítems */
}

/* Píldora de la hora: transiciones suaves */
.w-program__time {
  background: var(--prog-pill-bg);
  color: var(--prog-pill-text);
  transition: background-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
  will-change: background-color, transform;
}

/* Cambia el color de la hora al pasar por cada item (hover/focus/active) */
.w-program__step:hover .w-program__time,
.w-program__step:focus-within .w-program__time,
.w-program__step:active .w-program__time {
  background: var(--prog-pill-hover-bg);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transform: translateY(-1px);
}

/* ---------- Aparición progresiva al hacer scroll (mobile y desktop) ---------- */

/* Estado inicial: oculto y un poco desplazado hacia abajo */
.w-program__step {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(2px);
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease),
    filter var(--reveal-duration) var(--reveal-ease);
  /* cada item tendrá su retardo mediante una variable */
  transition-delay: calc(var(--stagger, 0) * var(--reveal-stagger));
}

/* Al revelarse por primera vez (IntersectionObserver añade esta clase) */
.w-program__step.is-revealed {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Respeto a usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  .w-program__step {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}



/* =========================
   LIGHTBOX POLAROID PARA HACER GRANDES FOTOS
========================= */

/* Oculta por si quedó alguna X de intentos previos */
.polaroid-lightbox__close{ display:none !important; }

/* Fondo del modal (oscuro, sin “placa” extra) */
.polaroid-lightbox .modal-content{
  position: relative;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 22px);
  pointer-events: auto;
}

/* Figura con imagen + pie */
.polaroid-lightbox__figure{
  margin: 0;
  width: 100%;
  max-height: calc(100vh - 80px);
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  gap: 10px;
}

/* Imagen grande: sin sombra (para que el “clic fuera” siempre funcione),
   contain y gestos correctos */
.polaroid-lightbox__img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
  /* IMPORTANTE: sin sombra para no “tapar” clics fuera de la foto */
  box-shadow: none !important;
  -webkit-user-drag: none;
  user-select: none;
  touch-action: pan-y;
  cursor: zoom-out; /* comunica que puedes salir */
  pointer-events: auto;
}

/* Pie opcional (si tu figure tiene figcaption) */
.polaroid-lightbox__caption{
  color: rgba(255,255,255,.92);
  font-size: 14px;
  text-align: center;
  min-height: 1.2em;
  padding: 4px 6px;
  max-width: 90ch;
  opacity: .9;
}

/* (Sugerido) cursor en miniaturas */
.polaroid img{
  cursor: zoom-in;
  -webkit-user-drag: none;
  user-select: none;
}


/* ===========================================================
   DETALLES — Tabs horizontales (desktop) + cards (mobile)
   - Tabs grandes y centradas
   - Sin opacidad en textos/iconos (Dirección/Aparcamiento/Cómo llegar)
   - Alto fijo en desktop (evita salto al cambiar tabs)
   - Labels con icono siempre en línea (columna izq más ancha)
   - Móvil: etiqueta dentro de la foto abajo-izquierda con blur
=========================================================== */

.dtabs{
  background:
    radial-gradient(1200px 500px at 20% 0%, rgba(215,223,230,.45), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(183,191,199,.22), transparent 55%),
    linear-gradient(180deg, #ffffff, #f5ece3);
}

.dtabs__kicker{
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
}

.dtabs__title{
  font-family: "Cinzel","Playfair Display",Georgia,serif;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: clamp(26px, 3.6vw, 40px);
  margin: 0;
  color: #0f2f2b;
}

.dtabs__orn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;

}

.dtabs__orn span{
  width: 120px;
  height: 1px;
  background: rgba(0,0,0,.12);
}


.dtabs__orn > span:not(.orn-center){
  height: 1px;
  width: 120px;                 /* igual que en “Nosotros” */
  background: rgba(0,0,0,.12);  /* coherente con la sección Detalles (fondo claro) */
}


.dtabs__orn .orn-center{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;              /* <-- clave para “meter” la imagen en el círculo */
  border-radius: 999px;
  background: #fff;              /* fondo blanco que pediste */
  border: 1px solid rgba(0,0,0,.08);
  width: 28px;
  height: 28px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 14px 40px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.45);
}

/* IMAGEN: que no crezca más que el círculo y mantenga proporción */
.dtabs__orn .orn-img{
  display: block;
  width: 70%;            /* tamaño visual dentro del círculo (ajústalo) */
  height: 70%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;   /* que quepa completa sin recortar */
  object-position: center;
  pointer-events: none;
}

/* Ajuste en móvil: medallón e icono un pelín más pequeños */
@media (max-width: 575.98px){
  .w-program__orn .orn-center,
  .dtabs__orn .orn-center{
    width: 26px;
    height: 26px;
  }
  .w-program__orn .orn-img,
  .dtabs__orn .orn-img{
    width: 68%;
    height: 68%;
  }
}



/* ===========================================================
   DESKTOP — Tabs arriba (centradas + grandes)
=========================================================== */

.dtabs__topnav{
  gap: 12px;
  width: 100%;
  justify-content: center !important;
}

.dtabs__topnav .nav-link{
  border-radius: 999px;
  padding: 14px 22px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 35px rgba(0,0,0,.06);

  color: #0b3d2e;
  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;
}

.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, #0b3d2e, #0a1e1b);
  color: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 18px 55px rgba(0,0,0,.14);
}

/* Emojis: sin opacidad, grandes, nítidos */
.dtabs__emoji{
  opacity: 1 !important;
  font-size: 18px;
  line-height: 1;
  margin-right: 10px;
  transform: translateY(1px);
  filter: none !important;
}

.dtabs__emojiBig{
  opacity: 1 !important;
  font-size: 22px;
  line-height: 1;
  margin-right: 10px;
  transform: translateY(2px);
  filter: none !important;
}

/* ===========================================================
   CONTENIDO — Panel (desktop)
=========================================================== */

.dtabs__pane{
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.10);
}

.dtabs__hero{
  height: clamp(220px, 22vw, 290px);
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.38)),
    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: "Cinzel","Playfair Display",Georgia,serif;
  font-weight: 600;
  letter-spacing: .05em;
  color: rgba(15,47,43,.95);
  font-size: clamp(18px, 2.2vw, 24px);
}

.dtabs__grid{
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

/* Columna izquierda MÁS ancha */
.dtabs__item{
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.10);
}

/* Label: sin opacidad + icono siempre en línea */
.dtabs__label{
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;

  font-size: 11px;
  letter-spacing: .20em;
  text-transform: uppercase;

  color: #2b2b2b !important;
  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;
  margin: 0;
  filter: none !important;
}

/* Valores: sin opacidad */
.dtabs__value{
  color: #2b2b2b !important;
  opacity: 1 !important;
  line-height: 1.55;
}

/* Links: sin opacidad */
.dtabs__links a{
  display: inline-block;
  margin-right: 18px;
  text-decoration: none;

  color: #0f2f2b !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(15,47,43,.45);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .25s ease;
}

.dtabs__links a:hover::after{
  transform: scaleX(1);
  transform-origin: left;
}

/* ===========================================================
   AUTOBUSES (desktop)
=========================================================== */

.dtabs__lead{
  color: #2b2b2b;
  opacity: 1;
  margin: 0 0 14px 0;
}

.dtabs__busgrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.dtabs__busbox{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 16px 50px rgba(0,0,0,.08);
  padding: 16px;
}

.dtabs__bushead{
  font-family: "Cinzel","Playfair Display",Georgia,serif;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #0f2f2b;
  opacity: 1;
  font-size: 13px;
  margin-bottom: 10px;
}

.dtabs__bushead span{
  font-family: "Work Sans", Arial, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  color: #2b2b2b;
  opacity: 1;
  margin-left: 8px;
  font-size: 13px;
}

.dtabs__rows{
  border-top: 1px solid rgba(0,0,0,.10);
}

.dtabs__row{
  display: grid;
  grid-template-columns: 1fr max-content;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
  color: #2b2b2b;
  opacity: 1;
}

.dtabs__row--head{
  font-size: 11px;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: #2b2b2b;
  opacity: 1;
}

.dtabs__row span:last-child{
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}

.dtabs__small{
  margin-top: 10px;
  color: #2b2b2b;
  opacity: 1;
  font-size: 13px;
}

/* ===========================================================
   DESKTOP: altura fija para evitar salto al cambiar tabs
   Ajusta 600 si lo necesitas (650/700) según texto final.
=========================================================== */

@media (min-width: 992px){
  .dtabs__content{
    min-height: 450px;
  }
  .dtabs__pane{
    min-height: 450px;
  }
}

/* ===========================================================
   MOBILE — cards seguidas
=========================================================== */

.dtm{
  display: grid;
  gap: 14px;
}

.dtm__card{
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 45px rgba(0,0,0,.08);
}

.dtm__card--dark{
  background: linear-gradient(135deg, #0f2f2b, #0a1e1b);
  border-color: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
}

/* Foto móvil */
.dtm__media{
  height: 170px;
  position: relative;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.00), 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,.72);
  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-size: 11px;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: #0f2f2b;
  opacity: 1;
}

.dtm__tagOverlay span{
  opacity: 1 !important;
  font-size: 12px;
  line-height: 1;
  filter: none !important;
}

.dtm__body{
  padding: 14px 14px 16px;
  font-size: 12px !important;
}

.dtm__title{
  margin: 0 0 10px 0;
  font-family: "Cinzel","Playfair Display",Georgia,serif;
  font-weight: 600;
  letter-spacing: .05em;
  color: #0f2f2b;
  opacity: 1;
  font-size: 18px;
}

.dtm__card--dark .dtm__title{
  color: #ffffff;
  opacity: 1;
}

.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);
}

.dtm__card--dark .dtm__row{
  border-top-color: rgba(255,255,255,.12);
}

/* Label móvil: icono + texto en línea, sin opacidad */
.dtm__k{
  display:flex;
  align-items:center;
  gap: 10px;
  white-space: nowrap;

  font-size: 10px;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: #2b2b2b;
  opacity: 1;
}

.dtm__card--dark .dtm__k{
  color: rgba(255,255,255,.85);
  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: 10px;
  line-height: 1;
  margin: 0;
  filter: none !important;
}

.dtm__v{
  color: #2b2b2b;
  opacity: 1;
  line-height: 1.5;
}

.dtm__card--dark .dtm__v{
  color: rgba(255,255,255,.90);
  opacity: 1;
}

/* 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: currentColor;
  opacity: .35;
}

/* Autobuses móvil (card dark) */
.dtm__bus{
  display:grid;
  gap: 12px;
  margin-top: 6px;
}

.dtm__busbox{
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  padding: 12px;
}

.dtm__bushead{
  font-family: "Cinzel","Playfair Display",Georgia,serif;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  opacity: 1;
  font-size: 12px;
  margin-bottom: 8px;
}

.dtm__busrow{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.10);
  font-variant-numeric: tabular-nums;
  opacity: 1;
}

.dtm__fine{
  margin-top: 12px;
  color: rgba(255,255,255,.85);
  opacity: 1;
  font-size: 13px;
  line-height: 1.5;
}

/* ===========================================================
   RSVP
=========================================================== */

.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);
  background-color: #0b3d2e; /* verde botella */
  
}

.rsvp::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 420px at 20% 15%, rgba(15,47,43,.06), transparent 55%),
    radial-gradient(760px 360px at 85% 35%, rgba(15,47,43,.05), transparent 60%);
}

.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: 0.7;
}

.rsvp__title{
  margin: 0;
  font-family: "Cinzel","Playfair Display",Georgia,serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15;
  color: #fff;
}

.rsvp__orn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}

/* Líneas laterales */
.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: #ffffff;                 /* fondo blanco */
  border: 1px solid rgba(0,0,0,.08);

  overflow: hidden;                    /* CLAVE: mete el icono dentro */

  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);
}

/* Icono de mensaje */
.rsvp__orn .orn-icon{
  width: 64%;                          /* controla tamaño del icono */
  height: 64%;
  display: block;
  stroke: rgba(15,47,43,.78);             /* verde oscuro elegante */
  pointer-events: none;
  stroke-width: 1.5;
}

/* Hover sutil (desktop) */
@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);
  }
}

/* Móvil: un poco más 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); }

/* Bus “mismo para todos” */
#fieldBusSame{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.65);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 16px 55px rgba(0,0,0,.05);
}

#fieldBusSame input[type="checkbox"]{
  width: 18px;
  height: 18px;
  accent-color: rgba(15,47,43,.85);
}

/* Guests (dinámico JS) */
#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;
}

/* Button + status */
.rsvp__button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 18px;
  border: 1px solid rgba(15,47,43,.14);
  border-radius: 999px;
  padding: 15px 18px;
  background: linear-gradient(180deg, rgba(15,47,43,.95), rgba(15,47,43,.86));
  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 (status) sin “saltos” */
.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; }
}

/* 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; }
}





/* ===========================================================
   REGALOS — BLOQUE COMPLETO (banda editorial + imagen opcional
   + centrado perfecto + copiar micro + refuerzo legibilidad)
   Pegar tal cual al FINAL de css/style.css
=========================================================== */

.giftband{
  position: relative;
  overflow: hidden;
}

/* Variante clara */
.giftband--light{
  --ink: rgba(15,47,43,.94);
  --muted: rgba(15,47,43,.74);
  --line: rgba(15,47,43,.34);
  --hair: rgba(15,47,43,.18);

  color: var(--ink);
  background: linear-gradient(180deg, #ffffff, #f7f4f1);
}

/* Imagen de fondo (activa con background-image y opacidad) */
.giftband--light::before{
  background-position: 20% 70%;
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image: url("../images/regalo1\ \(3\).png"); 
  /* Ajusta estos dos valores según tu imagen */
  background-size: cover;
  width: 70;
  
}

@media (max-width: 991.98px){
  .giftband--light::before{
    background-position: 20% 50%;
  }
}

/* Overlay para legibilidad (clave si hay imagen) */
.giftband--light::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    /* radial-gradient(900px 420px at 50% 25%, rgba(255,255,255,.78), transparent 62%), */
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.1));
}

/* Cabecera */
.giftband__head{ position: relative; z-index: 1; }

.giftband__kicker{
  font-size: 13px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(0,0,0,.60);
}

.giftband__title{
  font-family: "Cinzel","Playfair Display",Georgia,serif;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: clamp(26px, 3.4vw, 40px);
  margin: 0;
  text-shadow: 0 1px 0 rgba(255,255,255,.40);
}


/* ==========================================
   REGALOS — Ornamento estilo "Nosotros" con imagen
   (líneas laterales + círculo blanco + imagen dentro)
   ========================================== */

/* Aseguramos layout y separación (tu clase ya existe) */
.giftband__orn.giftband__orn--img{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

/* Reaprovechamos tus líneas existentes */
.giftband__orn.giftband__orn--img .giftband__line{
  /* ya tienen estilo; si quieres igualar longitudes: */
  width: 140px;                 /* ajusta si te apetece 110 / 120 / 160 */
  height: 1px;
}

/* Medallón central (blanco, glass suave) */
.giftband__orn.giftband__orn--img .orn-center{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;                  /* círculo */
  height: 28px;
  border-radius: 999px;

  background: #ffffff;          /* BLANCO sólido para que la imagen se lea */
  border: 1px solid rgba(0,0,0,.08);

  overflow: hidden;             /* CLAVE: recorta la imagen dentro del círculo */

  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,.60);
}

/* Imagen interior: contenida y centrada */
.giftband__orn.giftband__orn--img .orn-img{
  display: block;
  width: 50%;                  /* tamaño visual del icono dentro (ajusta 60–80%) */
  height: 50%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}

/* Hover sutil solo en desktop */
@media (hover:hover) and (pointer:fine){
  .giftband__orn.giftband__orn--img .orn-center{
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .giftband__orn.giftband__orn--img .orn-center:hover{
    transform: translateY(-1px);
    border-color: rgba(0,0,0,.12);
    box-shadow:
      0 18px 55px rgba(0,0,0,.14),
      inset 0 1px 0 rgba(255,255,255,.65);
  }
}

/* Móvil: un pelín más compacto */
@media (max-width: 575.98px){
  .giftband__orn.giftband__orn--img .giftband__line{
    width: 110px;
  }
  .giftband__orn.giftband__orn--img .orn-center{
    width: 26px;
    height: 26px;
  }
  .giftband__orn.giftband__orn--img .orn-img{
    width: 58%;
    height: 58%;
  }
}

.giftband__line{
  width: 140px;
  height: 1px;
  background: var(--line);
}

.giftband__diamond{
  width: 10px;
  height: 10px;
  border: 1px solid var(--line);
  transform: rotate(45deg);
  display: inline-block;
}

.giftband__intro{
  position: relative;
  z-index: 1;

  color: rgba(15,47,43,.90);
  font-size: 15px;
  line-height: 1.75;
  max-width: 60ch;
  margin-inline: auto;

  font-weight: 500;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}


/* Contenido centrado */
.giftband__stripeInner{
  width: min(920px, 92%);
  margin-top: -10px;
  margin-inline: auto;
  padding: clamp(18px, 3.2vw, 28px) 0;

  text-align: center;
  position: relative;
}

.giftband__label{
  display: inline-block;
  position: relative;
  z-index: 1;

  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;

  font-weight: 600;
}

/* IBAN + copiar centrados */
.giftband__ibanCenter{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;

  position: relative;
  z-index: 1;
}

/* IBAN protagonista: más fuerte + “cinta” clara */
.giftband__iban{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size: clamp(14px, 2vw, 18px);
  letter-spacing: .14em;

  font-weight: 550;
  color: rgba(10,28,26,.80);
  text-shadow: 0 1px 0 rgba(255,255,255,.65);

  padding: 10px 14px;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-align: center;

  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,47,43,.18);
  box-shadow: 0 14px 40px rgba(0,0,0,.10);
}

/* 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);
}

.giftband__copyIcon{
  display: inline-flex;
  opacity: .9;
  transform: translateY(0.5px);
}

.giftband__note{
  position: relative;
  z-index: 1;

  margin-top: 14px;
  color: rgba(15,47,43,.76);
  font-size: 13px;
  text-align: center;

  max-width: 62ch;
  margin-inline: auto;

  font-weight: 500;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

/* 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);
}

/* Responsive */
@media (max-width: 575.98px){
  .giftband__line{ width: 90px; }

  .giftband__ibanCenter{ width: 100%; }

  .giftband__iban{
    width: 100%;
    border-radius: 14px;
  }

  .giftband__copyMini{
    margin-top: 6px;
  }
}

/* reCAPTCHA v3: mueve el badge para que moleste menos */
.grecaptcha-badge{
  bottom: 4px !important;
  left: 4px !important;
  right: auto !important;
  transform: scale(.85);
  transform-origin: left bottom;
  opacity: 0;
}



/* ===== BUS ROUTE — estilos (Ida + Vuelta) ===== */
:root{
  --bus-ink: #0b3d2e;
  --bus-muted: rgba(15,47,43,.72);
  --bus-line: rgba(15,47,43,.25);
  --bus-dot: #0b3d2e;
  --bus-arrival: #3a6f62;           /* punto final */
  --bus-card-bg: rgba(255,255,255,.75);
  --bus-card-border: rgba(0,0,0,.10);
  --bus-shadow: 0 16px 50px rgba(0,0,0,.08);
}

/* Tarjeta/timeline compacta */
.bus-route{
  position: relative;
  border-radius: 18px;
  padding: 18px;
  border: 1px solid var(--bus-card-border);
  box-shadow: var(--bus-shadow);
  color: var(--bus-ink);
  display: grid;
  gap: 10px;
}
.bus-route--light{ background: var(--bus-card-bg); }
.bus-route--dark{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
}

/* Cabecera + chip (Ida/Vuelta) */
.bus-head{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  position: relative;
  padding-bottom: 6px;
}
.bus-head__ic{ color: currentColor; }
.bus-head__title{ margin: 0; font-weight: 600; letter-spacing: .06em; }
.bus-head__desc{ grid-column: 1 / -1; margin: 4px 0 0; font-size: 13px; color: var(--bus-muted); }
.bus-head::after{
  position: absolute; right: 0; top: 0; transform: translateY(-4px);
  padding: 4px 8px; border-radius: 999px; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--bus-ink); background: rgba(255,255,255,.80);
  border: 1px solid var(--bus-card-border);
}
.bus-route--dark .bus-head::after{
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.20);
}

/* Pista vertical con línea y puntos */
.bus-track{
  position: relative; margin: 2px 0 0 10px; list-style: none; padding: 0;
}

/* Paradas */
.bus-stop{
  position: relative;
  display: grid; grid-template-columns: 20px 1fr; gap: 12px;
  align-items: start; padding: 8px 0;
}
.bus-stop .dot{
  position: relative; top: 4px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--bus-dot);
  box-shadow: 0 0 0 2px #fff; /* aro blanco para contraste */
}
.bus-route--dark .bus-stop .dot{ box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.bus-stop.arrival .dot{ background: var(--bus-arrival); }

.bus-stop::after{
  content: "";
  position: absolute;
  left: 6px;                 /* alineado con el centro del punto (dot de 14px y columna de 20px) */
  top: calc(4px + 14px);     /* 4px (offset del dot) + 14px (diámetro del dot) = justo bajo el punto */
  bottom: -12px;              /* solape suave para unir con el padding de la siguiente parada */
  width: 2px;
  background: var(--bus-line);
  border-radius: 999px;
}

/* En la última parada NO pintamos conector (así la línea termina ahí) */
.bus-stop:last-child::after{
  display: none;
}

.info__title{ margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .02em; }
.info__time{ margin: 4px 0 0; font-size: 13px; color: var(--bus-muted); }
.bus-route--dark .info__time{ color: rgba(255,255,255,.80); }
.info__sub{ margin: 2px 0 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }

/* Desktop: grid lado a lado (Ida / Vuelta) */
@media (min-width: 992px){
  .bus-routes-grid{
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start;
  }
}

/* Móvil: mejor contraste y separación dentro de la card oscura */
@media (max-width: 575.98px){
  .dtm__card--dark .bus-route + .bus-route { margin-top: 18px; }           /* separación Ida/Vuelta */

  .dtm__card--dark .bus-stop::after{
  content: "";
  position: absolute;
  left: 6px;                 /* alineado con el centro del punto (dot de 14px y columna de 20px) */
  top: calc(4px + 14px);     /* 4px (offset del dot) + 14px (diámetro del dot) = justo bajo el punto */
  bottom:-10px;              /* solape suave para unir con el padding de la siguiente parada */
  width: 2px;
  background: rgba(255,255,255,0.38) !important;
  border-radius: 999px;
}
  .dtm__card--dark .bus-route .bus-track::after {                          /* línea más clara */
    background: rgba(255,255,255,0.38) !important;
  }

  .dtm__card--dark .bus-route .bus-stop .dot{                                /* puntos visibles */
    background: #ffffff !important; box-shadow: 0 0 0 2px rgba(0,0,0,.40);
  }
  .dtm__card--dark .bus-route .bus-stop.arrival .dot{                        /* llegada sutil */
    background: #f5ece3 !important; box-shadow: 0 0 0 2px rgba(0,0,0,.45);
  }
  .dtm__card--dark .bus-route .bus-head::after{                              /* chip como etiqueta */
    background: rgba(255,255,255,.22) !important; border-color: rgba(255,255,255,.35) !important;
    color: #ffffff !important;
  }
  .bus-head__title{ font-size: 15px; } .info__title{ font-size: 14px; } .info__time{ font-size: 12px; }
  .bus-head::after{ font-size: 10px; padding: 3px 8px; }

  .dtm__card--dark{
    background: #0b3d2e !important;
  }
}

/* FOOOOOOOOOOOOOOOOOOOOTEEEEEEEEEER */

/* ===== Footer: enlace Instagram + estilos mínimos ===== */
.footer-ig{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;                 /* verde botella de la plantilla */
  text-decoration: none;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .04em;
}

.footer-ig__icon{
  width: 18px;
  height: 18px;
  color: #ffffff;            /* hereda el verde del enlace */
}

.footer-ig__text{
  font-size: 14px;
}

#footer{
  color: #fff;
}

@media (hover:hover){
  .footer-ig:hover{ opacity: .85; }
}