:root{
  --bg:#07090d; --bg2:#0d1118; --card:#111722; --line:#1e2735;
  --text:#e8eef5; --muted:#93a1b5; --cyan:#35b8ff; --amber:#a45cff;
  --r:16px;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font:16px/1.6 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,.brand{font-family:"Space Grotesk",Inter,sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%}

.nav{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:12px 24px;background:rgba(7,9,13,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:.2em;font-size:15px}
.brand-logo{height:52px;width:auto;display:block}
.foot-logo{width:260px;max-width:100%;height:auto;display:block}
.nav nav{display:flex;align-items:center;gap:20px;font-size:14px;color:var(--muted)}
.nav nav a:hover{color:var(--text)}
.where{display:inline-block;background:rgba(164,92,255,.12);border:1px solid var(--amber);color:var(--amber);padding:6px 14px;border-radius:999px;font-size:14px}
.lang option{background:var(--bg);color:var(--text)}
.lang{background:none;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:5px 10px;cursor:pointer;font:inherit;font-size:13px}
.lang:hover{border-color:var(--cyan)}

.btn{display:inline-block;background:linear-gradient(135deg,#35b8ff,#8a5cff);color:#fff;font-weight:600;padding:13px 24px;border-radius:999px;border:0;cursor:pointer;font:600 15px Inter,sans-serif;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(53,184,255,.3)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--cyan);box-shadow:none}
.btn-sm{padding:7px 16px;font-size:13px;color:#fff}
.nav nav a.btn-sm{color:#fff}

.hero{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center;max-width:1200px;margin:0 auto;padding:72px 24px}
.eyebrow{color:var(--cyan);font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
h1{font-size:clamp(34px,5vw,58px);line-height:1.08;font-weight:700;letter-spacing:-.02em}
.sub{color:var(--muted);font-size:18px;margin:20px 0 28px;max-width:540px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.hero-viewer{position:relative}
.pano{width:100%;height:440px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--bg2)}
.pano.tall{height:560px}
.drag-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(7,9,13,.75);padding:4px 14px;border-radius:999px;font-size:12px;color:var(--muted);pointer-events:none}

.section{max-width:1100px;margin:0 auto;padding:72px 24px}
.section h2{font-size:clamp(26px,3.5vw,40px);margin-bottom:12px;letter-spacing:-.01em}
.lead{color:var(--muted);max-width:640px;margin-bottom:28px}
.note{color:var(--muted);font-size:13px;margin-top:10px}

.legend{list-style:none;display:flex;gap:22px;flex-wrap:wrap;margin-top:14px;padding:0;font-size:14px;color:var(--muted)}
.legend li{display:flex;align-items:center;gap:8px}
.dot{width:14px;height:14px;border-radius:50%;display:inline-block}
.dot-v{background:var(--cyan)}.dot-m{background:var(--amber)}.dot-r{background:#7dff9a}.dot-n{background:#eef2ff}.dot-l{background:#ff9bd5}.dot-w{background:#ffb347}

.hs{width:34px;height:34px;border-radius:50%;border:2px solid #fff;display:flex;align-items:center;justify-content:center;color:#04141a;font-weight:700;font-size:15px;cursor:pointer;box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:pulse 2s infinite}
.hs-v{background:var(--cyan)}.hs-m{background:var(--amber)}.hs-r{background:#7dff9a}.hs-n{background:#eef2ff}.hs-l{background:#ff9bd5}.hs-w{background:#ffb347}
.menu-h{margin:16px 0 2px;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.bk{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}
.bk label{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:13px;color:var(--muted)}
.bk input,.bk select{width:100%;box-sizing:border-box;padding:11px 10px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--text);font:500 15px Inter,sans-serif;color-scheme:dark}
.bk .btn{grid-column:1/-1;text-align:center}
.bk-ok{margin-bottom:10px;font-size:18px;font-weight:600;color:#7dff9a}
@media(max-width:480px){.bk{grid-template-columns:1fr 1fr}.bk label:first-child{grid-column:1/-1}}
.hs::after{content:attr(data-label);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:3px 10px;border-radius:999px;background:rgba(7,9,13,.8);border:1px solid rgba(255,255,255,.18);color:#fff;font:600 12px Inter,sans-serif;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s}
.hs:hover::after,.hs:focus-visible::after{opacity:1}
.hs:focus-visible{outline:2px solid #fff;outline-offset:3px}
@keyframes pulse{70%{box-shadow:0 0 0 14px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

.ba-box{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);--pos:50%}
.ba-box canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#baBefore{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-box input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;background:#fff;transform:translateX(-50%);pointer-events:none;box-shadow:0 0 14px rgba(0,0,0,.6)}
.ba-line::after{content:"↔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:#fff;color:#04141a;display:flex;align-items:center;justify-content:center;font-weight:700}
.tag{position:absolute;top:14px;padding:4px 12px;border-radius:999px;background:rgba(7,9,13,.75);font-size:12px;pointer-events:none}
.tag-b{left:14px}.tag-a{right:14px;color:var(--cyan)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;position:relative}
.card h3{font-size:20px;margin-bottom:8px}
.card p{color:var(--muted)}
.ico{font-size:28px;color:var(--cyan);margin-bottom:12px}
.niche{border-top:3px solid var(--amber)}
.plan{display:flex;flex-direction:column;gap:12px}
.plan .for{font-size:14px}
.plan ul{list-style:none;padding:0;display:grid;gap:8px;flex:1;margin-bottom:8px;color:var(--text);font-size:15px}
.plan li{padding-left:22px;position:relative}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--cyan)}
.plan .btn{text-align:center}
.featured{border-color:var(--cyan);box-shadow:0 0 40px rgba(53,184,255,.1)}
.badge{position:absolute;top:-12px;right:20px;background:var(--amber);color:#fff;font-size:12px;font-weight:600;padding:3px 12px;border-radius:999px}

.contact{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;border-top:1px solid var(--line)}
form{display:grid;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px}
label{display:grid;gap:6px;font-size:14px;color:var(--muted)}
input[type=text],input:not([type]){background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--text);font:inherit}
input:focus{outline:2px solid var(--cyan);outline-offset:1px}
.hp{position:absolute;left:-9999px}
.form-msg{min-height:1.4em;font-size:14px}
.form-msg.ok{color:#7dff9a}.form-msg.err{color:#ff8a8a}

footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;max-width:1100px;margin:0 auto;padding:32px 24px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}

.modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;padding:20px}
.modal[hidden]{display:none}
.modal-box{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;max-width:560px;width:100%;max-height:90vh;overflow:auto}
.modal-x{position:absolute;top:10px;right:14px;background:none;border:0;color:var(--text);font-size:28px;cursor:pointer}
.modal h3{margin-bottom:12px;font-size:22px}
.menu-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}
.vid-player{display:block;width:100%;aspect-ratio:16/9;border-radius:12px;background:#0b0f16}

@media(max-width:860px){
  .hero,.contact{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .pano,.pano.tall{height:340px}
  .nav nav a:not(.btn-sm){display:none}
}

/* ================= ANIMACIONES ================= */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none}
.progress span{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--cyan),var(--amber))}

.blobs{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.blobs i{position:absolute;border-radius:50%;filter:blur(110px);opacity:.28;will-change:transform}
.blobs .b1{width:520px;height:520px;background:var(--cyan);top:-120px;left:-140px}
.blobs .b2{width:460px;height:460px;background:var(--amber);bottom:-160px;right:-120px;opacity:.16}

.nav{transition:padding .3s,background .3s}
.nav.scrolled{padding-top:7px;padding-bottom:7px;background:rgba(7,9,13,.92)}

/* cursor glow en el hero */
.hero{position:relative}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx,70%) var(--my,30%),rgba(53,184,255,.14),transparent 60%)}

/* revelado al hacer scroll (solo si hay JS) */
.js [data-reveal]{opacity:0;transform:translateY(34px) scale(.98);filter:blur(8px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),filter .8s;transition-delay:var(--d,0s)}
.js [data-reveal].in{opacity:1;transform:none;filter:none}
.js [data-reveal="left"]{transform:translateX(-50px)}
.js [data-reveal="right"]{transform:translateX(50px)}
.js [data-reveal="left"].in,.js [data-reveal="right"].in{transform:none}

/* titular palabra por palabra */
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em}
.w>span{display:inline-block;transform:translateY(110%);animation:wup .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*70ms + .15s)}
@keyframes wup{to{transform:none}}
.hero-viewer,.hero-text{will-change:transform}

/* texto con degradado en el titular */
h1 .w:nth-last-child(-n+3)>span{background:linear-gradient(100deg,var(--cyan),var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent}

/* marquesina */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding:16px 0;background:rgba(13,17,24,.6)}
.marquee-track{display:flex;gap:28px;width:max-content;animation:mq 38s linear infinite;font-family:"Space Grotesk",sans-serif;font-size:22px;color:var(--muted);white-space:nowrap}
.marquee-track i{color:var(--cyan);font-style:normal;font-size:16px;align-self:center}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}

/* historia con scroll: el visor 360 gira */
.story{height:320vh;position:relative}
.story-sticky{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:center;max-width:1200px;margin:0 auto;padding:80px 24px 40px}
.steps{position:relative;min-height:230px;margin:14px 0 26px}
.step{position:absolute;inset:0;opacity:0;transform:translateY(24px);transition:opacity .5s,transform .5s;pointer-events:none}
.step.is-active{opacity:1;transform:none}
.step .num{font:600 15px "Space Grotesk",sans-serif;color:var(--amber);letter-spacing:.2em}
.step h3{font-size:clamp(26px,3.4vw,42px);line-height:1.1;margin:8px 0 12px;letter-spacing:-.02em}
.step p{color:var(--muted);font-size:18px;max-width:460px}
.story-bar{height:3px;background:var(--line);border-radius:3px;overflow:hidden;max-width:300px}
.story-bar span{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--cyan),var(--amber))}
.story-pano{height:min(70vh,560px);border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px var(--line)}
.story-view{perspective:1200px}
.story-pano{transform:rotateY(calc(var(--sp,0)*-6deg + 3deg)) scale(calc(.94 + var(--sp,0)*.06));transition:transform .15s linear}

/* tarjetas: inclinación 3D y brillo */
.card{transition:transform .25s,border-color .25s,box-shadow .25s;transform-style:preserve-3d}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(300px circle at var(--cx,50%) var(--cy,50%),rgba(53,184,255,.12),transparent 60%)}
.card:hover::after{opacity:1}
.card:hover{border-color:rgba(53,184,255,.4)}
.btn{will-change:transform}

@media(max-width:860px){
  .story{height:300vh}
  .story-sticky{grid-template-columns:1fr;gap:14px;padding-top:70px}
  .steps{min-height:200px}
  .story-pano{height:36vh}
  .story-view{order:-1}
  .step h3{font-size:26px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js [data-reveal]{opacity:1;transform:none;filter:none}
  .w>span{transform:none}
  .story{height:auto}.story-sticky{position:static;height:auto}.step{position:static;opacity:1;transform:none;margin-bottom:18px}.steps{min-height:0}
}

html,body{overflow-x:clip}

/* ================= MULTIPÁGINA ================= */
.skip{position:absolute;left:-999px;top:8px;background:var(--cyan);color:#04141a;padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

.burger{display:none;flex-direction:column;gap:6px;background:none;border:1px solid var(--line);border-radius:10px;padding:11px 10px;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--text);transition:transform .25s}
.nav.open .burger span:first-child{transform:translateY(4px) rotate(45deg)}
.nav.open .burger span:last-child{transform:translateY(-4px) rotate(-45deg)}
.nav nav a[aria-current=page]{color:var(--cyan)}
.langs{display:flex;gap:2px;border:1px solid var(--line);border-radius:8px;padding:2px}
.nav nav .langs a{display:inline-block;padding:3px 9px;font-size:12px;border-radius:6px;border:0}
.nav nav .langs a[aria-current=true]{background:var(--cyan);color:#04141a}

.page-hero{max-width:1100px;margin:0 auto;padding:72px 24px 8px}
.page-hero h1{font-size:clamp(32px,4.6vw,52px);margin:10px 0 14px}
.page-hero .lead{font-size:18px;margin-bottom:0}
.crumbs{font-size:13px;color:var(--muted);display:flex;gap:8px}
.crumbs a:hover{color:var(--cyan)}

.card h2{font-size:20px;margin-bottom:8px}
.teaser{display:block;transition:transform .25s,border-color .25s}
.teaser .more{display:inline-block;margin-top:14px;color:var(--cyan);font-weight:500}

.band-box{background:linear-gradient(135deg,rgba(53,184,255,.12),rgba(164,92,255,.1));border:1px solid var(--line);border-radius:24px;padding:48px 28px;text-align:center}
.band-box h2{font-size:clamp(24px,3.4vw,36px);margin-bottom:10px}
.band-box p{color:var(--muted);margin-bottom:22px}
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,72px);align-items:center}
.about__img{display:block;width:100%;height:auto;border-radius:var(--r);border:1px solid var(--line)}
.about__txt p{color:var(--muted);margin-bottom:16px}
.about__txt .btn{margin-top:8px}
.about-mini{display:flex;align-items:center;gap:14px;max-width:440px;margin-bottom:24px}
.about-mini img{width:64px;height:64px;flex:none;border-radius:50%;border:1px solid var(--line)}
.about-mini p{margin:0;font-size:14px;color:var(--muted)}
.about-mini b{display:block;color:var(--text)}
@media(max-width:860px){.about{grid-template-columns:1fr}}
.band{padding-top:24px}

.faq{max-width:820px}
.faq-item{border-bottom:1px solid var(--line);padding:4px 0}
.faq-item summary{cursor:pointer;list-style:none;font:500 18px "Space Grotesk",sans-serif;padding:16px 36px 16px 0;position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:26px;color:var(--cyan);transition:transform .25s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{color:var(--muted);padding:0 0 18px;max-width:700px}

.contact{border-top:0;padding-top:32px}
.contact .where{margin-bottom:8px}

.site-foot{display:block;border-top:1px solid var(--line);max-width:none;margin-top:32px;padding:48px 24px 24px;background:rgba(13,17,24,.6)}
.foot-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:32px}
.foot-grid p{margin-top:12px;max-width:320px}
.foot-grid h2{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--text);margin-bottom:12px}
.foot-grid nav{display:grid;gap:8px}
.foot-grid nav a:hover{color:var(--cyan)}
.foot-langs{display:flex!important;gap:14px!important}
.copy{max-width:1100px;margin:32px auto 0;padding-top:18px;border-top:1px solid var(--line);font-size:13px}

.notfound{min-height:100vh;display:grid;place-content:center;justify-items:center;gap:16px;text-align:center;padding:24px}
.notfound p{color:var(--muted)}

.story{height:170vh}

@media(max-width:860px){
  .nav{flex-wrap:wrap}
  .burger{display:flex}
  .nav nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:rgba(7,9,13,.97);border-bottom:1px solid var(--line);padding:8px 24px 18px}
  .nav.open nav{display:flex}
  .nav nav a:not(.btn-sm){display:block;padding:12px 0;border-bottom:1px solid var(--line);color:var(--text)}
  .nav nav .btn-sm{margin-top:14px;text-align:center}
  .langs{margin-top:14px;align-self:flex-start}
  .nav nav .langs a{border-bottom:0;padding:3px 9px}
  .foot-grid{grid-template-columns:1fr}
  .story{height:150vh}
  .page-hero{padding-top:48px}
}

/* ================= LEGAL / CONSENTIMIENTO ================= */
.legal{max-width:760px}
.legal section{margin-bottom:28px}
.legal h2{font-size:22px;margin-bottom:8px}
.legal p{color:var(--muted);margin-bottom:10px}
.legal a,.consent a{color:var(--cyan);text-decoration:underline}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5}
.consent input{margin-top:3px;width:18px;height:18px;accent-color:var(--cyan);flex:none}

/* centrar los hotspots sobre su coordenada */
.hs{margin-top:-17px}
@media(max-width:860px){.hs{width:42px;height:42px;margin-top:-21px;font-size:17px}}


/* ================= PORTADA PREMIUM ================= */
html.lenis{scroll-behavior:auto!important}
/* el margen negativo mete la sección principal mientras la intro se desvanece, para que no quede una pantalla vacía */
.intro{height:150vh;margin-bottom:-50vh;position:relative}
#hero{z-index:1}
.intro-stick{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;overflow:hidden;padding:48px 0}
.aurora{position:absolute;left:50%;top:46%;width:min(130vmin,1000px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg,rgba(46,197,255,.55),rgba(162,76,255,.5),rgba(46,197,255,0) 38%,rgba(74,125,255,.45) 62%,rgba(46,197,255,.55));
  filter:blur(70px);opacity:.5;-webkit-mask:radial-gradient(circle,#000 18%,transparent 68%);mask:radial-gradient(circle,#000 18%,transparent 68%);
  animation:spin 26s linear infinite;will-change:transform}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.intro-logo{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(14px,3.2vh,34px);will-change:transform,opacity}
.intro-tag{margin:0;max-width:min(88vw,620px);text-align:center;font-size:clamp(16px,2.2vh,20px);line-height:1.4;color:var(--text);animation:fadeIn 1s .9s backwards}
.intro-cta{animation:fadeIn 1s 1.1s backwards}
.i-sym{width:min(34vh,340px);height:auto;filter:drop-shadow(0 0 46px rgba(86,140,255,.38));
  animation:introIn 1.7s cubic-bezier(.2,.8,.2,1) both,floaty 7s ease-in-out 1.7s infinite}
.i-word{width:min(84vw,600px);height:auto;animation:wordIn 1.5s .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes introIn{from{opacity:0;transform:scale(.7) rotate(-10deg);filter:blur(20px)}to{opacity:1;transform:none}}
@keyframes wordIn{from{opacity:0;transform:translateY(34px);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@keyframes floaty{50%{transform:translateY(-10px)}}
.scroll-cue{position:absolute;bottom:4vh;left:50%;width:22px;height:38px;border:1.5px solid rgba(255,255,255,.35);border-radius:14px;transform:translateX(-50%);animation:fadeIn 1s 2s backwards}
.scroll-cue span{position:absolute;left:50%;top:7px;width:3px;height:8px;margin-left:-1.5px;border-radius:3px;background:#fff;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.js .hero:not(.go) h1 .w>span{animation-play-state:paused}

/* manifiesto: palabras que se iluminan + espiral que se dibuja */
.mani{height:150vh;position:relative}
.mani-stick{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-content:center;justify-items:center;text-align:center;padding:90px 24px 40px;overflow:hidden}
.mani-spiral{position:absolute;left:50%;top:50%;width:min(140vw,1150px,148vh);transform:translate(-50%,-50%);opacity:.8;pointer-events:none}
.fib-sq{stroke:rgba(150,160,255,.55);stroke-width:.1}
.js .fib-sq,.js .fib-eye{opacity:0;transition:opacity .35s}
.mani-eyebrow{position:relative;color:var(--cyan);font-size:14px;letter-spacing:.42em;margin-right:-.42em;text-transform:uppercase;margin-bottom:26px}
.mani-text{position:relative;max-width:900px;text-wrap:balance;font:600 clamp(26px,4.4vw,56px)/1.18 "Space Grotesk",Inter,sans-serif;letter-spacing:-.02em}
.js .mani-text .mw{opacity:.14;transition:opacity .25s linear}

/* galería horizontal con scroll */
.hx{height:320vh;position:relative}
.hx-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding-top:64px}
.hx-track{display:flex;align-items:stretch;gap:24px;padding:0 8vw;width:max-content;will-change:transform}
.hx-head{display:flex;align-items:center;width:min(78vw,420px);flex:none}
.hx-head h2{font-size:clamp(32px,4.6vw,58px);line-height:1.05;letter-spacing:-.02em;background:linear-gradient(100deg,#fff,var(--cyan) 60%,var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent}
.hx-card{width:min(78vw,400px);flex:none;padding:36px 30px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(160deg,rgba(53,184,255,.08),rgba(164,92,255,.06)),var(--card)}
.hx-card h3{font-size:24px}
.hx-card .ico{font-size:42px;margin-bottom:18px}
.hx-bar{position:absolute;left:8vw;right:8vw;bottom:7vh;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.hx-bar span{display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--cyan),var(--amber))}

@media(max-width:860px){
  .i-sym{width:min(30vh,60vw,300px)}
  .mani{height:130vh}
  .hx{height:auto}
  .hx-stick{position:static;height:auto;padding:40px 0}
  .hxc-media{height:130px}

  .hx-logo{display:none}
  .hx-track{flex-direction:column;width:auto;padding:0 24px}
  .hx-head,.hx-card{width:auto}
  .hx-bar{display:none}
}
@media(prefers-reduced-motion:reduce){
  .intro{height:auto;margin-bottom:0}.intro-stick{position:static;height:auto;min-height:88vh}
  .mani{height:auto}.mani-stick{position:static;height:auto;padding:80px 24px}
  .js .mani-text .mw{opacity:1}
  .hx{height:auto}.hx-stick{position:static;height:auto}.hx-track{flex-direction:column;width:auto}.hx-head,.hx-card{width:auto}
  .aurora,.i-sym,.i-word,.scroll-cue,.scroll-cue span{animation:none!important}
}

/* ================= ZONAS Y PÁGINAS POR CIUDAD ================= */
.areas{text-align:center}
.areas p{color:var(--muted);margin:8px auto 18px;max-width:640px}
.areas__list{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.areas__list a{padding:10px 18px;border:1px solid var(--line);border-radius:999px;color:var(--text);transition:border-color .25s,color .25s}
.areas__list a:hover,.areas__list a:focus-visible{border-color:var(--cyan);color:var(--cyan)}
.city-copy{max-width:820px}
.city-copy p{color:var(--muted);margin-top:14px;font-size:17px;line-height:1.7}
.city-plans{max-width:820px}
.city-plans p{color:var(--muted);margin:12px 0 20px}

/* ================= COOKIES ================= */
.ck-banner{position:fixed;z-index:90;left:50%;bottom:20px;width:min(980px,calc(100% - 28px));transform:translate(-50%,30px);opacity:0;display:flex;align-items:center;gap:20px;padding:20px 22px;border-radius:22px;background:rgba(13,17,24,.86);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 0 1px rgba(53,184,255,.08) inset;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .45s}
.ck-banner[hidden]{display:none}
.ck-banner.in{transform:translate(-50%,0);opacity:1}
.ck-ico{font-size:30px;flex:none;filter:drop-shadow(0 0 14px rgba(164,92,255,.5))}
.ck-body{flex:1;min-width:0}
.ck-body h2{font:600 17px "Space Grotesk",Inter,sans-serif;margin-bottom:4px}
.ck-body p{font-size:13.5px;line-height:1.55;color:var(--muted)}
.ck-body a,.ck-intro a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.ck-actions{display:flex;gap:10px;flex:none}
.ck-btn{font:600 14px Inter,sans-serif;padding:11px 20px;border-radius:999px;cursor:pointer;white-space:nowrap;border:1px solid var(--line);transition:transform .15s,box-shadow .2s,border-color .2s,background .2s}
.ck-ghost{background:transparent;color:var(--text)}
.ck-ghost:hover{border-color:var(--cyan);background:rgba(53,184,255,.08)}
.ck-main{border:0;color:#fff;background:linear-gradient(135deg,#35b8ff,#8a5cff)}
.ck-main:hover{transform:translateY(-1px);box-shadow:0 8px 26px rgba(120,100,255,.4)}

.ck-modal{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:18px;background:rgba(3,5,9,.66);backdrop-filter:blur(8px);opacity:0;transition:opacity .3s}
.ck-modal[hidden]{display:none}
.ck-modal.in{opacity:1}
.ck-card{position:relative;width:min(640px,100%);max-height:calc(100svh - 36px);overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:30px 28px 24px;box-shadow:0 30px 90px rgba(0,0,0,.6);transform:translateY(18px) scale(.98);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.ck-modal.in .ck-card{transform:none}
.ck-card h2{font:600 24px "Space Grotesk",Inter,sans-serif;margin-bottom:8px;padding-right:34px}
.ck-intro{font-size:14px;color:var(--muted);margin-bottom:18px}
.ck-x{position:absolute;top:14px;right:16px;width:36px;height:36px;border-radius:50%;background:none;border:1px solid var(--line);color:var(--text);font-size:22px;line-height:1;cursor:pointer}
.ck-x:hover{border-color:var(--cyan)}
.ck-row{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:16px 0;border-top:1px solid var(--line)}
.ck-row h3{font:600 16px "Space Grotesk",Inter,sans-serif;margin-bottom:4px}
.ck-row p{font-size:13.5px;color:var(--muted);line-height:1.5}
.ck-always{flex:none;font-size:12px;color:var(--cyan);border:1px solid rgba(53,184,255,.4);border-radius:999px;padding:4px 12px;white-space:nowrap}
.ck-switch{position:relative;flex:none;width:48px;height:28px;cursor:pointer}
.ck-switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.ck-switch i{position:absolute;inset:0;border-radius:999px;background:#273041;transition:background .25s;pointer-events:none}
.ck-switch i::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .25s}
.ck-switch input:checked+i{background:linear-gradient(135deg,#35b8ff,#8a5cff)}
.ck-switch input:checked+i::after{transform:translateX(20px)}
.ck-switch input:focus-visible+i{outline:2px solid var(--cyan);outline-offset:3px}
.ck-foot{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:8px;padding-top:18px;border-top:1px solid var(--line)}
html.ck-lock{overflow:hidden}
.ck-link{background:none;border:0;color:var(--muted);font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0;margin-left:14px}
.ck-link:hover{color:var(--cyan)}

@media(max-width:760px){
  .ck-banner{flex-direction:column;align-items:stretch;gap:14px;bottom:10px;padding:18px}
  .ck-ico{display:none}
  .ck-actions{flex-direction:column-reverse}
  .ck-btn{width:100%;text-align:center}
  .ck-foot{flex-direction:column-reverse}
}
@media(prefers-reduced-motion:reduce){.ck-banner,.ck-modal,.ck-card{transition:none}}

/* mascota de cookies */
.ck-banner{padding-left:176px;background:rgba(13,17,24,.94)}
.ck-mascot{position:absolute;left:12px;bottom:0;width:156px;height:auto;pointer-events:none;
  -webkit-mask:linear-gradient(#000 78%,transparent 99%);mask:linear-gradient(#000 78%,transparent 99%);
  transform:translateY(40px) scale(.85);opacity:0;transform-origin:50% 100%;
  transition:transform .7s .25s cubic-bezier(.3,1.5,.5,1),opacity .4s .25s}
.ck-banner.in .ck-mascot{transform:none;opacity:1;animation:munch 3.2s 1.2s ease-in-out infinite}
@keyframes munch{0%,62%,100%{transform:none}68%{transform:rotate(-3deg) translateY(-3px)}74%{transform:rotate(2deg)}80%{transform:rotate(-2deg) translateY(-2px)}86%{transform:none}}
.ck-mhead{display:flex;align-items:center;gap:12px;margin-bottom:8px;padding-right:34px}
.ck-mhead img{width:62px;height:auto;flex:none;-webkit-mask:linear-gradient(#000 80%,transparent);mask:linear-gradient(#000 80%,transparent)}
.ck-mhead h2{margin:0;padding:0}
@media(max-width:760px){
  .ck-banner{padding:72px 18px 18px;margin-top:40px}
  .ck-mascot{left:50%;bottom:auto;top:-62px;width:112px;margin-left:-56px;transform-origin:50% 100%}
}
@media(prefers-reduced-motion:reduce){.ck-mascot{transition:none;opacity:1;transform:none}.ck-banner.in .ck-mascot{animation:none}}
@media(min-width:761px) and (max-width:1100px){
  .ck-banner{flex-wrap:wrap;row-gap:14px}
  .ck-body{flex:1 1 300px}
  .ck-actions{flex:1 1 100%;justify-content:flex-end}
}

/* fondo de la portada: panorama 360° girando sin fin */
.intro-bg{position:absolute;inset:0;overflow:hidden;will-change:transform,opacity}
.intro-pan{position:absolute;top:52%;left:0;height:130vh;height:130svh;width:929vh;width:929svh;transform:translateY(-50%);
  background:url(/assets/hero-360.webp?v=2) repeat-x 0 50%/50% 100%;filter:saturate(1.05) brightness(1.05);
  animation:pan360 110s linear infinite;will-change:transform}
@keyframes pan360{to{transform:translate(-50%,-50%)}}
.intro-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 50% 52% at 50% 48%,rgba(7,9,13,.66),rgba(7,9,13,.28) 60%,rgba(7,9,13,.62) 100%),
             linear-gradient(180deg,rgba(7,9,13,.75) 0%,rgba(7,9,13,.15) 28%,rgba(7,9,13,.25) 70%,#07090d 100%),
             linear-gradient(120deg,rgba(53,184,255,.05),rgba(164,92,255,.06))}

.live-chip{position:absolute;left:24px;bottom:4.2vh;display:flex;align-items:center;gap:9px;padding:7px 14px;border-radius:999px;
  background:rgba(7,9,13,.55);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:12.5px;color:#dfe7f2;letter-spacing:.02em;animation:fadeIn 1s 2.2s backwards}
.live-chip i{width:8px;height:8px;border-radius:50%;background:#ff4d6d;box-shadow:0 0 0 0 rgba(255,77,109,.7);animation:live 1.8s infinite}
@keyframes live{70%{box-shadow:0 0 0 8px rgba(255,77,109,0)}100%{box-shadow:0 0 0 0 rgba(255,77,109,0)}}
@media(max-width:860px){.live-chip{left:50%;transform:translateX(-50%);bottom:11vh;white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.intro-pan,.live-chip i{animation:none}}

/* tour con varias salas: flecha de paso en el suelo + sala actual */
.hs-go{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;margin:-32px 0 0 -32px;width:64px}
.go-ring{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:rgba(7,9,13,.45);border:2px solid rgba(255,255,255,.85);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transform:perspective(220px) rotateX(48deg);box-shadow:0 0 0 0 rgba(53,184,255,.6);animation:goPulse 2s infinite;transition:background .2s,transform .2s}
.go-ring svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;animation:goNudge 1.6s ease-in-out infinite}
.hs-go:hover .go-ring{background:linear-gradient(135deg,rgba(53,184,255,.8),rgba(138,92,255,.8));transform:perspective(220px) rotateX(40deg) scale(1.08)}
.go-lbl{font:600 12px Inter,sans-serif;color:#fff;background:rgba(7,9,13,.7);padding:3px 10px;border-radius:999px;white-space:nowrap;border:1px solid rgba(255,255,255,.18)}
@keyframes goPulse{70%{box-shadow:0 0 0 14px rgba(53,184,255,0)}100%{box-shadow:0 0 0 0 rgba(53,184,255,0)}}
@keyframes goNudge{50%{transform:translateY(-4px)}}
.tour-room{position:absolute;top:12px;right:12px;z-index:3;display:flex;align-items:center;gap:10px;padding:6px 12px;border-radius:999px;
  background:rgba(7,9,13,.65);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:13px;color:#fff;pointer-events:none}
.tour-room span{color:var(--muted);font-size:12px}
@media(prefers-reduced-motion:reduce){.go-ring,.go-ring svg{animation:none}}

/* logo sobre "¿Por qué un tour virtual?" (se mueve con el scroll) */
.hx-head{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(18px,3.2vh,30px)}
.hx-head h2{text-wrap:balance;max-width:11ch;margin:0 auto}
.hx-logo{width:clamp(112px,12vw,168px);height:auto;filter:drop-shadow(0 0 34px rgba(86,140,255,.35));will-change:transform;transform-origin:50% 55%}
@media(max-width:860px){.hx-logo{width:96px}}
@media(prefers-reduced-motion:reduce){.js .fib-sq,.js .fib-eye{opacity:1}}

/* tarjetas "Why a virtual tour?": foto real, ícono, número y borde con degradado */
.hx-card{padding:0;justify-content:flex-start;overflow:hidden;border:1px solid transparent;
  background:linear-gradient(160deg,#141b29,#111722) padding-box,linear-gradient(140deg,rgba(53,184,255,.55),rgba(164,92,255,.12) 45%,rgba(164,92,255,.55)) border-box;
  transition:transform .25s,box-shadow .35s}
.hx-card:hover{box-shadow:0 22px 60px rgba(0,0,0,.45),0 0 0 1px rgba(120,140,255,.35),0 0 40px rgba(110,110,255,.18)}
.hxc-media{position:relative;height:clamp(150px,22vh,200px);overflow:hidden}
.hxc-media img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.hx-card:hover .hxc-media img{transform:scale(1.09)}
.hxc-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,9,13,.05) 30%,rgba(17,23,34,.92) 100%)}
.hx-card:nth-of-type(3) .hxc-media::after{background:linear-gradient(180deg,rgba(10,14,40,.1),rgba(17,23,34,.94) 100%)}
.hxc-num{position:absolute;top:10px;right:16px;z-index:1;font:700 54px/1 "Space Grotesk",sans-serif;color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.7);letter-spacing:-.02em}
.hxc-pin{position:absolute;left:50%;top:44%;z-index:1;width:42px;height:42px;margin:-21px 0 0 -21px;display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(135deg,#35b8ff,#8a5cff);box-shadow:0 0 0 0 rgba(120,140,255,.7);animation:pinPulse 2s infinite}
.hxc-pin svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes pinPulse{70%{box-shadow:0 0 0 18px rgba(120,140,255,0)}100%{box-shadow:0 0 0 0 rgba(120,140,255,0)}}
.hxc-chip{position:absolute;left:16px;top:14px;z-index:1;font:700 13px Inter,sans-serif;letter-spacing:.08em;color:#fff;padding:5px 12px;border-radius:999px;
  background:rgba(7,9,13,.55);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hxc-body{position:relative;padding:0 28px 30px}
.hxc-ico{width:52px;height:52px;margin:-26px 0 16px;display:grid;place-items:center;border-radius:16px;position:relative;z-index:2;
  background:linear-gradient(135deg,rgba(53,184,255,.22),rgba(164,92,255,.22)),#121827;border:1px solid rgba(140,150,255,.45);box-shadow:0 8px 24px rgba(0,0,0,.35),0 0 22px rgba(100,120,255,.25)}
.hxc-ico svg{width:26px;height:26px;fill:none;stroke:#cfe0ff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hx-card h3{font-size:23px;margin-bottom:8px}
.hx-card p{font-size:15px;line-height:1.6}
@media(prefers-reduced-motion:reduce){.hxc-pin{animation:none}}
.hx-card:nth-of-type(3) .hxc-media img{object-position:50% 48%}
.hx-card:nth-of-type(1) .hxc-media img{object-position:50% 50%}
.hx-card:nth-of-type(2) .hxc-media img{object-position:50% 46%}


/* ================= MENÚ FLOTANTE PREMIUM ================= */
.nav{position:sticky;top:14px;z-index:40;width:min(1200px,calc(100% - 32px));margin:14px auto 0;padding:9px 10px 9px 14px;border-radius:999px;
  background:rgba(10,13,20,.55);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.08);box-shadow:0 12px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),background .3s,padding .3s,box-shadow .3s}
.nav.scrolled{background:rgba(10,13,20,.8);padding-top:6px;padding-bottom:6px}
.nav.nav-hide{transform:translateY(calc(-100% - 28px))}
.nav::after{content:"";position:absolute;left:28px;right:28px;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(53,184,255,.55),rgba(164,92,255,.55),transparent)}
.brand-logo{height:44px;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.brand:hover .brand-logo{transform:rotate(-20deg) scale(1.06)}
.nav nav{gap:12px}
.nav-links{display:flex;gap:2px;padding:4px;border-radius:999px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.nav nav .nav-links a{padding:8px 16px;border-radius:999px;font-size:14.5px;color:var(--muted);transition:color .2s,background .2s,box-shadow .2s}
.nav nav .nav-links a:hover{color:var(--text);background:rgba(255,255,255,.06)}
.nav nav .nav-links a[aria-current=page]{color:#fff;background:linear-gradient(135deg,rgba(53,184,255,.2),rgba(164,92,255,.2));box-shadow:inset 0 0 0 1px rgba(140,150,255,.35)}
.nav-actions{display:flex;align-items:center;gap:10px}
.nav nav .nav-cta{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;font-size:14px}
.nav-cta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.nav-cta:hover svg{transform:translateX(3px)}
.nav nav .nav-cta:hover{box-shadow:0 0 0 1px rgba(255,255,255,.18),0 10px 30px rgba(110,110,255,.45)}

.lang-dd{position:relative}
.lang-btn{display:flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:999px;background:transparent;border:1px solid rgba(255,255,255,.12);
  color:var(--text);font:600 13px Inter,sans-serif;letter-spacing:.04em;cursor:pointer;transition:border-color .2s,background .2s}
.lang-btn:hover{border-color:rgba(140,150,255,.5);background:rgba(255,255,255,.04)}
.lang-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lang-btn .chev{width:13px;height:13px;opacity:.7;transition:transform .25s}
.lang-dd.open .chev{transform:rotate(180deg)}
.lang-menu{position:absolute;right:0;top:calc(100% + 12px);min-width:180px;padding:6px;border-radius:16px;display:grid;gap:2px;
  background:rgba(13,17,26,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 18px 50px rgba(0,0,0,.5);opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;pointer-events:none;transition:opacity .2s,transform .2s}
.lang-dd.open .lang-menu{opacity:1;transform:none;pointer-events:auto}
.nav nav .lang-menu a{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;color:var(--muted);font-size:14px;border:0}
.lang-menu a b{font:700 11px Inter,sans-serif;letter-spacing:.1em;color:var(--cyan);width:22px}
.nav nav .lang-menu a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav nav .lang-menu a[aria-current=true]{color:#fff;background:rgba(53,184,255,.12)}

@media(max-width:860px){
  .nav{top:10px;margin-top:10px;width:calc(100% - 20px);border-radius:22px;padding:7px 8px 7px 12px}
  .nav.open{border-radius:22px}
  .brand-logo{height:40px}
  .nav nav{top:calc(100% + 8px);border-radius:20px;border:1px solid rgba(255,255,255,.1);background:rgba(10,13,20,.96);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding:10px;gap:10px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
  .nav-links{flex-direction:column;background:none;border:0;padding:0}
  .nav nav .nav-links a{display:block;padding:13px 14px;border-bottom:0;border-radius:12px;color:var(--text)}
  .nav-actions{flex-direction:column-reverse;align-items:stretch;gap:10px}
  .nav nav .nav-cta{justify-content:center;margin-top:0;padding:13px 18px}
  .lang-btn{display:none}
  .lang-menu{position:static;opacity:1;transform:none;pointer-events:auto;display:flex;min-width:0;padding:0;gap:6px;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav nav .lang-menu a{flex:1;justify-content:center;padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:12px}
  .lang-menu a span{display:none}
}
@media(prefers-reduced-motion:reduce){.nav,.brand-logo{transition:none}}


/* ================= MENÚ "DYNAMIC ISLAND" ================= */
/* arriba: transparente y ancho; al bajar: isla compacta de cristal */
.nav{max-width:1200px;width:calc(100% - 32px);
  transition:max-width .7s cubic-bezier(.2,.8,.2,1),padding .5s,background .5s,border-color .5s,box-shadow .5s,transform .5s cubic-bezier(.2,.8,.2,1)}
.nav:not(.scrolled){background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav:not(.scrolled)::after{opacity:0}
.nav::after{transition:opacity .5s}
.nav.scrolled{max-width:900px;background:rgba(10,13,20,.72);border-color:rgba(255,255,255,.09)}
.nav.nav-hide{transform:none}

/* resaltado que sigue al mouse */
.nav-links{position:relative}
.nav-ind{position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:999px;pointer-events:none;opacity:0;
  background:linear-gradient(135deg,rgba(53,184,255,.2),rgba(164,92,255,.2));box-shadow:inset 0 0 0 1px rgba(140,150,255,.35);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1),opacity .3s}
.nav-ind.on{opacity:1}
.nav nav .nav-links a,.nav nav .nav-links a:hover,.nav nav .nav-links a[aria-current=page]{position:relative;z-index:1;background:none;box-shadow:none}
.nav nav .nav-links a[aria-current=page]{color:#fff}

/* texto que rueda al pasar el mouse */
.roll{display:inline-block;overflow:hidden;vertical-align:top;height:1.4em;line-height:1.4em}
.roll>span{display:block;transition:transform .45s cubic-bezier(.6,0,.2,1)}
.nav-links a:hover .roll>span,.nav-cta:hover .roll>span{transform:translateY(-100%)}

/* ---- celular: menú a pantalla completa ---- */
@media(max-width:860px){
  .nav.scrolled{max-width:none}
  .nav-ind{display:none}
  .nav nav{position:fixed;inset:0;top:0;z-index:-1;border-radius:0;border:0;display:flex!important;flex-direction:column;justify-content:space-between;
    padding:96px 24px 32px;background:rgba(7,9,13,.94);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:none;
    opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
  .nav.open nav{opacity:1;visibility:visible;transition:opacity .35s}
  .nav.open{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav-links{gap:2px}
  .nav nav .nav-links a{font:600 clamp(30px,9vw,40px)/1.15 "Space Grotesk",Inter,sans-serif;letter-spacing:-.02em;padding:10px 4px;color:var(--text);
    opacity:0;transform:translateY(24px);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1),color .2s}
  .nav nav .nav-links a[aria-current=page]{background:linear-gradient(100deg,#fff,var(--cyan) 55%,var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent}
  .nav.open .nav-links a{opacity:1;transform:none}
  .nav.open .nav-links a:nth-child(2){transition-delay:.04s}.nav.open .nav-links a:nth-child(3){transition-delay:.08s}
  .nav.open .nav-links a:nth-child(4){transition-delay:.12s}.nav.open .nav-links a:nth-child(5){transition-delay:.16s}.nav.open .nav-links a:nth-child(6){transition-delay:.2s}
  .nav-actions{opacity:0;transform:translateY(16px);transition:opacity .5s .2s,transform .6s .2s cubic-bezier(.2,.8,.2,1)}
  .nav.open .nav-actions{opacity:1;transform:none}
  html.menu-open{overflow:hidden}
}
@media(prefers-reduced-motion:reduce){.nav-ind,.roll>span{transition:none}}

/* el menú flota sobre la portada (no ocupa espacio propio) */
.nav{position:fixed;left:0;right:0;top:0;margin:14px auto 0}
.page-hero{padding-top:132px}
.notfound{padding-top:24px}
@media(max-width:860px){
  .nav{margin-top:10px}
  .page-hero{padding-top:104px}
  .hero{padding-top:96px}
}


/* ================= MENÚ: ANIMACIONES PREMIUM ================= */
/* 1) entrada escalonada al cargar */
@keyframes navDrop{from{opacity:0;transform:translateY(-24px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes navItem{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.nav{animation:navDrop .9s cubic-bezier(.2,.8,.2,1) backwards}
@media(min-width:861px){
  .nav .brand,.nav-links>a,.lang-dd,.nav-cta{animation:navItem .7s cubic-bezier(.2,.8,.2,1) backwards}
  .nav .brand{animation-delay:.15s}
  .nav-links>a:nth-of-type(1){animation-delay:.22s}.nav-links>a:nth-of-type(2){animation-delay:.28s}.nav-links>a:nth-of-type(3){animation-delay:.34s}
  .nav-links>a:nth-of-type(4){animation-delay:.40s}.nav-links>a:nth-of-type(5){animation-delay:.46s}
  .lang-dd{animation-delay:.52s}.nav-cta{animation-delay:.58s}
}

/* 2) borde de luz que recorre la isla (solo cuando ya es isla) */
@property --navAng{syntax:"<angle>";inherits:false;initial-value:0deg}
.nav::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .6s;
  background:conic-gradient(from var(--navAng),transparent 0deg,transparent 250deg,rgba(53,184,255,.95) 300deg,rgba(164,92,255,.95) 335deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:navSpin 7s linear infinite}
.nav.scrolled::before{opacity:.85}
@keyframes navSpin{to{--navAng:360deg}}

/* 3) progreso de lectura en la línea de luz inferior del menú */
.progress{display:none}
.nav::after{height:2px;bottom:-1px;left:30px;right:30px;border-radius:2px;
  background:linear-gradient(90deg,#35b8ff,#8a5cff) 0 0/calc(var(--p,0)*100%) 100% no-repeat,rgba(255,255,255,.07)}
.nav.scrolled::after{opacity:1}

/* 4) efecto "Dock": el enlace bajo el mouse crece, los vecinos un poco, el resto se atenúa */
@media(hover:hover) and (min-width:861px){
  .nav-links .roll{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
  .nav nav .nav-links a{transition:color .25s,opacity .25s}
  .nav nav .nav-links:hover a{opacity:.5}
  .nav nav .nav-links a:hover{opacity:1;color:#fff}
  .nav-links a:hover .roll{transform:scale(1.14)}
  .nav nav .nav-links a:hover+a,.nav nav .nav-links a:has(+a:hover){opacity:.8}
  .nav-links a:hover+a .roll,.nav-links a:has(+a:hover) .roll{transform:scale(1.06)}
}
@media(prefers-reduced-motion:reduce){.nav,.nav .brand,.nav-links>a,.lang-dd,.nav-cta,.nav::before{animation:none}}
.nav.open::before,.nav.open::after{opacity:0}

/* ================= AJUSTES PARA CELULAR ================= */
/* iPhone hace zoom al escribir si el campo tiene menos de 16 px */
input,select,textarea{font-size:16px}
@media(max-width:860px){
  /* zonas táctiles cómodas (mínimo ~40 px) */
  .foot-grid nav{gap:0}
  .foot-grid nav a{display:block;padding:10px 0}
  .foot-langs a{padding:10px 6px}
  .crumbs a{display:inline-block;padding:10px 0;margin:-10px 0}
  .ck-link{padding:10px 0}
}
#leadForm input:not([type=checkbox]),#leadForm select,#leadForm textarea{font-size:16px}
@media(max-width:860px){
  /* el menú a pantalla completa se puede desplazar si no cabe (celular en horizontal) */
  .nav nav{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
}
/* celular en horizontal: pantallas muy bajas */
@media(max-width:860px) and (max-height:520px){
  .nav nav{padding:68px 24px 20px;justify-content:flex-start;gap:16px}
  .nav nav .nav-links a{font-size:24px;padding:6px 4px}
  .i-sym{width:min(30vh,40vw)}
  .i-word{width:min(54vw,380px)}
  .intro-logo{gap:8px;margin-top:20px}
  .scroll-cue{display:none}
  .live-chip{bottom:12px}
  .story-sticky{padding-top:60px;grid-template-columns:1.1fr 1fr;align-items:center;gap:18px}
  .story-view{order:0}
  .story-pano{height:64vh}
  .steps{min-height:140px;margin:8px 0 14px}
  .step h3{font-size:20px;margin:4px 0 6px}
  .step p{font-size:14px}
  .mani-text{font-size:24px}
  .mani-stick{padding-top:64px}
}
@media(max-width:860px){.burger{min-width:44px;min-height:44px;justify-content:center;align-items:center;padding:0 11px}}
.ck-modal{-webkit-backdrop-filter:blur(8px)}
.ck-card{max-height:calc(100vh - 36px);max-height:calc(100svh - 36px)}


/* ================= IRIS: ASISTENTE DE CHAT ================= */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.iris{position:fixed;right:20px;bottom:20px;z-index:80;display:flex;flex-direction:column;align-items:flex-end;gap:12px;font-family:Inter,sans-serif}
.iris img{display:block;width:100%;height:100%;object-fit:contain}

.iris__fab{display:flex;align-items:center;gap:10px;height:54px;padding:0 20px 0 7px;border-radius:999px;cursor:pointer;color:#fff;
  font:600 14.5px Inter,sans-serif;border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(135deg,rgba(53,184,255,.92),rgba(138,92,255,.92));
  box-shadow:0 14px 40px rgba(60,70,200,.45),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .25s,box-shadow .25s}
.iris__fab:hover{transform:translateY(-2px);box-shadow:0 18px 50px rgba(60,70,200,.6),inset 0 1px 0 rgba(255,255,255,.25)}
.iris__fab-ico{width:40px;height:40px;border-radius:50%;background:#07090d;padding:3px;position:relative;flex:none}
.iris__fab-ico::after{content:"";position:absolute;right:0;bottom:1px;width:11px;height:11px;border-radius:50%;background:#3ddc84;border:2px solid #07090d}
.iris.is-open .iris__fab{display:none}

.iris__teaser{display:flex;align-items:flex-start;gap:10px;max-width:290px;padding:12px 12px 12px 12px;border-radius:18px 18px 6px 18px;cursor:pointer;
  background:rgba(13,17,26,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(140,150,255,.3);
  box-shadow:0 16px 44px rgba(0,0,0,.45);opacity:0;transform:translateY(10px) scale(.96);transform-origin:bottom right;transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.iris__teaser.is-in{opacity:1;transform:none}
.iris__teaser-avatar{width:34px;height:34px;flex:none}
.iris__teaser-text{font-size:14px;line-height:1.45;color:var(--text);margin:0}
.iris__teaser-close{flex:none;width:26px;height:26px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:var(--muted);cursor:pointer;font-size:16px;line-height:1}

.iris__panel{width:min(380px,calc(100vw - 32px));height:min(600px,calc(100vh - 120px));height:min(600px,calc(100svh - 120px));display:flex;flex-direction:column;
  border-radius:22px;overflow:hidden;background:rgba(10,13,20,.94);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
  border:1px solid rgba(140,150,255,.28);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03) inset;animation:irisIn .4s cubic-bezier(.2,.8,.2,1)}
.iris__panel[hidden]{display:none}
@keyframes irisIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.iris__head{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 16px;border-bottom:1px solid rgba(255,255,255,.07);
  background:linear-gradient(135deg,rgba(53,184,255,.12),rgba(164,92,255,.12))}
.iris__avatar{width:40px;height:40px;flex:none;border-radius:50%;background:#07090d;padding:3px;box-shadow:0 0 18px rgba(100,120,255,.35)}
.iris__who{flex:1;display:flex;flex-direction:column;line-height:1.25}
.iris__title{font:600 16px "Space Grotesk",Inter,sans-serif;color:#fff}
.iris__subtitle{font-size:12.5px;color:var(--muted)}
.iris__close{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:none;color:var(--text);font-size:20px;cursor:pointer}
.iris__close:hover{border-color:var(--cyan)}

.iris__log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.iris__msg{max-width:86%;padding:10px 14px;border-radius:16px;font-size:14.5px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word}
.iris__msg--model{align-self:flex-start;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.07);color:var(--text);border-bottom-left-radius:6px}
.iris__msg--user{align-self:flex-end;background:linear-gradient(135deg,#35b8ff,#8a5cff);color:#fff;border-bottom-right-radius:6px}
.iris__msg--typing{color:var(--muted);font-style:italic}
.iris__msg--error{border-color:rgba(255,120,120,.35);color:#ffd2d2}

.iris__chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 10px}
.iris__chips:empty{display:none}
.iris__chip{padding:8px 12px;border-radius:999px;border:1px solid rgba(140,150,255,.35);background:rgba(53,184,255,.06);color:var(--text);
  font:500 13px Inter,sans-serif;cursor:pointer;text-align:left;transition:background .2s,border-color .2s}
.iris__chip:hover{background:rgba(53,184,255,.14);border-color:var(--cyan)}
.iris__demo{margin:0 16px 10px;padding:9px 14px;border-radius:12px;text-align:center;font:600 13.5px Inter,sans-serif;color:#fff;
  background:linear-gradient(135deg,rgba(53,184,255,.18),rgba(164,92,255,.18));border:1px solid rgba(140,150,255,.35)}
.iris__demo:hover{border-color:var(--cyan)}

.iris__form{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-top:1px solid rgba(255,255,255,.07)}
.iris__input{flex:1;resize:none;max-height:120px;padding:11px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  color:var(--text);font:16px/1.4 Inter,sans-serif;outline:none}
.iris__input:focus{border-color:rgba(140,150,255,.6)}
.iris__send{width:44px;height:44px;flex:none;border-radius:50%;border:0;cursor:pointer;color:#fff;font-size:18px;font-weight:700;
  background:linear-gradient(135deg,#35b8ff,#8a5cff)}
.iris__send:disabled{opacity:.5;cursor:default}
.iris__notice{margin:0;padding:0 14px 12px;font-size:11px;line-height:1.4;color:var(--muted)}
.iris__privacy{color:var(--cyan);text-decoration:underline}

@media(max-width:600px){
  .iris{right:12px;bottom:12px}
  .iris__fab{padding:0 7px;width:54px;justify-content:center}
  .iris__fab-label{display:none}
  .iris.is-open{left:8px;right:8px;bottom:8px}
  .iris__panel{width:100%;height:calc(100vh - 16px);height:calc(100svh - 16px);border-radius:20px}
  .iris__teaser{max-width:calc(100vw - 90px)}
  html.iris-open{overflow:hidden}
}
@media(prefers-reduced-motion:reduce){.iris__panel{animation:none}.iris__teaser{transition:none}}
.iris__input{overflow-y:hidden}

/* botón "Llama a Iris" (página de contacto) */
.call-iris{display:flex;align-items:center;gap:16px;margin-top:22px;padding:18px 20px;border-radius:20px;max-width:420px;
  background:linear-gradient(135deg,rgba(53,184,255,.12),rgba(164,92,255,.12)),var(--card);border:1px solid rgba(140,150,255,.35);
  transition:transform .25s,box-shadow .25s,border-color .25s}
.call-iris:hover{transform:translateY(-2px);border-color:var(--cyan);box-shadow:0 14px 40px rgba(80,90,220,.3)}
.call-iris__ico{width:54px;height:54px;flex:none;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#35b8ff,#8a5cff);
  box-shadow:0 0 0 0 rgba(120,140,255,.6);animation:pinPulse 2.2s infinite}
.call-iris__ico svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.call-iris__txt{display:flex;flex-direction:column;line-height:1.35}
.call-iris__txt b{font:600 17px "Space Grotesk",Inter,sans-serif;color:#fff}
.call-iris__txt small{font-size:12.5px;color:var(--muted)}
.call-iris__txt strong{margin-top:4px;font:600 16px Inter,sans-serif;color:var(--cyan);letter-spacing:.02em}
.foot-ai{margin-left:14px}
@media(prefers-reduced-motion:reduce){.call-iris__ico{animation:none}}


/* ================= PIE DE PÁGINA PREMIUM ================= */
.site-foot{position:relative;overflow:hidden;margin-top:48px;padding:72px 24px 0;border-top:0;
  background:radial-gradient(ellipse 70% 60% at 50% 100%,rgba(110,90,255,.14),transparent 70%),linear-gradient(180deg,#0a0d14,#07090d)}
.site-foot::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(53,184,255,.6),rgba(164,92,255,.6),transparent)}
.foot-grid{position:relative;z-index:1;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px}
.foot-brand .foot-logo{width:240px;height:auto;display:block;margin-bottom:18px}
.foot-brand p{margin:0 0 12px;max-width:320px;color:var(--muted);font-size:15px;line-height:1.6}
.foot-loc{display:flex;align-items:center;gap:8px;font-size:14px!important}
.foot-loc svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--cyan);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.foot-grid h2{font:600 12px Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin:6px 0 18px}
.foot-links{display:grid;gap:12px}
.foot-links a{position:relative;width:fit-content;color:var(--muted);font-size:15px;transition:color .25s}
.foot-links a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:linear-gradient(90deg,var(--cyan),var(--amber));
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.foot-links a:hover{color:#fff}
.foot-links a:hover::after{transform:scaleX(1)}
.foot-langs{display:flex!important;gap:8px!important;flex-wrap:wrap}
.foot-langs a{padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.12);font:600 13px Inter,sans-serif;letter-spacing:.06em;color:var(--muted);transition:all .25s}
.foot-langs a:hover{color:#fff;border-color:rgba(140,150,255,.6)}
.foot-langs a[aria-current=true]{color:#fff;border-color:transparent;background:linear-gradient(135deg,rgba(53,184,255,.35),rgba(164,92,255,.35))}

/* palabra gigante y tenue al fondo */
.foot-giant{position:relative;z-index:0;max-width:1200px;margin:56px auto -0.18em;text-align:center;pointer-events:none;user-select:none;
  font:700 clamp(56px,15.5vw,210px)/1 "Space Grotesk",Inter,sans-serif;letter-spacing:.06em;margin-right:auto;
  background:linear-gradient(180deg,rgba(150,160,255,.22),rgba(150,160,255,0) 85%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* barra final */
.foot-bottom{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:22px 0 26px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap}
.foot-bottom .copy{margin:0;padding:0;border:0;max-width:none;font-size:13px;color:var(--muted)}
.foot-legal{display:flex;align-items:center;gap:22px;font-size:13px}
.foot-legal a,.foot-legal .ck-link{color:var(--muted);margin:0;text-decoration:none;font-size:13px}
.foot-legal a:hover,.foot-legal .ck-link:hover{color:#fff}

/* sello "Powered by <DGREAT.AI/>" */
.powered{display:inline-flex;align-items:center;gap:14px;padding:8px 14px;border-radius:999px;border:1px solid transparent;transition:border-color .3s,background .3s}
.powered__by{font:500 11px Inter,sans-serif;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
.powered__logo{font:700 19px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#fff;letter-spacing:.02em}
.powered__logo i{font-style:normal;color:#a78bfa}
.powered__logo b{color:#00ff9d}
.powered:hover{border-color:rgba(167,139,250,.45);background:rgba(167,139,250,.06)}
.powered:hover .powered__logo i{color:#c4b5fd}

@media(max-width:860px){
  .site-foot{padding-top:56px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px 24px}
  .foot-brand{grid-column:1 / -1}
  .foot-links{gap:0}
  .foot-links a{padding:9px 0}
  .foot-giant{margin-top:40px}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:14px}
  .foot-legal .ck-link{padding:10px 0}
  .powered{margin-left:-14px}
}
.site-foot .foot-links a:hover{color:#fff}
.site-foot .foot-grid .foot-langs a{display:inline-block;padding:8px 14px}
.foot-giant{width:100%;white-space:nowrap;overflow:hidden;font-size:clamp(44px,12.4vw,172px);letter-spacing:.03em;margin-left:auto;margin-right:auto;text-indent:.03em}
/* deja sitio al botón flotante de Iris para que no tape el sello */
@media(min-width:861px){.foot-bottom{padding-right:210px}}
@media(max-width:860px){.foot-bottom{padding-bottom:84px}}
@media(max-width:860px){.foot-grid>div:last-child{grid-column:1 / -1}}


/* ================= PIE DE PÁGINA: AJUSTES Y ANIMACIÓN PREMIUM ================= */
/* sin franja muerta entre la banda final y el pie */
.band{padding-bottom:56px}
.site-foot{margin-top:0;padding-top:64px}

/* línea superior con un brillo que la recorre */
.site-foot::before{height:1px;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.06) 30%,rgba(53,184,255,.9) 45%,rgba(164,92,255,.9) 55%,rgba(255,255,255,.06) 70%,transparent 100%) 0 0/220% 100%;
  animation:footLine 7s linear infinite}
@keyframes footLine{from{background-position:120% 0}to{background-position:-120% 0}}

/* palabra gigante: colores de marca + foco de luz que sigue al mouse */
.foot-giant{margin:40px auto 6px;line-height:.92;padding-bottom:.06em;letter-spacing:.02em;
  background:radial-gradient(300px circle at var(--gx,50%) var(--gy,45%),rgba(170,200,255,.9),rgba(170,200,255,0) 70%),
             linear-gradient(180deg,rgba(90,170,255,.42) 0%,rgba(150,100,255,.18) 55%,rgba(150,100,255,.02) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* entrada al llegar al final: columnas en cascada y palabra que sube y se revela */
.js .site-foot .foot-grid>div,.js .site-foot .foot-bottom{opacity:0;transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.js .site-foot .foot-grid>div:nth-child(2){transition-delay:.08s}
.js .site-foot .foot-grid>div:nth-child(3){transition-delay:.16s}
.js .site-foot .foot-grid>div:nth-child(4){transition-delay:.24s}
.js .site-foot .foot-bottom{transition-delay:.55s}
.js .site-foot .foot-giant{clip-path:inset(100% 0 0 0);transform:translateY(40px);
  transition:clip-path 1.3s cubic-bezier(.2,.8,.2,1) .3s,transform 1.3s cubic-bezier(.2,.8,.2,1) .3s}
.js .site-foot.in .foot-grid>div,.js .site-foot.in .foot-bottom{opacity:1;transform:none}
.js .site-foot.in .foot-giant{clip-path:inset(-10% 0 0 0);transform:none}

@media(prefers-reduced-motion:reduce){
  .site-foot::before{animation:none}
  .js .site-foot .foot-grid>div,.js .site-foot .foot-bottom,.js .site-foot .foot-giant{opacity:1;transform:none;clip-path:none;transition:none}
}
.foot-giant{background:radial-gradient(280px circle at var(--gx,-600px) var(--gy,-600px),rgba(170,200,255,.85),rgba(170,200,255,0) 70%),
  linear-gradient(180deg,rgba(90,170,255,.30) 0%,rgba(150,100,255,.13) 55%,rgba(150,100,255,.02) 100%);
  -webkit-background-clip:text;background-clip:text}

/* pie en táctil: sin foco del mouse, la palabra gigante necesita más presencia */
@media (hover:none),(max-width:860px){
  .foot-giant{background:linear-gradient(180deg,rgba(120,185,255,.55) 0%,rgba(150,100,255,.28) 60%,rgba(150,100,255,.06) 100%);
    -webkit-background-clip:text;background-clip:text;margin-top:18px}
}

/* barra final: sello "Powered by" centrado; derechos y legales a la izquierda */
.foot-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px}
@media(min-width:861px){
  .foot-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-right:0}
  .foot-bottom .powered{justify-self:center}
}
@media(max-width:860px){
  .foot-meta{flex-direction:column;align-items:center;gap:10px;text-align:center;width:100%}
  .foot-bottom{align-items:center}
  .foot-bottom .powered{margin-left:0;align-self:center}
}

/* contacto directo con Alex (WhatsApp, llamada, correo) */
.direct{max-width:440px}
.direct h2{margin:0 0 6px;font:600 clamp(20px,2.2vw,24px)/1.25 "Space Grotesk",Inter,sans-serif;color:#fff}
.direct>p{margin:0 0 18px;color:var(--muted);font-size:15px}
.direct__row{position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:10px;border-radius:18px;overflow:hidden;
  background:var(--card);border:1px solid rgba(255,255,255,.08);color:#fff;text-decoration:none;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.direct__row::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.07) 50%,transparent 70%);
  transform:translateX(-100%);transition:transform .7s ease;pointer-events:none}
.direct__row:hover{transform:translateY(-2px);border-color:rgba(140,150,255,.45);box-shadow:0 14px 36px rgba(60,70,200,.25)}
.direct__row:hover::after{transform:translateX(100%)}
.direct__ico{width:44px;height:44px;flex:none;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#35b8ff,#8a5cff)}
.direct__row--wa .direct__ico{background:linear-gradient(135deg,#25d366,#128c7e)}
.direct__ico svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.direct__txt{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.direct__txt small{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.direct__txt b{font:600 16px Inter,sans-serif;overflow-wrap:anywhere}
.direct__go{margin-left:auto;color:var(--muted);transition:transform .3s,color .3s}
.direct__row:hover .direct__go{transform:translateX(4px);color:#fff}
.direct+.call-iris{margin-top:12px}
@media(prefers-reduced-motion:reduce){.direct__row,.direct__row::after{transition:none}}
.site-foot .foot-links a[href^="mailto:"]{overflow-wrap:anywhere}
.iris__msg a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.direct__row.is-copied{border-color:rgba(37,211,102,.55)}
.direct__row.is-copied small,.site-foot .foot-links a.is-copied{color:#4ade80}

/* ================= FORMULARIO DE COTIZACIÓN EN 3 PASOS ================= */
.qf{position:relative;gap:0;padding:28px;overflow:hidden;
  background:linear-gradient(160deg,rgba(53,184,255,.07),rgba(164,92,255,.07)),var(--card);border:1px solid rgba(140,150,255,.22);
  box-shadow:0 30px 80px rgba(0,0,0,.35)}
.qf__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px;font-size:13px}
.qf__count{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-size:12px}
.qf__name{font-weight:600;color:#fff}
.qf__bar{height:4px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:26px}
.qf__bar span{display:block;height:100%;width:33.33%;border-radius:4px;background:linear-gradient(90deg,#35b8ff,#a45cff);
  box-shadow:0 0 14px rgba(120,140,255,.7);transition:width .7s cubic-bezier(.2,.8,.2,1)}
.qf__stage{position:relative}
.qf__step{border:0;margin:0;padding:0;min-width:0;display:block}
.qf__step[hidden]{display:none}
.qf__step legend{padding:0;font:600 clamp(21px,2.4vw,26px)/1.25 "Space Grotesk",Inter,sans-serif;color:#fff;margin-bottom:6px}
.qf__sub{margin:0 0 20px;color:var(--muted);font-size:15px}
.qf__h{margin:22px 0 10px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.qf__step.enter-next{animation:qfInNext .55s cubic-bezier(.2,.8,.2,1) both}
.qf__step.enter-prev{animation:qfInPrev .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes qfInNext{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}
@keyframes qfInPrev{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:none}}
.qf__step.enter-next .qf__opt,.qf__step.enter-prev .qf__opt,.qf__step.enter-next .qf__chip,.qf__step.enter-prev .qf__chip,.qf__step.enter-next .qf__field{
  animation:qfPop .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*45ms + 80ms)}
@keyframes qfPop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

/* tarjetas de opción */
.qf__grid{display:grid;gap:10px}
.qf__grid--types{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.qf__grid--sizes{grid-template-columns:repeat(2,1fr)}
.qf__opt{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:16px;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.1);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,background .3s,box-shadow .3s}
.qf__opt input,.qf__chip input{position:absolute;opacity:0;pointer-events:none}
.qf__opt:hover{transform:translateY(-3px);border-color:rgba(140,150,255,.5);background:rgba(255,255,255,.06)}
.qf__opt b{font:600 15px Inter,sans-serif}
.qf__opt small{color:var(--muted);font-size:12.5px}
.qf__ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.06);transition:background .3s,transform .3s}
.qf__ico svg{width:22px;height:22px;fill:none;stroke:#cdd5ff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.qf__tick{position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#35b8ff,#8a5cff);transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.qf__tick svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.qf__opt:has(input:checked){border-color:transparent;background:linear-gradient(#10131c,#10131c) padding-box,linear-gradient(135deg,#35b8ff,#a45cff) border-box;
  box-shadow:0 12px 34px rgba(90,100,240,.28)}
.qf__opt:has(input:checked) .qf__tick{transform:scale(1)}
.qf__opt:has(input:checked) .qf__ico{background:linear-gradient(135deg,#35b8ff,#8a5cff);transform:scale(1.06)}
.qf__opt:has(input:checked) .qf__ico svg{stroke:#fff}
.qf__opt:has(input:focus-visible),.qf__chip:has(input:focus-visible){outline:2px solid var(--cyan);outline-offset:2px}

/* chips */
.qf__chips{display:flex;flex-wrap:wrap;gap:8px}
.qf__chip{display:inline-flex;cursor:pointer}
.qf__chip span{padding:10px 16px;border-radius:999px;font-size:14px;color:var(--text);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
  transition:background .25s,border-color .25s,transform .25s,color .25s}
.qf__chip:hover span{border-color:rgba(140,150,255,.55);transform:translateY(-1px)}
.qf__chip:has(input:checked) span{color:#fff;border-color:transparent;background:linear-gradient(135deg,rgba(53,184,255,.55),rgba(164,92,255,.55))}

/* campos con etiqueta flotante */
.qf__fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qf__field{position:relative}
.qf__field input{width:100%;box-sizing:border-box;padding:22px 40px 8px 14px;border-radius:14px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.12);
  color:var(--text);font:16px Inter,sans-serif;transition:border-color .25s,box-shadow .25s}
.qf__field input:focus{outline:0;border-color:#6b8cff;box-shadow:0 0 0 4px rgba(107,140,255,.18)}
.qf__field label{position:absolute;left:14px;top:16px;font-size:15px;color:var(--muted);pointer-events:none;transform-origin:left top;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),color .25s}
.qf__field input:focus+label,.qf__field input:not(:placeholder-shown)+label{transform:translateY(-9px) scale(.76);color:#9fb4ff}
.qf__ok{position:absolute;right:12px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;display:grid;place-items:center;
  background:#1fd17a;transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.qf__ok svg{width:13px;height:13px;fill:none;stroke:#04170d;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.qf__field.is-valid .qf__ok{transform:scale(1)}
.qf__field.is-bad input{border-color:#ff6b6b;box-shadow:0 0 0 4px rgba(255,107,107,.15)}
.qf__field.is-bad label{color:#ff9a9a}
.qf__ts{margin-top:14px;min-height:0}.qf__ts:empty{display:none}
.qf .consent{margin-top:18px;display:flex;gap:10px;align-items:flex-start}
.qf .consent.is-bad{color:#ff9a9a}
.qf .consent input{margin-top:3px;accent-color:#7a7bff}
.shake{animation:qfShake .45s}
@keyframes qfShake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}

/* navegación */
.qf__nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
.qf__nav .btn{margin-left:auto}
.qf__back{background:none;border:0;color:var(--muted);font:500 15px Inter,sans-serif;cursor:pointer;padding:12px 6px}
.qf__back:hover{color:#fff}
.qf__send.is-busy{pointer-events:none;opacity:.85}
.qf__send.is-busy::after{content:"";display:inline-block;width:15px;height:15px;margin-left:10px;vertical-align:-2px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:qfSpin .7s linear infinite}
@keyframes qfSpin{to{transform:rotate(360deg)}}

/* éxito */
.qf__done{text-align:center;padding:18px 6px 6px;animation:qfPop .6s cubic-bezier(.2,.8,.2,1) both}
.qf__done[hidden]{display:none}
.qf__check{width:84px;height:84px;margin-bottom:12px}
.qf__check circle{fill:rgba(31,209,122,.12);stroke:#1fd17a;stroke-width:2.5;stroke-dasharray:152;stroke-dashoffset:152;animation:qfDraw .8s .1s ease forwards}
.qf__check path{fill:none;stroke:#1fd17a;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:44;stroke-dashoffset:44;animation:qfDraw .5s .75s ease forwards}
@keyframes qfDraw{to{stroke-dashoffset:0}}
.qf__done h3{margin:0 0 8px;font:600 26px "Space Grotesk",Inter,sans-serif;color:#fff}
.qf__done p{margin:0 auto 20px;max-width:380px;color:var(--muted)}
.qf__done .btn{display:inline-flex;margin-left:0}
.qf__again{display:block;margin:14px auto 0;background:none;border:0;color:var(--muted);font:14px Inter,sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.qf__again:hover{color:#fff}
.qf.is-done .qf__top,.qf.is-done .qf__bar,.qf.is-done .qf__stage,.qf.is-done .qf__nav,.qf.is-done .form-msg{display:none}

@media(max-width:560px){
  .qf{padding:22px 18px}
  .qf__fields{grid-template-columns:1fr}
  .qf__grid--types{grid-template-columns:1fr 1fr}
  .qf__opt{padding:14px}
}
@media(prefers-reduced-motion:reduce){
  .qf *,.qf__done{animation:none!important;transition:none!important}
  .qf__check circle,.qf__check path{stroke-dashoffset:0}
}

.qf [hidden]{display:none!important}

/* ================= "EXPLORA PERCEPTION": TARJETAS PREMIUM ================= */
@property --tzAng{syntax:"<angle>";inherits:false;initial-value:0deg}
.tz{overflow:hidden;isolation:isolate;padding:24px 26px 26px;
  background:linear-gradient(160deg,rgba(53,184,255,.05),rgba(164,92,255,.05)),var(--card);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .4s,border-color .4s}
.tz>*{position:relative;z-index:1}
/* luz interior que sigue al mouse */
.tz::after{z-index:0;background:radial-gradient(380px circle at var(--cx,50%) var(--cy,50%),rgba(90,150,255,.16),rgba(164,92,255,.06) 45%,transparent 70%)}
/* borde que se enciende donde está el cursor */
.tz::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(260px circle at var(--cx,50%) var(--cy,50%),#8fc0ff,rgba(164,92,255,.65) 45%,transparent 75%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.tz:hover::before{opacity:1}
.tz:hover{border-color:transparent;box-shadow:0 26px 64px rgba(70,90,230,.28)}
.tz h3{font-size:21px;margin:0 0 8px}
.tz p{margin:0}

/* mini dibujo de cada tarjeta */
.tz__viz{position:relative;height:104px;margin-bottom:20px;border-radius:16px;overflow:hidden;display:grid;place-items:center;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
.viz-pano,.viz-pano__scene{position:absolute;inset:0}
.viz-pano__scene{background:url(/assets/hero-360.webp?v=2) repeat-x 0 50%/auto 270px;filter:saturate(1.1) brightness(.85);animation:vizPan 36s linear infinite}
@keyframes vizPan{to{background-position:-540px 50%}}
.viz-pano::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,16,28,.65),transparent 22%,transparent 78%,rgba(12,16,28,.65)),linear-gradient(180deg,transparent 55%,rgba(12,16,28,.55))}
.viz-pano b{position:absolute;z-index:2;top:9px;left:10px;padding:3px 8px;border-radius:999px;font:600 11px Inter,sans-serif;letter-spacing:.06em;color:#fff;background:rgba(10,14,28,.6);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px)}
.viz-pano__dot{position:absolute;z-index:2;left:34%;top:46%;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#35b8ff,#8a5cff);
  box-shadow:0 0 0 0 rgba(120,140,255,.7);animation:pinPulse 2.2s infinite}
.viz-pano__dot--b{left:70%;top:58%;animation-delay:1.1s}
.viz-bars{display:flex;align-items:flex-end;gap:12px;width:100%;height:100%;box-sizing:border-box;padding:16px 30px 0}
.viz-bars span{flex:1;height:var(--h);border-radius:9px 9px 0 0;background:linear-gradient(180deg,#35b8ff,#7a5cff);opacity:.55;transform-origin:bottom;animation:vizBar 3.6s ease-in-out infinite}
.viz-bars span:nth-child(2){animation-delay:.3s;opacity:.75}
.viz-bars span:nth-child(3){animation-delay:.6s;opacity:1;box-shadow:0 0 26px rgba(120,100,255,.55)}
@keyframes vizBar{0%,100%{transform:scaleY(.62)}50%{transform:scaleY(1)}}
.viz-ico{display:flex;gap:14px}
.viz-ico span{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  animation:vizFloat 4.2s ease-in-out infinite;animation-delay:calc(var(--i)*-1s);transition:background .35s,border-color .35s}
.viz-ico svg{width:22px;height:22px;fill:none;stroke:#cdd5ff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s}
@keyframes vizFloat{0%,100%{transform:translateY(5px)}50%{transform:translateY(-7px)}}
.tz:hover .viz-ico span{background:linear-gradient(135deg,#35b8ff,#8a5cff);border-color:transparent}
.tz:hover .viz-ico svg{stroke:#fff}
.tz:hover .viz-pano__scene{animation-duration:14s}
.tz:hover .viz-bars span{animation-duration:1.8s}

/* "Descubrir" convertido en botón */
.tz .more{display:inline-flex;align-items:center;gap:12px;margin-top:20px;font-weight:600}
.tz .more__t{color:var(--cyan);transition:color .3s}
.tz__arrow{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(140,160,255,.4);background:rgba(255,255,255,.03);
  transition:background .3s,border-color .3s,transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.tz__arrow svg{width:16px;height:16px;fill:none;stroke:var(--cyan);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.tz:hover .more__t{color:#fff}
.tz:hover .tz__arrow{background:linear-gradient(135deg,#35b8ff,#8a5cff);border-color:transparent;transform:translateX(8px);box-shadow:0 8px 22px rgba(100,110,255,.45)}
.tz:hover .tz__arrow svg{stroke:#fff}

/* celular: sin mouse, el borde gira solo y suave */
@media (hover:none){
  .tz::before{opacity:.8;background:conic-gradient(from var(--tzAng),transparent 0 62%,#7fb4ff,#a45cff,transparent);animation:tzSpin 7s linear infinite}
  @keyframes tzSpin{to{--tzAng:360deg}}
}
@media(prefers-reduced-motion:reduce){
  .viz-pano__scene,.viz-pano__dot,.viz-bars span,.viz-ico span,.tz::before{animation:none!important}
}

/* ================= BANDA FINAL "¿LISTO PARA HACER VISIBLE TU ESPACIO?" ================= */
.band-box{position:relative;isolation:isolate;overflow:hidden;padding:64px 28px 48px;border-color:rgba(140,150,255,.22);
  background:linear-gradient(135deg,rgba(53,184,255,.14),rgba(164,92,255,.14)),#0c0f18}
.band-box>*:not(.band-bg){position:relative;z-index:1}
.band-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
/* foto 360° que se desplaza muy lento, igual que en el inicio */
.band-pano{position:absolute;inset:0;background:url(/assets/hero-360.webp?v=2) repeat-x 0 50%/auto 420px;opacity:.38;filter:saturate(1.1);animation:bandPan 90s linear infinite}
@keyframes bandPan{to{background-position:-840px 50%}}
.band-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 90% at 50% 45%,rgba(10,13,24,.55),rgba(10,13,24,.88) 75%),linear-gradient(135deg,rgba(53,184,255,.22),rgba(164,92,255,.25))}
/* espiral áurea tenue girando de marca de agua */
.band-spiral{position:absolute;right:-90px;top:50%;width:520px;height:520px;margin-top:-260px;opacity:.5;animation:bandSpin 120s linear infinite}
.band-spiral path{fill:none;stroke:url(#none);stroke:rgba(150,170,255,.35);stroke-width:1.6;stroke-linecap:round}
@keyframes bandSpin{to{transform:rotate(360deg)}}

.band-box h2{font-size:clamp(28px,4vw,46px);line-height:1.15;margin-bottom:12px}
.band-box h2 .grad{background:linear-gradient(90deg,#5fc6ff,#a98bff 60%,#ff9bd5);-webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% 100%;animation:bandGrad 6s ease-in-out infinite alternate}
@keyframes bandGrad{to{background-position:100% 0}}
.band-box>p{color:#b9c0d4;margin:0 auto 28px;max-width:560px;font-size:17px}

/* botones */
.band-cta{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:14px}
.band-cta .btn{display:inline-flex;align-items:center;gap:10px;padding:16px 30px;font-size:16px}
.band-cta .btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.band-cta .btn:hover svg{transform:translateX(4px)}
.btn-shine{position:relative;overflow:hidden;box-shadow:0 10px 34px rgba(100,110,255,.4)}
.btn-shine::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;transform:skewX(-20deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:btnShine 4.8s ease-in-out infinite}
@keyframes btnShine{0%,55%{left:-70%}100%{left:140%}}
.band-wa{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.28)!important;color:#fff!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.band-wa:hover{background:rgba(37,211,102,.16)!important;border-color:rgba(37,211,102,.7)!important;box-shadow:0 10px 30px rgba(37,211,102,.22)}
.band-wa svg{stroke:#4ade80!important}

/* garantías */
.band-trust{list-style:none;margin:30px 0 0;padding:0;display:flex;justify-content:center;flex-wrap:wrap;gap:10px 28px}
.band-trust li{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:#c4cbe0}
.band-trust svg{width:18px;height:18px;padding:3px;box-sizing:border-box;border-radius:50%;background:rgba(31,209,122,.16);fill:none;stroke:#2be08a;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:620px){
  .band-box{padding:48px 20px 36px}
  .band-cta{flex-direction:column;align-items:stretch}
  .band-cta .btn{justify-content:center}
  .band-trust{flex-direction:column;align-items:center;gap:10px}
  .band-spiral{right:-180px;opacity:.4}
}
@media(prefers-reduced-motion:reduce){
  .band-pano,.band-spiral,.band-box h2 .grad,.btn-shine::after{animation:none!important}
}

/* ajuste: fondo y espiral más visibles */
.band-pano{opacity:.62}
.band-bg::after{background:radial-gradient(75% 95% at 50% 48%,rgba(10,13,24,.5),rgba(10,13,24,.78) 80%),linear-gradient(135deg,rgba(53,184,255,.18),rgba(164,92,255,.22))}
.band-spiral path{stroke:rgba(165,185,255,.6);stroke-width:2}
.band-spiral{opacity:.7}

/* ================= PÁGINA DE PAQUETES: TARJETAS PREMIUM ================= */
.plans{align-items:stretch;gap:20px}
.pl{overflow:visible;padding:30px 28px 26px;gap:0}
.pl::after{border-radius:inherit}
.pl__head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.pl__head h2{margin:0;font-size:24px}
.pl__ico{width:46px;height:46px;flex:none;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);transition:background .35s,border-color .35s}
.pl__ico svg{width:23px;height:23px;fill:none;stroke:#cdd5ff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s}
.pl:hover .pl__ico,.pl.featured .pl__ico{background:linear-gradient(135deg,#35b8ff,#8a5cff);border-color:transparent}
.pl:hover .pl__ico svg,.pl.featured .pl__ico svg{stroke:#fff}
.pl__chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.pl__chips span{padding:5px 12px;border-radius:999px;font-size:13px;color:#c4cbe0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.pl__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.1)}
.pl__price small{font-size:13px;color:var(--muted)}
.pl__price strong{font-size:34px;line-height:1.1;font-weight:700;color:#fff}
.pl__price p{flex-basis:100%;margin:4px 0 0;font-size:13.5px;line-height:1.45;color:#c4cbe0}
.pl__incl{margin:0 0 12px;font-size:13px;font-weight:600;letter-spacing:.02em;color:#9fb4ff}
.pl ul{gap:12px;margin-bottom:24px}
.pl li{display:flex;align-items:flex-start;gap:12px;padding-left:0;line-height:1.5}
.pl li::before{display:none}
.pl li svg{flex:none;width:20px;height:20px;margin-top:2px;padding:3px;box-sizing:border-box;border-radius:50%;background:rgba(53,184,255,.14);fill:none;stroke:#5fc6ff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pl.featured li svg{background:rgba(164,92,255,.2);stroke:#b9a2ff}
/* los checks se dibujan uno tras otro al aparecer la tarjeta */
.js .pl li svg path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .55s ease calc(var(--k)*140ms + .45s)}
.js .pl.in li svg path{stroke-dashoffset:0}
.pl .btn{display:block;width:100%;box-sizing:border-box;padding:15px 24px;font-size:16px;text-align:center}
.pl .btn-ghost{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.2);color:#fff;transition:background .3s,border-color .3s,transform .15s,box-shadow .3s}
.pl .btn-ghost:hover{background:linear-gradient(135deg,#35b8ff,#8a5cff);border-color:transparent;box-shadow:0 10px 30px rgba(100,110,255,.4)}
.pl__note{display:block;margin-top:12px;text-align:center;font-size:12.5px;color:var(--muted)}

/* tarjeta destacada: más grande, con borde que gira y resplandor */
.pl.featured{translate:0 -12px;padding-top:36px;border-color:transparent;
  background:linear-gradient(160deg,rgba(53,184,255,.1),rgba(164,92,255,.12)),#10131c;box-shadow:0 34px 90px rgba(90,100,240,.34)}
.pl.featured::before{opacity:1;padding:1.5px;background:conic-gradient(from var(--tzAng),rgba(53,184,255,.15) 0 30%,#5fc6ff,#a45cff,#ff9bd5,rgba(53,184,255,.15) 80% 100%);animation:plSpin 7s linear infinite}
@keyframes plSpin{to{--tzAng:360deg}}
.pl.featured:hover::before{opacity:1}
.pl .badge{top:-15px;right:24px;display:inline-flex;align-items:center;gap:6px;padding:6px 14px;font-size:12.5px;letter-spacing:.03em;z-index:3;
  background:linear-gradient(135deg,#7a5cff,#b35cff);box-shadow:0 8px 24px rgba(140,90,255,.5)}
.pl .badge i{font-style:normal;font-size:11px;animation:plStar 2.4s ease-in-out infinite}
@keyframes plStar{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.35) rotate(18deg)}}

/* franja "¿No sabes cuál elegir?" */
.pl-help{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:34px;padding:26px 30px;border-radius:22px;
  background:linear-gradient(135deg,rgba(53,184,255,.08),rgba(164,92,255,.1)),var(--card);border:1px solid rgba(140,150,255,.22)}
.pl-help h3{margin:0 0 4px;font-size:21px}
.pl-help p{margin:0;color:var(--muted);max-width:520px}
.pl-help__cta{display:flex;gap:12px;flex-wrap:wrap}
.pl-help .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px}
.pl-help .btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:860px){
  .plans .featured{order:-1;translate:0 0}
  .pl-help{flex-direction:column;align-items:stretch;text-align:center}
  .pl-help p{margin:0 auto}
  .pl-help__cta{flex-direction:column}
  .pl-help .btn{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .pl.featured::before,.pl .badge i{animation:none!important}
  .js .pl li svg path{transition:none;stroke-dashoffset:0}
}

/* ajustes de paquetes */
.pl>.badge{position:absolute}
.pl__head h2{font-size:22px;white-space:nowrap}
@media(max-width:1180px){.pl__head h2{white-space:normal}}

/* iconos de paquete: movimiento sutil que explica cada uno */
.pl__ico svg *{transform-box:fill-box;transform-origin:center}
.pl .ic-pin{animation:icPin 2.6s ease-in-out infinite}
@keyframes icPin{0%,100%{transform:translateY(1px)}50%{transform:translateY(-2px)}}
.pl .ic-orbit{animation:icOrbit 7s linear infinite}
@keyframes icOrbit{to{transform:rotate(360deg)}}
.pl .ic-dot{fill:currentColor;stroke:none;animation:icBlink 2s ease-in-out infinite}
@keyframes icBlink{0%,100%{opacity:.35}50%{opacity:1}}
.pl__ico{color:#cdd5ff}.pl:hover .pl__ico,.pl.featured .pl__ico{color:#fff}
.pl .ic-orbit+circle+.ic-dot{fill:#fff}
@media(prefers-reduced-motion:reduce){.pl .ic-pin,.pl .ic-orbit,.pl .ic-dot{animation:none!important}}

.pl .ic-ring{animation:icRing 2.4s ease-out infinite}
@keyframes icRing{0%{transform:scale(.55);opacity:1}100%{transform:scale(1.1);opacity:0}}
@media(prefers-reduced-motion:reduce){.pl .ic-ring{animation:none!important}}

/* ================= SELECTOR "¿QUÉ PAQUETE SE AJUSTA A TU NEGOCIO?" ================= */
.pl-pick{text-align:center;margin:0 auto 38px;max-width:860px}
.pl-pick h3{margin:0 0 16px;font-size:clamp(19px,2.2vw,23px)}
.pl-pick__chips{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.pl-pick__chip{padding:10px 18px;border-radius:999px;cursor:pointer;font:500 14.5px Inter,sans-serif;color:var(--text);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);
  transition:background .3s,border-color .3s,transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.pl-pick__chip:hover{border-color:rgba(140,160,255,.6);transform:translateY(-2px)}
.pl-pick__chip.on{color:#fff;border-color:transparent;background:linear-gradient(135deg,#35b8ff,#8a5cff);box-shadow:0 10px 28px rgba(100,110,255,.4)}
.pl-pick__chip:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.pl-pick__res{min-height:1.6em;margin:16px 0 0;font-weight:600;color:#cfd6ff}

/* el paquete recomendado se ilumina y los demás se atenúan */
.pl>.pl__rec{position:absolute;top:-15px;left:24px;z-index:3;display:none;padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:.03em;color:#04170d;
  background:linear-gradient(135deg,#4ade80,#2be08a);box-shadow:0 8px 24px rgba(43,224,138,.45)}
.pl.is-rec>.pl__rec{display:inline-block;animation:plRecIn .5s cubic-bezier(.3,1.5,.5,1) both}
@keyframes plRecIn{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}}
.js .pl{transition:opacity .45s,filter .45s,translate .45s,box-shadow .4s,border-color .4s;transition-delay:0s}
.js .pl.is-dim.in{opacity:.45;filter:saturate(.6);transition-delay:0s}
.pl.is-rec{translate:0 -12px;border-color:transparent;box-shadow:0 34px 90px rgba(43,224,138,.22)}
.pl.is-rec::before{opacity:1;padding:1.5px;background:conic-gradient(from var(--tzAng),rgba(43,224,138,.15) 0 30%,#4ade80,#35b8ff,#a45cff,rgba(43,224,138,.15) 80% 100%);animation:plSpin 6s linear infinite}
/* si se recomienda otra, la tarjeta "Popular" deja de brillar tanto */
.plans:has(.is-rec) .pl.featured:not(.is-rec){box-shadow:none;translate:0 0}
.plans:has(.is-rec) .pl.featured:not(.is-rec)::before{opacity:.35}

@media(max-width:860px){
  .plans .pl.is-rec{order:-2;translate:0 0}
  .pl-pick__chip{padding:9px 14px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){.pl.is-rec::before,.pl.is-rec>.pl__rec{animation:none!important}}

/* ================= PALABRA GIGANTE: RITMO ÁUREO, ESPIRAL Y OJO ================= */
.foot-giant-wrap{position:relative;max-width:1200px;margin:0 auto}
.site-foot .foot-grid{position:relative;z-index:2}
.site-foot .foot-bottom{position:relative;z-index:2}
/* la palabra ya no usa un fondo único: cada letra lleva su degradado y el foco del mouse */
.js .site-foot .foot-giant,.js .site-foot.in .foot-giant,.foot-giant{
  position:relative;z-index:1;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:inherit;
  clip-path:none;transform:none;transition:none;opacity:1;margin-top:40px;overflow:hidden}
.fg-w{display:inline-block;white-space:nowrap}
.fg-l{display:inline-block;color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:radial-gradient(280px circle at calc(var(--gx,-600px) - var(--lx,0px)) var(--gy,-600px),rgba(170,200,255,.85),rgba(170,200,255,0) 70%),
    linear-gradient(180deg,var(--c1),var(--c2) 55%,var(--c3))}
.fg-g1{--c1:rgba(120,185,255,.5);--c2:rgba(125,140,255,.2);--c3:rgba(150,100,255,.03)}
.fg-g2{--c1:rgba(170,115,255,.52);--c2:rgba(155,100,255,.2);--c3:rgba(150,100,255,.03)}
.js .fg-l{opacity:0;transform:translateY(70%);
  transition:transform 1.1s cubic-bezier(.2,.8,.2,1) var(--d,0s),opacity .9s ease var(--d,0s)}
.js .site-foot.in .fg-l{opacity:1;transform:none}

/* espiral áurea que nace en el centro de la "O" y se dibuja sola */
.fg-spiral{position:absolute;z-index:0;left:var(--sx,50%);top:var(--sy,50%);width:calc(var(--H,170px) * 3.5);height:calc(var(--H,170px) * 3.5);
  transform:translate(-50%,-50%);pointer-events:none;overflow:visible}
.fg-spiral path{fill:none;stroke:url(#fgGrad);stroke-width:1.5;stroke-linecap:round;opacity:.65}
.js .fg-spiral path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 3.4s cubic-bezier(.4,.1,.2,1) var(--spd,1.6s)}
.js .site-foot.in .fg-spiral path{stroke-dashoffset:0}

/* ojo en la "O": un iris que se abre y se cierra como el obturador del logo */
.fg-iris{position:absolute;z-index:3;left:var(--sx,50%);top:var(--sy,50%);width:calc(var(--H,170px) * .42);height:calc(var(--H,170px) * .42);
  transform:translate(-50%,-50%);pointer-events:none;overflow:visible}
.fg-iris__ring{fill:none;stroke:url(#fgIris);stroke-width:1.6;opacity:.9}
.fg-iris__blades{fill:none;stroke:url(#fgIris);stroke-width:1.1;opacity:.55;transform-origin:20px 20px;animation:fgBlades 14s linear infinite}
.fg-iris__pupil{fill:url(#fgIris);opacity:.85;transform-origin:20px 20px;animation:fgPupil 5.5s ease-in-out infinite}
@keyframes fgPupil{0%,100%{transform:scale(1)}50%{transform:scale(.45)}}
@keyframes fgBlades{to{transform:rotate(360deg)}}
.js .fg-iris{opacity:0;transition:opacity 1.2s ease calc(var(--spd,1.6s) - .6s)}
.js .site-foot.in .fg-iris{opacity:1}

/* corte áureo: PERCEP | TION ≈ 61.8 % / 38.2 % */
.fg-cut{position:absolute;z-index:2;top:2%;bottom:2%;left:var(--cut,61.8%);width:1px;pointer-events:none;opacity:.28;transition:opacity .4s;
  background:linear-gradient(180deg,transparent,rgba(150,175,255,.7),transparent)}
.foot-giant-wrap:hover .fg-cut{opacity:.85}

@media(max-width:860px){
  .fg-cut{display:none}
  .fg-spiral{width:calc(var(--H,60px) * 3);height:calc(var(--H,60px) * 3)}
  .fg-iris__blades{animation:none}
}
@media(prefers-reduced-motion:reduce){
  .js .fg-l{opacity:1;transform:none;transition:none}
  .js .fg-spiral path{stroke-dashoffset:0;transition:none}
  .js .fg-iris{opacity:1;transition:none}
  .fg-iris__blades,.fg-iris__pupil{animation:none!important}
}

/* ================= FRANJA DE SECTORES: PÍLDORAS EN DOS FILAS ================= */
.mq{position:relative;padding:34px 0 38px;border-block:1px solid var(--line);background:rgba(13,17,24,.6);overflow:hidden}
.mq-title{margin:0 0 22px;display:flex;align-items:center;justify-content:center;gap:16px;padding:0 24px;
  font:600 12.5px Inter,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);text-align:center}
.mq-title::before,.mq-title::after{content:"";height:1px;width:clamp(30px,8vw,110px);background:linear-gradient(90deg,transparent,rgba(140,160,255,.55))}
.mq-title::after{transform:scaleX(-1)}
.mq-row{overflow:hidden;padding:7px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mq-track{display:flex;gap:16px;width:max-content;will-change:transform}
.mq-pill{display:inline-flex;align-items:center;gap:12px;padding:10px 24px 10px 10px;border-radius:999px;white-space:nowrap;text-decoration:none;
  font:500 19px "Space Grotesk",sans-serif;color:#b7bfd6;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),color .3s,border-color .3s,background .3s,box-shadow .4s,opacity .35s}
.mq-ico{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.07);transition:background .35s,transform .4s}
.mq-ico svg{width:20px;height:20px;fill:none;stroke:#cdd5ff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
/* enfoque: la franja se detiene, la píldora bajo el cursor se enciende y las demás se atenúan */
@media(hover:hover){
  .mq:hover .mq-pill:not(:hover){opacity:.4}
  .mq-pill:hover{transform:translateY(-4px) scale(1.05);color:#fff;border-color:rgba(140,160,255,.6);background:rgba(255,255,255,.08);box-shadow:0 14px 36px rgba(80,100,240,.35)}
  .mq-pill:hover .mq-ico{background:linear-gradient(135deg,#35b8ff,#8a5cff);transform:rotate(-8deg)}
  .mq-pill:hover .mq-ico svg{stroke:#fff}
}
.mq-pill:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;color:#fff}

/* sin movimiento: cuadrícula quieta */
.mq--static .mq-row{-webkit-mask-image:none;mask-image:none}
.mq--static .mq-track{width:auto;flex-wrap:wrap;justify-content:center;padding:0 20px}

@media(max-width:700px){
  .mq{padding:26px 0 28px}
  .mq-row--b{display:none}
  .mq-pill{font-size:17px;padding:8px 20px 8px 8px}
  .mq-ico{width:34px;height:34px}
  .mq-title{letter-spacing:.16em;font-size:11.5px;margin-bottom:16px}
}
@media(max-width:860px){.tz__viz{height:72px;margin-bottom:14px}}