:root{ --paper:#F6EEE3; --ink:#3A1A1F; --accent:#7A2433; --gold:#B8924A; --soft:#EADCC8; --env:#7A2433; --env-dark:#5E1A26; --card:#FFFBF5; --script:"Pinyon Script","Snell Roundhand","Apple Chancery",cursive; --serif:"Cormorant Garamond","Cormorant",Georgia,"Times New Roman",serif; --mono:"Courier Prime","Courier New",monospace; box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); } html[data-style="hacienda"]{--paper:#F6EEE3;--ink:#3A1A1F;--accent:#7A2433;--gold:#B8924A;--soft:#EADCC8;--env:#7A2433;--env-dark:#5E1A26;--card:#FFFBF5} html[data-style="salvia"]{--paper:#F1F3EC;--ink:#26332A;--accent:#55694F;--gold:#A88B4E;--soft:#DDE3D4;--env:#7E9275;--env-dark:#5B6F55;--card:#FBFCF8} html[data-style="noche"]{--paper:#171522;--ink:#EFE7D6;--accent:#D2B06B;--gold:#D2B06B;--soft:#26233A;--env:#2A2640;--env-dark:#1E1B2E;--card:#201D30} html[data-style="viaje"]{--paper:#F7F1E6;--ink:#22324A;--accent:#22324A;--gold:#B4613D;--soft:#E8D9BF;--env:#22324A;--env-dark:#1A2638;--card:#FBF8F1} html[data-style="olivo"]{--paper:#F4EEE4;--ink:#45362A;--accent:#5F6B47;--gold:#A8864F;--soft:#E7DFD1;--env:#E9E0D0;--env-dark:#D6CBB8;--card:#FBF8F2} html[data-style="estuche"]{--paper:#F7F1EA;--ink:#4A1424;--accent:#6E1B2F;--gold:#B08D57;--soft:#EADDCF;--env:#5A1424;--env-dark:#3E0D19;--card:#FFFBF6} html[data-style="periodico"]{--paper:#E6D8B4;--ink:#17130E;--accent:#17130E;--gold:#9E2416;--soft:#DDD2B8;--env:#1F1A14;--env-dark:#000;--card:#F4ECD8} html[data-style="playa"]{--paper:#FBF6EC;--ink:#1E4A5A;--accent:#1A8FA3;--gold:#D9A866;--soft:#EAF4F2;--env:#1A8FA3;--env-dark:#0E5E73;--card:#FFFFFF} html[data-style="invierno"]{--paper:#F3F6F9;--ink:#1F2F48;--accent:#2F4A73;--gold:#8FA6C0;--soft:#E3EAF2;--env:#2F4A73;--env-dark:#1F2F48;--card:#FFFFFF} html[data-style="otono"]{--paper:#FBF3E6;--ink:#4A2716;--accent:#A9431E;--gold:#C98A2B;--soft:#F1E2CB;--env:#A9431E;--env-dark:#6E2A12;--card:#FFFAF2} html[data-style="bosque"]{--paper:#F3F4EC;--ink:#1F3324;--accent:#2E5233;--gold:#B39248;--soft:#E3E8D8;--env:#2E5233;--env-dark:#1F3324;--card:#FBFBF5} html[data-style="sakura"]{--paper:#FFF7F9;--ink:#3B2741;--accent:#D9487A;--gold:#F0A04B;--soft:#FBE3EA;--env:#D9487A;--env-dark:#9E2D5A;--card:#FFFFFF} html[data-style="jardin"]{--paper:#FBF7F1;--ink:#4E3E40;--accent:#A85D6B;--gold:#9AAE97;--soft:#F5E6E2;--env:#E8C7C3;--env-dark:#C99A98;--card:#FFFDF9} html[data-style="gala"]{--paper:#0D0D0F;--ink:#E9E2D2;--accent:#C9A04E;--gold:#C9A04E;--soft:#1A1A1D;--env:#141416;--env-dark:#0A0A0B;--card:#141416} *,*::before,*::after{box-sizing:inherit} html{scroll-padding-top:env(safe-area-inset-top,0px)} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:19px;line-height:1.6; transition:background .5s,color .5s;-webkit-font-smoothing:antialiased} body.locked{overflow:hidden;height:100%} a{color:inherit} /* ---------- Sobre ---------- */ #intro{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px; background:var(--paper);padding:24px;padding-top:calc(24px + env(safe-area-inset-top,0px))} .to{text-align:center} .to .para{font-size:.95rem;letter-spacing:.08em;opacity:.7} .to .fam{font-family:var(--script);font-size:2.4rem;line-height:1.1;color:var(--accent)} .env{position:relative;width:min(84vw,380px);aspect-ratio:4/3;perspective:1200px;cursor:pointer;border:none;background:none;padding:0} .env .back{position:absolute;inset:0;background:var(--env-dark);border-radius:6px} .env .letter{position:absolute;left:6%;right:6%;top:8%;height:84%;background:var(--card);border-radius:4px; display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.12)} .env .letter .s{font-family:var(--script);font-size:clamp(1.8rem,8vw,2.6rem);color:var(--accent);line-height:1} .env .letter .d{font-size:.8rem;letter-spacing:.2em;margin-top:6px;opacity:.7} .env .front{position:absolute;inset:0;background:var(--env);border-radius:6px; clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%)} .env .front::after{content:"";position:absolute;inset:0;background: linear-gradient(to top right,transparent 49.6%,rgba(0,0,0,.08) 50%,transparent 50.4%), linear-gradient(to top left,transparent 49.6%,rgba(0,0,0,.08) 50%,transparent 50.4%)} .env .flap{position:absolute;left:0;right:0;top:0;height:62%;background:var(--env);transform-origin:top center; clip-path:polygon(0 0,100% 0,50% 100%);z-index:3;backface-visibility:hidden;filter:brightness(1.06)} .seal{position:absolute;left:50%;top:58%;width:74px;height:74px;margin:-37px 0 0 -37px;z-index:4;border-radius:50%; background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--gold) 80%,white),var(--gold) 55%,color-mix(in srgb,var(--gold) 70%,black)); display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,0,0,.25); font-family:var(--script);font-size:1.7rem;color:var(--env-dark)} .seal::before{content:"";position:absolute;inset:6px;border-radius:50%;border:1px solid rgba(0,0,0,.18)} .tap{font-size:.95rem;letter-spacing:.06em;opacity:.75;animation:pulse 2.4s ease-in-out infinite} @keyframes pulse{50%{opacity:.35}} /* ---------- Contenido ---------- */ main{max-width:620px;margin:0 auto;padding:0 22px 110px;text-align:center} section{padding:56px 0 8px} .sprig{display:block;margin:0 auto;width:180px;height:auto;color:var(--gold)} .sprig path{fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round} .hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:40px} .hero .pre{font-size:1rem;letter-spacing:.24em;opacity:.75} .names{font-family:var(--script);font-weight:400;color:var(--accent);font-size:clamp(4rem,20vw,7rem);line-height:.95;margin:.25em 0 .1em} .names .amp{display:block;font-size:.45em;color:var(--gold);margin:.1em 0} .hero .when{font-size:1.25rem;font-weight:500} .hero .where{font-style:italic;opacity:.8} .scroll{margin-top:40px;font-size:.85rem;opacity:.55} .parents{font-style:italic;max-width:42ch;margin:0 auto} .parents p{margin:0 0 18px} .parents strong{font-style:normal;font-weight:600;display:block} .count{display:flex;justify-content:center;gap:clamp(14px,5vw,34px);margin-top:18px} .count div{min-width:58px} .count b{display:block;font-size:clamp(2.2rem,10vw,3rem);font-weight:500;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums} .count span{font-size:.85rem;opacity:.7} h2{font-family:var(--script);font-weight:400;font-size:clamp(2.6rem,11vw,3.4rem);color:var(--accent);margin:0 0 18px;line-height:1.1} .ev{position:relative;padding:26px 0} .ev + .ev{border-top:1px solid color-mix(in srgb,var(--gold) 45%,transparent)} .ev .t{font-size:2.2rem;font-weight:500;line-height:1} .ev .k{font-size:1.25rem;font-weight:600;margin-top:8px} .ev .p{font-style:italic;opacity:.85} .ev .acts{display:flex;justify-content:center;gap:10px;margin-top:14px;flex-wrap:wrap} .btn{display:inline-block;font-family:var(--serif);font-size:1rem;font-weight:600;padding:10px 20px;border-radius:999px; border:1px solid var(--accent);color:var(--accent);background:transparent;text-decoration:none;cursor:pointer} .btn.solid{background:var(--accent);color:var(--paper)} .btn:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,.env:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .dress{font-size:1.35rem;font-weight:600} .note{font-style:italic;opacity:.8;max-width:40ch;margin:6px auto 0} .gift{margin-top:18px} .gift .lbl{opacity:.75} .gift .v{font-size:1.2rem;font-weight:600} /* RSVP */ .rsvp{background:var(--card);border-radius:18px;padding:30px 22px;margin-top:10px;text-align:center; border:1px solid color-mix(in srgb,var(--gold) 40%,transparent)} .rsvp .fam{font-family:var(--script);font-size:2.2rem;color:var(--accent);line-height:1.1} .rsvp .pases{margin:6px 0 20px} .rsvp .pases b{font-size:1.4rem} .choice{display:flex;gap:10px;justify-content:center;margin-bottom:18px} .choice label{flex:1;max-width:160px;border:1px solid color-mix(in srgb,var(--ink) 25%,transparent);border-radius:12px;padding:12px 8px;cursor:pointer;font-weight:500} .choice input{position:absolute;opacity:0;pointer-events:none} .choice label:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)} .fld{text-align:left;margin-top:14px} .fld label{display:block;font-weight:600;margin-bottom:6px} .fld select,.fld textarea,.fld input{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--paper); border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);border-radius:10px;padding:11px 12px} .fld textarea{min-height:80px;resize:vertical} .deadline{font-size:.95rem;opacity:.75;margin-top:14px} .thanks{display:none} .thanks .big{font-family:var(--script);font-size:2.8rem;color:var(--accent);line-height:1.1} footer{padding:60px 0 20px} footer .tag{font-size:1.2rem;letter-spacing:.06em;color:var(--gold)} footer .made{font-size:.85rem;opacity:.5;margin-top:24px} [hidden]{display:none!important} @media (prefers-reduced-motion:reduce){.tap{animation:none}} .msg{max-width:32ch;text-align:center;font-size:1.15rem} .rsvp-err{color:#B3261E;font-size:.95rem;margin-top:10px;min-height:1em} .env:disabled{cursor:progress} /* Fotos */ .arco{width:min(64vw,300px);aspect-ratio:3/4;margin:26px auto 30px;border-radius:999px 999px 0 0;overflow:hidden; outline:1px solid color-mix(in srgb,var(--gold) 60%,transparent);outline-offset:8px} .arco img{width:100%;height:100%;object-fit:cover;display:block} .dress-fotos{display:flex;justify-content:center;gap:12px;margin-top:18px} .dress-fotos img{width:min(38vw,150px);aspect-ratio:3/4;object-fit:cover;border-radius:6px} .galeria{display:grid;grid-template-columns:1fr 1fr;gap:8px} .galeria button{padding:0;border:0;background:none;cursor:zoom-in;display:block;overflow:hidden;border-radius:4px} .galeria img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/5} .galeria .ancha{grid-column:span 2} .galeria .ancha img{aspect-ratio:3/2} .visor{position:fixed;inset:0;z-index:50;background:rgba(10,8,12,.94);display:flex;align-items:center;justify-content:center; padding:calc(20px + env(safe-area-inset-top,0px)) 16px calc(20px + env(safe-area-inset-bottom,0px))} .visor img{max-width:100%;max-height:100%;object-fit:contain} .visor button{position:absolute;background:none;border:0;color:#fff;font-size:2.4rem;line-height:1;padding:14px;cursor:pointer;opacity:.85} .visor .cerrar{top:calc(8px + env(safe-area-inset-top,0px));right:8px;font-size:2rem} .visor .ant{left:4px}.visor .sig{right:4px} /* ---------- Escena fotográfica (estilos con fotos) ---------- */ .foto-intro{position:fixed;inset:0;z-index:30;overflow:hidden;background:#8E7C68} .foto-intro .velo{position:absolute;inset:-40px;background-size:cover;background-position:center;filter:blur(30px) brightness(.85)} .foto-lamina{position:absolute;overflow:hidden} .foto-escena{position:absolute;inset:0;will-change:transform,filter,opacity} .foto-escena img{position:absolute;inset:0;width:100%;height:100%;display:block} #fotoSobre{cursor:pointer;animation:respira 22s ease-in-out infinite alternate;transform-origin:53% 55%} @keyframes respira{to{transform:scale(1.045)}} #fotoCarta{opacity:0;pointer-events:none} .foto-luz{position:absolute;inset:-20%;pointer-events:none;mix-blend-mode:soft-light;opacity:.55; background:radial-gradient(40% 30% at 30% 30%,rgba(255,244,220,.9),transparent 70%);animation:luzMov 14s ease-in-out infinite alternate} @keyframes luzMov{to{transform:translate(8%,6%)}} .papel{position:absolute;left:0;top:0;transform-origin:0 0;color:#45362A;text-align:center;mix-blend-mode:multiply;pointer-events:none;font-family:var(--serif)} .papel .dest{position:absolute;left:15%;top:12%;width:58%} .papel .dest .para{font-style:italic;font-size:38px;color:#6E5E4E} .papel .dest .quien{font-family:var(--script);font-size:84px;line-height:1.1} .papel .interior{position:absolute;left:9%;right:9%;top:30%;bottom:6%;display:flex;flex-direction:column;align-items:center} .papel .interior>*{opacity:0;transform:translateY(14px);transition:opacity 1.2s ease,transform 1.2s ease} .foto-intro.abierta .papel .interior>*{opacity:1;transform:none} .papel .interior>*:nth-child(2){transition-delay:.15s}.papel .interior>*:nth-child(3){transition-delay:.3s} .papel .interior>*:nth-child(4){transition-delay:.45s}.papel .interior>*:nth-child(n+5){transition-delay:.7s} .papel .c-pre{font-size:27px;letter-spacing:.34em;color:#8C7560} .papel .c-nombre{font-family:var(--script);font-size:118px;line-height:1.05;margin-top:30px;white-space:nowrap} .papel .c-y{font-style:italic;font-size:58px;color:#9A7847;margin:4px 0} .papel .c-fecha{font-size:36px;letter-spacing:.06em;margin-top:44px} .papel .c-lugar{font-style:italic;font-size:32px;color:#6E5E4E;margin-top:8px} .papel .c-linea{width:110px;height:1px;background:#B8A58A;margin:40px auto 0} .papel .c-hora{font-size:30px;color:#6E5E4E;margin-top:34px;letter-spacing:.03em} .foto-brillo{position:absolute;width:26%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(.4);opacity:0;pointer-events:none; background:radial-gradient(circle,rgba(255,236,200,.9),rgba(255,236,200,0) 65%);mix-blend-mode:screen} .foto-pie{position:absolute;left:0;right:0;bottom:calc(26px + env(safe-area-inset-bottom,0px));text-align:center;z-index:2} .foto-tapa{font-style:italic;font-size:1.2rem;letter-spacing:.04em;color:#FBF6EC;text-shadow:0 1px 10px rgba(40,26,14,.75); animation:pulse 2.6s ease-in-out infinite;pointer-events:none} .foto-seguir{font-family:var(--serif);font-size:1.1rem;letter-spacing:.06em;color:#3B2E22;background:rgba(251,246,236,.94); border:1px solid rgba(160,130,90,.5);border-radius:999px;padding:11px 28px;cursor:pointer;opacity:0;transform:translateY(8px); transition:opacity .8s ease 1.4s,transform .8s ease 1.4s} .foto-intro.abierta .foto-seguir{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){#fotoSobre,.foto-luz,.foto-tapa{animation:none}} /* ================= Intro: sobre de correo aéreo ================= */ .vj-intro{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px; background:radial-gradient(120% 90% at 50% 30%,#F3EADB 0%,#E3D3B8 70%,#CDB896 100%);perspective:1600px;padding:24px} .vj-intro .saludo{font-family:var(--mono);font-size:.8rem;letter-spacing:.3em;color:#7A6A52;text-align:center} .sobre{position:relative;width:min(88vw,460px);aspect-ratio:1.45;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.6,.1,.25,1)} .sobre.volteado{transform:rotateY(180deg)} .cara{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:6px;box-shadow:0 22px 40px -14px rgba(60,40,20,.45),0 3px 8px rgba(60,40,20,.18)} /* Frente: borde de correo aéreo, timbre, matasellos y destinatario */ .frente{background:repeating-linear-gradient(-45deg,#B4613D 0 12px,#FBF8F1 12px 22px,#22324A 22px 34px,#FBF8F1 34px 44px);padding:11px} .frente .lienzo{position:relative;height:100%;background:#F4EADA;border-radius:2px; background-image:radial-gradient(rgba(120,90,50,.06) 1px,transparent 1px);background-size:5px 5px} .timbre{position:absolute;top:8%;right:6%;width:21%;aspect-ratio:.82;background:#FBF8F1;padding:5px; -webkit-mask:radial-gradient(circle 3px at 3px 3px,transparent 98%,#000) -3px -3px/9px 9px;mask:radial-gradient(circle 3px at 3px 3px,transparent 98%,#000) -3px -3px/9px 9px} .timbre .arte{height:100%;background:#22324A;display:grid;place-items:center;color:#E9D9B8;position:relative} .timbre .arte svg{width:62%;height:auto;stroke-width:1.6} .timbre .arte b{position:absolute;bottom:4px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:.55rem;letter-spacing:.1em;font-weight:400} .matasellos{position:absolute;top:10%;right:22%;width:24%;aspect-ratio:1;border:1.5px solid rgba(34,50,74,.55);border-radius:50%;display:grid;place-items:center; font-family:var(--mono);font-size:.55rem;letter-spacing:.08em;color:rgba(34,50,74,.7);transform:rotate(-14deg);text-align:center;line-height:1.3} .matasellos::after{content:"";position:absolute;left:70%;top:30%;width:110%;height:40%; background:repeating-linear-gradient(0deg,transparent 0 6px,rgba(34,50,74,.45) 6px 7.5px);-webkit-mask:radial-gradient(60% 100% at 0 50%,#000,transparent)} .par-avion{position:absolute;top:10%;left:6%;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:#B4613D;border:1px solid #B4613D;padding:3px 7px;border-radius:2px} .destinatario{position:absolute;left:12%;right:12%;bottom:15%;color:#22324A} .destinatario .para{font-family:var(--mono);font-size:.72rem;letter-spacing:.24em;color:#7A6A52} .destinatario .quien{font-family:var(--script);font-size:clamp(2rem,10vw,2.9rem);line-height:1.15;border-bottom:1px solid rgba(34,50,74,.25);padding-bottom:4px} .destinatario .ciudad{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;margin-top:6px;color:#6B6457} /* Reverso: bolsillo, solapa y sello */ .reverso{transform:rotateY(180deg);background:#E6D6BA;overflow:visible} .reverso .fondo{position:absolute;inset:0;z-index:0;border-radius:6px;background:#22324A; background-image:repeating-linear-gradient(45deg,rgba(233,217,184,.12) 0 2px,transparent 2px 12px)} .reverso .pase-mini{position:absolute;left:7%;right:7%;top:6%;height:88%;z-index:2;transition:transform 1.2s cubic-bezier(.2,.8,.2,1) .5s} .reverso.abierto .pase-mini{transform:translateY(-62%)} .bolsillo{position:absolute;inset:0;z-index:3;border-radius:6px;background:#EADBC0;clip-path:polygon(0 0,50% 52%,100% 0,100% 100%,0 100%); background-image:linear-gradient(to top right,transparent calc(50% - 1px),rgba(120,90,50,.18) 50%,transparent calc(50% + 1px)), linear-gradient(to top left,transparent calc(50% - 1px),rgba(120,90,50,.18) 50%,transparent calc(50% + 1px))} .solapa{position:absolute;left:0;right:0;top:0;height:62%;z-index:5;transform-origin:50% 0;transform-style:preserve-3d;transform:perspective(900px) rotateX(0deg);transition:transform .9s cubic-bezier(.5,0,.3,1),z-index 0s .45s} .solapa .s-frente,.solapa .s-reves{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%);backface-visibility:hidden;-webkit-backface-visibility:hidden} .solapa .s-frente{background:linear-gradient(#F0E3CB,#E2D0B0)} .solapa .s-reves{transform:rotateY(180deg);background:#22324A;background-image:repeating-linear-gradient(45deg,rgba(233,217,184,.14) 0 2px,transparent 2px 12px)} .reverso.abierto .solapa{transform:perspective(900px) rotateX(180deg);z-index:1} .sello{position:absolute;left:50%;top:62%;width:19%;aspect-ratio:1;transform:translate(-50%,-55%);border-radius:50%;z-index:3; background:radial-gradient(circle at 38% 32%,#C77854,#A9532F 55%,#86401F);box-shadow:0 3px 6px rgba(60,30,15,.4),inset 0 0 0 5px rgba(0,0,0,.08); display:grid;place-items:center;color:#F3D9C2;font-family:var(--script);font-size:clamp(1rem,5vw,1.5rem);transition:transform .5s,opacity .5s;z-index:6} .reverso.sin-sello .sello{transform:translate(-50%,-140%) scale(.8) rotate(20deg);opacity:0} .abrir{font-family:var(--mono);font-size:.95rem;letter-spacing:.35em;color:#FBF8F1;background:#22324A;border:0;border-radius:999px;padding:14px 34px 14px 40px; cursor:pointer;box-shadow:0 8px 20px -8px rgba(34,50,74,.7);display:inline-flex;align-items:center;gap:10px} .abrir svg{width:16px;height:16px} .abrir:disabled{opacity:.6} .pista{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:#7A6A52;display:flex;align-items:center;gap:8px} .pista svg{width:16px;height:16px} /* ================= Pase de abordar ================= */ .pase{background:#FBF8F1;border-radius:14px;color:#22324A;display:grid;grid-template-columns:1fr 30%;position:relative;overflow:hidden; box-shadow:0 18px 40px -18px rgba(34,50,74,.45);text-align:left; -webkit-mask:radial-gradient(circle 11px at 70% 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 11px at 70% 100%,transparent 98%,#000) bottom/100% 51% no-repeat; mask:radial-gradient(circle 11px at 70% 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 11px at 70% 100%,transparent 98%,#000) bottom/100% 51% no-repeat} :root[data-theme="dark"] .pase,.pase{background:#FBF8F1} .pase .banda{grid-column:1/-1;background:#22324A;color:#F4EADA;font-family:var(--mono);font-size:.7rem;letter-spacing:.24em;padding:10px 16px;display:flex;justify-content:space-between;align-items:center} .pase .banda svg{width:18px;height:18px} .pase .principal{padding:14px 16px 16px;border-right:2px dashed #CDBB98} .pase .talon{padding:14px 12px 16px;display:flex;flex-direction:column;gap:8px} .campo{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;color:#8A7B62} .valor{font-family:var(--mono);font-size:.95rem;font-weight:700;letter-spacing:.05em;color:#22324A} .pase .pasajeros{font-family:var(--script);font-size:clamp(2.1rem,9vw,2.8rem);line-height:1.1;color:#22324A;margin:2px 0 10px} .ruta{display:flex;align-items:center;gap:10px;margin:6px 0 12px} .ruta .codigo{font-family:var(--mono);font-size:1.7rem;font-weight:700;letter-spacing:.05em;line-height:1} .ruta .linea-vuelo{flex:1;height:0;border-top:2px dotted #B4613D;position:relative} .ruta .linea-vuelo svg{position:absolute;left:50%;top:-11px;width:20px;height:20px;transform:translateX(-50%) rotate(90deg);color:#B4613D;background:#FBF8F1} .ruta small{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;color:#8A7B62;margin-top:4px} .datos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .barras-codigo{margin-top:auto;height:44px;display:flex;align-items:stretch;gap:1px} .barras-codigo i{background:#22324A;display:block} .pase-mini .pase{width:560px;transform-origin:0 0} /* ================= Sobre de viaje ================= */ .vj-intro svg,.pase svg,.ico,.musica svg{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round} .pase-mini .pase{width:560px;transform-origin:0 0} .vj-intro .abrir:focus-visible,.vj-intro .sobre:focus-visible{outline:2px solid #B4613D;outline-offset:4px} /* ================= Secciones de la invitación ================= */ .kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.3em;color:var(--gold);margin-bottom:6px} .kicker:empty{display:none} .texto{max-width:38ch;margin:0 auto 22px;opacity:.82} .ico{width:48px;height:48px;color:var(--accent);display:block;margin:0 auto 8px} blockquote{margin:0 auto;max-width:30ch;font-style:italic;font-size:clamp(1.4rem,6.2vw,1.85rem);line-height:1.4} .cita .rama{width:120px;height:30px;color:var(--gold);margin:0 auto 18px;display:block;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round} h3{font-family:var(--serif);font-weight:600;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 8px} .familias{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:10px} @media (max-width:460px){.familias{grid-template-columns:1fr}} .familias p,.padrinos p{margin:0;font-size:1.12rem} .padrinos{margin-top:26px;padding-top:22px;border-top:1px solid color-mix(in srgb,var(--gold) 35%,transparent)} .intro-padres{font-style:italic;opacity:.8;margin:0 0 22px} .ev .lug{font-style:italic;opacity:.85} .ev .esc{font-family:var(--mono);font-size:.7rem;letter-spacing:.24em;color:var(--gold);margin-bottom:6px} .plan{list-style:none;margin:10px auto 0;padding:0;max-width:360px;text-align:left} .plan li{display:grid;grid-template-columns:78px 44px 1fr;align-items:center;gap:12px;padding:12px 0;border-bottom:1px dashed color-mix(in srgb,var(--gold) 40%,transparent)} .plan time{font-weight:600;font-variant-numeric:tabular-nums} .plan .ico{width:40px;height:40px;padding:8px;margin:0;border-radius:50%;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent)} .plan span{font-size:1.12rem} .tarjetas{display:grid;gap:12px;margin-top:6px} .tarj{background:var(--card);border:1px solid color-mix(in srgb,var(--gold) 30%,transparent);border-radius:16px;padding:20px 18px} .tarj p{margin:2px 0} .tarj .dato{font-weight:600;letter-spacing:.03em;font-variant-numeric:tabular-nums} .tarj .sutil{opacity:.75;font-style:italic} .tarj .acts{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:12px} .lugares{list-style:none;padding:0;margin:4px 0 0} .lugares li{padding:4px 0;font-style:italic} .disco{width:120px;height:120px;margin:0 auto 22px;border-radius:50%;position:relative; background:repeating-radial-gradient(circle,#2A2420 0 2px,#1C1815 2px 4px);box-shadow:0 10px 26px rgba(40,26,14,.25); animation:gira 7s linear infinite;animation-play-state:paused} .musica-on .disco{animation-play-state:running} .disco::after{content:"";position:absolute;inset:36%;border-radius:50%;background:var(--gold);box-shadow:inset 0 0 0 7px #EFE4CF} @keyframes gira{to{transform:rotate(360deg)}} .spotify{border-radius:14px;overflow:hidden;background:var(--soft)} .spotify iframe{display:block;width:100%;height:352px;border:0} .abrir-sp{display:inline-block;margin-top:12px;text-underline-offset:4px} .pin-btn{display:inline-flex;align-items:center;gap:10px;margin-top:8px} .pin-btn svg{width:20px;height:20px;fill:currentColor;flex:none} .hashtag{font:inherit;font-size:1.4rem;font-weight:600;letter-spacing:.03em;color:var(--accent);background:none;cursor:pointer; border:1px dashed color-mix(in srgb,var(--gold) 70%,transparent);border-radius:999px;padding:10px 26px} .firma{font-family:var(--script);font-size:2.6rem;color:var(--accent);margin:8px 0 0} .adultos{font-style:italic;opacity:.8;max-width:34ch;margin:20px auto 0} .fld .opc{font-weight:400;opacity:.7} .nino-fila{display:grid;grid-template-columns:1fr 104px;gap:8px;align-items:end} .nino-fila .fld{margin-top:14px} .mesa-pase.de-ninos .mp-nombre{font-weight:600} .mp-ninos{font-size:.9rem;opacity:.8;margin-top:2px} #personas .fld{margin-top:10px} /* Música */ .musica{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:45;width:52px;height:52px;border-radius:50%; border:1px solid color-mix(in srgb,var(--gold) 60%,transparent);background:color-mix(in srgb,var(--card) 92%,transparent); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;place-items:center;cursor:pointer;color:var(--ink); box-shadow:0 6px 20px rgba(40,26,14,.18)} .barras{display:flex;align-items:flex-end;gap:3px;height:18px} .barras i{width:3px;background:var(--gold);border-radius:2px;height:5px} .musica.sonando .barras i{animation:barra 1s ease-in-out infinite} .musica.sonando .barras i:nth-child(2){animation-delay:.25s}.musica.sonando .barras i:nth-child(3){animation-delay:.5s}.musica.sonando .barras i:nth-child(4){animation-delay:.15s} @keyframes barra{50%{height:18px}} .musica .tache{position:absolute;width:30px;height:1.5px;background:var(--ink);transform:rotate(-45deg);opacity:.7} .musica.sonando .tache{display:none} .aviso{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:45; background:var(--ink);color:var(--paper);font-size:.95rem;padding:9px 18px;border-radius:999px;max-width:90vw;text-align:center; opacity:0;transition:opacity .4s;pointer-events:none} .aviso.ver{opacity:1} /* ================= Tema Viaje ================= */ html[data-tema="viaje"] h2{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,8.5vw,2.6rem);color:var(--ink)} html[data-tema="viaje"] .sprig{display:none} html[data-tema="viaje"] .names{color:var(--ink)} html[data-tema="viaje"] .names .amp{font-family:var(--serif);font-style:italic;color:var(--gold)} html[data-tema="viaje"] .hero .pre,html[data-tema="viaje"] .scroll{font-family:var(--mono);font-size:.75rem;letter-spacing:.3em} html[data-tema="viaje"] .arco{border-radius:0;background:#FBF8F1;padding:9px 9px 34px;outline:0;box-shadow:0 14px 30px -14px rgba(34,50,74,.5);transform:rotate(-2deg);aspect-ratio:auto;width:min(60vw,260px)} html[data-tema="viaje"] .arco img{aspect-ratio:1} html[data-tema="viaje"] .galeria{gap:16px} html[data-tema="viaje"] .galeria button{background:#FBF8F1;padding:7px 7px 22px;border-radius:0;box-shadow:0 10px 24px -12px rgba(34,50,74,.45)} html[data-tema="viaje"] .galeria button:nth-child(odd){transform:rotate(-2deg)} html[data-tema="viaje"] .galeria button:nth-child(even){transform:rotate(2deg)} html[data-tema="viaje"] .count b,html[data-tema="viaje"] .plan time,html[data-tema="viaje"] .ev .t{font-family:var(--mono);font-weight:700} html[data-tema="viaje"] .btn{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase} html[data-tema="viaje"] .hero .pase{margin:22px auto 0;max-width:460px} html[data-tema="viaje"] .firma{color:var(--ink)} @media (prefers-reduced-motion:reduce){.disco,.musica.sonando .barras i{animation:none}.sobre,.solapa,.pase-mini{transition:none}} /* ========================================================= Entrada de estuche: caja de terciopelo con anillo ========================================================= */ .es-intro{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2vh;overflow:hidden; background:radial-gradient(120% 80% at 50% 38%,#4A1A22 0%,#25090F 55%,#120407 100%);color:#F3E4CC; --w:min(58vw,34vh,300px);--d:var(--w);--hb:calc(var(--w)*.46);--ht:calc(var(--w)*.3); --terciopelo:#6A1528;--terciopelo-osc:#3B0914;--terciopelo-claro:#8A2638} .es-intro[hidden]{display:none} .es-foco{position:absolute;left:50%;top:-10%;width:140vmax;height:110vh;transform:translateX(-50%);pointer-events:none; background:radial-gradient(40% 50% at 50% 55%,rgba(255,226,180,.18),transparent 70%)} .es-para{text-align:center;position:relative;z-index:2;transition:transform 1.1s cubic-bezier(.3,.9,.25,1)} .es-para span{display:block;font-family:"Pinyon Script",cursive;font-size:clamp(1.6rem,6vw,2.1rem);color:#D9B77A;line-height:1} .es-para b{display:block;font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(1.9rem,8vw,2.7rem);letter-spacing:.01em;margin-top:.15em;color:#F6E9D3} .es-escena{position:relative;perspective:1200px;perspective-origin:50% 30%;cursor:pointer;outline:none;padding:calc(var(--d) * .62) 10vw 2vh;-webkit-tap-highlight-color:transparent} .es-escena:focus-visible .es-caja{filter:drop-shadow(0 0 10px rgba(217,183,122,.6))} .es-camara{position:relative;transform-style:preserve-3d;transform:rotateX(-24deg) rotateY(-32deg);transition:transform .25s} .es-escena:active .es-camara{transform:rotateX(-24deg) rotateY(-32deg) scale(.98)} .es-caja{position:relative;width:var(--w);height:calc(var(--hb) + var(--ht));transform-style:preserve-3d} .es-caja .f{position:absolute;left:0;top:0;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden} /* Terciopelo: color, luz suave y una textura de pelo muy fina */ .es-caja .f{background-color:var(--terciopelo); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(120% 90% at 30% 20%,var(--terciopelo-claro),var(--terciopelo) 55%,var(--terciopelo-osc)); background-blend-mode:soft-light,normal} .es-caja .frente{border-radius:3px} .es-caja .izq,.es-caja .der,.es-caja .atras{filter:brightness(.62)} .es-caja .fondo{filter:brightness(.4)} .es-filete{position:absolute;left:4%;right:4%;height:1px;background:linear-gradient(90deg,transparent,#D9B77A 20%,#F4DDA8 50%,#D9B77A 80%,transparent);opacity:.75} .es-base .es-filete{top:7px} .es-tapa .es-filete{bottom:7px} /* Base */ .es-base{position:absolute;left:0;bottom:0;width:var(--w);height:var(--hb);transform-style:preserve-3d} .es-base .frente,.es-base .atras{width:var(--w);height:var(--hb)} .es-base .frente{transform:translateZ(calc(var(--d) / 2))} .es-base .atras{transform:rotateY(180deg) translateZ(calc(var(--d) / 2))} .es-base .izq,.es-base .der{width:var(--d);height:var(--hb);left:calc((var(--w) - var(--d)) / 2)} .es-base .izq{transform:rotateY(-90deg) translateZ(calc(var(--w) / 2))} .es-base .der{transform:rotateY(90deg) translateZ(calc(var(--w) / 2))} .es-base .fondo{width:var(--w);height:var(--d);top:calc((var(--hb) - var(--d)) / 2);transform:rotateX(-90deg) translateZ(calc(var(--hb) / 2))} /* Cojín de satín dentro de la base, con su borde de terciopelo */ .es-cojin{position:absolute;left:0;width:var(--w);height:var(--d);top:calc((var(--hb) - var(--d)) / 2); transform:rotateX(90deg) translateZ(calc(var(--hb) / 2 - 1px));backface-visibility:hidden; background:radial-gradient(70% 55% at 50% 45%,#FFF8EC,#EADBC5 60%,#C9B497); box-shadow:inset 0 0 0 calc(var(--w) * .055) var(--terciopelo),inset 0 0 0 calc(var(--w) * .062) #2C0710,inset 0 0 calc(var(--w) * .12) calc(var(--w) * .06) rgba(80,40,20,.45)} .es-ranura{position:absolute;left:50%;top:50%;width:46%;height:5%;transform:translate(-50%,-50%);border-radius:50%; background:linear-gradient(#8F7556,#D9C6A8);box-shadow:0 1px 0 rgba(255,255,255,.6)} /* Tapa: bisagra en la arista trasera superior de la base */ .es-tapa{position:absolute;left:0;top:0;width:var(--w);height:var(--ht);transform-style:preserve-3d; transform-origin:50% 100% calc(var(--d) / -2)} .es-tapa .frente,.es-tapa .atras{width:var(--w);height:var(--ht)} .es-tapa .frente{transform:translateZ(calc(var(--d) / 2))} .es-tapa .atras{transform:rotateY(180deg) translateZ(calc(var(--d) / 2))} .es-tapa .izq,.es-tapa .der{width:var(--d);height:var(--ht);left:calc((var(--w) - var(--d)) / 2)} .es-tapa .izq{transform:rotateY(-90deg) translateZ(calc(var(--w) / 2))} .es-tapa .der{transform:rotateY(90deg) translateZ(calc(var(--w) / 2))} .es-tapa .arriba,.es-tapa .interior{width:var(--w);height:var(--d);top:calc((var(--ht) - var(--d)) / 2)} .es-tapa .arriba{transform:rotateX(90deg) translateZ(calc(var(--ht) / 2));display:grid;place-items:center;filter:brightness(1.12)} .es-tapa .interior{transform:rotateX(-90deg) translateZ(calc(var(--ht) / 2 - 1px)); background:radial-gradient(80% 70% at 50% 40%,#FFF9EF,#EEE1CC 70%,#D9C6A8) !important; box-shadow:inset 0 0 0 calc(var(--w) * .055) var(--terciopelo),inset 0 0 0 calc(var(--w) * .062) #2C0710;display:grid;place-items:center} .es-mono{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:calc(var(--w) * .2);color:#D9B77A;letter-spacing:.02em; text-shadow:0 1px 0 rgba(255,240,200,.35),0 -1px 0 rgba(0,0,0,.55);opacity:.9} .es-satin{display:flex;flex-direction:column;align-items:center;text-align:center;color:#8A6A35;opacity:0;transition:opacity .9s .5s} .es-satin small{font-family:"Cormorant Garamond",serif;font-size:calc(var(--w) * .045);letter-spacing:.35em;text-transform:uppercase} .es-satin b{font-family:"Pinyon Script",cursive;font-weight:400;font-size:calc(var(--w) * .13);line-height:1.1;color:#7A2A3A} .es-satin em{font-family:"Cormorant Garamond",serif;font-style:normal;font-size:calc(var(--w) * .05);letter-spacing:.2em} /* Anillo: de pie en el cojín, mirando al frente */ .es-anillo{position:absolute;left:50%;top:0;width:calc(var(--w) * .56);aspect-ratio:120/150; transform:translate(-50%,-70%) rotateY(32deg) translateY(30%) scale(.9);opacity:0;transform-style:preserve-3d} .es-anillo svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 6px rgba(40,10,0,.45))} .es-destello{position:absolute;width:18%;aspect-ratio:1;opacity:0;pointer-events:none; background:radial-gradient(circle,#fff 0,rgba(255,255,255,.9) 8%,transparent 30%), linear-gradient(90deg,transparent 46%,rgba(255,255,255,.95) 50%,transparent 54%), linear-gradient(0deg,transparent 46%,rgba(255,255,255,.95) 50%,transparent 54%)} .es-destello.d1{left:52%;top:22%}.es-destello.d2{left:30%;top:30%;width:12%}.es-destello.d3{left:62%;top:36%;width:10%} .es-sombra{position:absolute;left:50%;bottom:calc(var(--d) * -.32);width:calc(var(--w) * 1.9);height:calc(var(--w) * .5);transform:translateX(-50%) rotateX(80deg); background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);pointer-events:none} .es-pie{margin-top:calc(var(--d) * .22);font-family:"Cormorant Garamond",serif;font-style:italic;font-size:1.15rem;color:#D9B77A;letter-spacing:.03em;transition:opacity .4s; animation:esLatido 2.4s ease-in-out infinite} @keyframes esLatido{50%{opacity:.45}} .es-luz{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,#FFFDF8,#F7F1EA 60%);opacity:0;pointer-events:none} /* Abierto */ .es-intro.abierto .es-tapa{transform:rotateX(108deg);transition:transform 1.25s cubic-bezier(.3,.9,.25,1.05)} .es-intro.abierto .es-anillo{opacity:1;transform:translate(-50%,-70%) rotateY(32deg) translateY(0) scale(1);transition:transform 1.3s cubic-bezier(.2,.8,.2,1) .35s,opacity .5s .3s} /* Revelado: lo que acompaña a la apertura (con o sin GSAP) */ .es-intro.revelado .es-satin{opacity:1} .es-intro.revelado .es-para{transform:translateY(calc(var(--d) * -.32))} .es-intro.revelado .es-camara{transform:rotateX(-24deg) rotateY(-32deg) translateY(calc(var(--d) * .18));transition:transform 1.4s cubic-bezier(.3,.9,.25,1)} .es-intro.revelado .es-pie{opacity:0;animation:none} .es-intro.brilla .es-destello{animation:esBrillo 2.2s ease-in-out infinite} .es-intro.brilla .es-destello.d2{animation-delay:.6s}.es-intro.brilla .es-destello.d3{animation-delay:1.2s} /* Luz que sale de dentro de la caja */ .es-resplandor{position:absolute;left:50%;top:calc(var(--d) * .62 + var(--ht) + var(--d) * .1);width:calc(var(--w) * 2.2);aspect-ratio:1; transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:0;mix-blend-mode:screen; background:radial-gradient(closest-side,rgba(255,236,196,.75),rgba(255,206,140,.28) 45%,transparent 75%)} .es-rayos{position:absolute;inset:0;border-radius:50%;opacity:.0; background:repeating-conic-gradient(from 0deg,rgba(255,232,190,.55) 0deg 3deg,transparent 3deg 18deg); -webkit-mask:radial-gradient(closest-side,#000 20%,transparent 85%);mask:radial-gradient(closest-side,#000 20%,transparent 85%); animation:esGira 18s linear infinite} .es-intro.revelado .es-rayos{opacity:.55;transition:opacity 1.6s .4s} @keyframes esGira{to{transform:rotate(360deg)}} .es-seguir{position:relative;z-index:3;font-family:"Cormorant Garamond",serif;font-size:1.1rem;letter-spacing:.08em;color:#2A0A12; background:linear-gradient(135deg,#F4DDA8,#C99C55 55%,#E8C987);border:0;border-radius:999px;padding:13px 30px;cursor:pointer; box-shadow:0 10px 30px -10px rgba(217,183,122,.7);opacity:0;transform:translateY(10px);transition:opacity .6s,transform .6s} .es-seguir.ver{opacity:1;transform:none} .es-seguir[hidden]{display:none} @media (prefers-reduced-motion:reduce){.es-rayos,.es-pie,.es-destello{animation:none!important}} /* ========================================================= Entrada de periódico: tabloide de los años 20 (Ley Seca) ========================================================= */ .pe-intro{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;overflow:hidden; background:radial-gradient(70% 55% at 50% 42%,#4A3B28 0%,#1E170F 60%,#0A0705 100%);padding:14px; --tinta:#17130E;--rojo:#A3231A} .pe-intro[hidden]{display:none} /* Película vieja: rayas, polvo y parpadeo */ .pe-pelicula{position:absolute;inset:0;pointer-events:none;z-index:3;mix-blend-mode:screen;opacity:.5;animation:peFlicker .12s steps(2) infinite; background: linear-gradient(90deg,transparent 22%,rgba(255,240,210,.08) 22.2%,transparent 22.5%,transparent 71%,rgba(255,240,210,.06) 71.2%,transparent 71.4%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .85 0 0 0 18 -15'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E")} .pe-intro::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;box-shadow:inset 0 0 18vmax rgba(0,0,0,.85)} @keyframes peFlicker{0%{opacity:.42;background-position:0 0,0 0}50%{opacity:.55;background-position:3px 0,-40px 60px}100%{opacity:.46;background-position:-2px 0,70px -30px}} .pe-escenario{position:relative;z-index:1;width:min(95vw,580px,calc((100svh - 80px) * .7));container-type:inline-size;perspective:1400px} .pe-hoja{position:relative;display:block;color:var(--tinta);cursor:pointer;outline:none;padding:3.6cqw 4.2cqw 3.6cqw; font-family:"Old Standard TT","Times New Roman",serif;font-size:2.7cqw;line-height:1.3;text-align:left; background: radial-gradient(18cqw 18cqw at 84% 78%,transparent 62%,rgba(110,70,20,.22) 66%,rgba(110,70,20,.08) 70%,transparent 74%), linear-gradient(180deg,transparent 49.4%,rgba(60,40,10,.22) 49.8%,rgba(255,250,235,.35) 50.2%,transparent 51%), radial-gradient(70% 50% at 15% 10%,rgba(140,95,30,.22),transparent 70%), radial-gradient(50% 40% at 95% 95%,rgba(120,80,25,.28),transparent 70%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .17 0 0 0 0 .05 0 0 0 .3 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(180deg,#E9DAB2,#D9C595); box-shadow:0 34px 70px -18px rgba(0,0,0,.85),inset 0 0 7cqw rgba(100,65,20,.45); clip-path:polygon(0 .8%,4% 0,19% .5%,37% 0,58% .6%,80% .1%,100% .9%,99.4% 22%,100% 48%,99.5% 76%,100% 99.2%,77% 100%,52% 99.4%,28% 100%,6% 99.3%,0 100%,.6% 74%,0 50%,.5% 24%)} .pe-hoja:focus-visible{box-shadow:0 0 0 3px #D9B77A,0 34px 70px -18px rgba(0,0,0,.85)} /* Sello rojo de EXTRA */ .pe-sello{position:absolute;left:12cqw;top:57cqw;z-index:2;transform:rotate(-14deg);font-family:"Oswald","Impact",sans-serif;font-weight:700; font-size:6.4cqw;letter-spacing:.06em;text-transform:uppercase;color:var(--rojo);border:.9cqw solid var(--rojo);padding:.2cqw 2cqw;opacity:.82; mix-blend-mode:multiply;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.6'/%3E%3C/filter%3E%3Crect width='120' height='60' filter='url(%23n)'/%3E%3C/svg%3E"); mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.6'/%3E%3C/filter%3E%3Crect width='120' height='60' filter='url(%23n)'/%3E%3C/svg%3E")} .pe-cabecera{text-align:center} .pe-tira{display:flex;justify-content:space-between;font-family:"Oswald","Impact",sans-serif;font-weight:500;font-size:2.3cqw;letter-spacing:.18em;text-transform:uppercase; border-top:.5cqw solid var(--tinta);border-bottom:1px solid var(--tinta);padding:.5cqw 0} .pe-mancheta{display:grid;grid-template-columns:13cqw minmax(0,1fr) 13cqw;align-items:center;gap:1.5cqw;padding:1cqw 0} .pe-oreja{border:1px solid var(--tinta);font-size:1.75cqw;line-height:1.15;padding:.8cqw .6cqw;text-align:center} .pe-oreja b{display:block;font-family:"Oswald","Impact",sans-serif;font-size:2.6cqw;text-transform:uppercase;letter-spacing:.04em} .pe-nombre{font-family:"UnifrakturMaguntia","Old English Text MT",serif;font-size:8.2cqw;line-height:1;white-space:nowrap} .pe-fecha{display:flex;justify-content:space-between;gap:2cqw;font-size:2cqw;text-transform:uppercase;letter-spacing:.1em; border-top:.4cqw double var(--tinta);border-bottom:.9cqw double var(--tinta);padding:.6cqw 0 .7cqw} .pe-antetitulo{font-family:"Oswald","Impact",sans-serif;font-weight:700;font-size:4.6cqw;text-transform:uppercase;letter-spacing:.14em;text-align:center; color:#fff;background:var(--tinta);margin:2cqw auto 1cqw;padding:.3cqw 3cqw;width:max-content} .pe-titular{font-family:"Oswald","Impact","Arial Narrow",sans-serif;font-weight:700;font-size:13cqw;line-height:.9;text-align:center;margin:0 0 1.4cqw; text-transform:uppercase;letter-spacing:-.01em;transform:scaleY(1.12);transform-origin:top} .pe-balazo{font-style:italic;text-align:center;font-size:3cqw;line-height:1.25;margin:1.6cqw 2cqw 1.8cqw;border-top:1px solid var(--tinta);border-bottom:1px solid var(--tinta);padding:1.2cqw 0} .pe-cuerpo{display:grid;grid-template-columns:1fr 1.25fr;gap:2.6cqw;align-items:start} .pe-foto{margin:0} .pe-marco{position:relative;aspect-ratio:4/5;overflow:hidden;border:.4cqw solid var(--tinta);background:#CFC2A0} .pe-marco img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.35) brightness(.95) sepia(.35);animation:peViva 9s ease-in-out infinite alternate} .pe-grabado{width:100%;height:100%;display:block} .pe-anillos{transform-origin:97px 34px;animation:peLatido 3.4s ease-in-out infinite} .pe-chispa{transform-origin:97px 14px;animation:peChispa 2.6s ease-in-out infinite} /* Trama de puntos de imprenta y grano */ .pe-trama{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.55; background:radial-gradient(circle,rgba(23,19,14,.55) 32%,transparent 36%) 0 0/1.3cqw 1.3cqw} .pe-grano{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.35;animation:peParpadeo .18s steps(2) infinite; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")} .pe-foto figcaption{font-size:1.95cqw;font-style:italic;margin-top:1cqw;line-height:1.2;border-bottom:1px solid var(--tinta);padding-bottom:1cqw} .pe-columnas{columns:2;column-gap:2.4cqw;column-rule:1px solid var(--tinta);text-align:justify;hyphens:auto;font-size:2.35cqw;line-height:1.28} .pe-columnas p{margin:0 0 1cqw} .pe-columnas p:first-child::first-letter{font-family:"Oswald","Impact",sans-serif;font-weight:700;float:left;font-size:8.4cqw;line-height:.82;padding:.4cqw 1cqw 0 0} .pe-columnas h4{font-family:"Oswald","Impact",sans-serif;font-weight:700;text-transform:uppercase;font-size:2.9cqw;line-height:1;margin:1.4cqw 0 .6cqw; border-top:1px solid var(--tinta);padding-top:1cqw;break-after:avoid} .pe-avisos{display:grid;grid-template-columns:1.2fr 1.2fr .9fr;gap:2cqw;margin-top:2.2cqw;border-top:.9cqw double var(--tinta);padding-top:1.8cqw;font-size:2.1cqw;line-height:1.22} .pe-aviso{border:1px solid var(--tinta);padding:1.2cqw 1.4cqw;text-align:center} .pe-aviso b{display:block;font-family:"Oswald","Impact",sans-serif;font-size:3.1cqw;font-weight:700;text-transform:uppercase;letter-spacing:.04em;line-height:1;margin-bottom:.6cqw} .pe-buscado{border:.5cqw double var(--tinta);background:rgba(255,248,225,.25)} .pe-buscado b{color:var(--rojo);font-size:4.6cqw;letter-spacing:.12em} .pe-quien{display:block;font-family:"Playfair Display",serif;font-weight:900;font-size:3cqw;line-height:1.05;margin:.4cqw 0} .pe-buscado em{display:block;font-family:"Oswald","Impact",sans-serif;font-style:normal;text-transform:uppercase;font-size:1.9cqw;letter-spacing:.06em;margin-top:.6cqw} .pe-pie{position:relative;z-index:4;text-align:center;max-width:90vw;font-family:"Oswald","Impact",sans-serif;text-transform:uppercase;letter-spacing:.22em;color:#E8D9B5;font-size:.82rem; animation:esLatido 2.4s ease-in-out infinite;opacity:0} @keyframes peViva{0%{transform:scale(1.04) translate(-1%,0)}50%{transform:scale(1.09) translate(1%,-1.5%)}100%{transform:scale(1.05) translate(0,1%)}} @keyframes peLatido{50%{transform:scale(1.06) rotate(-3deg)}} @keyframes peChispa{0%,100%{opacity:0;transform:scale(.4) rotate(0)}40%{opacity:1;transform:scale(1.1) rotate(40deg)}} @keyframes peParpadeo{50%{transform:translate(-3px,2px)}} @container (max-width: 480px){.pe-columnas{text-align:left;hyphens:manual}} @media (prefers-reduced-motion:reduce){.pe-intro *{animation:none!important}.pe-pie{opacity:1}} /* ---------- Tema periódico dentro de la invitación ---------- */ html[data-tema="periodico"] body{font-family:"Old Standard TT","Times New Roman",serif;font-size:18px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .17 0 0 0 0 .05 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(120% 80% at 50% 0%,#EBDDB8,#D9C595)} html[data-tema="periodico"] .sprig{display:none} html[data-tema="periodico"] .hero .pre{font-family:"UnifrakturMaguntia",serif;font-size:2.3rem;letter-spacing:0;opacity:1;border-top:5px solid var(--ink);border-bottom:4px double var(--ink);padding:4px 0;margin:0 auto 10px;max-width:15ch} html[data-tema="periodico"] .names{font-family:"Oswald","Impact",sans-serif;font-weight:700;color:var(--ink);text-transform:uppercase;font-size:clamp(3.6rem,19vw,6rem);line-height:.9;letter-spacing:-.01em} html[data-tema="periodico"] .names .amp{font-family:"Playfair Display",serif;font-style:italic;text-transform:none;color:var(--gold);font-weight:700} html[data-tema="periodico"] .hero .when{font-family:"Oswald",sans-serif;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:6px 0;text-transform:uppercase;letter-spacing:.16em;font-size:.95rem;font-weight:500} html[data-tema="periodico"] h2{font-family:"Oswald","Impact",sans-serif;font-weight:700;text-transform:uppercase;color:var(--ink);font-size:clamp(2rem,9vw,2.8rem);line-height:1;letter-spacing:.01em; border-top:5px solid var(--ink);border-bottom:3px double var(--ink);padding:10px 0 8px} html[data-tema="periodico"] h3{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.06em} html[data-tema="periodico"] .kicker{font-family:"Oswald",sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.24em;color:#fff;background:var(--ink);display:inline-block;padding:2px 10px;margin-bottom:8px} html[data-tema="periodico"] .arco{border-radius:0;border:4px solid var(--ink);outline:0;width:min(70vw,300px);aspect-ratio:4/5;position:relative} html[data-tema="periodico"] .arco::after{content:"";position:absolute;inset:0;mix-blend-mode:multiply;opacity:.45;background:radial-gradient(circle,rgba(23,19,14,.55) 32%,transparent 36%) 0 0/5px 5px} html[data-tema="periodico"] .arco img{filter:grayscale(1) contrast(1.35) sepia(.35);animation:peViva 9s ease-in-out infinite alternate} html[data-tema="periodico"] .tarjeta,html[data-tema="periodico"] .tarjetas>*{border-radius:0;border-color:var(--ink)} html[data-tema="periodico"] blockquote{font-style:italic} html[data-tema="periodico"] .galeria img{filter:grayscale(1) contrast(1.25) sepia(.3)} /* Papel sepia envejecido con orillas quemadas (estilo periódico antiguo) */ .pe-hoja{--tinta:#2A1A0B;--rojo:#8E2A12;color:var(--tinta); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='900' preserveAspectRatio='none'%3E%3Cdefs%3E%3CradialGradient id='v' cx='50%25' cy='50%25' r='72%25'%3E%3Cstop offset='.5' stop-color='%233A1F08' stop-opacity='0'/%3E%3Cstop offset='.78' stop-color='%234A2A0C' stop-opacity='.45'/%3E%3Cstop offset='.9' stop-color='%232A1505' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23140902' stop-opacity='1'/%3E%3C/radialGradient%3E%3Cfilter id='b' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='4' seed='9' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='70' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='-40' y='-40' width='680' height='980' fill='url%28%23v%29' filter='url%28%23b%29'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='900'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005 .007' numOctaves='4' seed='17'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .26 0 0 0 0 .1 1.3 0 0 0 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23m%29'/%3E%3C/svg%3E") center/cover,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='o'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.08' numOctaves='2' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .2 0 0 0 0 .07 9 0 0 0 -6.5'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url%28%23o%29'/%3E%3C/svg%3E") 0 0/400px 400px,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .45' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .18 0 0 0 0 .06 0 0 0 .3 -.03'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url%28%23g%29'/%3E%3C/svg%3E") 0 0/110px 110px, radial-gradient(120% 90% at 50% 45%,#EAD3A6 0%,#DCBC86 50%,#C49A5E 100%) !important; box-shadow:0 34px 70px -18px rgba(0,0,0,.9) !important; clip-path:polygon(0 .6%,6% 0,21% .7%,38% .1%,55% .8%,73% 0,88% .6%,100% .2%,99.4% 18%,100% 37%,99.3% 58%,100% 79%,99.5% 100%,82% 99.3%,63% 100%,44% 99.4%,25% 100%,9% 99.3%,0 99.8%,.7% 80%,0 61%,.6% 40%,0 19%) !important} .pe-hoja::before,.pe-hoja::after{content:none} /* Tipografía romana gruesa, como las cabeceras de la época */ .pe-nombre{font-family:"Playfair Display","Times New Roman",serif;font-weight:900;text-transform:uppercase;font-size:7.4cqw;letter-spacing:.02em;line-height:1} .pe-titular{font-family:"Playfair Display","Times New Roman",serif !important;font-weight:900;transform:none;letter-spacing:.01em;line-height:.95} .pe-antetitulo{background:none;color:var(--tinta);font-family:"Playfair Display",serif;font-style:italic;font-weight:700;text-transform:none;letter-spacing:.02em; font-size:4.2cqw;border-top:1px solid var(--tinta);border-bottom:1px solid var(--tinta);padding:.4cqw 3cqw} .pe-tira,.pe-oreja b,.pe-aviso b,.pe-columnas h4,.pe-buscado em{font-family:"Playfair Display",serif;font-weight:900} .pe-columnas p:first-child::first-letter{font-family:"Playfair Display",serif} .pe-balazo{font-family:"Playfair Display",serif;font-weight:700} .pe-sello{color:var(--rojo);border-color:var(--rojo);opacity:.7} /* Imagen en sepia, como grabado antiguo */ .pe-marco{background:#D8BC8A;border-color:var(--tinta)} .pe-marco img{filter:sepia(1) saturate(1.25) contrast(1.12) brightness(.9) !important} .pe-marco::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 4cqw rgba(60,30,8,.6)} .pe-trama{display:none} .pe-grabado rect:first-child{fill:#D8BC8A} .pe-grabado path,.pe-grabado rect{fill:#3B2412} .pe-grabado rect:first-child{fill:#D8BC8A} .pe-grabado g[fill]{fill:#E3C58F} .pe-anillos{stroke:#3B2412} /* Interior de la invitación: mismo papel, orillas quemadas fijas en la pantalla */ html[data-style="periodico"]{--paper:#DCBC86;--ink:#2A1A0B;--accent:#2A1A0B;--gold:#8E2A12;--card:#EBD6AE} html[data-tema="periodico"] body{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='900'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005 .007' numOctaves='4' seed='17'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .26 0 0 0 0 .1 1.3 0 0 0 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23m%29'/%3E%3C/svg%3E") center/cover,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='o'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.08' numOctaves='2' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .2 0 0 0 0 .07 9 0 0 0 -6.5'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url%28%23o%29'/%3E%3C/svg%3E") 0 0/400px 400px,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .45' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .18 0 0 0 0 .06 0 0 0 .3 -.03'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url%28%23g%29'/%3E%3C/svg%3E") 0 0/110px 110px,radial-gradient(130% 90% at 50% 30%,#E8D0A2,#D9B880 60%,#C6A066);background-attachment:fixed} html[data-tema="periodico"] body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='900' preserveAspectRatio='none'%3E%3Cdefs%3E%3CradialGradient id='v' cx='50%25' cy='50%25' r='72%25'%3E%3Cstop offset='.5' stop-color='%233A1F08' stop-opacity='0'/%3E%3Cstop offset='.78' stop-color='%234A2A0C' stop-opacity='.45'/%3E%3Cstop offset='.9' stop-color='%232A1505' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23140902' stop-opacity='1'/%3E%3C/radialGradient%3E%3Cfilter id='b' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='4' seed='9' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='70' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='-40' y='-40' width='680' height='980' fill='url%28%23v%29' filter='url%28%23b%29'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;opacity:.85} html[data-tema="periodico"] h2,html[data-tema="periodico"] .names,html[data-tema="periodico"] h3,html[data-tema="periodico"] .hero .when{font-family:"Playfair Display","Times New Roman",serif} html[data-tema="periodico"] h2{font-weight:900} html[data-tema="periodico"] .names{font-weight:900} html[data-tema="periodico"] .hero .pre{font-family:"Playfair Display",serif;font-weight:900;text-transform:uppercase;font-size:1.6rem;letter-spacing:.06em} html[data-tema="periodico"] .kicker{background:none;color:var(--ink);font-family:"Playfair Display",serif;font-style:italic;font-weight:700;letter-spacing:.04em;font-size:.95rem; border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:2px 12px} html[data-tema="periodico"] .arco::after{background:none;box-shadow:inset 0 0 30px rgba(60,30,8,.6);opacity:1;mix-blend-mode:normal} html[data-tema="periodico"] .arco img,html[data-tema="periodico"] .galeria img{filter:sepia(1) saturate(1.25) contrast(1.1) brightness(.9)} .pe-nombre{font-size:5.9cqw;white-space:nowrap} .pe-mancheta{grid-template-columns:12cqw minmax(0,1fr) 12cqw} .pe-marco>.pe-sello{position:absolute;left:5%;top:7%;z-index:3;font-size:5.6cqw} .pe-escenario{width:min(95vw,580px,calc((100svh - 80px) * .62))} .pe-oreja b{font-size:2cqw} /* Fondo fotográfico de papel antiguo (imagen de la pareja de cartas) con un velo para que el texto se lea */ .pe-hoja{background: radial-gradient(120% 90% at 50% 45%,rgba(246,234,208,.22),rgba(240,222,186,.12) 60%,rgba(110,70,30,.3) 100%), url("/escenas/periodico/papel.webp") center/cover,#D9BC88 !important} html[data-tema="periodico"] body{background: linear-gradient(rgba(240,226,196,.18),rgba(240,226,196,.18)), url("/escenas/periodico/papel.webp") center/cover fixed,#D9BC88} html[data-tema="periodico"] body::before{background:radial-gradient(130% 100% at 50% 50%,transparent 60%,rgba(70,40,10,.45))} /* ========================================================= Interior propio para cada estilo (después de abrir) ========================================================= */ .hero{position:relative} .hero::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);z-index:-1;pointer-events:none} /* ---------- Estuche: terciopelo vino y oro ---------- */ html[data-style="estuche"] body{background:linear-gradient(135deg,#FAF5EE 0%,#F3EADF 40%,#FBF7F1 55%,#F2E8DC 100%) fixed} html[data-style="estuche"] .hero{color:#F3E4CC} html[data-style="estuche"] .hero::before{background: radial-gradient(90% 60% at 50% 35%,rgba(255,220,170,.16),transparent 70%), radial-gradient(120% 90% at 50% 40%,#6A1528,#3B0914 70%,#22040B); box-shadow:inset 0 -1px 0 #D9B77A} html[data-style="estuche"] .hero .sprig{color:#D9B77A;width:200px} html[data-style="estuche"] .names{color:#E9CF9B;text-shadow:0 2px 18px rgba(217,183,122,.35)} html[data-style="estuche"] .names .amp{color:#F3E4CC} html[data-style="estuche"] .hero .pre{color:#D9B77A;letter-spacing:.4em} html[data-style="estuche"] .hero .where,html[data-style="estuche"] .scroll{color:#E8D9C0} html[data-style="estuche"] .arco{outline-color:#D9B77A} html[data-style="estuche"] h2{font-family:var(--serif);font-weight:500;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(1.5rem,6.5vw,1.9rem);color:#6E1B2F; display:flex;align-items:center;justify-content:center;gap:14px} html[data-style="estuche"] h2::before,html[data-style="estuche"] h2::after{content:"";flex:0 0 34px;height:1px;background:linear-gradient(90deg,transparent,#B08D57)} html[data-style="estuche"] h2::after{transform:scaleX(-1)} html[data-style="estuche"] section:not(.hero)+section:not([hidden])::before{content:"◆";display:block;color:#B08D57;font-size:.7rem;margin:-30px auto 26px;letter-spacing:1.2em} html[data-style="estuche"] .tarj,html[data-style="estuche"] .rsvp{background:#FFFCF7;border:1px solid #D9B77A;border-radius:4px;box-shadow:0 0 0 4px #FFFCF7,0 0 0 5px rgba(176,141,87,.45),0 14px 30px -18px rgba(59,9,20,.4)} html[data-style="estuche"] .rsvp{border-top:5px solid #6A1528} html[data-style="estuche"] .btn{border-color:#6E1B2F;color:#6E1B2F} /* ---------- Hacienda: talavera, arcos y vino ---------- */ html[data-style="hacienda"] body{background: radial-gradient(70% 40% at 50% 0%,rgba(122,36,51,.07),transparent 70%),#F6EEE3} html[data-style="hacienda"] .hero::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23F8F1E4'/%3E%3Cg fill='%2324508F'%3E%3Ccircle cx='0' cy='0' r='7'/%3E%3Ccircle cx='40' cy='0' r='7'/%3E%3Ccircle cx='0' cy='40' r='7'/%3E%3Ccircle cx='40' cy='40' r='7'/%3E%3Cellipse cx='20' cy='11' rx='4' ry='7'/%3E%3Cellipse cx='20' cy='29' rx='4' ry='7'/%3E%3Cellipse cx='11' cy='20' rx='7' ry='4'/%3E%3Cellipse cx='29' cy='20' rx='7' ry='4'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='4' fill='%23C9902E'/%3E%3Ccircle cx='20' cy='20' r='1.6' fill='%23F8F1E4'/%3E%3Cg fill='%23C9902E'%3E%3Ccircle cx='20' cy='2' r='1.5'/%3E%3Ccircle cx='20' cy='38' r='1.5'/%3E%3Ccircle cx='2' cy='20' r='1.5'/%3E%3Ccircle cx='38' cy='20' r='1.5'/%3E%3C/g%3E%3C/svg%3E") 0 100%/40px 40px repeat-x,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23F8F1E4'/%3E%3Cg fill='%2324508F'%3E%3Ccircle cx='0' cy='0' r='7'/%3E%3Ccircle cx='40' cy='0' r='7'/%3E%3Ccircle cx='0' cy='40' r='7'/%3E%3Ccircle cx='40' cy='40' r='7'/%3E%3Cellipse cx='20' cy='11' rx='4' ry='7'/%3E%3Cellipse cx='20' cy='29' rx='4' ry='7'/%3E%3Cellipse cx='11' cy='20' rx='7' ry='4'/%3E%3Cellipse cx='29' cy='20' rx='7' ry='4'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='4' fill='%23C9902E'/%3E%3Ccircle cx='20' cy='20' r='1.6' fill='%23F8F1E4'/%3E%3Cg fill='%23C9902E'%3E%3Ccircle cx='20' cy='2' r='1.5'/%3E%3Ccircle cx='20' cy='38' r='1.5'/%3E%3Ccircle cx='2' cy='20' r='1.5'/%3E%3Ccircle cx='38' cy='20' r='1.5'/%3E%3C/g%3E%3C/svg%3E") 0 0/40px 40px repeat-x, linear-gradient(#F6EEE3,#F6EEE3) 0 40px/100% calc(100% - 80px) no-repeat} html[data-style="hacienda"] .hero{padding-top:80px;padding-bottom:70px} html[data-style="hacienda"] .hero .sprig{color:#7A2433;width:190px} html[data-style="hacienda"] .arco{border:6px solid #F8F1E4;outline:2px solid #24508F;outline-offset:0;box-shadow:0 0 0 8px #7A2433} html[data-style="hacienda"] section:not(.hero):not([hidden])::before{content:"";display:block;width:160px;height:20px;margin:0 auto 24px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23F8F1E4'/%3E%3Cg fill='%2324508F'%3E%3Ccircle cx='0' cy='0' r='7'/%3E%3Ccircle cx='40' cy='0' r='7'/%3E%3Ccircle cx='0' cy='40' r='7'/%3E%3Ccircle cx='40' cy='40' r='7'/%3E%3Cellipse cx='20' cy='11' rx='4' ry='7'/%3E%3Cellipse cx='20' cy='29' rx='4' ry='7'/%3E%3Cellipse cx='11' cy='20' rx='7' ry='4'/%3E%3Cellipse cx='29' cy='20' rx='7' ry='4'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='4' fill='%23C9902E'/%3E%3Ccircle cx='20' cy='20' r='1.6' fill='%23F8F1E4'/%3E%3Cg fill='%23C9902E'%3E%3Ccircle cx='20' cy='2' r='1.5'/%3E%3Ccircle cx='20' cy='38' r='1.5'/%3E%3Ccircle cx='2' cy='20' r='1.5'/%3E%3Ccircle cx='38' cy='20' r='1.5'/%3E%3C/g%3E%3C/svg%3E") 0 50%/20px 20px repeat-x;border-radius:3px} html[data-style="hacienda"] h2{color:#7A2433} html[data-style="hacienda"] .tarj{border-radius:90px 90px 10px 10px;border:2px solid #7A2433;box-shadow:inset 0 0 0 5px #F8F1E4,inset 0 0 0 6px #B8924A;padding-top:34px} html[data-style="hacienda"] .rsvp{border:2px solid #7A2433;border-radius:120px 120px 14px 14px;padding-top:48px;box-shadow:inset 0 0 0 6px #FFFBF5,inset 0 0 0 7px #B8924A} html[data-style="hacienda"] .count b{color:#24508F} /* ---------- Salvia: jardín, acuarela verde y hojas ---------- */ html[data-style="salvia"] body{background: radial-gradient(40% 30% at 0% 10%,rgba(126,146,117,.22),transparent 70%), radial-gradient(35% 28% at 100% 35%,rgba(168,139,78,.14),transparent 70%), radial-gradient(45% 30% at 0% 75%,rgba(126,146,117,.18),transparent 70%), radial-gradient(40% 30% at 100% 100%,rgba(126,146,117,.2),transparent 70%),#F1F3EC;background-attachment:fixed} html[data-style="salvia"] .hero .sprig{color:#55694F;width:200px} html[data-style="salvia"] .arco{border-radius:50%;aspect-ratio:1;outline:1px solid #A88B4E;outline-offset:8px} html[data-style="salvia"] h2{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(2.2rem,9vw,2.8rem);color:#3F5139} html[data-style="salvia"] h2::after{content:"";display:block;width:64px;height:32px;margin:6px auto 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M2 10h36M12 10c4-8 12-8 14-6-3 4-8 6-14 6zM12 10c4 8 12 8 14 6-3-4-8-6-14-6z' fill='none' stroke='%2355694F' stroke-width='1.2'/%3E%3C/svg%3E") center/contain no-repeat} html[data-style="salvia"] .tarj,html[data-style="salvia"] .rsvp{background:rgba(251,252,248,.85);border:0;border-radius:28px;box-shadow:0 18px 40px -26px rgba(63,81,57,.5)} html[data-style="salvia"] .btn{border-radius:999px} /* ---------- De noche: cielo estrellado y oro ---------- */ html[data-style="noche"] body{background: radial-gradient(1.2px 1.2px at 20px 30px,#F4E3B5 50%,transparent 51%) 0 0/140px 140px, radial-gradient(1px 1px at 90px 80px,#fff 50%,transparent 51%) 0 0/140px 140px, radial-gradient(1.4px 1.4px at 50px 120px,#D2B06B 50%,transparent 51%) 0 0/210px 210px, radial-gradient(1px 1px at 160px 40px,#fff 50%,transparent 51%) 0 0/210px 210px, radial-gradient(120% 70% at 50% 0%,#2A2640,#171522 60%,#0E0D16);background-attachment:fixed} html[data-style="noche"] body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(1.6px 1.6px at 70px 50px,#fff 50%,transparent 51%) 0 0/260px 260px,radial-gradient(1.6px 1.6px at 200px 170px,#F4E3B5 50%,transparent 51%) 0 0/260px 260px; animation:titila 3.5s ease-in-out infinite} @keyframes titila{50%{opacity:.15}} html[data-style="noche"] .hero .sprig{color:#D2B06B;width:190px} html[data-style="noche"] .names{text-shadow:0 0 22px rgba(210,176,107,.45)} html[data-style="noche"] h2{font-family:var(--serif);font-weight:500;text-transform:uppercase;letter-spacing:.16em;font-size:clamp(1.5rem,6.5vw,1.9rem)} html[data-style="noche"] h2::before{content:"✦";display:block;font-size:.9rem;letter-spacing:0;margin-bottom:8px;color:#D2B06B} html[data-style="noche"] .tarj,html[data-style="noche"] .rsvp{background:rgba(255,255,255,.04);border:1px solid rgba(210,176,107,.45);border-radius:14px;backdrop-filter:blur(2px)} html[data-style="noche"] .fld select,html[data-style="noche"] .fld textarea,html[data-style="noche"] .fld input{background:rgba(255,255,255,.06);color:#EFE7D6} @media (prefers-reduced-motion:reduce){html[data-style="noche"] body::before{animation:none}} /* ---------- Olivo: lino natural y rama de olivo ---------- */ html[data-style="olivo"] body{background:repeating-linear-gradient(0deg,rgba(95,107,71,.05) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(95,107,71,.05) 0 1px,transparent 1px 3px),linear-gradient(#F4EEE4,#EFE7DA)} html[data-style="olivo"] .hero .sprig{color:#5F6B47;width:190px} html[data-style="olivo"] .arco{border-radius:12px;outline:0;box-shadow:0 22px 40px -22px rgba(69,54,42,.55);transform:rotate(-1.5deg);border:10px solid #FBF8F2;border-bottom-width:40px} html[data-style="olivo"] h2{color:#45362A} html[data-style="olivo"] h2::after{content:"";display:block;width:46px;height:1px;background:#5F6B47;margin:12px auto 0} html[data-style="olivo"] .tarj,html[data-style="olivo"] .rsvp{background:#FBF8F2;border:0;border-radius:6px;box-shadow:0 1px 2px rgba(69,54,42,.12),0 16px 32px -24px rgba(69,54,42,.6)} /* ========================================================= Entrada de playa: vista desde arriba, olas y nombres en la arena ========================================================= */ .pl-intro{position:fixed;inset:0;z-index:60;overflow:hidden;cursor:pointer;outline:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' seed='2'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .18 0 0 0 .55 -.12'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url%28%23a%29'/%3E%3C/svg%3E") 0 0/220px 220px,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='800'%3E%3Cfilter id='o' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .02' numOctaves='3' seed='8' result='t'/%3E%3CfeDiffuseLighting in='t' lighting-color='%23fff' surfaceScale='3'%3E%3CfeDistantLight azimuth='90' elevation='55'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23o%29'/%3E%3C/svg%3E") center/cover, radial-gradient(120% 70% at 50% 70%,#F1DDB6 0%,#E8CC9A 55%,#D9B57C 100%);background-blend-mode:normal,soft-light,normal} .pl-intro[hidden]{display:none} .pl-mar{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3} .pl-arena{position:absolute;left:0;right:0;top:58%;transform:translateY(-50%);text-align:center;z-index:2;pointer-events:none} /* Letras grabadas en la arena: sombra arriba, luz abajo */ .pl-nombres,.pl-fecha,.pl-para{color:rgba(118,80,40,.72);text-shadow:0 1.5px 0 rgba(255,246,222,.75),0 -1px 0 rgba(90,58,24,.35);-webkit-text-stroke:.3px rgba(96,64,28,.25)} .pl-para{font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,4.5vw,1.3rem);letter-spacing:.04em} .pl-para b{display:block;font-family:var(--script);font-weight:400;font-style:normal;font-size:clamp(2rem,9vw,2.6rem);line-height:1.15} .pl-nombres{font-family:var(--script);font-size:clamp(4.2rem,20vw,6.4rem);line-height:1;margin-top:3vh;transform:rotate(-4deg)} .pl-fecha{font-family:var(--serif);font-size:clamp(1rem,4.4vw,1.25rem);letter-spacing:.32em;margin-top:2.2vh} .pl-concha,.pl-estrella{position:absolute;z-index:2;fill:none;stroke:rgba(150,104,58,.75);stroke-width:1.4;stroke-linejoin:round;filter:drop-shadow(0 2px 2px rgba(90,58,24,.3))} .pl-concha{width:46px;left:12%;bottom:13%;transform:rotate(-18deg);fill:rgba(248,232,205,.85)} .pl-estrella{width:42px;right:14%;bottom:24%;transform:rotate(14deg);fill:rgba(226,150,96,.75);stroke:rgba(160,88,48,.8)} .pl-pie{position:absolute;left:0;right:0;bottom:calc(22px + env(safe-area-inset-bottom,0px));text-align:center;z-index:4;font-family:var(--serif);font-style:italic; font-size:1.1rem;color:#7A5530;letter-spacing:.04em;animation:esLatido 2.6s ease-in-out infinite} .pl-intro:focus-visible .pl-pie{text-decoration:underline} /* ---------- Interior de playa ---------- */ html[data-style="playa"] body{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' seed='2'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .18 0 0 0 .55 -.12'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url%28%23a%29'/%3E%3C/svg%3E") 0 0/220px 220px,linear-gradient(#FBF6EC,#F6ECD9);background-blend-mode:soft-light,normal} html[data-style="playa"] .hero::before{background:linear-gradient(180deg,#0E5E73 0%,#1A8FA3 38%,#5FC6C4 70%,#BFE6DF 100%)} html[data-style="playa"] .hero{color:#F5FBFA;padding-bottom:90px} html[data-style="playa"] .hero::after{content:"";position:absolute;bottom:-1px;left:calc(50% - 50vw);width:100vw;height:60px;pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='60' viewBox='0 0 300 60'%3E%3Cpath d='M0 34 Q37 18 75 34 T150 34 T225 34 T300 34 V60 H0Z' fill='%23FBF6EC' fill-opacity='.55'/%3E%3C/svg%3E") 0 100%/300px 60px repeat-x,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='60' viewBox='0 0 240 60'%3E%3Cpath d='M0 30 Q30 10 60 30 T120 30 T180 30 T240 30 V60 H0Z' fill='%23FBF6EC'/%3E%3C/svg%3E") 0 100%/240px 60px repeat-x;animation:plOlas 9s linear infinite} @keyframes plOlas{to{background-position:300px 100%,-240px 100%}} html[data-style="playa"] .hero .sprig{color:#F5FBFA;width:190px} html[data-style="playa"] .names{color:#FFFFFF;text-shadow:0 2px 16px rgba(14,94,115,.45)} html[data-style="playa"] .names .amp{color:#F1DDB6} html[data-style="playa"] .hero .pre,html[data-style="playa"] .hero .where,html[data-style="playa"] .scroll{color:#E6F6F4} html[data-style="playa"] .arco{border-radius:50% 50% 46% 54% / 55% 50% 50% 45%;outline:3px solid rgba(255,255,255,.7);outline-offset:6px} html[data-style="playa"] section:not(.hero):not([hidden])::before{content:"";display:block;width:96px;height:14px;margin:0 auto 22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14'%3E%3Cpath d='M0 7c6-6 12-6 18 0s12 6 18 0 9-4 12-3' fill='none' stroke='%231A8FA3' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 0 50%/48px 14px repeat-x;animation:plOlita 3s linear infinite} @keyframes plOlita{to{background-position:48px 50%}} html[data-style="playa"] h2{color:#1A8FA3} html[data-style="playa"] .tarj,html[data-style="playa"] .rsvp{background:#FFFFFF;border:0;border-radius:22px;box-shadow:0 18px 36px -24px rgba(14,94,115,.45);border-top:4px solid #5FC6C4} html[data-style="playa"] .count b{color:#1A8FA3} @media (prefers-reduced-motion:reduce){.pl-pie{animation:none}html[data-style="playa"] .hero::after,html[data-style="playa"] section::before{animation:none!important}} /* WebGL: el canvas pinta también la arena, así que el texto va encima */ .pl-intro.gl .pl-mar{z-index:1} .pl-intro.gl .pl-arena,.pl-intro.gl .pl-concha,.pl-intro.gl .pl-estrella{z-index:2} .pl-intro.gl .pl-nombres,.pl-intro.gl .pl-fecha,.pl-intro.gl .pl-para{color:rgba(104,70,34,.7);text-shadow:0 1.5px 0 rgba(255,240,210,.6),0 -1px 1px rgba(70,44,16,.45)} /* Interior con mar vivo en la portada y arena realista */ .mar-portada{position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;height:100%;z-index:-1;pointer-events:none} html[data-style="playa"] .hero.con-mar::before{display:none} html[data-style="playa"] .hero.con-mar::after{display:none} html[data-style="playa"] .hero.con-mar .names,html[data-style="playa"] .hero.con-mar .pre,html[data-style="playa"] .hero.con-mar .when,html[data-style="playa"] .hero.con-mar .where{text-shadow:0 2px 14px rgba(5,50,70,.55)} html[data-style="playa"] body.arena-real{background-size:cover;background-position:center;background-attachment:fixed;background-blend-mode:normal} html[data-style="playa"] body.arena-real main section:not(.hero){background:rgba(251,246,236,.55);border-radius:24px;margin-top:22px;padding-left:14px;padding-right:14px;backdrop-filter:blur(1px)} /* ========================================================= Entrada de invierno: bosque nevado tras una ventana empañada ========================================================= */ .iv-intro{position:fixed;inset:0;z-index:60;overflow:hidden;cursor:pointer;outline:none;background:#1B2B4A;--x:50%;--y:50%;--r:-120px} .iv-intro[hidden]{display:none} .iv-escena,.iv-nieve,.iv-vaho{position:absolute;inset:0;width:100%;height:100%} .iv-escena img,.escena-portada img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 100%} .iv-nieve{pointer-events:none;z-index:1} /* El vaho: desenfoca lo que hay detrás; las letras son huecos en la máscara */ .iv-vaho{z-index:2;pointer-events:none; -webkit-backdrop-filter:blur(9px) saturate(.8) brightness(1.06);backdrop-filter:blur(9px) saturate(.8) brightness(1.06); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='e'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.5 -.92'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url%28%23e%29'/%3E%3C/svg%3E") 0 0/300px 300px, radial-gradient(110% 38% at 50% 29%,rgba(240,244,250,.8) 0%,rgba(240,244,250,.55) 55%,rgba(240,244,250,0) 100%),radial-gradient(125% 95% at 50% 42%,rgba(226,235,247,.08) 0%,rgba(226,235,247,.18) 55%,rgba(236,242,250,.5) 85%,rgba(244,248,252,.78) 100%)} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.iv-vaho{background-color:rgba(214,226,240,.72)}} .iv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .iv-pie{position:absolute;left:0;right:0;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:4;text-align:center;font-family:var(--serif);font-style:italic; font-size:1.1rem;color:#F3F6FB;text-shadow:0 1px 8px rgba(20,35,60,.6);letter-spacing:.04em;animation:esLatido 2.6s ease-in-out infinite} .iv-chispa{animation:ivChispa 3s ease-in-out infinite} @keyframes ivChispa{0%,100%{opacity:.1}50%{opacity:1}} @media (prefers-reduced-motion:reduce){.iv-pie,.iv-chispa{animation:none}} /* ---------- Interior de invierno ---------- */ html[data-style="invierno"] body{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='20' cy='30' r='1.6'/%3E%3Ccircle cx='120' cy='14' r='1.2'/%3E%3Ccircle cx='70' cy='90' r='2'/%3E%3Ccircle cx='160' cy='120' r='1.4'/%3E%3Ccircle cx='40' cy='150' r='1.1'/%3E%3Ccircle cx='110' cy='160' r='1.8'/%3E%3C/g%3E%3C/svg%3E") 0 0/180px 180px,linear-gradient(#F3F6F9,#E7EDF4);background-attachment:fixed} .nevada-fija{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5} .escena-portada{position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;z-index:-2;pointer-events:none;overflow:hidden} .escena-portada svg{width:100%;height:100%;display:block} .escena-portada::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(14,26,50,.35),rgba(14,26,50,.5) 40%,rgba(14,26,50,.42) 72%,rgba(243,246,249,0) 92%,#F3F6F9 100%)} html[data-style="invierno"] .hero{color:#FFFFFF} html[data-style="invierno"] .hero .sprig{color:#FFFFFF;width:180px} html[data-style="invierno"] .names{color:#FFFFFF;text-shadow:0 2px 18px rgba(15,30,55,.6)} html[data-style="invierno"] .names .amp{color:#DCE6F2} html[data-style="invierno"] .hero .pre,html[data-style="invierno"] .hero .when,html[data-style="invierno"] .hero .where,html[data-style="invierno"] .scroll{color:#F1F5FA;text-shadow:0 1px 10px rgba(15,30,55,.6)} html[data-style="invierno"] .arco{border-radius:999px 999px 0 0;outline:2px solid rgba(255,255,255,.75);outline-offset:6px} html[data-style="invierno"] h2{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,8.5vw,2.6rem);color:#23395B} html[data-style="invierno"] h2::before{content:"❄";display:block;font-size:1.1rem;color:#8FA6C0;margin-bottom:6px} html[data-style="invierno"] .tarj,html[data-style="invierno"] .rsvp{background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(143,166,192,.45);border-radius:18px;box-shadow:0 18px 40px -26px rgba(31,47,72,.45)} html[data-style="invierno"] .count b{color:#2F4A73} .iv-borde{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;opacity:.6;transition:opacity .4s} .iv-intro.limpiando .iv-borde{opacity:0} .iv-escena::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 32% at 50% 29%,rgba(8,16,34,.55),rgba(8,16,34,0) 100%);pointer-events:none} .iv-escena{position:absolute} /* ========================================================= Entrada de otoño: bosque dorado y hojas cayendo ========================================================= */ .ot-intro{position:fixed;inset:0;z-index:60;overflow:hidden;cursor:pointer;outline:none;background:#3A1E10} .ot-intro[hidden]{display:none} .ot-escena,.ot-hojas{position:absolute;inset:0;width:100%;height:100%} .ot-escena img{width:100%;height:100%;object-fit:cover;display:block} .ot-hojas{z-index:2;pointer-events:none} .ot-texto{position:absolute;left:0;right:0;top:24%;z-index:1;text-align:center;color:#FFF6E6;pointer-events:none; text-shadow:0 2px 16px rgba(60,22,6,.75),0 0 2px rgba(60,22,6,.5)} .ot-texto::before{content:"";position:absolute;left:50%;top:50%;width:min(110vw,620px);height:340px;transform:translate(-50%,-50%);z-index:-1; background:radial-gradient(closest-side,rgba(48,18,6,.62),rgba(48,18,6,0))} .ot-para{font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,4.6vw,1.35rem);letter-spacing:.04em} .ot-para b{display:block;font-family:var(--script);font-weight:400;font-style:normal;font-size:clamp(2.1rem,9.5vw,2.8rem);line-height:1.15;color:#FFE2B0} .ot-nombres{font-family:var(--script);font-size:clamp(3.8rem,18vw,6rem);line-height:1.05;margin-top:2.5vh} .ot-fecha{font-family:var(--serif);font-weight:600;font-size:clamp(1.05rem,4.6vw,1.3rem);letter-spacing:.32em;margin-top:1.8vh;color:#FFE2B0} .ot-pie{position:absolute;left:0;right:0;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:3;text-align:center;font-family:var(--serif);font-style:italic; font-size:1.08rem;color:#FFF1DC;text-shadow:0 1px 10px rgba(50,18,4,.85);letter-spacing:.03em;animation:esLatido 2.6s ease-in-out infinite;padding:0 20px} @media (prefers-reduced-motion:reduce){.ot-pie{animation:none}} /* ---------- Interior de otoño ---------- */ html[data-style="otono"] body{background:radial-gradient(60% 40% at 0% 0%,rgba(201,138,43,.16),transparent 70%),radial-gradient(50% 35% at 100% 60%,rgba(169,67,30,.1),transparent 70%),#FBF3E6;background-attachment:fixed} .hojas-fijas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5} .otono-portada{position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;z-index:-2;pointer-events:none;overflow:hidden} .otono-portada img{width:100%;height:100%;object-fit:cover;display:block} .otono-portada::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(50,20,6,.25),rgba(50,20,6,.45) 45%,rgba(50,20,6,.3) 75%,rgba(251,243,230,0) 92%,#FBF3E6 100%)} html[data-style="otono"] .hero{color:#FFF6E6} html[data-style="otono"] .hero .sprig{color:#FFE2B0;width:180px} html[data-style="otono"] .names{color:#FFF6E6;text-shadow:0 2px 18px rgba(60,22,6,.7)} html[data-style="otono"] .names .amp{color:#FFD08A} html[data-style="otono"] .hero .pre,html[data-style="otono"] .hero .when,html[data-style="otono"] .hero .where,html[data-style="otono"] .scroll{color:#FFF1DC;text-shadow:0 1px 10px rgba(60,22,6,.7)} html[data-style="otono"] .arco{outline-color:#FFD08A} html[data-style="otono"] h2{color:#8E3518} html[data-style="otono"] h2::after{content:"";display:block;width:70px;height:2px;margin:10px auto 0;background:linear-gradient(90deg,transparent,#C98A2B,#A9431E,#C98A2B,transparent)} html[data-style="otono"] .tarj,html[data-style="otono"] .rsvp{background:#FFFAF2;border:1px solid #EAD3B0;border-radius:14px;box-shadow:0 18px 36px -24px rgba(110,42,18,.45)} html[data-style="otono"] .count b{color:#A9431E} /* ========================================================= Entrada de bosque: capas en paralaje, neblina y luciérnagas ========================================================= */ .bq-intro{position:fixed;inset:0;z-index:60;overflow:hidden;cursor:pointer;outline:none;background:#0E1F1B;--px:0;--py:0} .bq-intro[hidden]{display:none} .bq-escena,.bq-luces{position:absolute;inset:0;width:100%;height:100%} .bq-escena{z-index:0} .bq-capa{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;display:block;transform-origin:50% 60%;will-change:transform} .bq-intro .bq-capa{transition:translate .6s ease-out} .bq-intro .bq-capa[data-capa="1"]{translate:calc(var(--px)*-6px) calc(var(--py)*-3px)} .bq-intro .bq-capa[data-capa="2"]{translate:calc(var(--px)*-14px) calc(var(--py)*-6px)} .bq-intro .bq-capa[data-capa="3"]{translate:calc(var(--px)*-26px) calc(var(--py)*-10px)} .bq-capa[data-capa="3"]{animation:bqMecer 9s ease-in-out infinite alternate} .bq-capa[data-capa="2"]{animation:bqMecer 12s ease-in-out -4s infinite alternate} @keyframes bqMecer{from{transform:scale(1.02) rotate(-.25deg)}to{transform:scale(1.03) rotate(.25deg)}} .bq-niebla{position:absolute;left:0;top:0;width:300%;height:100%;pointer-events:none;mix-blend-mode:screen; background: radial-gradient(18% 9% at 10% 72%,rgba(190,215,200,.35),transparent 70%), radial-gradient(22% 10% at 32% 80%,rgba(190,215,200,.3),transparent 70%), radial-gradient(16% 8% at 52% 68%,rgba(200,220,205,.32),transparent 70%), radial-gradient(24% 11% at 76% 78%,rgba(190,215,200,.3),transparent 70%), radial-gradient(18% 9% at 93% 70%,rgba(190,215,200,.32),transparent 70%); filter:blur(6px);animation:bqNiebla 60s linear infinite} .bq-niebla2{top:6%;opacity:.8;animation-duration:42s;animation-direction:reverse} @keyframes bqNiebla{from{transform:translateX(0)}to{transform:translateX(-66.66%)}} .bq-luces{z-index:3;pointer-events:none} .bq-escena::after{content:"";position:absolute;inset:0;z-index:5;background:linear-gradient(rgba(6,20,14,.2),rgba(6,20,14,.4) 40%,rgba(6,20,14,.1) 70%,rgba(6,20,14,.35))} .bq-texto{position:absolute;left:0;right:0;top:22%;z-index:2;text-align:center;color:#FFF8DC;pointer-events:none; text-shadow:0 2px 18px rgba(4,16,10,.85),0 0 2px rgba(4,16,10,.6)} .bq-texto::before{content:"";position:absolute;left:50%;top:50%;width:min(115vw,640px);height:360px;transform:translate(-50%,-50%);z-index:-1; background:radial-gradient(closest-side,rgba(6,20,14,.8),rgba(6,20,14,.45) 55%,rgba(6,20,14,0))} .bq-para,.bq-fecha{opacity:0;transform:translateY(8px);transition:opacity 1.4s ease,transform 1.4s ease} .bq-para{font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,4.6vw,1.35rem);letter-spacing:.04em} .bq-para b{display:block;font-family:var(--script);font-weight:400;font-style:normal;font-size:clamp(2.1rem,9.5vw,2.8rem);line-height:1.15;color:#F2DE9C} .bq-nombres{font-family:var(--script);font-size:clamp(3.8rem,18vw,6rem);line-height:1.05;margin-top:2.5vh;opacity:0;transition:opacity 1.8s ease .4s; text-shadow:0 0 22px rgba(230,220,120,.55),0 2px 18px rgba(4,16,10,.85)} .bq-fecha{font-family:var(--serif);font-weight:600;font-size:clamp(1.05rem,4.6vw,1.3rem);letter-spacing:.32em;margin-top:1.8vh;color:#F2DE9C} .bq-listo .bq-para,.bq-listo .bq-fecha,.bq-listo .bq-nombres{opacity:1;transform:none} .bq-listo .bq-fecha{transition-delay:.6s} .bq-pie{position:absolute;left:0;right:0;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:4;text-align:center;font-family:var(--serif);font-style:italic; font-size:1.08rem;color:#F4F1DA;text-shadow:0 1px 10px rgba(4,16,10,.9);letter-spacing:.03em;padding:0 20px;opacity:0;transition:opacity 1s ease 1.2s} .bq-listo .bq-pie{opacity:1;animation:esLatido 2.6s ease-in-out 2.2s infinite} @media (prefers-reduced-motion:reduce){.bq-capa,.bq-niebla,.bq-listo .bq-pie{animation:none}} /* ---------- Interior de bosque ---------- */ html[data-style="bosque"] body{background:radial-gradient(60% 40% at 0% 0%,rgba(46,82,51,.12),transparent 70%),radial-gradient(50% 35% at 100% 60%,rgba(179,146,72,.1),transparent 70%),#F3F4EC;background-attachment:fixed} .bosque-portada{position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;z-index:-2;pointer-events:none;overflow:hidden;background:#0E1F1B} .bosque-portada .bq-capa{inset:0;width:100%;height:100%} .bosque-portada::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(rgba(6,20,14,.3),rgba(6,20,14,.5) 45%,rgba(6,20,14,.35) 75%,rgba(243,244,236,0) 92%,#F3F4EC 100%)} .luces-portada{position:absolute;inset:0;width:100%;height:100%;z-index:3} html[data-style="bosque"] .hero{color:#FFF8DC} html[data-style="bosque"] .hero .sprig{color:#E6CF86;width:180px} html[data-style="bosque"] .names{color:#FFF8DC;text-shadow:0 0 22px rgba(230,220,120,.35),0 2px 18px rgba(4,16,10,.8)} html[data-style="bosque"] .names .amp{color:#E6CF86} html[data-style="bosque"] .hero .pre,html[data-style="bosque"] .hero .when,html[data-style="bosque"] .hero .where,html[data-style="bosque"] .scroll{color:#F4F1DA;text-shadow:0 1px 10px rgba(4,16,10,.8)} html[data-style="bosque"] .arco{outline-color:#E6CF86} html[data-style="bosque"] h2{color:#2E5233} html[data-style="bosque"] h2::after{content:"";display:block;width:70px;height:2px;margin:10px auto 0;background:linear-gradient(90deg,transparent,#B39248,#2E5233,#B39248,transparent)} html[data-style="bosque"] .tarj,html[data-style="bosque"] .rsvp{background:#FBFBF5;border:1px solid #D5DCC6;border-radius:14px;box-shadow:0 18px 36px -24px rgba(31,51,36,.45)} html[data-style="bosque"] .count b{color:#2E5233} /* ========================================================= Entrada anime: atardecer, ramas de cerezo y pétalos de sakura ========================================================= */ .sk-intro{position:fixed;inset:0;z-index:60;overflow:hidden;cursor:pointer;outline:none;background:#3B3470} .sk-intro[hidden]{display:none} .sk-escena,.sk-ramas,.sk-petalos,.sk-flash{position:absolute;inset:0;width:100%;height:100%} .sk-escena img,.sk-ramas img{width:100%;height:100%;object-fit:cover;display:block} .sk-ramas{z-index:1;transform-origin:0 0;animation:skMecer 7s ease-in-out infinite alternate;pointer-events:none} @keyframes skMecer{from{transform:rotate(-.4deg)}to{transform:rotate(.5deg) translateY(2px)}} .sk-petalos{z-index:3;pointer-events:none} .sk-flash{z-index:5;background:#FFF8FB;opacity:0;pointer-events:none} .sk-texto{position:absolute;left:0;right:0;top:32%;z-index:2;text-align:center;pointer-events:none;padding:0 14px;font-family:"M PLUS Rounded 1c",var(--serif)} .sk-jp{display:inline-block;font-weight:800;font-size:clamp(.95rem,4vw,1.1rem);letter-spacing:.35em;padding:.3em .5em .3em .85em;color:#fff; background:#D9487A;border-radius:999px;box-shadow:0 3px 0 #9E2D5A;opacity:0;transform:translateY(-10px)} .sk-para{margin-top:2.2vh;font-weight:500;font-size:clamp(1rem,4.3vw,1.2rem);color:#fff;text-shadow:0 1px 3px rgba(80,30,80,.8),0 0 12px rgba(80,30,80,.5);opacity:0} .sk-para b{display:block;font-weight:800;font-size:clamp(1.5rem,6.6vw,1.95rem);line-height:1.25;color:#FFE38A; text-shadow:2px 0 #6B2E6E,-2px 0 #6B2E6E,0 2px #6B2E6E,0 -2px #6B2E6E,1.5px 1.5px #6B2E6E,-1.5px 1.5px #6B2E6E,1.5px -1.5px #6B2E6E,-1.5px -1.5px #6B2E6E,0 4px 0 #4A1F52} .sk-nombres{position:relative;margin-top:1.4vh;font-weight:800;font-size:clamp(3rem,14.5vw,5rem);line-height:1.05;color:#fff;text-wrap:balance;letter-spacing:.01em;opacity:0;transform:scale(.6); text-shadow:3px 0 #D9487A,-3px 0 #D9487A,0 3px #D9487A,0 -3px #D9487A,2.2px 2.2px #D9487A,-2.2px 2.2px #D9487A,2.2px -2.2px #D9487A,-2.2px -2.2px #D9487A, 0 7px 0 #6B2E6E,3px 7px 0 #6B2E6E,-3px 7px 0 #6B2E6E,0 12px 18px rgba(60,20,70,.45)} .sk-nombres::before,.sk-nombres::after{content:"✦";position:absolute;color:#FFF6B8;font-size:.42em;text-shadow:0 0 10px #FFE38A,0 0 2px #fff;opacity:0} .sk-nombres::before{left:4%;top:-18%} .sk-nombres::after{right:5%;bottom:-6%;font-size:.3em} .sk-fecha{display:inline-block;margin-top:2vh;font-weight:800;font-size:clamp(1rem,4.4vw,1.2rem);letter-spacing:.25em;color:#6B2E6E;background:rgba(255,248,251,.92); padding:.35em .9em .35em 1.15em;border-radius:12px;box-shadow:0 3px 0 rgba(107,46,110,.35);opacity:0;transform:translateY(10px)} .sk-ver .sk-jp{animation:skBaja .6s cubic-bezier(.2,1.4,.4,1) forwards} .sk-ver .sk-para{animation:skAparece .6s ease .35s forwards} .sk-ver .sk-nombres{animation:skPop .8s cubic-bezier(.2,1.6,.4,1) .6s forwards} .sk-ver .sk-nombres::before{animation:skBrillo 2.2s ease-in-out 1.4s infinite} .sk-ver .sk-nombres::after{animation:skBrillo 2.2s ease-in-out 2.4s infinite} .sk-ver .sk-fecha{animation:skSube .6s cubic-bezier(.2,1.4,.4,1) 1.2s forwards} @keyframes skBaja{to{opacity:1;transform:none}} @keyframes skAparece{to{opacity:1}} @keyframes skPop{0%{opacity:0;transform:scale(.6) rotate(-4deg)}60%{opacity:1}100%{opacity:1;transform:none}} @keyframes skSube{to{opacity:1;transform:none}} @keyframes skBrillo{0%,100%{opacity:0;transform:scale(.4) rotate(0)}40%{opacity:1;transform:scale(1.1) rotate(45deg)}70%{opacity:0;transform:scale(.6) rotate(90deg)}} .sk-pie{position:absolute;left:0;right:0;bottom:calc(26px + env(safe-area-inset-bottom,0px));z-index:4;text-align:center;pointer-events:none;padding:0 20px;opacity:0} .sk-pie span{display:inline-block;font-family:"M PLUS Rounded 1c",var(--serif);font-weight:800;font-size:1rem;letter-spacing:.06em;color:#fff;background:rgba(107,46,110,.72); padding:.55em 1.2em;border-radius:999px;border:2px solid rgba(255,255,255,.75);backdrop-filter:blur(3px)} .sk-ver .sk-pie{animation:skAparece .6s ease 2.2s forwards} .sk-ver .sk-pie span{animation:esLatido 2.6s ease-in-out 2.8s infinite} @media (prefers-reduced-motion:reduce){ .sk-ramas,.sk-ver .sk-pie span,.sk-ver .sk-nombres::before,.sk-ver .sk-nombres::after{animation:none} .sk-ver .sk-jp,.sk-ver .sk-para,.sk-ver .sk-nombres,.sk-ver .sk-fecha,.sk-ver .sk-pie{animation-duration:.01s;animation-delay:0s} } /* ---------- Interior anime ---------- */ html[data-style="sakura"] body{background:radial-gradient(60% 40% at 0% 0%,rgba(247,180,201,.25),transparent 70%),radial-gradient(50% 35% at 100% 60%,rgba(170,150,220,.14),transparent 70%),#FFF7F9;background-attachment:fixed} .sakura-portada{position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;z-index:-2;pointer-events:none;overflow:hidden;background:#3B3470} .sakura-portada img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .sakura-portada::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(rgba(60,40,100,.08),rgba(60,30,90,.3) 45%,rgba(60,30,90,.22) 75%,rgba(255,247,249,0) 92%,#FFF7F9 100%)} html[data-style="sakura"] .hero{color:#fff} html[data-style="sakura"] .hero .sprig{color:#fff;width:150px;filter:drop-shadow(0 2px 3px rgba(107,46,110,.6))} html[data-style="sakura"] .names{font-family:"M PLUS Rounded 1c",var(--serif);font-weight:800;font-size:clamp(3rem,15vw,5rem);line-height:1.05;color:#fff; text-shadow:3px 0 #D9487A,-3px 0 #D9487A,0 3px #D9487A,0 -3px #D9487A,2.2px 2.2px #D9487A,-2.2px 2.2px #D9487A,2.2px -2.2px #D9487A,-2.2px -2.2px #D9487A,0 7px 0 #6B2E6E,0 12px 18px rgba(60,20,70,.4)} html[data-style="sakura"] .names .amp{color:#FFE38A;text-shadow:0 2px 0 #6B2E6E} html[data-style="sakura"] .hero .pre,html[data-style="sakura"] .hero .when,html[data-style="sakura"] .hero .where,html[data-style="sakura"] .scroll{color:#fff;text-shadow:0 1px 3px rgba(80,30,80,.85),0 0 12px rgba(80,30,80,.5)} html[data-style="sakura"] .arco{outline-color:#F7B4C9} html[data-style="sakura"] h2{font-family:"M PLUS Rounded 1c",var(--serif);font-weight:800;font-size:clamp(1.7rem,7vw,2.2rem);color:#B83A6B} html[data-style="sakura"] h2::after{content:"";display:block;width:26px;height:26px;margin:8px auto 0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cg fill='%23F391B0'%3E%3Cpath id='p' d='M0 0C-5-2-5-8-1.6-10L0-8.5 1.6-10C5-8 5-2 0 0Z'/%3E%3Cuse href='%23p' transform='rotate(72)'/%3E%3Cuse href='%23p' transform='rotate(144)'/%3E%3Cuse href='%23p' transform='rotate(216)'/%3E%3Cuse href='%23p' transform='rotate(288)'/%3E%3C/g%3E%3Ccircle r='2' fill='%23C8406F'/%3E%3C/svg%3E") center/contain no-repeat} html[data-style="sakura"] .tarj,html[data-style="sakura"] .rsvp{background:#fff;border:2px solid #F7CDDA;border-radius:20px;box-shadow:0 6px 0 #F7CDDA,0 20px 36px -24px rgba(107,46,110,.45)} html[data-style="sakura"] .count b{color:#D9487A} /* ========================================================= Pase de mesa (aviso de mesas 2 o 3 días antes) ========================================================= */ .sec-mesa{text-align:center} .mesa-pases{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:6px 0 4px} .mesa-pase{position:relative;flex:1 1 220px;max-width:300px;background:var(--card,#fff);color:var(--ink);border:1px solid color-mix(in srgb,var(--gold) 55%,transparent); border-radius:16px;padding:18px 18px 20px;box-shadow:0 18px 36px -26px rgba(0,0,0,.45)} /* muescas de boleto */ .mesa-pase::before,.mesa-pase::after{content:"";position:absolute;top:58%;width:18px;height:18px;border-radius:50%;background:var(--paper);border:1px solid color-mix(in srgb,var(--gold) 55%,transparent)} .mesa-pase::before{left:-10px;clip-path:inset(0 0 0 50%)} .mesa-pase::after{right:-10px;clip-path:inset(0 50% 0 0)} .mp-cab{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--accent);padding-bottom:10px;border-bottom:1px dashed color-mix(in srgb,var(--gold) 60%,transparent)} .mp-num{margin:12px 0 2px;line-height:1} .mp-num small{display:block;font-family:var(--serif);font-size:.8rem;letter-spacing:.42em;margin-left:.42em;color:var(--gold)} .mp-num b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(4.4rem,22vw,5.6rem);color:var(--accent);font-variant-numeric:lining-nums} .mp-nombre{font-family:var(--script);font-size:1.7rem;color:var(--accent);line-height:1.1} .mp-lugares{margin-top:12px;padding-top:12px;border-top:1px dashed color-mix(in srgb,var(--gold) 60%,transparent);font-size:.95rem;letter-spacing:.06em} .mp-quienes{margin-top:6px;font-size:.88rem;opacity:.75;line-height:1.4} .mesa-nota{max-width:34ch;margin:16px auto 0;font-style:italic;opacity:.85} html[data-tema="periodico"] .mesa-pase{border-radius:0;border:2px solid var(--ink);box-shadow:none} html[data-tema="periodico"] .mp-num b{font-family:"Playfair Display",Georgia,serif;font-weight:900} html[data-style="sakura"] .mp-num b{font-family:"M PLUS Rounded 1c",var(--serif);font-weight:800} /* ========================================================= Entrada "Gala": etiqueta rigurosa, oro de 18k y diamante ========================================================= */ .ga-intro{position:fixed;inset:0;z-index:60;overflow:hidden;cursor:pointer;outline:none;background:#0D0D0F} .ga-intro[hidden]{display:none} .ga-oro{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.6s ease} .ga-diam{position:absolute;display:block;opacity:0;transform:scale(.92);transition:opacity 1.4s ease .5s,transform 2.2s cubic-bezier(.2,.8,.2,1) .5s} .ga-listo .ga-oro{opacity:1} .ga-listo .ga-diam{opacity:1;transform:none} .ga-pie{position:absolute;left:0;right:0;bottom:calc(38px + env(safe-area-inset-bottom,0px));z-index:3;text-align:center;pointer-events:none; font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:.78rem;letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;color:rgba(233,226,210,.55); opacity:0;transition:opacity 1.2s ease 2.4s} .ga-listo .ga-pie{opacity:1} .ga-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* ---------- Interior "Gala": papel negro, marfil y hoja de oro ---------- */ html[data-style="gala"]{color-scheme:dark} html[data-style="gala"] body{background:#0D0D0F var(--ga-papel,none);color:#E9E2D2} html[data-style="gala"] .hero{color:#E9E2D2} html[data-style="gala"] .names,html[data-style="gala"] h2,html[data-style="gala"] .count b,html[data-style="gala"] .oro-foil{ background:linear-gradient(105deg,#7A5A22 0%,#C9A04E 16%,#F6E3A1 30%,#B88A3A 44%,#FFF4C8 50%,#A87E33 60%,#E3C77A 78%,#8C6A2B 100%); background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gaHoja 9s ease-in-out infinite alternate} @keyframes gaHoja{from{background-position:0% 0}to{background-position:100% 0}} html[data-style="gala"] .names{font-family:"Bodoni Moda","Didot",Georgia,serif;font-weight:400;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(2.6rem,13vw,4rem);line-height:1.1} html[data-style="gala"] .names .amp{font-style:italic;text-transform:none;letter-spacing:0;font-size:.55em;-webkit-text-fill-color:transparent} html[data-style="gala"] .hero .sprig{color:#C9A04E;width:150px} html[data-style="gala"] .hero .pre,html[data-style="gala"] .hero .when,html[data-style="gala"] .hero .where,html[data-style="gala"] .scroll,html[data-style="gala"] .kicker{ font-family:"Cormorant Garamond",serif;font-weight:500;letter-spacing:.32em;text-transform:uppercase;font-size:.82rem;color:rgba(233,226,210,.78)} html[data-style="gala"] h2{font-family:"Bodoni Moda","Didot",Georgia,serif;font-weight:400;text-transform:uppercase;letter-spacing:.2em;font-size:clamp(1.35rem,6vw,1.75rem);line-height:1.3} html[data-style="gala"] h2::before{content:"";display:block;width:26px;height:26px;margin:0 auto 14px;background:var(--ga-diamante,none) center/contain no-repeat} html[data-style="gala"] h2::after{content:"";display:block;width:64px;height:1px;margin:14px auto 0;background:linear-gradient(90deg,transparent,#C9A04E,transparent)} html[data-style="gala"] .tarj,html[data-style="gala"] .rsvp{background:rgba(255,255,255,.025);border:1px solid rgba(201,160,78,.5);border-radius:0;box-shadow:none;outline:1px solid rgba(201,160,78,.22);outline-offset:5px} html[data-style="gala"] .fld select,html[data-style="gala"] .fld textarea,html[data-style="gala"] .fld input{background:rgba(255,255,255,.04);color:#E9E2D2;border-color:rgba(201,160,78,.4)} html[data-style="gala"] .arco{outline-color:#C9A04E} html[data-style="gala"] .cita blockquote{font-family:"Bodoni Moda",serif;font-style:italic} @media (prefers-reduced-motion:reduce){html[data-style="gala"] .names,html[data-style="gala"] h2,html[data-style="gala"] .count b{animation:none}.ga-oro,.ga-diam,.ga-pie{transition:none}} /* Invitación en prueba gratis */ .cinta-prueba { position: fixed; z-index: 9999; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); padding: 6px 16px; border-radius: 999px; background: rgba(28, 25, 23, .78); color: #FFFFFF; font: 500 11px/1.2 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; pointer-events: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); white-space: nowrap; } @media print { .cinta-prueba { display: none; } } /* ========================================================= Entrada "Jardín": escena en 3D. Capas a distintas profundidades (manchas al fondo, arreglos, peonía, texto, flores desenfocadas al frente) que se mueven con el dedo, el mouse o la inclinación del celular. ========================================================= */ .jd-intro{position:fixed;inset:0;z-index:60;overflow:hidden;cursor:pointer;outline:none; background:url("/escenas/jardin/papel.jpg") center/512px repeat,#FBF7F1} .jd-intro[hidden]{display:none} .jd-escena{position:absolute;inset:0;perspective:900px;perspective-origin:50% 42%} .jd-mundo{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform} .jd-mundo>*{position:absolute} /* Fondo: manchas de acuarela muy lejos */ .jd-fondo{inset:-30%;transform:translateZ(-420px) scale(1.47);transform-style:flat} .jd-fondo i{position:absolute;border-radius:50%;filter:blur(18px);opacity:0;transition:opacity 2s ease} .jd-fondo i:nth-child(1){left:12%;top:18%;width:34%;height:26%;background:radial-gradient(#F3C9C6,transparent 70%)} .jd-fondo i:nth-child(2){right:10%;top:30%;width:30%;height:24%;background:radial-gradient(#D7E3D2,transparent 70%)} .jd-fondo i:nth-child(3){left:30%;bottom:16%;width:36%;height:22%;background:radial-gradient(#F7DCC8,transparent 70%)} .jd-fondo i:nth-child(4){left:5%;bottom:34%;width:22%;height:18%;background:radial-gradient(#E9D3E0,transparent 70%)} .jd-fondo i:nth-child(5){right:22%;top:6%;width:24%;height:16%;background:radial-gradient(#F3D5D2,transparent 70%)} .jd-ver .jd-fondo i{opacity:.5} /* Arreglos de las esquinas (profundidad media) */ .jd-esq{width:min(80vw,62vh,430px);height:auto;pointer-events:none;opacity:0; transition:opacity 1.4s ease,transform 2.6s cubic-bezier(.2,.8,.2,1)} .jd-esq-a{left:-4vw;top:-4vw;transform-origin:0 0;transform:translateZ(-90px) scale(.9) rotate(-5deg)} .jd-esq-b{right:-4vw;bottom:-4vw;transform-origin:50% 50%;transform:translateZ(-90px) rotate(175deg) scale(.9)} .jd-ver .jd-esq-a{opacity:1;transform:translateZ(-90px) scale(1.1)} .jd-ver .jd-esq-b{opacity:1;transform:translateZ(-90px) rotate(180deg) scale(1.1);transition-delay:.25s} /* Flores desenfocadas muy cerca de la cámara */ .jd-cerca{width:min(62vw,300px);height:auto;pointer-events:none;opacity:0;transition:opacity 1.6s ease .6s,transform 3s cubic-bezier(.2,.8,.2,1) .6s} .jd-cerca-a{right:-12vw;top:-2vh;transform:translateZ(230px) scale(.6) rotate(20deg)} .jd-cerca-b{left:-4vw;bottom:4vh;transform:translateZ(260px) scale(.55) rotate(-30deg)} .jd-ver .jd-cerca-a{opacity:.95;transform:translateZ(230px) scale(.75) rotate(8deg)} .jd-ver .jd-cerca-b{opacity:.95;transform:translateZ(260px) scale(.72) rotate(-12deg)} /* Peonía en 3D: cada pétalo gira sobre su base, de capullo cerrado a flor abierta */ .jd-flor{left:50%;top:var(--flor-y,25%);width:0;height:0;transform-style:preserve-3d; transform:translateZ(70px) rotateX(52deg) rotateZ(var(--giro,-40deg)) scale(var(--flor-esc,.55));transition:transform 4.2s cubic-bezier(.3,.6,.25,1) .3s} .jd-ver .jd-flor{--giro:0deg;--flor-esc:1} .jd-flor .pt{position:absolute;bottom:0;left:calc(var(--w) / -2);width:var(--w);height:auto;transform-origin:50% 100%;filter:var(--f,none); transform:rotateZ(var(--a)) rotateX(var(--c)) scale(.7);opacity:0; transition:transform 3.6s cubic-bezier(.3,.55,.25,1) calc(var(--d) + .4s),opacity 1s ease calc(var(--d) + .3s)} .jd-ver .jd-flor .pt{transform:rotateZ(var(--a)) rotateX(var(--o));opacity:1} .jd-flor .cz{position:absolute;left:calc(var(--w) / -2);top:calc(var(--w) / -2);width:var(--w);height:auto;transform:translateZ(6px) scale(.3);opacity:0; transition:transform 3s cubic-bezier(.2,.8,.2,1) 1.6s,opacity 1.2s ease 1.6s} .jd-ver .jd-flor .cz{transform:translateZ(6px);opacity:1} /* Al abrir: los pétalos se desprenden y vuelan hacia la cámara */ .jd-flor.vuela .pt{transform:rotateZ(var(--a)) rotateX(var(--o)) translate3d(var(--vx),var(--vy),var(--vz)) rotate3d(1,1,0,var(--vr));opacity:0; transition:transform 1.9s cubic-bezier(.35,.1,.6,.7) var(--vd),opacity 1s ease calc(var(--vd) + .8s)} .jd-flor.vuela .cz{transform:translateZ(260px) scale(1.6);opacity:0;transition:transform 1.4s cubic-bezier(.45,0,.75,.55),opacity .9s ease .4s} /* Texto (plano de la pantalla) */ .jd-texto{left:0;right:0;top:var(--texto-y,47%);text-align:center;pointer-events:none;padding:0 28px;color:#4E3E40} .jd-para{font-family:var(--serif);font-style:italic;font-size:clamp(1.02rem,4.4vw,1.2rem);opacity:0;transform:translateY(8px);transition:opacity 1s ease 1.4s,transform 1s ease 1.4s} .jd-para b{display:block;font-style:normal;font-weight:500;font-size:clamp(1.25rem,5.6vw,1.55rem);letter-spacing:.04em;color:#7C4A55;margin-top:.15em} .jd-nombres{font-family:var(--script);font-size:clamp(3.2rem,15vw,5.2rem);line-height:1;color:#A85D6B;margin:.28em 0 .05em;text-wrap:balance; opacity:0;transform:scale(.94);transition:opacity 1.4s ease 1.8s,transform 1.8s cubic-bezier(.2,.8,.2,1) 1.8s} .jd-nombres .amp{display:block;font-size:.5em;color:#8FA58A;margin:.04em 0} .jd-fecha{font-family:var(--serif);font-weight:500;font-size:clamp(.95rem,4vw,1.1rem);letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;color:#6E5A5C;margin-top:.6em; opacity:0;transition:opacity 1s ease 2.4s} .jd-pie{margin-top:5vh;font-family:var(--serif);font-weight:500;font-size:.8rem;letter-spacing:.38em;text-indent:.38em;text-transform:uppercase;color:#8A6E70; opacity:0;transition:opacity 1s ease 3.2s} .jd-ver .jd-para,.jd-ver .jd-nombres{opacity:1;transform:none} .jd-ver .jd-fecha{opacity:1} .jd-ver .jd-pie{opacity:.85;animation:esLatido 2.8s ease-in-out 4s infinite} .jd-petalos{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none} @media (min-aspect-ratio:4/5){.jd-intro{--flor-y:22%;--texto-y:40%}.jd-esq{width:min(44vw,58vh,520px)}.jd-cerca{width:min(26vw,300px)}.jd-cerca-a{right:6vw;top:6vh}.jd-cerca-b{left:6vw;bottom:6vh}} @media (max-height:700px){.jd-intro{--flor-y:21%;--texto-y:41%}} @media (prefers-reduced-motion:reduce){ .jd-esq,.jd-cerca,.jd-flor,.jd-flor .pt,.jd-flor .cz,.jd-para,.jd-nombres,.jd-fecha,.jd-pie,.jd-fondo i{transition-duration:.01s!important;transition-delay:0s!important} .jd-ver .jd-pie{animation:none}} /* ---------- Interior "Jardín" ---------- */ html[data-style="jardin"] body{background:url("/escenas/jardin/papel.jpg") center/512px repeat,#FBF7F1} html[data-style="jardin"] .hero{position:relative} .jardin-portada{position:absolute;top:0;left:calc(50% - 50vw);width:100vw;height:min(100%,100svh);z-index:-1;pointer-events:none;overflow:hidden} .jardin-portada img{position:absolute;top:-2vw;width:min(60vw,48vh,400px);height:auto;mix-blend-mode:multiply} .jardin-portada .izq{left:-2vw} .jardin-portada .der{right:-2vw;transform:scaleX(-1)} .jd-orn{display:block;width:min(52vw,220px);height:auto;margin:0 auto 6px;mix-blend-mode:multiply} html[data-style="jardin"] .names{color:#A85D6B} html[data-style="jardin"] .names .amp{color:#8FA58A} html[data-style="jardin"] h2{color:#A85D6B} html[data-style="jardin"] h2::after{content:"";display:block;width:120px;height:44px;margin:4px auto 0; background:url("/escenas/jardin/ramito.webp") center/contain no-repeat;mix-blend-mode:multiply} html[data-style="jardin"] .tarj,html[data-style="jardin"] .rsvp{background:rgba(255,253,249,.88);border:1px solid #EAD3CF;border-radius:20px;box-shadow:0 18px 40px -30px rgba(120,70,80,.45)} html[data-style="jardin"] .count b{color:#A85D6B} html[data-style="jardin"] .arco{outline-color:#EAD3CF} /* ========================================================= Diamante: estuche de terciopelo azul marino (fotos) que se abre con luz ========================================================= */ html[data-style="diamante"]{--paper:#0E1532;--ink:#ECEAF2;--accent:#D9BE84;--gold:#D9BE84;--soft:#1A2350;--env:#1E2C5E;--env-dark:#131C3D;--card:#141C40} .dm-intro{position:fixed;inset:0;z-index:60;overflow:hidden;cursor:pointer;outline:none; background:radial-gradient(ellipse 80% 60% at 50% 48%,#FFFFFF 0%,#F7F8FB 55%,#E6E9F0 100%)} .dm-intro[hidden]{display:none} /* al abrir se apaga la luz del cuarto */ .dm-noche{position:absolute;inset:0;opacity:0;pointer-events:none;background:radial-gradient(ellipse 70% 55% at 50% 50%,#1A2452 0%,#0C1230 55%,#05081A 100%)} .dm-escena{position:absolute;left:50%;top:51%;width:min(100vw,60vh,600px);aspect-ratio:1;transform:translate(-50%,-50%);perspective:1100px} .dm-halo{position:absolute;left:50%;top:50%;width:120%;height:120%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:0; background:radial-gradient(circle at 50% 48%,rgba(255,214,140,.55) 0%,rgba(255,190,110,.22) 22%,rgba(255,190,110,0) 55%)} .dm-joya{position:absolute;inset:0;will-change:transform} .dm-sin-cerrado .dm-cerrado,.dm-sin-cerrado .dm-ranura,.dm-sin-abriendo .dm-abriendo{visibility:hidden!important;opacity:0!important} .dm-img{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;user-select:none} .dm-cerrado{transform-origin:49% 53.5%;transform:translate(1%,-3.5%) scale(1.22);transition:opacity 1.2s ease} .dm-ver .dm-cerrado{opacity:1} /* luz que se escapa por la ranura */ .dm-ranura{position:absolute;left:49%;top:54%;width:46%;height:5%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none; background:radial-gradient(ellipse at center,rgba(255,226,150,.95) 0%,rgba(255,200,110,.5) 18%,rgba(255,190,90,0) 62%); opacity:0;animation:dmRanura 3.2s ease-in-out 1.2s infinite} .dm-ver .dm-ranura{opacity:.7} @keyframes dmRanura{0%,100%{opacity:.45;transform:translate(-50%,-50%) scaleX(.85)}50%{opacity:.95;transform:translate(-50%,-50%) scaleX(1.08)}} /* haz del foco de la tapa sobre el anillo */ .dm-cono{position:absolute;left:32%;top:18%;width:36%;height:28%;pointer-events:none;opacity:0;mix-blend-mode:screen; clip-path:polygon(44% 0,56% 0,100% 100%,0 100%); background:linear-gradient(180deg,rgba(235,242,255,.85) 0%,rgba(200,215,255,.35) 45%,rgba(190,205,255,0) 100%);filter:blur(3px)} .dm-cab,.dm-pie,.dm-final{position:absolute;left:0;right:0;text-align:center;pointer-events:none;padding:0 24px} .dm-cab{top:calc(7vh + env(safe-area-inset-top,0px));color:#1B2547;opacity:0;transform:translateY(8px);transition:opacity 1.1s ease .5s,transform 1.1s ease .5s} .dm-para{font-family:var(--serif);font-style:italic;font-size:clamp(1rem,4.3vw,1.18rem);color:#4A5272} .dm-fam{font-family:var(--script);font-size:clamp(2.4rem,11vw,3.6rem);line-height:1.15;color:#1E2C5E;margin-top:.1em;text-wrap:balance} .dm-ver .dm-cab{opacity:1;transform:none} .dm-pie{bottom:calc(8vh + env(safe-area-inset-bottom,0px));font-family:var(--serif);font-weight:600;font-size:.8rem;letter-spacing:.4em;text-indent:.4em;text-transform:uppercase;color:#8A6A2E;opacity:0;transition:opacity 1s ease 1.4s} .dm-ver .dm-pie{opacity:.9;animation:esLatido 2.8s ease-in-out 3.5s infinite} .dm-abrir .dm-pie,.dm-abrir .dm-ranura{animation:none} .dm-abrir .dm-pie,.dm-abrir .dm-cab,.dm-abrir .dm-img{transition:none} .dm-final{bottom:calc(6vh + env(safe-area-inset-bottom,0px));opacity:0} .dm-nombres{font-family:var(--script);font-size:clamp(3rem,14vw,4.8rem);line-height:1.05;color:#F4EEDF;text-wrap:balance;text-shadow:0 0 24px rgba(217,190,132,.45)} .dm-nombres .amp{color:#D9BE84;font-size:.6em;margin:0 .12em} .dm-fecha{margin-top:.5em;font-family:var(--serif);font-weight:600;font-size:clamp(.85rem,3.6vw,1rem);letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;color:#D9BE84} .dm-brillo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} @media (min-aspect-ratio:4/5){.dm-escena{top:50%;width:min(56vh,600px)}.dm-final{bottom:4vh}} @media (prefers-reduced-motion:reduce){.dm-ranura{animation:none}.dm-ver .dm-pie{animation:none}} /* Interior: terciopelo azul de noche con oro */ html[data-style="diamante"] body{background:radial-gradient(ellipse 110% 55% at 50% 0%,#1E2A5C 0%,#111A3E 45%,#0B1129 100%) fixed,#0E1532;color:#ECEAF2} html[data-style="diamante"] .hero .sprig{color:#D9BE84} html[data-style="diamante"] .names{color:#F4EEDF;text-shadow:0 0 26px rgba(217,190,132,.35)} html[data-style="diamante"] .names .amp{color:#D9BE84} html[data-style="diamante"] h2{color:#D9BE84} html[data-style="diamante"] h2::after{content:"";display:block;width:110px;height:14px;margin:8px auto 0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 14' fill='none' stroke='%23D9BE84' stroke-width='1.2'%3E%3Cpath d='M2 7h40M68 7h40M48 4h14l4 3-11 6-11-6Z'/%3E%3C/svg%3E") center/contain no-repeat} html[data-style="diamante"] .tarj,html[data-style="diamante"] .rsvp{background:rgba(255,255,255,.045);border:1px solid rgba(217,190,132,.42);border-radius:16px;box-shadow:0 24px 50px -30px rgba(0,0,0,.6)} html[data-style="diamante"] .fld select,html[data-style="diamante"] .fld textarea,html[data-style="diamante"] .fld input{background:rgba(255,255,255,.06);color:#ECEAF2;border-color:rgba(217,190,132,.4)} html[data-style="diamante"] .count b{color:#F4EEDF} html[data-style="diamante"] .arco{outline-color:#D9BE84} /* ---------- Cargando (antes de conocer el estilo de la boda) ---------- */ .cargando{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px; background:#FFFFFF;color:#2A2A33;padding:24px;text-align:center;opacity:0;animation:cgAparece .4s ease .15s forwards;transition:opacity .45s ease} .cargando.cg-fuera{opacity:0!important;pointer-events:none} .cg-ramo{position:relative;width:min(62vw,260px);aspect-ratio:1} .cg-ramo img{position:relative;width:100%;height:100%;display:block;mix-blend-mode:multiply;transform-origin:50% 88%; animation:cgEntra 1.1s cubic-bezier(.2,.8,.2,1) .15s both,cgMece 4.2s ease-in-out 1.25s infinite} /* resplandor dorado que respira detrás del ramo */ .cg-halo{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle,rgba(232,200,130,.45) 0%,rgba(232,200,130,0) 65%); animation:cgRespira 2.8s ease-in-out infinite} /* destellos que suben y se apagan */ .cg-ramo i{position:absolute;bottom:30%;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle,#FFF6DC 0%,#E6C27A 45%,rgba(230,194,122,0) 70%); opacity:0;animation:cgChispa 3s ease-out infinite} .cg-ramo i:nth-of-type(1){left:18%;animation-delay:.2s} .cg-ramo i:nth-of-type(2){left:34%;animation-delay:1.1s;width:4px;height:4px} .cg-ramo i:nth-of-type(3){left:52%;animation-delay:.6s} .cg-ramo i:nth-of-type(4){left:66%;animation-delay:1.7s;width:5px;height:5px} .cg-ramo i:nth-of-type(5){left:80%;animation-delay:2.3s;width:4px;height:4px} .cg-ramo i:nth-of-type(6){left:44%;animation-delay:2.7s;width:7px;height:7px} .cg-texto{margin:0;font-family:var(--serif);font-size:.82rem;font-weight:600;letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;color:#6B6B76} .cargando.cg-error .cg-ramo{width:min(40vw,150px)} .cargando.cg-error .cg-ramo i,.cargando.cg-error .cg-halo{display:none} .cargando.cg-error .cg-texto{font-size:1.15rem;font-weight:500;letter-spacing:0;text-indent:0;text-transform:none;max-width:320px;line-height:1.5;color:#2A2A33} @keyframes cgAparece{to{opacity:1}} @keyframes cgEntra{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}} @keyframes cgMece{0%,100%{transform:rotate(-2.2deg) translateY(0)}50%{transform:rotate(2.2deg) translateY(-6px)}} @keyframes cgRespira{0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.06)}} @keyframes cgChispa{0%{opacity:0;transform:translate(0,0) scale(.4)}20%{opacity:1}100%{opacity:0;transform:translate(10px,-120px) scale(1)}} @media (prefers-reduced-motion:reduce){.cg-ramo img,.cg-halo,.cg-ramo i{animation:none}.cg-ramo i{display:none}} /* ========================================================= Nupcial: carrusel 3D de fotos (velo, encaje, anillo, argollas, vestido) ========================================================= */ html[data-style="nupcial"]{--paper:#FFFFFF;--ink:#2A2A33;--accent:#A88446;--gold:#B8924A;--soft:#F1F2F5;--env:#2A2A33;--env-dark:#16161C;--card:#FFFFFF} .nu-intro{position:fixed;inset:0;z-index:60;overflow:hidden;cursor:grab;outline:none;touch-action:pan-y;user-select:none; background:radial-gradient(ellipse 90% 60% at 50% 46%,#FFFFFF 0%,#F6F7F9 55%,#E7E9EE 100%)} .nu-intro[hidden]{display:none} .nu-intro.nu-arrastra{cursor:grabbing} .nu-polvo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .nu-escena{position:absolute;left:0;right:0;top:50%;height:0;perspective:1100px;perspective-origin:50% 0} .nu-carrusel{--w:min(46vw,27vh,250px);position:absolute;left:50%;top:0;width:var(--w);aspect-ratio:3/4;margin-left:calc(var(--w) / -2); transform:translateY(-54%) translateZ(var(--zoom,0px)) rotateX(var(--tilt,-4deg)) rotateY(var(--ang,0deg));transform-style:preserve-3d;will-change:transform} .nu-carta{--r:calc(var(--w) * .98);position:absolute;inset:0;margin:0;border-radius:999px 999px 16px 16px;overflow:hidden;background:#fff; transform:rotateY(calc(var(--i) * 60deg)) translateZ(var(--r));backface-visibility:hidden;-webkit-backface-visibility:hidden; box-shadow:0 24px 40px -22px rgba(30,30,45,.45),0 0 0 1px rgba(184,146,74,.55);transition:filter .5s ease} .nu-carta::before{content:"";position:absolute;inset:7px;border-radius:999px 999px 11px 11px;border:1px solid rgba(255,255,255,.75);z-index:2;pointer-events:none} .nu-carta img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none} .nu-carta.atras{filter:brightness(.92) saturate(.9)} /* destello del solitario */ .nu-estrella{position:absolute;left:49.7%;top:37%;width:70%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.4);opacity:0;z-index:1;pointer-events:none;mix-blend-mode:screen; background: radial-gradient(circle,rgba(255,255,255,1) 0 3%,rgba(210,225,255,.6) 7%,rgba(200,215,255,0) 22%), linear-gradient(90deg,transparent 0 47%,rgba(255,255,255,.95) 50%,transparent 53%) center/100% 3% no-repeat, linear-gradient(0deg,transparent 0 47%,rgba(255,255,255,.95) 50%,transparent 53%) center/3% 100% no-repeat} .nu-anillo.al-frente .nu-estrella{animation:nuDestello 2.2s ease-in-out infinite} @keyframes nuDestello{0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(0)}35%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(30deg)}60%{opacity:.2;transform:translate(-50%,-50%) scale(.6) rotate(45deg)}} /* brillo que recorre el oro de las argollas */ .nu-argollas::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:soft-light; background:linear-gradient(115deg,transparent 35%,rgba(255,240,200,.95) 48%,transparent 60%) -150% 0/250% 100% no-repeat} .nu-argollas.al-frente::after{animation:nuBarrido 2.8s ease-in-out infinite} @keyframes nuBarrido{0%{background-position:-150% 0}60%,100%{background-position:150% 0}} /* reflejo en el piso */ .nu-piso{position:absolute;left:50%;top:calc(min(46vw,27vh,250px) * .62);width:min(120vw,620px);height:90px;transform:translateX(-50%); background:radial-gradient(ellipse at center,rgba(40,40,60,.18) 0%,rgba(40,40,60,0) 68%);filter:blur(4px)} .nu-cab,.nu-pie{position:absolute;left:0;right:0;text-align:center;pointer-events:none;padding:0 24px;opacity:0;transform:translateY(10px);transition:opacity 1.1s ease .4s,transform 1.1s ease .4s} .nu-cab{top:calc(5.5vh + env(safe-area-inset-top,0px))} .nu-para{font-family:var(--serif);font-style:italic;font-size:clamp(1rem,4.2vw,1.15rem);color:#6B6B76} .nu-fam{font-family:var(--script);font-size:clamp(2.3rem,10.5vw,3.4rem);line-height:1.15;color:#2A2A33;margin-top:.08em;text-wrap:balance} .nu-pie{bottom:calc(5vh + env(safe-area-inset-bottom,0px));transition-delay:.8s} .nu-nombres{font-family:var(--script);font-size:clamp(2.6rem,12vw,4rem);line-height:1.05;color:#A88446;text-wrap:balance} .nu-nombres .amp{color:#2A2A33;font-size:.6em;margin:0 .14em} .nu-fecha{margin-top:.45em;font-family:var(--serif);font-weight:600;font-size:clamp(.82rem,3.4vw,.95rem);letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;color:#4A4A55} .nu-toca{margin-top:2.6vh;font-family:var(--serif);font-weight:600;font-size:.74rem;letter-spacing:.4em;text-indent:.4em;text-transform:uppercase;color:#A88446} .nu-ver .nu-cab,.nu-ver .nu-pie{opacity:1;transform:none} .nu-ver .nu-toca{animation:esLatido 2.8s ease-in-out 3s infinite} .nu-abrir .nu-toca{animation:none} .nu-flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 46%,#FFFFFF 0%,#FFFDF6 40%,#FFFFFF 100%)} /* Laptop y escritorio: carrusel más grande y abierto, con más fotos a la vista */ @media (min-aspect-ratio:4/5){ .nu-escena{perspective:1500px;top:51%} .nu-carrusel{--w:min(19vw,33vh,300px)} .nu-carta{--r:calc(var(--w) * 1.45)} .nu-piso{top:calc(min(19vw,33vh,300px) * .7);width:min(90vw,1100px);height:120px} .nu-cab{top:3.5vh}.nu-pie{bottom:3.5vh} .nu-fam{font-size:clamp(2.2rem,4.4vw,3.2rem)}.nu-nombres{font-size:clamp(2.4rem,4.6vw,3.4rem)} .nu-toca{margin-top:1.6vh} .nu-toca::after{content:" · arrastren para girar";letter-spacing:.2em} } @media (max-height:680px){.nu-cab{top:3vh}.nu-fam{font-size:2.1rem}.nu-nombres{font-size:2.4rem}} @media (prefers-reduced-motion:reduce){.nu-anillo.al-frente .nu-estrella,.nu-argollas.al-frente::after,.nu-ver .nu-toca{animation:none}} /* Interior: blanco perla, oro y tinta carbón */ html[data-style="nupcial"] body{background:linear-gradient(180deg,#FFFFFF 0%,#F6F7F9 100%) fixed,#FFFFFF} html[data-style="nupcial"] .names{color:#A88446} html[data-style="nupcial"] .names .amp{color:#2A2A33} html[data-style="nupcial"] h2{color:#2A2A33} html[data-style="nupcial"] h2::after{content:"";display:block;width:120px;height:16px;margin:8px auto 0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16' fill='none' stroke='%23B8924A' stroke-width='1.2'%3E%3Cpath d='M2 8h40M78 8h40'/%3E%3Ccircle cx='55' cy='8' r='6'/%3E%3Ccircle cx='65' cy='8' r='6'/%3E%3C/svg%3E") center/contain no-repeat} html[data-style="nupcial"] .tarj,html[data-style="nupcial"] .rsvp{background:#FFFFFF;border:1px solid rgba(184,146,74,.45);border-radius:24px;box-shadow:0 26px 50px -34px rgba(30,30,45,.4)} html[data-style="nupcial"] .count b{color:#A88446} html[data-style="nupcial"] .arco{outline-color:#B8924A} /* ========================================================= Toscana: paisaje en capas 3D a la hora dorada (todo dibujado, sin fotos) ========================================================= */ html[data-style="toscana"]{--paper:#F2E5DA;--ink:#3A2A22;--accent:#A9523A;--gold:#6E7446;--soft:#E9D3C1;--env:#A9523A;--env-dark:#7A3A28;--card:#FBF4EE} .ts-intro{position:fixed;inset:0;z-index:60;overflow:hidden;cursor:pointer;outline:none;background:#2B1E1A} .ts-intro[hidden]{display:none} .ts-escena{position:absolute;inset:0;perspective:1000px;perspective-origin:50% 45%} .ts-mundo,.ts-pan{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform} /* La foto cubre la pantalla con margen para moverse; se pasea despacio de los cipreses a la villa */ .ts-pan{--fw:max(112vw,149.4vh);--amp:min(calc(var(--fw) * .14),calc((var(--fw) - 100vw) / 2 - 2px));animation:tsPasea 22s ease-in-out infinite alternate} @keyframes tsPasea{from{transform:translateX(var(--amp))}to{transform:translateX(calc(var(--amp) * -1))}} .ts-foto,.ts-frente{position:absolute;left:calc(50% - var(--fw) / 2);top:calc(50% - var(--fw) * .375);width:var(--fw);height:calc(var(--fw) * .75); background:url("/escenas/toscana/villa.webp") center/100% 100% no-repeat} .ts-foto{transform:translateZ(-120px) scale(1.12)} /* La mesa del frente es una capa más cercana: al mover la cámara se separa del fondo */ .ts-frente{transform:translateZ(45px) scale(.955);-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 60%,#000 72%);mask-image:linear-gradient(180deg,transparent 0,transparent 60%,#000 72%)} .ts-foco,.ts-vela{position:absolute;border-radius:50%;pointer-events:none;mix-blend-mode:screen;opacity:0;transform:translate(-50%,-50%)} .ts-foco{width:2.4%;aspect-ratio:1;background:radial-gradient(circle,rgba(255,244,214,.95) 0%,rgba(255,204,120,.55) 22%,rgba(255,180,90,0) 68%); transition:opacity .5s ease var(--d)} .ts-vela{width:2.2%;aspect-ratio:1;background:radial-gradient(circle,rgba(255,236,190,.85) 0%,rgba(255,186,96,.4) 30%,rgba(255,170,80,0) 70%)} .ts-ver .ts-foco{opacity:1;animation:tsTitila 3.4s ease-in-out calc(var(--d) + .6s) infinite} .ts-ver .ts-vela{opacity:1;transition:opacity 1.2s ease var(--d);animation:tsFlama 1.3s ease-in-out var(--d) infinite} @keyframes tsTitila{0%,100%{opacity:1}45%{opacity:.62}55%{opacity:.85}} @keyframes tsFlama{0%,100%{opacity:.95;transform:translate(-50%,-50%) scale(1)}30%{opacity:.7;transform:translate(-50%,-52%) scale(.88,1.05)}60%{opacity:1;transform:translate(-50%,-49%) scale(1.06,.96)}} /* Al llegar es un poco más tarde: la escena se ilumina mientras se encienden las guirnaldas */ .ts-velo{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(28,16,34,.62) 0%,rgba(28,16,34,.18) 34%,rgba(28,16,34,.12) 58%,rgba(28,16,34,.72) 100%); opacity:1;transition:opacity 3s ease .3s} .ts-ver .ts-velo{opacity:.72} .ts-luz{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .ts-texto{position:absolute;left:0;right:0;top:calc(6vh + env(safe-area-inset-top,0px));text-align:center;pointer-events:none;padding:0 24px;color:#FFF6EA; text-shadow:0 2px 14px rgba(30,15,10,.65),0 0 2px rgba(30,15,10,.4)} .ts-para{font-family:var(--serif);font-style:italic;font-size:clamp(1.02rem,4.4vw,1.2rem);opacity:0;transform:translateY(8px);transition:opacity 1s ease .8s,transform 1s ease .8s} .ts-para b{display:block;font-style:normal;font-weight:500;font-size:clamp(1.25rem,5.6vw,1.55rem);letter-spacing:.04em;margin-top:.15em} .ts-nombres{font-family:var(--script);font-size:clamp(3.2rem,15vw,5.4rem);line-height:1;color:#FFE9CC;margin:.25em 0 .05em;text-wrap:balance; opacity:0;transform:translateY(10px);transition:opacity 1.2s ease 1.3s,transform 1.2s ease 1.3s} .ts-nombres .amp{display:block;font-size:.5em;color:#E9C98F;margin:.04em 0} .ts-fecha{font-family:var(--serif);font-weight:600;font-size:clamp(.9rem,3.8vw,1.05rem);letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;margin-top:.5em;opacity:0;transition:opacity 1s ease 1.9s} .ts-pie{position:absolute;left:0;right:0;bottom:calc(6vh + env(safe-area-inset-bottom,0px));text-align:center;pointer-events:none;font-family:var(--serif);font-weight:600;font-size:.8rem; letter-spacing:.38em;text-indent:.38em;text-transform:uppercase;color:#FFF3E2;text-shadow:0 1px 10px rgba(30,15,10,.8);opacity:0;transition:opacity 1s ease 2.6s} .ts-listo .ts-para,.ts-listo .ts-nombres{opacity:1;transform:none} .ts-listo .ts-fecha{opacity:1} .ts-listo .ts-pie{opacity:.95;animation:esLatido 2.8s ease-in-out 4.5s infinite} /* Íconos toscanos (copa, pizza, olivo, limón, ciprés) que se dibujan solos */ .ts-iconos{display:block;width:min(64vw,270px);height:auto;margin:1.6vh auto 0;overflow:visible} .ts-iconos path{fill:none;stroke:#F3DDB0;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:140;stroke-dashoffset:140;filter:drop-shadow(0 1px 4px rgba(30,15,10,.6))} .ts-listo .ts-iconos path{stroke-dashoffset:0;transition:stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1) 2.2s} .ts-listo .ts-iconos g:nth-child(2) path{transition-delay:2.45s}.ts-listo .ts-iconos g:nth-child(3) path{transition-delay:2.7s} .ts-listo .ts-iconos g:nth-child(4) path{transition-delay:2.95s}.ts-listo .ts-iconos g:nth-child(5) path{transition-delay:3.2s} /* Secuencia de cine: villa → brindis con vino y pizza → la mesa → los nombres */ .ts-reel{position:absolute;inset:0;pointer-events:none} .ts-esc{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;opacity:0;transition:opacity 1.6s ease} .ts-esc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,16,24,.25) 0%,rgba(28,16,24,0) 30%,rgba(28,16,24,0) 55%,rgba(28,16,24,.6) 100%)} .ts-esc-vino{background-image:url("/escenas/toscana/vino.webp");background-position:38% 50%} .ts-esc-mesa{background-image:url("/escenas/toscana/mesa-ancha.webp");background-position:15% 50%} .ts-esc-sol{position:absolute;left:36%;top:10%;width:70vmin;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;mix-blend-mode:screen; background:radial-gradient(circle,rgba(255,236,190,.6) 0%,rgba(255,200,120,.2) 35%,rgba(255,200,120,0) 68%)} .ts-con-vino .ts-esc-vino{opacity:1;animation:tsKenVino 6.5s linear forwards} .ts-con-mesa .ts-esc-mesa{opacity:1;animation:tsKenMesa 6.5s linear forwards} .ts-sin-reel .ts-esc{opacity:0!important;transition-duration:1.2s} @keyframes tsKenVino{from{transform:scale(1.03)}to{transform:scale(1.17) translate(1.5%,1%)}} @keyframes tsKenMesa{from{transform:scale(1.04);background-position:12% 50%}to{transform:scale(1.12);background-position:62% 50%}} .ts-leyenda{position:absolute;left:0;right:0;bottom:calc(13vh + env(safe-area-inset-bottom,0px));margin:0;text-align:center;padding:0 24px; font-family:var(--serif);font-style:italic;font-size:clamp(2rem,9vw,3.4rem);line-height:1.1;color:#FFF3E2;text-shadow:0 2px 18px rgba(30,15,10,.75); opacity:0;transform:translateY(10px);transition:opacity .9s ease,transform .9s ease} .ts-leyenda small{display:block;font-style:normal;font-weight:600;font-size:.32em;letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;margin-top:.7em;color:#F3DDB0} .ts-leyenda.ve{opacity:1;transform:none} .ts-abrir .ts-pie{animation:none} .ts-destello{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 40%,#FFF4DC 0%,#F7D7AE 45%,#F2E5DA 100%)} @media (min-aspect-ratio:4/5){.ts-texto{top:4vh}.ts-nombres{font-size:clamp(3rem,6vw,4.6rem)}.ts-nombres .amp{display:inline;margin:0 .2em}} @media (prefers-reduced-motion:reduce){.ts-pan,.ts-ver .ts-foco,.ts-ver .ts-vela,.ts-listo .ts-pie,.ts-esc{animation:none!important}.ts-iconos path{stroke-dashoffset:0;transition:none!important}} .ts-orn{width:220px;margin-bottom:10px} /* Interior: estuco rosado, terracota, verde oliva y una mesa imperial */ html[data-style="toscana"] body{background:linear-gradient(180deg,#F2E5DA 0%,#EFDCCD 100%) fixed,#F2E5DA} html[data-style="toscana"] .names{color:#A9523A} html[data-style="toscana"] .names .amp{color:#6E7446} html[data-style="toscana"] h2{color:#7A3A28;font-style:italic;font-size:clamp(2rem,8.6vw,2.9rem)} html[data-style="toscana"] h2::after{content:"";display:block;width:130px;height:24px;margin:6px auto 0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 24'%3E%3Cpath d='M4 12C30 14 48 12 65 12s35 2 61 0' stroke='%235A4A2E' stroke-width='1.4' fill='none'/%3E%3Cg fill='%237F8A55'%3E%3Cellipse cx='24' cy='7' rx='9' ry='3' transform='rotate(-20 24 7)'/%3E%3Cellipse cx='40' cy='17' rx='9' ry='3' transform='rotate(25 40 17)'/%3E%3Cellipse cx='90' cy='7' rx='9' ry='3' transform='rotate(20 90 7)'/%3E%3Cellipse cx='106' cy='17' rx='9' ry='3' transform='rotate(-25 106 17)'/%3E%3C/g%3E%3Cellipse cx='65' cy='12' rx='7' ry='5' fill='%23F2C94C'/%3E%3C/svg%3E") center/contain no-repeat} html[data-style="toscana"] .tarj,html[data-style="toscana"] .rsvp{background:#FBF4EE;border:1px solid #E2CDBD;border-radius:20px;box-shadow:0 22px 44px -32px rgba(122,58,40,.45)} html[data-style="toscana"] .count b{color:#A9523A} html[data-style="toscana"] .arco{outline-color:#E2CDBD} /* ---- Toscana: villa a todo color arriba, estuco con textura y secciones como cartas de menú ---- */ html[data-style="toscana"] body{background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(120% 70% at 50% 0%,#F6E7DA 0%,#EFD9C6 60%,#E8CDB7 100%) fixed,#EFD9C6} html[data-style="toscana"] .hero{justify-content:flex-end;padding-top:calc(min(62svh,560px) - 30px);padding-bottom:36px} html[data-style="toscana"] .hero::before{bottom:auto;height:min(64svh,580px); background:url("/escenas/toscana/villa.webp") 58% 38%/cover no-repeat; -webkit-mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,.55) 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,.55) 78%,transparent 100%)} @media (min-width:900px) and (min-aspect-ratio:1/1){ html[data-style="toscana"] .hero{padding-top:calc(48svh - 20px)} html[data-style="toscana"] .hero::before{height:50svh;background-position:58% 45%}} html[data-style="toscana"] .hero .pre{color:#6E7446;opacity:1;font-weight:600} html[data-style="toscana"] .hero .scroll{color:#7A3A28} /* Cartas de menú: papel claro, doble filete oliva y ramita de olivo con limón en la esquina */ html[data-style="toscana"] main>section:not(.hero){position:relative;margin:26px 0;padding:48px 18px 38px;border-radius:16px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'%3E%3Cpath d='M4 4C30 8 52 22 70 52' stroke='%236E7446' stroke-width='1.3' fill='none'/%3E%3Cg fill='%237F8A55' fill-opacity='.8'%3E%3Cellipse cx='18' cy='12' rx='9' ry='3.2' transform='rotate(30 18 12)'/%3E%3Cellipse cx='26' cy='4' rx='8' ry='3' transform='rotate(-20 26 4)'/%3E%3Cellipse cx='38' cy='20' rx='9' ry='3.2' transform='rotate(45 38 20)'/%3E%3Cellipse cx='48' cy='14' rx='8' ry='3' transform='rotate(-5 48 14)'/%3E%3Cellipse cx='54' cy='34' rx='9' ry='3.2' transform='rotate(60 54 34)'/%3E%3C/g%3E%3Ccircle cx='62' cy='30' r='5.5' fill='%23F2C94C'/%3E%3Ccircle cx='44' cy='30' r='3' fill='%235B4A6E' fill-opacity='.7'/%3E%3C/svg%3E") top 10px left 10px/62px no-repeat,#FCF6F0; box-shadow:0 1px 0 #fff inset,0 26px 50px -34px rgba(110,50,30,.55),0 2px 6px -2px rgba(110,50,30,.18)} html[data-style="toscana"] main>section:not(.hero)::after{content:"";position:absolute;inset:8px;border:1px solid rgba(110,116,70,.38);border-radius:11px; box-shadow:inset 0 0 0 3px #FCF6F0,inset 0 0 0 4px rgba(169,82,58,.28);pointer-events:none} html[data-style="toscana"] main>section:not(.hero)>*{position:relative;z-index:1} html[data-style="toscana"] main>section:last-of-type{margin-bottom:10px} /* Fila de baldosas de barro entre la portada y las cartas */ html[data-style="toscana"] #secMesa,html[data-style="toscana"] .hero+section{margin-top:44px} html[data-style="toscana"] .hero::after{content:"";position:absolute;left:50%;bottom:-24px;transform:translateX(-50%);width:min(320px,80%);height:14px; background:repeating-linear-gradient(90deg,#B5603F 0 22px,#A9523A 22px 23px,#C2714E 23px 45px,#A9523A 45px 46px);border-radius:3px; box-shadow:0 6px 12px -6px rgba(110,50,30,.6);opacity:.9} html[data-style="toscana"] .kicker{color:#6E7446;opacity:1;font-weight:600} html[data-style="toscana"] .texto,html[data-style="toscana"] p{color:#4A3328} /* Cuenta regresiva en baldosas de terracota */ html[data-style="toscana"] .count{gap:10px} html[data-style="toscana"] .count div{min-width:0;flex:1;max-width:84px;padding:12px 4px 9px;border-radius:10px; background:linear-gradient(160deg,#BD6948,#A04A33);box-shadow:inset 0 1px 0 rgba(255,220,190,.35),0 10px 18px -10px rgba(110,40,20,.7)} html[data-style="toscana"] .count b{color:#FFF3E8} html[data-style="toscana"] .count span{color:#FBE0CF;opacity:1} /* La confirmación ya va dentro de su carta */ html[data-style="toscana"] #confirmar .rsvp{background:transparent!important;border:0;box-shadow:none;padding-left:0;padding-right:0} html[data-style="toscana"] .tarj{background:#FFFDFB} html[data-style="toscana"] footer{color:#7A3A28} /* Autorización de datos de salud (alergias) y aviso de privacidad del formulario */ .consentir{display:flex;gap:10px;align-items:flex-start;text-align:left;font-size:.88rem;line-height:1.45;opacity:.85;margin:6px 0 18px;cursor:pointer} .consentir input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--accent)} .consentir a,.aviso-datos a{color:inherit;text-underline-offset:3px} .aviso-datos{font-size:.8rem;opacity:.7;margin-top:14px} /* Crédito al pie de cada invitación: lleva a la página de Mi Wedding Day */ .pie-marca-inv{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:34px;padding-top:22px;border-top:1px solid color-mix(in srgb,currentColor 14%,transparent)} .pie-marca-inv>a:first-child{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit;font-family:var(--sans,system-ui,sans-serif);font-size:.82rem;letter-spacing:.04em;opacity:.75;transition:opacity .2s} .pie-marca-inv>a:first-child:hover{opacity:1} .pie-marca-inv img{width:34px;height:auto} .pie-marca-inv b{font-weight:600} .pie-legal{font-size:.74rem;opacity:.55;color:inherit;text-underline-offset:3px} /* ========================================================= Rosas: ramo de rosas de jardín (Quicksand, Juliet y crema) con eucalipto, pétalos que caen y se dispersan al tocar. Paleta nude, durazno y salvia. ========================================================= */ html[data-style="rosas"]{--paper:#FFFAF8;--ink:#4A3B3B;--accent:#B5706A;--gold:#8E9C83;--soft:#F5E1DC;--env:#C98C83;--env-dark:#9E5F58;--card:#FFFFFF} .rs-intro{position:fixed;inset:0;z-index:60;overflow:hidden;cursor:pointer;outline:none; background:radial-gradient(120% 80% at 50% 40%,#FFFFFF 0%,#FDF4F1 52%,#F7E3DD 100%)} .rs-intro[hidden]{display:none} /* Pétalos reales al pie, como si hubieran caído del ramo */ .rs-fondo{position:absolute;left:0;right:0;bottom:0;height:30vh;background:url("/escenas/rosas/petalos.webp") center 30%/cover no-repeat;opacity:0; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 75%);mask-image:linear-gradient(180deg,transparent 0,#000 75%);transition:opacity 2s ease 1s} .rs-ver .rs-fondo{opacity:.4} .rs-contenido{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; padding:calc(4vh + env(safe-area-inset-top,0px)) 20px calc(11vh + env(safe-area-inset-bottom,0px))} .rs-para{font-family:var(--serif);font-style:italic;font-size:clamp(1rem,4.3vw,1.18rem);color:#8C5E58;opacity:0;transform:translateY(8px);transition:opacity 1s ease .9s,transform 1s ease .9s} .rs-para b{display:block;font-family:var(--script);font-style:normal;font-weight:400;font-size:clamp(1.9rem,8.5vw,2.5rem);line-height:1.15;color:#9E5F58;margin-top:.05em} .rs-escena{perspective:900px;width:min(94vw,560px,64vh);margin:1.2vh 0 .4vh} .rs-mundo{transform-style:preserve-3d;will-change:transform} .rs-mece{transform-origin:50% 88%;animation:rsMece 6.5s ease-in-out infinite alternate} @keyframes rsMece{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}} .rs-ramo{display:block;width:100%;height:auto;opacity:0;transform:scale(.92) translateY(14px);filter:drop-shadow(0 18px 26px rgba(158,95,88,.16)); transition:opacity 1.6s ease .15s,transform 2.6s cubic-bezier(.2,.7,.2,1) .15s} .rs-ver .rs-ramo{opacity:1;transform:none} .rs-nombres{font-family:var(--script);font-size:clamp(3rem,13.5vw,4.8rem);line-height:1.02;color:#B5706A;text-wrap:balance; opacity:0;transform:translateY(10px);transition:opacity 1.2s ease 1.5s,transform 1.2s ease 1.5s} .rs-nombres .amp{display:inline-block;font-size:.55em;color:#8E9C83;margin:0 .18em} .rs-fecha{font-family:var(--serif);font-weight:600;font-size:clamp(.85rem,3.6vw,1rem);letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;color:#8C6A64;margin-top:.7em; opacity:0;transition:opacity 1s ease 2.1s} .rs-ver .rs-para,.rs-ver .rs-nombres{opacity:1;transform:none} .rs-ver .rs-fecha{opacity:1} .rs-petalos{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .rs-pie{position:absolute;left:0;right:0;bottom:calc(5vh + env(safe-area-inset-bottom,0px));text-align:center;pointer-events:none;font-family:var(--serif);font-weight:600;font-size:.8rem; letter-spacing:.38em;text-indent:.38em;text-transform:uppercase;color:#9E6F68;opacity:0;transition:opacity 1s ease 2.8s} .rs-ver .rs-pie{opacity:.95;animation:esLatido 2.8s ease-in-out 4.6s infinite} .rs-abrir .rs-pie{animation:none} .rs-destello{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 42%,#FFFFFF 0%,#FFF4F0 45%,#FBE7E1 100%)} @media (min-aspect-ratio:4/5){.rs-escena{width:min(60vh,560px)}.rs-nombres{font-size:clamp(3rem,6vw,4.4rem)}} @media (prefers-reduced-motion:reduce){.rs-mece{animation:none}} /* Interior: blanco con rubor, rosa empolvado y salvia; pétalos cayendo detrás */ html[data-style="rosas"] body{background:linear-gradient(180deg,#FFFFFF 0%,#FDF5F2 45%,#FBEDE8 100%) fixed,#FFFAF8} .rs-caida{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0} html[data-style="rosas"] main{position:relative;z-index:1} .rs-orn{display:block;width:min(62vw,250px);height:auto;margin:0 auto 4px} html[data-style="rosas"] .names{color:#B5706A} html[data-style="rosas"] .names .amp{color:#8E9C83} html[data-style="rosas"] h2{color:#9E5F58;font-style:italic} html[data-style="rosas"] h2::after{content:"";display:block;width:120px;height:22px;margin:6px auto 0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 22'%3E%3Cpath d='M6 11h42M72 11h42' stroke='%23C9A49A' stroke-width='1.2'/%3E%3Cg fill='none' stroke='%23B5706A' stroke-width='1.2'%3E%3Cpath d='M60 4c4 0 6 3 6 6s-3 6-6 6-6-3-6-6 2-6 6-6Z'/%3E%3Cpath d='M60 7c2 0 3 1.5 3 3s-1.5 3-3 3'/%3E%3C/g%3E%3Cpath d='M50 14c-3 1-6 0-7-3 3-1 6 0 7 3ZM70 14c3 1 6 0 7-3-3-1-6 0-7 3Z' fill='%238E9C83'/%3E%3C/svg%3E") center/contain no-repeat} html[data-style="rosas"] .kicker{color:#8E9C83} html[data-style="rosas"] .tarj,html[data-style="rosas"] .rsvp{background:#FFFFFF;border:1px solid #F0DAD4;border-radius:22px;box-shadow:0 22px 44px -34px rgba(158,95,88,.45)} html[data-style="rosas"] .count b{color:#B5706A} html[data-style="rosas"] .arco{outline-color:#F0DAD4} /* ========================================================= Boho: fotos 3D (profundidad + WebGL) de un arco de pampas en el desierto y una mesa baja al atardecer. Paleta arena, terracota y salvia. ========================================================= */ html[data-style="boho"]{--paper:#F6EAE0;--ink:#3E2A20;--accent:#B4532A;--gold:#7E8B6E;--soft:#EBD6C6;--env:#B4532A;--env-dark:#7E3A1D;--card:#FFFAF5} .bo-intro{position:fixed;inset:0;z-index:60;overflow:hidden;cursor:pointer;outline:none;background:#2A1A14} .bo-intro[hidden]{display:none} .bo-respaldo,.bo-lienzo{position:absolute;inset:0;width:100%;height:100%} .bo-respaldo{object-fit:cover;object-position:56% 50%;opacity:0} .bo-sin-3d .bo-respaldo{opacity:1;animation:boKen 18s ease-in-out infinite alternate} .bo-sin-3d .bo-lienzo{display:none} @keyframes boKen{from{transform:scale(1.05)}to{transform:scale(1.14) translateX(-2%)}} .bo-lienzo{opacity:0;transition:opacity 1.6s ease} .bo-ver .bo-lienzo{opacity:1} .bo-polvo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .bo-velo{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(40,22,14,.5) 0%,rgba(40,22,14,.06) 24%,rgba(40,22,14,0) 50%,rgba(40,22,14,.45) 72%,rgba(40,22,14,.78) 100%)} .bo-texto{position:absolute;left:0;right:0;top:calc(6vh + env(safe-area-inset-top,0px));text-align:center;pointer-events:none;padding:0 22px;color:#FFF5EA; text-shadow:0 2px 16px rgba(50,22,10,.7),0 0 2px rgba(50,22,10,.5)} .bo-para{font-family:var(--serif);font-style:italic;font-size:clamp(1rem,4.3vw,1.18rem);opacity:0;transform:translateY(8px);transition:opacity 1s ease .9s,transform 1s ease .9s} .bo-para b{display:block;font-style:normal;font-weight:500;font-size:clamp(1.25rem,5.6vw,1.55rem);letter-spacing:.04em;margin-top:.15em} .bo-abajo{position:absolute;left:0;right:0;bottom:calc(12vh + env(safe-area-inset-bottom,0px));text-align:center;pointer-events:none;padding:0 22px;color:#FFF5EA;text-shadow:0 2px 16px rgba(50,22,10,.75),0 0 2px rgba(50,22,10,.5)} .bo-nombres{font-family:var(--script);font-size:clamp(3.2rem,15vw,5.4rem);line-height:1;color:#FFE6CC;margin:0 0 .05em;text-wrap:balance; opacity:0;transform:translateY(10px);transition:opacity 1.2s ease 1.4s,transform 1.2s ease 1.4s} .bo-nombres .amp{display:inline-block;font-size:.5em;color:#F2C9A0;margin:0 .18em} .bo-fecha{font-family:var(--serif);font-weight:600;font-size:clamp(.9rem,3.8vw,1.05rem);letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;margin-top:.5em;opacity:0;transition:opacity 1s ease 2s} .bo-ver .bo-para,.bo-ver .bo-nombres{opacity:1;transform:none} .bo-ver .bo-fecha{opacity:1} .bo-leyenda{position:absolute;left:0;right:0;top:40%;text-align:center;margin:0;pointer-events:none;font-family:var(--script);font-size:clamp(2.4rem,11vw,3.6rem);color:#FFF1E2; text-shadow:0 2px 18px rgba(50,22,10,.8);opacity:0;transform:translateY(12px)} .bo-pie{position:absolute;left:0;right:0;bottom:calc(6vh + env(safe-area-inset-bottom,0px));text-align:center;pointer-events:none;font-family:var(--serif);font-weight:600;font-size:.8rem; letter-spacing:.38em;text-indent:.38em;text-transform:uppercase;color:#FFF1E2;text-shadow:0 1px 10px rgba(50,22,10,.85);opacity:0;transition:opacity 1s ease 2.6s} .bo-ver .bo-pie{opacity:.95;animation:esLatido 2.8s ease-in-out 4.6s infinite} .bo-abrir .bo-pie{animation:none} .bo-destello{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 45%,#FFF4E6 0%,#F8DCC0 45%,#F6EAE0 100%)} @media (min-aspect-ratio:4/5){.bo-texto{top:4vh}.bo-nombres{font-size:clamp(3rem,6vw,4.6rem)}} /* Interior: arena con terracota y salvia, el ramo de pampas y flecos de macramé */ html[data-style="boho"] body{background:linear-gradient(180deg,#FBF3EC 0%,#F6EAE0 50%,#F1DFD1 100%) fixed,#F6EAE0} .bo-orn{display:block;width:min(52vw,210px);height:auto;margin:0 auto 6px} html[data-style="boho"] .names{color:#B4532A} html[data-style="boho"] .names .amp{color:#7E8B6E} html[data-style="boho"] h2{color:#8A3E1E;font-style:italic;font-size:clamp(1.9rem,8.2vw,2.8rem)} html[data-style="boho"] h2::after{content:"";display:block;width:150px;height:26px;margin:6px auto 0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 26'%3E%3Cpath d='M8 5C40 13 110 13 142 5' fill='none' stroke='%23B4532A' stroke-width='1.3'/%3E%3Cg stroke='%23C9A486' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M30 9.6v9M45 11v12M60 11.8v13M75 12v14M90 11.8v13M105 11v12M120 9.6v9'/%3E%3C/g%3E%3Cg fill='%237E8B6E'%3E%3Ccircle cx='75' cy='12' r='2.4'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat} html[data-style="boho"] .kicker{color:#7E8B6E} html[data-style="boho"] .tarj,html[data-style="boho"] .rsvp{background:#FFFAF5;border:1px solid #E7CFBD;border-radius:20px;box-shadow:0 22px 44px -34px rgba(126,58,29,.5)} html[data-style="boho"] .count b{color:#B4532A} html[data-style="boho"] .arco{outline-color:#E7CFBD} /* ---- Boho, interior más rico: el arco a todo color arriba, secciones en forma de arco, soles terracota en la cuenta regresiva y arcoíris boho tenues con textura de lino ---- */ html[data-style="boho"] body{background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .28 0 0 0 0 .16 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 110'%3E%3Cg fill='none' stroke-width='14' opacity='.16'%3E%3Cpath d='M10 110a90 90 0 0 1 180 0' stroke='%23B4532A'/%3E%3Cpath d='M30 110a70 70 0 0 1 140 0' stroke='%23D9A27E'/%3E%3Cpath d='M50 110a50 50 0 0 1 100 0' stroke='%237E8B6E'/%3E%3C/g%3E%3C/svg%3E") left -60px bottom -10px/300px auto no-repeat fixed, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 110'%3E%3Cg fill='none' stroke-width='14' opacity='.13'%3E%3Cpath d='M10 110a90 90 0 0 1 180 0' stroke='%237E8B6E'/%3E%3Cpath d='M30 110a70 70 0 0 1 140 0' stroke='%23D9A27E'/%3E%3Cpath d='M50 110a50 50 0 0 1 100 0' stroke='%23B4532A'/%3E%3C/g%3E%3C/svg%3E") right -70px top 30%/260px auto no-repeat fixed, linear-gradient(180deg,#FBF3EC 0%,#F6EAE0 50%,#F1DFD1 100%) fixed,#F6EAE0} /* Portada: el arco al atardecer, nítido, que se desvanece hacia los nombres */ html[data-style="boho"] .hero{justify-content:flex-end;padding-top:calc(min(60svh,560px) - 40px);padding-bottom:30px} html[data-style="boho"] .hero::before{bottom:auto;height:min(62svh,580px); background:url("/escenas/boho/arco.webp") 56% 42%/cover no-repeat; -webkit-mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.5) 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.5) 78%,transparent 100%)} @media (min-width:900px) and (min-aspect-ratio:1/1){ html[data-style="boho"] .hero{padding-top:calc(50svh - 30px)} html[data-style="boho"] .hero::before{height:52svh;background-position:56% 40%}} html[data-style="boho"] .bo-orn{display:none} html[data-style="boho"] .hero .pre{color:#7E8B6E;opacity:1;font-weight:600} /* Secciones en forma de arco con doble filete */ html[data-style="boho"] main>section:not(.hero){position:relative;margin:34px 4px;padding:76px 22px 40px; background:#FFF9F3;border-radius:50% 50% 22px 22px / 120px 120px 22px 22px;box-shadow:0 1px 0 #fff inset,0 26px 50px -36px rgba(126,58,29,.55)} html[data-style="boho"] main>section:not(.hero)::after{content:"";position:absolute;inset:9px;pointer-events:none;border:1px solid rgba(180,83,42,.32); border-radius:50% 50% 16px 16px / 112px 112px 16px 16px;box-shadow:inset 0 0 0 4px #FFF9F3,inset 0 0 0 5px rgba(126,139,110,.3)} html[data-style="boho"] main>section:not(.hero)>*{position:relative;z-index:1} /* Un sol pequeño en la punta de cada arco */ html[data-style="boho"] main>section:not(.hero)::before{content:"";position:absolute;left:50%;top:22px;width:34px;height:20px;transform:translateX(-50%);z-index:1; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 20'%3E%3Cpath d='M7 19a10 10 0 0 1 20 0Z' fill='%23D9A27E'/%3E%3Cg stroke='%23B4532A' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M17 2v4M6 6l2.5 2.8M28 6l-2.5 2.8M2 14h3.5M32 14h-3.5'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat} html[data-style="boho"] #confirmar .rsvp{background:transparent!important;border:0;box-shadow:none;padding-left:0;padding-right:0} html[data-style="boho"] .tarj{background:#FFFDFB} /* Cuenta regresiva en soles terracota */ html[data-style="boho"] .count{gap:10px} html[data-style="boho"] .count div{min-width:0;flex:1;max-width:82px;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center; background:radial-gradient(circle at 35% 30%,#C9663A,#A0461F 75%);box-shadow:0 0 0 5px rgba(217,162,126,.35),0 12px 20px -12px rgba(126,58,29,.7)} html[data-style="boho"] .count b{color:#FFF4EA;font-size:clamp(1.6rem,7vw,2.1rem)} html[data-style="boho"] .count span{color:#FBE0CC;opacity:1;font-size:.72rem} /* ========================================================= Mexicana: carta de lotería "La Boda" en 3D entre hileras de papel picado, en el patio de una hacienda. Interior con talavera, sarape y papel picado. ========================================================= */ html[data-style="mexicana"]{--paper:#FFFBF5;--ink:#2B2320;--accent:#C2185B;--gold:#1E5AA8;--soft:#FCE4EC;--env:#C2185B;--env-dark:#8E1245;--card:#FFFFFF} .mx-intro{position:fixed;inset:0;z-index:60;overflow:hidden;cursor:pointer;outline:none;background:#3A2418} .mx-intro[hidden]{display:none} .mx-escena{position:absolute;inset:0;perspective:900px;perspective-origin:50% 40%} .mx-mundo{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform} .mx-fondo{position:absolute;inset:-12%;background:url("/escenas/mexicana/patio.webp") center/cover no-repeat;filter:blur(5px) saturate(1.15) brightness(.82);transform:translateZ(-380px) scale(1.5)} .mx-fondo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,18,10,.55) 0%,rgba(40,18,10,.1) 35%,rgba(40,18,10,.15) 60%,rgba(40,18,10,.7) 100%)} /* Papel picado: el hilo y banderitas de papel recortado (máscara con orificios) */ .mx-hilera{position:absolute;left:-8%;right:-8%;height:30vh;transform-style:preserve-3d;pointer-events:none} .mx-hilo{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible} .mx-hilo path{stroke:rgba(255,248,236,.85);stroke-width:1.2;vector-effect:non-scaling-stroke} .mx-bandera{position:absolute;width:var(--bw,10vw);aspect-ratio:100/118;margin-left:calc(var(--bw,10vw) / -2);background:var(--c);opacity:.95;transform-origin:50% 0; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 118'%3E%3Cpath fill-rule='evenodd' d='M0 0H100V108 L98 108 L93 116 L88 108 L83 116 L78 108 L73 116 L68 108 L63 116 L58 108 L53 116 L48 108 L43 116 L38 108 L33 116 L28 108 L23 116 L18 108 L13 116 L8 108 L3 116L0 108Z M42 56a8 8 0 1 0 16 0a8 8 0 1 0 -16 0Z M64.5 56.0a4.5 4.5 0 1 0 9.0 0a4.5 4.5 0 1 0 -9.0 0Z M58.9 69.4a4.5 4.5 0 1 0 9.0 0a4.5 4.5 0 1 0 -9.0 0Z M45.5 75.0a4.5 4.5 0 1 0 9.0 0a4.5 4.5 0 1 0 -9.0 0Z M32.1 69.4a4.5 4.5 0 1 0 9.0 0a4.5 4.5 0 1 0 -9.0 0Z M26.5 56.0a4.5 4.5 0 1 0 9.0 0a4.5 4.5 0 1 0 -9.0 0Z M32.1 42.6a4.5 4.5 0 1 0 9.0 0a4.5 4.5 0 1 0 -9.0 0Z M45.5 37.0a4.5 4.5 0 1 0 9.0 0a4.5 4.5 0 1 0 -9.0 0Z M58.9 42.6a4.5 4.5 0 1 0 9.0 0a4.5 4.5 0 1 0 -9.0 0Z M17 12L23 20L17 28L11 20Z M83 12L89 20L83 28L77 20Z M17 84L23 92L17 100L11 92Z M83 84L89 92L83 100L77 92Z M17 38Q23 56 17 74Q11 56 17 38Z M83 38Q89 56 83 74Q77 56 83 38Z M8 7a2 2 0 1 0 4 0a2 2 0 1 0 -4 0Z M20 7a2 2 0 1 0 4 0a2 2 0 1 0 -4 0Z M32 7a2 2 0 1 0 4 0a2 2 0 1 0 -4 0Z M44 7a2 2 0 1 0 4 0a2 2 0 1 0 -4 0Z M56 7a2 2 0 1 0 4 0a2 2 0 1 0 -4 0Z M68 7a2 2 0 1 0 4 0a2 2 0 1 0 -4 0Z M80 7a2 2 0 1 0 4 0a2 2 0 1 0 -4 0Z M92 7a2 2 0 1 0 4 0a2 2 0 1 0 -4 0Z M32.4 96a2.6 2.6 0 1 0 5.2 0a2.6 2.6 0 1 0 -5.2 0Z M47.4 96a2.6 2.6 0 1 0 5.2 0a2.6 2.6 0 1 0 -5.2 0Z M62.4 96a2.6 2.6 0 1 0 5.2 0a2.6 2.6 0 1 0 -5.2 0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 118'%3E%3Cpath fill-rule='evenodd' d='M0 0H100V108 L98 108 L93 116 L88 108 L83 116 L78 108 L73 116 L68 108 L63 116 L58 108 L53 116 L48 108 L43 116 L38 108 L33 116 L28 108 L23 116 L18 108 L13 116 L8 108 L3 116L0 108Z M42 56a8 8 0 1 0 16 0a8 8 0 1 0 -16 0Z M64.5 56.0a4.5 4.5 0 1 0 9.0 0a4.5 4.5 0 1 0 -9.0 0Z M58.9 69.4a4.5 4.5 0 1 0 9.0 0a4.5 4.5 0 1 0 -9.0 0Z M45.5 75.0a4.5 4.5 0 1 0 9.0 0a4.5 4.5 0 1 0 -9.0 0Z M32.1 69.4a4.5 4.5 0 1 0 9.0 0a4.5 4.5 0 1 0 -9.0 0Z M26.5 56.0a4.5 4.5 0 1 0 9.0 0a4.5 4.5 0 1 0 -9.0 0Z M32.1 42.6a4.5 4.5 0 1 0 9.0 0a4.5 4.5 0 1 0 -9.0 0Z M45.5 37.0a4.5 4.5 0 1 0 9.0 0a4.5 4.5 0 1 0 -9.0 0Z M58.9 42.6a4.5 4.5 0 1 0 9.0 0a4.5 4.5 0 1 0 -9.0 0Z M17 12L23 20L17 28L11 20Z M83 12L89 20L83 28L77 20Z M17 84L23 92L17 100L11 92Z M83 84L89 92L83 100L77 92Z M17 38Q23 56 17 74Q11 56 17 38Z M83 38Q89 56 83 74Q77 56 83 38Z M8 7a2 2 0 1 0 4 0a2 2 0 1 0 -4 0Z M20 7a2 2 0 1 0 4 0a2 2 0 1 0 -4 0Z M32 7a2 2 0 1 0 4 0a2 2 0 1 0 -4 0Z M44 7a2 2 0 1 0 4 0a2 2 0 1 0 -4 0Z M56 7a2 2 0 1 0 4 0a2 2 0 1 0 -4 0Z M68 7a2 2 0 1 0 4 0a2 2 0 1 0 -4 0Z M80 7a2 2 0 1 0 4 0a2 2 0 1 0 -4 0Z M92 7a2 2 0 1 0 4 0a2 2 0 1 0 -4 0Z M32.4 96a2.6 2.6 0 1 0 5.2 0a2.6 2.6 0 1 0 -5.2 0Z M47.4 96a2.6 2.6 0 1 0 5.2 0a2.6 2.6 0 1 0 -5.2 0Z M62.4 96a2.6 2.6 0 1 0 5.2 0a2.6 2.6 0 1 0 -5.2 0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat; animation:mxMece 3.2s ease-in-out infinite alternate;filter:drop-shadow(0 6px 6px rgba(0,0,0,.25))} @keyframes mxMece{from{transform:rotateZ(-5deg) rotateX(8deg)}to{transform:rotateZ(5deg) rotateX(-12deg)}} .mx-abrir .mx-bandera{animation:mxVuela .45s ease-in-out infinite alternate} @keyframes mxVuela{from{transform:rotateZ(-14deg) rotateX(30deg)}to{transform:rotateZ(12deg) rotateX(-40deg)}} .mx-h1{top:1vh;--bw:7.5vw;transform:translateZ(-240px) scale(1.3)} .mx-h2{top:10vh;--bw:9.5vw;transform:translateZ(-90px) scale(1.1)} .mx-h3{top:-3vh;--bw:15vw;transform:translateZ(150px) scale(.86)} /* La carta de lotería: grosor, brillo y su reverso de talavera */ .mx-carta-pos{position:absolute;left:50%;top:50%;width:min(60vw,33vh,330px);aspect-ratio:5/8;margin:calc(min(60vw,33vh,330px) * -.8) 0 0 calc(min(60vw,33vh,330px) / -2);transform-style:preserve-3d;transform:translateZ(0)} .mx-carta{position:absolute;inset:0;transform-style:preserve-3d;opacity:0;transform:translateY(40px) rotateX(18deg) scale(.9);transition:opacity 1.2s ease .3s,transform 1.6s cubic-bezier(.2,.8,.2,1) .3s} .mx-ver .mx-carta{opacity:1;transform:none} .mx-cara{position:absolute;inset:0;border-radius:12px;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden} .mx-frente{background:#FFF7E8;box-shadow:0 1px 0 #EADBC2,0 2px 0 #E1CFB3,0 3px 0 #D8C4A6,0 4px 0 #CDB797,0 5px 0 #C2AA89,0 30px 50px -10px rgba(0,0,0,.6)} .mx-marco{position:absolute;inset:5.5%;border:3px solid #1B1B1B;display:flex;flex-direction:column;background:#FFF7E8} .mx-num{position:absolute;left:0;top:0;z-index:2;min-width:2.1em;padding:.08em .3em .02em;background:#FFF7E8;border-right:3px solid #1B1B1B;border-bottom:3px solid #1B1B1B; font-family:"Oswald",sans-serif;font-weight:700;font-size:clamp(1.1rem,5.2vw,1.6rem);line-height:1.1;color:#1B1B1B;text-align:center} .mx-foto{flex:1;background:url("/escenas/mexicana/mesa.webp") 40% 62%/cover no-repeat;border-bottom:3px solid #1B1B1B} .mx-titulo{font-family:"Oswald",sans-serif;font-weight:700;font-size:clamp(1.25rem,6vw,1.9rem);letter-spacing:.05em;text-transform:uppercase;text-align:center;color:#1B1B1B;padding:.18em 0 .12em;background:#FFF7E8} .mx-brillo{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 45%,transparent 60%) no-repeat;background-size:250% 100%;animation:mxBrillo 4.5s ease-in-out 1.5s infinite} @keyframes mxBrillo{from{background-position:150% 0}55%,to{background-position:-60% 0}} .mx-reverso{transform:rotateY(180deg);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Crect width='60' height='60' fill='%23FFFDF8'/%3E%3Cg fill='none' stroke='%231E5AA8' stroke-width='2'%3E%3Crect x='1' y='1' width='58' height='58'/%3E%3Ccircle cx='30' cy='30' r='9'/%3E%3C/g%3E%3Cg fill='%231E5AA8'%3E%3Cpath d='M30 6c4 6 4 10 0 14c-4-4-4-8 0-14ZM30 54c4-6 4-10 0-14c-4 4-4 8 0 14ZM6 30c6 4 10 4 14 0c-4-4-8-4-14 0ZM54 30c-6 4-10 4-14 0c4-4 8-4 14 0Z'/%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3Cpath d='M0 0h8a8 8 0 0 1-8 8ZM60 0v8a8 8 0 0 1-8-8ZM0 60v-8a8 8 0 0 1 8 8ZM60 60h-8a8 8 0 0 1 8-8Z'/%3E%3C/g%3E%3Cg fill='%23F57C00'%3E%3Ccircle cx='30' cy='30' r='1.8'/%3E%3Ccircle cx='13' cy='13' r='2.2'/%3E%3Ccircle cx='47' cy='13' r='2.2'/%3E%3Ccircle cx='13' cy='47' r='2.2'/%3E%3Ccircle cx='47' cy='47' r='2.2'/%3E%3C/g%3E%3C/svg%3E") 0 0/25% auto,#FFFDF8;display:flex;align-items:center;justify-content:center;box-shadow:0 30px 50px -10px rgba(0,0,0,.6)} .mx-medallon{width:82%;aspect-ratio:1;border-radius:50%;background:#FFFDF8;border:4px solid #1E5AA8;box-shadow:0 0 0 5px #FFFDF8,0 0 0 8px #F57C00;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8%} .mx-r-pre{font-family:"Oswald",sans-serif;font-weight:700;font-size:clamp(.85rem,3.6vw,1.05rem);letter-spacing:.12em;text-transform:uppercase;color:#D81B60} .mx-r-nombres{font-family:var(--script);font-size:clamp(1.9rem,8.5vw,2.8rem);line-height:1.05;color:#1E5AA8} .mx-r-nombres .amp{display:block;font-size:.55em;color:#F57C00} .mx-r-fecha{font-family:var(--serif);font-weight:600;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#2B2320;margin-top:.4em} .mx-confeti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .mx-texto{position:absolute;left:0;right:0;top:calc(13vh + env(safe-area-inset-top,0px));text-align:center;pointer-events:none;padding:0 22px;color:#FFF5EA;text-shadow:0 2px 14px rgba(40,15,5,.85)} .mx-para{font-family:var(--serif);font-style:italic;font-size:clamp(1rem,4.3vw,1.15rem);opacity:0;transition:opacity 1s ease 1s} .mx-para b{display:block;font-style:normal;font-weight:600;font-size:clamp(1.25rem,5.6vw,1.5rem);letter-spacing:.04em} .mx-abajo{position:absolute;left:0;right:0;bottom:calc(11vh + env(safe-area-inset-bottom,0px));text-align:center;pointer-events:none;padding:0 20px;color:#FFF5EA;text-shadow:0 2px 16px rgba(40,15,5,.85)} .mx-nombres{font-family:var(--script);font-size:clamp(2.8rem,13vw,4.6rem);line-height:1;color:#FFE7C7;opacity:0;transform:translateY(10px);transition:opacity 1.2s ease 1.6s,transform 1.2s ease 1.6s} .mx-nombres .amp{display:inline-block;font-size:.55em;color:#FFC86B;margin:0 .15em} .mx-fecha{font-family:var(--serif);font-weight:600;font-size:clamp(.85rem,3.6vw,1rem);letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;margin-top:.5em;opacity:0;transition:opacity 1s ease 2.1s} .mx-ver .mx-para,.mx-ver .mx-fecha{opacity:1} .mx-ver .mx-nombres{opacity:1;transform:none} .mx-loteria{position:absolute;left:0;right:0;top:11%;z-index:2;text-align:center;pointer-events:none;font-family:"Oswald",sans-serif;font-weight:700;font-size:clamp(3rem,15vw,5.5rem);letter-spacing:.02em; color:#FBC02D;-webkit-text-stroke:2px #8E1245;text-shadow:0 4px 0 #D81B60,0 8px 22px rgba(0,0,0,.5);opacity:0} .mx-pie{position:absolute;left:0;right:0;bottom:calc(5vh + env(safe-area-inset-bottom,0px));text-align:center;pointer-events:none;font-family:var(--serif);font-weight:600;font-size:.8rem; letter-spacing:.38em;text-indent:.38em;text-transform:uppercase;color:#FFF1E2;text-shadow:0 1px 10px rgba(40,15,5,.9);opacity:0;transition:opacity 1s ease 2.6s} .mx-ver .mx-pie{opacity:.95;animation:esLatido 2.8s ease-in-out 4.6s infinite} .mx-abrir .mx-pie{animation:none} .mx-destello{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 45%,#FFFFFF 0%,#FFF1E0 45%,#FFE3EC 100%)} @media (min-aspect-ratio:4/5){.mx-h3{--bw:9vw}.mx-h2{--bw:6.5vw}.mx-h1{--bw:5vw}.mx-texto{top:6vh}.mx-abajo{bottom:7vh}.mx-carta-pos{width:min(30vh,300px);margin:calc(min(30vh,300px) * -.85) 0 0 calc(min(30vh,300px) / -2)}} @media (prefers-reduced-motion:reduce){.mx-bandera,.mx-brillo{animation:none}} /* Interior: blanco con talavera muy tenue, franjas de sarape, cenefas de azulejo y papel picado */ html[data-style="mexicana"] body{background:linear-gradient(rgba(255,251,245,.94),rgba(255,251,245,.94)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Crect width='60' height='60' fill='%23FFFDF8'/%3E%3Cg fill='none' stroke='%231E5AA8' stroke-width='2'%3E%3Crect x='1' y='1' width='58' height='58'/%3E%3Ccircle cx='30' cy='30' r='9'/%3E%3C/g%3E%3Cg fill='%231E5AA8'%3E%3Cpath d='M30 6c4 6 4 10 0 14c-4-4-4-8 0-14ZM30 54c4-6 4-10 0-14c-4 4-4 8 0 14ZM6 30c6 4 10 4 14 0c-4-4-8-4-14 0ZM54 30c-6 4-10 4-14 0c4-4 8-4 14 0Z'/%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3Cpath d='M0 0h8a8 8 0 0 1-8 8ZM60 0v8a8 8 0 0 1-8-8ZM0 60v-8a8 8 0 0 1 8 8ZM60 60h-8a8 8 0 0 1 8-8Z'/%3E%3C/g%3E%3Cg fill='%23F57C00'%3E%3Ccircle cx='30' cy='30' r='1.8'/%3E%3Ccircle cx='13' cy='13' r='2.2'/%3E%3Ccircle cx='47' cy='13' r='2.2'/%3E%3Ccircle cx='13' cy='47' r='2.2'/%3E%3Ccircle cx='47' cy='47' r='2.2'/%3E%3C/g%3E%3C/svg%3E") 0 0/90px auto,#FFFBF5} html[data-style="mexicana"] .hero{position:relative;padding-top:calc(var(--hero-pt,40px) + 13vh)} .mx-hilera-int{position:absolute;left:calc(50% - 50vw);right:calc(50% - 50vw);top:0;height:22vh;--bw:10vw;z-index:2} @media (min-width:700px){.mx-hilera-int{--bw:5.5vw}} .mx-hilera-int .mx-hilo path{stroke:#8E6A50} .mx-orn{display:block;width:min(56vw,230px);height:auto;margin:0 auto 4px} html[data-style="mexicana"] .names{color:#C2185B} html[data-style="mexicana"] .names .amp{color:#1E5AA8} html[data-style="mexicana"] h2{color:#C2185B;font-style:italic} html[data-style="mexicana"] h2::after{content:"";display:block;width:132px;height:24px;margin:8px auto 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 24'%3E%3Cg fill='none' stroke='%231E5AA8' stroke-width='1.3'%3E%3Cpath d='M2 12h28M102 12h28'/%3E%3Crect x='36' y='2' width='20' height='20'/%3E%3Crect x='56' y='2' width='20' height='20'/%3E%3Crect x='76' y='2' width='20' height='20'/%3E%3C/g%3E%3Cg fill='%231E5AA8'%3E%3Cpath d='M46 5l3 7-3 7-3-7ZM86 5l3 7-3 7-3-7Z'/%3E%3C/g%3E%3Ccircle cx='66' cy='12' r='5' fill='%23D81B60'/%3E%3Ccircle cx='66' cy='12' r='2' fill='%23FBC02D'/%3E%3C/svg%3E") center/contain no-repeat} html[data-style="mexicana"] .kicker{color:#1E5AA8} html[data-style="mexicana"] main>section:not(.hero){position:relative} html[data-style="mexicana"] main>section:not(.hero)::before{content:"";display:block;height:6px;margin:0 auto 34px;width:min(100%,520px);border-radius:3px; background:linear-gradient(90deg,#D81B60 0 14%,#F57C00 14% 28%,#FBC02D 28% 42%,#2E9E5B 42% 57%,#12A3B5 57% 71%,#1E5AA8 71% 85%,#7B3FA0 85% 100%)} html[data-style="mexicana"] .tarj,html[data-style="mexicana"] .rsvp{background:#FFFFFF;border:1.5px solid #1E5AA8;border-radius:14px;box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 5.5px #F57C00,0 20px 40px -32px rgba(30,90,168,.6)} html[data-style="mexicana"] .count{gap:10px} html[data-style="mexicana"] .count div{min-width:0;flex:1;max-width:84px;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:6px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Crect width='60' height='60' fill='%23FFFDF8'/%3E%3Cg fill='none' stroke='%231E5AA8' stroke-width='2'%3E%3Crect x='1' y='1' width='58' height='58'/%3E%3Ccircle cx='30' cy='30' r='9'/%3E%3C/g%3E%3Cg fill='%231E5AA8'%3E%3Cpath d='M30 6c4 6 4 10 0 14c-4-4-4-8 0-14ZM30 54c4-6 4-10 0-14c-4 4-4 8 0 14ZM6 30c6 4 10 4 14 0c-4-4-8-4-14 0ZM54 30c-6 4-10 4-14 0c4-4 8-4 14 0Z'/%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3Cpath d='M0 0h8a8 8 0 0 1-8 8ZM60 0v8a8 8 0 0 1-8-8ZM0 60v-8a8 8 0 0 1 8 8ZM60 60h-8a8 8 0 0 1 8-8Z'/%3E%3C/g%3E%3Cg fill='%23F57C00'%3E%3Ccircle cx='30' cy='30' r='1.8'/%3E%3Ccircle cx='13' cy='13' r='2.2'/%3E%3Ccircle cx='47' cy='13' r='2.2'/%3E%3Ccircle cx='13' cy='47' r='2.2'/%3E%3Ccircle cx='47' cy='47' r='2.2'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat;box-shadow:0 10px 18px -12px rgba(30,90,168,.8)} html[data-style="mexicana"] .count b{color:#C2185B;background:#FFFDF8;padding:0 .12em;border-radius:6px;font-size:clamp(1.4rem,6.4vw,1.9rem)} html[data-style="mexicana"] .count span{color:#1E5AA8;background:#FFFDF8;padding:0 .3em;border-radius:4px;opacity:1;font-size:.7rem;font-weight:600} html[data-style="mexicana"] .arco{outline-color:#1E5AA8} .mx-abrir .mx-carta,.mx-abrir .mx-pie,.mx-abrir .mx-para,.mx-abrir .mx-nombres,.mx-abrir .mx-fecha{transition:none} html[data-style="mexicana"] .count div{background:radial-gradient(circle at 50% 50%,#FFFDF8 0 40%,rgba(255,253,248,0) 41%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Crect width='60' height='60' fill='%23FFFDF8'/%3E%3Cg fill='none' stroke='%231E5AA8' stroke-width='2'%3E%3Crect x='1' y='1' width='58' height='58'/%3E%3C/g%3E%3Cg fill='%231E5AA8'%3E%3Cpath d='M0 0h12a12 12 0 0 1-12 12ZM60 0v12a12 12 0 0 1-12-12ZM0 60v-12a12 12 0 0 1 12 12ZM60 60h-12a12 12 0 0 1 12-12Z'/%3E%3C/g%3E%3Cg fill='%23F57C00'%3E%3Ccircle cx='30' cy='4' r='2'/%3E%3Ccircle cx='30' cy='56' r='2'/%3E%3Ccircle cx='4' cy='30' r='2'/%3E%3Ccircle cx='56' cy='30' r='2'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat} html[data-style="mexicana"] .count b,html[data-style="mexicana"] .count span{background:none}