:root{--navy:#071f55;--cyan:#03bfee;--turq:#14d5bb;--violet:#a64eef;--ink:#061d4d;--radius:13px;--side:clamp(12px,4.5vw,24px);--gap:clamp(5px,0.95dvh,9px);--row:clamp(40px,6.5dvh,59px)}
*{box-sizing:border-box}html{background:#e8f0f9;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--navy)}body{margin:0}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.shell{max-width:540px;min-height:100dvh;height:100dvh;margin:auto;position:relative;overflow:hidden;display:flex;flex-direction:column;background:radial-gradient(ellipse 40% 18% at 0% 67%,#c8fffa80,transparent),radial-gradient(ellipse 46% 23% at 110% 58%,#e8daff99,transparent),#fff;box-shadow:0 0 50px #6289b338}
.topstrip{z-index:3;flex:none;height:clamp(24px,3.75dvh,35px);background:linear-gradient(100deg,#0759a8,#4d2097);display:flex;align-items:center;justify-content:space-between;color:white;padding:0 var(--side);font-size:clamp(.61rem,2.4vw,.75rem);letter-spacing:.12em}.topstrip button{background:none;border:0;color:white;font-size:inherit;letter-spacing:0;cursor:pointer;padding:6px 1px}
.banner{height:clamp(104px,19dvh,191px);position:relative;flex:none;background:#e8faff;overflow:hidden}.banner>img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 38%}.wave{position:absolute;bottom:-1px;width:100%;height:40%;background:white;clip-path:ellipse(82% 52% at 50% 100%)}.banner:after{content:"";position:absolute;bottom:21%;left:-4%;width:108%;height:clamp(5px,.9dvh,9px);border-radius:50%;background:linear-gradient(90deg,#36b7ed,#2fe6bd,#7a57dc);transform:rotate(.2deg);filter:blur(1.3px)}
.profile-logo{--logo:clamp(82px,12.4dvh,119px);position:relative;flex:none;width:var(--logo);height:var(--logo);margin:calc(var(--logo)*-.67) auto 0;z-index:2;background:white;border:2px solid #0cbfd0;border-radius:50%;box-shadow:0 0 0 3px white,0 8px 20px #0580a02c;display:grid;place-items:center;overflow:hidden}.profile-logo:before{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid transparent;border-left-color:#157aea;border-right-color:#8747d8;pointer-events:none}.profile-logo img{width:93%;height:93%;object-fit:contain}
.identity{flex:none;position:relative;display:flex;justify-content:center;align-items:center;gap:8px;text-align:center;padding:clamp(2px,.65dvh,6px) 10px clamp(4px,.8dvh,9px)}.identity h1{font-size:clamp(1.2rem,5.3vw,2.05rem);line-height:1.13;letter-spacing:-.045em;margin:0 0 clamp(2px,.5dvh,5px);font-weight:830;white-space:nowrap}.identity p{margin:0;font-size:clamp(.66rem,2.4vw,.9rem);letter-spacing:.08em;color:#4c5575;font-weight:560;white-space:nowrap}.underline{height:2px;width:70%;margin:clamp(3px,.7dvh,6px) auto 0;background:linear-gradient(90deg,#20d9c9,#0c8ce5,#9447e5)}.spark{font-size:1.15rem;color:#10c6ba}.spark-r{color:#8c5cf0}
.content{position:relative;z-index:1;min-height:0;flex:1;display:flex;flex-direction:column;padding:0 var(--side);gap:var(--gap)}.actions{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,var(--row));gap:var(--gap);flex:none}.action{border:0;text-decoration:none;text-align:left;min-width:0;height:100%;border-radius:var(--radius);padding:5px clamp(8px,2.6vw,14px);display:flex;gap:clamp(5px,1.8vw,10px);align-items:center;color:#fff;font-size:clamp(.76rem,3.15vw,1rem);font-weight:640;cursor:pointer;box-shadow:0 3px 10px #206cb125;transition:transform .14s,filter .14s}.action:active{transform:scale(.98);filter:brightness(.95)}.action:focus-visible,.socials a:focus-visible{outline:3px solid #0a72d7;outline-offset:2px}.action svg{width:clamp(19px,3.3dvh,30px);height:clamp(19px,3.3dvh,30px);flex:none;stroke:#fff;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}.action span{min-width:0;flex:1}.action .arrow{width:14px;height:14px;flex:none;opacity:.8}.turquoise{background:linear-gradient(120deg,#19d2cb,#07b8d3)}.lavender{background:linear-gradient(120deg,#9478ea,#786df3)}.sky{background:linear-gradient(115deg,#1ca9ed,#1489ee)}.mint{background:linear-gradient(115deg,#2ac6a5,#35dbbc)}.book{grid-column:1/-1;justify-content:center;background:linear-gradient(110deg,#2bcaeb,#0e79f0 48%,#27d2de);font-size:clamp(.9rem,3.8vw,1.1rem);position:relative;overflow:hidden}.book:before{content:"";position:absolute;width:24%;height:200%;left:-10%;top:-60%;transform:rotate(32deg);background:#ffffff20}.book span{flex:initial}.sea{background:linear-gradient(120deg,#24cbbb,#2adab7)}.orchid{background:linear-gradient(120deg,#8c83f0,#ab77d9)}.muted{background:linear-gradient(120deg,#6594c3,#8399cd)}.muted.purple{background:linear-gradient(110deg,#737fc0,#9b8ac4)}.muted small{display:block;font-size:clamp(.56rem,2.15vw,.76rem);font-weight:450;line-height:1.2;opacity:.94;margin-top:1px}
.qr-card{min-height:0;flex:1;max-height:clamp(75px,13dvh,130px);display:grid;grid-template-columns:auto minmax(75px,.9fr) minmax(93px,1.15fr);align-items:center;gap:clamp(4px,1.6vw,10px);border-radius:15px;background:white;padding:clamp(5px,.85dvh,9px);box-shadow:0 1px 14px #168ed21b;border:1px solid #e1f1fc}.qr-image{border:1px solid #dfedf5;background:white;border-radius:9px;padding:2px;cursor:pointer;max-height:100%;height:100%;aspect-ratio:1;display:grid;place-items:center}.qr-image img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}.qr-caption{min-width:0}.qr-caption strong{display:block;font-size:clamp(.75rem,3.05vw,1.09rem);line-height:1.1}.qr-caption em{display:block;color:#1788da;font-size:clamp(.66rem,2.7vw,1rem);line-height:1.16;font-weight:600;font-family:Georgia,serif}.qr-caption p{font-size:clamp(.52rem,2vw,.65rem);line-height:1.22;margin:clamp(2px,.5dvh,5px) 0 0;color:#536581}.share-inline{display:flex;align-items:center;gap:4px;font-size:clamp(.55rem,2.15vw,.7rem);margin-top:clamp(2px,.5dvh,5px);padding:0;background:none;border:0;color:#0768ba;cursor:pointer;font-weight:650}.share-inline svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8}.qr-benefits{border-left:1px solid #dae4ee;padding-left:clamp(4px,1.3vw,9px);font-size:clamp(.54rem,2.05vw,.71rem);color:#294366;line-height:1.16}.qr-benefits div{display:flex;align-items:center;gap:5px;margin:clamp(3px,.6dvh,7px) 0}.qr-benefits i{background:linear-gradient(130deg,#21d8c5,#8b7def);color:white;width:clamp(15px,2.6dvh,19px);height:clamp(15px,2.6dvh,19px);flex:none;border-radius:50%;font-style:normal;display:grid;place-items:center}
footer{flex:none;position:relative;z-index:1}.socials{height:clamp(49px,8dvh,75px);display:flex;justify-content:space-around;align-items:center;gap:4px;padding:2px var(--side);position:relative}.socials a{display:flex;flex-direction:column;justify-content:center;align-items:center;text-decoration:none;font-size:clamp(.56rem,2.2vw,.76rem);color:#112f63;min-width:60px;gap:2px}.social{display:grid;place-items:center;width:clamp(25px,4.4dvh,37px);height:clamp(25px,4.4dvh,37px);border-radius:50%;color:#fff}.social svg{width:85%;height:85%}.facebook{color:#1877f2;background:#fff}.facebook svg{width:100%;height:100%}.instagram{background:linear-gradient(35deg,#ffbe4b 4%,#f62e70 45%,#8a30da 80%)}.instagram svg{fill:none;stroke:white;stroke-width:1.8}.instagram .dot{fill:white;stroke:none}.tiktok{background:#0e1017}.tiktok svg{fill:#fff;width:80%;height:80%;filter:drop-shadow(1.2px 1.2px 0 #ff335d) drop-shadow(-1px -1px 0 #10d4da)}.bottom-wave{height:clamp(7px,1.8dvh,15px);background:linear-gradient(115deg,#378df0,#2de1ce,#8d78ed);clip-path:ellipse(82% 100% at 50% 100%)}
dialog{border:0;border-radius:22px;width:min(510px,92vw);max-height:min(78dvh,690px);overflow:auto;padding:25px 24px 22px;box-shadow:0 22px 85px #001e4966;color:#173969}dialog::backdrop{background:#09245ca0;backdrop-filter:blur(3px)}dialog h2{margin:0 36px 12px 0;color:#071e54;font-size:1.35rem}dialog p{line-height:1.55;font-size:.94rem}dialog .items{display:grid;gap:10px;margin-top:15px}dialog .item{border-left:4px solid #30cccb;padding:8px 12px;background:#eff8ffce;border-radius:5px}dialog .item strong{display:block;margin-bottom:3px}dialog .item span{font-size:.88rem;line-height:1.4}dialog .close{position:absolute;right:14px;top:10px;border:0;background:#ecf6fd;border-radius:50%;width:36px;height:36px;font-size:1.4rem;color:#3e5273;cursor:pointer}.notice-icon{display:grid;place-items:center;width:60px;height:60px;background:linear-gradient(140deg,#27d1c7,#9a64ed);border-radius:17px;color:white;margin-bottom:15px}.notice-icon svg{width:32px;height:32px;stroke:currentColor;fill:none;stroke-width:1.8}.note{color:#61718f;font-size:.85rem}#qr-dialog{text-align:center}#qr-dialog img{width:min(315px,90%);margin:8px auto 0}.toast{position:fixed;bottom:18px;left:50%;transform:translate(-50%,20px);background:#062e6b;color:white;padding:13px 17px;border-radius:14px;opacity:0;transition:.2s;z-index:10;pointer-events:none;min-width:220px;max-width:90vw;text-align:center;font-size:.88rem}
.toast.visible{opacity:1;transform:translate(-50%,0)}
@media(min-width:540px){:root{--side:22px;--row:56px;--gap:10px}.banner{height:min(210px,21dvh)}.profile-logo{--logo:120px}.qr-card{max-height:130px}.identity h1{font-size:2.15rem}}
@media(max-width:355px){:root{--side:10px;--row:clamp(34px,5.5dvh,43px);--gap:4px}.spark{display:none}.action{font-size:.72rem;padding:3px 7px;gap:5px}.action svg{width:19px;height:19px}.action .arrow{width:11px;height:11px}.qr-card{grid-template-columns:auto minmax(60px,.9fr) minmax(90px,1.1fr);gap:4px;padding:4px}.qr-benefits{font-size:.5rem}}
@media(max-height:650px){:root{--row:clamp(32px,5.6dvh,39px);--gap:4px}.banner{height:clamp(78px,16dvh,107px)}.profile-logo{--logo:clamp(67px,11dvh,84px);margin-top:calc(var(--logo)*-.68)}.identity{padding:2px 10px 5px}.identity h1{font-size:clamp(1.15rem,4.8vw,1.7rem)}.qr-card{max-height:clamp(67px,12dvh,77px)}.socials{height:clamp(41px,7dvh,49px)}.bottom-wave{height:5px}}
@media(max-height:540px){.shell{height:auto;min-height:100dvh;overflow:visible}.content{flex:none}.qr-card{height:80px;max-height:none}.banner{height:80px}.socials{height:50px}.bottom-wave{height:7px}}
/* QR siempre contenido dentro de su tarjeta, también en pantallas bajas. */
.qr-image{width:clamp(53px,10dvh,93px);height:clamp(53px,10dvh,93px);max-height:none;min-width:0;align-self:center;justify-self:center;aspect-ratio:1}
.qr-image img{display:block;width:100%;height:100%;object-fit:contain}
.qr-card{grid-template-columns:clamp(53px,10dvh,93px) minmax(60px,.95fr) minmax(90px,1.2fr)}
@media(max-height:650px){.qr-image{width:clamp(52px,10dvh,65px);height:clamp(52px,10dvh,65px)}.qr-card{grid-template-columns:clamp(52px,10dvh,65px) minmax(60px,.95fr) minmax(90px,1.2fr)}}