*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 1rem/1.65 var(--f-body);overflow-x:hidden}
body::before{content:"";position:fixed;inset:-20%;z-index:-3;background:radial-gradient(40% 40% at 20% 20%,color-mix(in srgb,var(--primary) 22%,transparent),transparent),radial-gradient(35% 35% at 80% 30%,color-mix(in srgb,var(--accent) 20%,transparent),transparent),radial-gradient(40% 40% at 50% 90%,color-mix(in srgb,var(--primary) 14%,transparent),transparent);animation:aurora 22s ease-in-out infinite alternate}
@keyframes aurora{to{transform:translate3d(4%,-3%,0) rotate(6deg) scale(1.1)}}
body::after{content:"";position:fixed;inset:0;z-index:-2;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 48 48' fill='none' stroke='white' stroke-width='.5' stroke-linecap='round' stroke-linejoin='round' opacity='.09'%3E%3Cg transform='translate(12 12)'%3E%3Cpath d='M7.5 3C5 3 3.5 5 3.5 7.5c0 2 1 3.4 1.5 5.4.6 2.4.6 8.1 2.4 8.1 1.6 0 1.3-4.5 3-4.5h3.2c1.7 0 1.4 4.5 3 4.5 1.8 0 1.8-5.7 2.4-8.1.5-2 1.5-3.4 1.5-5.4C20.5 5 19 3 16.5 3c-1.6 0-2.6.9-4.5.9S9.1 3 7.5 3z'/%3E%3C/g%3E%3C/svg%3E");background-size:150px 150px}
#fx{position:fixed;inset:0;z-index:-1;pointer-events:none}
h1,h2,h3,h4,.brand{font-family:var(--f-head);line-height:1.2}a{color:var(--primary)}.i{width:1.25em;height:1.25em;vertical-align:-.25em;flex:none}
.nav{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:.9rem 5vw;background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid rgb(var(--ov)/0.0784);transition:padding .3s,box-shadow .3s}.nav.sc{padding:.5rem 5vw;box-shadow:0 8px 30px var(--sh)}
.brand{display:inline-flex;gap:.5rem;align-items:center;font-weight:700;font-size:1.3rem;text-decoration:none;color:var(--text)}.brand .i{color:var(--primary);filter:drop-shadow(0 0 8px var(--primary))}
.nav nav{display:flex;align-items:center;gap:1.5rem}.nav nav a{position:relative;text-decoration:none;color:var(--text)}.nav nav a:not(.cta):not(.profile)::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:100%;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .3s}.nav nav a:not(.cta):not(.profile):hover::after,.nav nav a[aria-current]::after{transform:scaleX(1)}.nav nav a[aria-current]{color:var(--primary)}
.cta{position:relative;overflow:hidden;display:inline-flex;gap:.5rem;align-items:center;background:var(--primary);color:var(--on-primary);font:500 1rem var(--f-body);padding:.75rem 1.5rem;border-radius:99px;border:0;text-decoration:none;cursor:pointer;box-shadow:0 0 0 0 color-mix(in srgb,var(--primary) 60%,transparent);animation:glow 2.8s infinite}.nav nav a.cta{color:var(--on-primary)}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgb(var(--ov)/0.5333) 50%,transparent 70%);transform:translateX(-120%);animation:shine 4s infinite}@keyframes shine{40%,100%{transform:translateX(120%)}}@keyframes glow{70%{box-shadow:0 0 0 14px transparent}}
.profile{position:relative;display:flex;padding:.45rem;border:1px solid rgb(var(--ov)/0.2);border-radius:50%;color:var(--text);transition:.2s}.profile:hover{border-color:var(--primary);color:var(--primary)}.profile span{position:absolute;right:0;top:130%;white-space:nowrap;background:var(--surface);padding:.4rem .8rem;border-radius:8px;font-size:.85rem;opacity:0;pointer-events:none;transition:.2s}.profile:hover span,.profile:focus-visible span{opacity:1}
.burger{display:none;background:0;border:0;color:var(--text);font-size:1.6rem}
.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:2rem;align-items:center;min-height:84vh;padding:3rem 5vw;max-width:1250px;margin:auto}.hero h1{font-size:clamp(2.3rem,5vw,4.1rem);margin:.8rem 0 1rem}
.hello{display:inline-flex;gap:.5rem;align-items:center;margin:0;padding:.4rem 1rem;border-radius:99px;border:1px solid color-mix(in srgb,var(--primary) 50%,transparent);background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary);font-weight:500}
.txt>*{animation:rise .9s both}.txt>:nth-child(2){animation-delay:.12s}.txt>:nth-child(3){animation-delay:.24s}.txt>:nth-child(4){animation-delay:.36s}@keyframes rise{from{opacity:0;transform:translateY(26px)}}
.vis{position:relative;aspect-ratio:1;max-width:520px;width:100%;justify-self:center;display:grid;place-items:center}.orb{position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--primary),var(--accent) 50%,transparent 72%);opacity:.55;filter:blur(8px);animation:float 7s ease-in-out infinite}@keyframes float{50%{transform:translateY(-16px) scale(1.04)}}
.ring{position:absolute;border-radius:50%;border:1px dashed rgb(var(--ov)/0.251);animation:spin 30s linear infinite}.r1{inset:6%}.r2{inset:22%;animation-duration:20s;animation-direction:reverse;border-color:color-mix(in srgb,var(--primary) 60%,transparent)}@keyframes spin{to{transform:rotate(360deg)}}
.ring::after{content:"";position:absolute;top:-5px;left:50%;width:10px;height:10px;border-radius:50%;background:var(--primary);box-shadow:0 0 14px var(--primary)}
.big-i{position:relative;width:34%;height:34%;color:var(--bigi);filter:drop-shadow(0 0 22px var(--primary));animation:float 5s ease-in-out infinite}
.chip{position:absolute;display:flex;gap:.5rem;align-items:center;padding:.55rem .9rem;border-radius:14px;background:color-mix(in srgb,var(--surface) 80%,transparent);border:1px solid rgb(var(--ov)/0.149);backdrop-filter:blur(10px);font-size:.9rem;animation:float 6s ease-in-out infinite}.chip .i{color:var(--primary)}.c1{top:8%;right:0}.c2{bottom:14%;left:-2%;animation-delay:-2s}.c3{bottom:2%;right:8%;animation-delay:-4s}
.wrap{max-width:1100px;margin:auto;padding:3rem 5vw}.narrow{max-width:480px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.2rem}
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s,transform .8s}.js .reveal.in{opacity:1;transform:none}
.card{position:relative;overflow:hidden;background:color-mix(in srgb,var(--surface) 78%,transparent);border:1px solid rgb(var(--ov)/0.1216);border-radius:20px;padding:1.5rem;color:var(--text);text-decoration:none;backdrop-filter:blur(10px);transition:transform .3s,border-color .3s}.card>*{position:relative}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--primary) 22%,transparent),transparent 60%);opacity:0;transition:opacity .3s}a.card:hover{transform:translateY(-4px);border-color:var(--primary)}.card:hover::before{opacity:1}
.card h3{margin:.8rem 0 .3rem}.ci{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary);border:1px solid color-mix(in srgb,var(--primary) 40%,transparent)}
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}.strip div{display:flex;gap:.9rem;align-items:center;padding:1rem;border-radius:16px;border:1px solid rgb(var(--ov)/0.102)}.strip .i{color:var(--primary);width:1.7em;height:1.7em}
.promo{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:center;padding:2rem;border-radius:24px;border:1px solid color-mix(in srgb,var(--primary) 45%,transparent);background:linear-gradient(120deg,color-mix(in srgb,var(--primary) 16%,var(--surface)),var(--surface))}.promo h2{margin:0 0 .3rem}.promo p{margin:0}
details{border-bottom:1px solid rgb(var(--ov)/0.1216);padding:1rem 0}summary{cursor:pointer;font-weight:500;list-style:none;display:flex;justify-content:space-between}summary::after{content:"+";color:var(--primary);font-size:1.4rem;transition:transform .3s}details[open] summary::after{transform:rotate(45deg)}details p{animation:rise .4s}
.map{width:100%;height:340px;border:0;border-radius:20px;margin-top:2rem;filter:var(--map-f)}
.login{display:grid;gap:1rem}label{display:grid;gap:.3rem}input:not([type=checkbox]){width:100%;padding:.8rem;border-radius:12px;border:1px solid rgb(var(--ov)/0.2);background:color-mix(in srgb,var(--bg) 80%,transparent);color:var(--text);font:inherit;transition:border-color .2s,box-shadow .2s}input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 25%,transparent)}
.pw{position:relative;display:block}.pw button{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:0;border:0;cursor:pointer;color:var(--text);display:flex}.chk{display:flex;gap:.5rem}.err{background:#7a1f2b;color:var(--err-c);padding:.8rem 1rem;border-radius:12px}
.badge-ico{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary);animation:float 5s ease-in-out infinite}.code{text-align:center;font:700 1.8rem var(--f-head);letter-spacing:.5em}.qr{background:#fff;padding:12px;border-radius:14px;width:max-content;margin:auto}.mcode{font-size:.9rem;opacity:.8;text-align:center}
.foot{margin-top:4rem;border-top:1px solid rgb(var(--ov)/0.102);background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--surface) 75%,transparent))}.fgrid{max-width:1100px;margin:auto;padding:3.5rem 5vw 2rem;display:grid;grid-template-columns:1.4fr 1fr 1fr 1.5fr;gap:2.5rem}.foot h4{margin:0 0 1rem}.foot p{margin:.4rem 0}.foot a{color:var(--text);opacity:.8;text-decoration:none;transition:.2s}.foot a:hover{color:var(--primary);opacity:1}.foot .l{display:grid;gap:.5rem}.foot .ct p{display:flex;gap:.6rem}.foot .ct .i{color:var(--primary);margin-top:.2rem}
.soc{display:flex;gap:.6rem;margin-top:1rem}.soc a{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;border:1px solid rgb(var(--ov)/0.1647);opacity:1}.soc a:hover{background:var(--primary);color:var(--on-primary);box-shadow:0 0 18px var(--primary);transform:translateY(-3px)}
.fbar{max-width:1100px;margin:auto;padding:1.2rem 5vw 2rem;border-top:1px solid rgb(var(--ov)/0.0784);display:flex;justify-content:space-between;align-items:center;gap:1rem;opacity:.8}.upb{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid rgb(var(--ov)/0.2);background:0;color:var(--text);cursor:pointer}.upb:hover{border-color:var(--primary);color:var(--primary)}
.wa{position:fixed;right:1rem;bottom:1rem;z-index:6;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#25D366;color:#06121F;text-decoration:none;animation:ping 2.4s infinite}.wa .i{width:28px;height:28px}@keyframes ping{70%{box-shadow:0 0 0 18px #25d36600}0%{box-shadow:0 0 0 0 #25d36699}}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}@media(prefers-reduced-motion:reduce){*,::before,::after{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:800px){.hero{grid-template-columns:1fr;min-height:auto}.vis{max-width:320px}.burger{display:block}.nav nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;padding:1rem 5vw 1.5rem;background:var(--bg);border-bottom:1px solid rgb(var(--ov)/0.102)}.open .nav nav{display:flex}.profile span{position:static;opacity:1;background:0;padding:0 0 0 .5rem}.profile{border-radius:99px;padding:.5rem .9rem}.fgrid{grid-template-columns:1fr}.wa{bottom:5rem}}
.logo{height:36px;width:auto}.feat{width:100%;border-radius:20px;margin-bottom:1.5rem}.thumb{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px}.thumb.s{width:140px;aspect-ratio:auto}
textarea,select{width:100%;padding:.8rem;border-radius:12px;border:1px solid rgb(var(--ov)/0.2);background:color-mix(in srgb,var(--bg) 80%,transparent);color:var(--text);font:inherit}textarea:focus,select:focus{outline:0;border-color:var(--primary)}
.pop{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:1rem;background:#000a;backdrop-filter:blur(4px)}.pop[hidden]{display:none}.pop .card{max-width:420px;animation:rise .5s}.pop .x{position:absolute;top:.8rem;right:.8rem;background:0;border:0;color:var(--text);cursor:pointer}
.stars{display:flex;flex-direction:row-reverse;justify-content:center;gap:.2rem}.stars input{position:absolute;opacity:0}.stars label{font-size:2.6rem;line-height:1;color:rgb(var(--ov)/0.251);cursor:pointer;transition:transform .2s,color .2s}.stars input:checked~label,.stars label:hover,.stars label:hover~label{color:#ffd166}.stars label:hover{transform:scale(1.2)}.stars input:focus-visible+label{outline:2px solid var(--accent)}
/* ===== Fase 6: fondo dental, encabezados, ruleta, marquesina, WhatsApp ===== */
.bub{position:fixed;bottom:-80px;z-index:-1;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 30% 28%,rgb(var(--ov)/0.3333),color-mix(in srgb,var(--primary) 16%,transparent) 55%,transparent 72%);border:1px solid rgb(var(--ov)/0.1216);animation:bub linear infinite}@keyframes bub{to{transform:translate(var(--dx,20px),-115vh)}}
.phero{position:relative;overflow:hidden;padding:4.5rem 5vw 3rem;text-align:center;border-bottom:1px solid rgb(var(--ov)/0.0784)}.phero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 130% at 50% 0%,color-mix(in srgb,var(--primary) 20%,transparent),transparent);z-index:-1}
.phero .wrap{padding:0 5vw}.phero h1{font-size:clamp(2rem,4.6vw,3.4rem);margin:.8rem auto;max-width:22ch}.phero .lead{max-width:62ch;margin:0 auto;opacity:.85;font-size:1.05rem}
.eyebrow{display:inline-flex;gap:.5rem;align-items:center;margin:0;padding:.35rem 1rem;border-radius:99px;border:1px solid color-mix(in srgb,var(--primary) 50%,transparent);background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary);font-size:.9rem;font-weight:500;animation:rise .8s both}
.phero h1,.phero .lead{animation:rise .9s .1s both}.scan{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--primary),transparent);box-shadow:0 0 18px var(--primary);animation:scan 5.5s ease-in-out infinite}@keyframes scan{0%{top:0;opacity:0}12%,88%{opacity:1}100%{top:100%;opacity:0}}
.ghost{position:absolute;color:var(--primary);opacity:.12;animation:float 7s ease-in-out infinite}.g1{left:6%;top:20%}.g2{right:8%;bottom:14%;animation-delay:-3s}
.sec{position:relative;margin:0 0 .3rem}.sec::after{content:"";display:block;height:3px;width:60px;margin-top:.5rem;border-radius:3px;background:var(--primary);box-shadow:0 0 14px var(--primary);transform-origin:left;animation:grow 1.2s both}@keyframes grow{from{transform:scaleX(0)}}
.sub{opacity:.8;max-width:62ch;margin:.4rem 0 1.5rem}
a.card:hover{transform:perspective(800px) translateY(-4px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;list-style:none;padding:0;margin:.8rem 0}.chips.left{justify-content:flex-start}.chips li{padding:.25rem .85rem;border-radius:99px;border:1px solid color-mix(in srgb,var(--primary) 50%,transparent);font-size:.85rem}
.marq{overflow-x:auto;scrollbar-width:none;cursor:grab;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}.marq::-webkit-scrollbar{display:none}
.track{display:flex;gap:1rem;width:max-content;padding:.5rem 1rem}.tcard{flex:none;width:min(80vw,340px);margin:0;padding:1.4rem;border-radius:20px;background:color-mix(in srgb,var(--surface) 80%,transparent);border:1px solid rgb(var(--ov)/0.1216);backdrop-filter:blur(10px)}.tcard blockquote{margin:.6rem 0;font-size:1.02rem}.tcard figcaption{opacity:.7;font-size:.9rem}.stars-t{color:#ffd166;letter-spacing:.1em}
.wheel-wrap{position:relative;height:calc(100vh*(1 + var(--n,3)*.45))}.wheel-wrap:not(.on){height:auto}
.wheel-stage{position:sticky;top:64px;height:calc(100vh - 64px);display:grid;grid-template-rows:minmax(0,1fr) auto auto;align-items:center;overflow:hidden}.wheel-wrap:not(.on) .wheel-stage{position:static;height:auto;display:block;padding:2rem 5vw}
.wheel-scene{perspective:1100px;display:grid;place-items:center;min-height:0;height:100%}
.wheel{position:relative;width:min(66vw,250px);height:min(300px,38vh);transform-style:preserve-3d;transform:translateZ(calc(var(--R,300px)*-1)) rotateY(var(--a,0deg));transition:transform 1.1s cubic-bezier(.22,.8,.22,1)}
.wheel-wrap:not(.on) .wheel{width:auto;height:auto;transform:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.wcard{position:absolute;inset:0;padding:1.4rem;border-radius:22px;background:linear-gradient(160deg,color-mix(in srgb,var(--surface) 92%,transparent),color-mix(in srgb,var(--bg) 88%,transparent));border:1px solid rgb(var(--ov)/0.1412);backface-visibility:hidden;opacity:.5;transform:rotateY(calc(var(--i)*var(--step,60deg))) translateZ(var(--R,300px)) scale(var(--s,1));transition:transform 1s cubic-bezier(.22,.8,.22,1),opacity .6s,box-shadow .6s,border-color .6s}
.wcard.act{--s:1.16;opacity:1;border-color:var(--primary);box-shadow:0 0 44px color-mix(in srgb,var(--primary) 38%,transparent)}.wcard h3{margin:.7rem 0 .3rem}.wcard p{margin:0;opacity:.85}
.wheel-wrap:not(.on) .wcard{position:relative;transform:none;opacity:1}.wheel-wrap:not(.on) .winfo,.wheel-wrap:not(.on) .wctl{display:none}
.winfo{padding:.6rem 5vw;text-align:center;max-width:720px;margin:auto}.winfo h2{margin:.2rem 0}.winfo p{margin:.2rem 0;opacity:.85}.winfo.sw{animation:rise .6s}
.wctl{display:flex;justify-content:center;align-items:center;gap:1rem;padding-bottom:1rem}.wctl button{width:42px;height:42px;border-radius:50%;border:1px solid rgb(var(--ov)/0.2);background:0;color:var(--text);font-size:1.4rem;cursor:pointer}.wctl button:hover{border-color:var(--primary);color:var(--primary)}
#wdots{display:flex;gap:.4rem}#wdots i{width:9px;height:9px;border-radius:9px;background:rgb(var(--ov)/0.251);cursor:pointer;transition:.3s}#wdots i.on{background:var(--primary);width:26px}
.wchat{position:fixed;right:1rem;bottom:1rem;z-index:25}.wfab{position:relative;display:grid;place-items:center;width:62px;height:62px;border-radius:50%;border:1px solid rgb(var(--ov)/0.3333);cursor:pointer;color:#fff;background:linear-gradient(145deg,#25D366,#0b8f64);box-shadow:0 0 28px #25d36688,inset 0 0 12px rgb(var(--ov)/0.2);transition:transform .3s}.wfab:hover{transform:scale(1.08) rotate(-6deg)}
.wring{position:absolute;inset:-6px;border-radius:50%;border:2px solid #25d36688;animation:wr 2.4s infinite}@keyframes wr{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.5);opacity:0}}
.wpanel{position:absolute;right:0;bottom:78px;width:min(92vw,340px);border-radius:22px;overflow:hidden;background:color-mix(in srgb,var(--surface) 94%,#000);border:1px solid rgb(var(--ov)/0.1647);box-shadow:0 20px 60px var(--sh2);animation:rise .35s both}.wpanel[hidden]{display:none}
.wpanel header{display:flex;gap:.7rem;align-items:center;padding:.9rem 1rem;background:linear-gradient(120deg,#0b8f64,#25D366);color:#06121F}.wpanel header div{flex:1;display:grid}.wpanel header small{display:flex;gap:.35rem;align-items:center}.wpanel header small i{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 8px #fff}
.wpanel header button{background:0;border:0;color:#06121F;cursor:pointer}.wav{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;color:#0b8f64}
.wbody{padding:1rem;display:grid;gap:.7rem}.wb{margin:0;padding:.7rem .9rem;border-radius:4px 16px 16px 16px;background:rgb(var(--ov)/0.0784)}.wq{display:grid;gap:.4rem}.wq button{text-align:left;padding:.55rem .8rem;border-radius:12px;border:1px solid color-mix(in srgb,#25D366 60%,transparent);background:0;color:var(--text);font:inherit;font-size:.9rem;cursor:pointer;transition:.2s}.wq button:hover{background:#25d36622}
#wform{display:flex;gap:.5rem;padding:0 1rem}#wform input{flex:1}#wform button{width:44px;border-radius:12px;border:0;background:#25D366;color:#06121F;cursor:pointer;display:grid;place-items:center}.wnote{display:block;padding:.4rem 1rem .8rem;opacity:.6}
@media(max-width:800px){.wchat{bottom:1rem}.ghost{display:none}}
/* ===== Fase 7: jerarquía tipográfica, fondos con fotos, tarjetas de imagen, contacto y mapa ===== */
body{font-size:1rem}
.wrap h2.sec,h2.sec{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:700;letter-spacing:-.015em;line-height:1.1;text-align:left;margin:0 0 .6rem;opacity:1}
.sec::after{margin-top:.7rem;width:72px}
.sub{font-size:1.1rem;line-height:1.6;opacity:.72;max-width:64ch;margin:.9rem 0 2rem;text-align:left}
.card h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:.2rem 0}.card h3,.scard h3{font-size:1.3rem;margin:.5rem 0 .3rem}
.phero h1{font-size:clamp(2.2rem,5vw,3.8rem)}.phero .lead{font-size:1.15rem}
.hero-wrap{position:relative;overflow:hidden}.hero-wrap>.hero{position:relative;z-index:1}
.slides{position:absolute;inset:0;z-index:0}.slides>i{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.04);transition:opacity 1.6s ease}
.slides>i.on{opacity:1;animation:kb 16s ease-out forwards}@keyframes kb{to{transform:scale(1.14)}}
.slides::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 94%,transparent) 5%,color-mix(in srgb,var(--bg) 62%,transparent) 55%,color-mix(in srgb,var(--bg) 40%,transparent))}
.phero.hasbg .slides::after{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 70%,transparent),color-mix(in srgb,var(--bg) 88%,transparent))}
.phero{min-height:300px;display:grid;align-content:center}.phero .wrap{position:relative;z-index:1}.phero .scan{z-index:2}.phero.hasbg::before{display:none}
.sg{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.scard{position:relative;aspect-ratio:4/5;border-radius:22px;overflow:hidden;border:1px solid rgb(var(--ov)/0.1412);cursor:pointer;background:var(--surface);transition:border-color .3s,box-shadow .3s}
.scard:hover,.scard:focus-within,.scard.open{border-color:var(--primary);box-shadow:0 0 36px color-mix(in srgb,var(--primary) 30%,transparent)}
.simg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s}.scard:hover .simg,.scard.open .simg{transform:scale(1.08)}
.sph,.wph,.tph{display:grid;place-items:center;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 26%,var(--surface)),var(--surface));color:var(--primary)}
.sov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:1.3rem;background:linear-gradient(180deg,transparent 45%,#06121Fe6);transition:background .5s}
.scard:hover .sov,.scard:focus-within .sov,.scard.open .sov{background:linear-gradient(180deg,#06121F66,#06121Ff5)}
.sdesc{max-height:0;opacity:0;overflow:hidden;transition:max-height .55s ease,opacity .4s}.scard:hover .sdesc,.scard:focus-within .sdesc,.scard.open .sdesc{max-height:220px;opacity:1}
.sdesc p{margin:.2rem 0 .9rem;opacity:.9}.sov h3{margin:0 0 .3rem}
.thumb.tph{aspect-ratio:16/9;border-radius:14px}
.wheel{width:min(70vw,280px);height:min(390px,50vh)}
.wcard{padding:0;display:flex;flex-direction:column;overflow:hidden}.wimg{flex:1 1 58%;min-height:0;width:100%;object-fit:cover;display:block}.wcb{padding:.9rem 1.1rem 1.1rem}.wcb h3{margin:0 0 .25rem;font-size:1.2rem}.wcb p{margin:0;font-size:.9rem;opacity:.85;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gtile{flex:none;width:min(72vw,300px);margin:0;border-radius:18px;overflow:hidden;position:relative;border:1px solid rgb(var(--ov)/0.1333);cursor:zoom-in}.gtile img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .6s}.gtile:hover img{transform:scale(1.07)}
.gtile figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.4rem .9rem .7rem;background:linear-gradient(transparent,#000c);font-size:.9rem}
.lb{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:#000d;backdrop-filter:blur(6px);padding:1rem}.lb[hidden]{display:none}.lb figure{margin:0;max-width:min(94vw,1100px);animation:rise .35s}.lb img{max-width:100%;max-height:78vh;border-radius:14px;display:block;margin:auto}.lb figcaption{text-align:center;margin-top:.7rem}.lbx{position:absolute;top:.8rem;right:1.2rem;background:0;border:0;color:#fff;font-size:2.6rem;line-height:1;cursor:pointer}
.cgrid{display:grid;grid-template-columns:1fr 1.15fr;gap:1.5rem;align-items:start}.crow{display:flex;gap:.9rem;align-items:flex-start;margin:1.1rem 0}.crow .ci{width:46px;height:46px;flex:none}.cform{display:grid;gap:1rem}.okmsg{padding:1rem;border-radius:12px;background:color-mix(in srgb,var(--primary) 16%,transparent);border:1px solid var(--primary)}
select{appearance:auto}
.route-bar{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 1rem}.route-bar input{flex:1;min-width:220px}.mini{display:inline-flex;gap:.35rem;align-items:center;background:rgb(var(--ov)/0.0706);color:var(--text);border:1px solid rgb(var(--ov)/0.1647);border-radius:99px;padding:.5rem 1rem;font:inherit;font-size:.9rem;cursor:pointer;text-decoration:none}.mini:hover{border-color:var(--primary);color:var(--primary)}
.route-sum{min-height:1.6rem;color:var(--primary);font-weight:500;margin:.2rem 0 .8rem}
#cmap{height:440px;border-radius:22px;overflow:hidden;border:1px solid rgb(var(--ov)/0.1333);background:var(--surface)}#cmap .map{height:100%;margin:0;border-radius:0}
#cmap .leaflet-tile-pane{filter:var(--tile-f)}
.cm{position:relative;display:block;width:26px;height:26px}.cm i{position:absolute;inset:5px;border-radius:50%;background:var(--primary);box-shadow:0 0 14px var(--primary)}.cm::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--primary);animation:wr 2s infinite}
@media(max-width:800px){.cgrid{grid-template-columns:1fr}.scard{aspect-ratio:3/4}}
/* ===== Fase 7.1: más aire entre la ruleta y el texto ===== */
.wheel-scene{padding:2.6rem 0 3.2rem}
.wheel{height:min(340px,38vh)}
.winfo{margin-top:1.4rem;padding-top:.4rem}
.winfo h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.wctl{padding-top:.6rem}
@media(max-height:780px){.winfo .chips{display:none}.wheel{height:min(300px,36vh)}}
@media(max-width:800px){.wheel{height:min(330px,40vh)}}
/* ===== Fase 7.2: ruleta - tarjeta con título, descripción y botones debajo ===== */
.wph{display:grid;place-items:center}.wph .i{width:64px;height:64px}
.wcb{padding:1rem 1.2rem;text-align:center}.wcb h3{margin:0;font-size:1.35rem}
.winfo h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.winfo #ws{font-size:1.1rem;line-height:1.55;opacity:.92;max-width:56ch;margin:.2rem auto .5rem}
.wlab{margin:.5rem 0 0;font-size:.8rem;letter-spacing:.06em;color:var(--primary);opacity:.9}
.winfo .chips{display:flex;margin:.5rem 0 .9rem}.winfo .chips li{font-size:.85rem;padding:.2rem .75rem}
.wheel{height:clamp(200px,calc(100vh - 500px),340px)}
@media(max-height:780px){.winfo .chips{display:flex}.wheel{height:clamp(200px,calc(100vh - 500px),340px)}}
@media(max-width:800px){.wheel{height:clamp(220px,calc(100vh - 520px),330px)}}
/* ===== Fase 8: lectura de entradas ===== */
.post{max-width:800px}.post h1{font-size:clamp(2rem,4.4vw,3.2rem);margin:.4rem 0 .6rem}.pmeta{opacity:.7;margin:0 0 1.4rem;font-size:.95rem}.crumbs{font-size:.9rem;opacity:.75}.crumbs a{text-decoration:none}
.pbody{font-size:1.1rem;line-height:1.85}.pbody h2{font-size:clamp(1.5rem,3vw,2rem);margin:2.2rem 0 .6rem}.pbody h3{font-size:1.3rem;margin:1.6rem 0 .4rem}.pbody img{max-width:100%;height:auto;border-radius:14px;margin:1rem 0}.pbody blockquote{border-left:3px solid var(--primary);margin:1.4rem 0;padding:.3rem 1.2rem;opacity:.92;font-style:italic}.pbody ul,.pbody ol{padding-left:1.4rem}.pbody li{margin:.3rem 0}.pbody a{color:var(--primary)}
.post .promo{margin:2.5rem 0}
/* ===== Fase 8.1: ruleta en celular (se desliza hacia los lados) ===== */
.wheel-scene{touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}.wheel-scene:active{cursor:grabbing}
.whint{display:none;text-align:center;opacity:.7;font-size:.9rem;margin:.2rem 0 0}
@media(max-width:800px){
 .wheel-wrap.on{height:auto!important}
 .wheel-wrap.on .wheel-stage{position:static;height:auto;display:block;overflow-x:clip;padding:.6rem 0 2rem}
 .wheel-wrap.on .wheel-scene{height:auto;padding:2.2rem 0 3rem}
 .wheel{height:clamp(300px,50vh,400px)!important}
 .whint{display:block}
}
/* ===== Fase 9: barra de mantenimiento, menú de cuenta, perfil ===== */
.mbar{position:relative;z-index:7;text-align:center;padding:.55rem 1rem;font-size:.92rem;background:linear-gradient(90deg,#b45309,#f59e0b);color:#1a1202}.mbar b{font-variant-numeric:tabular-nums}.mbar.warn{background:linear-gradient(90deg,#7a1f2b,#c0394f);color:#fff}.mbar a{color:inherit;font-weight:700}
.acct{position:relative}.acct-btn{display:flex;align-items:center;gap:.6rem;padding:.3rem .8rem .3rem .35rem;border-radius:99px;border:1px solid rgb(var(--ov)/0.2);background:color-mix(in srgb,var(--surface) 70%,transparent);color:var(--text);cursor:pointer;font:inherit;transition:.2s}.acct-btn:hover{border-color:var(--primary)}
.acct .av{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--primary);color:var(--on-primary);font-weight:700}.greet{display:grid;text-align:left;line-height:1.15}.greet small{opacity:.7;font-size:.72rem}.greet b{font-size:.95rem}.car{opacity:.6;font-size:.8rem}
.acct-menu{position:absolute;right:0;top:calc(100% + .6rem);min-width:230px;padding:.5rem;border-radius:16px;background:color-mix(in srgb,var(--surface) 96%,#000);border:1px solid rgb(var(--ov)/0.1647);box-shadow:0 20px 50px var(--sh2);animation:rise .25s both;z-index:9}.acct-menu[hidden]{display:none}
.acct-menu a{display:flex;gap:.7rem;align-items:center;padding:.6rem .8rem;border-radius:10px;color:var(--text);text-decoration:none}.acct-menu a:hover{background:rgb(var(--ov)/0.0784);color:var(--primary)}
dialog.nag{max-width:460px;color:var(--text);background:var(--surface);border:1px solid var(--primary);display:none;gap:1rem}dialog.nag[open]{display:grid}dialog.nag::backdrop{background:#000b;backdrop-filter:blur(4px)}.nag .act{display:flex;gap:.6rem;flex-wrap:wrap}
.pring{--p:0;display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:conic-gradient(var(--primary) calc(var(--p)*1%),rgb(var(--ov)/0.1216) 0);position:relative;font-weight:700}.pring::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--surface)}.pring span{position:relative}
.subf{border:1px solid rgb(var(--ov)/0.1333);border-radius:14px;padding:.8rem 1rem;display:grid;gap:.8rem}.subf legend{padding:0 .4rem;color:var(--primary);font-size:.9rem}
@media(max-width:800px){.acct-menu{position:static;box-shadow:none;margin-top:.5rem}.acct{width:100%}}
/* ===== Fase 9: imágenes de entradas y comentarios ===== */
.post .feat{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:20px;margin:0 0 1.8rem;max-height:520px;display:block}
.pbody img{max-width:100%;height:auto;display:block;margin:1.4rem auto;border-radius:14px}
.comments{margin:2.5rem 0}.cm{display:flex;gap:.9rem;margin:1.2rem 0;align-items:flex-start}.cm p{margin:.3rem 0 0;line-height:1.7}.cm small{opacity:.6}
.cav{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 22%,var(--surface));color:var(--primary);font-weight:700}
.cmf{margin-top:1.5rem}.cmf .cform{margin-top:.8rem}.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
/* ===== Fase 9.1: mapa de contacto ===== */
#cmap{position:relative;z-index:0;isolation:isolate}.route-sum.bad{color:var(--bad-l)}