/* Piel "Agua Viva" (bautizo): blanco perla, azul cielo y plata (sale de "Pan de Vida", con los colores pasados a plata). Va después de secciones.css y paleta.css.
   Curvas: --ease-out para lo que entra, --ease-in-out para lo que se mueve en pantalla (puertas, sobre). */
*,*::before,*::after{box-sizing:border-box}
:root{--ease-out:cubic-bezier(0.23,1,0.32,1);--ease-in-out:cubic-bezier(0.77,0,0.175,1);--suave:var(--ease-out);--abre:var(--ease-in-out);
  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .55 0 0 0 0 .42 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
  --adorno:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='24' viewBox='0 0 140 24'%3E%3Cg fill='none' stroke='%23677986' stroke-width='1'%3E%3Cpath d='M4 12h50M86 12h50'/%3E%3Cpath d='M70 3v18M64 9h12'/%3E%3Ccircle cx='58' cy='12' r='1.6' fill='%23677986'/%3E%3Ccircle cx='82' cy='12' r='1.6' fill='%23677986'/%3E%3C/g%3E%3C/svg%3E")}

html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--lino);color:var(--tinta);font-family:var(--f-serif);font-size:19px;line-height:1.55;-webkit-font-smoothing:antialiased}
body.cerrado,body.en-pelicula{overflow:hidden;height:100dvh}
img{max-width:100%}
.mesa{position:fixed;inset:0;z-index:0;background:radial-gradient(ellipse 90% 70% at 50% 25%,#FAFCFD,var(--lino) 72%)}
.mesa::after{content:"";position:absolute;inset:0;background-image:var(--grano);opacity:.6}

/* ---------- Apertura: puertas de capilla ---------- */
.escena-puertas{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3.2dvh;
  padding:max(20px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom));transition:opacity .9s var(--ease-out),visibility .9s}
.abierto .escena-puertas,.en-pelicula .escena-puertas{opacity:0;visibility:hidden;pointer-events:none}
.puertas-textos{text-align:center;order:-1;display:contents}
.pt-arriba{order:-2;margin:0;font-family:var(--f-sans);font-size:14px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--tinta-media);padding-left:.34em}
.pt-para{order:-1;margin:-1.4dvh 0 0;font-family:var(--f-firma);font-size:clamp(30px,8.4vw,40px);line-height:1.2;color:var(--tinta);text-align:center;max-width:90vw}
.pista{margin:0;font-family:var(--f-sans);font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-suave);animation:respira 2.8s ease-in-out infinite}
.abriendo .pista{opacity:0;animation:none;transition:opacity .3s}
@keyframes respira{50%{opacity:.45}}



/* ---------- La entrada ---------- */
.pelicula{position:fixed;inset:0;z-index:25;background:var(--lino);overflow:hidden;transition:opacity .9s var(--ease-out);touch-action:manipulation}
.pelicula.sale{opacity:0;pointer-events:none}
.pl-escena{position:absolute;top:0;bottom:0;left:50%;width:min(100%,520px);translate:-50% 0;opacity:0;transition:opacity .9s var(--ease-out);overflow:hidden}
.pl-escena.activa{opacity:1}
.pl-escena > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pl-capilla img{object-position:50% 45%;transform:scale(1)}
.pl-capilla.activa img{animation:acerca 5s var(--ease-out) both}
.pl-custodia img{object-position:50% 30%}
.pl-custodia.activa img{animation:acerca 5.5s var(--ease-out) both}
.pl-nino img{object-position:50% 22%}
.pl-nino.activa img{animation:acerca 5.5s var(--ease-out) both}
@keyframes acerca{from{transform:scale(1)}to{transform:scale(1.1)}}
.pl-sub{position:absolute;left:0;right:0;bottom:0;padding:22vh 26px calc(12vh + env(safe-area-inset-bottom));text-align:center;
  background:linear-gradient(to top,rgba(var(--marfil-rgb),.96) 30%,rgba(var(--marfil-rgb),0))}
.pl-sub p{margin:0;font-family:var(--f-titulo);font-style:italic;font-weight:500;font-size:clamp(26px,7.4vw,34px);line-height:1.25;color:var(--tinta)}
.pl-sub small{display:block;margin-top:12px;font-family:var(--f-sans);font-size:14px;letter-spacing:.3em;text-transform:uppercase;color:var(--tinta-media)}
.pl-sub small:empty{display:none}
.activa .pl-sub p,.activa .pl-sub small{animation:aparecer 1s var(--ease-out) .4s both}
.activa .pl-sub small{animation-delay:.8s}
@keyframes aparecer{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Rayos de luz: giran muy lento alrededor de la hostia */
.rayos{position:absolute;left:50%;top:var(--ry,31%);width:170%;aspect-ratio:1;translate:-50% -50%;pointer-events:none;mix-blend-mode:soft-light;opacity:.9;
  background:repeating-conic-gradient(from 0deg,rgba(235,240,244,.9) 0deg 3deg,rgba(235,240,244,0) 3deg 12deg);
  -webkit-mask:radial-gradient(circle,#000000 4%,rgba(0,0,0,.6) 18%,transparent 48%);mask:radial-gradient(circle,#000000 4%,rgba(0,0,0,.6) 18%,transparent 48%);
  animation:gira 90s linear infinite}
@keyframes gira{to{rotate:360deg}}

.pl-nombre{display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse 80% 60% at 50% 40%,#FAFCFD,var(--lino))}
.pl-tarjeta{position:relative;width:min(100%,400px);padding:38px 26px 34px;text-align:center;background:var(--papel-claro);
  box-shadow:0 1px 1px rgba(var(--sombra-rgb),.12),0 26px 44px -24px rgba(var(--sombra-rgb),.45)}
.pl-tarjeta::before{content:"";position:absolute;inset:10px;border:1px solid rgba(var(--oro-rgb),.7);box-shadow:inset 0 0 0 3px var(--papel-claro),inset 0 0 0 4px rgba(var(--oro-rgb),.45);pointer-events:none}
.pl-espigas{display:block;width:44%;margin:-6px auto 8px}
.pl-tarjeta small{display:block;font-family:var(--f-sans);font-size:14px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--tinta-media);padding-left:.3em}
.pl-tarjeta h2{margin:6px 0 4px;font-family:var(--f-firma);font-weight:400;font-size:clamp(58px,17vw,84px);line-height:1.15;color:var(--tinta)}
.pl-tarjeta h2 .pal{display:inline-block;white-space:nowrap;opacity:1}
.pl-tarjeta h2 .pal span{display:inline-block;opacity:0}
.pl-nombre.activa h2 .pal span{animation:letra .9s var(--ease-out) both;animation-delay:calc(.3s + var(--k) * 45ms)}
@keyframes letra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pl-tarjeta p{margin:0 0 24px;font-size:19px;color:var(--tinta-suave)}
.pl-nombre.activa .pl-tarjeta > :not(h2){animation:aparecer 1s var(--ease-out) both}
.pl-nombre.activa .pl-tarjeta p,.pl-nombre.activa .pl-tarjeta .boton{animation-delay:.9s}
.pl-tarjeta .boton{width:auto}

.pl-barras{position:absolute;left:50%;width:min(100% - 24px,496px);translate:-50% 0;top:calc(14px + env(safe-area-inset-top));z-index:6;display:flex;gap:5px}
.pl-barras i{flex:1;height:3px;border-radius:2px;background:rgba(var(--tinta-rgb),.18);overflow:hidden}
.pl-barras b{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--oro)}
.pl-barras i.llena b{transform:none}
.pl-barras i.corre b{animation:llena var(--d) linear forwards}
@keyframes llena{to{transform:none}}
.pl-saltar{position:absolute;right:max(8px,calc(50% - 260px + 8px));top:calc(26px + env(safe-area-inset-top));z-index:6;min-width:44px;min-height:44px;background:none;border:0;
  color:var(--tinta-media);font-family:var(--f-sans);font-size:14px;letter-spacing:.2em;text-transform:uppercase;padding:10px;cursor:pointer}

/* ---------- Contenido ---------- */
.contenido{position:relative;z-index:2;opacity:0;visibility:hidden;transition:opacity 1.2s var(--ease-out) .2s;max-width:520px;margin:0 auto;
  background:var(--papel-claro);box-shadow:0 0 80px -30px rgba(var(--sombra-rgb),.35);overflow:clip}
.abierto .contenido{opacity:1;visibility:visible}

/* Portada: la custodia */
.portada-luz{position:relative;min-height:max(100svh,740px);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.po-foto{position:absolute;left:0;top:0;width:100%;height:min(64%,600px);object-fit:cover;object-position:50% 8%;-webkit-mask:linear-gradient(#000000 78%,transparent);mask:linear-gradient(#000000 78%,transparent);transform:scale(1.05);transition:transform 6s var(--ease-out)}
.abierto .po-foto{transform:scale(1)}
.portada-luz .rayos{--ry:22%}
.po-textos{position:relative;z-index:2;text-align:center;padding:0 22px calc(11vh + env(safe-area-inset-bottom))}
.po-arriba{margin:0;font-family:var(--f-sans);font-weight:500;font-size:14px;letter-spacing:.34em;text-transform:uppercase;color:var(--tinta-media);padding-left:.34em}
.po-nombre{margin:2px 0 0;font-family:var(--f-firma);font-weight:400;font-size:clamp(72px,22vw,112px);line-height:1.1;color:var(--tinta)}
.po-invita{margin:6px auto 0;max-width:28ch;font-size:20px;line-height:1.45;font-style:italic;color:var(--tinta-media)}
.po-fecha{margin:16px 0 0;font-family:var(--f-sans);font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta)}
.abierto .po-textos > *{animation:aparecer 1.2s var(--ease-out) both}
.abierto .po-arriba{animation-delay:.4s}.abierto .po-nombre{animation-delay:.6s}.abierto .po-invita{animation-delay:.9s}.abierto .po-fecha{animation-delay:1.1s}
.bajar{position:absolute;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));translate:-50% 0;z-index:3;display:flex;flex-direction:column;align-items:center;gap:6px;
  font-family:var(--f-sans);font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--tinta-suave)}
.bajar i{width:1px;height:28px;background:linear-gradient(var(--oro),transparent)}

/* Secciones */
.seccion{position:relative;padding:11vh 22px 9vh;text-align:center}
.seccion + .seccion{padding-top:4vh}
.titulo-sec{margin:0 0 5vh;text-align:center}
.titulo-sec small{display:block;font-family:var(--f-sans);font-weight:500;font-size:14px;letter-spacing:.3em;text-transform:uppercase;color:var(--tinta-media);margin-bottom:8px;padding-left:.3em}
.titulo-sec h2{font-family:var(--f-titulo);font-weight:500;font-size:clamp(40px,11.5vw,56px);line-height:1.05;color:var(--tinta);margin:0;letter-spacing:0}
.titulo-sec::after{content:"";display:block;width:140px;height:24px;margin:14px auto 0;background:var(--adorno) center/contain no-repeat}
.titulo-sec .filete{display:none}
.titulo-sec.aparece h2{clip-path:none!important}

/* Frase de santo */
.frase{margin:7vh auto 0;max-width:30ch;padding-top:30px;position:relative}
.frase::before{content:"“";position:absolute;left:50%;top:-18px;translate:-50% 0;font-family:var(--f-titulo);font-size:84px;line-height:1;color:var(--oro);opacity:.55}
.frase blockquote{margin:0;font-family:var(--f-titulo);font-style:italic;font-weight:500;font-size:clamp(22px,6.2vw,26px);line-height:1.35;color:var(--tinta-media)}
.frase figcaption{margin-top:12px;font-family:var(--f-sans);font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--oro-texto);font-weight:500}

/* Bienvenida */
#s-bienvenida{padding-top:9vh}
.espigas-sec{display:block;width:min(70%,300px);margin:0 auto 3vh}
.bv-familias{margin:0 0 14px;font-family:var(--f-sans);font-size:14px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-media);line-height:1.6}
.bv-texto{margin:0 auto;max-width:30ch;font-size:clamp(21px,5.8vw,24px);line-height:1.5;color:var(--tinta)}
.foto-arco{margin:6vh auto 0;width:min(78%,340px);padding:8px;border-radius:999px 999px 6px 6px;background:linear-gradient(135deg,#B7C4CE,#677986 40%,#C5D1DA 60%,#576875);
  box-shadow:0 26px 40px -24px rgba(var(--sombra-rgb),.55)}
.foto-arco img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 20%;border-radius:999px 999px 3px 3px}

/* Cuenta regresiva */
.reloj-luz{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:420px;margin:0 auto}
.reloj-luz div{padding:20px 2px 14px;background:var(--marfil);border-radius:999px 999px 4px 4px / 60px 60px 4px 4px;box-shadow:inset 0 0 0 1px rgba(var(--oro-rgb),.6),inset 0 0 0 4px var(--marfil),inset 0 0 0 5px rgba(var(--oro-rgb),.3)}
.reloj-luz b{display:block;font-family:var(--f-titulo);font-weight:600;font-size:clamp(32px,10vw,44px);line-height:1;color:var(--tinta);font-variant-numeric:lining-nums tabular-nums}
.reloj-luz small{display:block;margin-top:8px;font-family:var(--f-sans);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-suave)}
.cuenta-pie{margin:22px 0 0;font-size:20px;font-style:italic;color:var(--tinta-media)}

/* Lugares: Misa clara, celebración oscura */
.lugar-ed{display:none}
.momentos{display:flex;flex-direction:column;gap:16px;margin:0;padding:0;width:100%}
.momento{background:var(--papel-claro);padding:34px 24px 30px;text-align:center;box-shadow:0 1px 1px rgba(var(--sombra-rgb),.1),0 20px 34px -22px rgba(var(--sombra-rgb),.45)}
.momento h3{font-family:var(--f-titulo);font-weight:500;font-size:40px;line-height:1.05;color:var(--tinta);margin:0 0 6px}
.momento .hora{display:block;font-family:var(--f-sans);font-weight:500;font-size:16px;letter-spacing:.2em;color:var(--oro-texto)}
.momento p{font-size:19px;margin:14px 0 20px}
.momento p small{display:block;font-size:16px;color:var(--tinta-suave);margin-top:4px}
.momento.oscuro{background:var(--pan-oro);color:var(--tinta-osc)}
.momento.oscuro::before{opacity:.12}
.momento.oscuro h3{color:var(--tinta-osc)}
.momento.oscuro .hora{color:var(--tinta)}
.momento.oscuro p small{color:var(--tinta-media)}
.momento.oscuro .boton{color:var(--tinta-osc);border-color:rgba(var(--tinta-rgb),.45);background:rgba(249,251,252,.35)}
.momento.oscuro .filete-doble{border-color:rgba(249,251,252,.85)}
.calendarios{margin-top:26px;display:flex;flex-direction:column;align-items:center;gap:10px}
.enlace-cal{background:none;border:0;font-family:var(--f-serif);font-size:17px;font-style:italic;color:var(--tinta-suave);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:10px;min-height:44px}

/* Botones */
.boton{font-family:var(--f-sans);font-weight:500;font-size:14px;letter-spacing:.14em;color:var(--tinta);border-color:rgba(var(--oro-rgb),.8);border-radius:999px;min-height:46px}
.boton.lleno,.boton.destacado,.noche .boton.destacado{background:var(--pan-oro);border:1px solid rgba(var(--oro-rgb),.7);color:var(--tinta-osc);text-shadow:0 1px 0 rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 6px 16px -10px rgba(var(--sombra-rgb),.5)}
.boton.destacado .ico-sobre{color:var(--tinta-media)}
@media (hover:hover){.boton.destacado:hover,.boton.lleno:hover{background:var(--pan-oro);filter:brightness(1.03)}}
.boton:active{transform:scale(.97)}

/* Itinerario y vestimenta */
.contenido .itinerario{max-width:340px;margin:0 auto}
.itinerario .h{color:var(--oro-texto)}
.vestimenta .tipo{font-family:var(--f-titulo);font-size:32px;font-weight:500}
.vestimenta .reservado{color:var(--tinta-media);font-style:italic}
.contenido .vestimenta{max-width:100%}

/* Sobre de regalos en marfil con sello de oro */
.sobre-regalo{position:relative;width:min(100%,400px);aspect-ratio:1.45;margin:190px auto 20px;container-type:inline-size}
.sr-cuerpo{position:absolute;inset:0;background:#D0D7DC;border-radius:4px;box-shadow:0 26px 40px -22px rgba(var(--sombra-rgb),.5)}
.sr-tarjeta{position:absolute!important;left:7%;right:7%;bottom:6%;height:92%;z-index:1;background:var(--papel-claro);padding:7cqw 6cqw;text-align:center;
  display:flex;flex-direction:column;justify-content:flex-start;box-shadow:0 4px 12px rgba(var(--sombra-rgb),.15);transition:transform 1.3s var(--ease-in-out) .7s}
.sr-tarjeta h3{margin:0 0 8px;font-family:var(--f-titulo);font-weight:500;font-size:max(26px,8.4cqw);line-height:1;color:var(--tinta)}
.sr-tarjeta p{margin:0;font-size:max(16px,4.2cqw);line-height:1.5}
.sr-frente{position:absolute;inset:0;z-index:2;border-radius:4px;pointer-events:none;
  background:linear-gradient(to top right,#DAE2E8 49.6%,transparent 50%) left bottom/50.5% 100% no-repeat,linear-gradient(to top left,#D2DBE2 49.6%,transparent 50%) right bottom/50.5% 100% no-repeat;
  filter:drop-shadow(0 -2px 3px rgba(var(--sombra-rgb),.15))}
.sr-frente::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56%;background:linear-gradient(to top,#E2E8ED,#D9E1E7);clip-path:polygon(0 100%,100% 100%,100% 18%,50% 0,0 18%)}
.sr-solapa{position:absolute;left:0;right:0;top:0;height:62%;z-index:3;transform-origin:50% 0;transition:transform .9s var(--ease-in-out),z-index 0s .45s}
.sr-solapa i{position:absolute;inset:0;background:linear-gradient(180deg,#E8EDF1,#C8D0D6);clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 3px 3px rgba(var(--sombra-rgb),.2))}
.sr-sello{position:absolute;left:50%;top:62%;translate:-50% -50%;z-index:4;width:18cqw;aspect-ratio:1;border-radius:47% 53% 50% 50% / 52% 46% 54% 48%;
  background:radial-gradient(circle at 35% 30%,#BDCAD4,var(--oro-vivo) 45%,#4B5A66);box-shadow:inset 0 -3px 6px rgba(0,0,0,.2),0 4px 8px rgba(var(--sombra-rgb),.35);
  display:grid;place-items:center;color:#3A4650;font-family:var(--f-firma);font-size:10cqw;text-shadow:0 1px 0 rgba(255,255,255,.35);transition:opacity .4s,transform .5s var(--ease-out)}
.sobre-regalo.abierto .sr-sello{opacity:0;transform:scale(1.15)}
.sobre-regalo.abierto .sr-solapa{transform:rotateX(180deg);z-index:0}
.sobre-regalo.abierto .sr-tarjeta{transform:translateY(-72%)}

/* Confirmación con el cáliz */
.rsvp-mesa{position:relative;width:min(100%,420px);margin:0 auto;padding-top:0}
.r-caliz{display:block;position:relative;z-index:2;width:30%;margin:0 auto -30px;filter:drop-shadow(0 14px 14px rgba(var(--sombra-rgb),.28))}
.contenido .rsvp{padding:58px 24px 38px;background:var(--papel-claro);box-shadow:0 1px 1px rgba(var(--sombra-rgb),.12),0 26px 44px -24px rgba(var(--sombra-rgb),.45)}
.rsvp-sigla{display:block;font-family:var(--f-sans);font-size:14px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--tinta-media);padding-left:.3em}
.rsvp h3{margin:8px 0 6px;font-family:var(--f-titulo);font-weight:500;font-style:italic;font-size:clamp(40px,11vw,52px);line-height:1.05;color:var(--tinta)}
.rsvp p{font-size:19px;color:var(--tinta-suave);margin:0 0 22px}

/* Recordatorio con el QR de fotos */
.recordatorio{position:relative;display:block;width:min(80%,320px);margin:0 auto;padding:28px 24px 26px;text-decoration:none;color:var(--tinta);
  border-radius:50% 50% 6px 6px / 120px 120px 6px 6px;background:var(--papel-claro);-webkit-tap-highlight-color:transparent;
  box-shadow:0 1px 1px rgba(var(--sombra-rgb),.12),0 26px 44px -24px rgba(var(--sombra-rgb),.45),inset 0 0 0 1px rgba(var(--oro-rgb),.25)}
.recordatorio .filete-doble{inset:10px;border-radius:50% 50% 3px 3px / 112px 112px 3px 3px}
.rc-paloma{display:block;width:52%;margin:6px auto 0}
.rc-nombre{margin:0;font-family:var(--f-firma);font-size:40px;line-height:1.2}
.rc-qr{width:64%;margin:10px auto 0;color:var(--tinta)}
.rc-qr svg{display:block;width:100%;height:auto}
.rc-pie{margin:10px 0 0;font-family:var(--f-sans);font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-suave)}
.ticket-texto{max-width:30ch;text-align:center;margin:26px auto 0;font-style:italic;font-size:19px;line-height:1.45;color:var(--tinta-suave)}

/* Muro */
.mot{background:var(--marfil);text-align:center;padding:48px 24px 44px;box-shadow:inset 0 0 0 1px rgba(var(--oro-rgb),.5),inset 0 0 0 6px var(--marfil),inset 0 0 0 7px rgba(var(--oro-rgb),.3)}
.mot h3{margin:0;font-family:var(--f-titulo);font-weight:500;font-size:clamp(38px,10.5vw,50px);line-height:1.05}
.mot p{margin:10px auto 22px;max-width:26ch;font-size:19px;color:var(--tinta-suave)}

/* Cierre */
.cierre-luz{position:relative;min-height:max(100svh,640px);padding:12vh 22px calc(14vh + env(safe-area-inset-bottom));text-align:center;overflow:hidden;
  background:radial-gradient(ellipse 90% 55% at 50% 18%,#F9FBFC,var(--papel-claro) 60%,var(--lino))}
.cierre-luz .rayos{--ry:16%;mix-blend-mode:normal;opacity:.5;background:repeating-conic-gradient(from 0deg,rgba(var(--oro-claro-rgb),.55) 0deg 2deg,rgba(255,255,255,0) 2deg 12deg)}
.cl-paloma{position:relative;z-index:1;display:block;width:min(58%,260px);margin:0 auto 2vh;filter:drop-shadow(0 18px 18px rgba(var(--sombra-rgb),.2));animation:vuela 7s ease-in-out infinite}
@keyframes vuela{50%{transform:translateY(-10px)}}
.cl-textos{position:relative;z-index:1}
.cierre-luz h2{margin:0;font-family:var(--f-firma);font-weight:400;font-size:clamp(60px,17vw,86px);line-height:1.15;color:var(--tinta)}
.cl-texto{margin:8px auto 0;max-width:26ch;font-size:21px;color:var(--tinta-media)}
.cierre-luz .frase{margin-top:5vh}
#cierre-fecha{margin:5vh 0 0;font-family:var(--f-sans);font-size:15px;letter-spacing:.24em;text-transform:uppercase;color:var(--tinta)}
.cl-firma{width:78px;height:78px;margin:22px auto 0;border-radius:47% 53% 50% 50% / 52% 46% 54% 48%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#BDCAD4,var(--oro-vivo) 45%,#4B5A66);color:#3A4650;font-family:var(--f-firma);font-size:40px;line-height:1;
  text-shadow:0 1px 0 rgba(255,255,255,.35);box-shadow:inset 0 -3px 6px rgba(0,0,0,.2),0 8px 14px rgba(var(--sombra-rgb),.3)}

/* Controles fijos */
.flechas{position:fixed;z-index:44;right:max(16px,env(safe-area-inset-right));top:50%;translate:0 -50%;display:flex;flex-direction:column;gap:8px;opacity:0;pointer-events:none;transition:opacity .4s var(--ease-out)}
.abierto .flechas.listo{opacity:1;pointer-events:auto}
.flechas button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(var(--oro-rgb),.6);background:rgba(var(--marfil-rgb),.9);color:var(--tinta);display:grid;place-items:center;cursor:pointer;padding:0}
.flechas button svg{width:20px;height:20px}
.flechas button:disabled{opacity:.35}
.btn-musica{background:rgba(var(--marfil-rgb),.9);border:1px solid rgba(var(--oro-rgb),.6)}
@media (min-width:700px){.flechas{right:max(16px,calc(50vw - 260px - 70px))}}

/* Formulario: 16px o más en los campos para que el celular no haga zoom */
.campo input,.campo textarea,.campo select{font-size:17px}
.hoja h3{font-family:var(--f-titulo);font-style:italic;font-weight:500}

@media (hover:hover) and (pointer:fine){
  .recordatorio{transition:transform .3s var(--ease-out)}.recordatorio:hover{transform:translateY(-3px)}
}

/* Movimiento reducido: sin giros ni acercamientos, solo fundidos */
@media (prefers-reduced-motion:reduce){
  .rayos,.cl-paloma,.pista{animation:none}
  .pl-escena.activa img{animation:none}
  .marco-puertas,.puerta,.tras-puertas img{transition-duration:.01s;transition-delay:0s}
  .abriendo .puerta{opacity:0;transition:opacity .4s}
}

/* Nada más ancho que la columna (las reglas de la plantilla eran para pantalla completa) */
.contenido .papel,.contenido .playlist,.contenido .vestimenta,.contenido .itinerario,.contenido .rsvp-mesa{max-width:100%}
.contenido .playlist{width:100%;padding:44px 22px 34px;rotate:0deg;--giro:0deg}
.pistas b{font-family:var(--f-titulo);font-size:20px;font-weight:600}
.pistas span{font-size:16px}

/* Las tarjetas van derechas y caben en la columna */
.contenido .papel,.contenido .aparece{--giro:0deg}
.contenido .itinerario,.contenido .vestimenta,.contenido .rsvp{width:100%;margin-left:auto;margin-right:auto}
.contenido .momento{width:100%;margin:0;rotate:0deg}

/* Superficies del navegador con la paleta */
::selection{background:rgba(var(--oro-claro-rgb),.55);color:var(--tinta-osc)}
input,textarea{caret-color:var(--oro-texto);accent-color:var(--tinta)}
:focus-visible{outline:2px solid var(--oro-texto);outline-offset:3px;border-radius:4px}

/* Nombres largos ("María de los Ángeles"): un tamaño menor para no tapar la custodia */
.nombre-largo .po-nombre{font-size:clamp(50px,14vw,76px)}
.nombre-largo .pl-tarjeta h2{font-size:clamp(46px,13vw,64px)}
.nombre-largo .rc-nombre{font-size:34px}
.nw{white-space:nowrap}

/* Títulos y nombre en dorado (texto grande: contraste suficiente sobre marfil) */
.pt-para,.pl-tarjeta h2,.po-nombre,.titulo-sec h2,.momento h3,.rsvp h3,.cierre-luz h2,.mot h3,.sr-tarjeta h3,.vestimenta .tipo,.rc-nombre,.hoja h3,.reloj-luz b,.pl-sub p{color:var(--oro-titulo)}
.momento.oscuro h3{color:var(--tinta-osc)}

/* Recordatorio: la textura y el filete interior siguen el arco (antes asomaba un cuadrado) */
.recordatorio::before,.recordatorio .filete-doble::after{border-radius:inherit}

/* La luz nace en la hostia: un resplandor en el centro y los rayos saliendo de él (posición calculada en JS) */
.rayos{left:var(--rx,50%);top:var(--ry,31%)}
.rayos::after{content:"";position:absolute;left:50%;top:50%;width:12%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,rgba(245,248,250,.95),rgba(232,238,243,.55) 40%,rgba(222,231,238,0) 70%);mix-blend-mode:screen;animation:late 5s ease-in-out infinite}
@keyframes late{50%{transform:scale(1.18);opacity:.8}}
@media (prefers-reduced-motion:reduce){.rayos::after{animation:none}}

/* =================== Acabado premium: oro en caliente, canto dorado, filigrana y damasco =================== */
:root{--foil:linear-gradient(100deg,#485966 0%,#667A89 18%,#B3C1CC 34%,#798E9E 48%,#C7D3DC 62%,#5E707E 80%,#485966 100%);
  --canto:linear-gradient(135deg,#9BABB8,#556674 30%,#C5D1DA 50%,#677986 70%,#B0BEC8);
  --esq-1:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2744%27%20height%3D%2744%27%20viewBox%3D%270%200%2044%2044%27%3E%3Cg%20transform%3D%27rotate%280%2022%2022%29%27%20fill%3D%27none%27%20stroke%3D%27%23677986%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M3%2041V16C3%208.8%208.8%203%2016%203h25%27%20stroke-width%3D%271.2%27/%3E%3Cpath%20d%3D%27M9%2041V20c0-6.1%204.9-11%2011-11h21%27%20stroke-width%3D%27.7%27%20opacity%3D%27.6%27/%3E%3Cpath%20d%3D%27M3%2016c6%200%2010%202%2013%205M16%203c0%206%202%2010%205%2013%27%20stroke-width%3D%27.8%27%20opacity%3D%27.8%27/%3E%3Ccircle%20cx%3D%2721.5%27%20cy%3D%2721.5%27%20r%3D%271.6%27%20fill%3D%27%23677986%27%20stroke%3D%27none%27/%3E%3C/g%3E%3C/svg%3E");--esq-2:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2744%27%20height%3D%2744%27%20viewBox%3D%270%200%2044%2044%27%3E%3Cg%20transform%3D%27rotate%2890%2022%2022%29%27%20fill%3D%27none%27%20stroke%3D%27%23677986%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M3%2041V16C3%208.8%208.8%203%2016%203h25%27%20stroke-width%3D%271.2%27/%3E%3Cpath%20d%3D%27M9%2041V20c0-6.1%204.9-11%2011-11h21%27%20stroke-width%3D%27.7%27%20opacity%3D%27.6%27/%3E%3Cpath%20d%3D%27M3%2016c6%200%2010%202%2013%205M16%203c0%206%202%2010%205%2013%27%20stroke-width%3D%27.8%27%20opacity%3D%27.8%27/%3E%3Ccircle%20cx%3D%2721.5%27%20cy%3D%2721.5%27%20r%3D%271.6%27%20fill%3D%27%23677986%27%20stroke%3D%27none%27/%3E%3C/g%3E%3C/svg%3E");--esq-3:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2744%27%20height%3D%2744%27%20viewBox%3D%270%200%2044%2044%27%3E%3Cg%20transform%3D%27rotate%28180%2022%2022%29%27%20fill%3D%27none%27%20stroke%3D%27%23677986%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M3%2041V16C3%208.8%208.8%203%2016%203h25%27%20stroke-width%3D%271.2%27/%3E%3Cpath%20d%3D%27M9%2041V20c0-6.1%204.9-11%2011-11h21%27%20stroke-width%3D%27.7%27%20opacity%3D%27.6%27/%3E%3Cpath%20d%3D%27M3%2016c6%200%2010%202%2013%205M16%203c0%206%202%2010%205%2013%27%20stroke-width%3D%27.8%27%20opacity%3D%27.8%27/%3E%3Ccircle%20cx%3D%2721.5%27%20cy%3D%2721.5%27%20r%3D%271.6%27%20fill%3D%27%23677986%27%20stroke%3D%27none%27/%3E%3C/g%3E%3C/svg%3E");--esq-4:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2744%27%20height%3D%2744%27%20viewBox%3D%270%200%2044%2044%27%3E%3Cg%20transform%3D%27rotate%28270%2022%2022%29%27%20fill%3D%27none%27%20stroke%3D%27%23677986%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M3%2041V16C3%208.8%208.8%203%2016%203h25%27%20stroke-width%3D%271.2%27/%3E%3Cpath%20d%3D%27M9%2041V20c0-6.1%204.9-11%2011-11h21%27%20stroke-width%3D%27.7%27%20opacity%3D%27.6%27/%3E%3Cpath%20d%3D%27M3%2016c6%200%2010%202%2013%205M16%203c0%206%202%2010%205%2013%27%20stroke-width%3D%27.8%27%20opacity%3D%27.8%27/%3E%3Ccircle%20cx%3D%2721.5%27%20cy%3D%2721.5%27%20r%3D%271.6%27%20fill%3D%27%23677986%27%20stroke%3D%27none%27/%3E%3C/g%3E%3C/svg%3E")}

/* Letras con oro en caliente (solo títulos y nombre: texto grande) */
.po-nombre,.pl-tarjeta h2 .pal span,.titulo-sec h2,.cierre-luz h2,.rc-nombre,.reloj-luz b,.rsvp h3,.momento:not(.oscuro) h3,.mot h3,.sr-tarjeta h3,.vestimenta .tipo{
  background:var(--foil);background-size:100% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.po-nombre,.cierre-luz h2{filter:drop-shadow(0 1px 0 rgba(255,255,255,.7)) drop-shadow(0 2px 3px rgba(var(--sombra-rgb),.18))}

/* Damasco marfil sobre marfil en la columna (casi imperceptible) */
.contenido{background:var(--papel-claro) url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27120%27%20height%3D%27120%27%20viewBox%3D%270%200%20120%20120%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23677986%27%20stroke-width%3D%27.8%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M30%2044V16M30%2022c-4-2-6-5-6-9M30%2022c4-2%206-5%206-9M30%2030c-4-2-6-5-6-9M30%2030c4-2%206-5%206-9M30%2038c-4-2-6-5-6-9M30%2038c4-2%206-5%206-9%27/%3E%3Cpath%20d%3D%27M90%2082v16M84%2088h12%27/%3E%3Cpath%20d%3D%27M90%20104V76M90%2082c-4-2-6-5-6-9M90%2082c4-2%206-5%206-9%27%20opacity%3D%270%27/%3E%3C/g%3E%3Cg%20fill%3D%27%23677986%27%3E%3Ccircle%20cx%3D%2790%27%20cy%3D%2730%27%20r%3D%271.2%27/%3E%3Ccircle%20cx%3D%2730%27%20cy%3D%2790%27%20r%3D%271.2%27/%3E%3C/g%3E%3C/svg%3E") 0 0/120px 120px}
.contenido::before{content:"";position:absolute;inset:0;background:linear-gradient(var(--papel-claro),rgba(249,251,252,.86));pointer-events:none;z-index:0}
.contenido > section{position:relative;z-index:1}
.portada-luz{background:var(--papel-claro)}

/* Canto dorado en las tarjetas */
.contenido .papel,.momento,.pl-tarjeta,.mot,.recordatorio{border:1.5px solid transparent;
  background:linear-gradient(var(--papel-claro),var(--papel-claro)) padding-box,var(--canto) border-box}
.momento.oscuro{background:var(--pan-oro) padding-box,var(--canto) border-box}
.recordatorio{border-width:2px}

/* Filigrana en las esquinas de las tarjetas principales */
.momento .filete-doble,.contenido .itinerario .filete-doble,.contenido .vestimenta .filete-doble,.contenido .rsvp .filete-doble,.contenido .playlist .filete-doble{
  background:var(--esq-1) left top/34px no-repeat,var(--esq-2) right top/34px no-repeat,var(--esq-3) right bottom/34px no-repeat,var(--esq-4) left bottom/34px no-repeat;inset:7px;border-color:transparent}
.momento .filete-doble::after,.contenido .papel .filete-doble::after{inset:14px;border:.5px solid rgba(var(--oro-rgb),.45)}
.momento.oscuro .filete-doble{filter:brightness(1.6) saturate(.6)}
.pl-tarjeta::before{border:0;box-shadow:none;inset:8px;
  background:var(--esq-1) left top/40px no-repeat,var(--esq-2) right top/40px no-repeat,var(--esq-3) right bottom/40px no-repeat,var(--esq-4) left bottom/40px no-repeat}
.pl-tarjeta::after{content:"";position:absolute;inset:18px;border:.5px solid rgba(var(--oro-rgb),.45);pointer-events:none}

/* Frases de santos como estampas: arco de luz con canto dorado */
.frase{max-width:min(100%,340px);padding:46px 26px 26px;border:1.5px solid transparent;border-radius:50% 50% 6px 6px / 90px 90px 6px 6px;
  background:radial-gradient(ellipse 70% 45% at 50% 0%,rgba(240,244,247,1),rgba(229,236,241,.9) 60%,rgba(220,229,236,.9)) padding-box,var(--canto) border-box;
  box-shadow:0 18px 30px -22px rgba(var(--sombra-rgb),.45)}
.frase::before{top:6px;font-size:64px;line-height:1;color:var(--oro);opacity:.7}
.frase::after{content:"";position:absolute;inset:6px;border-radius:inherit;border:.5px solid rgba(var(--oro-rgb),.45);pointer-events:none}
.cierre-luz .frase{background:radial-gradient(ellipse 70% 45% at 50% 0%,rgba(245,248,250,.95),rgba(229,236,241,.7)) padding-box,var(--canto) border-box}

/* Cuenta regresiva en arcos de capilla con canto dorado */
.reloj-luz div{border:1.5px solid transparent;box-shadow:0 12px 20px -16px rgba(var(--sombra-rgb),.45);
  background:radial-gradient(ellipse 80% 50% at 50% 0%,#F4F7FA,var(--papel-claro)) padding-box,var(--canto) border-box}
.reloj-luz div{position:relative}
.reloj-luz div::after{content:"";position:absolute;inset:4px;border-radius:inherit;border:.5px solid rgba(var(--oro-rgb),.4);pointer-events:none}

/* El adorno bajo los títulos, en oro un poco más presente */
.titulo-sec::after{width:160px;height:28px}

/* Ajustes del acabado: oro parejo en cada letra (brillo de arriba abajo, como el foil real) y estampas más claras */
:root{--foil:linear-gradient(180deg,#677986 0%,#9BABB8 30%,#C7D3DC 48%,#667A89 62%,#556674 80%,#798E9E 100%)}
.frase{background:radial-gradient(ellipse 70% 45% at 50% 0%,#F8FAFC,#EBF0F4 60%,#DFE7ED) padding-box,var(--canto) border-box}
.cierre-luz .frase{background:radial-gradient(ellipse 70% 45% at 50% 0%,#F8FAFC,rgba(235,240,244,.85)) padding-box,var(--canto) border-box}
.sr-tarjeta{padding:7cqw 9cqw}

/* Luz de vitral: haces diagonales muy suaves que entran desde arriba y se mueven despacio */
.seccion::before{content:"";position:absolute;inset:-10% -30%;z-index:-1;pointer-events:none;opacity:.55;
  background:linear-gradient(115deg,transparent 18%,rgba(228,235,241,.75) 24%,transparent 31%,transparent 44%,rgba(228,235,241,.5) 49%,transparent 55%,transparent 66%,rgba(228,235,241,.6) 71%,transparent 78%);
  -webkit-mask:linear-gradient(180deg,#000000,transparent 75%);mask:linear-gradient(180deg,#000000,transparent 75%);
  animation:vitral 22s ease-in-out infinite alternate}
.seccion:nth-of-type(even)::before{animation-delay:-11s;opacity:.4}
@keyframes vitral{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
@media (prefers-reduced-motion:reduce){.seccion::before{animation:none}}

/* =================================================================================================
   Agua Viva · lo propio del bautizo
   Movimiento: una sola curva para lo que entra (--ease-out) y tres duraciones (rápida, media, lenta).
   Nada rebota ni se mueve solo por decorar: cada movimiento acompaña algo (abrir, llegar, leer).
   ================================================================================================= */
:root{--t-rapida:.35s;--t-media:.9s;--t-lenta:1.4s;
  --adorno:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='24' viewBox='0 0 160 24'%3E%3Cg fill='none' stroke='%238FA2B3' stroke-width='.9' stroke-linecap='round'%3E%3Cpath d='M6 9q5 9 10 0q5 9 10 0q5 9 10 0q5 9 10 0q5 9 10 0'/%3E%3Cpath d='M104 9q5 9 10 0q5 9 10 0q5 9 10 0q5 9 10 0q5 9 10 0'/%3E%3Cpath d='M80 4c3.2 4.2 5.2 7.4 5.2 10a5.2 5.2 0 0 1-10.4 0c0-2.6 2-5.8 5.2-10z'/%3E%3C/g%3E%3Cg fill='%238FA2B3'%3E%3Ccircle cx='11' cy='12.5' r='1'/%3E%3Ccircle cx='21' cy='12.5' r='1'/%3E%3Ccircle cx='31' cy='12.5' r='1'/%3E%3Ccircle cx='41' cy='12.5' r='1'/%3E%3Ccircle cx='51' cy='12.5' r='1'/%3E%3Ccircle cx='109' cy='12.5' r='1'/%3E%3Ccircle cx='119' cy='12.5' r='1'/%3E%3Ccircle cx='129' cy='12.5' r='1'/%3E%3Ccircle cx='139' cy='12.5' r='1'/%3E%3Ccircle cx='149' cy='12.5' r='1'/%3E%3Ccircle cx='66' cy='12' r='1.3'/%3E%3Ccircle cx='94' cy='12' r='1.3'/%3E%3C/g%3E%3C/svg%3E")}

/* ---------- Apertura: medallón de encaje ---------- */
.escena-puertas{gap:2.6dvh;overflow:hidden}
.escena-puertas::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 70% 55% at 50% 52%,#fff 20%,rgba(255,255,255,.85) 55%,var(--lino));transition:opacity var(--t-media) var(--ease-out) 1.45s}
.abriendo .escena-puertas::after{opacity:1}
.pt-arriba,.pt-para,.medalla{animation:llega var(--t-lenta) var(--ease-out) both}
.pt-arriba{animation-delay:.15s}.pt-para{animation-delay:.3s}.medalla{animation-delay:.45s}
.pista{text-align:center;padding:0 16px;animation:llega var(--t-lenta) var(--ease-out) .9s both,respira 2.8s ease-in-out 2.4s infinite}
@keyframes llega{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.abriendo .pt-arriba,.abriendo .pt-para,.abriendo .pista{opacity:0;animation:none;transition:opacity .5s var(--ease-out)}

.medalla{position:relative;z-index:2;width:min(80vw,400px,52dvh);aspect-ratio:1;padding:0;border:0;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;filter:drop-shadow(0 22px 26px rgba(var(--sombra-rgb),.16)) drop-shadow(0 2px 2px rgba(var(--sombra-rgb),.12));transition:transform var(--t-rapida) var(--ease-out)}
.medalla:active{transform:scale(.985)}
.medalla img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain;transition:transform 1.6s var(--ease-out) .8s,opacity var(--t-media) var(--ease-out) 1.3s}
.abriendo .medalla img{transform:scale(1.06);opacity:0}
.abriendo .medalla{pointer-events:none}
.medalla:focus-visible{border-radius:50%}
/* reflejo de luz que cruza el papel cada pocos segundos: invita a tocar */
.brillo{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:soft-light;
  -webkit-mask:url(assets/medallon.webp) center/contain no-repeat;mask:url(assets/medallon.webp) center/contain no-repeat;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.95) 50%,transparent 62%) 140% 0/260% 100% no-repeat;animation:reflejo 7s var(--ease-in-out) 2.4s infinite}
@keyframes reflejo{0%{background-position:140% 0}26%,100%{background-position:-40% 0}}
.abriendo .brillo{animation:none;opacity:0}
/* la gota cae sobre el agua de papel (debajo de la paloma, junto a la concha) */
.gota{position:absolute;left:50%;top:61%;z-index:3;width:13px;height:13px;margin:-13px 0 0 -6.5px;border-radius:0 50% 50% 50%;rotate:45deg;opacity:0;
  background:radial-gradient(circle at 60% 60%,#fff,rgba(214,228,238,.95) 45%,rgba(var(--oro-rgb),.95));box-shadow:0 2px 4px rgba(var(--sombra-rgb),.25)}
.abriendo .gota{animation:cae-gota .8s cubic-bezier(.55,0,1,.45) .1s forwards,toca-agua .2s var(--ease-out) .9s forwards}
@keyframes cae-gota{from{opacity:0;transform:translate(-38vmin,-38vmin)}20%{opacity:1}to{opacity:1;transform:none}}
@keyframes toca-agua{from{opacity:1}to{opacity:0;scale:.3}}
/* ondas de plata que se abren desde donde cayó la gota */
.ondas{position:absolute;left:50%;top:61%;z-index:4;width:0;height:0;pointer-events:none}
.ondas i{position:absolute;left:0;top:0;width:150vmax;aspect-ratio:1;border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.02);
  border:1.5px solid rgba(var(--oro-rgb),.8);box-shadow:0 0 14px rgba(255,255,255,.9),inset 0 0 14px rgba(255,255,255,.9)}
.abriendo .ondas i{animation:onda 2s var(--ease-out) .9s forwards}
.abriendo .ondas i:nth-child(2){animation-delay:1.1s}
.abriendo .ondas i:nth-child(3){animation-delay:1.3s}
@keyframes onda{0%{opacity:.95;transform:translate(-50%,-50%) scale(.02)}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}

/* ---------- La entrada ---------- */
.pl-pila img{object-position:50% 30%}
.pl-pila.activa img{animation:acerca 5.5s var(--ease-out) both}
.pl-bebe img{object-position:50% 35%}
.pl-bebe.activa img{animation:acerca 6s var(--ease-out) both}
.pl-bebe .pl-sub{padding-top:14vh}
.luz{position:absolute;left:var(--lx,50%);top:var(--ly,15%);width:120%;aspect-ratio:1;translate:-50% -50%;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(255,255,255,.9),rgba(236,245,252,.4) 22%,rgba(236,245,252,0) 55%);animation:respira-luz 6s ease-in-out infinite}
@keyframes respira-luz{50%{opacity:.72;transform:scale(1.06)}}
/* la paloma baja despacio hacia la luz */
.pl-cielo{position:absolute;inset:-6%;background:var(--fondo-pila) 50% 30%/cover;filter:blur(16px) brightness(1.18) saturate(.7)}
.pl-cielo::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 45% at 50% 32%,rgba(255,255,255,.95),rgba(255,255,255,.35) 60%,rgba(255,255,255,.15))}
.pl-ave{position:absolute;left:50%;top:32%;width:min(66%,330px);translate:-50% -50%;opacity:0;filter:drop-shadow(0 18px 18px rgba(var(--sombra-rgb),.18))}
.pl-paloma.activa .pl-ave{animation:desciende 3.8s var(--ease-out) .15s both}
@keyframes desciende{0%{opacity:0;transform:translateY(-26vh) scale(.88)}35%{opacity:1}100%{opacity:1;transform:none}}
.pl-paloma .pl-sub{background:none}
.pl-concha{display:block;width:30%;margin:-4px auto 10px}

/* ---------- Portada ---------- */
.po-foto{object-position:50% 22%;will-change:translate}
.portada-luz .luz{width:150%}

/* ---------- Apariciones: suben poco, enfocan y se asientan ---------- */
.contenido .aparece{opacity:0;transform:translateY(22px);filter:blur(4px);
  transition:opacity 1s var(--ease-out),transform 1.2s var(--ease-out),filter 1s var(--ease-out);transition-delay:var(--d,0s)}
.contenido .aparece.visto{opacity:1;transform:none;filter:none}
/* los títulos llegan en orden: la etiqueta, el título y por último el adorno de encaje, que se dibuja desde el centro */
.titulo-sec.aparece h2{opacity:0;transform:translateY(.22em);transition:opacity 1s var(--ease-out) .15s,transform 1.2s var(--ease-out) .15s}
.titulo-sec.aparece.visto h2{opacity:1;transform:none}
.titulo-sec::after{clip-path:inset(0 50%);transition:clip-path 1.3s var(--ease-out) .5s}
.titulo-sec.visto::after{clip-path:inset(0 0)}

/* ---------- Encaje de papel: borde festoneado con calados ---------- */
.contenido .encaje{position:relative;border:0;background:none;box-shadow:none;--r:9px;
  filter:drop-shadow(0 1px 1px rgba(var(--sombra-rgb),.1)) drop-shadow(0 20px 22px rgba(var(--sombra-rgb),.15))}
.contenido .encaje.aparece:not(.visto){filter:blur(4px)}
.contenido .encaje::before{content:"";position:absolute;inset:0;z-index:-1;opacity:1;mix-blend-mode:normal;background:var(--papel-claro);
  -webkit-mask:radial-gradient(circle at 50% 100%,#000 calc(var(--r) - .6px),transparent var(--r)) 0 0/calc(var(--r) * 2) var(--r) repeat-x,
    linear-gradient(#000 0 0) 0 calc(var(--r) - 1px)/100% calc(100% - var(--r) * 2 + 2px) no-repeat,
    radial-gradient(circle at 50% 0,#000 calc(var(--r) - .6px),transparent var(--r)) 0 100%/calc(var(--r) * 2) var(--r) repeat-x;
  mask:radial-gradient(circle at 50% 100%,#000 calc(var(--r) - .6px),transparent var(--r)) 0 0/calc(var(--r) * 2) var(--r) repeat-x,
    linear-gradient(#000 0 0) 0 calc(var(--r) - 1px)/100% calc(100% - var(--r) * 2 + 2px) no-repeat,
    radial-gradient(circle at 50% 0,#000 calc(var(--r) - .6px),transparent var(--r)) 0 100%/calc(var(--r) * 2) var(--r) repeat-x}
.contenido .encaje::after{content:"";position:absolute;left:12px;right:12px;top:calc(var(--r) + 8px);bottom:calc(var(--r) + 8px);pointer-events:none;
  border-left:.5px solid rgba(var(--oro-rgb),.45);border-right:.5px solid rgba(var(--oro-rgb),.45);
  background:radial-gradient(circle,transparent 1.5px,rgba(var(--oro-rgb),.6) 1.7px 2.3px,transparent 2.6px) 0 0/18px 8px repeat-x,
    radial-gradient(circle,transparent 1.5px,rgba(var(--oro-rgb),.6) 1.7px 2.3px,transparent 2.6px) 0 100%/18px 8px repeat-x}

/* Padrinos */
.padrinos{width:100%;margin:0 auto;padding:44px 26px 48px;text-align:center}
.pd-paloma{display:block;width:min(40%,170px);margin:0 auto 8px}
.pd-nombres{margin:0;font-family:var(--f-titulo);font-weight:500;font-size:clamp(28px,8vw,36px);line-height:1.2;color:var(--oro-titulo)}
.pd-nombres span{display:block}
.pd-nombres i{display:block;margin:4px 0 2px;font-family:var(--f-firma);font-style:normal;font-size:40px;line-height:1;color:var(--oro)}
.pd-texto{margin:20px auto 0;max-width:26ch;font-size:19px;font-style:italic;line-height:1.5;color:var(--tinta-suave)}

/* Carta para cuando crezca: el texto se va descubriendo de arriba abajo, como si se escribiera */
.carta-bebe{width:100%;margin:0 auto;padding:54px 30px 50px;text-align:center}
.carta-bebe h3{margin:0 0 18px;font-family:var(--f-firma);font-weight:400;font-size:clamp(44px,12vw,54px);line-height:1.15;color:var(--oro-titulo)}
.ct-texto{margin:0 auto;max-width:30ch;font-size:21px;font-style:italic;line-height:1.6;color:var(--tinta)}
.ct-firma{margin:20px 0 0;font-family:var(--f-firma);font-size:34px;line-height:1.2;color:var(--oro-titulo)}
.carta-bebe.aparece .ct-texto{clip-path:inset(0 0 100% 0);transition:clip-path 2.6s var(--ease-in-out) .5s}
.carta-bebe.aparece.visto .ct-texto{clip-path:inset(0 0 -10% 0)}
.carta-bebe.aparece .ct-firma{opacity:0;transition:opacity var(--t-lenta) var(--ease-out) 2.8s}
.carta-bebe.aparece.visto .ct-firma{opacity:1}

/* Bienvenida y confirmación con la concha */
.adorno-sec{display:block;width:min(32%,140px);margin:0 auto 3vh}
.r-concha{display:block;position:relative;z-index:2;width:28%;margin:0 auto -26px}
.contenido .r-concha.aparece.visto,.contenido .adorno-sec.aparece.visto{filter:drop-shadow(0 12px 12px rgba(var(--sombra-rgb),.18))}
.rc-paloma{width:46%}

/* ---------- Cierre: la paloma con su luz ---------- */
.halo{position:absolute;left:50%;top:15%;width:130%;aspect-ratio:1;translate:-50% -50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.95),rgba(230,240,248,.5) 28%,rgba(230,240,248,0) 58%);animation:respira-luz 7s ease-in-out infinite}
.cl-paloma{animation:vuela 8s ease-in-out infinite}

/* ---------- Estados: cargando, enviado ---------- */
.boton.enviando{pointer-events:none;opacity:.88}
.boton.enviando::before{content:"";display:inline-block;width:14px;height:14px;margin-right:10px;vertical-align:-2px;border-radius:50%;
  border:1.5px solid currentColor;border-right-color:transparent;animation:gira .8s linear infinite}
.gracias:not([hidden]){animation:llega var(--t-media) var(--ease-out) both}

/* Pasar el mouse: sin saltos ni movimientos, solo la sombra se acerca un poco */
@media (hover:hover) and (pointer:fine){
  .recordatorio{transition:box-shadow var(--t-rapida) var(--ease-out)}
  .recordatorio:hover{transform:none;box-shadow:0 1px 1px rgba(var(--sombra-rgb),.14),0 30px 48px -24px rgba(var(--sombra-rgb),.5),inset 0 0 0 1px rgba(var(--oro-rgb),.3)}
}

/* Movimiento reducido: solo fundidos */
@media (prefers-reduced-motion:reduce){
  .pt-arriba,.pt-para,.medalla,.pista,.brillo,.luz,.halo,.cl-paloma{animation:none}
  .abriendo .gota,.abriendo .ondas i{animation:none}
  .pl-paloma.activa .pl-ave{animation:none;opacity:1}
  .contenido .aparece,.contenido .aparece:not(.visto){transform:none;filter:none}
  .carta-bebe.aparece .ct-texto{clip-path:none}
  .titulo-sec::after{clip-path:none}
}

/* ---------- Ajustes tras la primera revisión ---------- */
/* Plata en las letras grandes: sin franjas tan claras que borren los trazos finos */
:root{--foil:linear-gradient(180deg,#566E83 0%,#7F96A9 28%,#AFC0CE 46%,#768DA1 60%,#526A7F 80%,#71889C 100%)}
/* Damasco de la columna: gotas y festones de agua en plata, casi invisibles */
.contenido{background:var(--papel-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%238FA2B3' stroke-width='.8' stroke-linecap='round'%3E%3Cpath d='M30 18c3 4 5 7 5 9.6a5 5 0 0 1-10 0c0-2.6 2-5.6 5-9.6z'/%3E%3Cpath d='M78 92q4 6 8 0q4 6 8 0'/%3E%3C/g%3E%3Cg fill='%238FA2B3'%3E%3Ccircle cx='90' cy='30' r='1.1'/%3E%3Ccircle cx='30' cy='92' r='1.1'/%3E%3C/g%3E%3C/svg%3E") 0 0/120px 120px}
/* El papel de encaje en perla, para que el festón se distinga de la columna */
.contenido .encaje::before{background:linear-gradient(180deg,#FBFCFD,var(--papel-calido))}

/* Ondas con trazo fijo (un borde escalado se adelgaza hasta desaparecer) y destello más tarde, para que se vean abrirse */
.ondas svg{position:absolute;left:0;top:0;width:150vmax;height:150vmax;overflow:visible;opacity:0;transform:translate(-50%,-50%) scale(.02);
  filter:drop-shadow(0 0 3px rgba(255,255,255,.95))}
.ondas circle{fill:none;stroke:rgba(var(--oro-rgb),.95);stroke-width:1.6;vector-effect:non-scaling-stroke}
.abriendo .ondas svg{animation:onda 2.2s var(--ease-out) .9s forwards}
.abriendo .ondas svg:nth-child(2){animation-delay:1.15s}
.abriendo .ondas svg:nth-child(3){animation-delay:1.4s}
.escena-puertas::after{transition:opacity .6s var(--ease-out) 1.75s}
.medalla img{transition:transform 1.8s var(--ease-out) .85s,opacity var(--t-media) var(--ease-out) 1.5s}
/* la paloma de la entrada no es foto de fondo: no ocupa toda la escena */
.pl-escena > .pl-ave{inset:auto;left:50%;top:32%;width:min(66%,330px);height:auto;object-fit:contain}
@media (prefers-reduced-motion:reduce){.abriendo .ondas svg{animation:none}}

/* =================================================================================================
   Segunda vuelta (Yudi: "muy simple", "el comienzo es muy lento", "quiero texturas, transiciones, una historia")
   ================================================================================================= */

/* ---------- Comienzo más ágil: la gota cae de una vez y las ondas abren paso en ~1,5 s ---------- */
.abriendo .gota{animation:cae-gota .55s cubic-bezier(.55,0,1,.45) .05s forwards,toca-agua .18s var(--ease-out) .6s forwards}
.abriendo .ondas svg{animation:onda 1.6s var(--ease-out) .6s forwards}
.abriendo .ondas svg:nth-child(2){animation-delay:.78s}
.abriendo .ondas svg:nth-child(3){animation-delay:.96s}
.escena-puertas::after{transition:opacity .5s var(--ease-out) 1.05s}
.medalla img{transition:transform 1.4s var(--ease-out) .6s,opacity .7s var(--ease-out) 1s}
.pl-pila.activa img{animation-duration:3.6s}
.pl-bebe.activa img{animation-duration:4s}
.pl-paloma.activa .pl-ave{animation-duration:2.8s}
.activa .pl-sub p,.activa .pl-sub small{animation-delay:.2s}
.activa .pl-sub small{animation-delay:.45s}

/* ---------- Texturas: seda en la mesa, papel de algodón en las tarjetas ---------- */
.mesa::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 65% at 50% 45%,rgba(var(--marfil-rgb),.62),rgba(var(--marfil-rgb),.82))}
body.nina .mesa::before{background:radial-gradient(ellipse 80% 65% at 50% 45%,rgba(250,244,244,.66),rgba(248,240,241,.85))}
.contenido .papel:not(.encaje)::before{background:url(assets/algodon.jpg) 0 0/326px auto repeat;opacity:.55;mix-blend-mode:multiply}
.contenido .encaje::before{background:url(assets/algodon.jpg) 0 0/326px auto repeat,linear-gradient(180deg,#FBFCFD,var(--papel-calido));background-blend-mode:multiply}
.momento::before{background:url(assets/algodon.jpg) 0 0/326px auto repeat}
/* en computador, encajes grandes de papel calado quietos a los lados de la tarjeta */
@media (min-width:900px){
  .mesa::after{content:"";position:absolute;inset:0;opacity:.9;background:
    url(assets/encaje.svg) calc(50% - 560px) 8%/460px no-repeat,url(assets/encaje-cielo.svg) calc(50% - 600px) 4%/460px no-repeat,
    url(assets/encaje.svg) calc(50% + 560px) 92%/420px no-repeat,url(assets/encaje-cielo.svg) calc(50% + 600px) 96%/420px no-repeat;
    filter:drop-shadow(0 18px 22px rgba(var(--sombra-rgb),.14))}
}

/* ---------- Encajes que asoman por las esquinas y giran al bajar (dos capas de papel) ---------- */
.encaje-borde{position:absolute;z-index:0;top:3vh;width:min(54vw,280px);aspect-ratio:1;pointer-events:none;
  filter:drop-shadow(0 12px 14px rgba(var(--sombra-rgb),.16))}
.encaje-borde.izq{left:min(-30vw,-150px)}
.encaje-borde.der{right:min(-30vw,-150px)}
.encaje-borde img{position:absolute;inset:0;width:100%;height:100%;rotate:var(--giro-encaje,0deg)}
.encaje-borde .ec-fondo{scale:1.1;rotate:calc(var(--giro-encaje,0deg) * -.6 + 4deg)}
.seccion > :not(.encaje-borde){position:relative;z-index:1}

/* ---------- Transición de agua: las tarjetas se abren en círculo, como una onda de borde suave ----------
   (con máscara y no con clip-path: un elemento recortado a cero no cuenta como visible y nunca se activaría) */
@property --onda{syntax:'<percentage>';inherits:false;initial-value:0%}
.contenido .papel.aparece:not(.momento):not(.encaje),.contenido .frase.aparece,.contenido .mot.aparece,.contenido .foto-arco.aparece{
  --onda:0%;transform:none;filter:none;
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 calc(var(--onda) - 14%),transparent var(--onda));
  mask:radial-gradient(circle at 50% 50%,#000 calc(var(--onda) - 14%),transparent var(--onda));
  transition:--onda 1.6s var(--ease-out),opacity .5s var(--ease-out);transition-delay:var(--d,0s)}
.contenido .papel.aparece.visto:not(.momento):not(.encaje),.contenido .frase.aparece.visto,.contenido .mot.aparece.visto,.contenido .foto-arco.aparece.visto{--onda:130%}
/* las de encaje se despliegan de arriba abajo, como papel que se desdobla */
.contenido .encaje.aparece{--onda:0%;transform:none;
  -webkit-mask:linear-gradient(#000 calc(var(--onda) - 12%),transparent var(--onda));mask:linear-gradient(#000 calc(var(--onda) - 12%),transparent var(--onda));
  transition:--onda 1.8s var(--ease-in-out),opacity .5s;transition-delay:var(--d,0s)}
.contenido .encaje.aparece.visto{--onda:115%;filter:drop-shadow(0 1px 1px rgba(var(--sombra-rgb),.1)) drop-shadow(0 20px 22px rgba(var(--sombra-rgb),.15))}
/* lugares: cada tarjeta se abre como una tarjeta doblada */
.contenido .momento.aparece{transform-origin:50% 0;transform:perspective(1000px) rotateX(-82deg);filter:none;opacity:0;
  transition:transform 1.4s var(--ease-out),opacity .7s var(--ease-out);transition-delay:var(--d,0s)}
.contenido .momento.aparece.visto{transform:perspective(1000px) rotateX(0);opacity:1}

/* ---------- Portada: motas de luz que suben por el haz ---------- */
.motas{position:absolute;left:0;right:0;top:0;height:64%;z-index:1;pointer-events:none;overflow:hidden}
.motas i{position:absolute;left:var(--x);top:var(--y);width:var(--t);aspect-ratio:1;border-radius:50%;opacity:0;
  background:radial-gradient(circle,#fff 30%,rgba(255,255,255,0) 70%);animation:mota var(--dur) linear var(--ret) infinite}
@keyframes mota{0%{opacity:0;transform:translate(0,50px)}20%{opacity:.95}75%{opacity:.6}100%{opacity:0;transform:translate(var(--dx),-140px)}}

/* ---------- Cuenta regresiva en medallones de encaje; el de los segundos late como una gota ---------- */
.reloj-luz{gap:6px}
.reloj-luz div{position:relative;padding:0;background:none!important;border:0;box-shadow:none;border-radius:0}
.reloj-luz div::before{content:"";display:block;aspect-ratio:1;
  background:radial-gradient(circle closest-side,var(--papel-claro) 0 58%,transparent 59%),url(assets/encaje.svg) center/contain no-repeat;
  filter:drop-shadow(0 8px 10px rgba(var(--sombra-rgb),.18));animation:gira 80s linear infinite}
.reloj-luz div:nth-child(even)::before{animation-direction:reverse}
.reloj-luz div::after{content:none}
.reloj-luz b{position:absolute;left:0;right:0;top:0;aspect-ratio:1;display:grid;place-items:center;font-size:clamp(22px,7vw,34px)}
.reloj-luz small{margin-top:6px}
.reloj-luz div:last-child::after{content:"";position:absolute;left:50%;top:0;width:100%;aspect-ratio:1;translate:-50% 0;border-radius:50%;
  border:1px solid rgba(var(--oro-rgb),.7);animation:latido 1s var(--ease-out) infinite;pointer-events:none}
@keyframes latido{from{transform:scale(.55);opacity:.9}to{transform:scale(1.18);opacity:0}}

/* ---------- Programa: el hilo de plata se dibuja mientras bajas ---------- */
.itinerario ol::before{width:1.5px;background:linear-gradient(var(--oro-claro),var(--oro),var(--oro-claro));transform-origin:50% 0;transform:scaleY(var(--hilo,1))}

/* ---------- Padrinos: cada nombre llega desde su lado y se encuentran en la "y" ---------- */
.padrinos.aparece .pd-nombres span{opacity:0;transition:transform 1.4s var(--ease-out) .9s,opacity 1s var(--ease-out) .9s}
.padrinos.aparece .pd-nombres span:first-child{transform:translateX(-40px)}
.padrinos.aparece .pd-nombres span:last-child{transform:translateX(40px)}
.padrinos.aparece .pd-nombres i{opacity:0;transform:scale(.6);transition:transform .9s var(--ease-out) 1.6s,opacity .9s var(--ease-out) 1.6s}
.padrinos.aparece.visto .pd-nombres span,.padrinos.aparece.visto .pd-nombres i{opacity:1;transform:none}
.padrinos.aparece .pd-paloma{opacity:0;transform:translate(-60px,-50px) rotate(-14deg) scale(.8);transition:transform 1.8s var(--ease-out) .5s,opacity 1s var(--ease-out) .5s}
.padrinos.aparece.visto .pd-paloma{opacity:1;transform:none}

/* ---------- Mi historia ---------- */
#s-historia .historia{display:flex;flex-direction:column;align-items:center}
.nota-historia{margin-top:2vh}
.nota-historia blockquote:empty,.nota-historia figcaption:empty{display:none}
.album .lomo{background:linear-gradient(135deg,var(--noche-claro),var(--noche) 60%,var(--noche-tapa-osc))}
/* Carátula del álbum: tela azul agua con la foto del bebé en un medallón de encaje */
.pag.tapa{color:#fff;gap:2px;justify-content:center;padding:9% 8% 14%;
  background:url(assets/algodon.jpg) 0 0/326px auto repeat,radial-gradient(ellipse at 40% 28%,#5A88AE,#36607F 60%,#26475F);background-blend-mode:multiply}
body.nina .pag.tapa{background:url(assets/algodon.jpg) 0 0/326px auto repeat,radial-gradient(ellipse at 40% 28%,#B98993,#8E5E6A 60%,#6D4450);background-blend-mode:multiply}
.pag.tapa .marco{border-color:rgba(255,255,255,.6);outline-color:rgba(255,255,255,.28)}
.pag.tapa small{color:rgba(255,255,255,.92);text-shadow:0 1px 2px rgba(0,0,0,.25)}
.pag.tapa.con-foto b{font-size:clamp(46px,13vw,66px);line-height:1.1;margin:0;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.25)}
.pag.tapa em{color:rgba(255,255,255,.88);opacity:1}
.tapa-foto{display:grid;place-items:center;width:62%;aspect-ratio:1;margin:8px 0 4px;background:url(assets/encaje.svg) center/100% no-repeat;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.3))}
.tapa-foto img{width:64%;aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:60% 40%;border:3px solid #fff}
.contenido .encaje::before{filter:brightness(1.05)}
.album .dorso{background:url(assets/encaje-cielo.svg) center/88% no-repeat,url(assets/algodon.jpg) 0 0/326px auto repeat,var(--cielo)}
/* plumas detrás de los textos del cierre */
.cierre-luz .lluvia{z-index:0}
.cierre-luz .cl-textos{z-index:2}

/* ---------- Cierre: plumas de papel que caen meciéndose ---------- */
.lluvia img{filter:drop-shadow(0 6px 6px rgba(var(--sombra-rgb),.16));animation:pluma var(--dur) linear var(--ret) infinite}
@keyframes pluma{0%{transform:translate(0,0) rotate(var(--g0))}25%{transform:translate(var(--v),calc(var(--cae) * .25)) rotate(calc(var(--g0) + 28deg))}
  50%{transform:translate(calc(var(--v) * -.6),calc(var(--cae) * .5)) rotate(calc(var(--g0) - 22deg))}75%{transform:translate(var(--v),calc(var(--cae) * .75)) rotate(calc(var(--g0) + 24deg))}
  100%{transform:translate(0,var(--cae)) rotate(var(--g0))}}

@media (prefers-reduced-motion:reduce){
  .motas,.lluvia{display:none}
  .reloj-luz div::before,.reloj-luz div:last-child::after{animation:none}
  .contenido .aparece{clip-path:none!important;transform:none!important;-webkit-mask:none!important;mask:none!important}
  .padrinos.aparece .pd-nombres span,.padrinos.aparece .pd-nombres i,.padrinos.aparece .pd-paloma{transform:none}
}

/* ---------- Color y vida: secciones de agua profunda, cielo y amanecer, con borde de ola ---------- */
:root{--ola:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='26' viewBox='0 0 120 26'%3E%3Cpath d='M0 14C20 2 40 2 60 14S100 26 120 14V26H0Z'/%3E%3C/svg%3E");
  --ola-abajo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='26' viewBox='0 0 120 26'%3E%3Cpath d='M0 12C20 24 40 24 60 12S100 0 120 12V0H0Z'/%3E%3C/svg%3E")}
.seccion.agua,.seccion.cielo,.cierre-luz.alba{padding-top:13vh;padding-bottom:12vh;
  -webkit-mask:var(--ola) 0 0/120px 26px repeat-x,linear-gradient(#000 0 0) 0 25px/100% calc(100% - 50px) no-repeat,var(--ola-abajo) 0 100%/120px 26px repeat-x;
  mask:var(--ola) 0 0/120px 26px repeat-x,linear-gradient(#000 0 0) 0 25px/100% calc(100% - 50px) no-repeat,var(--ola-abajo) 0 100%/120px 26px repeat-x}
.seccion.agua + .seccion,.seccion.cielo + .seccion{padding-top:9vh}

/* Agua profunda (cuenta y confirmación) */
.seccion.agua{background:radial-gradient(ellipse 120% 70% at 50% 25%,#5A88AE,#36607F 62%,#26475F);color:#EEF4F8;
  --foil:linear-gradient(180deg,#FFFFFF 0%,#E3ECF3 40%,#FFFFFF 55%,#C6D6E3 100%)}
body.nina .seccion.agua{background:radial-gradient(ellipse 120% 70% at 50% 25%,#B98993,#8E5E6A 62%,#6D4450)}
.agua .titulo-sec small,.agua .cuenta-pie,.agua .reloj-luz small{color:rgba(255,255,255,.86)}
.agua .titulo-sec::after{filter:brightness(0) invert(1);opacity:.8}
.agua .reloj-luz b{background:linear-gradient(180deg,#566E83,#7F96A9 28%,#9FB2C2 46%,#768DA1 60%,#526A7F 80%);-webkit-background-clip:text;background-clip:text}
.agua .reloj-luz div::before{filter:drop-shadow(0 10px 14px rgba(0,0,0,.28))}
.agua .reloj-luz div:last-child::after{border-color:rgba(255,255,255,.85)}
.agua .encaje-borde{filter:drop-shadow(0 12px 16px rgba(0,0,0,.25))}
.seccion.agua::before{opacity:.35;mix-blend-mode:screen}
/* ondas que se abren despacio desde el fondo del agua: la sección respira */
.seccion.agua::after{content:"";position:absolute;left:50%;bottom:-30%;width:160%;aspect-ratio:1;translate:-50% 0;z-index:0;pointer-events:none;border-radius:50%;
  background:repeating-radial-gradient(circle,rgba(255,255,255,0) 0 46px,rgba(255,255,255,.09) 47px 48px,rgba(255,255,255,0) 49px 96px);
  animation:marea 9s linear infinite}
@keyframes marea{from{transform:scale(1)}to{transform:scale(1.18)}}

/* Cielo claro (historia, padrinos, carta) */
.seccion.cielo{background:linear-gradient(180deg,var(--cielo),var(--papel-calido) 70%,var(--cielo))}

/* Amanecer cálido en el cierre */
.cierre-luz.alba{background:linear-gradient(180deg,#CFE0EE 0%,#E9EEF2 30%,#F8EDE2 62%,#FCF3EA 100%)}
body.nina .cierre-luz.alba{background:linear-gradient(180deg,#F1DDE1 0%,#F6ECEE 30%,#FAEFE6 62%,#FDF5EE 100%)}
.alba .halo{background:radial-gradient(circle,rgba(255,252,244,1),rgba(255,236,214,.6) 30%,rgba(255,236,214,0) 60%)}

@media (prefers-reduced-motion:reduce){.seccion.agua::after{animation:none}}
/* dentro del agua, las tarjetas blancas conservan la plata oscura en sus títulos */
.agua .papel,.agua .frase,.agua .reloj-luz{--foil:linear-gradient(180deg,#566E83 0%,#7F96A9 28%,#AFC0CE 46%,#768DA1 60%,#526A7F 80%,#71889C 100%)}

/* al terminar la onda se quita la máscara: vuelven las sombras completas de las tarjetas */
.contenido .aparece.onda-fin{-webkit-mask:none!important;mask:none!important}

/* ---------- Álbum de una página también en computador: la invitación es una columna y el libro abierto no cabe ---------- */
.album-mesa .album{width:min(340px,76vw,calc(70dvh * .72));transition:translate .9s cubic-bezier(.35,.6,.2,1)}
.album-mesa .album.abierto{translate:16% 0}
.album-mesa .hoja-album.vuelta{opacity:1}
.album-mesa .album .lomo{transition:left .9s cubic-bezier(.35,.6,.2,1)}
.album-mesa .album.abierto .lomo{left:calc(-100% - 10px);border-radius:10px}
.album-mesa .album.abierto .album-nav{left:0;translate:-16% 0}
.album-mesa .pag h4{font-size:clamp(30px,8.5vw,40px)}.album-mesa .pag p{font-size:clamp(15px,4vw,17px)}
.album-mesa .pag.tapa small{font-size:13px}.album-mesa .pag.tapa em{font-size:14px}

/* ---------- Citas en nácar: reflejos de concha que se mueven muy despacio, con grano de papel ---------- */
:root{--nacar:linear-gradient(125deg,#FFFFFF 0%,#ECF0FB 16%,#F9EAF1 32%,#E7F5F1 48%,#F1ECFA 64%,#FCF6EA 80%,#FFFFFF 100%)}
.frase{background:var(--grano) 0 0/260px padding-box,radial-gradient(ellipse 80% 55% at 50% 0%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%) padding-box,var(--nacar) 0 50%/260% 260% padding-box,var(--canto) border-box;
  animation:nacar 14s ease-in-out infinite alternate;box-shadow:0 18px 30px -20px rgba(var(--sombra-rgb),.5),inset 0 1px 0 rgba(255,255,255,.9)}
.cierre-luz .frase{background:var(--grano) 0 0/260px padding-box,radial-gradient(ellipse 80% 55% at 50% 0%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%) padding-box,var(--nacar) 0 50%/260% 260% padding-box,var(--canto) border-box}
@keyframes nacar{from{background-position:0 0,0 0,0% 30%,0 0}to{background-position:0 0,0 0,100% 70%,0 0}}
.frase blockquote{color:var(--tinta)}
.frase figcaption{color:var(--oro-texto)}
@media (prefers-reduced-motion:reduce){.frase{animation:none}}

/* ---------- Jerarquía de color en las letras (Yudi: "todas las letras son del mismo color") ----------
   títulos en azul océano con brillo de plata · etiquetas, horas y autores en azul agua vivo · firmas en azul intenso */
:root{--foil-azul:linear-gradient(180deg,#24496A 0%,#2F5F8A 30%,#7FA8C9 48%,#336796 62%,#22476A 100%);--foil:var(--foil-azul);
  --acento:#3A7CB0;--acento-hondo:#285F8E}
body.nina{--foil-azul:linear-gradient(180deg,#6C3443 0%,#8E4A5C 30%,#D7A2AE 48%,#9A5466 62%,#6A3242 100%);--foil:var(--foil-azul);--acento:#B0607A;--acento-hondo:#8A4458}
.agua .papel,.agua .frase,.agua .reloj-luz,.agua .rsvp-mesa{--foil:var(--foil-azul)}
.titulo-sec small,.po-arriba,.pt-arriba,.rsvp-sigla,.momento .hora,.itinerario .h,.bv-familias,.frase figcaption,.pl-tarjeta small,.rc-pie,.pl-sub small,#cierre-fecha,.po-fecha{color:var(--acento)}
.agua .titulo-sec small{color:rgba(255,255,255,.9)}
.agua .frase figcaption{color:var(--acento)}
.carta-bebe h3,.ct-firma,.pd-nombres i,.pt-para,.rc-nombre{color:var(--acento-hondo)}
.pd-nombres{color:var(--acento-hondo)}
.titulo-sec::after{filter:hue-rotate(0deg) saturate(1.6)}
.momento.oscuro .hora{color:var(--acento-hondo)}
.bv-texto,.ct-texto,.frase blockquote{color:#2F4558}
body.nina .bv-texto,body.nina .ct-texto,body.nina .frase blockquote{color:#4A3A40}

/* ---------- Programa: cada momento con su ícono en un medallón; al bajar el hilo los va despertando ---------- */
.contenido .itinerario{padding:52px 26px 44px}
.contenido .itinerario ol::before{left:28px;top:28px;bottom:28px}
.contenido .itinerario li{grid-template-columns:56px 1fr;gap:18px;align-items:center;padding:12px 0;text-align:left}
.contenido .itinerario li::after{content:none}
.itinerario .ico{position:relative;z-index:1;display:grid;place-items:center;width:56px;aspect-ratio:1;color:var(--acento);
  background:radial-gradient(circle closest-side,var(--papel-claro) 0 66%,transparent 67%),url(assets/encaje.svg) center/contain no-repeat;
  filter:grayscale(1) drop-shadow(0 4px 6px rgba(var(--sombra-rgb),.12));opacity:.45;transform:scale(.82);
  transition:transform .9s var(--ease-out),opacity .7s var(--ease-out),filter .9s var(--ease-out)}
.itinerario .ico svg{width:24px;height:24px}
.itinerario .ico::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--acento);opacity:0;pointer-events:none}
.itinerario .txt{display:flex;flex-direction:column;gap:2px;opacity:.3;transform:translateX(14px);transition:opacity .8s var(--ease-out) .1s,transform 1s var(--ease-out) .1s}
.itinerario .txt .h{text-align:left;font-family:var(--f-sans);font-weight:500;font-size:14px;letter-spacing:.14em;color:var(--acento)}
.itinerario .txt .q{font-size:21px;line-height:1.3;color:var(--tinta)}
.itinerario li.viva .ico{opacity:1;transform:none;filter:grayscale(0) drop-shadow(0 6px 10px rgba(var(--sombra-rgb),.2))}
.itinerario li.viva .ico::after{animation:despierta 1.2s var(--ease-out) .1s}
.itinerario li.viva .txt{opacity:1;transform:none}
@keyframes despierta{from{opacity:.9;transform:scale(.9)}to{opacity:0;transform:scale(1.7)}}
@media (prefers-reduced-motion:reduce){.itinerario .ico,.itinerario .txt{opacity:1;transform:none;filter:none}.itinerario li.viva .ico::after{animation:none}}

/* ---------- Botones que se ven: azul agua sólido con letra blanca y un reflejo que los cruza (Yudi: "los botones se pierden") ---------- */
:root{--boton:linear-gradient(180deg,#4482B3 0%,#2D5F89 100%);--boton-sombra:rgba(30,62,92,.55)}
body.nina{--boton:linear-gradient(180deg,#BC6F86 0%,#8E4A5C 100%);--boton-sombra:rgba(110,52,68,.5)}
.boton.lleno,.boton.destacado,.noche .boton.destacado,.contenido .boton.lleno{position:relative;overflow:hidden;background:var(--boton);color:#fff;border:1px solid rgba(255,255,255,.4);
  text-shadow:0 1px 1px rgba(0,0,0,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 22px -10px var(--boton-sombra)}
.boton.lleno .ico-sobre,.boton.destacado .ico-sobre,.boton.lleno svg{color:#fff}
.boton.lleno::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.38) 50%,transparent 62%) 140% 0/260% 100% no-repeat;animation:reflejo 6s var(--ease-in-out) 3s infinite}
@media (hover:hover){.boton.lleno:hover,.boton.destacado:hover{background:var(--boton);filter:brightness(1.08)}}
.boton:not(.lleno):not(.destacado){color:var(--acento-hondo);border:1.5px solid var(--acento);background:rgba(255,255,255,.75)}
.momento.oscuro .boton:not(.lleno){color:var(--acento-hondo);border-color:var(--acento);background:rgba(255,255,255,.7)}
@media (prefers-reduced-motion:reduce){.boton.lleno::after{animation:none}}

/* ---------- Tipografía "Clásica sagrada": Cinzel (títulos y etiquetas), Great Vibes (nombres), EB Garamond (textos) ----------
   Cinzel solo tiene mayúsculas: tamaños más contenidos y sin cursiva. Horas y botones siguen en Jost para no alterar "11:00 a.m." */
.titulo-sec h2{font-size:clamp(28px,8.2vw,40px);letter-spacing:.05em;line-height:1.15}
.titulo-sec small,.po-arriba,.pt-arriba,.rsvp-sigla,.frase figcaption,.pl-tarjeta small,.bv-familias,.autor,.pag.tapa small{font-family:var(--f-titulo);font-weight:500}
.momento h3{font-size:30px;letter-spacing:.05em}
.rsvp h3,.hoja h3{font-style:normal;font-size:clamp(26px,7.6vw,34px);letter-spacing:.04em}
.mot h3,.sr-tarjeta h3{font-size:clamp(26px,7.4vw,32px);letter-spacing:.04em}
.vestimenta .tipo{font-size:26px;letter-spacing:.05em}
.reloj-luz b{font-weight:500}
.pd-nombres{font-family:var(--f-serif);font-size:clamp(26px,7.4vw,32px)}
.pl-sub p,.frase blockquote,.ct-texto,.po-invita,.cuenta-pie,.pd-texto,.ticket-texto,.cl-texto,.bv-texto{font-family:var(--f-serif)}
.pl-sub p{font-weight:400}
.frase blockquote{font-weight:400;font-size:clamp(20px,5.8vw,23px)}
.frase::before{font-family:var(--f-serif)}
.po-nombre{font-size:clamp(78px,23vw,118px)}
.pl-tarjeta h2{font-size:clamp(64px,18vw,90px)}
.cierre-luz h2{font-size:clamp(62px,17vw,88px)}
.carta-bebe h3{font-size:clamp(46px,12.6vw,58px)}
.ct-firma{font-size:38px}
.itinerario .txt .q{font-family:var(--f-serif);font-style:italic}

/* el contenedor de la historia mide lo que la columna (la regla de la plantilla era para pantalla completa) */
#s-historia .historia{width:100%;max-width:100%;margin:0 auto}
/* páginas del álbum con el algodón limpio (sin borde rasgado) */
.pag.interior,.album .papel-dorso{background:var(--marfil) url(assets/algodon.jpg) 0 0/326px auto repeat}
/* la caligrafía (Great Vibes) se sale de la caja de cada letra y el metalizado solo pinta dentro de ella: aire alrededor para que no se corte */
.pl-tarjeta h2 .pal span{padding:.12em .22em;margin:-.12em -.22em}
.po-nombre,.cierre-luz h2,.rc-nombre{padding:.1em .25em;margin-left:-.25em;margin-right:-.25em}

/* ---------- Dónde y cuándo: cada tarjeta con su personalidad ---------- */
.contenido .momento{overflow:hidden}
.momento .m-foto{margin:-34px -24px 18px;height:200px;overflow:hidden;
  -webkit-mask:linear-gradient(#000 0 0) 0 0/100% calc(100% - 25px) no-repeat,var(--ola-abajo) 0 100%/120px 26px repeat-x;
  mask:linear-gradient(#000 0 0) 0 0/100% calc(100% - 25px) no-repeat,var(--ola-abajo) 0 100%/120px 26px repeat-x}
.momento .m-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 70%;transform:scale(1.08);transition:transform 2.4s var(--ease-out) .3s}
.momento.visto .m-foto img{transform:none}
.momento .hora,.momento p{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.momento p{flex-direction:column;gap:2px}
.m-mini{width:17px;height:17px;flex:none;color:var(--acento)}
.momento p .m-mini{margin-bottom:2px}
/* la celebración, en agua profunda con su medallón de brindis */
.contenido .momento.oscuro{color:#EEF4F8;--foil:linear-gradient(180deg,#FFFFFF 0%,#E3ECF3 40%,#FFFFFF 55%,#C6D6E3 100%);
  background:radial-gradient(ellipse 120% 80% at 50% 20%,#5A88AE,#36607F 62%,#26475F) padding-box,var(--canto) border-box}
body.nina .contenido .momento.oscuro{background:radial-gradient(ellipse 120% 80% at 50% 20%,#B98993,#8E5E6A 62%,#6D4450) padding-box,var(--canto) border-box}
.contenido .momento.oscuro::before{opacity:.12}
.momento.oscuro h3{color:#fff}
.momento.oscuro .hora,.momento.oscuro .m-mini,.momento.oscuro p small{color:rgba(255,255,255,.88)}
.momento.oscuro p{color:#fff}
.momento.oscuro .boton:not(.lleno){color:#fff;border-color:rgba(255,255,255,.75);background:rgba(255,255,255,.08)}
.m-ico{display:grid;place-items:center;width:84px;aspect-ratio:1;margin:0 auto 12px;color:var(--acento-hondo);
  background:radial-gradient(circle closest-side,var(--papel-claro) 0 64%,transparent 65%),url(assets/encaje.svg) center/contain no-repeat;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.25))}
.m-ico svg{width:34px;height:34px}
.momento.visto .m-ico{animation:gira-entra 1.6s var(--ease-out) .5s both}
@keyframes gira-entra{from{transform:rotate(-90deg) scale(.6);opacity:0}to{transform:none;opacity:1}}
.momento.oscuro .filete-doble{filter:brightness(2.2)}
@media (prefers-reduced-motion:reduce){.momento.visto .m-ico{animation:none}.momento .m-foto img{transform:none}}

/* ---------- Seda perlada dibujada (sin fotos con objetos): pliegues de luz que se deslizan despacio ---------- */
:root{--seda:linear-gradient(118deg,rgba(255,255,255,0) 8%,rgba(255,255,255,.95) 20%,rgba(222,230,239,.75) 29%,rgba(255,255,255,1) 39%,rgba(230,236,243,.7) 50%,rgba(255,255,255,.95) 61%,rgba(214,224,234,.65) 72%,rgba(255,255,255,.9) 84%,rgba(255,255,255,0) 96%);
  --seda-base:#F1F4F8}
body.nina{--seda:linear-gradient(118deg,rgba(255,255,255,0) 8%,rgba(255,255,255,.95) 20%,rgba(240,226,230,.75) 29%,rgba(255,255,255,1) 39%,rgba(243,232,235,.7) 50%,rgba(255,255,255,.95) 61%,rgba(236,220,225,.65) 72%,rgba(255,255,255,.9) 84%,rgba(255,255,255,0) 96%);--seda-base:#F7F0F2}
.frase,.cierre-luz .frase{background:radial-gradient(ellipse 80% 55% at 50% 0%,rgba(255,255,255,.85),rgba(255,255,255,0) 70%) padding-box,
  var(--seda) 0 50%/260% 260% padding-box,linear-gradient(var(--seda-base),var(--seda-base)) padding-box,var(--canto) border-box;
  background-blend-mode:normal;animation:seda 18s ease-in-out infinite alternate}
@keyframes seda{from{background-position:0 0,0% 40%,0 0,0 0}to{background-position:0 0,100% 60%,0 0,0 0}}
.mesa{background:var(--seda) 0 0/220% 220%,linear-gradient(var(--seda-base),var(--seda-base))}
@media (prefers-reduced-motion:reduce){.frase{animation:none}}

/* ---------- Citas con el amanecer del cierre (Yudi: "ese contraste es súper bonito"): cielo que se funde en durazno, con brillo de seda ---------- */
:root{--alba:linear-gradient(180deg,#CFE0EE 0%,#E9EEF2 34%,#F8EDE2 70%,#FCF3EA 100%)}
body.nina{--alba:linear-gradient(180deg,#F1DDE1 0%,#F6ECEE 34%,#FAEFE6 70%,#FDF5EE 100%)}
.frase,.cierre-luz .frase{background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(255,255,255,.7),rgba(255,255,255,0) 70%) padding-box,
  var(--seda) 0 50%/260% 260% padding-box,var(--alba) padding-box,var(--canto) border-box;background-blend-mode:normal,soft-light,normal,normal}
/* en el cierre (que ya es amanecer) la cita va un tono más cálida para no perderse */
.cierre-luz .frase{background:var(--seda) 0 50%/260% 260% padding-box,linear-gradient(180deg,#FFFFFF 0%,#FBF1E6 100%) padding-box,var(--canto) border-box;background-blend-mode:soft-light,normal,normal;
  box-shadow:0 18px 30px -18px rgba(150,110,70,.35),inset 0 1px 0 #fff}

/* ---------- Citas sobre seda perlada (referencia de Yudi): marfil y beige con pliegues de luz ----------
   (el color de fondo va solo en la última capa: si no, la regla entera se anula y la cita queda transparente) */
.frase,.cierre-luz .frase{background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(255,255,255,.5),rgba(255,255,255,0) 70%) padding-box,
  url(assets/perla.jpg) 0 50%/190% auto padding-box,linear-gradient(#EDE5DC,#EDE5DC) padding-box,var(--canto) border-box;
  border-width:2px;animation:pliegue 20s ease-in-out infinite alternate;
  box-shadow:0 22px 34px -18px rgba(90,70,50,.45),inset 0 1px 0 rgba(255,255,255,.9)}
.frase:nth-of-type(even){background-image:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(255,255,255,.5),rgba(255,255,255,0) 70%),url(assets/perla-b.jpg),linear-gradient(#EDE5DC,#EDE5DC),var(--canto)}
@keyframes pliegue{from{background-position:0 0,0% 50%,0 0,0 0}to{background-position:0 0,100% 50%,0 0,0 0}}
.frase blockquote{color:#2F4558}
.agua .frase{box-shadow:0 24px 40px -16px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.9)}
@media (prefers-reduced-motion:reduce){.frase{animation:none}}

/* ---------- Sobre de regalos con diseño: azul agua, forro de encaje, filete de plata, cinta de satén y sello de lacre ---------- */
.sr-cuerpo{background:url(assets/encaje-cielo.svg) 50% 30%/78% no-repeat,linear-gradient(180deg,#DCE7EF,#C9D9E6);
  box-shadow:0 30px 44px -22px rgba(30,62,92,.6)}
.sr-frente{background:linear-gradient(to top right,#3E6E96 49.6%,transparent 50%) left bottom/50.5% 100% no-repeat,
  linear-gradient(to top left,#36648B 49.6%,transparent 50%) right bottom/50.5% 100% no-repeat;filter:drop-shadow(0 -3px 4px rgba(0,0,0,.18))}
.sr-frente::after{background:url(assets/algodon.jpg) 0 0/326px auto repeat,linear-gradient(to top,#2E5A80,#4277A1);background-blend-mode:multiply}
/* filete de plata siguiendo la "V" del frente */
.sr-frente::before{content:"";position:absolute;left:0;right:0;bottom:0;height:56%;z-index:1;pointer-events:none;
  background:linear-gradient(162deg,transparent calc(50% - .8px),rgba(220,232,242,.9) 50%,transparent calc(50% + .8px)) left/50% 100% no-repeat,
    linear-gradient(-162deg,transparent calc(50% - .8px),rgba(220,232,242,.9) 50%,transparent calc(50% + .8px)) right/50% 100% no-repeat}
.sr-solapa i{background:url(assets/algodon.jpg) 0 0/326px auto repeat,linear-gradient(180deg,#5A88AE,#3A6A92);background-blend-mode:multiply;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.25))}
/* forro de encaje en la cara interior de la solapa (se ve al abrirse) */
.sr-solapa::after{content:"";position:absolute;inset:6% 8% 0;clip-path:polygon(0 0,100% 0,50% 92%);transform:rotateX(180deg);backface-visibility:hidden;
  background:url(assets/encaje.svg) 50% 0/120% no-repeat,#E4EDF4}
/* cinta de satén cruzando el sobre */
.sobre-regalo::after{content:"";position:absolute;left:-3%;right:-3%;top:58%;height:7%;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,#F4F7FA,#D4DFE8 45%,#FFFFFF 60%,#C7D5E1);box-shadow:0 3px 5px rgba(0,0,0,.2);transition:opacity .4s}
.sobre-regalo.abierto::after{opacity:0}
/* sello de lacre plateado con la inicial */
.sr-sello{width:21cqw;z-index:5;background:radial-gradient(circle at 35% 30%,#FFFFFF,#C9D6E1 40%,#8FA4B6 75%,#6E8597);color:#3F5A72;
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.25),inset 0 2px 3px rgba(255,255,255,.8),0 6px 10px rgba(0,0,0,.3);font-size:12cqw}
.sr-sello::after{content:"";position:absolute;inset:12%;border-radius:50%;border:1px solid rgba(63,90,114,.35)}
body.nina .sr-frente{background:linear-gradient(to top right,#A06474 49.6%,transparent 50%) left bottom/50.5% 100% no-repeat,linear-gradient(to top left,#955A6A 49.6%,transparent 50%) right bottom/50.5% 100% no-repeat}
body.nina .sr-frente::after{background:url(assets/algodon.jpg) 0 0/326px auto repeat,linear-gradient(to top,#7E4757,#A86C7C);background-blend-mode:multiply}
body.nina .sr-solapa i{background:url(assets/algodon.jpg) 0 0/326px auto repeat,linear-gradient(180deg,#B98993,#96606E);background-blend-mode:multiply}
body.nina .sr-cuerpo{background:url(assets/encaje-rosa.svg) 50% 30%/78% no-repeat,linear-gradient(180deg,#F3E6E9,#E8D4D9)}

/* el texto de la tarjeta no se asoma con el sobre cerrado */
.sobre-regalo .sr-tarjeta > *{transition:opacity .5s .9s}
.sobre-regalo:not(.abierto) .sr-tarjeta > *{opacity:0}

/* "Cómo llegar" sólidos: en la tarjeta clara, azul; en la de agua profunda, blanco con letra azul */
.contenido .momento .boton:not(.lleno){background:var(--boton);color:#fff;border:1px solid rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 18px -10px var(--boton-sombra)}
.contenido .momento.oscuro .boton:not(.lleno){background:#fff;color:var(--acento-hondo);border-color:#fff;box-shadow:0 10px 18px -8px rgba(0,0,0,.4)}
.momento .boton::before{content:"";display:inline-block;width:15px;height:15px;margin-right:8px;vertical-align:-2px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-6-6.5-11a6.5 6.5 0 0 1 13 0c0 5-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-6-6.5-11a6.5 6.5 0 0 1 13 0c0 5-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E") center/contain no-repeat}
.sobre-regalo:not(.abierto) .sr-tarjeta{opacity:0}
.sobre-regalo .sr-tarjeta{transition:transform 1.3s var(--ease-in-out) .7s,opacity .3s .5s}

/* ---------- "Se abrieron los cielos y vio al Espíritu de Dios descender como una paloma" (Mateo 3, 16) ----------
   el cielo se abre en un haz de luz, la paloma baja planeando por él y se posa con un resplandor; después llega la frase */
.pl-haz{position:absolute;left:50%;top:-10%;width:70%;height:0;translate:-50% 0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,1),rgba(255,255,255,.75) 40%,rgba(255,255,255,0));
  clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);filter:blur(10px);opacity:0}
.pl-paloma.activa .pl-haz{animation:haz 1.6s var(--ease-out) .1s forwards}
@keyframes haz{to{height:62%;opacity:.95}}
.pl-halo{position:absolute;left:50%;top:34%;width:min(90%,440px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(255,255,255,1),rgba(255,255,255,.6) 30%,rgba(255,255,255,0) 62%)}
.pl-paloma.activa .pl-halo{animation:halo 2.4s var(--ease-out) 3.3s forwards}
@keyframes halo{0%{opacity:0;scale:.5}40%{opacity:1}100%{opacity:.8;scale:1}}
.pl-paloma.activa .pl-ave{animation:desciende 3.6s cubic-bezier(.25,.6,.3,1) .5s both,flota 4s ease-in-out 4.1s infinite}
@keyframes desciende{
  0%{opacity:0;transform:translate(10px,-62vh) rotate(8deg) scale(.55)}
  15%{opacity:1}
  40%{transform:translate(-24px,-34vh) rotate(-5deg) scale(.72)}
  70%{transform:translate(14px,-10vh) rotate(3deg) scale(.9)}
  100%{opacity:1;transform:none}}
@keyframes flota{50%{transform:translateY(-7px)}}
.pl-paloma.activa .pl-sub p,.pl-paloma.activa .pl-sub small{animation-delay:3.7s}
.pl-paloma.activa .pl-sub small{animation-delay:4.1s}
@media (prefers-reduced-motion:reduce){.pl-paloma.activa .pl-haz,.pl-paloma.activa .pl-halo{animation:none;opacity:.8;height:62%}.pl-paloma.activa .pl-ave{animation:none;opacity:1}}
/* cielo azul que se abre: así el haz, el resplandor y la paloma blanca se distinguen */
.pl-cielo{filter:blur(18px) brightness(.8) saturate(.9)}
.pl-cielo::after{background:radial-gradient(ellipse 45% 30% at 50% 0%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%),
  linear-gradient(180deg,rgba(64,104,140,.92) 0%,rgba(98,136,168,.8) 38%,rgba(196,214,229,.75) 72%,rgba(240,245,249,.95) 100%)}
body.nina .pl-cielo::after{background:radial-gradient(ellipse 45% 30% at 50% 0%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%),
  linear-gradient(180deg,rgba(142,94,106,.9) 0%,rgba(176,128,140,.8) 38%,rgba(232,208,214,.75) 72%,rgba(249,242,244,.95) 100%)}
.pl-haz{filter:blur(14px)}
.pl-ave{filter:drop-shadow(0 0 18px rgba(255,255,255,.9)) drop-shadow(0 18px 18px rgba(20,40,60,.3))}
.pl-paloma .pl-sub p{color:var(--acento-hondo)}
.pl-paloma .pl-sub p{color:#1F3F5C;text-shadow:0 0 14px rgba(255,255,255,.95),0 0 4px rgba(255,255,255,.9)}
.pl-paloma .pl-sub small{color:#2B5276;text-shadow:0 0 10px rgba(255,255,255,.9)}
body.nina .pl-paloma .pl-sub p{color:#5A2A38}body.nina .pl-paloma .pl-sub small{color:#7A3E50}

/* =================================================================================================
   Rayas y óvalo festoneado (referencia de Yudi): rayas finas azul cielo, óvalo con festón y cruz de plata
   ================================================================================================= */
:root{--raya:#D6E0EE;--rayas:repeating-linear-gradient(90deg,#FFFFFF 0 9px,var(--raya) 9px 15px);--ovalo:url(assets/ovalo.svg)}
body.nina{--raya:#F0DCE1;--ovalo:url(assets/ovalo-rosa.svg)}

/* fondo de la mesa y de la apertura */
.mesa{background:var(--rayas)}
.mesa::before{background:radial-gradient(ellipse 70% 60% at 50% 48%,rgba(255,255,255,.55),rgba(255,255,255,0) 75%)}

/* tarjeta del nombre: óvalo festoneado sobre rayas, con la cruz arriba */
.pl-nombre{background:var(--rayas)}
.pl-tarjeta{width:min(92%,380px);aspect-ratio:400/544;padding:0 13%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--ovalo) center/contain no-repeat;box-shadow:none;border:0;filter:drop-shadow(0 18px 24px rgba(var(--sombra-rgb),.18))}
.pl-tarjeta::before,.pl-tarjeta::after{content:none}
.pl-cruz{display:block;width:22px;margin:0 auto 14px}
.pl-tarjeta h2{font-size:clamp(52px,15vw,72px)}
.pl-tarjeta p{font-size:17px;margin-bottom:18px}

/* secciones claras (historia, padrinos, carta) sobre rayas, con un velo blanco al centro para que se lea */
.seccion.cielo{background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(255,255,255,.88),rgba(255,255,255,.55) 70%,rgba(255,255,255,.35)),var(--rayas)}

/* portada: el nombre dentro de un óvalo festoneado que asoma bajo la foto */
.po-textos{margin:0 auto;width:min(92%,400px);aspect-ratio:400/544;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 12% 2%;margin-bottom:calc(6vh + env(safe-area-inset-bottom));background:var(--ovalo) center/contain no-repeat;
  filter:drop-shadow(0 18px 24px rgba(var(--sombra-rgb),.2))}
.po-textos::before{content:"";display:block;width:20px;height:30px;margin-bottom:10px;background:url(assets/cruz.svg) center/contain no-repeat}
.po-nombre{font-size:clamp(60px,17vw,84px)}
.po-invita{font-size:18px;max-width:22ch}
.po-fecha{font-size:13px;letter-spacing:.12em}
.portada-luz{background:var(--rayas)}
.portada-luz .bajar{display:none}

/* fecha de la portada en dos líneas, dentro del óvalo */
.po-fecha{line-height:1.7;max-width:100%}

/* escena de la paloma: cielo claro de mañana (antes se veía oscuro) */
.pl-cielo{filter:blur(18px) brightness(1.05) saturate(.9)}
.pl-cielo::after{background:radial-gradient(ellipse 45% 30% at 50% 0%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),
  linear-gradient(180deg,rgba(150,190,222,.9) 0%,rgba(186,212,234,.8) 40%,rgba(226,237,246,.85) 75%,rgba(248,251,253,.97) 100%)}
body.nina .pl-cielo::after{background:radial-gradient(ellipse 45% 30% at 50% 0%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),
  linear-gradient(180deg,rgba(226,176,190,.9) 0%,rgba(238,204,213,.8) 40%,rgba(246,229,233,.85) 75%,rgba(252,248,249,.97) 100%)}

/* ---------- Ángel de papel con el mensaje para los invitados ---------- */
#s-invitados{background:var(--rayas)}
.angel{position:relative;width:min(94%,400px);aspect-ratio:400/560;margin:0 auto;background:url(assets/angel.svg) center/contain no-repeat}
.angel-txt{position:absolute;left:25%;right:25%;top:47%;bottom:4%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.angel-txt h3{margin:0 0 6px;font-family:var(--f-firma);font-weight:400;font-size:clamp(28px,8vw,36px);line-height:1.05;color:var(--acento-hondo)}
.angel-txt p{margin:0;font-size:clamp(14px,3.8vw,16px);line-height:1.4;color:#2F4558}
.angel-txt .mi-firma{margin-top:8px;font-family:var(--f-firma);font-size:clamp(22px,6vw,26px);color:var(--acento-hondo)}
.angel-lazo{position:absolute;left:36%;right:36%;top:44.5%;height:1.6%;background:linear-gradient(180deg,#D9C08A,#B8954F 50%,#E2CC9A);border-radius:2px;box-shadow:0 2px 3px rgba(0,0,0,.15)}
.angel-lazo::before,.angel-lazo::after{content:"";position:absolute;top:50%;width:30%;aspect-ratio:1.6;border:2.5px solid #C2A061;border-radius:50%/60% 60% 40% 40%;translate:0 -50%}
.angel-lazo::before{left:42%;rotate:-25deg}.angel-lazo::after{left:62%;rotate:25deg}
.angel.aparece{transform:translateY(40px) rotate(-4deg)}
.angel.aparece.visto{transform:none;animation:mece-angel 7s ease-in-out 1.5s infinite}
@keyframes mece-angel{50%{rotate:1.5deg}}
@media (prefers-reduced-motion:reduce){.angel.aparece.visto{animation:none}}

/* ángel grande: ocupa la columna y el texto empieza bajo el lazo */
#s-invitados{padding-left:6px;padding-right:6px}
.angel{width:min(100%,500px)}
.angel-txt{left:20%;right:20%;top:49%;bottom:3%}
.angel-txt h3{font-size:clamp(34px,10vw,46px)}
.angel-txt p{font-size:clamp(16px,4.6vw,20px);line-height:1.45}
.angel-txt .mi-firma{font-size:clamp(26px,7.4vw,34px)}
/* sin rayas detrás del ángel: cielo liso y suave, para que el papel blanco destaque */
#s-invitados{background:radial-gradient(ellipse 80% 60% at 50% 45%,#FFFFFF,var(--cielo) 70%,var(--cielo-osc))}
/* el texto va dentro del vestido del ángel, que se ensancha hacia abajo: más angosto arriba y centrado en la parte baja */
.angel-txt{left:27%;right:27%;top:55%;bottom:7%}
.angel-txt h3{font-size:clamp(30px,8.6vw,40px)}
.angel-txt p{font-size:clamp(15px,4.2vw,18px)}
.angel-txt .mi-firma{font-size:clamp(24px,6.8vw,30px)}
/* la letra se mide con el ángel (cqw): cabe igual en cualquier pantalla */
.angel{container-type:inline-size}
.angel-txt{left:25%;right:25%;top:52%;bottom:5%}
.angel-txt h3{font-size:7.4cqw;white-space:nowrap}
.angel-txt p{font-size:3.9cqw;line-height:1.4}
.angel-txt .mi-firma{font-size:6cqw;margin-top:2.4cqw;white-space:nowrap}
/* cita del cierre más clara: blanco luminoso con la seda perlada apenas asomando */
.cierre-luz .frase{background:linear-gradient(rgba(255,255,255,.78),rgba(255,255,255,.78)) padding-box,url(assets/perla.jpg) 0 50%/190% auto padding-box,linear-gradient(#FFFFFF,#FFFFFF) padding-box,var(--canto) border-box;
  box-shadow:0 18px 30px -20px rgba(120,95,70,.3),inset 0 1px 0 #fff}

/* =================================================================================================
   Niña completamente en rosa (Yudi: "esa mezcla de azul con rosado no sale nada"): nada de azul en su versión
   ================================================================================================= */
body.nina{
  --tinta:#5E3A45;--tinta-suave:#86626C;--tinta-media:#6E4652;--tinta-osc:#4A2C36;--tinta-rgb:94,58,69;
  --oro:#C9A3AC;--oro-texto:#8E5A68;--oro-titulo:#9A6070;--oro-claro:#EBD5DA;--oro-vivo:#D8B5BD;--oro-rgb:201,163,172;--oro-claro-rgb:235,213,218;
  --sombra-rgb:110,60,75;--marfil:#FDF9FA;--papel-claro:#FFFDFD;--marfil-rgb:253,249,250;
  --canto:linear-gradient(135deg,#F1DCE1,#C9A0AA 30%,#FBEFF2 50%,#B88E99 70%,#EBD2D8);
  --raya:#F2DDE2;
}
body.nina .bv-texto,body.nina .ct-texto,body.nina .frase blockquote,body.nina .angel-txt p,body.nina .itinerario .txt .q{color:#4A2C36}
/* imágenes con agua o luz azul: pasadas a rosa */
body.nina .medalla img,body.nina .po-foto,body.nina #pl-pila-img,body.nina .m-foto img,body.nina .pl-cielo,body.nina .pag.interior img[src*="pila"]{filter:hue-rotate(150deg) saturate(.75)}
body.nina .pl-cielo{filter:blur(18px) brightness(1.05) hue-rotate(150deg) saturate(.75)}
/* encajes, adornos, cruz, sello y medallones en rosa */
body.nina .ec-frente,body.nina .titulo-sec::after,body.nina .pl-cruz,body.nina .po-textos::before,body.nina .itinerario .ico,body.nina .m-ico,body.nina .reloj-luz div::before,body.nina .sr-cuerpo{filter:hue-rotate(150deg) saturate(1.2)}
body.nina .itinerario li.viva .ico{filter:hue-rotate(150deg) saturate(1.2) drop-shadow(0 6px 10px rgba(110,60,75,.2))}
body.nina .cl-firma,body.nina .sr-sello{background:radial-gradient(circle at 35% 30%,#FFFFFF,#E8C9D0 40%,#C08C99 75%,#9C6A77);color:#5E3A45}
body.nina .seccion.cielo{background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(255,255,255,.88),rgba(255,255,255,.55) 70%,rgba(255,255,255,.35)),var(--rayas)}
body.nina #s-invitados{background:radial-gradient(ellipse 80% 60% at 50% 45%,#FFFFFF,#F5E8EA 70%,#ECD7DB)}
body.nina .angel{filter:hue-rotate(150deg)}
body.nina .angel-txt{filter:hue-rotate(-150deg)}
body.nina .album .lomo{background:linear-gradient(135deg,#E6CDD1,#C9A3A9 60%,#B08890)}
body.nina .mesa::after{filter:hue-rotate(150deg) drop-shadow(0 18px 22px rgba(110,60,75,.14))}
body.nina .encaje-borde{filter:drop-shadow(0 12px 14px rgba(110,60,75,.16))}
/* niña: rayas rosadas también en la portada; íconos con encaje rosa (sin girar el color); marco de la foto en rosa plata */
body.nina{--rayas:repeating-linear-gradient(90deg,#FFFFFF 0 9px,#F2DDE2 9px 15px)}
body.nina .itinerario .ico,body.nina .itinerario li.viva .ico,body.nina .m-ico{filter:drop-shadow(0 6px 10px rgba(110,60,75,.18));
  background:radial-gradient(circle closest-side,#FFFDFD 0 64%,transparent 65%),url(assets/encaje-rosa.svg) center/contain no-repeat}
body.nina .itinerario .ico:not(li.viva .ico){filter:grayscale(1);opacity:.45}
body.nina .reloj-luz div::before{filter:drop-shadow(0 8px 10px rgba(0,0,0,.18));background:radial-gradient(circle closest-side,#FFFDFD 0 58%,transparent 59%),url(assets/encaje-rosa.svg) center/contain no-repeat}
body.nina .foto-arco,body.nina .tapa-foto img{background:linear-gradient(135deg,#F1DCE1,#B88E99 40%,#FBEFF2 60%,#A87C88)}

/* =================================================================================================
   Niña en rosa bebé, fresco y luminoso (Yudi: "ese vinotinto es como de señora"): sin vino ni malva
   ================================================================================================= */
body.nina{
  --tinta:#5C4A50;--tinta-suave:#7D6A70;--tinta-media:#6A565C;--tinta-osc:#4A3A40;--tinta-rgb:92,74,80;
  --acento:#D0708E;--acento-hondo:#B5577A;
  --foil-azul:linear-gradient(180deg,#B5577A 0%,#C9688A 30%,#EEB0C3 48%,#CC6B8D 62%,#B0527A 100%);--foil:var(--foil-azul);
  --boton:linear-gradient(180deg,#EC9AB2 0%,#D2718F 100%);--boton-sombra:rgba(200,95,130,.45);
  --oro:#E3B3C0;--oro-texto:#B5577A;--oro-titulo:#C2607F;--oro-rgb:227,179,192;--sombra-rgb:180,90,120;
  --canto:linear-gradient(135deg,#FBE3EA,#E4A9B9 30%,#FFF4F7 50%,#DB9AAC 70%,#F7D9E1);
  --cielo:#FCEBF0;--cielo-osc:#F7D9E2;--lino:#FDF4F6;--raya:#F8DCE4;
  --rayas:repeating-linear-gradient(90deg,#FFFFFF 0 9px,#F8DCE4 9px 15px);--noche:#E9A3B7;--noche-claro:#F6C9D5}
body.nina .bv-texto,body.nina .ct-texto,body.nina .frase blockquote,body.nina .angel-txt p,body.nina .itinerario .txt .q{color:#4A3A40}
/* secciones de color: rosa bebé con letras blancas */
body.nina .seccion.agua{background:radial-gradient(ellipse 120% 70% at 50% 25%,#F6B6C8,#E893AB 62%,#D97B97)}
body.nina .contenido .momento.oscuro{background:radial-gradient(ellipse 120% 80% at 50% 20%,#F6B6C8,#E893AB 62%,#D97B97) padding-box,var(--canto) border-box}
body.nina .pag.tapa{background:url(assets/algodon.jpg) 0 0/326px auto repeat,radial-gradient(ellipse at 40% 28%,#F6B6C8,#E893AB 60%,#D97B97);background-blend-mode:multiply}
body.nina .sr-frente{background:linear-gradient(to top right,#EC9AB2 49.6%,transparent 50%) left bottom/50.5% 100% no-repeat,linear-gradient(to top left,#E58FA8 49.6%,transparent 50%) right bottom/50.5% 100% no-repeat}
body.nina .sr-frente::after{background:url(assets/algodon.jpg) 0 0/326px auto repeat,linear-gradient(to top,#D9809B,#F0A7BC);background-blend-mode:multiply}
body.nina .sr-solapa i{background:url(assets/algodon.jpg) 0 0/326px auto repeat,linear-gradient(180deg,#F6B6C8,#E593AB);background-blend-mode:multiply}
body.nina .cl-firma,body.nina .sr-sello{background:radial-gradient(circle at 35% 30%,#FFFFFF,#F7D3DD 40%,#E6A1B5 75%,#D4859C);color:#B5577A}
body.nina .album .lomo{background:linear-gradient(135deg,#FBD5DF,#EDA8BB 60%,#DE8EA5)}
body.nina .foto-arco{background:linear-gradient(135deg,#FBE3EA,#E4A9B9 40%,#FFF4F7 60%,#DB9AAC)}
/* el ángel, con su propia versión rosada (sin filtros de color) */
body.nina .angel{filter:none;background-image:url(assets/angel-rosa.svg)}
body.nina .angel-txt{filter:none}
body.nina .sr-cuerpo{filter:none;background:url(assets/encaje-rosa.svg) 50% 30%/78% no-repeat,linear-gradient(180deg,#FDEFF3,#F7D9E2)}
/* niña: el cielo de la paloma ya es rosado; el giro de color lo volvía verde */
body.nina .pl-cielo{filter:blur(18px) brightness(1.05) saturate(.6)}
/* niña: el álbum sin azul (reverso con encaje rosa, esquineros rosados, foto de preparativos en rosa) */
body.nina .album .dorso{background:url(assets/encaje-rosa.svg) center/88% no-repeat,url(assets/algodon.jpg) 0 0/326px auto repeat,#FCEBF0}
body.nina .foto-album i{background:linear-gradient(135deg,#E8A3B7 50%,transparent 50%)}
body.nina .foto-album img[src*="preparativos"],body.nina .foto-album img[src*="pila"]{filter:hue-rotate(150deg) saturate(.7)}
body.nina .foto-album img{outline-color:rgba(227,179,192,.7)}
/* niña: frase de la paloma en rosa vivo (sin vinotinto) y todos los encajes blancos con borde rosado */
body.nina .pl-paloma .pl-sub p{color:#B5577A;text-shadow:0 0 14px rgba(255,255,255,.95),0 0 4px rgba(255,255,255,.9)}
body.nina .pl-paloma .pl-sub small{color:#D0708E}
body.nina .tapa-foto{background-image:url(assets/encaje-nina.svg)}
body.nina .ec-frente{filter:none}
body.nina .titulo-sec::after,body.nina .pl-cruz,body.nina .po-textos::before{filter:hue-rotate(150deg) saturate(1.2)}
body.nina .mesa::after{filter:drop-shadow(0 18px 22px rgba(180,90,120,.14));background:
  url(assets/encaje-nina.svg) calc(50% - 560px) 8%/460px no-repeat,url(assets/encaje-rosa.svg) calc(50% - 600px) 4%/460px no-repeat,
  url(assets/encaje-nina.svg) calc(50% + 560px) 92%/420px no-repeat,url(assets/encaje-rosa.svg) calc(50% + 600px) 96%/420px no-repeat}
body.nina .reloj-luz div::before{background:radial-gradient(circle closest-side,#FFFDFD 0 58%,transparent 59%),url(assets/encaje-nina.svg) center/contain no-repeat}
body.nina .itinerario .ico,body.nina .itinerario li.viva .ico,body.nina .m-ico{background:radial-gradient(circle closest-side,#FFFDFD 0 64%,transparent 65%),url(assets/encaje-nina.svg) center/contain no-repeat}