/* ===== Página de la boda — estilos ===== */
:root{
  --fondo:#f7f3ec;
  --papel:#fffdf9;
  --tinta:#2f2a24;
  --suave:#776d62;
  --linea:#e6ddcf;
  --oro:#b08d57;
  --oro-osc:#8a6b3c;
  --salvia:#7d8f74;
  --salvia-cl:#e9eee4;
  --rosa:#c98b84;
  --radio:16px;
  --sombra:0 8px 28px rgba(60,45,25,.08);
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Jost', system-ui, -apple-system, Segoe UI, sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.55}
img,video{max-width:100%;display:block}
a{color:var(--oro-osc)}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.15;margin:.2em 0 .4em}
h1{font-size:clamp(2.2rem,8vw,3.4rem)}
h2{font-size:clamp(1.7rem,5.5vw,2.3rem)}
h3{font-size:1.35rem}
p{margin:.4em 0 .9em}
small,.suave{color:var(--suave)}

/* ---- Barra superior ---- */
.barra{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  padding:10px 18px;padding-top:max(10px,env(safe-area-inset-top));background:rgba(247,243,236,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.marca{font-family:var(--serif);font-size:1.6rem;text-decoration:none;color:var(--tinta);letter-spacing:.02em}
.marca span{color:var(--oro);margin:0 .12em;font-style:italic}
.btn-menu{background:none;border:0;padding:10px;cursor:pointer;display:flex;flex-direction:column;gap:5px}
.btn-menu span{width:24px;height:1.5px;background:var(--tinta);transition:.25s}
.btn-menu[aria-expanded=true] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.btn-menu[aria-expanded=true] span:nth-child(2){opacity:0}
.btn-menu[aria-expanded=true] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.menu{position:absolute;top:100%;left:0;right:0;background:var(--papel);border-bottom:1px solid var(--linea);
  display:none;flex-direction:column;padding:8px 0;box-shadow:var(--sombra)}
.menu.abierto{display:flex}
.menu a{padding:13px 24px;text-decoration:none;color:var(--tinta);font-weight:400;letter-spacing:.03em}
.menu a.activo{color:var(--oro-osc);background:var(--salvia-cl)}
@media(min-width:900px){
  .btn-menu{display:none}
  .menu{position:static;display:flex;flex-direction:row;background:none;border:0;box-shadow:none;padding:0;gap:2px}
  .menu a{padding:8px 11px;font-size:.92rem;border-radius:20px}
}

/* ---- Contenido ---- */
.contenido{max-width:860px;margin:0 auto;padding:22px 18px 40px}
.tarjeta{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:22px;box-shadow:var(--sombra);margin-bottom:18px}
.centro{text-align:center}
.ornamento{color:var(--oro);font-size:1.1rem;letter-spacing:.6em;text-align:center}
.titulo-pag{text-align:center;margin:10px 0 22px}
.titulo-pag p{color:var(--suave);max-width:520px;margin:0 auto}
.sobretitulo{text-transform:uppercase;letter-spacing:.28em;font-size:.72rem;color:var(--oro-osc);font-weight:500}

/* ---- Portada ---- */
.portada{text-align:center;padding:34px 10px 20px}
.portada h1{margin:.15em 0}
.portada h1 em{color:var(--oro);font-style:italic;font-size:.75em;display:block;margin:.05em 0}
.portada .fecha{font-size:1.05rem;letter-spacing:.18em;text-transform:uppercase;color:var(--suave)}
.cuenta{display:flex;justify-content:center;gap:10px;margin:26px 0 8px}
.cuenta div{background:var(--papel);border:1px solid var(--linea);border-radius:14px;min-width:70px;padding:12px 6px}
.cuenta b{display:block;font-family:var(--serif);font-size:2.1rem;font-weight:500;line-height:1}
.cuenta span{font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--suave)}
.rejilla{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(min-width:700px){.rejilla{grid-template-columns:repeat(3,1fr)}}
.acceso{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:20px 10px;
  text-decoration:none;color:var(--tinta);transition:.2s;min-height:118px}
.acceso:active,.acceso:hover{border-color:var(--oro);transform:translateY(-2px)}
.acceso .ico{font-size:1.7rem}
.acceso b{font-weight:500}
.acceso small{font-size:.78rem}
.acceso.destacado{background:var(--tinta);color:#fff;border-color:var(--tinta);grid-column:1/-1}
.acceso.destacado small{color:#d9cdb8}

/* ---- Formularios ---- */
label{display:block;font-weight:400;margin:14px 0 6px;font-size:.95rem}
input[type=text],input[type=tel],input[type=number],input[type=password],select,textarea{
  width:100%;font:inherit;font-weight:400;padding:13px 14px;border:1px solid var(--linea);border-radius:12px;
  background:#fff;color:var(--tinta);-webkit-appearance:none;appearance:none}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--oro);outline-offset:1px;border-color:var(--oro)}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opciones{display:flex;gap:10px;flex-wrap:wrap}
.opciones label{flex:1;margin:0;cursor:pointer}
.opciones input{position:absolute;opacity:0}
.opciones span{display:block;text-align:center;padding:13px;border:1px solid var(--linea);border-radius:12px;background:#fff}
.opciones input:checked+span{border-color:var(--oro);background:#f6efe3;font-weight:500}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:500;letter-spacing:.04em;
  padding:14px 26px;border-radius:40px;border:1px solid var(--tinta);background:var(--tinta);color:#fff;cursor:pointer;
  text-decoration:none;transition:.2s}
.btn:active{transform:scale(.98)}
.btn.sec{background:transparent;color:var(--tinta)}
.btn.oro{background:var(--oro);border-color:var(--oro)}
.btn.chico{padding:8px 16px;font-size:.88rem}
.btn.bloque{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}
.alerta{padding:13px 16px;border-radius:12px;margin:12px 0;background:var(--salvia-cl);border:1px solid #cfd9c7}
.alerta.error{background:#f8e6e3;border-color:#ebc6c0}

/* ---- Subida ---- */
.zona-subida{border:2px dashed var(--oro);border-radius:var(--radio);padding:34px 16px;text-align:center;background:#fffaf2;cursor:pointer}
.zona-subida .ico{font-size:2.6rem}
.cola{list-style:none;padding:0;margin:16px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.cola li{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--linea)}
.cola img,.cola video{width:100%;height:100%;object-fit:cover}
.cola .barra-p{position:absolute;left:0;bottom:0;height:5px;background:var(--oro);width:0;transition:width .2s}
.cola .estado{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.6rem;background:rgba(0,0,0,.25);color:#fff}
.cola .estado.ok{background:rgba(125,143,116,.55)}
.cola .estado.err{background:rgba(180,60,50,.6);font-size:.8rem;padding:4px;text-align:center}

/* ---- Galería ---- */
.filtros{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:14px;-webkit-overflow-scrolling:touch}
.filtros button{white-space:nowrap;font:inherit;font-size:.88rem;padding:8px 15px;border-radius:30px;border:1px solid var(--linea);background:var(--papel);cursor:pointer}
.filtros button.activo{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.galeria{columns:2;column-gap:8px}
@media(min-width:700px){.galeria{columns:3}}
.galeria figure{margin:0 0 8px;break-inside:avoid;position:relative;border-radius:10px;overflow:hidden;background:var(--linea);cursor:zoom-in}
.galeria img{width:100%;height:auto}
.galeria .play{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center;color:#fff;font-size:2.4rem;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.galeria figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 8px 6px;font-size:.75rem;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.55));display:flex;justify-content:space-between;align-items:end}
.corazon{background:none;border:0;color:#fff;font-size:.85rem;cursor:pointer;padding:2px 4px}
.corazon.si{color:#ffb3ad}
.visor{position:fixed;inset:0;background:rgba(20,16,12,.96);z-index:90;display:none;flex-direction:column;align-items:center;justify-content:center}
.visor.abierto{display:flex}
.visor img,.visor video{max-width:96vw;max-height:78vh;object-fit:contain;border-radius:6px}
.visor .info{color:#eee;margin-top:12px;text-align:center;font-size:.92rem}
.visor .cerrar{position:absolute;top:max(12px,env(safe-area-inset-top));right:14px;font-size:2rem;color:#fff;background:none;border:0;cursor:pointer}
.visor .nav{position:absolute;top:50%;transform:translateY(-50%);font-size:2.4rem;color:#fff;background:none;border:0;padding:20px;cursor:pointer}
.visor .ant{left:0}.visor .sig{right:0}
.vacio{text-align:center;color:var(--suave);padding:40px 10px}

/* ---- Retos ---- */
.retos{list-style:none;padding:0;margin:0;counter-reset:r}
.retos li{display:flex;align-items:center;gap:14px;padding:14px 4px;border-bottom:1px solid var(--linea)}
.retos li::before{counter-increment:r;content:counter(r);flex:0 0 34px;height:34px;border-radius:50%;border:1px solid var(--oro);
  color:var(--oro-osc);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.15rem}
.retos li.hecho::before{content:'✓';background:var(--salvia);border-color:var(--salvia);color:#fff}
.retos li div{flex:1}
.retos li a{font-size:.85rem;white-space:nowrap}
.tabla-mesas{width:100%;border-collapse:collapse}
.tabla-mesas td{padding:8px 4px;border-bottom:1px solid var(--linea)}
.tabla-mesas td:last-child{text-align:right;font-weight:500}

/* ---- Bingo ---- */
.carton{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:14px 0;user-select:none;-webkit-user-select:none}
.casilla{aspect-ratio:1;border:1px solid var(--linea);background:#fff;border-radius:8px;padding:3px;display:flex;align-items:center;
  justify-content:center;text-align:center;font-size:clamp(.54rem,2.25vw,.82rem);line-height:1.15;cursor:pointer;
  position:relative;font-weight:400;overflow:hidden;hyphens:auto;-webkit-hyphens:auto;word-break:break-word}
.casilla.marcada{background:var(--salvia-cl);border-color:var(--salvia)}
.casilla.marcada::after{content:'';position:absolute;width:78%;height:78%;border-radius:50%;border:3px solid var(--rosa);opacity:.75}
.casilla.libre{background:var(--tinta);color:#fff;font-family:var(--serif);font-size:clamp(.75rem,3vw,1rem);cursor:default}
.casilla.libre::after{display:none}
.casilla.linea{background:#f3e6cf;border-color:var(--oro)}
.bingo-letras{display:grid;grid-template-columns:repeat(5,1fr);text-align:center;font-family:var(--serif);font-size:1.8rem;color:var(--oro)}
.celebra{position:fixed;inset:0;z-index:95;display:none;align-items:center;justify-content:center;background:rgba(47,42,36,.85);color:#fff;text-align:center;padding:20px}
.celebra.abierto{display:flex}
.celebra h2{font-size:3.4rem;color:#f3d9a8}

/* ---- Mensajes ---- */
.lista-msg{display:grid;gap:12px}
.msg{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:16px 18px}
.msg p{font-family:var(--serif);font-size:1.25rem;line-height:1.35;margin:.2em 0 .5em}
.msg small{display:block}
.grabadora{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}
.grabadora .punto{width:12px;height:12px;border-radius:50%;background:#c0392b;animation:lat 1s infinite}
@keyframes lat{50%{opacity:.2}}

/* ---- Info ---- */
.evento{display:flex;gap:16px;align-items:flex-start}
.evento .hora{font-family:var(--serif);font-size:1.5rem;color:var(--oro-osc);min-width:94px}

/* ---- Pie / toast ---- */
.pie{text-align:center;padding:26px 16px 40px;color:var(--suave);font-size:.88rem}
.pie p{margin:.2em}
.hashtag{color:var(--oro-osc);font-weight:500}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,40px);background:var(--tinta);color:#fff;padding:12px 20px;
  border-radius:30px;opacity:0;transition:.3s;z-index:99;font-size:.92rem;max-width:90vw;text-align:center;pointer-events:none}
.toast.ver{opacity:1;transform:translate(-50%,0)}

/* ---- Modal nombre ---- */
.modal{position:fixed;inset:0;z-index:80;background:rgba(47,42,36,.55);display:none;align-items:flex-end;justify-content:center}
.modal.abierto{display:flex}
.modal .caja{background:var(--papel);width:100%;max-width:480px;border-radius:22px 22px 0 0;padding:26px 22px calc(26px + env(safe-area-inset-bottom))}
@media(min-width:600px){.modal{align-items:center}.modal .caja{border-radius:22px}}

/* ---- Canciones (buscador Spotify) ---- */
.buscador{position:relative}
.buscador input{padding-right:44px}
.buscador .lupa{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none}
input[type=search]{width:100%;font:inherit;font-weight:400;padding:13px 14px;border:1px solid var(--linea);border-radius:12px;background:#fff;color:var(--tinta);-webkit-appearance:none;appearance:none}
.resultados,.lista-canciones{list-style:none;padding:0;margin:8px 0 0}
.resultados li,.lista-canciones li{display:flex;align-items:center;gap:12px;padding:9px 6px;border-bottom:1px solid var(--linea);line-height:1.3}
.resultados li[data-i]{cursor:pointer;border-radius:10px}
.resultados li[data-i]:active,.resultados li[data-i]:hover{background:#f6efe3}
.resultados img,.lista-canciones img,.sin-portada{width:48px;height:48px;border-radius:6px;object-fit:cover;flex:0 0 48px}
.sin-portada{display:flex;align-items:center;justify-content:center;background:var(--salvia-cl);color:var(--salvia);font-size:1.3rem}
.resultados li div,.lista-canciones li div{flex:1;min-width:0;font-size:.95rem}
.resultados b,.lista-canciones b{font-weight:500}
.vacio-r{color:var(--suave);font-size:.92rem;justify-content:center;text-align:center}
.elegida{display:flex;align-items:center;gap:14px;margin-top:16px;padding:12px;border:1px solid var(--oro);border-radius:14px;background:#fffaf2}
.elegida img{width:64px;height:64px;border-radius:8px;object-fit:cover}
.elegida div{flex:1;min-width:0}
.veces{background:var(--oro);color:#fff;border-radius:20px;padding:2px 9px;font-size:.8rem;font-weight:500}
.abrir-sp{width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:#1db954;color:#fff;text-decoration:none;display:flex;align-items:center;justify-content:center;font-size:.8rem}

/* ---- Invitados ---- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.chip{font:inherit;font-weight:400;padding:11px 16px;border-radius:30px;border:1px solid var(--oro);background:#fffaf2;cursor:pointer;color:var(--tinta)}
.chip:active,.chip:hover{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.saludo-fam{text-align:center;background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:14px;margin:6px 0 18px}
.persona{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--linea)}
.persona .quien{flex:1 1 160px;font-weight:400}
.persona .quien input{margin-top:4px}
.sino{display:flex;gap:6px}
.sino label{margin:0;cursor:pointer}
.sino input{position:absolute;opacity:0}
.sino span{display:block;padding:9px 16px;border:1px solid var(--linea);border-radius:30px;background:#fff;font-size:.92rem}
.sino input:checked+span.si{background:var(--salvia);border-color:var(--salvia);color:#fff}
.sino input:checked+span.no{background:#b9a99a;border-color:#b9a99a;color:#fff}
button.abrir-sp{border:0;cursor:pointer;font:inherit;font-size:.8rem}
.abrir-sp.on{background:var(--tinta)}
.sp-fila{display:block!important;padding:4px 0 10px!important;border-bottom:1px solid var(--linea)}
.sp-embed{width:100%;border:0;border-radius:12px;display:block}