/* =========================
   Contador regresivo con separadores
   ========================= */

/* Siempre en una sola línea */
.countdown-sep-grid{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap: clamp(12px, 3vw, 48px);
  text-align:center;
  flex-wrap: nowrap;           /* <<< no wrap */
  min-width: 0;                /* permite shrink */
  overflow-x: hidden;          /* sin scroll por defecto */
}

/* Los 4 items pueden encogerse */
.countdown-sep-grid .item{
  flex: 1 1 0;                 /* grow+shrink, base 0 */
  min-width: 0;
}

.countdown-sep-grid .item .count-title{
  font-size: clamp(20px, 7vw, 56px); /* puede bajar más en móviles */
  line-height: 1;
  margin: 0 0 6px;
  font-weight: 600;
}

.countdown-sep-grid .item .count-label{
  font-size: clamp(12px, 3.5vw, 22px);
  color: #6b6b6b;
  margin: 0;
}

/* Las flores no ocupan ancho fijo grande */
.countdown-sep-grid .divider{
  flex: 0 0 auto;
}
.countdown-sep-grid .divider img{
  display:block;
  height: clamp(22px, 4.5vw, 50px);
  width:auto;
  opacity:.9;
  margin: 0 4px;
}

/* Nota inferior */
.countdown-subnote{
  text-align:center;
  margin-top:16px;
  color:#7b7b7b;
  font-size: clamp(12px, 2.6vw, 15px);
}

/* Ultra-pequeño: permitir scroll horizontal antes de romper layout */
@media (max-width: 320px){
  .countdown-sep-grid{ overflow-x:auto; -webkit-overflow-scrolling: touch; }
}

/* =========================
   Silder principal de imágenes con texto
   ========================= */

/* Contenedor de imagen: misma altura para todas (portrait → recorte suave) */
.wpo-hero-section .wpo-hero-img{
  position: relative;
  height: clamp(360px, 64vh, 720px);
  overflow: hidden;
  border-radius: 12px;
}

/* Imagen: llena el contenedor sin deformar */
.wpo-hero-section .wpo-hero-img img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;       /* llena el contenedor */
  object-position: 50% 15%;  /* TOP: alinea arriba, recorta abajo */
}

 .crop-top img{ object-position: 50% 18%!important}
 .crop-center img{ object-position: 50% 50%!important}
 .crop-bottom img{ object-position: 50% 100%!important}


/* Ajustes opcionales por slide (usa en el HTML si lo necesitas) */
.wpo-hero-item.crop-top   .wpo-hero-img img{ object-position: 50% 18%; }  /* muestra más parte superior */
.wpo-hero-item.crop-center .wpo-hero-img img{ object-position: 50% 50%; } /* (default) */
.wpo-hero-item.crop-bottom .wpo-hero-img img{ object-position: 50% 100%; } /* muestra más parte inferior */

/* Overlays: gradiente inferior + leve oscurecimiento global para texto */
.wpo-hero-section .wpo-hero-img::before{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height: 45%;
  background: linear-gradient(to top, rgba(0,0,0,.46), rgba(0,0,0,0));
  pointer-events:none;
}
.wpo-hero-section .wpo-hero-img::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.12); /* contraste suave general */
  mix-blend-mode: multiply;
  pointer-events:none;
}

/* Texto: abajo-izquierda (no centrado) */
.wpo-hero-section .wpo-hero-text{
  position: absolute;
  left: clamp(12px, 4vw, 40px);
  bottom: clamp(12px, 4vw, 36px);
  right: auto; top: auto;
  text-align: left;
  max-width: min(92%, 860px);
  pointer-events: none; /* no bloquear gestos del slider */
  padding-right: 8px;
}

.wpo-hero-section .wpo-hero-text h2{
  font-family: "Marcellus", serif !important;
  margin: 0;
  color: #f6f6f6 !important;
  font-weight: 700;
  font-size: clamp(28px, 6vw, 72px);
  line-height: 1.05;
  /* legibilidad en cualquier foto */
  text-shadow:
    0 2px 18px rgba(0,0,0,.55),
    0 0 2px rgba(0,0,0,.88);
  -webkit-text-stroke: 1px rgba(0,0,0,.28);
  padding: 0 .12em;
}

/* Badge opcional (si envuelves el texto con <span class="text-badge">) */
.wpo-hero-text .text-badge{
  display:inline-block;
  padding:.12em .35em;
  border-radius:.4em;
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(4px);
}
@supports not ((backdrop-filter: blur(4px))){
  .wpo-hero-text .text-badge{ background: rgba(0,0,0,.32); }
}

/* Asegurar que Owl mantenga alturas */
.wpo-hero-items .owl-item,
.wpo-hero-items .wpo-hero-item{ height: 100%; }

/* Ajustes finos en pantallas pequeñas */
@media (max-width: 480px){
  .wpo-hero-section .wpo-hero-img{
    height: clamp(300px, 58vh, 540px);
  }
  .wpo-hero-section .wpo-hero-text{
    left: 14px; bottom: 14px;
  }
}

/* =========================
   CARRUSEL
   ========================= */

   /* Carrusel de galería */
.gallery-carousel .slide { padding: 6px; }
.gallery-carousel .slide a { display: block; }
.gallery-carousel img{
  width: 100%;
  height: clamp(220px, 38vh, 520px);
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* Ajuste de flechas/dots de slick (opcional) */
.gallery-carousel .slick-prev, 
.gallery-carousel .slick-next{
  z-index: 2;
  width: 40px; height: 40px;
}
.gallery-carousel .slick-prev:before, 
.gallery-carousel .slick-next:before{ font-size: 34px; }
.gallery-carousel .slick-dots{ bottom: -28px; }

.slick-next.slick-arrow {
  transform: translateX(-60px);
}

.slick-prev.slick-arrow {
  transform: translateX(60px);
}

/* WHATSAPP boton confirmar */

/* Botón flotante WhatsApp */
.floating-rsvp{
  position: fixed;
  right: 16px;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #25D366;            /* verde WhatsApp */
  color: #fff !important;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  font-weight: 600;
  letter-spacing: .2px;
  z-index: 9999;
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.floating-rsvp:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,.24);
  text-decoration: none;
}
@media (max-width: 576px){
  .floating-rsvp{
    right: 12px; bottom: 14px;
    padding: 11px 14px;
    font-size: 14px;
  }
  .floating-rsvp svg{ width:20px; height:20px; }
}
/* FRAME mapa */
.map-embed{
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px; /* opcional */
}

/* Max ancho siempre; altura proporcional */
.map-embed iframe{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;   /* desktop */
  border: 0;
  display: block;
}

/* Más alto en móvil para que no se “corte” contenido */
@media (max-width: 576px){
  .map-embed iframe{ aspect-ratio: 4 / 5; }
}

/* Fallback si el navegador no soporta aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  .map-embed{ padding-top: 56.25%; }         /* 16:9 */
  @media (max-width: 576px){ .map-embed{ padding-top: 125%; } } /* ~4:5 */
  .map-embed iframe{ position:absolute; inset:0; width:100%; height:100%; }
}

html { scroll-behavior: smooth; }              /* smooth sin JS */

#home, #countdown, #story, #gallery, #event, #dresscode, #location {
  scroll-margin-top: 80px;                     /* ajusta a la altura de tu header sticky */
}

/* MUSICA */

/* Reproductor flotante (colócalo lado opuesto al botón de WhatsApp) */
.floating-audio{
  position: fixed;
  left: 16px;               /* WhatsApp está a la derecha; este va a la izquierda */
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #ffffff;
  color: #333;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
  z-index: 9999;
  user-select: none;
}

.floating-audio .ap-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: #e7d1c9;      /* toma un tono del tema */
  color: #3b3b3b;
  font-weight: 600;
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
}

.floating-audio .ap-btn:hover{ filter: brightness(0.96); }

.floating-audio .ap-vol{
  -webkit-appearance: none;
  appearance: none;
  width: 110px;
  height: 4px;
  background: #ddd;
  border-radius: 999px;
  outline: none;
}
.floating-audio .ap-vol::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: #b78b7a; cursor: pointer;
  border: 0;
}
.floating-audio .ap-label{ font-size: 14px; }

/* En móvil, más compacto */
@media (max-width: 576px){
  .floating-audio{ left: 12px; bottom: 14px; padding: 8px 10px; gap: 8px; }
  .floating-audio .ap-vol{ width: 90px; }
  .floating-audio .ap-btn{ padding: 7px 10px; }
}

/* Evita que tape toasts/otros: ajusta si hace falta */
.floating-audio{ pointer-events: auto; }