/* Integración local: conserva CSS recuperado y añade la lógica estable propia. */
html{scroll-behavior:smooth;background:var(--color-5)}
body{margin:0;background:var(--color-5);color:var(--color-1);overflow-x:hidden}
body.is-locked{overflow:hidden}
button{font:inherit}
button.boton{border:0;cursor:pointer}
.is-hidden{display:none!important}
:focus-visible{outline:3px solid rgba(186,166,124,.5);outline-offset:4px}

/* Entrada */
.entry-screen{position:fixed;inset:0;z-index:15000;display:grid;place-items:center;padding:20px;background:rgba(255,252,248,.97);overflow:auto;transition:opacity .8s ease,visibility .8s ease}
.entry-screen.is-leaving{opacity:0;visibility:hidden}
.entry-card{width:min(820px,100%);position:relative;padding:34px 28px 30px;border:1px solid rgba(186,166,124,.35);border-radius:36px;background:#FFFCF8;box-shadow:0 20px 70px rgba(93,83,76,.16);overflow:hidden}
.entry-copy{position:relative;z-index:3}.entry-kicker{font-family:var(--fuente-2);text-transform:uppercase;letter-spacing:.24em;color:var(--color-1);font-size:12px}.entry-copy h1{font-family:var(--fuente-1);color:var(--color-2);font-size:clamp(52px,10vw,92px);line-height:.95;margin:12px 0}.entry-copy h1 small{font-size:.45em;color:var(--color-1)}.entry-copy p{font-family:var(--fuente-2);color:var(--color-1);font-size:18px}
.entry-video-wrap{position:relative;z-index:3;width:min(680px,100%);margin:22px auto;border-radius:24px;overflow:hidden;background:#eee;aspect-ratio:16/9}.entry-video-wrap video{width:100%;height:100%;object-fit:cover}.entry-video-fallback{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:linear-gradient(135deg,#f1e8df,#dbe6e0);padding:30px;font-family:var(--fuente-2);color:var(--color-1)}
.entry-choices{position:relative;z-index:3;transition:opacity .6s ease,transform .6s ease}.entry-choices.is-hidden{opacity:0;transform:translateY(12px);pointer-events:none;height:0;overflow:hidden}.entry-choices>span{display:block;font-family:var(--fuente-2);font-size:16px;color:var(--color-2);margin-bottom:18px}.entry-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.boton-secundario{background:transparent!important;color:var(--color-1)!important;border:1px solid var(--color-2)!important;box-shadow:none!important}
.entry-floral{position:absolute;pointer-events:none;z-index:1;opacity:.9}.entry-floral img{width:100%}.entry-floral--a{width:260px;left:-80px;top:-80px}.entry-floral--b{width:180px;right:-55px;bottom:-40px;transform:rotate(180deg)}

/* Control música */
.music-control{position:fixed;right:18px;bottom:18px;z-index:12000;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.65);background:rgba(129,114,102,.88);color:#fff;box-shadow:0 8px 30px rgba(0,0,0,.16);backdrop-filter:blur(10px);cursor:pointer;transition:.25s}.music-control:hover{transform:translateY(-2px)}.music-control__state{font-family:var(--fuente-2);font-size:18px}

/* Hero: el CSS recuperado esperaba parallax JS; aquí usamos directamente la foto local. */
section.portada .portada-picture{background-image:linear-gradient(rgba(129,148,139,.10),rgba(129,148,139,.10)),url('../img/portada.jpg');background-size:cover;background-position:center;min-height:810px;overflow:hidden}
section.portada .portada-picture{animation:heroSlowZoom 20s ease-out both}
@keyframes heroSlowZoom{from{background-size:100% auto}to{background-size:106% auto}}

/* Invitados */
.bloque-grupo-invitados{background:var(--color-5);padding:120px 0 130px;position:relative}.bloque-grupo-invitados .card-grupo-invitados{background:#fffefa;border:1px solid rgba(186,166,124,.38);box-shadow:0 18px 50px rgba(129,114,102,.10);max-width:720px;margin:0 auto;border-radius:28px}.nombre-grupo{font-family:var(--fuente-1);font-size:clamp(40px,7vw,62px);color:var(--color-2);margin:12px 0}.tipo-invitacion{font-family:var(--fuente-2);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--color-3);display:inline-block;margin-bottom:4px}.reserved-note{font-family:var(--fuente-2);font-size:14px;color:var(--color-2);margin-top:20px}

/* Íconos sustitutos para JSON recuperados como HTML */
.anim-anillos img,.anim-fiesta img{width:100%;height:100%;object-fit:contain}.anim-galeria img,.anim-instagram img{width:100%;height:100%;object-fit:contain}.anim-musica img,.anim-vestuario img,.anim-tips img,.anim-regalos img{max-width:100%;max-height:100%;object-fit:contain}

/* Candlelight */
.candle-row{display:flex;justify-content:center;align-items:flex-end;gap:20px;position:relative;z-index:10;margin:30px auto 0}.candle{display:block;width:26px;height:62px;border-radius:7px 7px 4px 4px;background:linear-gradient(#fffdf7,#efe1ce);box-shadow:0 16px 26px rgba(100,74,49,.10);position:relative}.candle--small{height:44px}.candle--tall{height:82px}.candle::before{content:"";position:absolute;width:14px;height:21px;left:50%;top:-18px;transform:translateX(-50%);border-radius:60% 45% 60% 45%;background:radial-gradient(circle at 50% 32%,#fff7c7 0 22%,#ffd27a 28% 65%,#eea93e 72%);box-shadow:0 0 18px rgba(255,201,105,.8),0 0 42px rgba(255,201,105,.36);animation:candleFlicker 3.5s ease-in-out infinite}.candle:nth-child(2)::before{animation-delay:-1.1s}.candle:nth-child(3)::before{animation-delay:-2s}@keyframes candleFlicker{0%,100%{transform:translateX(-50%) scale(1) rotate(-1deg)}50%{transform:translateX(-50%) scale(.94,1.08) rotate(1.5deg)}}.candle-row--footer{margin:45px auto 0}

/* RSVP */
section.seccion-principal.confirmacion-asistencia{padding:120px 20px;background:linear-gradient(180deg,#FFFCF8,#f4eee6);text-align:center}.box-confirmacion{max-width:760px;margin:auto}.rsvp-deadline{font-family:var(--fuente-2);color:var(--color-1);font-size:14px;margin-top:26px}

/* Galería sin Slick: usa el estilo polaroid recuperado en scroll horizontal nativo. */
.editorial-scroll{display:flex;gap:22px;overflow-x:auto;padding:25px max(24px,calc((100vw - 1180px)/2)) 55px;scroll-snap-type:x mandatory;scrollbar-width:thin}.editorial-scroll>div{flex:0 0 min(76vw,430px);scroll-snap-align:center}.editorial-scroll .polaroid{transform:rotate(-1deg)}.editorial-scroll>div:nth-child(even) .polaroid{transform:rotate(1.2deg)}.editorial-scroll .polaroid button{border:0;background:none;padding:0;width:100%;cursor:zoom-in}.editorial-scroll img{aspect-ratio:3/2;object-fit:cover;display:block}

/* Menú */
.menu-boda{padding:120px 20px;background:#f7f1e9;position:relative}.menu-list{max-width:760px;margin:55px auto 0}.menu-line{display:grid;grid-template-columns:minmax(130px,.5fr) 1fr;gap:24px;padding:22px 0;border-bottom:1px solid rgba(129,114,102,.18);text-align:left;font-family:var(--fuente-2);color:var(--color-1)}.menu-line strong{color:var(--color-2)}

/* Instagram local */
section.instagram{background-image:linear-gradient(rgba(129,114,102,.50),rgba(129,114,102,.50)),url('../img/portada.JPEG');background-size:cover;background-position:center;background-attachment:fixed}

/* Footer buttons */
.footer-link{background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:4px}section.footer .col-acciones-footer ul button.footer-link{color:#fff;font-family:var(--fuente-2);font-size:16px}

/* Modal propio, sin Bootstrap JS/jQuery. Evita el bug de Firefox al abrir selects. */
.wedding-modal[hidden]{display:none!important}.wedding-modal.is-open{display:flex!important;align-items:center;justify-content:center;position:fixed;inset:0;z-index:14000;background:rgba(255,252,248,.92);backdrop-filter:blur(8px);padding:20px;overflow:auto;animation:modalFade .35s ease both}.wedding-modal .modal-dialog{width:min(620px,100%);margin:auto}.wedding-modal .modal-content{width:100%;animation:modalScale .45s cubic-bezier(.2,.7,.2,1) both}@keyframes modalFade{from{opacity:0}to{opacity:1}}@keyframes modalScale{from{opacity:0;transform:scale(.97) translateY(10px)}to{opacity:1;transform:none}}.white-circle-icon{width:100px;height:100px;border-radius:50%;background:#fff;display:grid;place-items:center;margin:-55px auto 0;box-shadow:0 5px 20px rgba(0,0,0,.08)}.white-circle-icon img{width:72px!important;height:72px!important;object-fit:contain!important}.wedding-modal .modal-header{display:block!important;text-align:center}.wedding-modal .modal-body{padding:20px 34px 34px}.wedding-form label{font-family:var(--fuente-2);display:block;color:var(--color-1);font-size:14px;margin-bottom:7px}.wedding-form label span{font-weight:400;color:#94877c}.wedding-form .form-control{border:0;border-bottom:1px solid rgba(129,114,102,.35)!important;border-radius:0;background:transparent!important;text-align:center;color:var(--color-1);box-shadow:none!important;padding:10px 4px;height:auto}.wedding-form select.form-control{appearance:auto;text-align-last:center}.wedding-form textarea.form-control{resize:vertical}.wedding-form .boton{margin-top:12px}.wedding-form small{display:block;color:#94877c;margin-top:7px}.form-status{font-family:var(--fuente-2);color:var(--color-3);font-size:14px;min-height:24px;margin:15px 0 0}

/* Lightbox */
.lightbox[hidden]{display:none}.lightbox{position:fixed;inset:0;z-index:16000;background:rgba(25,25,25,.9);display:grid;place-items:center;padding:30px}.lightbox img{max-width:min(1200px,95vw);max-height:90vh;object-fit:contain;box-shadow:0 20px 80px #0008}.lightbox-close{position:absolute;right:20px;top:18px;width:48px;height:48px;border-radius:50%;border:1px solid #fff8;background:#0005;color:#fff;font-size:32px;cursor:pointer}

/* Reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s ease}.reveal.is-visible{opacity:1;transform:none}.reveal-floral{transition-duration:1.2s}.number-tick{animation:numberTick .35s ease}@keyframes numberTick{from{opacity:.45;transform:translateY(3px)}to{opacity:1;transform:none}}

@media(max-width:767px){
  section.portada .portada-picture{min-height:490px;background-size:cover!important;animation:none}
  .entry-card{padding:26px 15px 22px;border-radius:26px}.entry-copy h1{font-size:58px}.entry-video-wrap{margin-top:16px}.entry-actions{flex-direction:column;align-items:stretch}.entry-actions .boton{width:100%}
  .bloque-grupo-invitados{padding:80px 15px 110px}.bloque-grupo-invitados .card-grupo-invitados{border-radius:22px}
  .menu-line{grid-template-columns:1fr;gap:5px;text-align:center;padding:18px 0}
  section.instagram{background-attachment:scroll}.editorial-scroll>div{flex-basis:82vw}.wedding-modal{padding:12px}.wedding-modal .modal-body{padding:18px 20px 26px}.white-circle-icon{width:82px;height:82px}.white-circle-icon img{width:60px!important;height:60px!important}
  .candle-row{gap:14px}.candle{width:22px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}section.instagram{background-attachment:scroll}}

/* =========================================================
   NOMBRES DEL CIERRE — OVERRIDE DEFINITIVO
   ========================================================= */

.col-nombres-footer {
  overflow: visible !important;
}

.footer-couple-names {
  margin: 0 !important;
  padding: 24px 38px 30px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: clamp(1rem, 2.5vw, 2rem) !important;

  width: auto !important;
  max-width: none !important;

  line-height: 1.3 !important;
  overflow: visible !important;
  white-space: nowrap;
}


/* MUY IMPORTANTE:
   anulamos estilos antiguos aplicados a todos los span del h4 */
.col-nombres-footer .footer-couple-names span {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  margin: 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;

  transform: none !important;

  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;

  overflow: visible !important;
}


/* Nombres */
.footer-couple-name {
  display: inline-block !important;

  font-family: "Parisienne", cursive !important;
  font-size: clamp(3.2rem, 5vw, 5rem) !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;

  color: #8b7368 !important;

  padding:
    .12em
    .18em
    .20em
    .18em !important;

  white-space: nowrap !important;
  overflow: visible !important;

  z-index: 2;
}


/* Ampersand */
.footer-couple-amp {
  display: inline-block !important;

  font-family: "Playfair Display", serif !important;
  font-size: clamp(1.35rem, 2vw, 1.7rem) !important;
  font-weight: 400 !important;

  color: #C6AC7E !important;

  padding: 0 .15rem !important;

  flex: 0 0 auto !important;

  z-index: 2;
}


/* Especialmente Diego:
   espacio adicional para el trazo final de la fuente */
.footer-couple-name:first-child {
  padding-right: .32em !important;
}


@media (min-width: 768px) {

  .col-nombres-footer {
    justify-content: center !important;
  }

  .footer-couple-names {
    padding-left: 50px !important;
    padding-right: 50px !important;

    gap: 1.4rem !important;
  }

}


@media (max-width: 767.98px) {

  .col-nombres-footer {
    justify-content: center !important;
  }

  .footer-couple-names {
    display: block;
    width: 100%;
    text-align: center;

    padding: 18px 12px 28px;
  }

  .footer-couple-name {
    font-size: clamp(3rem, 15vw, 4.6rem);
  }

  .footer-couple-amp {
    margin: .05em 0;
    font-size: 1.35rem;
  }
}


/* ==========================================================
   CORRECCIÓN DE ANCHO EN MÓVIL
   ========================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

#invitation {
  display: block !important;
  position: relative !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  left: 0 !important;
  right: auto !important;

  overflow-x: hidden;
}


/* Todas las secciones principales ocupan el ancho completo */
#invitation > section,
.portada,
.cuenta-regresiva,
.bloque-grupo-invitados,
.ceremonia-fiesta,
.confirmacion-asistencia,
.galeria,
.fiesta,
.menu-boda,
.regalos,
.instagram,
.footer {
  width: 100% !important;
  max-width: 100% !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  box-sizing: border-box;
}


/* ==========================================================
   MÓVIL
   ========================================================== */

@media (max-width: 767.98px) {

  #invitation {
    width: 100% !important;
    max-width: 100% !important;
  }

  /*
   * Bootstrap restringe el container.
   * En móvil queremos aprovechar casi toda la pantalla.
   */
  #invitation .container {
    width: 100% !important;
    max-width: none !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 18px !important;
    padding-right: 18px !important;
  }


  /*
   * Evita que los márgenes negativos de Bootstrap
   * desplacen visualmente el contenido.
   */
  #invitation .row {
    width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
  }


  #invitation .row > [class*="col-"] {
    width: 100%;
    max-width: 100%;

    padding-left: 0;
    padding-right: 0;
  }


  /* Secciones full-width */
  .regalos,
  .instagram,
  .footer,
  .fiesta,
  .galeria,
  .menu-boda,
  .confirmacion-asistencia,
  .ceremonia-fiesta,
  .bloque-grupo-invitados,
  .cuenta-regresiva {
    width: 100% !important;
    max-width: 100% !important;

    left: 0 !important;
    right: auto !important;

    transform: none;
  }

}