/* ============================================================================
 *  CARMEN & JAVIER — v3: splash + carrusel de secciones
 *  Splash: foto de fondo, "Nuestra boda / Carmen y Javier", sobre con cursor
 *  de guante. Carrusel: un slide por sección, indicadores-minimapa abajo
 *  (presionar y arrastrar recorre los slides), mapas en modal sin salir.
 *  Paleta verde salvia / cobre muestreada de la tarjeta.
 * ========================================================================== */

:root{
  --verde:#767c5e; --verde-osc:#5f6650; --cobre:#b68c75; --cobre-cla:#daae96;
  --crema:#f0ebe2; --beige:#e2dccf; --tinta:#3a3d30; --papel:#fdfcf8;
  --script:'Parisienne',cursive;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',system-ui,sans-serif;
  --pixel:'Silkscreen',ui-monospace,monospace;
  --curva:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{background:var(--crema);color:var(--tinta);font-family:var(--sans);overscroll-behavior-x:none;
     font-weight:300;line-height:1.7;overflow:hidden}   /* el carrusel maneja el scroll */

.script{font-family:var(--script);font-weight:400;line-height:1.2}
.script em{font-style:normal;color:var(--cobre)}
.serif{font-family:var(--serif)}
.serif-it{font-family:var(--serif);font-style:italic}
.caps{font-family:var(--serif);letter-spacing:.12em;text-transform:uppercase;line-height:1.9}
.centro{text-align:center}

/* ══ SPLASH ════════════════════════════════════════════════════════════ */
#splash{position:fixed;inset:0;z-index:50;height:100dvh;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--crema);transition:opacity 1s ease-out}
#splash.fuera{opacity:0;pointer-events:none}

/* Foto general de fondo con velo crema para que todo se lea */
.sp-foto{position:absolute;inset:0;
  background:url("img/hero.webp?v=8") center 14%/cover no-repeat}
.sp-velo{position:absolute;inset:0;
  background:radial-gradient(62% 46% at 50% 56%,rgba(253,252,248,.66),transparent 72%),
             linear-gradient(180deg,rgba(245,241,234,.93),rgba(240,235,226,.85) 45%,
                             rgba(226,220,207,.9) 80%,rgba(205,202,184,.94))}

.esq{position:absolute;z-index:1;pointer-events:none;user-select:none}
.esq-si,.esq-sd{top:32px;width:130px;opacity:.32}
.esq-si{left:32px}
.esq-sd{right:32px;transform:scaleX(-1)}
.esq-ii,.esq-id{bottom:24px;width:140px;height:150px;object-fit:cover;
                object-position:center 62%;opacity:.24}
.esq-ii{left:32px;transform:rotate(12deg)}
.esq-id{right:32px;transform:scaleX(-1) rotate(12deg)}

/* width/height explícitos: un canvas no se estira con inset:0 */
#petalos{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}

.sp-centro{position:relative;z-index:10;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:clamp(.3rem,1.4vh,.9rem);
  padding:0 2vw;max-width:640px}

.divisor{display:flex;align-items:center;gap:.7rem;color:var(--cobre)}
.divisor .linea{width:88px;height:1px;
  background:linear-gradient(90deg,transparent,var(--cobre))}
.divisor .linea:last-child{background:linear-gradient(90deg,var(--cobre),transparent)}
.divisor .punto{width:4px;height:4px;border-radius:50%;background:var(--cobre);opacity:.62}
.estrella{width:22px;height:22px;fill:var(--cobre);opacity:.78}

.sp-titulo{font-size:52px;color:var(--verde-osc)}
.sp-nombres{font-size:24px;color:var(--verde-osc);letter-spacing:.14em}

/* El sobre: flota, y al pasar el mouse "se ilumina" con el guante de cursor */
.sobre{position:relative;border:0;background:none;padding:0;
  cursor:url("img/guante.svg") 10 2, pointer;
  height:clamp(190px,31vh,400px);aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 18px 32px rgba(95,102,80,.30));
  animation:vaiven 3.2s ease-in-out infinite alternate;
  transition:filter .3s;
  -webkit-tap-highlight-color:transparent}
.sobre:hover{filter:drop-shadow(0 22px 40px rgba(95,102,80,.44)) brightness(1.06)}
@keyframes vaiven{from{transform:translateY(-9px)}to{transform:translateY(7px)}}
.sobre-img{width:100%;height:100%;object-fit:contain;display:block}
.sobre .sello{position:absolute;left:50%;top:53%;width:24%;
              transform:translate(-50%,-50%);pointer-events:none;
              transition:transform .3s var(--curva)}
.sobre:hover .sello{transform:translate(-50%,-50%) scale(1.06)}
.sobre:focus-visible{outline:2px solid var(--cobre);outline-offset:6px;border-radius:4px}

.sp-invitado .script{font-size:30px;color:var(--verde-osc);line-height:1.25}
.sp-cupos{font-family:var(--serif);font-size:17px;color:var(--tinta);letter-spacing:.04em}

.sp-clic{border:0;background:none;font-size:19px;margin-top:.5rem;
  color:var(--verde-osc);font-family:var(--serif);font-style:italic;
  cursor:url("img/guante.svg") 10 2, pointer;
  animation:pulsoTxt 2.4s ease-in-out infinite;
  -webkit-tap-highlight-color:transparent}
@keyframes pulsoTxt{50%{opacity:.45}}
.sp-clic:focus-visible{outline:2px solid var(--cobre);outline-offset:4px}

.sp-error-txt{font-size:19px;color:var(--tinta);line-height:1.8;max-width:38ch}
.sp-reintentar{margin-top:1rem;font-family:var(--serif);font-size:.78rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--verde-osc);
  background:none;border:1px solid var(--verde-osc);border-radius:2px;
  padding:.75rem 1.6rem;cursor:pointer}
.sp-reintentar:focus-visible{outline:2px solid var(--cobre);outline-offset:3px}

/* ══ CARRUSEL ══════════════════════════════════════════════════════════ */
.carrusel{position:relative;height:100dvh;overflow:hidden}
.pista-slides{display:flex;height:100%;touch-action:pan-y;
  transition:transform .55s var(--curva);will-change:transform}
.pista-slides.sin-anim{transition:none}          /* durante el arrastre del minimapa */

.slide{position:relative;flex:0 0 100vw;height:100%;overflow:hidden;touch-action:pan-y;
  display:flex;align-items:center;justify-content:center}
.sl-cont{position:relative;z-index:2;width:100%;max-width:640px;touch-action:pan-y;
  max-height:100%;overflow-y:auto;padding:3.4rem 1.5rem 4.6rem;
  scrollbar-width:thin}
.sl-crema{background:url("img/satin.webp") center/cover,var(--crema)}
.sl-verde{background:var(--verde);color:var(--papel)}
.sl-verde::after{content:"";position:absolute;inset:0;
  background:url("img/verde-textura.webp") center/cover;opacity:.16;
  mix-blend-mode:overlay;pointer-events:none}

.titulo-sl{font-size:clamp(2.3rem,6vw,3rem);color:var(--papel);margin-bottom:1rem}
.titulo-sl.osc{color:var(--verde-osc)}
.frase{font-size:.92rem;max-width:38ch;margin:0 auto;text-wrap:balance}
.frase.caps{font-size:.84rem}
.frase.caps.clara{opacity:.92}
.frase.serif{font-size:1.05rem;font-style:italic;line-height:1.8}

/* ── Slide 0 · portada ─────────────────────────────────────────────────── */
.sl-hero{color:#f4ede1}
.hero-foto{position:absolute;inset:0;
  background:url("img/hero.webp?v=8") center 12%/cover no-repeat}
.hero-velo{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(26,28,20,.30),rgba(26,28,20,.40) 50%,rgba(26,28,20,.62)),
             radial-gradient(ellipse at center,transparent 55%,rgba(26,28,20,.55))}
.hero-marco{position:absolute;inset:22px;border:1px solid rgba(244,237,225,.32);
            pointer-events:none;z-index:1}
.hero-centro{overflow:visible}
.hero-arriba{font-family:var(--serif);font-size:16px;letter-spacing:.35em;
             text-transform:uppercase;opacity:.92;line-height:1.5}
.hero-arriba span{display:block}   /* NOS / CASAMOS, una palabra por línea */
.rombo{display:block;width:11px;height:11px;margin:1.1rem 0;
       background:var(--cobre-cla);transform:rotate(45deg);opacity:.85}
.hero-nombres{font-size:clamp(3rem,8vw,4.6rem);text-shadow:0 2px 24px rgba(26,28,20,.55)}
.hero-nombres .hn-l1,.hero-nombres .hn-l2{display:block}  /* Carmen / & Javier */
.hero-fecha{font-family:var(--serif);font-size:clamp(1.4rem,3vw,1.9rem);
            letter-spacing:.1em;margin-top:.6rem}
.hero-fecha span{display:block}     /* "Sábado 28 de" / "noviembre de 2026" */

/* El número de cupos: sin paréntesis, más grande y a la altura del texto */
.sp-cupos .num,.hi-cupos .num{font-size:1.35em;font-weight:500;line-height:1;
                              vertical-align:-.05em}
.hero-invitado{margin-top:1.8rem;padding-top:1.3rem;position:relative}
.hero-invitado::before{content:"";position:absolute;top:0;left:50%;
  transform:translateX(-50%);width:120px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(244,237,225,.6),transparent)}
.hi-nombre{font-size:1.8rem;color:#f4ede1}
.hi-cupos{font-family:var(--serif);font-size:1rem;white-space:pre-line;
          opacity:.85;letter-spacing:.05em}
.pista-hint{position:absolute;right:14px;top:50%;margin-top:-16px;width:32px;height:32px;
  color:var(--verde-osc);opacity:.55;z-index:4;animation:hintX 1.8s ease-in-out infinite}
@keyframes hintX{50%{transform:translateX(7px);opacity:.5}}

/* ── Slide 0 · bienvenida: sobre abierto con carta y fotos ─────────────── */
.sl-bienvenida .sl-cont{display:none}
.bv-flor{position:absolute;pointer-events:none}
.bv-calas{left:-10%;bottom:36%;width:32%;z-index:5}
.bv-euca{right:-7%;bottom:36%;width:16%;transform:rotate(24deg);opacity:.85;z-index:5}
.bv-rosa{right:-9%;bottom:19%;width:27%;z-index:5}
.bv-comp{position:relative;z-index:2;width:min(88vw,440px);aspect-ratio:4/4.6;
         margin:0 auto}
.bv-foto{position:absolute;object-fit:cover;background:#fff;
  border:6px solid #fff;outline:1px solid rgba(95,102,80,.45);border-radius:3px;
  box-shadow:0 10px 26px rgba(60,64,46,.28)}
.bv-foto1{right:4%;top:1%;width:57%;aspect-ratio:4/3.3;transform:rotate(3deg);z-index:1}
.bv-foto2{right:10%;top:27%;width:53%;aspect-ratio:4/2.9;transform:rotate(-2.5deg);z-index:2}
.bv-carta{position:absolute;left:1%;top:-4%;width:55%;z-index:3;
  background:url("img/pergamino.svg") center/100% 100% no-repeat;
  padding:1.5rem 1.2rem 4.5rem;text-align:center;
  transform:rotate(-7deg);
  filter:drop-shadow(0 12px 22px rgba(60,64,46,.28))}
.bv-orn{display:block;width:42%;margin:1rem auto .3rem;opacity:.9}
.bv-orn-b{width:34%;margin:.25rem auto 0;transform:translateX(9%)}
.bv-caps{font-family:var(--serif);font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--verde-osc);line-height:1.7;
  max-width:14ch;margin:0 auto .1rem}
.bv-nombres{font-size:1.85rem;color:var(--verde);line-height:1.02}
.bv-fecha{font-family:var(--serif);font-size:.92rem;letter-spacing:.2em;
  color:var(--verde-osc);margin-top:0;padding-left:17%;transform:translateY(-4px)}
.bv-sobre{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:104%;z-index:4;filter:drop-shadow(0 14px 30px rgba(60,64,46,.25))}
.bv-sello{position:absolute;left:50%;bottom:13%;transform:translateX(-50%);
  width:17%;z-index:5;filter:drop-shadow(0 4px 10px rgba(60,64,46,.35))}
@media(min-width:768px){
  .bv-comp{width:min(58vh,520px)}
}

/* ── Slide 1 · guarda la fecha ─────────────────────────────────────────── */
.fecha-grande{font-family:var(--serif);font-size:clamp(2.6rem,7vw,3.6rem);font-weight:300;
  color:var(--verde-osc);letter-spacing:.03em;font-variant-numeric:tabular-nums;line-height:1.15}
.fecha-dia{font-size:.95rem;color:var(--tinta);opacity:.8;letter-spacing:.09em}

/* Contador con tipografía digital, como la tarjeta original */
.cuenta-digital{display:flex;align-items:flex-start;justify-content:center;gap:.35rem;
  background:var(--verde);border-radius:4px;padding:1.1rem .8rem .9rem;
  margin:1.4rem auto;width:fit-content;max-width:100%;
  box-shadow:0 12px 30px rgba(95,102,80,.28)}
.cuenta-digital i{font-family:var(--sans);font-weight:200;font-style:normal;
  font-size:1.7rem;color:var(--papel);opacity:.6;padding-top:.05rem}
.cuenta-digital b{display:block;font-family:var(--sans);font-weight:200;
  font-size:clamp(1.6rem,5.2vw,2.2rem);color:var(--papel);letter-spacing:.04em;
  font-variant-numeric:tabular-nums;line-height:1.1;min-width:2ch;text-align:center}
.cuenta-digital span{display:block;font-family:var(--serif);font-size:.6rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--papel);opacity:.75;
  text-align:center;margin-top:.3rem}

.calendario{width:min(330px,90%);margin:.6rem auto 0;display:block;border-radius:4px;
            box-shadow:0 12px 30px rgba(60,64,46,.18)}

.btn-fino{margin-top:1.2rem;font-family:var(--serif);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;background:none;border:1px solid currentColor;color:inherit;
  border-radius:2px;padding:.75rem 1.5rem;cursor:pointer;opacity:.85;transition:.2s}
.btn-fino:hover{opacity:1;background:rgba(95,102,80,.06)}
.btn-fino.osc{color:var(--verde-osc)}
.btn-fino:focus-visible{outline:2px solid var(--cobre);outline-offset:3px}

/* ── Slide 2 · lugares ─────────────────────────────────────────────────── */
.lugares{display:grid;gap:1.1rem;margin-top:1.4rem}
.lugar{border-radius:6px;padding:1.8rem 1.3rem 1.6rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.35rem}
.lugar.ceremonia{background:var(--papel);color:var(--tinta);
  border:1px solid var(--beige);outline:1px solid rgba(95,102,80,.25);outline-offset:-7px}
.lugar.recepcion{background:linear-gradient(160deg,#c9a678,#b68c75);color:#fff;
  outline:1px solid rgba(255,255,255,.45);outline-offset:-7px}
.lg-icono{width:44px;height:44px;opacity:.85}
.lugar.ceremonia .lg-icono{color:var(--verde-osc)}
.lugar h3{font-size:2rem;font-weight:400}
.lugar.ceremonia h3{color:var(--verde-osc)}
.lg-sitio{font-size:.8rem;line-height:1.7}
.lg-hora{font-size:1.05rem;opacity:.9}
.btn-mapa{margin-top:.8rem;font-family:var(--serif);font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;padding:.7rem 1.6rem;cursor:pointer;
  border-radius:2px;transition:transform .2s var(--curva)}
.btn-mapa:hover{transform:translateY(-2px)}
.lugar.ceremonia .btn-mapa{background:var(--verde-osc);color:var(--papel);border:0}
.lugar.recepcion .btn-mapa{background:rgba(255,255,255,.92);color:#9a7154;border:0}

/* ── Slide 3 · vestimenta ──────────────────────────────────────────────── */
.dress{display:flex;flex-direction:column;align-items:center;gap:1.2rem}
.dress-img{width:min(150px,38%);display:block}
.muestras{display:flex;align-items:center;justify-content:center;gap:.5rem;
          margin-top:1.1rem;flex-wrap:wrap}
.muestras span{width:26px;height:26px;border-radius:50%;border:1px solid rgba(95,102,80,.4)}
.muestras em{font-family:var(--serif);font-size:.66rem;letter-spacing:.16em;
             text-transform:uppercase;font-style:normal;opacity:.8;margin-left:.4rem}
.nota-adultos{margin-top:1.6rem;opacity:.8}

/* ── Slide 4 · regalos ─────────────────────────────────────────────────── */
.mesa-marca{position:absolute;left:50%;top:6%;width:min(380px,86%);
            transform:translateX(-50%);opacity:.13;z-index:1;pointer-events:none}
.cuentas{display:grid;gap:1rem;margin-top:1.6rem}
.tarjeta-c{background:var(--papel);border:1px solid var(--beige);border-radius:4px;
           padding:1.4rem 1.2rem;text-align:left}
.tarjeta-c h4{font-family:var(--script);font-size:1.5rem;font-weight:400;
  color:var(--verde-osc);text-align:center;line-height:1.2}
.tarjeta-c .banco{font-family:var(--serif);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta);opacity:.6;text-align:center;
  margin-bottom:.9rem;padding-bottom:.6rem;border-bottom:1px solid var(--beige)}
.dato{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
      padding:.4rem 0;font-size:.82rem}
.dato .et{font-family:var(--serif);font-size:.64rem;letter-spacing:.14em;
          text-transform:uppercase;color:var(--tinta);opacity:.7}
.dato .vl{font-variant-numeric:tabular-nums;font-size:.78rem;word-break:break-all}
.copiar{background:none;border:1px solid var(--beige);border-radius:2px;color:var(--tinta);
  font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .6rem;
  cursor:pointer;transition:.2s;font-family:var(--serif);opacity:.8}
.copiar:hover{background:var(--cobre);color:#fff;border-color:var(--cobre);opacity:1}
.logo-yape{height:15px;vertical-align:-3px;margin-right:.3rem}

/* ── Slide 5 · check-in ────────────────────────────────────────────────── */
.checkin{max-width:400px;margin:1.4rem auto 0;text-align:left}
.ck-tarjeta{background:var(--papel);color:var(--tinta);border-radius:6px;
  padding:1.5rem 1.3rem;box-shadow:0 16px 40px rgba(46,50,38,.28)}
.ck-titulo{font-family:var(--serif);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--verde-osc);text-align:center;
  padding-bottom:.9rem;margin-bottom:1.1rem;border-bottom:1px dashed var(--beige)}

/* una persona: campo prellenado y editable */
.ck-campo{position:relative;margin-bottom:1.1rem}
.ck-campo label{display:block;font-family:var(--serif);font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;opacity:.65;margin-bottom:.4rem}
.ck-campo input{width:100%;font-family:var(--sans);font-weight:400;font-size:16px;
  padding:.85rem 2.6rem .85rem .9rem;border:1px solid var(--beige);border-radius:3px;
  background:var(--crema);color:var(--tinta)}
.ck-campo input:focus{outline:none;border-color:var(--verde)}
.ck-borrar{position:absolute;right:.5rem;bottom:.5rem;width:30px;height:30px;
  border:0;border-radius:50%;background:var(--beige);color:var(--tinta);
  cursor:pointer;font-size:.8rem}
.ck-borrar:hover{background:var(--cobre);color:#fff}

/* varias personas: toggle por pasajero, como el check-in del avión */
.ck-persona{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.8rem .2rem;border-bottom:1px solid var(--crema)}
.ck-persona:last-of-type{border-bottom:0}
.ck-nombre{font-size:.92rem;font-weight:400}
.ck-sub{display:block;font-size:.68rem;opacity:.55;letter-spacing:.04em}
.toggle{position:relative;width:46px;height:26px;flex:none;cursor:pointer}
.toggle input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;margin:0}
.toggle i{position:absolute;inset:0;border-radius:999px;background:var(--beige);
  transition:background .25s}
.toggle i::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;
  border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);
  transition:transform .25s var(--curva)}
.toggle input:checked + i{background:var(--verde)}
.toggle input:checked + i::after{transform:translateX(20px)}
.toggle input:focus-visible + i{outline:2px solid var(--cobre);outline-offset:2px}

.ck-btn{width:100%;margin-top:1.2rem;font-family:var(--serif);font-size:.78rem;
  letter-spacing:.18em;text-transform:uppercase;background:var(--verde-osc);
  color:var(--papel);border:0;border-radius:3px;padding:1.05rem;cursor:pointer;
  transition:transform .2s var(--curva),opacity .2s}
.ck-btn:hover{transform:translateY(-2px)}
.ck-btn[disabled]{opacity:.5;cursor:wait;transform:none}
.ck-btn.negativo{background:none;color:var(--tinta);border:1px solid var(--beige);
  margin-top:.6rem;opacity:.85}
.ck-btn.negativo:hover{opacity:1}

/* resultado dentro del mismo slide */
.ck-listo{text-align:center;padding:1rem 0 .4rem}
.ck-check{width:64px;height:64px;border-radius:50%;border:1px solid var(--cobre);
  color:var(--cobre);display:grid;place-items:center;font-size:1.7rem;margin:0 auto 1rem;
  animation:sube .8s var(--curva) both}
@keyframes sube{from{opacity:0;transform:translateY(16px) scale(.85)}}
.ck-listo h3{font-family:var(--script);font-size:1.9rem;font-weight:400;color:var(--verde-osc)}
.ck-listo p{font-family:var(--serif);font-style:italic;font-size:.95rem;margin-top:.4rem}
.ck-editar{margin-top:1rem;background:none;border:0;border-bottom:1px solid var(--beige);
  font-family:var(--serif);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinta);opacity:.7;cursor:pointer;padding-bottom:2px}

.error{background:#fdecea;color:#8c3225;border:1px solid #eec9c3;border-radius:3px;
       padding:.85rem;font-size:.82rem;margin:1rem auto 0;max-width:400px}
.limite{font-size:.68rem;opacity:.85;margin-top:1.1rem}

/* Botón-ícono de regreso, dentro de su slide (solo se ve en ese slide) */
.btn-volver{position:absolute;top:calc(18px + env(safe-area-inset-top));left:18px;z-index:5;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  background:rgba(253,252,248,.85);color:var(--verde-osc);
  border:1px solid rgba(95,102,80,.25);backdrop-filter:blur(4px);
  box-shadow:0 4px 16px rgba(46,50,38,.22);display:grid;place-items:center;
  transition:transform .25s var(--curva);-webkit-tap-highlight-color:transparent}
.btn-volver:hover{transform:scale(1.1)}
.btn-volver:active{transform:scale(.95)}
.btn-volver:focus-visible{outline:2px solid var(--cobre);outline-offset:3px}
.btn-volver svg{width:20px;height:20px}
.btn-volver.clara{background:rgba(253,252,248,.16);color:var(--papel);
  border-color:rgba(253,252,248,.4)}

/* ══ NAVEGACIÓN DEL CARRUSEL ═══════════════════════════════════════════ */
.nav{position:absolute;top:50%;transform:translateY(-50%);z-index:20;
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(95,102,80,.25);
  background:rgba(253,252,248,.82);color:var(--verde-osc);font-size:1.5rem;
  cursor:pointer;backdrop-filter:blur(4px);transition:opacity .3s,transform .2s;
  display:grid;place-items:center;padding-bottom:3px}
.nav:hover{transform:translateY(-50%) scale(1.08)}
.nav.ant{left:14px}
.nav.sig{right:14px}
.nav[disabled]{opacity:0;pointer-events:none}
@media(hover:none){.nav{display:none}}    /* en táctil se navega deslizando */

/* Indicadores-minimapa (líneas tipo Bootstrap, pero arrastrables) */
.indicadores{position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(18px + env(safe-area-inset-bottom));z-index:20;
  display:flex;align-items:center;gap:7px;
  padding:14px 18px;border-radius:999px;      /* zona generosa para el dedo */
  background:rgba(46,50,38,.28);backdrop-filter:blur(6px);
  touch-action:none;cursor:pointer;user-select:none}
.ind{width:26px;height:3px;border-radius:2px;background:rgba(253,252,248,.45);
  transition:background .25s,width .25s;pointer-events:none}
.ind.activa{width:40px;background:var(--papel)}
.indicadores.arrastrando{background:rgba(46,50,38,.45)}
.indicadores.arrastrando .ind.activa{background:var(--cobre-cla)}

/* ══ MODAL DE MAPA ═════════════════════════════════════════════════════ */
.modal-mapa{position:fixed;inset:0;z-index:70;background:var(--crema);
  display:flex;flex-direction:column;animation:aparecer .3s ease}
@keyframes aparecer{from{opacity:0}}
.modal-mapa header{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.9rem 1.2rem calc(.9rem);background:var(--verde-osc);color:var(--papel)}
.mm-titulo{font-size:1.7rem;line-height:1.1}
.mm-dir{font-family:var(--serif);font-size:.8rem;opacity:.85;letter-spacing:.06em}
.mm-regresar{flex:none;font-family:var(--serif);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;background:rgba(253,252,248,.14);color:var(--papel);
  border:1px solid rgba(253,252,248,.4);border-radius:999px;padding:.6rem 1.2rem;
  cursor:pointer;transition:.2s}
.mm-regresar:hover{background:rgba(253,252,248,.28)}
.modal-mapa iframe{flex:1;width:100%;border:0;background:var(--beige)}

/* ══ DOCK DE MÚSICA ════════════════════════════════════════════════════ */
.dock{position:fixed;right:24px;bottom:calc(24px + env(safe-area-inset-bottom));z-index:30}
#btnMusica{position:relative;width:48px;height:48px;border-radius:50%;cursor:pointer;
  background:rgba(253,252,248,.9);color:var(--verde-osc);
  border:1px solid rgba(95,102,80,.25);backdrop-filter:blur(4px);
  box-shadow:0 4px 20px rgba(95,102,80,.18);display:grid;place-items:center;
  transition:transform .3s var(--curva),box-shadow .3s;
  -webkit-tap-highlight-color:transparent}
#btnMusica:hover{transform:scale(1.1)}
#btnMusica:active{transform:scale(.96)}
#btnMusica:focus-visible{outline:2px solid var(--cobre);outline-offset:3px}
#btnMusica>svg{width:20px;height:20px}
#btnMusica .ico-pausa{display:none}
#btnMusica.sonando .ico-pausa{display:block}
#btnMusica.sonando .ico-play{display:none}
.badge{position:absolute;top:-2px;right:-2px;width:20px;height:20px;border-radius:50%;
  background:var(--cobre);display:none;place-items:center;pointer-events:none;
  animation:pulsoBadge 2s ease-in-out infinite}
#btnMusica.sonando .badge{display:grid}
.badge svg{width:10px;height:10px;color:#fff}
@keyframes pulsoBadge{50%{opacity:.55}}

/* ══ CELULAR ═══════════════════════════════════════════════════════════ */
@media(max-width:640px){
  .esq-si,.esq-sd{width:84px;top:16px}
  .esq-si{left:16px}.esq-sd{right:16px}
  .esq-ii,.esq-id{width:100px;height:110px;bottom:16px}
  .esq-ii{left:16px}.esq-id{right:16px}
  .sp-titulo{font-size:42px}
  .sp-nombres{font-size:19px}
  .sp-invitado .script{font-size:26px}
  .sp-clic{font-size:18px}
  .divisor .linea{width:56px}
  .sobre{height:clamp(180px,29vh,300px)}

  /* Save the Date: todo un punto más grande y arrancando más arriba */
  .sl-fecha .sl-cont{transform:translateY(-2.5vh)}
  .sl-fecha .titulo-sl{font-size:2.9rem}
  .sl-fecha .fecha-dia{font-size:1.02rem}
  .sl-fecha .cuenta-digital{padding:1.25rem 1rem 1.05rem;gap:.45rem}
  .sl-fecha .cuenta-digital b{font-size:1.72rem}
  .sl-fecha .cuenta-digital span{font-size:.6rem}
  .sl-fecha .cuenta-digital i{font-size:1.7rem}
  .sl-fecha .calendario{width:min(360px,96%)}
  .sl-fecha .btn-fino{font-size:.82rem;padding:.95rem 1.9rem}
}

/* Con el dock encima de los indicadores en móvil chico, súbelo un pelo */
@media(max-width:480px){
  .dock{bottom:calc(74px + env(safe-area-inset-bottom))}
}

/* ══ AVISO FLOTANTE ════════════════════════════════════════════════════ */
/* visibility + opacity: oculto DE VERDAD (solo desplazado, asomaba por
   detrás de los indicadores como una pastilla verde vacía) */
.aviso{position:fixed;left:50%;bottom:5.4rem;transform:translate(-50%,220%);z-index:80;
  opacity:0;visibility:hidden;
  background:var(--verde-osc);color:var(--papel);padding:.7rem 1.3rem;border-radius:3px;
  font-family:var(--serif);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  transition:transform .4s var(--curva),opacity .3s,visibility 0s .4s}
.aviso.visible{transform:translate(-50%,0);opacity:1;visibility:visible;
  transition:transform .4s var(--curva),opacity .3s,visibility 0s}

/* ══ ESCRITORIO ════════════════════════════════════════════════════════ */
@media(min-width:768px){
  .sl-cont{max-width:860px}
  .lugares{grid-template-columns:1fr 1fr;gap:1.4rem;max-width:720px;margin-inline:auto}
  .cuentas{grid-template-columns:1fr 1fr;gap:1.3rem;max-width:720px;margin-inline:auto}
  .dress{flex-direction:row;text-align:left;gap:3rem;justify-content:center}
  .dress .frase{margin:0}
  .dress .muestras{justify-content:flex-start}
  .dress>div{text-align:left}
  .dress .titulo-sl{text-align:left}
  .cuenta-digital{gap:.6rem;padding:1.3rem 1.6rem 1.1rem}
  .checkin{max-width:440px}
}

/* ══ MOVIMIENTO REDUCIDO ═══════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .sobre,.sp-clic,.badge,.pista-hint{animation:none}
  #splash{transition-duration:.2s}
  #petalos{display:none}
  .pista-slides{transition-duration:.05s}
  #btnMusica{transition:none}
  #btnMusica:hover{transform:none}
}