:root {
  --bg:#fffaf6; --ink:#5b4037; --muted:#8c7065;
  --sobre:#e8e2d0; --sobre-2:#e0d8c0; --sobre-3:#efe9d7; --solapa:#f2e9d6;
  --carta:#ffffff; --linea:rgba(125,100,60,.2);
  --canva:#fff1ea; /* color de fondo del diseño de Canva (para que las orillas se fundan) */
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scrollbar-width:none; -ms-overflow-style:none; scroll-behavior:auto; background:var(--bg); }
html::-webkit-scrollbar { display:none; }
/* el documento nunca hace scroll: todo es fijo y la invitación se desplaza dentro del visor */
html, body { height:100%; overflow:hidden; overscroll-behavior:none; }
body { background:var(--bg); color:var(--ink); font-family:"Cormorant Garamond",Georgia,serif;
       -webkit-tap-highlight-color:transparent; }
body.cargando { overflow:hidden; }
.script { font-family:"Great Vibes",cursive; font-weight:400; }

/* ----- Splash con anillos ----- */
.splash { position:fixed; inset:0; z-index:100; background:var(--bg); display:flex; flex-direction:column;
          align-items:center; justify-content:center; gap:14px;
          transition:opacity .8s ease, visibility .8s; }
.splash.fuera { opacity:0; visibility:hidden; pointer-events:none; }
.anillos { width:min(64vw,270px); height:auto; overflow:visible; animation:flota 3.4s ease-in-out 1.8s infinite; }
.anillos .aro { fill:none; stroke:url(#oro); stroke-width:6; stroke-linecap:round;
                stroke-dasharray:214; stroke-dashoffset:214;
                animation:trazo 1.4s cubic-bezier(.5,0,.2,1) .15s forwards; }
.g-izq { animation:entraIzq 1.9s cubic-bezier(.3,.1,.2,1) .15s both; }
.g-der { animation:entraDer 1.9s cubic-bezier(.3,.1,.2,1) .15s both; }
.anillos .gema { fill:url(#gema); stroke:#b98a45; stroke-width:.9; stroke-linejoin:round; opacity:0;
                 transform-box:fill-box; transform-origin:center;
                 animation:gema .6s ease 1.5s forwards, brillo 2.4s ease-in-out 2.1s infinite; }
.splash .nombres { font-size:clamp(2rem,9vw,2.8rem); opacity:0; animation:aparece 1s ease .9s forwards; }
@keyframes trazo { to { stroke-dashoffset:0; } }
@keyframes entraIzq { from { transform:translateX(-36px); } to { transform:translateX(0); } }
@keyframes entraDer { from { transform:translateX(36px); } to { transform:translateX(0); } }
@keyframes gema { from { opacity:0; transform:scale(.3); } to { opacity:1; transform:scale(1); } }
@keyframes brillo { 0%,100% { transform:scale(1); filter:none; } 50% { transform:scale(1.18); filter:drop-shadow(0 0 3px #fff); } }
@keyframes aparece { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes flota { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }

/* ----- Escena del sobre (fija; la anima render() en app.js) ----- */
.escena { position:fixed; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center;
          justify-content:center; gap:clamp(10px,2.4vh,26px); padding:clamp(14px,3.5vh,32px) 16px;
          text-align:center; overflow:hidden;
          /* fondo: luz crema arriba que baja a rosa pálido (como el diseño de Canva) + grano de papel */
          background:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .25 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.1'/%3E%3C/svg%3E"),
            radial-gradient(120% 60% at 50% 0%, #fffefd 0%, rgba(255,254,253,0) 70%),
            linear-gradient(180deg, #fffaf6 0%, #fff5ef 50%, #ffede4 100%); }
body:not(.abierto) .escena { cursor:pointer; }
.encabezado { display:flex; flex-direction:column; align-items:center; gap:clamp(6px,1.2vh,12px); }
.novios { font-size:clamp(2.3rem,10vw,3.6rem); line-height:1; }
/* fecha y lugar (opcionales, se llenan en invitados.json) */
.fecha-lugar { display:flex; flex-direction:column; align-items:center; gap:.35em;
               font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
               font-size:clamp(.78rem,3.1vw,.98rem); }
/* filete dorado entre la fecha y el lugar */
.fecha-lugar span + span::before { content:""; display:block; width:28px; height:1px; margin:0 auto .5em;
                                   background:linear-gradient(90deg,transparent,#c9a35a,transparent); }

/* ----- Página de inicio (/) y de enlace no encontrado (404): nombres grandes + mensaje ----- */
.neutra { gap:clamp(14px,3vh,28px); padding:24px 22px; animation:entraNeutra 1.2s ease .15s both; }
.neutra .novios { font-size:clamp(3.4rem,17vw,5.6rem); line-height:1.05; }
.neutra.no-encontrada .novios { font-size:clamp(2.8rem,13vw,4.4rem); }
.neutra .filete { width:64px; height:1px; background:linear-gradient(90deg,transparent,#c9a35a,transparent); }
.mensaje { max-width:30ch; font-weight:500; font-size:clamp(1.45rem,6vw,2rem); line-height:1.4; color:var(--ink); }
.mensaje p + p { margin-top:.7em; }
.mensaje .aparte { font-style:italic; font-size:.84em; color:var(--muted); }
.mensaje .titulo { font-weight:600; font-size:1.12em; }
@keyframes entraNeutra { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

.sobre-wrap { perspective:1100px; will-change:transform; animation:bob 5.5s ease-in-out infinite; }
/* la flotación usa la propiedad `translate`, que se suma al transform que pone render() */
@keyframes bob { 0%,100% { translate:0 0; } 50% { translate:0 -5px; } }
body.abierto .sobre-wrap { animation:none; }
.sobre { position:relative; width:min(84vw,360px,50vh); aspect-ratio:376/257; cursor:pointer; outline:none; }
.sobre:focus-visible { outline:2px solid var(--muted); outline-offset:8px; border-radius:4px; }
.sobre .fondo { position:absolute; inset:0; background:var(--sobre-2); border-radius:3px;
                box-shadow:0 18px 40px rgba(91,64,55,.16), 0 3px 8px rgba(91,64,55,.08); z-index:0; }

/* La carta lleva el pasaje bíblico */
.carta { position:absolute; left:6%; right:6%; top:5%; height:90%; z-index:2; overflow:hidden;
         background:var(--carta); border-radius:2px; box-shadow:0 2px 10px rgba(91,64,55,.12);
         container-type:size; display:grid; place-items:center; }
.carta::after { content:""; position:absolute; inset:6px; border:1px solid var(--linea); pointer-events:none; }
/* Tarjeta 2: la invitación (sin marco; la imagen es idéntica al inicio del iframe) */
.carta-inv { background:var(--canva); display:block; }
.carta-inv::after { display:none; }
.carta-inv img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.pasaje { padding:9cqh 9cqw; text-align:center; }
.pasaje p { font-style:italic; font-weight:500; font-size:clamp(.95rem,6.3cqw,1.4rem); line-height:1.4; }
.pasaje cite { display:block; margin-top:.8em; font-style:normal; font-weight:600; letter-spacing:.14em;
               text-transform:uppercase; font-size:clamp(.7rem,3.9cqw,.95rem); color:var(--muted); }

.bolsillo { position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none;
            filter:drop-shadow(0 -1px 1px rgba(91,64,55,.06)); }
.solapa { position:absolute; left:0; top:0; width:100%; height:70%; z-index:4; transform-origin:50% 0;
          pointer-events:none; filter:drop-shadow(0 3px 3px rgba(91,64,55,.13)); }
.sobre.atras .solapa { z-index:1; }
.sobre.atras .solapa .cara { fill:#e2dac3; }

.sello { position:absolute; left:50%; top:66%; width:21%; aspect-ratio:1; z-index:5;
         transform:translate(-50%,-50%); pointer-events:none; }
.sello img { display:block; width:100%; height:100%; filter:drop-shadow(0 2px 3px rgba(80,48,18,.3)); }
/* destello que cruza el sello (solo ilumina la forma del sello gracias a la máscara) */
.brillo-sello { position:absolute; inset:0; mix-blend-mode:screen;
                -webkit-mask:url(/assets/sello.png) center/contain no-repeat; mask:url(/assets/sello.png) center/contain no-repeat;
                background:linear-gradient(115deg, transparent 35%, rgba(255,244,214,.7) 50%, transparent 65%) -50% 0 / 250% 100% no-repeat;
                animation:brilloSello 4.8s ease-in-out 1.2s infinite; }
@keyframes brilloSello { 0% { background-position:-50% 0; } 28%, 100% { background-position:130% 0; } }
.ramo { position:absolute; left:-5.5%; bottom:-12%; width:35%; height:auto; z-index:6; pointer-events:none; }
.ramitas { position:absolute; left:68%; top:6%; width:52%; height:auto; z-index:6; pointer-events:none; }

/* Pétalos y destellos (canvas): sobre la escena y sobre la invitación abierta, bajo los botones (z30) */
.petalos { position:fixed; inset:0; width:100%; height:100%; z-index:25; pointer-events:none; opacity:0;
           transition:opacity 1.4s ease; }
body:not(.cargando) .petalos { opacity:1; }

/* ----- Indicador y datos del invitado ----- */
.inferior { display:flex; flex-direction:column; align-items:center; gap:clamp(8px,1.8vh,18px); }
.pista { display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer;
         margin-top:clamp(14px,3.2vh,34px); }
.pista-texto { font-style:italic; font-size:1.15rem; text-decoration:underline; text-underline-offset:4px;
               text-decoration-color:rgba(91,64,55,.4); }
.para .nombre { font-size:clamp(2.2rem,10vw,3rem); line-height:1.1; }
.para .cupos { font-style:italic; font-size:clamp(1.3rem,5.4vw,1.65rem); margin-top:4px; }
.mesa { margin-top:10px; display:inline-flex; align-items:baseline; gap:.5em; font-weight:600;
        letter-spacing:.2em; text-transform:uppercase; font-size:1.15rem; color:var(--muted); }
/* Número de mesa en una sans de cifras alineadas (Cormorant usa cifras "de texto" que parecen romanas) */
.mesa b { font-family:"Jost","Helvetica Neue",Arial,sans-serif; font-weight:500; font-size:1.9rem;
          font-variant-numeric:lining-nums; letter-spacing:0; line-height:1; color:var(--ink); }

/* ----- Invitación a pantalla completa (la mueve el script) ----- */
.visor { position:fixed; left:0; top:0; width:100%; height:100%; z-index:20; background:var(--canva);
         overflow:hidden; visibility:hidden; opacity:0; pointer-events:none;
         box-shadow:0 2px 10px rgba(91,64,55,.12); }
.visor.activo { visibility:visible; }
/* abierta: la invitación se desplaza dentro del visor (el documento no hace scroll) */
.visor.scroll { overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
body.listo .visor { pointer-events:auto; }
.hoja { position:absolute; left:0; top:0; overflow:hidden; transform-origin:0 0; will-change:transform; }
.hoja iframe { position:absolute; top:0; border:0; display:block; }
/* Capa táctil: solo en pantallas táctiles (en Chrome Android el iframe perdía el primer gesto).
   Con mouse no hace falta y así todos los botones de Canva funcionan de forma nativa. */
.escudo { position:absolute; left:0; top:0; width:100%; height:100%; z-index:2; pointer-events:none; display:none; }
.escudo-tramo { position:absolute; pointer-events:auto; }
@media (hover:none) and (pointer:coarse) { .escudo { display:block; } }

.volver { position:fixed; z-index:30; left:12px; top:calc(12px + env(safe-area-inset-top));
          display:flex; align-items:center; gap:6px; padding:9px 17px 9px 11px;
          font:inherit; font-size:1.05rem; letter-spacing:.03em; color:var(--ink);
          background:rgba(255,250,247,.88); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
          border:1px solid var(--linea); border-radius:999px; box-shadow:0 4px 14px rgba(60,40,30,.16);
          cursor:pointer; opacity:0; pointer-events:none; transform:translateY(-6px);
          transition:opacity .5s ease, transform .5s ease; }
body.listo .volver { opacity:1; pointer-events:auto; transform:none; }
.volver:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }

/* Botón de sonido (arriba a la derecha) */
.sonido { position:fixed; z-index:30; right:12px; top:calc(12px + env(safe-area-inset-top));
          width:44px; height:44px; display:grid; place-items:center; color:var(--ink);
          background:rgba(255,250,247,.88); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
          border:1px solid var(--linea); border-radius:50%; box-shadow:0 4px 14px rgba(60,40,30,.16);
          cursor:pointer; opacity:0; pointer-events:none; transform:translateY(-6px);
          transition:opacity .5s ease, transform .5s ease; }
body.listo .sonido { opacity:1; pointer-events:auto; transform:none; }
.sonido:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.sonido svg path { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.sonido svg .bocina { fill:currentColor; }
.sonido .tachado { display:none; }
.sonido.silencio .ondas { display:none; }
.sonido.silencio .tachado { display:inline; }

@media (prefers-reduced-motion: reduce) {
  .sobre-wrap, .brillo-sello { animation:none !important; }
  .petalos { display:none; }
  *, *::before, *::after { animation-duration:.01s !important; animation-delay:0s !important; transition-duration:.01s !important; }
}