/* ===================== APPLE MAC SOLUTIONS — styles (black + gold) ===================== */
:root{
  /* base surfaces */
  --bg:#08080a; --bg-2:#0e0e11; --bg-3:#121216;
  --panel:#141417; --panel-2:#1a1a1f; --panel-3:#202027;
  /* gold palette */
  --gold:#d4af37; --gold-2:#e8c874; --gold-3:#a87f28; --champagne:#f0dca0;
  --grad-gold:linear-gradient(135deg,#f0dca0 0%,#d4af37 45%,#a87f28 100%);
  /* text */
  --ink:#f6f1e7; --ink-2:#aca69b; --ink-3:#726c62;
  /* status */
  --ok:#43d17a; --danger:#ff6b6b; --star:#e8c874;
  /* legacy aliases kept so every existing var() reference re-themes to gold */
  --blue:#a87f28; --blue-bright:#e8c874; --cyan:#d4af37;
  --white:#f6f1e7; --muted:#aca69b; --line:rgba(212,175,55,.16);
  --glass:rgba(20,20,23,.62);
  --radius:18px; --radius-sm:12px; --radius-lg:26px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1180px;
  --shadow:0 20px 60px -20px rgba(0,0,0,.7);
  --glow-gold:0 0 40px -8px rgba(212,175,55,.45);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  background:var(--bg); color:var(--white);
  font-family:'Inter',system-ui,sans-serif;
  line-height:1.6; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Sora',sans-serif;line-height:1.12;font-weight:700;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(100% - 40px,var(--maxw));margin-inline:auto}
.section{padding:clamp(64px,9vw,120px) 0;position:relative}
.grad{background:linear-gradient(100deg,var(--cyan),var(--blue-bright));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Section heads ---------- */
.sec-head{max-width:640px;margin:0 auto clamp(36px,5vw,56px);text-align:center}
.sec-head--left{text-align:left;margin-inline:0}
.sec-tag{display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);padding:6px 14px;border:1px solid var(--line);border-radius:100px;background:rgba(212,175,55,.05);margin-bottom:18px}
.sec-head h2{font-size:clamp(1.7rem,3.6vw,2.6rem);margin-bottom:12px}
.sec-head p{color:var(--muted)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.95rem;
  padding:13px 24px;border-radius:100px;cursor:pointer;border:1px solid transparent;
  transition:transform .25s var(--ease),box-shadow .3s var(--ease),background .3s;position:relative;overflow:hidden}
.btn--primary{background:linear-gradient(100deg,var(--blue),var(--cyan));color:#13120f;
  box-shadow:0 0 0 1px rgba(212,175,55,.4),0 12px 30px -8px rgba(168,127,40,.65)}
.btn--primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 0 0 1px rgba(212,175,55,.7),0 18px 44px -8px rgba(168,127,40,.85)}
.btn--ghost{background:rgba(255,255,255,.02);border-color:var(--line);color:var(--white)}
.btn--ghost:hover{border-color:var(--cyan);background:rgba(212,175,55,.06);transform:translateY(-2px)}
.btn--wa{background:#1fbe5b;color:#fff;box-shadow:0 8px 24px -8px rgba(31,190,91,.7)}
.btn--wa:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(31,190,91,.9)}
.btn--big{padding:16px 34px;font-size:1.02rem}
.btn .ico-wa{width:18px;height:18px}
.btn::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(255,255,255,.35),transparent 45%);opacity:0;transition:opacity .4s}
.btn:active::after{opacity:1;transition:none}

/* ---------- Loader ---------- */
.loader{position:fixed;inset:0;z-index:9999;background:#060605;display:grid;place-items:center;transition:opacity .7s var(--ease),visibility .7s}
.loader.done{opacity:0;visibility:hidden}
.loader__stage{display:flex;flex-direction:column;align-items:center;gap:22px}
.loader__logo{width:120px;height:120px;overflow:visible}
.ld-trace{fill:none;stroke:url(#ldGrad);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:300;stroke-dashoffset:300;animation:trace 1.6s var(--ease) forwards;filter:drop-shadow(0 0 6px rgba(212,175,55,.6))}
.ld-node{fill:var(--cyan);opacity:0;animation:nodeOn .5s ease forwards 1.3s;filter:drop-shadow(0 0 6px var(--cyan))}
@keyframes trace{to{stroke-dashoffset:0}}
@keyframes nodeOn{to{opacity:1}}
.loader__name{font-family:'Sora',sans-serif;font-weight:700;font-size:1.4rem;letter-spacing:.04em;
  opacity:0;animation:nameIn .6s var(--ease) forwards 1.5s;text-shadow:0 0 20px rgba(212,175,55,.5)}
@keyframes nameIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Header ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:900;padding:18px 0;transition:padding .35s var(--ease),background .35s,backdrop-filter .35s,border-color .35s;border-bottom:1px solid transparent}
.header.scrolled{padding:10px 0;background:rgba(11,10,9,.72);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.header.scrolled::after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:.55}
.header__inner{display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:10px}
.brand__mark{width:34px;height:34px}
.brand__text{font-family:'Sora',sans-serif;font-weight:600;font-size:1.15rem;letter-spacing:-.01em}
.brand__text strong{color:var(--cyan);font-weight:800}
.nav{display:flex;gap:26px;margin-left:auto;font-size:.94rem;font-weight:500}
.nav a{color:var(--muted);transition:color .25s;position:relative}
.nav a::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:2px;background:var(--cyan);transition:width .3s var(--ease)}
.nav a:hover{color:var(--white)}.nav a:hover::after{width:100%}
.header__cta{margin-left:6px}
.hamb{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px;margin-left:auto}
.hamb span{width:24px;height:2px;background:var(--white);border-radius:2px;transition:.3s var(--ease)}
.hamb.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamb.open span:nth-child(2){opacity:0}
.hamb.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0 0 0 auto;width:min(80vw,320px);background:rgba(14,14,12,.97);backdrop-filter:blur(18px);
  transform:translateX(100%);transition:transform .4s var(--ease);z-index:899;padding:100px 30px 40px;display:flex;flex-direction:column;gap:6px;border-left:1px solid var(--line)}
.mobile-menu.open{transform:none}
.mobile-menu a{padding:14px 0;color:var(--muted);font-size:1.05rem;border-bottom:1px solid var(--line);transition:color .2s}
.mobile-menu a:hover{color:var(--white)}
.mobile-menu .btn{margin-top:20px;justify-content:center;border-bottom:0}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding-top:120px;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0}
.glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.glow--1{width:520px;height:520px;background:radial-gradient(circle,rgba(168,127,40,.55),transparent 70%);top:-120px;left:-80px}
.glow--2{width:600px;height:600px;background:radial-gradient(circle,rgba(212,175,55,.28),transparent 70%);bottom:-160px;right:-120px}
.grid-lines{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000,transparent 75%);opacity:.5}
#particles{position:absolute;inset:0;width:100%;height:100%}
.hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;color:var(--muted);border:1px solid var(--line);padding:7px 15px;border-radius:100px;background:var(--glass);margin-bottom:22px}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.4}}
.hero__title{font-size:clamp(2.3rem,5.5vw,4rem);font-weight:800;margin-bottom:20px}
.hero__sub{font-size:clamp(1rem,1.4vw,1.18rem);color:var(--muted);max-width:520px;margin-bottom:28px}
.hero__benes{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin-bottom:32px;max-width:520px}
.hero__benes li{display:flex;align-items:center;gap:10px;font-size:.94rem}
.ck{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:var(--cyan);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);width:26px;height:42px;border:2px solid var(--line);border-radius:20px;z-index:3;display:grid;justify-items:center;padding-top:8px}
.scroll-hint span{width:4px;height:8px;background:var(--cyan);border-radius:2px;animation:scrolldot 1.6s infinite}
@keyframes scrolldot{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}

/* hero visual */
.hero__visual{display:grid;place-items:center}
.phone-float{position:relative;width:230px;height:460px;animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-18px)}}
.phone{position:absolute;inset:0;border-radius:34px;background:linear-gradient(160deg,#1b1a16,#0d0c0a);border:1px solid rgba(212,175,55,.25);
  box-shadow:0 40px 80px -20px rgba(0,0,0,.8),inset 0 0 0 2px rgba(212,175,55,.08);display:grid;place-items:center}
.phone__notch{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:70px;height:18px;background:#080706;border-radius:12px}
.phone__screen{width:82%;height:88%;border-radius:26px;background:radial-gradient(circle at 50% 40%,rgba(168,127,40,.16),transparent 70%);display:grid;place-items:center}
.phone__d{width:120px;filter:drop-shadow(0 0 14px rgba(212,175,55,.6))}
.orbit{position:absolute;border-radius:50%;border:1px solid rgba(212,175,55,.18);inset:-40px;animation:spin 14s linear infinite}
.orbit--2{inset:-70px;border-color:rgba(168,127,40,.14);animation-duration:22s;animation-direction:reverse}
.orbit::before{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Cards / grids ---------- */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--glass);border:1px solid var(--line);border-radius:var(--radius);padding:28px;
  backdrop-filter:blur(10px);transition:transform .35s var(--ease),border-color .35s,box-shadow .35s;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(120deg,transparent,rgba(212,175,55,.35),transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s}
.card:hover{transform:translateY(-6px);border-color:rgba(212,175,55,.4);box-shadow:0 24px 50px -18px rgba(168,127,40,.4)}
.card:hover::before{opacity:1}
.bene__ico,.srv__ico{font-size:2rem;margin-bottom:14px;transition:transform .35s var(--ease)}
.card:hover .bene__ico,.card:hover .srv__ico{transform:scale(1.15) translateY(-2px)}
.bene h3,.srv h3{font-size:1.15rem;margin-bottom:8px}
.bene p,.srv p{color:var(--muted);font-size:.92rem}
.srv{display:flex;flex-direction:column}
.link-wa{margin-top:16px;color:var(--cyan);font-weight:600;font-size:.9rem;align-self:flex-start;transition:gap .25s}
.link-wa:hover{opacity:.8}

/* ---------- Marcas ---------- */
.marcas{padding:56px 0;border-block:1px solid var(--line);background:linear-gradient(180deg,transparent,rgba(168,127,40,.03),transparent)}
.marcas__label{text-align:center;color:var(--muted);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:28px}
.marquee{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__track{display:flex;gap:56px;width:max-content;animation:scrollx 32s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{font-family:'Sora',sans-serif;font-weight:700;font-size:1.5rem;color:rgba(227,224,218,.35);white-space:nowrap;transition:color .3s}
.marquee__track span:hover{color:var(--cyan)}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* ---------- Por qué ---------- */
.porque__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.porque__frame{aspect-ratio:4/3;border-radius:var(--radius);border:1px solid var(--line);position:relative;overflow:hidden;
  background:radial-gradient(circle at 30% 20%,rgba(168,127,40,.25),transparent 60%),linear-gradient(160deg,#191714,#0d0c0a);box-shadow:var(--shadow)}
.porque__frame::after{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:34px 34px;opacity:.5}
.porque__badge{position:absolute;bottom:20px;left:20px;z-index:2;background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:14px;padding:14px 20px}
.porque__badge strong{display:block;font-family:'Sora';font-size:1.8rem;color:var(--cyan);line-height:1}
.porque__badge span{font-size:.82rem;color:var(--muted)}
.porque__copy .lead{color:var(--muted);font-size:1.08rem;margin:12px 0 22px}
.porque__copy h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
.checklist{list-style:none;display:grid;gap:12px;margin-bottom:30px}
.checklist li{display:flex;align-items:center;gap:12px;font-size:1rem}
.stats{display:flex;gap:30px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:24px}
.stat b{font-family:'Sora';font-size:2rem;color:var(--white);display:block;line-height:1}
.stat span{font-size:.82rem;color:var(--muted)}

/* ---------- Proceso ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative}
.steps::before{content:"";position:absolute;top:28px;left:12%;right:12%;height:2px;background:linear-gradient(90deg,transparent,var(--blue),var(--cyan),transparent);opacity:.5}
.step{text-align:center;position:relative;z-index:2}
.step__n{width:56px;height:56px;display:grid;place-items:center;margin:0 auto 16px;border-radius:50%;font-family:'Sora';font-weight:700;font-size:1.3rem;
  background:radial-gradient(circle at 30% 30%,#3a2f12,#0d0c0a);border:1px solid rgba(212,175,55,.4);color:var(--cyan);box-shadow:0 0 24px -6px rgba(212,175,55,.5)}
.step h3{font-size:1.1rem;margin-bottom:6px}
.step p{color:var(--muted);font-size:.9rem}

/* ---------- Trabajos / compare ---------- */
.compare{position:relative;max-width:760px;margin:0 auto 40px;aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);user-select:none;box-shadow:var(--shadow)}
.compare__before,.compare__after{position:absolute;inset:0}
.compare__after{background:linear-gradient(135deg,#171613,#22201c);clip-path:inset(0 0 0 50%);display:grid;place-items:center}
.compare__before{background:linear-gradient(135deg,#2a0d0d,#3a1414);clip-path:inset(0 50% 0 0);display:grid;place-items:center}
.compare__after::before{content:"✓ Reparado";font-family:'Sora';font-weight:700;font-size:1.4rem;color:var(--cyan)}
.compare__before::before{content:"✕ Dañado";font-family:'Sora';font-weight:700;font-size:1.4rem;color:#ff8a8a}
.compare__lbl{position:absolute;top:14px;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:100px;background:rgba(0,0,0,.5);border:1px solid var(--line)}
.compare__after .compare__lbl{right:14px}.compare__before .compare__lbl{left:14px}
.compare__range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:5;margin:0}
.compare__handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:var(--cyan);transform:translateX(-50%);box-shadow:0 0 16px var(--cyan);z-index:4;pointer-events:none;display:grid;place-items:center}
.compare__handle span{position:absolute;width:42px;height:42px;border-radius:50%;background:var(--cyan);color:#131210;display:grid;place-items:center;font-size:.7rem;font-weight:700;box-shadow:0 0 20px rgba(212,175,55,.6)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gal-item{aspect-ratio:4/3;border-radius:var(--radius-sm);border:1px solid var(--line);cursor:pointer;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#1b1a16,#0e0e0c);transition:transform .35s var(--ease),border-color .35s}
.gal-item::after{content:"🔍";position:absolute;inset:0;display:grid;place-items:center;font-size:1.5rem;opacity:0;transition:opacity .3s;background:rgba(11,10,9,.5)}
.gal-item::before{content:"Trabajo " attr(data-i);position:absolute;bottom:12px;left:12px;font-size:.85rem;color:var(--muted)}
.gal-item:hover{transform:scale(1.02);border-color:rgba(212,175,55,.4)}
.gal-item:hover::after{opacity:1}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(6,5,4,.92);backdrop-filter:blur(6px);display:none;place-items:center;padding:30px}
.lightbox.open{display:grid}
.lightbox__img{width:min(80vw,700px);aspect-ratio:4/3;border-radius:var(--radius);background:linear-gradient(160deg,#1b1a16,#0e0e0c);border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);font-size:1.2rem}
.lightbox__close{position:absolute;top:24px;right:30px;width:44px;height:44px;border-radius:50%;background:var(--glass);border:1px solid var(--line);color:#fff;font-size:1.1rem;cursor:pointer}

/* ---------- Accesorios ---------- */
.acc__it{text-align:center}
.acc__it span{font-size:2.2rem;display:block;margin-bottom:12px}
.acc__it h3{font-size:1.1rem;margin-bottom:6px}
.acc__it p{color:var(--muted);font-size:.9rem}

/* ---------- Testimonios ---------- */
.testi__track{display:flex;gap:22px;overflow-x:auto;padding-bottom:14px;scroll-snap-type:x mandatory;-ms-overflow-style:none;scrollbar-width:none}
.testi__track::-webkit-scrollbar{display:none}
.testi__card{min-width:min(340px,80vw);scroll-snap-align:start}
.stars{color:#ffcf4d;letter-spacing:2px;margin-bottom:12px}
.testi__card p{font-size:.98rem;margin-bottom:16px}
.testi__card footer{display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:12px}
.testi__card footer span{color:var(--muted);font-size:.85rem}

/* ---------- FAQ ---------- */
.faq__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start}
.accordion{display:grid;gap:12px}
.accordion details{background:var(--glass);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;transition:border-color .3s}
.accordion details[open]{border-color:rgba(212,175,55,.35)}
.accordion summary{padding:18px 22px;cursor:pointer;font-family:'Sora';font-weight:600;font-size:1rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{content:"+";font-size:1.4rem;color:var(--cyan);transition:transform .3s;flex:0 0 auto}
.accordion details[open] summary::after{transform:rotate(45deg)}
.accordion p{padding:0 22px 20px;color:var(--muted);font-size:.94rem}

/* ---------- Contacto ---------- */
.contacto__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:stretch}
.contacto__list{list-style:none;display:grid;gap:18px;margin:22px 0}
.contacto__list li{display:flex;gap:14px;font-size:1rem;color:var(--white)}
.contacto__list span{font-size:1.2rem}
.pays{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.pays span{font-size:.82rem;padding:7px 14px;border:1px solid var(--line);border-radius:100px;color:var(--muted);background:rgba(255,255,255,.02)}
.socials{display:flex;gap:14px;margin-bottom:26px}
.socials a{color:var(--cyan);font-weight:600;font-size:.92rem}
.contacto__map{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);min-height:380px;box-shadow:var(--shadow)}
.contacto__map iframe{width:100%;height:100%;min-height:380px;border:0;filter:grayscale(.3) invert(.9) hue-rotate(180deg) contrast(.9)}

/* ---------- CTA final ---------- */
.cta-final__box{position:relative;text-align:center;border-radius:26px;padding:clamp(44px,7vw,80px) 28px;overflow:hidden;
  background:linear-gradient(160deg,rgba(168,127,40,.14),rgba(212,175,55,.06)),var(--panel);border:1px solid rgba(212,175,55,.25)}
.glow--cta{width:500px;height:300px;top:-100px;left:50%;transform:translateX(-50%);background:radial-gradient(circle,rgba(212,175,55,.35),transparent 70%);opacity:.6}
.cta-final__box h2{position:relative;font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:14px}
.cta-final__box p{position:relative;color:var(--muted);max-width:520px;margin:0 auto 28px}
.cta-final__box .btn{position:relative}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line);padding:64px 0 24px;background:linear-gradient(180deg,transparent,rgba(18,17,14,.6));position:relative}
.footer::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:44px 44px;opacity:.25;mask-image:linear-gradient(180deg,transparent,#000)}
.footer__grid{position:relative;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}
.footer h4{font-size:.95rem;margin-bottom:14px;color:var(--white)}
.footer a{display:block;color:var(--muted);font-size:.9rem;margin-bottom:8px;transition:color .2s}
.footer a:hover{color:var(--cyan)}
.footer p{color:var(--muted);font-size:.9rem;margin-bottom:8px}
.footer__desc{max-width:320px;margin-top:14px}
.brand--footer{margin-bottom:0}
.footer__bar{position:relative;border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:.82rem}

/* ---------- WA fab ---------- */
.wa-fab{position:fixed;bottom:22px;right:22px;z-index:800;width:58px;height:58px;border-radius:50%;background:#1fbe5b;color:#fff;display:grid;place-items:center;box-shadow:0 12px 30px -6px rgba(31,190,91,.7);transition:transform .3s var(--ease)}
.wa-fab svg{width:30px;height:30px}
.wa-fab::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #1fbe5b;animation:ripple 2.2s ease-out infinite}
@keyframes ripple{to{transform:scale(1.7);opacity:0}}
.wa-fab:hover{transform:scale(1.1)}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .nav,.header__cta{display:none}
  .hamb{display:flex}
  .hero__grid{grid-template-columns:1fr;text-align:center}
  .hero__benes,.hero__sub{margin-inline:auto}
  .hero__cta{justify-content:center}
  .hero__visual{grid-row:1;margin-bottom:20px}
  .phone-float{width:180px;height:360px}
  .porque__grid,.faq__grid,.contacto__grid{grid-template-columns:1fr;gap:34px}
  .grid-4{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}.steps::before{display:none}
  .sec-head--left{text-align:center}
  .footer__grid{grid-template-columns:1fr 1fr}
}
/* Tablet */
@media(max-width:768px){
  .grid-3{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .acc{grid-template-columns:1fr 1fr}
  .compare{aspect-ratio:16/12}
  .contacto__map,.contacto__map iframe{min-height:320px}
  .stats{justify-content:space-between}
  .stat b{font-size:1.7rem}
  .footer__bar{justify-content:center;text-align:center}
}
@media(max-width:560px){
  .grid-4,.grid-3,.gallery{grid-template-columns:1fr}
  .hero__benes{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .hero__cta .btn{width:100%;justify-content:center}
  .stats{gap:20px}
  .container{width:min(100% - 28px,var(--maxw))}
  .card{padding:22px}
  .hero__title{font-size:clamp(2rem,8vw,2.6rem)}
  .sec-head h2{font-size:1.55rem}
  .marquee__track span{font-size:1.2rem}
  .wa-fab{width:52px;height:52px;bottom:16px;right:16px}
  .wa-fab svg{width:26px;height:26px}
  .cta-final__box{padding:40px 20px}
  .contacto__list li{font-size:.95rem}
  .compare{aspect-ratio:1/1}
}
/* Landscape phones / short screens */
@media(max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;padding:120px 0 60px}
  .phone-float{height:280px;width:150px}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ===================== v2 REFINAMIENTO ===================== */
/* Más aire entre secciones (sensación Celltan) */
.section{padding:clamp(80px,11vw,150px) 0}
/* Divisor de circuito entre bloques */
.section + .section::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(90%,var(--maxw));height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 20%,rgba(212,175,55,.35) 50%,var(--line) 80%,transparent)}
.section + .section.marcas::before,.hero + .section::before{display:none}

/* ---- Loader: entrada gated ---- */
.loader__tag{font-size:.82rem;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;opacity:0;animation:nameIn .6s var(--ease) forwards 1.7s}
.loader__enter{margin-top:14px;opacity:0;pointer-events:none;transform:translateY(10px);
  font-family:'Sora';font-weight:600;font-size:.98rem;color:#131210;padding:14px 30px;border:0;border-radius:100px;cursor:pointer;
  background:linear-gradient(100deg,var(--blue),var(--cyan));box-shadow:0 0 0 1px rgba(212,175,55,.5),0 14px 34px -8px rgba(168,127,40,.7);
  transition:transform .3s var(--ease),box-shadow .3s,opacity .5s}
.loader.ready .loader__enter{opacity:1;pointer-events:auto;transform:none;animation:enterPulse 2.4s ease-in-out infinite 1s}
.loader__enter:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 0 0 1px rgba(212,175,55,.8),0 20px 44px -8px rgba(168,127,40,.9)}
@keyframes enterPulse{50%{box-shadow:0 0 0 1px rgba(212,175,55,.9),0 14px 40px -6px rgba(212,175,55,.7)}}
body.locked{overflow:hidden;height:100vh}

/* ---- Card tilt/glow follow ---- */
.card{transform-style:preserve-3d}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .35s;pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(212,175,55,.14),transparent 60%)}
.card:hover::after{opacity:1}

/* ---- Catálogo ---- */
.cat-tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
.cat-tab{font-family:'Sora';font-weight:600;font-size:.9rem;color:var(--muted);padding:10px 22px;border-radius:100px;
  border:1px solid var(--line);background:rgba(255,255,255,.02);cursor:pointer;transition:all .3s var(--ease)}
.cat-tab:hover{color:var(--white);border-color:rgba(212,175,55,.4)}
.cat-tab.is-active{color:#131210;background:linear-gradient(100deg,var(--blue),var(--cyan));border-color:transparent;box-shadow:0 8px 22px -8px rgba(168,127,40,.7)}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cat-card{background:var(--glass);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .4s var(--ease),border-color .35s,box-shadow .35s,opacity .4s;position:relative}
.cat-card.hide{display:none}
.cat-card:hover{transform:translateY(-6px);border-color:rgba(212,175,55,.4);box-shadow:0 24px 50px -18px rgba(168,127,40,.4)}
.cat-card__img{aspect-ratio:4/3;display:grid;place-items:center;font-size:3rem;position:relative;
  background:radial-gradient(circle at 50% 40%,rgba(168,127,40,.18),transparent 65%),linear-gradient(160deg,#1b1a16,#0e0e0c);border-bottom:1px solid var(--line)}
.cat-card__img::before{content:attr(data-ico);filter:drop-shadow(0 6px 16px rgba(212,175,55,.4))}
.cat-card__img::after{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:26px 26px;opacity:.4}
.cat-card__body{padding:20px}
.cat-card__body h3{font-size:1.05rem;margin-bottom:6px}
.cat-card__body p{color:var(--muted);font-size:.88rem;margin-bottom:12px}

/* ---- Reseñas upgrade ---- */
.rating-badge{display:inline-flex;align-items:center;gap:14px;margin-top:20px;padding:12px 20px;border:1px solid var(--line);border-radius:16px;background:var(--glass);text-align:left}
.rating-badge__g{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:'Sora';font-weight:800;font-size:1.2rem;
  background:conic-gradient(#e3ba53,#ea4335,#fbbc05,#34a853,#e3ba53);color:#fff}
.rating-badge strong{font-family:'Sora';font-size:1.15rem}
.rating-badge__sub{color:var(--muted);font-size:.78rem}
.testi__wrap{position:relative}
.testi__top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.avatar{width:44px;height:44px;flex:0 0 44px;border-radius:50%;display:grid;place-items:center;font-family:'Sora';font-weight:700;font-size:.95rem;color:#fff;background:var(--a,#a87f28)}
.testi__top strong{font-size:.98rem;display:block}
.testi__meta{color:var(--muted);font-size:.78rem}
.testi__g{margin-left:auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:'Sora';font-weight:800;font-size:.85rem;
  background:conic-gradient(#e3ba53,#ea4335,#fbbc05,#34a853,#e3ba53);color:#fff}
.testi__ctrls{display:flex;gap:12px;justify-content:center;margin-top:26px}
.testi__btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--glass);color:var(--white);cursor:pointer;font-size:1rem;transition:all .3s var(--ease)}
.testi__btn:hover{border-color:var(--cyan);background:rgba(212,175,55,.1);transform:translateY(-2px)}
.testi__track{scroll-behavior:smooth}

/* ---- Formulario ---- */
.form-sec__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:center}
.form-sec__aside h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
.form-sec__aside .lead{color:var(--muted);font-size:1.08rem;margin:12px 0 22px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:34px}
.field{position:relative}
.field--full{grid-column:1/-1}
.field input,.field select,.field textarea{width:100%;background:rgba(14,14,12,.6);border:1px solid var(--line);border-radius:12px;
  color:var(--white);font-family:inherit;font-size:.96rem;padding:18px 16px 8px;transition:border-color .3s,box-shadow .3s;resize:vertical}
.field textarea{padding-top:22px}
.field select{padding-top:18px;appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23d4af37' d='M6 8 0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.field label{position:absolute;left:16px;top:15px;color:var(--muted);font-size:.95rem;pointer-events:none;transition:.2s var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(212,175,55,.12)}
.field input:focus + label,.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,.field textarea:not(:placeholder-shown) + label,
.field select:focus + label,.field select:valid + label{top:6px;font-size:.7rem;color:var(--cyan)}
.field input.err,.field select.err{border-color:#ff6b6b;box-shadow:0 0 0 3px rgba(255,107,107,.12)}
.form__submit{grid-column:1/-1;justify-content:center;margin-top:4px}
.form__note{grid-column:1/-1;text-align:center;color:var(--muted);font-size:.8rem}

/* ---- Responsive nuevo ---- */
@media(max-width:960px){
  .cat-grid{grid-template-columns:1fr 1fr}
  .form-sec__grid{grid-template-columns:1fr;gap:34px}
}
@media(max-width:560px){
  .cat-grid{grid-template-columns:1fr 1fr;gap:14px}
  .cat-card__img{font-size:2.2rem}
  .cat-card__body{padding:14px}
  .cat-card__body h3{font-size:.95rem}
  .form{grid-template-columns:1fr;padding:24px}
  .cat-tabs{gap:8px}
  .cat-tab{padding:9px 16px;font-size:.82rem}
  .rating-badge{width:100%;justify-content:center}
  .testi__card{min-width:88vw}
}

/* ---- Reseñas honestas (sin datos falsos) ---- */
.resenas__box{position:relative;text-align:center;max-width:720px;margin:0 auto;padding:clamp(40px,6vw,64px) 28px;overflow:hidden;
  border-radius:26px;background:linear-gradient(160deg,rgba(168,127,40,.1),rgba(212,175,55,.04)),var(--panel);border:1px solid rgba(212,175,55,.22)}
.resenas__box h2{position:relative;font-size:clamp(1.6rem,3.4vw,2.3rem);margin:14px 0 12px}
.resenas__box p{position:relative;color:var(--muted);max-width:520px;margin:0 auto 26px}
.resenas__cta{position:relative;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
@media(max-width:560px){.resenas__cta .btn{width:100%;justify-content:center}}


/* ============================================================
   FONDO GLOBAL v4 — GALAXIA DIGITAL AZUL infinita y viva
   Núcleo gigante + brazos que rotan + nebulosas de luz líquida.
   100% azul. Cubre toda la página (fixed). Solo CSS + SVG.
   ============================================================ */
.site-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#070605}
.site-bg>*{position:absolute;inset:-14%;will-change:transform}
.site-bg .bg-layer::before{content:"";position:absolute;inset:0;will-change:transform,opacity;backface-visibility:hidden}

/* CAPA 1 — EL VACÍO azul (respira, nunca plano, nunca negro puro) */
.bg-void{inset:0;background:
  radial-gradient(85% 70% at 62% 34%, #523e0d 0%, transparent 58%),
  radial-gradient(70% 60% at 15% 90%, #1f1d19 0%, transparent 60%),
  radial-gradient(60% 60% at 95% 80%, #1c1a16 0%, transparent 60%),
  linear-gradient(160deg,#070605 0%,#13120f 50%,#0b0a09 100%);
  animation:voidBreath 109s ease-in-out infinite alternate}
@keyframes voidBreath{0%{filter:brightness(1) saturate(1)}100%{filter:brightness(1.14) saturate(1.28)}}

/* CAPA 2 — NÚCLEO galáctico: gigante (>viewport), descentrado, solo se ve una parte */
.bg-core::before{
  left:24%;top:8%;width:120vmax;height:120vmax;margin-left:-60vmax;margin-top:-60vmax;
  background:radial-gradient(closest-side,
    rgba(236,234,229,.55) 0%,
    rgba(236,209,139,.42) 14%,
    rgba(212,175,55,.30) 30%,
    rgba(168,127,40,.16) 50%,
    transparent 70%);
  filter:blur(20px);opacity:.85;
  animation:corePulse 47s ease-in-out infinite}
@keyframes corePulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}

/* CAPA 3 — BRAZOS galácticos: masas de energía que giran imperceptiblemente */
.bg-arms::before{
  width:260%;height:260%;left:-58%;top:-88%;transform-origin:50% 50%;
  background:
    conic-gradient(from 0deg at 50% 50%,
      transparent 0deg, rgba(212,175,55,.14) 26deg, transparent 70deg,
      transparent 120deg, rgba(168,127,40,.12) 150deg, transparent 196deg,
      transparent 250deg, rgba(233,200,118,.13) 280deg, transparent 328deg, transparent 360deg);
  -webkit-mask:radial-gradient(circle at 50% 50%, transparent 0 14%, #000 34%, #000 58%, transparent 82%);
          mask:radial-gradient(circle at 50% 50%, transparent 0 14%, #000 34%, #000 58%, transparent 82%);
  filter:blur(44px);opacity:.8;mix-blend-mode:screen;
  animation:spinCW 151s linear infinite}
.bg-arms2::before{
  width:300%;height:300%;left:-78%;top:-100%;transform-origin:50% 50%;
  background:
    conic-gradient(from 40deg at 50% 50%,
      transparent 0deg, rgba(212,175,55,.10) 34deg, transparent 88deg,
      transparent 150deg, rgba(228,189,91,.10) 190deg, transparent 250deg, transparent 360deg);
  -webkit-mask:radial-gradient(circle at 50% 50%, transparent 0 18%, #000 40%, #000 66%, transparent 88%);
          mask:radial-gradient(circle at 50% 50%, transparent 0 18%, #000 40%, #000 66%, transparent 88%);
  filter:blur(66px);opacity:.6;mix-blend-mode:screen;
  animation:spinCCW 233s linear infinite}
@keyframes spinCW{to{transform:rotate(360deg)}}
@keyframes spinCCW{to{transform:rotate(-360deg)}}

/* CAPA 4 — NEBULOSAS de luz líquida (se desplazan y deforman) */
.bg-nebula::before{
  background:
    radial-gradient(38% 30% at 30% 32%, rgba(228,188,87,.20), transparent 70%),
    radial-gradient(32% 28% at 76% 44%, rgba(212,175,55,.16), transparent 72%),
    radial-gradient(44% 38% at 58% 84%, rgba(220,169,40,.18), transparent 72%);
  filter:blur(46px);mix-blend-mode:screen;opacity:.85;animation:nebulaDrift 97s ease-in-out infinite alternate}
@keyframes nebulaDrift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-4%,3%,0) scale(1.12)}100%{transform:translate3d(3%,-4%,0) scale(1.06)}}

/* CAPA 5 — LUZ LÍQUIDA (SVG turbulencia animada): corrientes orgánicas del núcleo */
.bg-liquid{width:150%;height:150%;left:-25%;top:-25%;opacity:.7;
  mix-blend-mode:screen;filter:blur(12px) saturate(1.3);
  animation:liquidDrift 127s ease-in-out infinite alternate}
@keyframes liquidDrift{
  0%{transform:translate3d(-2%,0,0) rotate(-3deg) scale(1.05)}
  50%{transform:translate3d(3%,-3%,0) rotate(3deg) scale(1.18)}
  100%{transform:translate3d(1%,2%,0) rotate(6deg) scale(1.1)}}

/* CAPA 6 — CORRIENTES desde el núcleo (rayos volumétricos que aparecen/desaparecen) */
.bg-rays::before{
  background:
    conic-gradient(from 210deg at 62% 30%, transparent 0deg, rgba(212,175,55,.14) 12deg, transparent 30deg),
    conic-gradient(from 20deg at 62% 30%, transparent 0deg, rgba(168,127,40,.12) 16deg, transparent 36deg),
    conic-gradient(from 120deg at 62% 30%, transparent 0deg, rgba(233,200,118,.10) 14deg, transparent 34deg);
  filter:blur(30px);opacity:.7;mix-blend-mode:screen;
  animation:raysSpin 189s linear infinite,raysFade 41s ease-in-out infinite}
@keyframes raysSpin{to{transform:rotate(360deg)}}
@keyframes raysFade{0%,100%{opacity:.4}50%{opacity:.8}}

/* CAPA 7 — FRAGMENTOS de energía que orbitan (2 profundidades) */
.bg-frag::before{
  background-image:
    radial-gradient(circle, rgba(231,229,224,.95) 0 40%, transparent 55%),
    radial-gradient(circle, rgba(212,175,55,.75) 0 40%, transparent 55%),
    radial-gradient(circle, rgba(240,219,165,.85) 0 40%, transparent 55%),
    radial-gradient(circle, rgba(212,175,55,.65) 0 40%, transparent 55%),
    radial-gradient(circle, rgba(227,224,218,.8) 0 40%, transparent 55%);
  background-repeat:no-repeat;
  background-size:5px 5px,3px 3px,4px 4px,2px 2px,3px 3px;
  background-position:14% 22%,34% 68%,72% 40%,88% 76%,50% 12%;
  opacity:.9;animation:orbitA 120s linear infinite}
.bg-frag2::before{
  background-image:
    radial-gradient(circle, rgba(236,209,139,.7) 0 40%, transparent 55%),
    radial-gradient(circle, rgba(212,175,55,.5) 0 40%, transparent 55%),
    radial-gradient(circle, rgba(231,229,224,.6) 0 40%, transparent 55%),
    radial-gradient(circle, rgba(233,200,118,.55) 0 40%, transparent 55%);
  background-repeat:no-repeat;
  background-size:2px 2px,3px 3px,2px 2px,2px 2px;
  background-position:24% 48%,58% 18%,80% 88%,40% 74%;
  filter:blur(1.2px);opacity:.6;animation:orbitB 173s linear infinite reverse}
@keyframes orbitA{0%{transform:rotate(0) translateY(0)}100%{transform:rotate(360deg) translateY(0)}}
@keyframes orbitB{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

/* Textura noise (<3%) */
.bg-noise{inset:0;opacity:.02;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

body{background:#070605}
.grid-lines{display:none!important}

/* Narrativa scroll: la galaxia se intensifica al viajar (--sp lo pone el JS, sobre filter) */
.site-bg{--sp:0}
.bg-core::before{filter:blur(20px) brightness(calc(1 + var(--sp) * .4)) hue-rotate(calc(var(--sp) * -14deg))}
.bg-nebula::before{filter:blur(46px) brightness(calc(1 + var(--sp) * .3))}

/* Responsive: menos blur/densidad, misma experiencia */
@media(max-width:768px){
  .bg-arms::before{filter:blur(34px)}
  .bg-arms2::before{filter:blur(48px);opacity:.5}
  .bg-nebula::before{filter:blur(34px)}
  .bg-liquid{filter:blur(9px) saturate(1.25);opacity:.55}
  .bg-rays::before{filter:blur(22px)}
  .bg-frag2{display:none}
}
@media(prefers-reduced-motion:reduce){
  .bg-void,.bg-core::before,.bg-arms::before,.bg-arms2::before,.bg-nebula::before,.bg-liquid,.bg-rays::before,.bg-frag::before,.bg-frag2::before{animation:none}
}

/* ===== GALAXIA · intensidad visible (v5) ===== */
.bg-core::before{
  background:radial-gradient(closest-side,
    rgba(242,241,238,.85) 0%,
    rgba(238,212,147,.62) 16%,
    rgba(212,175,55,.42) 34%,
    rgba(168,127,40,.24) 54%,
    transparent 72%);
  filter:blur(14px) saturate(1.15);opacity:1}
.bg-arms::before{
  background:conic-gradient(from 0deg at 50% 50%,
    transparent 0deg, rgba(212,175,55,.30) 24deg, transparent 74deg,
    transparent 118deg, rgba(168,127,40,.26) 150deg, transparent 200deg,
    transparent 250deg, rgba(236,209,139,.28) 282deg, transparent 330deg, transparent 360deg);
  filter:blur(30px);opacity:1}
.bg-arms2::before{
  background:conic-gradient(from 40deg at 50% 50%,
    transparent 0deg, rgba(212,175,55,.20) 34deg, transparent 90deg,
    transparent 150deg, rgba(233,200,118,.20) 192deg, transparent 252deg, transparent 360deg);
  filter:blur(52px);opacity:.85}
.bg-nebula::before{opacity:1}
.bg-liquid{opacity:.9}
.bg-rays::before{opacity:.85}

/* ===== GALAXIA v6 · que SE VEA (estructura, no glow) ===== */
/* calmar los glows propios del hero para que domine la galaxia global */
.hero__bg .glow{opacity:.18}
#particles{opacity:.5}

/* núcleo brillante y definido */
.bg-core::before{
  background:radial-gradient(closest-side,
    #f6f5f3 0%,
    rgba(240,219,165,.8) 12%,
    rgba(212,175,55,.55) 30%,
    rgba(168,127,40,.30) 52%,
    transparent 72%);
  filter:blur(10px) saturate(1.2);opacity:1}

/* brazos con bandas perceptibles (menos blur, más alpha) */
.bg-arms::before{
  background:conic-gradient(from 0deg at 50% 50%,
    transparent 0deg, rgba(212,175,55,.50) 22deg, transparent 78deg,
    transparent 116deg, rgba(168,127,40,.44) 150deg, transparent 204deg,
    transparent 248deg, rgba(239,215,156,.48) 284deg, transparent 336deg, transparent 360deg);
  filter:blur(20px);opacity:1;mix-blend-mode:screen}
.bg-arms2::before{
  background:conic-gradient(from 45deg at 50% 50%,
    transparent 0deg, rgba(212,175,55,.34) 30deg, transparent 92deg,
    transparent 152deg, rgba(233,200,118,.34) 194deg, transparent 256deg, transparent 360deg);
  filter:blur(34px);opacity:.9;mix-blend-mode:screen}
.bg-nebula::before{filter:blur(38px);opacity:1}
.bg-liquid{opacity:.95}
.bg-rays::before{opacity:.9}

/* legibilidad: leve viñeta para que el texto respire sobre la galaxia */
.site-bg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 35%, transparent 40%, rgba(8,7,6,.45) 100%)}

/* ===== GALAXIA v7 · nebulosa con textura REAL, marcada ===== */
.bg-neb-svg{width:200%;height:200%;left:-50%;top:-50%;mix-blend-mode:screen;opacity:1;
  filter:blur(1.2px) contrast(1.2) saturate(1.15);
  -webkit-mask:radial-gradient(62% 56% at 60% 38%, #000 22%, rgba(0,0,0,.55) 55%, transparent 84%);
          mask:radial-gradient(62% 56% at 60% 38%, #000 22%, rgba(0,0,0,.55) 55%, transparent 84%);
  animation:nebDriftSvg 120s ease-in-out infinite alternate}
@keyframes nebDriftSvg{0%{transform:scale(1.06) translate3d(0,0,0)}100%{transform:scale(1.24) translate3d(-4%,3%,0)}}

/* núcleo más grande y brillante para anclar la galaxia */
.bg-core::before{
  left:26%;top:6%;width:150vmax;height:150vmax;margin-left:-75vmax;margin-top:-75vmax;
  background:radial-gradient(closest-side,
    #f9f9f8 0%, rgba(242,222,173,.85) 10%, rgba(212,175,55,.6) 26%,
    rgba(168,127,40,.34) 48%, transparent 72%);
  filter:blur(8px) saturate(1.2);opacity:1}

/* viñeta más suave: que NO aplane la textura */
.site-bg::after{background:radial-gradient(130% 100% at 55% 32%, transparent 55%, rgba(8,7,6,.35) 100%)!important}

/* brazos un poco menos borrosos para que se lean como bandas */
.bg-arms::before{filter:blur(16px)!important}
.bg-arms2::before{filter:blur(28px)!important}

/* ============================================================
   HERO v9 — centro de operaciones premium (orbe + device + UI)
   ============================================================ */
.hero{min-height:100vh;display:flex;align-items:center;padding-top:120px;overflow:hidden;position:relative}
.hero__amb{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(50% 45% at 72% 30%, rgba(212,175,55,.18), transparent 60%),
             radial-gradient(40% 40% at 20% 80%, rgba(168,127,40,.14), transparent 65%)}
.hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center}

/* ---- reveal de entrada (gated: corre al pulsar "Entrar") ---- */
.hero-in{opacity:0;animation:heroIn 1s var(--ease) forwards;animation-delay:var(--d,0s);animation-play-state:paused}
@keyframes heroIn{from{opacity:0;filter:blur(12px);transform:translateY(26px)}to{opacity:1;filter:blur(0);transform:none}}
.hero__title .tline{display:block;overflow:hidden;padding:2px 0}
.hero__title .tline>span{display:block;transform:translateY(115%);opacity:0;
  animation:lineUp 1.15s var(--ease) forwards;animation-delay:var(--d,0s);animation-play-state:paused;will-change:transform}
@keyframes lineUp{from{transform:translateY(115%);opacity:0;filter:blur(8px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}
body.entered .hero-in,body.entered .hero__title .tline>span{animation-play-state:running}

/* ---- título con iluminación azul ---- */
.hero__title{font-family:'Sora';font-weight:800;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(2.6rem,6vw,4.6rem);margin-bottom:22px}
.hero__title>span>span{background:linear-gradient(180deg,#ffffff 0%,#eae8e4 55%,#efd89f 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero__title em{font-style:normal;background:linear-gradient(100deg,#d4af37,#e6c266);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(212,175,55,.35))}
.hero__sub{color:#d7cbad;font-size:clamp(1.02rem,1.4vw,1.2rem);max-width:480px;margin-bottom:32px;line-height:1.55}

/* ---- botones nuevos ---- */
.hero__cta{display:flex;gap:16px;flex-wrap:wrap}
.btn-glass{position:relative;display:inline-flex;align-items:center;gap:10px;padding:16px 30px;border-radius:100px;
  font-family:'Sora';font-weight:600;font-size:1rem;color:#f6f5f3;isolation:isolate;overflow:hidden;
  background:linear-gradient(180deg,rgba(231,195,104,.28),rgba(212,175,55,.10));
  border:1px solid rgba(239,215,156,.35);backdrop-filter:blur(12px);
  box-shadow:0 10px 34px -10px rgba(168,127,40,.6),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .3s var(--ease),box-shadow .3s;animation:btnBreath 4s ease-in-out infinite}
.btn-glass::before{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);
  animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%,60%{left:-60%}100%{left:130%}}
@keyframes btnBreath{50%{box-shadow:0 14px 40px -8px rgba(212,175,55,.7),inset 0 1px 0 rgba(255,255,255,.45)}}
.btn-glass:hover{transform:translateY(-3px);box-shadow:0 18px 46px -8px rgba(212,175,55,.85),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-line{display:inline-flex;align-items:center;padding:16px 22px;border-radius:100px;color:#e0d5b9;font-weight:600;font-size:.98rem;
  border:1px solid transparent;transition:color .3s,border-color .3s}
.btn-line::after{content:"→";margin-left:8px;transition:transform .3s var(--ease)}
.btn-line:hover{color:#fff;border-color:rgba(239,215,156,.25)}.btn-line:hover::after{transform:translateX(4px)}

/* ---- STAGE / ORBE ---- */
.hero__stage{position:relative;display:grid;place-items:center;min-height:520px;perspective:1200px}
.orb{position:relative;width:min(440px,80vw);height:min(440px,80vw);transform-style:preserve-3d;
  transform:translate3d(var(--ox,0px),var(--oy,0px),0);transition:transform .5s var(--ease)}
.orb__glow{position:absolute;inset:-18%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(236,209,139,.45),rgba(168,127,40,.18) 55%,transparent 72%);
  filter:blur(24px);animation:orbBreath 6s ease-in-out infinite}
@keyframes orbBreath{50%{opacity:.7;transform:scale(1.08)}}
.orb__ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(236,209,139,.35);transform-style:preserve-3d}
.orb__ring::after{content:"";position:absolute;top:-3px;left:50%;width:7px;height:7px;border-radius:50%;background:#efd89f;box-shadow:0 0 14px #d4af37}
.ring1{transform:rotateX(74deg) rotateZ(0deg);animation:spinZ 18s linear infinite}
.ring2{inset:8%;border-color:rgba(212,175,55,.28);transform:rotateX(66deg) rotateY(24deg);animation:spinZ 26s linear infinite reverse}
.ring3{inset:-10%;border-color:rgba(231,195,104,.2);transform:rotateX(80deg) rotateZ(40deg);animation:spinZ 34s linear infinite}
@keyframes spinZ{to{transform:rotateX(74deg) rotateZ(360deg)}}
.orb__spark{position:absolute;width:5px;height:5px;border-radius:50%;background:#e3e1db;box-shadow:0 0 12px #d4af37;top:50%;left:50%}
.s1{animation:orbit1 12s linear infinite}.s2{animation:orbit2 17s linear infinite}.s3{animation:orbit1 22s linear infinite reverse}.s4{animation:orbit2 9s linear infinite reverse}
@keyframes orbit1{from{transform:rotate(0) translateX(210px) rotate(0)}to{transform:rotate(360deg) translateX(210px) rotate(-360deg)}}
@keyframes orbit2{from{transform:rotate(60deg) translateX(160px) rotate(0)}to{transform:rotate(420deg) translateX(160px) rotate(-360deg)}}

/* ---- DEVICE premium ---- */
.device{position:absolute;top:50%;left:50%;width:230px;height:470px;margin:-235px 0 0 -115px;z-index:3;
  transform-style:preserve-3d;
  transform:perspective(1100px) rotateY(var(--ry,-14deg)) rotateX(var(--rx,6deg));
  transition:transform .4s var(--ease)}
.device__frame{position:absolute;inset:0;border-radius:38px;padding:9px;
  background:linear-gradient(155deg,#ab9253 0%,#3d341e 22%,#12110e 55%,#4d4225 100%);
  box-shadow:0 40px 90px -24px rgba(0,0,0,.85),0 0 0 1px rgba(240,219,165,.18),
    inset 0 0 0 2px rgba(212,175,55,.12),inset 0 2px 6px rgba(255,255,255,.15);
  animation:devFloat 7s ease-in-out infinite}
@keyframes devFloat{50%{transform:translateY(-16px)}}
.device__island{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:78px;height:20px;border-radius:14px;background:#0a0908;z-index:4;box-shadow:inset 0 0 0 1px rgba(212,175,55,.2)}
.device__screen{position:absolute;inset:9px;border-radius:30px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,#272520,#0e0e0c 60%);
  box-shadow:inset 0 0 40px rgba(0,0,0,.6)}
.device__sheen{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.14) 45%,transparent 60%);
  transform:translateX(-30%);animation:sheen 6s ease-in-out infinite}
@keyframes sheen{0%,70%{transform:translateX(-60%)}100%{transform:translateX(120%)}}

/* ---- UI interna ---- */
.ui{position:absolute;inset:0;padding:38px 16px 16px;display:flex;flex-direction:column;gap:12px;color:#e6e4de;font-size:11px}
.ui__top{display:flex;align-items:center;gap:7px}
.ui__dot{width:7px;height:7px;border-radius:50%;background:#d4af37;box-shadow:0 0 8px #d4af37;animation:pulse 2s infinite}
.ui__title{font-weight:600;letter-spacing:.02em;color:#f6f5f3;font-family:'Sora'}
.ui__live{margin-left:auto;font-size:8px;font-weight:700;letter-spacing:.12em;color:#d4af37;border:1px solid rgba(212,175,55,.4);border-radius:6px;padding:2px 6px}
.ui__ring{position:relative;width:118px;height:118px;margin:6px auto 2px}
.ui__ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ui__track{fill:none;stroke:rgba(212,175,55,.16);stroke-width:8}
.ui__prog{fill:none;stroke:url(#ldGrad);stroke-width:8;stroke-linecap:round;stroke-dasharray:301;stroke-dashoffset:301;
  animation:ringFill 2.4s var(--ease) forwards .4s;filter:drop-shadow(0 0 6px rgba(212,175,55,.6))}
@keyframes ringFill{to{stroke-dashoffset:6}}
.ui__ringval{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ui__ringval b{font-family:'Sora';font-size:26px;color:#fff;line-height:1}
.ui__ringval span{font-size:9px;color:#c9b88e;letter-spacing:.1em;text-transform:uppercase}
.ui__bars{display:flex;align-items:flex-end;gap:5px;height:40px;padding:0 4px}
.ui__bars span{flex:1;height:var(--h);border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#d4af37,#a87f28);opacity:.85;
  animation:barPulse 3s ease-in-out infinite;transform-origin:bottom}
.ui__bars span:nth-child(2n){animation-delay:.4s}.ui__bars span:nth-child(3n){animation-delay:.8s}
@keyframes barPulse{50%{transform:scaleY(.72)}}
.ui__rows{display:grid;gap:7px;margin-top:2px}
.ui__row{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;border-radius:9px;
  background:rgba(212,175,55,.08);border:1px solid rgba(212,175,55,.12)}
.ui__row span{color:#d4c59f}.ui__row b{color:#7ff0d0;font-weight:600;font-size:10px}
.ui__row b{color:#e8c875}

/* ---- indicador scroll: cápsula con luz que baja ---- */
.scroll-cap{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:3;
  width:26px;height:44px;border-radius:16px;border:1px solid rgba(239,215,156,.4);display:block;
  background:rgba(20,19,16,.35);backdrop-filter:blur(4px)}
.scroll-cap span{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:5px;height:9px;border-radius:4px;
  background:#d4af37;box-shadow:0 0 12px #d4af37;animation:capDrop 1.8s ease-in-out infinite}
@keyframes capDrop{0%{top:8px;opacity:0}25%{opacity:1}75%{opacity:1}100%{top:28px;opacity:0}}

/* neutralizar restos del hero viejo */
.hero__visual,.phone-float,.grid-lines,#particles{display:none!important}

/* ---- RESPONSIVE: recomposición móvil ---- */
@media(max-width:960px){
  .hero{padding-top:110px;text-align:center}
  .hero__grid{grid-template-columns:1fr;gap:24px}
  .hero__stage{grid-row:1;min-height:340px}
  .hero__sub{margin-inline:auto}
  .hero__cta{justify-content:center}
  .hero__title{font-size:clamp(2.3rem,9vw,3.4rem)}
  .orb{width:min(320px,78vw);height:min(320px,78vw)}
  .device{width:180px;height:368px;margin:-184px 0 0 -90px}
  .s1,.s3{animation-name:orbit1}
}
@media(max-width:560px){
  .hero__cta{flex-direction:column}
  .btn-glass,.btn-line{width:100%;justify-content:center}
  .orb{width:min(280px,82vw);height:min(280px,82vw)}
  .device{width:158px;height:322px;margin:-161px 0 0 -79px}
  .device__frame{border-radius:30px}
  .orb__spark{display:none}
}
@media(prefers-reduced-motion:reduce){
  .btn-glass,.btn-glass::before,.orb__glow,.ring1,.ring2,.ring3,.orb__spark,.device__frame,.device__sheen,.ui__bars span,.scroll-cap span{animation:none}
}

/* ============================================================
   CURSOR FUTURISTA GLOBAL
   ============================================================ */
.has-cursor,.has-cursor a,.has-cursor button,.has-cursor .cat-tab,.has-cursor summary,.has-cursor .gal-item{cursor:none}
.has-cursor input,.has-cursor textarea,.has-cursor select{cursor:none}
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:99999;border-radius:50%;
  mix-blend-mode:screen;will-change:transform}
.cursor-dot{width:7px;height:7px;background:#efd89f;box-shadow:0 0 12px #d4af37,0 0 26px rgba(212,175,55,.7);
  transition:width .2s var(--ease),height .2s var(--ease),background .2s}
.cursor-ring{width:38px;height:38px;border:1.5px solid rgba(236,209,139,.7);
  box-shadow:0 0 18px rgba(212,175,55,.35),inset 0 0 12px rgba(212,175,55,.2);
  transition:width .28s var(--ease),height .28s var(--ease),border-color .28s,background .28s,opacity .28s}
.cursor-ring::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(212,175,55,.18);
  animation:curSpin 6s linear infinite}
@keyframes curSpin{to{transform:rotate(360deg)}}
/* hover en interactivos: anillo crece y se llena, dot se agranda */
.cursor-hot .cursor-ring{width:60px;height:60px;border-color:rgba(212,175,55,.9);background:rgba(212,175,55,.10)}
.cursor-hot .cursor-dot{width:10px;height:10px;background:#f6f5f3}
/* click: contrae */
.cursor-down .cursor-ring{width:26px;height:26px;border-color:#d4af37}
.cursor-down .cursor-dot{width:5px;height:5px}
/* sobre campos de texto: anillo se afina a cursor tipo caret */
.cursor-text .cursor-ring{width:4px;height:30px;border-radius:3px;border-color:rgba(236,209,139,.8);background:rgba(212,175,55,.15)}
.cursor-text .cursor-ring::after{display:none}

/* ============================================================
   HERO v10 — título cinematográfico + device dominante
   ============================================================ */
/* ---- TÍTULO: barra de luz + mask reveal + blur→foco + reflejo en reposo ---- */
.hero__title{position:relative}
.hero__title .tline{display:block;overflow:hidden;position:relative;padding:2px 0}
.hero__title .tline>span{display:block;color:transparent;
  background:
    linear-gradient(105deg,transparent 44%,rgba(255,255,255,.9) 50%,transparent 56%),
    linear-gradient(180deg,#ffffff 0%,#eae8e4 55%,#efd89f 100%);
  background-size:250% 100%,100% 100%;
  background-position:160% 0,0 0;
  -webkit-background-clip:text;background-clip:text;
  transform:translateY(112%);filter:blur(10px);opacity:0;will-change:transform,filter;
  animation:titleReveal 1.15s var(--ease) forwards,titleRest 8s ease-in-out 3.2s infinite;
  animation-play-state:paused,paused}
.hero__title .tline>span em{font-style:normal;-webkit-text-fill-color:transparent;
  background:linear-gradient(100deg,#d4af37,#e6c266);-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 22px rgba(212,175,55,.35))}
@keyframes titleReveal{
  0%{transform:translateY(112%);filter:blur(10px);opacity:0}
  55%{opacity:1;filter:blur(4px)}
  100%{transform:translateY(0);filter:blur(0);opacity:1}}
/* reflejo en reposo: pasa la luz del núcleo sobre las letras (<1s cada ciclo) */
@keyframes titleRest{0%,86%{background-position:160% 0,0 0}93%{background-position:-40% 0,0 0}100%{background-position:-40% 0,0 0}}
/* barra de luz que recorre cada línea al construirla */
.hero__title .tline::before{content:"";position:absolute;top:0;bottom:0;left:-120px;width:90px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(242,222,173,.95),transparent);filter:blur(7px);mix-blend-mode:screen;opacity:0;
  animation:titleSweep 1.15s var(--ease) forwards;animation-play-state:paused}
@keyframes titleSweep{0%{left:-120px;opacity:0}12%{opacity:1}80%{opacity:1}100%{left:100%;opacity:0}}
body.entered .hero__title .tline>span{animation-play-state:running,running}
body.entered .hero__title .tline::before{animation-play-state:running}
/* override viejo v9 */

/* ---- DEVICE dominante (+~25%) + ángulo 3D ---- */
.hero__stage{min-height:600px}
.orb{width:min(540px,88vw);height:min(540px,88vw)}
.device{width:290px;height:590px;margin:-295px 0 0 -145px;
  transform:perspective(1300px) rotateY(var(--ry,-17deg)) rotateX(var(--rx,7deg)) rotateZ(-1.5deg)}
.device__frame{border-radius:46px;
  box-shadow:0 60px 120px -30px rgba(0,0,0,.9),0 0 0 1px rgba(240,219,165,.22),
    0 0 60px -6px rgba(212,175,55,.35),
    inset 0 0 0 2px rgba(212,175,55,.14),inset 0 3px 8px rgba(255,255,255,.18)}
.device__screen{border-radius:37px}
/* halo/sombra suave bajo el device para separarlo del fondo */
.device::after{content:"";position:absolute;left:50%;bottom:-6%;width:70%;height:9%;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent 75%);filter:blur(14px);z-index:-1}

/* ---- NÚCLEO de energía detrás del device (estructura, no glow simple) ---- */
.orb__core{position:absolute;top:50%;left:50%;width:78%;height:78%;transform:translate(-50%,-50%);border-radius:50%;
  background:
    radial-gradient(closest-side,rgba(231,229,224,.55),rgba(212,175,55,.22) 42%,transparent 66%),
    conic-gradient(from 0deg,rgba(212,175,55,.0),rgba(212,175,55,.28),rgba(168,127,40,.05),rgba(236,209,139,.30),rgba(212,175,55,0));
  filter:blur(18px);mix-blend-mode:screen;opacity:.9;
  animation:coreSpin 40s linear infinite,corePulse 6s ease-in-out infinite}
@keyframes coreSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes corePulse{50%{opacity:.6;filter:blur(24px)}}

/* ---- fragmentos: unos detrás (default) y otros por delante del device ---- */
.orb__spark.front{z-index:5;width:6px;height:6px;background:#f1f0ed;box-shadow:0 0 16px #d4af37}
.f1{animation:orbit2 10s linear infinite}
.f2{animation:orbit1 15s linear infinite reverse}
.f3{animation:orbit2 20s linear infinite}

@media(max-width:960px){
  .hero__stage{min-height:400px}
  .orb{width:min(360px,80vw);height:min(360px,80vw)}
  .device{width:210px;height:428px;margin:-214px 0 0 -105px}
}
@media(max-width:560px){
  .orb{width:min(300px,84vw);height:min(300px,84vw)}
  .device{width:176px;height:358px;margin:-179px 0 0 -88px}
  .orb__spark.front{display:none}
}

/* ============================================================
   HERO v13 — título: animación en REPOSO (vida continua)
   ============================================================ */
/* palabras cyan: energía líquida fluyendo + glow que late */
.hero__title .tline>span em{
  background:linear-gradient(100deg,#d4af37 0%,#f1dca8 25%,#e6c266 50%,#d4af37 75%,#f1dca8 100%);
  background-size:230% 100%;background-position:0 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:emFlow 7s linear infinite,emGlow 4.5s ease-in-out infinite;
  animation-play-state:paused,paused}
@keyframes emFlow{to{background-position:230% 0}}
@keyframes emGlow{0%,100%{filter:drop-shadow(0 0 12px rgba(212,175,55,.28))}50%{filter:drop-shadow(0 0 26px rgba(212,175,55,.6))}}
body.entered .hero__title .tline>span em{animation-play-state:running,running}

/* cada línea flota muy suave, desincronizada (arranca tras el revelado) */
.hero__title .tline{animation:lineFloat 7s ease-in-out 2.1s infinite;animation-play-state:paused}
.hero__title .tline:nth-child(2){animation-duration:8.6s;animation-delay:2.4s}
.hero__title .tline:nth-child(3){animation-duration:6.3s;animation-delay:2.7s}
@keyframes lineFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
body.entered .hero__title .tline{animation-play-state:running}

/* ============================================================
   CARDS v14 — hover: borde neón giratorio + aura de destellos
   ============================================================ */
@property --na{syntax:'<angle>';inherits:false;initial-value:0deg}

.card,.cat-card{position:relative}
/* borde neón (conic) — reemplaza el borde previo */
.card::before,.cat-card::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;padding:1.5px;z-index:1;
  background:conic-gradient(from var(--na),#d4af37,#a87f28,#d4af37,#d4af37,#a87f28,#d4af37);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .35s var(--ease);pointer-events:none;
  filter:drop-shadow(0 0 6px rgba(212,175,55,.7)) drop-shadow(0 0 14px rgba(168,127,40,.5))}
.card:hover::before,.cat-card:hover::before{opacity:1;animation:neonSpin 3.4s linear infinite}
@keyframes neonSpin{to{--na:360deg}}

/* aura de destellos que late alrededor de la card */
.card:hover,.cat-card:hover{border-color:transparent;animation:cardAura 2.4s ease-in-out infinite}
@keyframes cardAura{
  0%,100%{box-shadow:0 0 0 1px rgba(212,175,55,.35),0 0 22px -2px rgba(212,175,55,.30),0 0 60px -12px rgba(168,127,40,.5)}
  50%{box-shadow:0 0 0 1px rgba(212,175,55,.7),0 0 40px 0 rgba(212,175,55,.55),0 0 100px -8px rgba(168,127,40,.8)}}

/* chispas: puntos de energía que orbitan al hacer hover */
.card::after,.cat-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;transition:opacity .35s;
  background:
    radial-gradient(circle 2px at 12% 18%, #e3e1db 60%, transparent),
    radial-gradient(circle 1.5px at 88% 26%, #d4af37 60%, transparent),
    radial-gradient(circle 2px at 78% 82%, #f6f5f3 60%, transparent),
    radial-gradient(circle 1.5px at 20% 78%, #d4af37 60%, transparent),
    radial-gradient(circle 1.5px at 50% 8%, #f1dca8 60%, transparent)}
.card:hover::after,.cat-card:hover::after{opacity:1;animation:sparkTwinkle 1.8s ease-in-out infinite}
@keyframes sparkTwinkle{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.03)}}

/* ============================================================
   CARDS v15 — línea delgada neón que viaja alrededor (cometa)
   ============================================================ */
.card::before,.cat-card::before{inset:-1px;padding:1.3px;
  background:conic-gradient(from var(--na),
    transparent 0deg 232deg,
    rgba(232,198,113,.15) 250deg,
    #e8c671 292deg,
    #d4af37 326deg,
    #f6f5f3 344deg,
    #d4af37 353deg,
    transparent 360deg);
  filter:drop-shadow(0 0 5px rgba(212,175,55,.9)) drop-shadow(0 0 12px rgba(168,127,40,.6))}
.card:hover::before,.cat-card:hover::before{opacity:1;animation:neonSpin 2.6s linear infinite}

/* CARDS v16 — línea neón más gruesa y visible */
.card::before,.cat-card::before{inset:-1.5px;padding:2.5px;
  background:conic-gradient(from var(--na),
    transparent 0deg 210deg,
    rgba(232,198,113,.2) 232deg,
    #e8c671 274deg,
    #d4af37 312deg,
    #f6f5f3 338deg,
    #d4af37 352deg,
    transparent 360deg);
  filter:drop-shadow(0 0 7px rgba(212,175,55,1)) drop-shadow(0 0 16px rgba(168,127,40,.7))}

/* CARDS v17 — anillo neón completo, brillante y grueso (con fallback) */
.card::before,.cat-card::before{inset:-2px;padding:3px;
  background:linear-gradient(120deg,#d4af37,#a87f28);           /* fallback visible */
  background:conic-gradient(from var(--na),
    #d4af37,#e8c671,#d4af37,#f6f5f3,#d4af37,#a87f28,#d4af37);   /* anillo giratorio */
  filter:drop-shadow(0 0 6px rgba(212,175,55,.95)) drop-shadow(0 0 16px rgba(168,127,40,.7));
  opacity:0;transition:opacity .3s var(--ease)}
.card:hover::before,.cat-card:hover::before{opacity:1;animation:neonSpin 3s linear infinite}

/* ============================================================
   BENEFICIOS v18 — franja infinita premium
   ============================================================ */
.beneficios-band{padding:clamp(60px,8vw,90px) 0;position:relative}
.bene-band{overflow:hidden;padding:26px 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.bene-track{display:flex;gap:26px;width:max-content;animation:beneScroll 32s linear infinite;will-change:transform}
.bene-band:hover .bene-track{animation-play-state:paused}
@keyframes beneScroll{to{transform:translate3d(-50%,0,0)}}

.bene-card{flex:0 0 330px;position:relative;border-radius:24px;padding:34px 30px;isolation:isolate;
  background:linear-gradient(160deg,rgba(39,37,32,.6),rgba(21,20,17,.5));
  border:1px solid rgba(236,209,139,.16);backdrop-filter:blur(14px);
  box-shadow:0 22px 50px -22px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .4s var(--ease),box-shadow .4s,border-color .4s}
/* reflejo superior */
.bene-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 40%)}
/* halo azul suave bajo algunas cards */
.bene-card:nth-child(odd)::after{content:"";position:absolute;left:50%;bottom:-24px;width:70%;height:40px;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(212,175,55,.35),transparent 75%);filter:blur(14px);z-index:-1;opacity:.5}
.bene-card:hover{transform:translateY(-8px) scale(1.04);border-color:rgba(212,175,55,.5);
  box-shadow:0 30px 60px -20px rgba(168,127,40,.5),0 0 40px -6px rgba(212,175,55,.4),inset 0 1px 0 rgba(255,255,255,.14)}
.bene-ico{display:inline-grid;place-items:center;width:54px;height:54px;border-radius:15px;margin-bottom:18px;
  background:radial-gradient(circle at 30% 25%,rgba(212,175,55,.22),rgba(168,127,40,.08));
  border:1px solid rgba(212,175,55,.28)}
.bene-ico svg{width:26px;height:26px;fill:none;stroke:#e8c875;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 5px rgba(212,175,55,.5));animation:icoShimmer 5s ease-in-out infinite}
@keyframes icoShimmer{0%,92%,100%{stroke:#e8c875;filter:drop-shadow(0 0 5px rgba(212,175,55,.5))}96%{stroke:#f6f5f3;filter:drop-shadow(0 0 12px rgba(212,175,55,.9))}}
.bene-card:nth-child(2) .bene-ico svg{animation-delay:1.2s}
.bene-card:nth-child(3) .bene-ico svg{animation-delay:2.4s}
.bene-card:nth-child(4) .bene-ico svg{animation-delay:3.6s}
.bene-card h3{font-size:1.2rem;margin-bottom:9px}
.bene-card p{color:var(--muted);font-size:.94rem;line-height:1.5}

@media(max-width:560px){
  .bene-card{flex:0 0 260px;padding:26px 22px}
  .bene-track{gap:18px;animation-duration:26s}
}
@media(prefers-reduced-motion:reduce){.bene-track{animation:none}.bene-ico svg{animation:none}}

/* WhatsApp: logo imagen en vez de svg */
.btn--wa img.ico-wa{width:20px;height:20px;object-fit:contain}
.wa-fab{background:transparent;box-shadow:0 12px 30px -6px rgba(31,190,91,.7)}
.wa-fab img{width:100%;height:100%;object-fit:contain;border-radius:50%}
.wa-fab::after{border-color:#25d366}

/* Logo empresa (imagen) */
.brand__logo{height:38px;width:auto;display:block;filter:drop-shadow(0 0 10px rgba(212,175,55,.25))}
.header.scrolled .brand__logo{height:32px;transition:height .35s var(--ease)}
.brand--footer .brand__logo{height:42px}
@media(max-width:560px){.brand__logo{height:32px}}

/* Logo empresa — tamaño corregido (más grande) */
.brand__logo{height:60px!important}
.header.scrolled .brand__logo{height:48px!important}
.brand--footer .brand__logo{height:64px!important}
@media(max-width:560px){.brand__logo{height:46px!important}.header.scrolled .brand__logo{height:40px!important}}

/* Loader: logo imagen con revelado glow */
.loader__img{width:min(240px,64vw);height:auto;opacity:0;transform:scale(.9);
  filter:drop-shadow(0 0 24px rgba(212,175,55,.5));
  animation:loaderLogoIn 1.2s var(--ease) forwards}
@keyframes loaderLogoIn{0%{opacity:0;transform:scale(.9);filter:blur(8px) drop-shadow(0 0 24px rgba(212,175,55,.5))}
  60%{opacity:1;filter:blur(0) drop-shadow(0 0 30px rgba(212,175,55,.7))}
  100%{opacity:1;transform:scale(1);filter:blur(0) drop-shadow(0 0 20px rgba(212,175,55,.4))}}

/* Logo empresa — más grande y visible (v25) */
.brand__logo{height:92px!important}
.header{padding:8px 0}
.header.scrolled .brand__logo{height:72px!important}
.brand--footer .brand__logo{height:104px!important}
@media(max-width:560px){.brand__logo{height:64px!important}.header.scrolled .brand__logo{height:56px!important}}

/* Logo header aún más grande (v26) */
.brand__logo{height:120px!important}
.header.scrolled .brand__logo{height:96px!important}
@media(max-width:560px){.brand__logo{height:74px!important}.header.scrolled .brand__logo{height:64px!important}}

/* ============================================================
   REFINAMIENTO PREMIUM v27 — profundidad, bloques y jerarquía
   (referencia: laboratorio tech de alta gama, secciones como
   paneles independientes, iconografía outline azul consistente)
   ============================================================ */

/* --- Secciones como BLOQUES independientes (panel oscuro flotante) --- */
#servicios>.container,
.proceso>.container,
#trabajos>.container,
#accesorios>.container,
#resenas>.container,
#faq>.container,
#presupuesto>.container,
#contacto>.container,
#porque>.container{
  position:relative;
  padding:clamp(34px,5vw,64px);
  border-radius:30px;
  background:linear-gradient(180deg,rgba(26,25,21,.62),rgba(15,15,13,.42));
  border:1px solid rgba(212,175,55,.14);
  backdrop-filter:blur(10px);
  box-shadow:
    0 40px 100px -50px rgba(0,0,0,.85),
    0 0 60px -30px rgba(212,175,55,.28),
    inset 0 1px 0 rgba(255,255,255,.05);
}
/* glow azul extremadamente sutil en el borde superior del bloque */
#servicios>.container::after,
.proceso>.container::after,
#trabajos>.container::after,
#accesorios>.container::after,
#resenas>.container::after,
#faq>.container::after,
#presupuesto>.container::after,
#contacto>.container::after,
#porque>.container::after{
  content:"";position:absolute;top:-1px;left:12%;right:12%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(212,175,55,.5),transparent);
}
/* el divisor de circuito estorba sobre los paneles: lo apagamos donde hay bloque */
#servicios::before,.proceso::before,#trabajos::before,#accesorios::before,
#resenas::before,#faq::before,#presupuesto::before,#contacto::before,#porque::before{display:none}

@media(max-width:560px){
  #servicios>.container,.proceso>.container,#trabajos>.container,#accesorios>.container,
  #resenas>.container,#faq>.container,#presupuesto>.container,#contacto>.container,#porque>.container{
    padding:26px 18px;border-radius:22px}
}

/* --- Iconografía servicios: tile azul con icono outline (consistente con beneficios) --- */
.srv__ico{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:17px;
  font-size:0;margin-bottom:18px;
  background:radial-gradient(circle at 30% 25%,rgba(212,175,55,.22),rgba(168,127,40,.08));
  border:1px solid rgba(212,175,55,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 22px -12px rgba(212,175,55,.5);
  transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.srv__ico svg{width:28px;height:28px;fill:none;stroke:#e8c875;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px rgba(212,175,55,.5))}
.card:hover .srv__ico{transform:translateY(-3px) scale(1.06);border-color:rgba(212,175,55,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 30px -10px rgba(212,175,55,.7)}

/* --- Estadísticas como tarjetas individuales --- */
.stats{gap:16px;border-top:0;padding-top:8px}
.stat{flex:1;min-width:130px;text-align:center;padding:22px 18px;border-radius:20px;
  background:linear-gradient(160deg,rgba(39,37,32,.55),rgba(21,20,17,.4));
  border:1px solid rgba(212,175,55,.16);
  box-shadow:0 20px 44px -26px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.stat:hover{transform:translateY(-5px);border-color:rgba(212,175,55,.45);
  box-shadow:0 28px 56px -24px rgba(168,127,40,.5),0 0 34px -10px rgba(212,175,55,.4)}
.stat b{font-family:'Sora';font-size:clamp(2rem,3.4vw,2.6rem);line-height:1;display:block;margin-bottom:6px;
  background:linear-gradient(180deg,#ffffff,#efd89f);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:.8rem;color:var(--muted);letter-spacing:.02em}

/* --- Marcas: cada logo en tarjeta premium (sin fondo blanco) --- */
.marcas__label{font-size:.78rem;letter-spacing:.16em}
.marquee__track{gap:16px;align-items:center}
.marquee__track span{font-size:1.05rem;font-weight:600;color:rgba(227,224,218,.62);
  padding:13px 26px;border-radius:16px;letter-spacing:.01em;
  background:linear-gradient(160deg,rgba(33,31,27,.55),rgba(21,20,17,.4));
  border:1px solid rgba(212,175,55,.16);backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:color .3s,border-color .3s,box-shadow .3s,transform .3s}
.marquee__track span:hover{color:#f6f5f3;border-color:rgba(212,175,55,.5);transform:translateY(-2px);
  box-shadow:0 14px 30px -16px rgba(212,175,55,.6),inset 0 1px 0 rgba(255,255,255,.1)}

/* --- Por qué: más protagonismo del media con halo de luz detrás --- */
.porque__media{position:relative}
.porque__media::before{content:"";position:absolute;inset:-14% -8%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(212,175,55,.28),rgba(168,127,40,.12) 55%,transparent 74%);
  filter:blur(30px);opacity:.8}
.porque__copy .lead{font-size:1.12rem;line-height:1.6}
.checklist li{font-size:1.02rem}

/* --- Proceso: pasos con más aire y número que reacciona --- */
.step__n{transition:transform .35s var(--ease),box-shadow .35s}
.step:hover .step__n{transform:translateY(-4px) scale(1.06);
  box-shadow:0 0 34px -4px rgba(212,175,55,.7)}

/* --- FAQ: acordeones con más padding y hover elegante --- */
.accordion summary{padding:20px 24px}
.accordion p{padding:0 24px 22px}
.accordion details{transition:border-color .3s,background .3s}
.accordion details:hover{border-color:rgba(212,175,55,.3);background:rgba(31,29,25,.6)}

/* --- Testimonios: un poco más de aire y jerarquía --- */
.testi__card{padding:30px}
.testi__card p{font-size:1rem;line-height:1.6;color:#e1dfd8}
.avatar{box-shadow:0 8px 20px -8px rgba(0,0,0,.6)}

/* --- Contacto: WhatsApp CTA más protagónico --- */
.contacto__info .btn--big{margin-top:6px;box-shadow:0 0 0 1px rgba(212,175,55,.4),0 16px 40px -10px rgba(31,190,91,.7)}
.contacto__map{box-shadow:0 40px 90px -50px rgba(0,0,0,.85),0 0 50px -26px rgba(212,175,55,.3)}

/* --- Header CTA WhatsApp como acción principal --- */
.header__cta{font-weight:700;box-shadow:0 10px 26px -10px rgba(31,190,91,.8),0 0 0 1px rgba(212,175,55,.18)}
.header__cta:hover{box-shadow:0 14px 34px -8px rgba(31,190,91,.95),0 0 0 1px rgba(212,175,55,.35)}

/* --- Section heads: jerarquía tipográfica más marcada --- */
.sec-head h2{font-size:clamp(1.9rem,3.9vw,2.9rem);letter-spacing:-.025em}
.sec-head p{font-size:1.06rem;line-height:1.6}

/* --- CTA final: bloque con más presencia --- */
.cta-final__box{box-shadow:0 50px 120px -50px rgba(0,0,0,.9),0 0 80px -30px rgba(212,175,55,.45)}

@media(prefers-reduced-motion:reduce){
  .srv__ico,.stat,.marquee__track span,.step__n{transition:none}
}

/* ============================================================
   FONDO v28 — azul continuo único + partículas (canvas global)
   Adiós galaxia. Adiós paneles negros por sección.
   Un solo lienzo azul de arriba a abajo. Secciones transparentes.
   ============================================================ */

/* lienzo azul continuo: profundo → un poco más claro al centro → profundo */
body{background:#191815!important}
.site-bg{position:fixed!important;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:linear-gradient(180deg,#13120f 0%,#47360b 46%,#53400e 54%,#201e1a 78%,#13120f 100%)!important}
.site-bg::after,.site-bg::before{display:none!important}
#bgParticles{position:absolute;inset:0;width:100%;height:100%;display:block}

/* mata cualquier resto de la galaxia anterior */
.bg-void,.bg-layer,.bg-core,.bg-arms,.bg-arms2,.bg-nebula,.bg-neb-svg,
.bg-rays,.bg-frag,.bg-frag2,.bg-noise{display:none!important}

/* --- Secciones 100% transparentes (sin bloques de fondo) --- */
#servicios>.container,.proceso>.container,#trabajos>.container,#accesorios>.container,
#resenas>.container,#faq>.container,#presupuesto>.container,#contacto>.container,#porque>.container{
  background:none!important;border:0!important;box-shadow:none!important;
  backdrop-filter:none!important;padding-left:0!important;padding-right:0!important;
  padding-top:0!important;padding-bottom:0!important;border-radius:0!important}
#servicios>.container::after,.proceso>.container::after,#trabajos>.container::after,
#accesorios>.container::after,#resenas>.container::after,#faq>.container::after,
#presupuesto>.container::after,#contacto>.container::after,#porque>.container::after{display:none!important}

/* divisores entre secciones fuera: fondo sin cortes */
.section+.section::before,.hero+.section::before{display:none!important}

/* marcas y footer: sin fondo propio, solo transparencia sobre el azul */
.marcas{background:none!important;border-block-color:rgba(212,175,55,.14)!important}
.footer{background:none!important}
.footer::before{display:none!important}

/* hero: sin fondo independiente, las partículas se ven detrás del render */
.hero__amb{display:none!important}
.hero__bg,.glow--1,.glow--2{display:none!important}

/* --- CARDS: glass azul oscuro sutil que resalta sobre el fondo --- */
.card,.cat-card,.bene-card,.testi__card,.form,
.accordion details,.porque__badge,.pill,.rating-badge{
  background:linear-gradient(160deg,rgba(35,33,29,.58),rgba(23,21,18,.46))!important;
  border:1px solid rgba(212,175,55,.16)!important;
  backdrop-filter:blur(9px)!important;
  border-radius:18px;
  box-shadow:0 18px 44px -26px rgba(105,80,17,.6),0 0 0 1px rgba(212,175,55,.06),0 0 34px -14px rgba(212,175,55,.28),inset 0 1px 0 rgba(255,255,255,.05)!important}
.card{border-radius:18px}
.cat-card{border-radius:18px;overflow:hidden}

/* campos del formulario: mismo idioma glass */
.field input,.field select,.field textarea{
  background:rgba(20,19,16,.55)!important;border:1px solid rgba(212,175,55,.16)!important}

/* mapa y bloques destacados: integrados al azul */
.contacto__map{background:rgba(24,23,20,.4)!important}
.cta-final__box{background:linear-gradient(160deg,rgba(160,123,30,.28),rgba(212,175,55,.06)),rgba(28,26,22,.5)!important}
.resenas__box{background:linear-gradient(160deg,rgba(160,123,30,.22),rgba(212,175,55,.05)),rgba(28,26,22,.5)!important}

/* porque frame: cristal azul, mantiene la rejilla técnica sutil */
.porque__frame{background:linear-gradient(160deg,rgba(58,46,14,.55),rgba(23,21,18,.45))!important}

@media(prefers-reduced-motion:reduce){#bgParticles{opacity:.7}}

/* ============================================================
   HEADER v29 — compacto, glass, equilibrado (tech premium)
   Altura fija ~72px · logo horizontal · nav centrado
   ============================================================ */

/* contenedor: altura fija, glass siempre, borde inferior sutil */
.header{padding:0!important;height:72px!important;display:flex;align-items:center;
  background:rgba(19,18,15,.55)!important;backdrop-filter:blur(14px)!important;
  border-bottom:1px solid rgba(212,175,55,.12)!important;
  transition:background .35s var(--ease),border-color .35s!important}
.header.scrolled{padding:0!important;height:72px!important;
  background:rgba(18,17,14,.74)!important;border-bottom-color:rgba(212,175,55,.16)!important}
/* la línea de luz cian inferior: mantener pero muy discreta */
.header.scrolled::after{opacity:.35}

/* ancho máx 1300 con aire lateral */
.header>.container{width:min(100% - 48px,1300px)}
.header__inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:24px;height:100%;width:100%}

/* logo: espacio para versión horizontal, presencia sin dominar */
.brand{justify-self:start}
.brand__logo{height:66px!important;width:auto!important;max-width:340px;
  filter:drop-shadow(0 0 8px rgba(212,175,55,.22))}
.header.scrolled .brand__logo{height:66px!important}

/* navegación: centrada en el espacio disponible, separación equilibrada */
.nav{margin:0!important;justify-self:center;display:flex;gap:22px;
  font-size:15px;font-weight:500;letter-spacing:.005em}
.nav a{color:rgba(243,242,240,.82);transition:color .25s var(--ease)}
.nav a:hover{color:var(--cyan)}
.nav a::after{height:2px;bottom:-6px;background:var(--cyan);
  box-shadow:0 0 8px rgba(212,175,55,.6)}

/* hamburguesa a la derecha (mobile) */
.hamb{justify-self:end;margin:0!important}

@media(max-width:560px){
  .header,.header.scrolled{height:64px!important}
  .brand__logo,.header.scrolled .brand__logo{height:52px!important;max-width:230px}
}

/* ============================================================
   HERO SCENE v31 — dos smartphones flotantes (render premium)
   trasera + pantalla · glow azul · haces de luz · parallax
   ============================================================ */
.hero__stage{perspective:1500px}
.scene{position:relative;width:min(560px,94%);height:600px;margin-inline:auto;
  transform-style:preserve-3d}

/* --- iluminación ambiental detrás --- */
.scene__halo{position:absolute;inset:8% 6%;border-radius:50%;z-index:0;
  background:radial-gradient(closest-side,rgba(212,175,55,.30),rgba(168,127,40,.13) 55%,transparent 75%);
  filter:blur(34px);animation:haloBreath 7.5s ease-in-out infinite}
@keyframes haloBreath{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}

/* --- haces de luz diagonales (no compiten con los teléfonos) --- */
/* haces neón en V (como la referencia): dos brazos brillantes que
   nacen abajo-centro y suben abiertos, + un destello suave de apoyo */
.scene__beam{position:absolute;z-index:1;pointer-events:none;mix-blend-mode:screen;
  transform-origin:50% 100%;border-radius:40px}
.scene__beam.b1{left:34%;bottom:6%;width:26px;height:78%;
  background:linear-gradient(180deg,transparent,rgba(232,198,113,.7) 40%,rgba(223,220,212,.9));
  filter:blur(4px);transform:rotate(28deg);animation:beamGlow 6.5s ease-in-out infinite}
.scene__beam.b2{left:40%;bottom:6%;width:22px;height:74%;
  background:linear-gradient(180deg,transparent,rgba(229,191,96,.6) 40%,rgba(240,219,165,.85));
  filter:blur(5px);transform:rotate(-30deg);animation:beamGlow 8s ease-in-out infinite 1.2s}
.scene__beam.b3{left:12%;top:14%;width:70%;height:120px;border-radius:60px;transform:rotate(-24deg);
  background:linear-gradient(90deg,transparent,rgba(212,175,55,.18),transparent);
  filter:blur(22px);animation:beamGlow 11s ease-in-out infinite .6s}
@keyframes beamGlow{0%,100%{opacity:.5}50%{opacity:1}}

/* rejilla técnica muy tenue */
.scene__grid{position:absolute;inset:12%;z-index:0;opacity:.14;pointer-events:none;
  background-image:linear-gradient(rgba(236,209,139,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(236,209,139,.5) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask:radial-gradient(ellipse 70% 70% at 50% 45%,#000,transparent 72%);
          mask:radial-gradient(ellipse 70% 70% at 50% 45%,#000,transparent 72%)}

/* --- estructura teléfono (parallax en .p3d, flotación en __body) --- */
.p3d{position:absolute;transform:translate3d(var(--tx,0),var(--ty,0),0);
  will-change:transform;transition:transform .1s linear}
.p3d__body{position:absolute;inset:0;border-radius:42px;will-change:transform;transform-style:preserve-3d}
.p3d__shadow{position:absolute;left:50%;bottom:-4%;width:66%;height:8%;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(155,118,25,.6),rgba(77,59,13,.3) 60%,transparent 78%);
  filter:blur(20px);z-index:-1}

/* reflejo/sheen metálico que recorre el cuerpo */
.p3d__sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;overflow:hidden}
.p3d__sheen::before{content:"";position:absolute;top:-20%;left:-40%;width:40%;height:140%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-16deg);animation:p3dSheen 7s ease-in-out infinite}
@keyframes p3dSheen{0%,72%{left:-40%}100%{left:130%}}

/* ---- FRONTAL (pantalla) ---- */
.p3d--front{left:32%;top:14%;width:252px;height:524px;z-index:3}
.p3d--front .p3d__body{padding:8px;
  background:linear-gradient(155deg,#bca773 0%,#4d4225 22%,#131210 56%,#5a4d2b 100%);
  box-shadow:0 60px 120px -34px rgba(0,0,0,.85),0 0 0 1px rgba(240,219,165,.20),
    0 0 70px -8px rgba(212,175,55,.4),
    inset 0 0 0 2px rgba(212,175,55,.14),inset 0 3px 8px rgba(255,255,255,.20);
  animation:floatFront 8s ease-in-out infinite}
@keyframes floatFront{0%,100%{transform:translateY(0) rotate(6.5deg)}50%{transform:translateY(-16px) rotate(5deg)}}
.p3d--front .p3d__screen{position:absolute;inset:8px;border-radius:34px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,#272520,#0e0e0c 60%);box-shadow:inset 0 0 40px rgba(0,0,0,.6)}
.p3d__island{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:80px;height:20px;
  border-radius:14px;background:#0a0908;z-index:4;box-shadow:inset 0 0 0 1px rgba(212,175,55,.2)}

/* ---- TRASERO (parte de atrás) ---- */
.p3d--back{left:2%;top:28%;width:222px;height:462px;z-index:2;filter:blur(.5px)}
.p3d--back .p3d__body{
  background:linear-gradient(150deg,#9b844b 0%,#4e4326 30%,#1d1c18 62%,#675831 100%);
  box-shadow:0 50px 100px -30px rgba(0,0,0,.8),0 0 0 1px rgba(240,219,165,.16),
    0 0 60px -10px rgba(168,127,40,.4),
    inset 0 0 0 2px rgba(212,175,55,.14),inset 0 3px 8px rgba(255,255,255,.16);
  animation:floatBack 9.5s ease-in-out infinite}
@keyframes floatBack{0%,100%{transform:translateY(0) rotate(-9deg)}50%{transform:translateY(-13px) rotate(-7.5deg)}}
/* módulo de cámara */
.p3d__cam{position:absolute;top:22px;left:22px;width:78px;height:78px;border-radius:24px;
  background:linear-gradient(150deg,#544829,#161512);border:1px solid rgba(212,175,55,.18);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12);
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:7px;padding:11px}
.p3d__cam span{border-radius:50%;background:radial-gradient(circle at 35% 30%,#4c4020,#0a0a09 70%);
  box-shadow:inset 0 0 0 2px rgba(210,176,90,.35),0 0 6px rgba(212,175,55,.3)}
.p3d__cam span:nth-child(3){grid-column:1/2}
.p3d__cam .flash{width:7px;height:7px;border-radius:50%;align-self:center;justify-self:center;
  background:radial-gradient(circle,#f6f5f3,#d4af37);box-shadow:0 0 8px rgba(242,222,173,.8)}
.p3d__mark{position:absolute;inset:0;display:grid;place-items:center;opacity:.16}
.p3d__mark img{width:44%;filter:grayscale(1) brightness(2)}

/* ---- entrada suave de la escena (respeta el gated hero-in del wrapper) ---- */
@media(prefers-reduced-motion:reduce){
  .p3d--front .p3d__body{animation:none;transform:rotate(6.5deg)}
  .p3d--back .p3d__body{animation:none;transform:rotate(-9deg)}
  .scene__halo,.scene__beam,.p3d__sheen::before{animation:none}
}

/* ---- responsive ---- */
@media(max-width:960px){
  .scene{width:min(440px,92%);height:480px;transform:scale(.94)}
  .p3d--front{width:210px;height:436px;left:34%;top:12%}
  .p3d--back{width:186px;height:388px;left:2%;top:26%}
}
@media(max-width:560px){
  .scene{width:min(320px,88%);height:400px}
  .p3d--back{display:none}
  .p3d--front{width:200px;height:416px;left:50%;top:8%;transform:translateX(-50%)}
  .p3d--front .p3d__body{animation:floatFront 8s ease-in-out infinite}
  .header>.container{width:min(100% - 28px,1300px)}
}

/* ============================================================
   HERO SCENE v33 — render publicitario de hardware (Apple-like)
   Dos teléfonos ENORMES cruzados · sin UI · wallpaper · V de luz
   ============================================================ */
.hero__stage{min-height:640px;perspective:1600px}
.scene{width:min(600px,96%);height:640px}

/* halo azul intenso detrás (toda la luz viene del fondo) */
.scene__halo{inset:4% 2%;filter:blur(46px);
  background:radial-gradient(closest-side,rgba(229,191,96,.4),rgba(220,169,40,.18) 52%,transparent 74%)}

/* V de luz: dos haces desenfocados con glow, ocultos tras los teléfonos */
.scene__beam.b1{left:33%;bottom:4%;width:30px;height:82%;filter:blur(7px);transform:rotate(26deg);
  background:linear-gradient(180deg,transparent,rgba(232,198,113,.75) 42%,rgba(227,224,218,.95))}
.scene__beam.b2{left:41%;bottom:4%;width:26px;height:78%;filter:blur(8px);transform:rotate(-28deg);
  background:linear-gradient(180deg,transparent,rgba(229,191,96,.65) 42%,rgba(242,222,173,.9))}
.scene__beam.b3{left:10%;top:16%;width:74%;height:150px;filter:blur(30px);transform:rotate(-22deg);
  background:linear-gradient(90deg,transparent,rgba(212,175,55,.2),transparent)}

/* ---------- TELÉFONOS: enormes, cruzados, distinto plano ---------- */
.p3d__shadow{width:70%;height:9%;bottom:-3%;filter:blur(26px);
  background:radial-gradient(closest-side,rgba(163,125,27,.65),rgba(86,66,14,.32) 58%,transparent 78%)}

/* FRONTAL (pantalla con wallpaper) — plano delantero */
.p3d--front{left:29%;top:3%;width:280px;height:582px;z-index:3}
.p3d--front .p3d__body{padding:9px;border-radius:46px;
  background:linear-gradient(150deg,#dcd1b5 0%,#524628 20%,#13120f 55%,#675831 82%,#c4b183 100%);
  box-shadow:
    0 70px 140px -40px rgba(0,0,0,.9),
    0 0 0 1px rgba(218,215,207,.25),
    0 0 90px -6px rgba(212,175,55,.45),
    inset 0 0 0 2px rgba(212,175,55,.22),
    inset 0 3px 10px rgba(255,255,255,.28),
    inset 0 -3px 10px rgba(0,0,0,.4);
  animation:floatFront 9s ease-in-out infinite}
@keyframes floatFront{0%,100%{transform:translateY(0) rotate(7deg)}50%{transform:translateY(-18px) rotate(5.5deg)}}
.p3d--front .p3d__screen{inset:9px;border-radius:38px;overflow:hidden;background:#090908;
  box-shadow:inset 0 0 40px rgba(0,0,0,.7)}
.p3d__island{top:22px;width:86px;height:22px}

/* wallpaper elegante (líquido azul titanio) — NADA de UI */
.p3d__wall{position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 28% 8%, rgba(236,209,139,.9), transparent 46%),
    radial-gradient(130% 120% at 82% 88%, rgba(220,169,40,.9), transparent 55%),
    radial-gradient(90% 80% at 60% 50%, rgba(232,198,113,.5), transparent 60%),
    linear-gradient(155deg,#725713 0%,#40310a 60%,#151412 100%);
  animation:wallShift 16s ease-in-out infinite alternate}
@keyframes wallShift{0%{transform:scale(1.04) translate(0,0)}100%{transform:scale(1.12) translate(-2%,1%)}}
/* brillo/cristal del frente */
.p3d__glass{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.22) 0%,transparent 30%,transparent 62%,rgba(255,255,255,.08) 100%)}

/* TRASERO (parte de atrás metálica) — plano trasero, más inclinado */
.p3d--back{left:1%;top:9%;width:256px;height:528px;z-index:2;filter:blur(.6px)}
.p3d--back .p3d__body{border-radius:46px;
  background:linear-gradient(150deg,#baa570 0%,#675831 26%,#22201c 58%,#7f6c3d 82%,#c2af7f 100%);
  box-shadow:
    0 60px 120px -36px rgba(0,0,0,.85),
    0 0 0 1px rgba(218,215,207,.2),
    0 0 70px -10px rgba(168,127,40,.45),
    inset 0 0 0 2px rgba(212,175,55,.18),
    inset 0 3px 10px rgba(255,255,255,.24),
    inset 0 -3px 10px rgba(0,0,0,.4);
  animation:floatBack 10.5s ease-in-out infinite}
@keyframes floatBack{0%,100%{transform:translateY(0) rotate(-12deg)}50%{transform:translateY(-14px) rotate(-13deg)}}
.p3d--back .p3d__cam{top:26px;left:26px;width:88px;height:88px;border-radius:26px}

/* reflejo cristal recorriendo lento (material metálico) */
.p3d__sheen::before{width:38%;animation:p3dSheen 9s ease-in-out infinite}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .hero__stage{min-height:480px}
  .scene{width:min(460px,94%);height:500px;transform:scale(.96)}
  .p3d--front{width:230px;height:478px;left:30%;top:3%}
  .p3d--back{width:210px;height:434px;left:1%;top:9%}
}
@media(max-width:560px){
  .scene{width:min(320px,90%);height:430px}
  .p3d--back{display:none}
  .p3d--front{width:222px;height:462px;left:50%;top:4%;transform:translateX(-50%)}
}

/* ============================================================
   SISTEMA NEÓN GLOBAL v35 — un solo lenguaje de iluminación
   Paleta marca: azul eléctrico / claro / profundo / negro-azul / blanco
   Tokens compartidos + microinteracciones idénticas en todo el sitio
   ============================================================ */
body{
  --neon:212,175,55;         /* oro (acento marca) */
  --neon2:168,127,40;        /* oro profundo */
  --nz-dur:.32s;
  --nz-rest:0 0 0 1px rgba(var(--neon),.10),0 12px 30px -16px rgba(var(--neon2),.4);
  --nz-hover:0 0 0 1px rgba(var(--neon),.4),0 18px 42px -12px rgba(var(--neon2),.6),0 0 30px -6px rgba(var(--neon),.45);
  --nz-halo:drop-shadow(0 0 6px rgba(var(--neon),.55));
}

/* ---- TÍTULOS: iluminados por el ambiente (glow muy sutil) ---- */
.sec-head h2,.porque__copy h2,.form-sec__aside h2,.contacto__info h2,
.cta-final__box h2,.resenas__box h2{
  text-shadow:0 0 24px rgba(var(--neon),.18),0 0 2px rgba(var(--neon),.12)}
.sec-tag{box-shadow:0 0 20px -6px rgba(var(--neon),.4);text-shadow:0 0 10px rgba(var(--neon),.4)}

/* ---- HEADER: borde inferior con glow, logo con halo, links iluminados ---- */
.header{box-shadow:0 1px 0 rgba(var(--neon),.10),0 6px 30px -20px rgba(var(--neon2),.5)}
.header.scrolled{box-shadow:0 1px 0 rgba(var(--neon),.18),0 10px 34px -18px rgba(var(--neon2),.6)}
.brand__logo{filter:drop-shadow(0 0 12px rgba(var(--neon),.35))!important}
.nav a{transition:color var(--nz-dur) var(--ease),text-shadow var(--nz-dur)}
.nav a:hover{text-shadow:0 0 12px rgba(var(--neon),.7)}

/* ---- BOTONES: mismo lenguaje (borde iluminado + sombra azul → hover intenso + lift) ---- */
.btn,.btn-glass,.btn-line,.cat-tab,.testi__btn,.btn--primary,.btn--big{
  transition:transform var(--nz-dur) var(--ease),box-shadow var(--nz-dur) var(--ease),
    border-color var(--nz-dur),background var(--nz-dur)!important}
.btn--primary,.btn-glass{box-shadow:var(--nz-rest)}
.btn--primary:hover,.btn-glass:hover,.btn--big:hover{transform:translateY(-3px);box-shadow:var(--nz-hover)}
.btn--ghost,.btn-line,.cat-tab,.testi__btn{box-shadow:0 0 0 1px rgba(var(--neon),.12)}
.btn--ghost:hover,.btn-line:hover,.cat-tab:hover,.testi__btn:hover{
  transform:translateY(-3px);box-shadow:var(--nz-rest),0 0 22px -6px rgba(var(--neon),.5)}
.cat-tab.is-active{box-shadow:0 0 0 1px rgba(var(--neon),.5),0 10px 26px -8px rgba(var(--neon2),.7),0 0 24px -6px rgba(var(--neon),.5)}

/* ---- ICONOS: halo azul (no solo color) en todo el sitio ---- */
.srv__ico svg,.bene-ico svg,.ck,.contacto__list span,.link-wa,.socials a,
.accordion summary::after,.pays span{transition:filter var(--nz-dur),color var(--nz-dur)}
.srv__ico svg,.bene-ico svg{filter:drop-shadow(0 0 7px rgba(var(--neon),.6))!important}
.ck{filter:drop-shadow(0 0 5px rgba(var(--neon),.5))}
.contacto__list span{filter:drop-shadow(0 0 8px rgba(var(--neon),.5))}
.srv__ico,.bene-ico{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 22px -8px rgba(var(--neon),.5)}
.card:hover .srv__ico,.bene-card:hover .bene-ico{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 30px -6px rgba(var(--neon),.75)}

/* ---- ESTADÍSTICAS: números protagonistas con glow ---- */
.stat b{text-shadow:0 0 26px rgba(var(--neon),.4),0 0 4px rgba(var(--neon),.2)}
.stat{transition:transform var(--nz-dur) var(--ease),border-color var(--nz-dur),box-shadow var(--nz-dur)}
.stat:hover b{text-shadow:0 0 34px rgba(var(--neon),.7),0 0 6px rgba(var(--neon),.4)}

/* ---- PROCESO: líneas que emiten luz + números con glow ---- */
.steps::before{background:linear-gradient(90deg,transparent,rgba(var(--neon2),.6),rgba(var(--neon),.9),rgba(var(--neon2),.6),transparent)!important;
  box-shadow:0 0 12px rgba(var(--neon),.6);opacity:.8!important}
.step__n{box-shadow:0 0 26px -4px rgba(var(--neon),.6),inset 0 0 12px -4px rgba(var(--neon),.4)}
.step h3{text-shadow:0 0 16px rgba(var(--neon),.2)}

/* ---- GALERÍA: borde iluminado fino + hover zoom/glow ---- */
.gal-item{border-color:rgba(var(--neon),.2)!important;box-shadow:0 0 0 1px rgba(var(--neon),.08),0 14px 34px -20px rgba(var(--neon2),.5);
  transition:transform var(--nz-dur) var(--ease),box-shadow var(--nz-dur),border-color var(--nz-dur)}
.gal-item:hover{transform:scale(1.03);border-color:rgba(var(--neon),.55)!important;
  box-shadow:0 0 0 1px rgba(var(--neon),.4),0 0 40px -8px rgba(var(--neon),.55),0 20px 46px -18px rgba(var(--neon2),.6)}

/* ---- TESTIMONIOS: estrellas que emiten luz ---- */
.stars{color:#edd391!important;text-shadow:0 0 12px rgba(var(--neon),.7),0 0 3px rgba(var(--neon),.5)}
.avatar{box-shadow:0 0 18px -4px rgba(var(--neon),.5),0 8px 20px -8px rgba(0,0,0,.5)}

/* ---- FAQ: borde luminoso sutil, glow al abrir ---- */
.accordion details{box-shadow:0 0 0 1px rgba(var(--neon),.06),0 10px 26px -20px rgba(var(--neon2),.5);
  transition:border-color var(--nz-dur),box-shadow var(--nz-dur),background var(--nz-dur)}
.accordion details:hover{box-shadow:0 0 0 1px rgba(var(--neon),.2),0 0 24px -10px rgba(var(--neon),.4)}
.accordion details[open]{box-shadow:0 0 0 1px rgba(var(--neon),.35),0 0 34px -10px rgba(var(--neon),.5)!important}
.accordion summary::after{filter:drop-shadow(0 0 6px rgba(var(--neon),.6))}

/* ---- CONTACTO: iconos mismo sistema + mapa con marco iluminado ---- */
.contacto__map{border-color:rgba(var(--neon),.22)!important;
  box-shadow:0 0 0 1px rgba(var(--neon),.12),0 0 50px -18px rgba(var(--neon),.45),0 40px 90px -50px rgba(0,0,0,.7)!important}
.pays span{transition:border-color var(--nz-dur),box-shadow var(--nz-dur),color var(--nz-dur)}
.pays span:hover{border-color:rgba(var(--neon),.4);box-shadow:0 0 18px -6px rgba(var(--neon),.5);color:#f6f5f3}
.socials a:hover{text-shadow:0 0 12px rgba(var(--neon),.7)}

/* ---- MARCAS: hover tipo pantalla LED ---- */
.marquee__track span{transition:color var(--nz-dur),border-color var(--nz-dur),box-shadow var(--nz-dur),transform var(--nz-dur)}
.marquee__track span:hover{color:#f6f5f3!important;border-color:rgba(var(--neon),.55)!important;
  box-shadow:0 0 0 1px rgba(var(--neon),.4),0 0 26px -6px rgba(var(--neon),.6);text-shadow:0 0 14px rgba(var(--neon),.6)}

/* ---- HERO render: glow azul detrás vivo, haces emiten luz ---- */
.scene__halo{box-shadow:0 0 120px 40px rgba(var(--neon),.10)}
.p3d--front .p3d__body,.p3d--back .p3d__body{filter:drop-shadow(0 0 40px rgba(var(--neon),.22))}
.scene__beam.b1,.scene__beam.b2{box-shadow:0 0 30px rgba(var(--neon),.5)}

/* ---- FOOTER: ambiente iluminado + separadores con brillo + links hover ---- */
.footer{border-top:1px solid rgba(var(--neon),.14)!important;
  box-shadow:0 -1px 0 rgba(var(--neon),.12),0 -20px 60px -40px rgba(var(--neon2),.5)}
.footer::after{content:"";position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--neon),.5),transparent);box-shadow:0 0 10px rgba(var(--neon),.4)}
.footer__bar{border-top-color:rgba(var(--neon),.12)!important}
.footer a{transition:color var(--nz-dur),text-shadow var(--nz-dur)}
.footer a:hover{color:#f6f5f3!important;text-shadow:0 0 12px rgba(var(--neon),.6)}
.footer h4{text-shadow:0 0 14px rgba(var(--neon),.18)}

/* ---- WA fab: mismo sistema ---- */
.wa-fab{box-shadow:0 0 0 1px rgba(var(--neon),.2),0 12px 30px -6px rgba(31,190,91,.6),0 0 26px -6px rgba(var(--neon),.4)}

/* consistencia: reduce-motion respeta todo */
@media(prefers-reduced-motion:reduce){
  .btn,.btn-glass,.stat,.gal-item,.accordion details,.marquee__track span,.nav a{transition:none}
}

/* ============================================================
   HEADER v37 — alineación con el contenedor global + nombre marca
   ============================================================ */
/* mismo contenedor y márgenes que el resto del sitio (.container: 1180 / 40px) */
.header>.container{width:min(100% - 40px,var(--maxw))!important}
@media(max-width:560px){.header>.container{width:min(100% - 28px,var(--maxw))!important}}

/* bloque logotipo: isotipo + texto como un solo bloque */
.brand{gap:13px!important}
.brand__name{font-family:'Sora',sans-serif;font-weight:700;font-size:1.12rem;
  letter-spacing:.16em;color:#fff;white-space:nowrap;line-height:1;
  text-shadow:0 0 14px rgba(212,175,55,.35),0 0 3px rgba(212,175,55,.2);
  transition:text-shadow .32s var(--ease)}
.brand:hover .brand__name{text-shadow:0 0 20px rgba(212,175,55,.6),0 0 4px rgba(212,175,55,.35)}
@media(max-width:560px){.brand__name{font-size:.98rem;letter-spacing:.12em}}

/* ============================================================
   HEADER TÍTULO v38 — "ÁREA DIGITAL" animado en estático (paleta marca)
   ============================================================ */
.brand__name{
  background:linear-gradient(100deg,#f6f5f3 0%,#d4af37 28%,#a87f28 50%,#d4af37 72%,#f6f5f3 100%);
  background-size:220% 100%;background-position:0 0;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:brandFlow 7s linear infinite,brandGlow 4.5s ease-in-out infinite}
@keyframes brandFlow{to{background-position:220% 0}}
@keyframes brandGlow{
  0%,100%{filter:drop-shadow(0 0 6px rgba(212,175,55,.35))}
  50%{filter:drop-shadow(0 0 16px rgba(212,175,55,.7))}}
/* el glow ahora lo da el filter; el hover intensifica un poco más */
.brand:hover .brand__name{filter:drop-shadow(0 0 20px rgba(212,175,55,.85))}
@media(prefers-reduced-motion:reduce){
  .brand__name{animation:none;filter:drop-shadow(0 0 8px rgba(212,175,55,.4))}}

/* ============================================================
   CONTORNO NEÓN v39 — más grueso y notorio en todas las cards
   ============================================================ */
.card::before,.cat-card::before{
  inset:-3px!important;padding:5px!important;
  filter:drop-shadow(0 0 10px rgba(212,175,55,1)) drop-shadow(0 0 24px rgba(168,127,40,.9))!important}
.card:hover::before,.cat-card:hover::before{opacity:1;animation:neonSpin 3s linear infinite}

/* ============================================================
   CONTORNO NEÓN v40 — encendido en REPOSO (giro lento) + hover intenso
   ============================================================ */
.card::before,.cat-card::before{opacity:.9!important;animation:neonSpin 6s linear infinite!important}
.card:hover::before,.cat-card:hover::before{opacity:1!important;animation:neonSpin 3s linear infinite!important}
@media(prefers-reduced-motion:reduce){
  .card::before,.cat-card::before{animation:none!important;opacity:.9!important}}

/* ============================================================
   CONTORNO NEÓN v41 — encendido en reposo también en beneficios,
   estadísticas y acordeones FAQ (mismas zonas que iluminaban al hover)
   ============================================================ */
.bene-card,.stat,.accordion details{
  border-color:rgba(212,175,55,.30)!important;
  box-shadow:0 0 0 1px rgba(212,175,55,.20),0 0 24px -6px rgba(212,175,55,.45),
    0 18px 42px -26px rgba(105,80,17,.6)!important}
.bene-card:hover,.stat:hover,.accordion details:hover{
  border-color:rgba(212,175,55,.6)!important;
  box-shadow:0 0 0 1px rgba(212,175,55,.5),0 0 40px -6px rgba(212,175,55,.7),
    0 22px 50px -20px rgba(168,127,40,.6)!important}
.accordion details[open]{
  border-color:rgba(212,175,55,.6)!important;
  box-shadow:0 0 0 1px rgba(212,175,55,.5),0 0 40px -8px rgba(212,175,55,.6)!important}

/* ============================================================
   MARCAS v42 — que el hover iluminado del logo NO se corte
   (overflow:hidden recortaba el glow arriba/abajo)
   ============================================================ */
.marcas .marquee{padding-block:30px}
.marcas .marquee__track span{will-change:transform}
.marcas .marquee__track span:hover{transform:translateY(-3px) scale(1.04)}

/* ============================================================
   HERO IMAGEN v43 — render real integrado al fondo azul
   ============================================================ */
.scene--img{display:grid;place-items:center;position:relative}
.hero-img{position:relative;z-index:2;width:min(600px,100%);height:auto;
  mix-blend-mode:screen;               /* funde el fondo oscuro del render con el azul del sitio */
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.5)) drop-shadow(0 0 60px rgba(212,175,55,.25));
  animation:heroImgFloat 8s ease-in-out infinite;will-change:transform}
@keyframes heroImgFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
/* halo azul detrás para dar profundidad */
.scene--img .scene__halo{inset:6%;filter:blur(50px);opacity:.9;
  background:radial-gradient(closest-side,rgba(212,175,55,.30),rgba(168,127,40,.14) 55%,transparent 76%)}
@media(prefers-reduced-motion:reduce){.hero-img{animation:none}}
@media(max-width:960px){.hero-img{width:min(460px,92%)}}
@media(max-width:560px){.hero-img{width:min(360px,94%)}}

/* ============================================================
   HERO v44 — escena multicapa viva (glow ambiental, neón,
   partículas locales, reflejo, chips flotantes, parallax)
   parallax = propiedad CSS `translate` (JS) · float = `transform`
   ============================================================ */
.hero{isolation:isolate}
.scene--img{position:relative;display:grid;place-items:center;
  width:min(680px,100%);height:min(680px,88vh);--gx:50%;--gy:45%}
.scene--img .hx{position:absolute;inset:0;pointer-events:none;will-change:transform,translate}

/* capa 1 · glow ambiental que sigue al mouse y respira */
.hx-amb{background:radial-gradient(46% 42% at var(--gx) var(--gy),
    rgba(212,175,55,.34),rgba(168,127,40,.14) 46%,transparent 72%);
  filter:blur(26px);animation:hxBreath 7.5s ease-in-out infinite}
@keyframes hxBreath{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}

/* capa 2 · núcleo de luz detrás del teléfono */
.hx-glow{inset:14%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(236,209,139,.4),rgba(168,127,40,.16) 55%,transparent 74%);
  filter:blur(30px);mix-blend-mode:screen;animation:hxBreath 5.5s ease-in-out infinite .8s}

/* capa 3 · haces neón en V que derivan lento */
.hx-beam{width:34%;height:150%;left:33%;top:-25%;border-radius:40px;mix-blend-mode:screen;filter:blur(7px)}
.hx-beam.b1{background:linear-gradient(180deg,transparent,rgba(232,198,113,.6) 45%,rgba(227,224,218,.85));
  transform:rotate(26deg);animation:hxBeam 9s ease-in-out infinite}
.hx-beam.b2{background:linear-gradient(180deg,transparent,rgba(229,191,96,.5) 45%,rgba(240,219,165,.8));
  transform:rotate(-28deg);left:41%;animation:hxBeam 11s ease-in-out infinite 1.4s}
@keyframes hxBeam{0%,100%{opacity:.5;filter:blur(7px)}50%{opacity:.95;filter:blur(5px)}}

/* capa 4 · anillo técnico girando muy lento */
.hx-ring{inset:8%;border-radius:50%;border:1px solid rgba(236,209,139,.16);
  box-shadow:inset 0 0 60px rgba(212,175,55,.12);animation:hxSpin 60s linear infinite}
.hx-ring::after{content:"";position:absolute;top:-3px;left:50%;width:7px;height:7px;border-radius:50%;
  background:#efd89f;box-shadow:0 0 14px #d4af37}
@keyframes hxSpin{to{transform:rotate(360deg)}}

/* capa 5 · partículas locales (canvas) */
.hx-parts{z-index:1;mix-blend-mode:screen}

/* capa 6 · RENDER protagonista (más grande, flota, neón) */
.scene--img .hero-img{position:relative;z-index:2;width:min(680px,102%);height:auto;
  mix-blend-mode:screen;
  filter:drop-shadow(0 34px 70px rgba(16,16,13,.6)) drop-shadow(0 0 70px rgba(212,175,55,.32));
  animation:heroImgFloat 8s ease-in-out infinite;will-change:transform}
@keyframes heroImgFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(.4deg)}}

/* capa 7 · reflejo bajo el render */
.hx-reflect{top:auto;bottom:-6%;height:38%;
  background:radial-gradient(60% 80% at 50% 0%,rgba(212,175,55,.22),transparent 70%);
  filter:blur(16px);mix-blend-mode:screen;animation:hxBreath 6s ease-in-out infinite .4s}

/* capa 8 · chips neón flotantes (indicadores) */
.hx-chip{position:absolute;z-index:5;display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:100px;font-family:'Sora',sans-serif;font-weight:600;font-size:.82rem;color:#f6f5f3;
  background:linear-gradient(160deg,rgba(60,48,16,.72),rgba(26,25,21,.6));backdrop-filter:blur(10px);
  border:1px solid rgba(212,175,55,.4);
  box-shadow:0 0 0 1px rgba(212,175,55,.14),0 0 26px -6px rgba(212,175,55,.6),0 14px 30px -14px rgba(0,0,0,.6);
  white-space:nowrap;will-change:transform}
.hx-chip b{font-weight:700}
.hx-chip .chip__ico{font-size:1rem;filter:drop-shadow(0 0 6px rgba(212,175,55,.7))}
.hx-chip .chip__dot{width:8px;height:8px;border-radius:50%;background:#3fe0a0;box-shadow:0 0 10px #3fe0a0;animation:pulse 2s infinite}
.hx-chip.c1{top:12%;left:-4%;animation:chipFloat 7s ease-in-out infinite}
.hx-chip.c2{top:46%;left:-8%;animation:chipFloat 8.5s ease-in-out infinite 1s}
.hx-chip.c3{bottom:16%;right:-4%;animation:chipFloat 7.8s ease-in-out infinite .5s}
@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

@media(prefers-reduced-motion:reduce){
  .hx-amb,.hx-glow,.hx-beam,.hx-ring,.hx-reflect,.hero-img,.hx-chip{animation:none}
}
@media(max-width:960px){
  .scene--img{width:min(520px,94%);height:min(520px,70vh)}
  .scene--img .hero-img{width:min(520px,100%)}
  .hx-chip{font-size:.76rem;padding:7px 12px}
  .hx-chip.c1{left:0}.hx-chip.c2{left:-2%}.hx-chip.c3{right:0}
}
@media(max-width:560px){
  .scene--img{height:min(400px,58vh)}
  .hx-chip.c2{display:none}
}

/* ============================================================
   FONDO MULTICAPA v45 — sistema global (inyectado por fondo.js)
   Capas: gradiente · blobs · halos · líneas · wireframe · noise · partículas
   Reutilizable en todas las páginas con #siteBg. Parallax + scroll drift.
   ============================================================ */
.site-bg{--px:0px;--py:0px;--sy:0px}
.site-bg .bgx{position:absolute;inset:-6%;pointer-events:none;will-change:transform,translate}

/* capa 3 · halos de luz ambiental (varios focos, respiran) */
.bgx-halos{background:
    radial-gradient(28% 24% at 18% 18%, rgba(212,175,55,.16), transparent 62%),
    radial-gradient(32% 28% at 82% 30%, rgba(168,127,40,.16), transparent 64%),
    radial-gradient(30% 26% at 30% 78%, rgba(212,175,55,.12), transparent 66%),
    radial-gradient(34% 30% at 74% 86%, rgba(220,169,40,.14), transparent 66%);
  filter:blur(30px);animation:bgxBreath 16s ease-in-out infinite alternate}
@keyframes bgxBreath{0%{opacity:.7;transform:scale(1)}100%{opacity:1;transform:scale(1.06)}}

/* capa 2 · blobs / formas geométricas grandes muy difusas */
.bgx-blobs{opacity:.5;filter:blur(8px)}
.bgx-blobs svg,.bgx-wire svg{width:100%;height:100%;display:block}

/* capa 7 · wireframe (hexágonos, nodos, cuadrados) grande y tenue */
.bgx-wire{opacity:.5;animation:bgxWire 90s linear infinite}
@keyframes bgxWire{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(-2%) rotate(2deg)}}

/* capa 4 · líneas tecnológicas finas con glow */
.bgx-lines{background-image:
    linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), rgba(212,175,55,.10) 100%);
  background-size:220px 100%;opacity:.5;
  -webkit-mask:radial-gradient(140% 100% at 50% 40%, #000, transparent 85%);
          mask:radial-gradient(140% 100% at 50% 40%, #000, transparent 85%)}

/* capa 6 · ruido sutil */
.bgx-noise{inset:0;opacity:.03;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* viñeta suave para legibilidad */
.bgx-vignette{inset:0;background:radial-gradient(130% 100% at 50% 30%, transparent 55%, rgba(10,9,8,.5) 100%)}

#bgParticles{z-index:1}
@media(prefers-reduced-motion:reduce){.bgx-halos,.bgx-wire{animation:none}}

/* ============================================================
   VIDEO "Un laboratorio…" v46 — pieza premium en columna izq
   ============================================================ */
.porque__video{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/3;
  background:linear-gradient(160deg,rgba(58,46,14,.6),rgba(23,21,18,.5));
  border:1px solid rgba(212,175,55,.28);
  box-shadow:0 0 0 1px rgba(212,175,55,.1),0 0 46px -12px rgba(212,175,55,.4),0 30px 70px -34px rgba(0,0,0,.7);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s}
.porque__vid{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
/* reflejo/cristal sutil sobre el video */
.porque__video::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(125deg,rgba(255,255,255,.12) 0%,transparent 32%,transparent 70%,rgba(212,175,55,.06) 100%)}
.porque__video:hover{transform:scale(1.02);border-color:rgba(212,175,55,.55);
  box-shadow:0 0 0 1px rgba(212,175,55,.4),0 0 60px -8px rgba(212,175,55,.6),0 34px 80px -30px rgba(168,127,40,.6)}
/* badge reposicionado sobre el video */
.porque__video .porque__badge{position:absolute;bottom:16px;left:16px;z-index:2}
@media(max-width:960px){.porque__video{aspect-ratio:16/10}}

/* ============================================================
   HERO IMG v47 — bordes redondeados + cantos fundidos (no cuadro)
   ============================================================ */
.scene--img .hero-img{border-radius:30px;
  -webkit-mask:
    radial-gradient(130% 120% at 50% 42%, #000 52%, rgba(0,0,0,.35) 80%, transparent 100%),
    linear-gradient(180deg, #000 55%, rgba(0,0,0,.35) 80%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask:
    radial-gradient(130% 120% at 50% 42%, #000 52%, rgba(0,0,0,.35) 80%, transparent 100%),
    linear-gradient(180deg, #000 55%, rgba(0,0,0,.35) 80%, transparent 100%);
  mask-composite:intersect}
/* FADE real de todo el hero hacia el fondo continuo (sin corte, sin banda) */
.hero{
  -webkit-mask:linear-gradient(180deg,#000 0%,#000 78%,rgba(0,0,0,.55) 90%,transparent 100%);
          mask:linear-gradient(180deg,#000 0%,#000 78%,rgba(0,0,0,.55) 90%,transparent 100%)}

/* quitar franjas verticales del fondo global (líneas verticales) */
.bgx-lines{display:none!important}

/* ============================================================
   LAB TIMELINE v47 — proceso de laboratorio (composición nueva)
   Horizontal zigzag (desktop) → vertical (móvil) · riel que se
   completa al scroll · glow · nodos · reveal progresivo
   ============================================================ */
.lab{position:relative;overflow:hidden}
.lab__amb{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(40% 50% at 15% 40%,rgba(212,175,55,.10),transparent 60%),
             radial-gradient(46% 60% at 85% 70%,rgba(168,127,40,.12),transparent 62%)}
.lab .container{position:relative;z-index:1}

.lab-flow{position:relative;display:grid;grid-template-columns:repeat(5,1fr);margin-top:56px}

/* riel horizontal + relleno luminoso (--p 0..1 desde JS) */
.lab-rail{position:absolute;top:50%;left:8%;right:8%;height:3px;transform:translateY(-50%);
  background:rgba(212,175,55,.16);border-radius:3px;overflow:hidden;z-index:1}
.lab-rail__fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p,0)*100%);
  background:linear-gradient(90deg,#a87f28,#d4af37);
  box-shadow:0 0 18px rgba(212,175,55,.75);transition:width .25s linear}

/* nodo: fila superior (card) / marcador / fila inferior (card) */
.lab-node{position:relative;display:grid;grid-template-rows:1fr 46px 1fr;justify-items:center;
  min-height:380px;padding:0 12px;z-index:2;
  opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.lab-node.in{opacity:1;transform:none}
.lab-node:nth-child(even) .lab-card{grid-row:1;align-self:end;margin-bottom:20px}
.lab-node:nth-child(odd)  .lab-card{grid-row:3;align-self:start;margin-top:20px}

/* marcador sobre el riel */
.lab-dot{grid-row:2;align-self:center;width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#f6f5f3,#d4af37);
  box-shadow:0 0 0 5px rgba(212,175,55,.12),0 0 20px rgba(212,175,55,.8);position:relative}
.lab-node.in .lab-dot{animation:labPulse 2.4s ease-in-out infinite}
@keyframes labPulse{50%{box-shadow:0 0 0 8px rgba(212,175,55,.08),0 0 28px rgba(212,175,55,.9)}}
/* conector card ↔ marcador */
.lab-node:nth-child(even) .lab-card::after,
.lab-node:nth-child(odd)  .lab-card::after{content:"";position:absolute;left:50%;width:2px;height:20px;
  transform:translateX(-50%);background:linear-gradient(rgba(212,175,55,.6),transparent)}
.lab-node:nth-child(even) .lab-card::after{bottom:-20px;background:linear-gradient(rgba(212,175,55,.6),transparent)}
.lab-node:nth-child(odd)  .lab-card::after{top:-20px;background:linear-gradient(transparent,rgba(212,175,55,.6))}

/* número grande y tenue — anclado a la card (alineación uniforme) */
.lab-num{position:absolute;top:10px;right:16px;font-family:'Sora',sans-serif;font-weight:800;font-size:2.2rem;
  line-height:1;color:transparent;-webkit-text-stroke:1px rgba(236,209,139,.28);z-index:1;pointer-events:none}

/* tarjeta glass neón — misma altura para todas */
.lab-card{position:relative;width:100%;max-width:230px;min-height:210px;padding:26px 20px 24px;border-radius:18px;text-align:center;
  display:flex;flex-direction:column;align-items:center;
  background:linear-gradient(160deg,rgba(37,35,30,.62),rgba(23,21,18,.5));
  border:1px solid rgba(212,175,55,.22);backdrop-filter:blur(9px);
  box-shadow:0 0 0 1px rgba(212,175,55,.08),0 0 30px -16px rgba(212,175,55,.4),0 18px 44px -26px rgba(0,0,0,.6);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.lab-card:hover{transform:translateY(-6px);border-color:rgba(212,175,55,.55);
  box-shadow:0 0 0 1px rgba(212,175,55,.4),0 0 44px -8px rgba(212,175,55,.55),0 26px 56px -22px rgba(168,127,40,.6)}
.lab-ico{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:16px;margin-bottom:14px;
  background:radial-gradient(circle at 30% 25%,rgba(212,175,55,.22),rgba(168,127,40,.08));
  border:1px solid rgba(212,175,55,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 22px -8px rgba(212,175,55,.5);
  transition:box-shadow .35s,transform .35s var(--ease)}
.lab-card:hover .lab-ico{transform:translateY(-3px) scale(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 30px -6px rgba(212,175,55,.8)}
.lab-ico svg{width:28px;height:28px;fill:none;stroke:#e8c875;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(212,175,55,.6))}
.lab-card h3{font-size:1.06rem;margin-bottom:7px;text-shadow:0 0 16px rgba(212,175,55,.2)}
.lab-card p{color:var(--muted);font-size:.9rem;line-height:1.5}

/* ---- responsive: timeline vertical en móvil/tablet ---- */
@media(max-width:900px){
  .lab-flow{grid-template-columns:1fr;margin-top:36px}
  .lab-rail{left:28px;right:auto;top:0;bottom:0;width:3px;height:auto;transform:none}
  .lab-rail__fill{left:0;top:0;width:100%;height:calc(var(--p,0)*100%);
    background:linear-gradient(180deg,#a87f28,#d4af37)}
  .lab-node{grid-template-rows:none;grid-template-columns:56px 1fr;justify-items:start;align-items:start;
    min-height:auto;padding:14px 0;column-gap:14px}
  .lab-node .lab-card,
  .lab-node:nth-child(even) .lab-card,
  .lab-node:nth-child(odd) .lab-card{grid-row:1;grid-column:2;margin:0;max-width:none;text-align:left}
  .lab-dot{grid-row:1;grid-column:1;align-self:start;justify-self:center;margin-top:24px}
  .lab-node:nth-child(even) .lab-card::after,
  .lab-node:nth-child(odd) .lab-card::after{display:none}
  .lab-ico{margin-bottom:12px}
  .lab-num{top:10px;right:12px;font-size:1.8rem}
}
@media(prefers-reduced-motion:reduce){
  .lab-node{opacity:1;transform:none}.lab-dot{animation:none}.lab-rail__fill{transition:none}
}

/* ============================================================
   HERO v50 — fuera líneas diagonales en V; solo luz ambiental
   ============================================================ */
.scene--img .hx-beam{display:none!important}
/* reforzar halo/glow ambiental para conservar profundidad sin líneas */
.scene--img .hx-amb{background:radial-gradient(50% 46% at var(--gx) var(--gy),
    rgba(212,175,55,.30),rgba(168,127,40,.15) 48%,transparent 74%);filter:blur(34px)}
.scene--img .hx-glow{inset:10%;filter:blur(40px);
  background:radial-gradient(closest-side,rgba(236,209,139,.42),rgba(168,127,40,.18) 56%,transparent 76%)}

/* ============================================================
   HERO BOTONES v51 — primario azul premium + secundario legible
   ============================================================ */
.hero__cta .btn-glass{
  background:linear-gradient(120deg,#a87f28 0%,#d4af37 100%)!important;
  color:#12110f!important;font-weight:700;border:1px solid rgba(242,222,173,.6)!important;
  box-shadow:0 0 0 1px rgba(212,175,55,.35),0 14px 34px -10px rgba(168,127,40,.75),0 0 26px -6px rgba(212,175,55,.5)!important;
  backdrop-filter:none!important;text-shadow:none}
.hero__cta .btn-glass span{color:#12110f}
.hero__cta .btn-glass:hover{transform:translateY(-3px);
  box-shadow:0 0 0 1px rgba(212,175,55,.7),0 20px 46px -8px rgba(212,175,55,.9),0 0 40px -6px rgba(212,175,55,.7)!important}
/* mantener el brillo que recorre (shine) visible sobre el azul */
.hero__cta .btn-glass::before{opacity:.9}

.hero__cta .btn-line{color:#f6f5f3!important;font-weight:600;
  border:1px solid rgba(236,209,139,.4)!important;background:rgba(30,28,24,.35);
  box-shadow:0 0 0 1px rgba(212,175,55,.08),0 8px 22px -12px rgba(168,127,40,.5)!important}
.hero__cta .btn-line:hover{color:#fff!important;border-color:rgba(236,209,139,.8)!important;transform:translateY(-3px);
  box-shadow:0 0 0 1px rgba(212,175,55,.4),0 0 26px -6px rgba(212,175,55,.6)!important}

/* ============================================================
   RITMO VISUAL v52 — compactar espaciado (−30/35%) sin apretar
   Solo distribución/espacios. Títulos, cards, botones intactos.
   ============================================================ */
/* secciones: menos aire vertical */
.section{padding:clamp(48px,6.5vw,96px) 0!important}
/* cabeceras de sección: acercar título→subtítulo→contenido */
.sec-head{margin:0 auto clamp(24px,3.4vw,40px)!important}
.sec-head h2{margin-bottom:10px}
.sec-tag{margin-bottom:14px}

/* HERO: termina antes, conecta más rápido */
.hero{min-height:90vh}
.scene--img{height:min(600px,80vh)}

/* franja beneficios y marcas más compactas */
.beneficios-band{padding:clamp(40px,5.5vw,64px) 0!important}
.marcas{padding:40px 0!important}
.marcas__label{margin-bottom:20px}

/* grids de tarjetas: un poco más juntas */
.grid-3,.services{gap:18px}
.featured-grid,.catalog-grid{gap:18px}
.steps{gap:16px}

/* POR QUÉ: acercar bloques internos */
.porque__grid{gap:clamp(32px,4vw,48px)}
.porque__copy .lead{margin:10px 0 18px}
.checklist{margin-bottom:22px}

/* PROCESO / LAB timeline más compacta */
.lab-flow{margin-top:40px}
.lab-node{min-height:320px}

/* ESTADÍSTICAS: acercar y protagonismo */
.stats{gap:14px;padding-top:6px}
.stat{padding:18px 16px}

/* TESTIMONIOS: menos padding, tarjetas más juntas */
.testi__track{gap:18px}
.testi__ctrls{margin-top:20px}

/* FAQ: quitar aire innecesario */
.faq__grid{gap:clamp(28px,3.6vw,40px)}
.accordion{gap:10px}

/* FORMULARIO / CONTACTO */
.form-sec__grid,.contacto__grid{gap:clamp(32px,4vw,44px)}
.form-sec__aside .lead{margin:10px 0 18px}
.contacto__list{margin:18px 0}

/* CTA final y FOOTER: acercar el pie de página */
.cta-final__box{padding:clamp(40px,5.5vw,64px) 28px}
.footer{padding:44px 0 22px!important}
.footer__grid{margin-bottom:30px}

/* divisor de circuito entre secciones: aún más sutil (continuidad) */
.section+.section::before{opacity:.5}

/* solapamiento suave: cada sección sube un poco sobre la anterior */
.section{position:relative}

/* ============================================================
   POR QUÉ · imagen v53 — bordes redondeados + animación WOW
   ============================================================ */
.porque__photo{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:16/10;
  border:1px solid rgba(212,175,55,.3);
  box-shadow:0 0 0 1px rgba(212,175,55,.1),0 0 50px -12px rgba(212,175,55,.45),0 34px 80px -34px rgba(0,0,0,.75);
  transform:perspective(1000px);transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s}
.porque__img{width:100%;height:100%;object-fit:cover;display:block;
  animation:porqueKen 18s ease-in-out infinite alternate;will-change:transform}
@keyframes porqueKen{0%{transform:scale(1.04) translate(0,0)}100%{transform:scale(1.12) translate(-2%,-1.5%)}}
/* reflejo/cristal + glow superior */
.porque__photo::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(125deg,rgba(255,255,255,.14) 0%,transparent 30%,transparent 72%,rgba(212,175,55,.08) 100%)}
/* barra de luz que recorre (shine) periódica */
.porque__shine{position:absolute;top:-30%;left:-40%;width:36%;height:160%;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(223,220,212,.35),transparent);transform:skewX(-16deg);
  animation:porqueShine 6.5s ease-in-out infinite}
@keyframes porqueShine{0%,68%{left:-40%}100%{left:130%}}
/* hover WOW: leve tilt + zoom + glow más intenso */
.porque__photo:hover{transform:perspective(1000px) rotateX(2deg) rotateY(-3deg) scale(1.02);
  border-color:rgba(212,175,55,.6);
  box-shadow:0 0 0 1px rgba(212,175,55,.5),0 0 70px -8px rgba(212,175,55,.6),0 40px 90px -30px rgba(168,127,40,.6)}
/* entrada: reveal con zoom */
.porque__media.reveal .porque__photo{opacity:0;transform:perspective(1000px) translateY(26px) scale(.96);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.porque__media.reveal.in .porque__photo{opacity:1;transform:perspective(1000px) translateY(0) scale(1)}
.porque__photo .porque__badge{position:absolute;bottom:16px;left:16px;z-index:3}
@media(max-width:960px){.porque__photo{aspect-ratio:16/11}}
@media(prefers-reduced-motion:reduce){.porque__img,.porque__shine{animation:none}}

/* ============================================================
   FAQ v54 — bloque de texto izq centrado vertical vs acordeón
   ============================================================ */
.faq__grid{align-items:center}
.faq .sec-head--left{align-self:center;margin-bottom:0}
@media(max-width:960px){
  .faq__grid{align-items:start}
  .faq .sec-head--left{align-self:start;margin-bottom:0}
}

/* ============================================================
   MAPA · pestañas Ubicación / Street View / Foto (v55)
   ============================================================ */
/* el contenedor pasa a wrapper simple (marco va en .mapview) */
.contacto__map{display:flex;flex-direction:column;gap:12px;border:0!important;overflow:visible!important;
  background:none!important;box-shadow:none!important;min-height:auto!important}
.mapswitch{display:flex;gap:8px;flex-wrap:wrap}
.mapswitch__btn{flex:1;min-width:120px;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:'Sora',sans-serif;font-weight:600;font-size:.88rem;color:#e2e0d9;cursor:pointer;
  padding:11px 14px;border-radius:100px;border:1px solid rgba(212,175,55,.25);
  background:rgba(28,26,22,.4);backdrop-filter:blur(6px);
  box-shadow:0 0 0 1px rgba(212,175,55,.06);
  transition:all .3s var(--ease)}
.mapswitch__btn:hover{color:#fff;border-color:rgba(212,175,55,.55);transform:translateY(-2px);
  box-shadow:0 0 20px -6px rgba(212,175,55,.5)}
.mapswitch__btn.is-active{color:#12110f;border-color:transparent;
  background:linear-gradient(120deg,#a87f28,#d4af37);
  box-shadow:0 0 0 1px rgba(212,175,55,.5),0 10px 26px -8px rgba(168,127,40,.7),0 0 24px -6px rgba(212,175,55,.5)}
/* marco del mapa: misma altura y estética que antes */
.mapview{position:relative;flex:1;min-height:380px;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.85),0 0 50px -26px rgba(212,175,55,.3)}
.mapview__pane{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .4s var(--ease);}
.mapview__pane.is-active{opacity:1;visibility:visible}
.mapview__pane iframe{width:100%;height:100%;min-height:380px;border:0;
  filter:grayscale(.3) invert(.9) hue-rotate(180deg) contrast(.9)}
/* Street View se ve mejor sin el filtro invertido */
.mapview__pane[data-pane="street"] iframe{filter:none}
/* placeholder foto del local */
.mapphoto{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;text-align:center;padding:24px;
  background:radial-gradient(60% 60% at 50% 40%,rgba(168,127,40,.16),transparent 70%),linear-gradient(160deg,#22201b,#131210)}
.mapphoto__ico{font-size:3.4rem;filter:drop-shadow(0 8px 22px rgba(212,175,55,.5))}
.mapphoto p{color:#d7cbad;font-size:1.02rem;max-width:280px}
@media(max-width:560px){.mapswitch__btn{font-size:.8rem;padding:10px;min-width:0}}

/* ============================================================
   EMOJIS a color en cards v56 — estilo Conoce México
   Nativos multicolor (Apple/Google/Segoe/Noto), +tamaño, hover
   ============================================================ */
.emoji{
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",
    "Twemoji Mozilla","EmojiOne Color","Android Emoji",sans-serif;
  font-style:normal;font-weight:400;line-height:1;display:inline-block;
  -webkit-font-smoothing:auto;text-rendering:optimizeQuality;
  transition:transform .28s var(--ease)}
/* tamaño dentro de los tiles de icono (+~20% vs SVG previo) */
.srv__ico .emoji{font-size:2.1rem}
.bene-ico .emoji{font-size:2rem}
.lab-ico .emoji{font-size:2rem}
/* el tile deja de forzar color de trazo; el emoji manda su propio color */
.srv__ico,.bene-ico,.lab-ico{overflow:visible}
/* hover: crece ~8% + rotación sutil */
.card:hover .srv__ico .emoji,
.bene-card:hover .bene-ico .emoji,
.lab-card:hover .lab-ico .emoji{transform:scale(1.08) rotate(4deg)}
/* también los tiles de producto (emoji vía ::before) reaccionan */
.pcard__tile::before{transition:transform .28s var(--ease)}
.pcard:hover .pcard__tile::before{transform:scale(1.08) rotate(4deg)}
@media(prefers-reduced-motion:reduce){
  .emoji,.pcard__tile::before{transition:none}
  .card:hover .srv__ico .emoji,.bene-card:hover .bene-ico .emoji,
  .lab-card:hover .lab-ico .emoji,.pcard:hover .pcard__tile::before{transform:none}
}

/* ============================================================
   LOADER fondo imagen v57 (referencia NASAN)
   ============================================================ */
.loader{
  background:
    linear-gradient(180deg,rgba(12,11,9,.72),rgba(12,11,9,.86)),
    url("../img/loader-bg.jpg") center center / cover no-repeat, #060605!important}

/* ============================================================
   UBICACIÓN · intro animada v57 (referencia Ilummen)
   Imagen de fondo → reveal del contenido, una sola vez
   ============================================================ */
.loc-intro{position:absolute;inset:0;z-index:6;overflow:hidden;pointer-events:none;
  display:grid;place-items:center;opacity:0}
.loc-intro img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.loc-intro::after{content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(20,19,16,.5),rgba(15,14,12,.7))}
.loc-intro__label{position:relative;z-index:2;font-family:'Sora',sans-serif;font-weight:700;
  font-size:clamp(1.1rem,2.4vw,1.6rem);color:#f6f5f3;letter-spacing:.02em;
  text-shadow:0 0 22px rgba(212,175,55,.5);opacity:0}
/* al entrar (play): la intro aparece, se aclara y luego se desvanece revelando el mapa */
.mapview.play .loc-intro{animation:locIntro 1.9s var(--ease) forwards}
.mapview.play .loc-intro__label{animation:locLabel 1.9s var(--ease) forwards}
@keyframes locIntro{
  0%{opacity:0;transform:scale(1.08);filter:blur(8px)}
  22%{opacity:1;filter:blur(0)}
  70%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.02);visibility:hidden}}
@keyframes locLabel{0%{opacity:0;transform:translateY(12px)}25%{opacity:1;transform:none}72%{opacity:1}100%{opacity:0}}
/* contenido del mapa: aparece cuando la intro se está yendo */
.mapview .mapview__pane{transition:opacity .4s var(--ease)}
.mapview.play .mapview__pane.is-active{animation:locReveal 1.9s var(--ease) forwards}
@keyframes locReveal{0%,55%{opacity:0}100%{opacity:1}}
/* estado ya reproducido (reduce-motion): sin intro */
.mapview.played .loc-intro{display:none}

/* botón repetir intro de ubicación v58 */
.loc-replay{position:absolute;top:12px;right:12px;z-index:7;cursor:pointer;
  font-family:'Sora',sans-serif;font-weight:600;font-size:.8rem;color:#f6f5f3;
  padding:8px 14px;border-radius:100px;border:1px solid rgba(212,175,55,.4);
  background:rgba(22,21,18,.6);backdrop-filter:blur(8px);
  box-shadow:0 0 0 1px rgba(212,175,55,.1),0 6px 20px -8px rgba(212,175,55,.5);
  transition:all .3s var(--ease)}
.loc-replay:hover{color:#fff;border-color:rgba(212,175,55,.7);transform:translateY(-2px);
  box-shadow:0 0 22px -6px rgba(212,175,55,.6)}
.mapview.played .loc-replay{display:none}

/* ============================================================
   MÚSICA · botón flotante premium v59
   ============================================================ */
.music-fab{position:fixed;left:20px;bottom:22px;z-index:850;width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(212,175,55,.4);
  background:linear-gradient(160deg,rgba(35,33,29,.92),rgba(23,21,18,.92));backdrop-filter:blur(8px);
  box-shadow:0 0 0 1px rgba(212,175,55,.12),0 12px 28px -8px rgba(168,127,40,.6),0 0 22px -6px rgba(212,175,55,.5);
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s,opacity .3s}
.music-fab:hover{transform:scale(1.08);border-color:rgba(212,175,55,.7);
  box-shadow:0 0 0 1px rgba(212,175,55,.3),0 16px 34px -8px rgba(212,175,55,.7),0 0 30px -6px rgba(212,175,55,.7)}
.music-fab.bump{animation:musicBump .42s var(--ease)}
@keyframes musicBump{40%{transform:scale(.88)}100%{transform:scale(1)}}
/* ondas (reproduciendo) */
.music-fab__waves{display:flex;align-items:center;gap:3px;height:20px}
.music-fab__waves i{width:3px;height:6px;border-radius:2px;background:linear-gradient(180deg,#d4af37,#a87f28);
  box-shadow:0 0 6px rgba(212,175,55,.7);animation:musicWave 1s ease-in-out infinite}
.music-fab__waves i:nth-child(2){animation-delay:.15s}
.music-fab__waves i:nth-child(3){animation-delay:.3s}
.music-fab__waves i:nth-child(4){animation-delay:.45s}
@keyframes musicWave{0%,100%{height:6px}50%{height:18px}}
/* icono mute (pausado) */
.music-fab__mute{width:24px;height:24px;fill:none;stroke:#d4c59f;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:none}
.music-fab:not(.is-playing){opacity:.8}
.music-fab:not(.is-playing) .music-fab__waves{display:none}
.music-fab:not(.is-playing) .music-fab__mute{display:block}
@media(max-width:560px){.music-fab{left:16px;bottom:16px;width:50px;height:50px}}
@media(prefers-reduced-motion:reduce){.music-fab__waves i{animation:none;height:12px}}

/* ============================================================
   UBICACIÓN · escaneo tipo radar/GPS v59 (sin texto)
   ============================================================ */
.mapview.play .loc-intro{animation:locIntro 4.4s var(--ease) forwards!important}
@keyframes locIntro{
  0%{opacity:0;transform:scale(1.05);filter:blur(6px)}
  8%{opacity:1;filter:blur(0)}
  82%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.02);visibility:hidden}}
.mapview.play .mapview__pane.is-active{animation:locReveal 4.4s var(--ease) forwards!important}
@keyframes locReveal{0%,78%{opacity:0}100%{opacity:1}}
.loc-intro__label{display:none!important}
/* imagen de fondo atenuada + tinte azul */
.loc-intro img{filter:saturate(1.1) brightness(.7)}
.loc-intro::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(160deg,rgba(18,17,14,.62),rgba(14,13,11,.72)),radial-gradient(70% 70% at 50% 45%,rgba(168,127,40,.18),transparent 70%)}
.scan{position:absolute;inset:0;z-index:2;overflow:hidden}
.scan>*{position:absolute}
/* cuadrícula tecnológica */
.scan__grid{inset:0;opacity:0;
  background-image:linear-gradient(rgba(236,209,139,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(236,209,139,.16) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask:radial-gradient(70% 70% at 50% 48%,#000,transparent 78%);mask:radial-gradient(70% 70% at 50% 48%,#000,transparent 78%);
  animation:scanGrid 4.4s ease-out forwards}
@keyframes scanGrid{0%{opacity:0;transform:scale(1.1)}18%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0}}
/* radar: anillos concéntricos */
.scan__radar{top:50%;left:50%;width:0;height:0;transform:translate(-50%,-50%)}
.scan__radar span{position:absolute;top:50%;left:50%;border:1.5px solid rgba(212,175,55,.5);border-radius:50%;
  transform:translate(-50%,-50%);width:40px;height:40px;opacity:0;
  box-shadow:0 0 18px rgba(212,175,55,.4);animation:radarPulse 2.4s ease-out infinite}
.scan__radar span:nth-child(2){animation-delay:.8s}
.scan__radar span:nth-child(3){animation-delay:1.6s}
@keyframes radarPulse{0%{width:40px;height:40px;opacity:.9}100%{width:min(90vw,520px);height:min(90vw,520px);opacity:0}}
/* barrido rotatorio del radar */
.scan__sweep{top:50%;left:50%;width:min(80vw,440px);height:min(80vw,440px);transform:translate(-50%,-50%);border-radius:50%;
  background:conic-gradient(from 0deg,rgba(212,175,55,.35),rgba(212,175,55,0) 60deg,transparent 360deg);
  -webkit-mask:radial-gradient(circle,transparent 0,#000 0);opacity:0;mix-blend-mode:screen;
  animation:scanSweepIn .6s ease forwards .3s, scanSpin 2.2s linear infinite .3s}
@keyframes scanSweepIn{to{opacity:.9}}
@keyframes scanSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* barra de escaneo horizontal */
.scan__bar{left:0;right:0;height:2px;top:0;
  background:linear-gradient(90deg,transparent,rgba(236,209,139,.9),transparent);
  box-shadow:0 0 16px rgba(212,175,55,.8);opacity:0;animation:scanBar 3.4s ease-in-out forwards .2s}
@keyframes scanBar{0%{top:0;opacity:0}10%{opacity:1}85%{opacity:1}100%{top:100%;opacity:0}}
/* puntos de geolocalización */
.scan__pin{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#f6f5f3,#d4af37);
  box-shadow:0 0 12px #d4af37;opacity:0;transform:scale(0)}
.sp1{top:32%;left:24%;animation:pinPop .5s var(--ease) forwards 1.4s}
.sp2{top:64%;left:40%;animation:pinPop .5s var(--ease) forwards 1.9s}
.sp3{top:42%;left:70%;animation:pinPop .5s var(--ease) forwards 2.4s}
@keyframes pinPop{0%{opacity:0;transform:scale(0)}60%{opacity:1;transform:scale(1.3)}100%{opacity:1;transform:scale(1)}}
/* pin objetivo: anillo latiendo */
.scan__pin.is-target{width:18px;height:18px}
.scan__pin.is-target::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(212,175,55,.7);
  animation:targetRing 1.4s ease-out infinite 2.4s}
@keyframes targetRing{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.8);opacity:0}}
/* líneas que conectan los puntos (se dibujan) */
.scan__links{top:0;left:0;width:100%;height:100%;fill:none;stroke:rgba(236,209,139,.7);stroke-width:.6;
  stroke-dasharray:200;stroke-dashoffset:200;filter:drop-shadow(0 0 4px rgba(212,175,55,.6));
  animation:linkDraw 1.1s ease forwards 2s}
@keyframes linkDraw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  .mapview.play .loc-intro{animation:none!important;opacity:0!important;visibility:hidden!important}
  .mapview.play .mapview__pane.is-active{animation:none!important;opacity:1!important}
}

/* ============================================================
   UBICACIÓN escaneo v60 — limpieza: radar centrado, sin líneas
   ============================================================ */
.scan__links{display:none!important}
.scan__pin.is-target{top:50%;left:50%;width:20px;height:20px;
  transform:translate(-50%,-50%) scale(0);opacity:0;
  animation:pinTarget .6s var(--ease) forwards 2.2s}
@keyframes pinTarget{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}
  60%{opacity:1;transform:translate(-50%,-50%) scale(1.25)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.scan__pin.is-target::after{content:"";position:absolute;inset:-10px;border-radius:50%;
  border:2px solid rgba(212,175,55,.7);animation:targetRing 1.5s ease-out infinite 2.6s}
/* punto de anclaje bajo el pin (marcador GPS) */
.scan__pin.is-target::before{content:"";position:absolute;left:50%;top:100%;width:2px;height:14px;
  transform:translateX(-50%);background:linear-gradient(rgba(212,175,55,.8),transparent);
  opacity:0;animation:pinStem .5s ease forwards 2.5s}
@keyframes pinStem{to{opacity:1}}

/* ============================================================
   HERO ILUMINACIÓN v61 — parte inferior más luminosa,
   botones protagonistas, cards con más contraste
   ============================================================ */
/* transición inferior suave y luminosa (antes oscurecía de más) */
.hero{
  -webkit-mask:linear-gradient(180deg,#000 0%,#000 90%,rgba(0,0,0,.85) 97%,transparent 100%)!important;
          mask:linear-gradient(180deg,#000 0%,#000 90%,rgba(0,0,0,.85) 97%,transparent 100%)!important}
/* luz ambiental inferior azul (glow que sube desde la base del hero) */
.hero::before{content:"";position:absolute;left:0;right:0;bottom:-4%;height:38%;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 100% at 32% 100%, rgba(168,127,40,.20), transparent 70%),
    radial-gradient(55% 100% at 72% 100%, rgba(212,175,55,.16), transparent 72%);
  filter:blur(20px)}
/* refuerzo del halo del render */
.scene--img .hx-amb{background:radial-gradient(50% 46% at var(--gx) var(--gy),
    rgba(212,175,55,.34),rgba(168,127,40,.17) 48%,transparent 76%)!important}

/* BOTONES protagonistas: más brillo/glow/contraste (sin cambiar color) */
.hero__cta .btn-glass{
  box-shadow:0 0 0 1px rgba(236,209,139,.5),0 16px 40px -10px rgba(168,127,40,.85),
    0 0 34px -4px rgba(212,175,55,.65)!important;
  animation:heroBtnGlow 3.6s ease-in-out infinite}
@keyframes heroBtnGlow{50%{box-shadow:0 0 0 1px rgba(242,222,173,.7),0 18px 46px -8px rgba(212,175,55,.9),0 0 44px -2px rgba(212,175,55,.8)}}
.hero__cta .btn-line{background:rgba(36,34,30,.5)!important;color:#f9f9f8!important;
  border-color:rgba(239,215,156,.5)!important;
  box-shadow:0 0 0 1px rgba(212,175,55,.14),0 10px 26px -12px rgba(168,127,40,.6),0 0 18px -6px rgba(212,175,55,.4)!important}

/* CARDS inferiores (beneficios) con más contraste y borde luminoso */
.beneficios-band .bene-card{
  background:linear-gradient(160deg,rgba(68,54,18,.72),rgba(28,26,22,.6))!important;
  border-color:rgba(212,175,55,.4)!important;
  box-shadow:0 0 0 1px rgba(212,175,55,.16),0 0 30px -8px rgba(212,175,55,.45),
    0 22px 50px -22px rgba(0,0,0,.6)!important}

/* ============================================================
   TRABAJOS · comparador antes/después con fotos reales v62
   ============================================================ */
.compare--photo{max-width:300px;aspect-ratio:9/16;margin-inline:auto;
  border:1px solid rgba(212,175,55,.3);
  box-shadow:0 0 0 1px rgba(212,175,55,.1),0 0 44px -14px rgba(212,175,55,.45),0 34px 80px -34px rgba(0,0,0,.8);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s}
.compare--photo:hover{transform:translateY(-4px);border-color:rgba(212,175,55,.55);
  box-shadow:0 0 0 1px rgba(212,175,55,.4),0 0 60px -8px rgba(212,175,55,.6),0 40px 90px -30px rgba(168,127,40,.6)}
/* imágenes reales (fondo blanco removido → teléfono flota sobre el azul) */
.compare--photo{border:0!important;box-shadow:none!important;background:none!important}
/* sin fondo: cada capa se recorta a su propio slice (no se solapan), el teléfono PNG flota transparente */
.compare--photo .compare__after,.compare--photo .compare__before{background:transparent!important}
html[data-theme="light"] .compare--photo .compare__after,html[data-theme="light"] .compare--photo .compare__before{background:transparent!important}
.compare--photo .compare__after::before,.compare--photo .compare__before::before{content:none!important}
.compare--photo .compare__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 24px 50px rgba(0,0,0,.5)) drop-shadow(0 0 40px rgba(212,175,55,.22));
  transition:transform .6s var(--ease)}
.compare--photo:hover .compare__img{transform:scale(1.03)}
/* etiquetas premium con la identidad del sitio */
.compare--photo .compare__lbl{top:14px;font-weight:700;letter-spacing:.04em;
  background:rgba(20,19,16,.7);border:1px solid rgba(212,175,55,.35);backdrop-filter:blur(6px);
  box-shadow:0 0 18px -6px rgba(212,175,55,.5);z-index:3}
.compare--photo .compare__lbl--after{right:14px;left:auto}
.compare--photo .compare__lbl--before{left:14px;right:auto}
/* entrada fade + zoom */
.compare--photo.reveal{opacity:0;transform:translateY(26px) scale(.97);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.compare--photo.reveal.in{opacity:1;transform:none}

/* ============================================================
   Accesos admin en el footer (centrados, discretos) v63
   ============================================================ */
.footer__admin{position:relative;z-index:1;display:flex;justify-content:center;gap:12px;flex-wrap:wrap;
  margin-top:22px;padding-top:18px;border-top:1px solid rgba(212,175,55,.1)}
.footer__adminbtn{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:600;color:#d4c59f;
  padding:9px 16px;border-radius:100px;border:1px solid rgba(212,175,55,.22);background:rgba(28,26,22,.4);
  transition:all .28s var(--ease)}
.footer__adminbtn:hover{color:#f6f5f3;border-color:rgba(212,175,55,.55);transform:translateY(-2px);
  box-shadow:0 0 20px -6px rgba(212,175,55,.55)}

/* aviso de tope de stock en el carrito */
.cart-toast.bad{border-color:#ffce6a;box-shadow:0 0 26px -8px rgba(255,206,106,.6);color:#ffe9b8}

/* ============================================================
   ANIMACIONES PREMIUM v67 — reveal enriquecido + microinteracciones
   Solo transform/opacity/filter (GPU). Una vez, al entrar.
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px) scale(.988);filter:blur(3px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),filter .6s var(--ease);
  will-change:opacity,transform}
.reveal.in{opacity:1;transform:none;filter:blur(0)}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;filter:none;transition:none}}

/* botones: press (reduce escala) + recuperación */
.btn,.btn-glass,.btn-line,.btn--primary,.pcard__add,.pcard__view,.cat-tab,.testi__btn,.mapswitch__btn{transition:transform .25s var(--ease),box-shadow .3s var(--ease),background .3s,border-color .3s,color .25s}
.btn:active,.btn-glass:active,.btn-line:active,.btn--primary:active,.pcard__add:active,.pcard__view:active,.mapswitch__btn:active,.loc-replay:active{transform:scale(.95)}

/* imágenes: entran con zoom+blur que se aclara */
.porque__photo.reveal .porque__img,.compare--photo.reveal .compare__img{transform:scale(1.08);filter:blur(6px);transition:transform 1s var(--ease),filter .8s var(--ease)}
.porque__photo.reveal.in .porque__img,.compare--photo.reveal.in .compare__img{transform:none;filter:blur(0)}

/* micro-vida en iconos/emoji al entrar la card */
.card.reveal.in .srv__ico .emoji,.bene-card.in .bene-ico .emoji,.lab-card .lab-ico .emoji{animation:emojiPop .6s var(--ease)}
@keyframes emojiPop{0%{transform:scale(.6) rotate(-8deg)}60%{transform:scale(1.12) rotate(4deg)}100%{transform:scale(1) rotate(0)}}

/* ============================================================
   FONDO v67 — más presencia (sin costo de scroll) + GPU hints
   ============================================================ */
.site-bg .bgx{transform:translateZ(0)}
.bgx-halos{opacity:1!important}
.bgx-wire{opacity:.72!important}
.bgx-blobs{opacity:.66!important}
#bgParticles{opacity:1}
.bgx-vignette{background:radial-gradient(135% 105% at 50% 28%,transparent 64%,rgba(10,9,8,.4) 100%)!important}

/* ============================================================
   TÍTULOS DE SECCIÓN v68 — rediseño premium + acento animado
   Degradado azul de marca, glow sutil, barra luminosa debajo.
   ============================================================ */
.sec-head h2,.porque__copy h2,.form-sec__aside h2,.contacto__info h2,.faq h2{
  position:relative;display:inline-block;font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(100deg,#ffffff 0%,#eae8e4 45%,#edd391 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;filter:drop-shadow(0 0 18px rgba(212,175,55,.18));padding-bottom:14px}
/* barra luminosa bajo el título (centrada en heads centrados, izq en left) */
.sec-head h2::after,.porque__copy h2::after,.form-sec__aside h2::after,.contacto__info h2::after,.faq h2::after{
  content:"";position:absolute;left:50%;bottom:0;height:3px;width:0;border-radius:3px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,#a87f28,#d4af37,transparent);
  box-shadow:0 0 14px rgba(212,175,55,.7);transition:width 1.1s var(--ease) .25s}
.sec-head--left h2::after,.porque__copy h2::after,.form-sec__aside h2::after,.contacto__info h2::after{left:0;transform:none;
  background:linear-gradient(90deg,#a87f28,#d4af37,transparent)}
/* al entrar la sección (reveal.in en la cabecera) crece la barra */
.reveal.in .sec-head h2::after,.sec-head.reveal.in h2::after,
.reveal.in.porque__copy h2::after,.porque__copy.reveal.in h2::after,
.form-sec__aside.reveal.in h2::after,.contacto__info.reveal.in h2::after,
.faq .sec-head.reveal.in h2::after{width:min(160px,60%)}
.sec-head--left.reveal.in h2::after,.porque__copy.reveal.in h2::after,.form-sec__aside.reveal.in h2::after,.contacto__info.reveal.in h2::after{width:96px}

/* reveal del título: aparición desde abajo + blur + glow temporal */
.reveal .sec-head h2,.sec-head.reveal h2,.porque__copy.reveal h2,.form-sec__aside.reveal h2,.contacto__info.reveal h2{
  opacity:0;transform:translateY(26px) scale(.97);filter:blur(6px) drop-shadow(0 0 26px rgba(212,175,55,.5));
  transition:opacity 1s var(--ease),transform 1.1s var(--ease),filter 1.1s var(--ease)}
.reveal.in .sec-head h2,.sec-head.reveal.in h2,.porque__copy.reveal.in h2,.form-sec__aside.reveal.in h2,.contacto__info.reveal.in h2{
  opacity:1;transform:none;filter:blur(0) drop-shadow(0 0 18px rgba(212,175,55,.18))}

/* etiqueta (sec-tag) más tech */
.sec-tag{position:relative;overflow:hidden}
.sec-tag::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg)}
.reveal.in .sec-tag::after,.sec-head.reveal.in .sec-tag::after{animation:tagShine 1.1s var(--ease) .3s}
@keyframes tagShine{to{left:130%}}

@media(max-width:560px){
  .sec-head h2::after{width:0}
  .reveal.in .sec-head h2::after,.sec-head.reveal.in h2::after{width:min(120px,50%)}
}
@media(prefers-reduced-motion:reduce){
  .sec-head h2,.porque__copy h2,.form-sec__aside h2,.contacto__info h2{filter:none;transition:none}
}

/* ============================================================
   TÍTULOS v69 — NEÓN intenso (glow marcado + barra vibrante)
   ============================================================ */
.sec-head h2,.porque__copy h2,.form-sec__aside h2,.contacto__info h2,.faq h2{
  background:linear-gradient(100deg,#ffffff 0%,#f2deac 40%,#c8a24a 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
  filter:drop-shadow(0 0 10px rgba(212,175,55,.55)) drop-shadow(0 0 30px rgba(168,127,40,.45))!important;
  animation:titleNeon 3.2s ease-in-out infinite}
@keyframes titleNeon{50%{filter:drop-shadow(0 0 16px rgba(212,175,55,.85)) drop-shadow(0 0 44px rgba(212,175,55,.6))}}

/* barra: más gruesa, más brillante, con pulso neón */
.sec-head h2::after,.porque__copy h2::after,.form-sec__aside h2::after,.contacto__info h2::after,.faq h2::after{
  height:4px!important;
  background:linear-gradient(90deg,transparent,#d4af37,#f6f5f3,#d4af37,transparent)!important;
  box-shadow:0 0 12px #d4af37,0 0 26px rgba(212,175,55,.9),0 0 44px rgba(168,127,40,.6)!important;
  animation:barPulse 2.4s ease-in-out infinite}
@keyframes barPulse{50%{box-shadow:0 0 18px #d4af37,0 0 40px #d4af37,0 0 70px rgba(168,127,40,.8)}}

/* al entrar: destello neón fuerte del título */
.reveal.in .sec-head h2,.sec-head.reveal.in h2,.porque__copy.reveal.in h2,.form-sec__aside.reveal.in h2,.contacto__info.reveal.in h2{
  animation:titleNeonIn 1.2s var(--ease),titleNeon 3.2s ease-in-out 1.2s infinite}
@keyframes titleNeonIn{0%{filter:blur(8px) drop-shadow(0 0 50px rgba(212,175,55,1))}100%{filter:blur(0) drop-shadow(0 0 12px rgba(212,175,55,.6))}}

@media(prefers-reduced-motion:reduce){
  .sec-head h2,.porque__copy h2,.form-sec__aside h2,.contacto__info h2,.faq h2{animation:none}
  .sec-head h2::after{animation:none}
}

/* Proceso lab: card uniforme en móvil + número alineado */
@media(max-width:900px){
  .lab-card{min-height:auto!important;align-items:flex-start!important;padding:20px 18px 18px!important}
  .lab-num{top:12px;right:14px;font-size:1.9rem}
}

/* ============================================================
   PROCESO (steps) v71 — línea gruesa luminosa + pasos animados
   ============================================================ */
.proceso .steps{position:relative}
/* línea base más gruesa y visible */
.proceso .steps::before{top:32px!important;height:5px!important;left:11%;right:11%;border-radius:6px;
  background:rgba(228,190,92,.18)!important;opacity:1!important}
/* relleno luminoso que corre por encima (flujo neón) */
.proceso .steps::after{content:"";position:absolute;top:32px;left:11%;right:11%;height:5px;border-radius:6px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,#a87f28,#d4af37,#f6f5f3,#d4af37,#a87f28);background-size:220% 100%;
  box-shadow:0 0 14px rgba(212,175,55,.8),0 0 30px rgba(168,127,40,.5);
  -webkit-mask:linear-gradient(90deg,#000,#000);mask:linear-gradient(90deg,#000,#000);
  animation:stepFlow 4s linear infinite}
@keyframes stepFlow{to{background-position:220% 0}}
@media(max-width:768px){.proceso .steps::after{display:none}}

/* números: círculo con más presencia + aparición pop al entrar */
.proceso .step__n{width:64px;height:64px;font-size:1.5rem;position:relative;z-index:3;
  background:radial-gradient(circle at 30% 28%,#574517,#11100e)!important;
  border:1.5px solid rgba(212,175,55,.6)!important;
  box-shadow:0 0 0 6px rgba(212,175,55,.08),0 0 26px -4px rgba(212,175,55,.75),inset 0 0 16px -6px rgba(212,175,55,.6)!important;
  color:#f6f5f3!important;text-shadow:0 0 12px rgba(212,175,55,.8)}
/* anillo que pulsa alrededor del número */
.proceso .step__n::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(212,175,55,.5);
  animation:stepRing 2.6s ease-out infinite}
@keyframes stepRing{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.5);opacity:0}}
.proceso .step:nth-child(2) .step__n::after{animation-delay:.6s}
.proceso .step:nth-child(3) .step__n::after{animation-delay:1.2s}
.proceso .step:nth-child(4) .step__n::after{animation-delay:1.8s}

/* entrada del número (reveal.in del step) */
.proceso .step.reveal .step__n{transform:scale(.4);opacity:0;filter:blur(4px);transition:transform .7s var(--ease),opacity .7s,filter .7s}
.proceso .step.reveal.in .step__n{transform:scale(1);opacity:1;filter:none}
.proceso .step.reveal h3,.proceso .step.reveal p{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease) .18s,transform .6s var(--ease) .18s}
.proceso .step.reveal.in h3,.proceso .step.reveal.in p{opacity:1;transform:none}
.proceso .step h3{text-shadow:0 0 16px rgba(212,175,55,.28)}

/* hover del paso */
.proceso .step:hover .step__n{transform:translateY(-5px) scale(1.08)!important;
  box-shadow:0 0 0 6px rgba(212,175,55,.12),0 0 40px -2px rgba(212,175,55,.9)!important}
@media(prefers-reduced-motion:reduce){
  .proceso .steps::after,.proceso .step__n::after{animation:none}
}

/* ============================================================
   HERO TÍTULO v72 — reveal cinematográfico (más notorio)
   máscara por línea + subida + blur→foco + escala + glow que baja
   ============================================================ */
.hero__title .tline{overflow:hidden;padding:2px 0}
/* redefine el revelado de cada línea (más recorrido y glow temporal) */
@keyframes titleReveal{
  0%{transform:translateY(118%) scale(.92);filter:blur(14px);opacity:0}
  35%{opacity:1}
  62%{transform:translateY(-5%) scale(1.015);filter:blur(3px) drop-shadow(0 0 30px rgba(212,175,55,.85))}
  100%{transform:translateY(0) scale(1);filter:blur(0) drop-shadow(0 0 8px rgba(212,175,55,.18))}}
/* barra de luz que barre cada línea al construirla (más visible) */
.hero__title .tline::before{width:120px!important;
  background:linear-gradient(90deg,transparent,rgba(223,220,212,1),rgba(236,209,139,.6),transparent)!important;
  filter:blur(6px)!important;height:auto;top:0;bottom:0}
@keyframes titleSweep{0%{left:-160px;opacity:0}14%{opacity:1}82%{opacity:1}100%{left:105%;opacity:0}}

/* ============================================================
   CTA FINAL título v72 — mismo lenguaje premium + reveal
   ============================================================ */
.cta-final__box h2,.resenas__box h2{
  background:linear-gradient(100deg,#ffffff,#f2deac 45%,#c8a24a)!important;
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
  filter:drop-shadow(0 0 10px rgba(212,175,55,.5));display:inline-block;position:relative;padding-bottom:14px;
  animation:titleNeon 3.2s ease-in-out infinite}
.cta-final__box h2::after,.resenas__box h2::after{content:"";position:absolute;left:50%;bottom:0;height:4px;width:0;
  transform:translateX(-50%);border-radius:4px;
  background:linear-gradient(90deg,transparent,#d4af37,#f6f5f3,#d4af37,transparent);
  box-shadow:0 0 12px #d4af37,0 0 30px rgba(212,175,55,.8);transition:width 1.1s var(--ease) .2s;animation:barPulse 2.4s ease-in-out infinite}
.cta-final__box.reveal.in h2::after,.resenas__box.reveal.in h2::after{width:min(200px,64%)}
.cta-final__box.reveal h2,.resenas__box.reveal h2{opacity:0;transform:translateY(26px) scale(.96);filter:blur(8px) drop-shadow(0 0 40px rgba(212,175,55,.7));
  transition:opacity 1s var(--ease),transform 1.1s var(--ease),filter 1.1s var(--ease)}
.cta-final__box.reveal.in h2,.resenas__box.reveal.in h2{opacity:1;transform:none;filter:blur(0) drop-shadow(0 0 12px rgba(212,175,55,.4))}
@media(prefers-reduced-motion:reduce){.cta-final__box h2,.resenas__box h2{animation:none}}

/* ============================================================
   CONTROLES UI (tema + idioma) v73
   ============================================================ */
.ui-ctrls{display:flex;align-items:center;gap:8px;justify-self:end}
.ui-theme,.ui-lang{height:38px;border-radius:100px;border:1px solid rgba(212,175,55,.28);
  background:rgba(28,26,22,.5);backdrop-filter:blur(6px);color:#f0eeea;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;transition:all .3s var(--ease)}
.ui-theme{width:38px;justify-content:center;font-size:1.05rem}
.ui-lang{padding:0 12px;font-family:"Sora",sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.03em}
.ui-theme:hover,.ui-lang:hover{border-color:rgba(212,175,55,.6);box-shadow:0 0 18px -6px rgba(212,175,55,.5);transform:translateY(-1px)}
.ui-theme__ico::before{content:"\1F319"}
html[data-theme="light"] .ui-theme__ico::before{content:"\2600"}
.ui-lang__sep{opacity:.4}
.ui-lang span{transition:color .25s,opacity .25s}
.ui-lang__es,.ui-lang__en{opacity:.45}
.ui-lang__es.on,.ui-lang__en.on{opacity:1;color:var(--cyan);text-shadow:0 0 10px rgba(212,175,55,.6)}
@media(max-width:560px){.ui-lang{padding:0 10px}.ui-theme,.ui-lang{height:34px}}

body,.header,.card,.pcard,.bene-card,.fcard,.footer,.field input,.field select,.field textarea,
.accordion details,.contacto__map,.sidecart,.mapswitch__btn,.srv__ico,.bene-ico{
  transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}

/* ============================================================
   MODO CLARO v73 — paleta tecnologica clara Area Digital
   ============================================================ */
html[data-theme="light"]{--white:#3f3212;--muted:#998249;--line:rgba(138,105,22,.14)}
html[data-theme="light"] body{background:#f4f3f0!important;color:#483b1a}
html[data-theme="light"] .site-bg{background:
  radial-gradient(80% 60% at 62% 20%, #f6f5f3 0%, transparent 60%),
  radial-gradient(70% 60% at 15% 90%, #eeece8 0%, transparent 60%),
  linear-gradient(160deg,#f7f6f4 0%,#f0eeea 50%,#f5f4f2 100%)!important}
html[data-theme="light"] .bgx-halos{opacity:.45!important}
html[data-theme="light"] .bgx-wire{opacity:.25!important}
html[data-theme="light"] .bgx-blobs{opacity:.4!important}
html[data-theme="light"] #bgParticles{opacity:.35}
html[data-theme="light"] .bgx-vignette{background:radial-gradient(140% 110% at 50% 30%,transparent 60%,rgba(200,177,120,.14) 100%)!important}
html[data-theme="light"] .site-bg::after{display:none!important}

html[data-theme="light"] .sec-head p,html[data-theme="light"] .bene-card p,html[data-theme="light"] .srv p,
html[data-theme="light"] .lab-card p,html[data-theme="light"] .step p,html[data-theme="light"] .accordion p,
html[data-theme="light"] .porque__copy .lead,html[data-theme="light"] .checklist li,html[data-theme="light"] .hero__sub,
html[data-theme="light"] .footer p,html[data-theme="light"] .footer a,html[data-theme="light"] .pcard__brand,
html[data-theme="light"] .testi__card p,html[data-theme="light"] .contacto__list li{color:#756439!important}

html[data-theme="light"] .header{background:rgba(255,255,255,.72)!important;border-bottom-color:rgba(138,105,22,.12)!important;
  box-shadow:0 1px 0 rgba(168,127,40,.12),0 6px 24px -18px rgba(168,127,40,.5)!important}
html[data-theme="light"] .nav a{color:#6f5e35}
html[data-theme="light"] .nav a:hover{color:#dfb03a}
html[data-theme="light"] .brand__name{background:linear-gradient(100deg,#674f11,#dfb03a,#c29420)!important;-webkit-background-clip:text;background-clip:text}
html[data-theme="light"] .hamb span{background:#483b1a}
html[data-theme="light"] .mobile-menu{background:rgba(251,250,249,.98)!important;border-left-color:rgba(138,105,22,.12)}
html[data-theme="light"] .mobile-menu a{color:#6f5e35;border-bottom-color:rgba(138,105,22,.1)}
html[data-theme="light"] .ui-theme,html[data-theme="light"] .ui-lang{background:rgba(255,255,255,.7);color:#635227;border-color:rgba(138,105,22,.2)}

html[data-theme="light"] .sec-head h2,html[data-theme="light"] .porque__copy h2,
html[data-theme="light"] .form-sec__aside h2,html[data-theme="light"] .contacto__info h2,
html[data-theme="light"] .faq h2,html[data-theme="light"] .cta-final__box h2{
  background:linear-gradient(100deg,#674f11,#dfb03a 50%,#c29420)!important;-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 8px rgba(168,127,40,.25))!important}
html[data-theme="light"] .hero__title .tline>span{
  background:linear-gradient(180deg,#6e5412,#dfb03a 60%,#c29420)!important;-webkit-background-clip:text;background-clip:text}

html[data-theme="light"] .card,html[data-theme="light"] .cat-card,html[data-theme="light"] .bene-card,
html[data-theme="light"] .testi__card,html[data-theme="light"] .form,html[data-theme="light"] .accordion details,
html[data-theme="light"] .porque__badge,html[data-theme="light"] .pill,html[data-theme="light"] .lab-card,
html[data-theme="light"] .pcard{
  background:linear-gradient(160deg,rgba(255,255,255,.86),rgba(247,246,244,.8))!important;
  border-color:rgba(138,105,22,.14)!important;
  box-shadow:0 0 0 1px rgba(168,127,40,.06),0 14px 34px -22px rgba(110,84,20,.35)!important}
html[data-theme="light"] .card h3,html[data-theme="light"] .bene-card h3,html[data-theme="light"] .lab-card h3,
html[data-theme="light"] .pcard__name a,html[data-theme="light"] .step h3,html[data-theme="light"] .testi__top strong{color:#4a3b16!important}
html[data-theme="light"] .stat b,html[data-theme="light"] .pcard__price{color:#6e5412!important}

html[data-theme="light"] .srv__ico,html[data-theme="light"] .bene-ico,html[data-theme="light"] .lab-ico{
  background:radial-gradient(circle at 30% 25%,rgba(168,127,40,.14),rgba(212,175,55,.06))!important;
  border-color:rgba(168,127,40,.3)!important}

html[data-theme="light"] .btn-line{color:#635227!important;border-color:rgba(138,105,22,.28)!important;background:rgba(255,255,255,.6)!important}
html[data-theme="light"] .btn--ghost{background:rgba(255,255,255,.7);color:#635227;border-color:rgba(138,105,22,.2)}
html[data-theme="light"] .pcard__view{color:#635227!important;border-color:rgba(138,105,22,.25)!important}

html[data-theme="light"] .field input,html[data-theme="light"] .field select,html[data-theme="light"] .field textarea,
html[data-theme="light"] .search input,html[data-theme="light"] .filters select{
  background:rgba(255,255,255,.85)!important;border-color:rgba(138,105,22,.2)!important;color:#4a3b16!important}
html[data-theme="light"] .field label{color:#998249}

html[data-theme="light"] .marquee__track span{background:linear-gradient(160deg,rgba(255,255,255,.8),rgba(245,244,242,.7))!important;color:#6f5e35!important;border-color:rgba(138,105,22,.14)!important}
html[data-theme="light"] .footer{background:linear-gradient(180deg,transparent,rgba(255,255,255,.5))!important}
html[data-theme="light"] .footer h4{color:#4a3b16}
html[data-theme="light"] .footer__bar{color:#998249}
html[data-theme="light"] .accordion summary{color:#4a3b16}
html[data-theme="light"] .mapview__pane iframe{filter:none!important}
html[data-theme="light"] .mapswitch__btn{background:rgba(255,255,255,.7)!important;color:#635227!important;border-color:rgba(138,105,22,.2)!important}
html[data-theme="light"] .sidecart{background:linear-gradient(180deg,rgba(253,253,252,.98),rgba(247,246,244,.98))!important;border-left-color:rgba(138,105,22,.16)}
html[data-theme="light"] .sc-item{background:rgba(255,255,255,.7)!important;border-color:rgba(138,105,22,.12)}
html[data-theme="light"] .cart-btn,html[data-theme="light"] .music-fab{background:rgba(255,255,255,.75)!important;color:#635227!important;border-color:rgba(138,105,22,.2)!important}
html[data-theme="light"] .filters{background:linear-gradient(160deg,rgba(255,255,255,.85),rgba(247,246,244,.8))!important;border-color:rgba(138,105,22,.14)!important}
html[data-theme="light"] .pg{background:rgba(255,255,255,.7);color:#635227;border-color:rgba(138,105,22,.18)}

/* ============================================================
   HEADER v74 — layout flex (logo · nav · tema · idioma · carrito · menú)
   ============================================================ */
.header__inner{display:flex!important;align-items:center;gap:14px;grid-template-columns:none!important}
.header .brand{flex:0 0 auto;justify-self:auto}
.header .nav{flex:1 1 auto;justify-content:center;margin:0!important;justify-self:auto}
.header .ui-ctrls{flex:0 0 auto;order:3}
.header .cart-btn{flex:0 0 auto;order:4;margin-left:0!important;justify-self:auto}
.header .hamb{flex:0 0 auto;order:5;margin:0!important}
.header .ui-ctrls{order:3}
/* asegurar visibilidad del nombre de marca */
.brand__name{display:inline-block!important}
@media(max-width:960px){
  .header .nav{display:none}
  .header .ui-ctrls,.header .cart-btn{margin-left:auto}
  .header .cart-btn{margin-left:0}
}
@media(max-width:560px){
  .header__inner{gap:9px}
  .brand__name{font-size:.92rem;letter-spacing:.1em}
}

/* CTA final título: siempre visible (fix "se ve mal") */
.cta-final__box h2,.resenas__box h2{opacity:1!important;transform:none!important;
  filter:drop-shadow(0 0 10px rgba(212,175,55,.4))!important;display:inline-block;text-align:center}
html[data-theme="light"] .cta-final__box h2{filter:drop-shadow(0 0 8px rgba(168,127,40,.25))!important}

/* ============================================================
   FIX modo claro v75 — textos con degradado/blanco que no se veían
   ============================================================ */
html[data-theme="light"] .brand__name{
  background:none!important;-webkit-text-fill-color:#6e5412!important;color:#6e5412!important;
  animation:none!important;filter:none!important;text-shadow:none!important}
html[data-theme="light"] .loader__tag{color:#998249}
html[data-theme="light"] .sec-tag{color:#dfb03a!important;border-color:rgba(168,127,40,.3);background:rgba(168,127,40,.06)}
html[data-theme="light"] .link-wa,html[data-theme="light"] .socials a,html[data-theme="light"] .pcard__off,html[data-theme="light"] .pcard__old{color:#dfb03a!important}
html[data-theme="light"] .hero__sub,html[data-theme="light"] .hx-chip b{color:#756439!important}
html[data-theme="light"] .hx-chip{background:linear-gradient(160deg,rgba(255,255,255,.85),rgba(245,244,242,.75))!important;border-color:rgba(168,127,40,.35)!important}
html[data-theme="light"] .testi__meta,html[data-theme="light"] .pcard__meta,html[data-theme="light"] .footer__bar span{color:#998249!important}
html[data-theme="light"] .footer__adminbtn{color:#6f5e35!important;border-color:rgba(138,105,22,.2)}
html[data-theme="light"] .step__n{color:#6e5412!important}
html[data-theme="light"] .compare__lbl{color:#4a3b16!important;background:rgba(255,255,255,.8);border-color:rgba(138,105,22,.14)}
html[data-theme="light"] .accordion summary::after{color:#dfb03a}
html[data-theme="light"] .catalog-hero h1,html[data-theme="light"] .catalog-hero p{color:#483b1a!important}

/* ============================================================
   FIX v76 — hero título visible + CTA + logo claro + espacio catálogo
   ============================================================ */
/* BUG: el keyframe v72 no fijaba opacity en 100% -> forwards volvía a opacity:0.
   Redefinición final con opacity:1 en 100% (última gana). */
@keyframes titleReveal{
  0%{transform:translateY(118%) scale(.92);filter:blur(14px);opacity:0}
  35%{opacity:1}
  62%{transform:translateY(-5%) scale(1.015);filter:blur(3px) drop-shadow(0 0 30px rgba(212,175,55,.85));opacity:1}
  100%{transform:translateY(0) scale(1);filter:blur(0) drop-shadow(0 0 8px rgba(212,175,55,.18));opacity:1}}
/* seguro extra: una vez entrado, el título nunca queda oculto */
body.entered .hero__title .tline>span{opacity:1}

/* CTA final título — limpio y legible en ambos modos (sin flicker) */
.cta-final__box h2,.resenas__box h2{
  animation:none!important;opacity:1!important;transform:none!important;
  background:linear-gradient(100deg,#ffffff,#f2deac 45%,#c8a24a)!important;
  -webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important;
  filter:drop-shadow(0 0 12px rgba(212,175,55,.4))!important;display:inline-block;text-align:center;padding-bottom:14px}
html[data-theme="light"] .cta-final__box h2,html[data-theme="light"] .resenas__box h2{
  background:linear-gradient(100deg,#674f11,#dfb03a 50%,#c29420)!important;-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 8px rgba(168,127,40,.25))!important}

/* Logo modo claro (imagen con caja): ocultar el texto de marca para no duplicar */
html[data-theme="light"] .brand__name{display:none!important}
html[data-theme="light"] .brand__logo{border-radius:12px;box-shadow:0 4px 16px -6px rgba(110,84,20,.4)}
html[data-theme="light"] .footer .brand__logo,html[data-theme="light"] .brand--footer .brand__logo{border-radius:12px}

/* Catálogo: más aire entre paginación y footer */
.catalog-main{padding-bottom:40px}
#catalogPag{margin-bottom:30px}
main.container#catalogTop{padding-bottom:30px}

/* FIX v77 — hero título en modo claro: recorte de texto correcto (no bloques) */
html[data-theme="light"] .hero__title .tline>span{
  -webkit-text-fill-color:transparent!important;color:transparent!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  background:linear-gradient(180deg,#6e5412,#dfb03a 60%,#c29420)!important;
  background-size:100% 100%!important}
html[data-theme="light"] .hero__title .tline>span em{
  -webkit-text-fill-color:transparent!important;
  background:linear-gradient(100deg,#dfb03a,#c29420)!important;-webkit-background-clip:text!important;background-clip:text!important}

/* FIX v78 — el shorthand background reseteaba background-clip. Usar background-image. */
html[data-theme="light"] .hero__title .tline>span{
  background:none!important;
  background-image:linear-gradient(180deg,#6e5412,#dfb03a 60%,#c29420)!important;
  background-size:100% 100%!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important}
html[data-theme="light"] .hero__title .tline>span em{
  background:none!important;background-image:linear-gradient(100deg,#dfb03a,#c29420)!important;
  -webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}

/* FIX v79 — cursor custom visible en modo claro (azul eléctrico) */
html[data-theme="light"] .cursor-dot{mix-blend-mode:normal!important;background:#dfb03a!important;
  box-shadow:0 0 10px rgba(223,176,58,.7),0 0 22px rgba(168,127,40,.5)!important}
html[data-theme="light"] .cursor-ring{mix-blend-mode:normal!important;border-color:rgba(223,176,58,.75)!important;
  box-shadow:0 0 16px rgba(223,176,58,.35),inset 0 0 12px rgba(168,127,40,.25)!important}
html[data-theme="light"] .cursor-ring::after{border-color:rgba(223,176,58,.35)!important}
html[data-theme="light"] .cursor-hot .cursor-ring{border-color:rgba(223,176,58,.95)!important;background:rgba(223,176,58,.12)!important}
html[data-theme="light"] .cursor-hot .cursor-dot{background:#bb8f1f!important}
html[data-theme="light"] .cursor-down .cursor-ring{border-color:#dfb03a!important}

/* ============================================================
   MODO CLARO · TÍTULOS v80 — variables de tema + navy sólido
   (elimina dependencia de colores fijos y el bug de background-clip)
   ============================================================ */
:root{--title-color:#f6f5f3;--subtitle-color:#d7cbad;--text-color:#c9b88e}
html[data-theme="light"]{--title-color:#6e5412;--subtitle-color:#756439;--text-color:#847140}

/* En modo claro: todos los títulos de sección → navy sólido, sin gradiente/clip */
html[data-theme="light"] .sec-head h2,
html[data-theme="light"] .porque__copy h2,
html[data-theme="light"] .form-sec__aside h2,
html[data-theme="light"] .contacto__info h2,
html[data-theme="light"] .faq h2,
html[data-theme="light"] .cta-final__box h2,
html[data-theme="light"] .resenas__box h2,
html[data-theme="light"] .catalog-hero h1{
  background:none!important;background-image:none!important;
  -webkit-background-clip:border-box!important;background-clip:border-box!important;
  -webkit-text-fill-color:var(--title-color)!important;color:var(--title-color)!important;
  filter:drop-shadow(0 0 6px rgba(168,127,40,.16))!important;
  text-shadow:none;animation:none!important}
/* la barra luminosa bajo el título: mantener pero en azul de marca */
html[data-theme="light"] .sec-head h2::after,html[data-theme="light"] .porque__copy h2::after,
html[data-theme="light"] .form-sec__aside h2::after,html[data-theme="light"] .contacto__info h2::after,
html[data-theme="light"] .faq h2::after,html[data-theme="light"] .cta-final__box h2::after{
  background:linear-gradient(90deg,transparent,#a87f28,#d4af37,#a87f28,transparent)!important;
  box-shadow:0 0 10px rgba(168,127,40,.5)!important;animation:none!important}

/* card / lab / step / testi títulos → navy sólido (por si algún gradiente los rompe) */
html[data-theme="light"] .card h3,html[data-theme="light"] .srv h3,html[data-theme="light"] .bene-card h3,
html[data-theme="light"] .lab-card h3,html[data-theme="light"] .step h3,html[data-theme="light"] .pcard__name a,
html[data-theme="light"] .testi__top strong,html[data-theme="light"] .footer h4,html[data-theme="light"] .accordion summary,
html[data-theme="light"] .fcard__head h3{color:#4a3b16!important;-webkit-text-fill-color:#4a3b16!important}

/* subtítulos / párrafos vía variable */
html[data-theme="light"] .sec-head p,html[data-theme="light"] .porque__copy .lead,
html[data-theme="light"] .hero__sub,html[data-theme="light"] .catalog-hero p{color:var(--subtitle-color)!important}

/* FIX v81 — modo claro: números del proceso (círculo oscuro) siempre claros */
html[data-theme="light"] .proceso .step__n{color:#f6f5f3!important;-webkit-text-fill-color:#f6f5f3!important;
  text-shadow:0 0 12px rgba(212,175,55,.8)!important}
/* lab timeline números (contorno) más marcados en claro */
html[data-theme="light"] .lab-num{-webkit-text-stroke:1px rgba(168,127,40,.4)!important}

/* ============================================================
   FIX v82 — precio producto (claro), carrito (claro), fondo
   ============================================================ */
/* precio del producto e items — visibles en claro (eran blancos) */
html[data-theme="light"] .pinfo__price,html[data-theme="light"] .pcard__price,html[data-theme="light"] .spill{
  color:#6e5412!important;-webkit-text-fill-color:#6e5412!important;text-shadow:none!important}
html[data-theme="light"] .pcard__old,html[data-theme="light"] .pinfo__price .pcard__old{color:#baa671!important}
html[data-theme="light"] .pcard__off{color:#dfb03a!important;background:rgba(168,127,40,.12)!important;border-color:rgba(168,127,40,.4)!important}
html[data-theme="light"] .spec span{color:#998249!important}
html[data-theme="light"] .spec b,html[data-theme="light"] .pinfo__name,html[data-theme="light"] .pinfo__desc,html[data-theme="light"] .pinfo__carac li,html[data-theme="light"] .crumbs,html[data-theme="light"] .crumbs a{color:#483b1a!important}
html[data-theme="light"] .spec{background:rgba(255,255,255,.7)!important;border-color:rgba(138,105,22,.14)!important}

/* CARRITO (sidecart) — textos legibles en modo claro */
html[data-theme="light"] .sidecart__head h3,html[data-theme="light"] .sc-item__name,
html[data-theme="light"] .sidecart__total b,html[data-theme="light"] .sc-item__sub{color:#4a3b16!important}
html[data-theme="light"] .sc-item__brand,html[data-theme="light"] .sc-item__price,
html[data-theme="light"] .sidecart__total span,html[data-theme="light"] .sc-qty span,
html[data-theme="light"] .sidecart__empty,html[data-theme="light"] .sidecart__empty p{color:#756439!important}
html[data-theme="light"] .sc-qty button,html[data-theme="light"] .sidecart__close{color:#635227!important;background:rgba(255,255,255,.7)!important;border-color:rgba(138,105,22,.2)!important}
html[data-theme="light"] .sc-item__del{color:#beaa77!important}
html[data-theme="light"] .sidecart__clear{color:#998249!important}
html[data-theme="light"] .cart-toast{background:rgba(255,255,255,.97)!important;color:#4a3b16!important;border-color:rgba(168,127,40,.4)!important}

/* ---- FONDO: más notorio en claro ---- */
html[data-theme="light"] .bgx-halos{opacity:.72!important}
html[data-theme="light"] .bgx-wire{opacity:.4!important}
html[data-theme="light"] .bgx-blobs{opacity:.6!important}
html[data-theme="light"] #bgParticles{opacity:.55}
html[data-theme="light"] .site-bg{background:
  radial-gradient(85% 65% at 62% 18%, #f4f3f1 0%, transparent 60%),
  radial-gradient(72% 62% at 12% 92%, #ebe9e4 0%, transparent 60%),
  linear-gradient(160deg,#f5f4f2 0%,#eceae6 50%,#f3f2f0 100%)!important}

/* ---- FONDO: más presencia en oscuro ---- */
html:not([data-theme="light"]) .bgx-halos{opacity:1!important}
html:not([data-theme="light"]) .bgx-wire{opacity:.85!important}
html:not([data-theme="light"]) .bgx-blobs{opacity:.8!important}