/* ══════════════════════════════════════════════════════════════════════════
   COSMIC PLAY OBJECTS · juguetería · campo de tinta, plástico moldeado y una
   sola chispa de menta eléctrica.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --ink:#06070A; --ink2:#0B0E13; --char:#12161D; --deep:#04050A;
  --teal:#062E26; --teal2:#0C5A46; --teal3:#0A4437;
  --volt:#35E6AE; --volt-dk:#12A87B;
  --cream:#F2E7D3; --cream2:#E1D2B7; --cream3:#C9B99C;
  --sand:#EFE3CD; --paper:#F7F3EA; --burnt:#E7D6B6;
  --coral:#FF8A5B;
  --ink-txt:#0A0C11; --ink-sub:#3C4149;
  --lt-txt:#F4EEE2; --lt-sub:#BFB6A6;
  --maxw:1216px;
  --disp:"Chakra Petch",system-ui,sans-serif;
  --body:"DM Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --star-field:radial-gradient(1.6px 1.6px at 19.5% 73.6%,rgba(255,255,255,.78) 46%,transparent 52%),
    radial-gradient(1px 1px at 22.2% 94.0%,#fff 46%,transparent 52%),
    radial-gradient(1px 1px at 70.2% 21.0%,#fff 46%,transparent 52%),
    radial-gradient(1px 1px at 28.0% 43.8%,#fff 46%,transparent 52%),
    radial-gradient(1.4px 1.4px at 89.9% 21.0%,rgba(255,255,255,.78) 46%,transparent 52%),
    radial-gradient(1.2px 1.2px at 51.8% 34.4%,rgba(255,255,255,.78) 46%,transparent 52%),
    radial-gradient(1.2px 1.2px at 78.9% 61.0%,#fff 46%,transparent 52%),
    radial-gradient(2px 2px at 74.8% 32.6%,rgba(210,255,238,.9) 46%,transparent 52%),
    radial-gradient(1px 1px at 41.8% 83.3%,rgba(210,255,238,.9) 46%,transparent 52%),
    radial-gradient(1px 1px at 30.1% 1.8%,#fff 46%,transparent 52%),
    radial-gradient(1.2px 1.2px at 90.2% 24.0%,#fff 46%,transparent 52%),
    radial-gradient(1.4px 1.4px at 13.9% 76.9%,rgba(210,255,238,.9) 46%,transparent 52%),
    radial-gradient(1.6px 1.6px at 81.6% 17.7%,rgba(255,255,255,.78) 46%,transparent 52%),
    radial-gradient(1.2px 1.2px at 96.5% 41.4%,rgba(210,255,238,.9) 46%,transparent 52%),
    radial-gradient(1.2px 1.2px at 75.6% 24.6%,rgba(255,255,255,.78) 46%,transparent 52%),
    radial-gradient(1.6px 1.6px at 37.4% 1.1%,rgba(210,255,238,.9) 46%,transparent 52%),
    radial-gradient(1.2px 1.2px at 22.7% 33.0%,#fff 46%,transparent 52%),
    radial-gradient(1px 1px at 83.6% 26.6%,#fff 46%,transparent 52%),
    radial-gradient(1px 1px at 81.3% 81.5%,rgba(255,255,255,.78) 46%,transparent 52%),
    radial-gradient(1px 1px at 86.8% 2.8%,rgba(255,255,255,.78) 46%,transparent 52%),
    radial-gradient(1.6px 1.6px at 76.7% 60.0%,#fff 46%,transparent 52%),
    radial-gradient(1px 1px at 96.5% 45.1%,#fff 46%,transparent 52%),
    radial-gradient(1.4px 1.4px at 45.6% 30.0%,#fff 46%,transparent 52%),
    radial-gradient(1.4px 1.4px at 82.1% 89.7%,rgba(210,255,238,.9) 46%,transparent 52%),
    radial-gradient(2px 2px at 73.9% 21.3%,#fff 46%,transparent 52%),
    radial-gradient(1.4px 1.4px at 94.8% 36.6%,#fff 46%,transparent 52%),
    radial-gradient(1.6px 1.6px at 14.2% 6.5%,rgba(210,255,238,.9) 46%,transparent 52%),
    radial-gradient(1.4px 1.4px at 7.0% 66.0%,#fff 46%,transparent 52%),
    radial-gradient(1px 1px at 22.9% 22.9%,#fff 46%,transparent 52%),
    radial-gradient(1.6px 1.6px at 8.9% 80.8%,rgba(210,255,238,.9) 46%,transparent 52%),
    radial-gradient(1px 1px at 88.9% 64.1%,rgba(255,255,255,.78) 46%,transparent 52%),
    radial-gradient(2px 2px at 80.4% 73.8%,rgba(210,255,238,.9) 46%,transparent 52%),
    radial-gradient(2px 2px at 52.6% 98.4%,#fff 46%,transparent 52%),
    radial-gradient(1px 1px at 40.6% 92.2%,rgba(255,255,255,.78) 46%,transparent 52%),
    radial-gradient(2px 2px at 67.0% 53.3%,rgba(255,255,255,.78) 46%,transparent 52%),
    radial-gradient(1px 1px at 16.4% 46.4%,rgba(210,255,238,.9) 46%,transparent 52%),
    radial-gradient(1px 1px at 47.2% 75.0%,rgba(210,255,238,.9) 46%,transparent 52%),
    radial-gradient(1px 1px at 77.4% 98.5%,#fff 46%,transparent 52%),
    radial-gradient(2px 2px at 52.0% 3.2%,#fff 46%,transparent 52%),
    radial-gradient(2px 2px at 1.4% 57.1%,#fff 46%,transparent 52%),
    radial-gradient(1px 1px at 16.7% 54.0%,rgba(255,255,255,.78) 46%,transparent 52%),
    radial-gradient(1px 1px at 28.3% 20.3%,rgba(210,255,238,.9) 46%,transparent 52%),
    radial-gradient(1.6px 1.6px at 14.6% 8.7%,rgba(210,255,238,.9) 46%,transparent 52%),
    radial-gradient(1px 1px at 4.2% 34.4%,rgba(210,255,238,.9) 46%,transparent 52%);
  --star-field-b:radial-gradient(1px 1px at 39.9% 95.2%,rgba(53,230,174,.5) 46%,transparent 52%),
    radial-gradient(1px 1px at 5.9% 42.3%,rgba(255,255,255,.4) 46%,transparent 52%),
    radial-gradient(2.4px 2.4px at 7.5% 49.2%,rgba(53,230,174,.75) 46%,transparent 52%),
    radial-gradient(1px 1px at 34.7% 41.2%,rgba(53,230,174,.75) 46%,transparent 52%),
    radial-gradient(1.2px 1.2px at 56.0% 49.5%,rgba(53,230,174,.75) 46%,transparent 52%),
    radial-gradient(2.4px 2.4px at 27.9% 78.7%,rgba(255,255,255,.4) 46%,transparent 52%),
    radial-gradient(1px 1px at 21.9% 77.8%,rgba(53,230,174,.5) 46%,transparent 52%),
    radial-gradient(1.8px 1.8px at 41.0% 92.2%,rgba(255,255,255,.4) 46%,transparent 52%),
    radial-gradient(1.8px 1.8px at 18.8% 62.3%,rgba(255,255,255,.4) 46%,transparent 52%),
    radial-gradient(1.8px 1.8px at 44.0% 7.9%,rgba(53,230,174,.75) 46%,transparent 52%),
    radial-gradient(1px 1px at 1.1% 12.1%,rgba(53,230,174,.5) 46%,transparent 52%),
    radial-gradient(1px 1px at 78.7% 48.3%,rgba(53,230,174,.5) 46%,transparent 52%),
    radial-gradient(1.8px 1.8px at 78.8% 73.7%,rgba(255,255,255,.55) 46%,transparent 52%),
    radial-gradient(1px 1px at 41.3% 19.1%,rgba(53,230,174,.75) 46%,transparent 52%),
    radial-gradient(1.8px 1.8px at 68.4% 28.8%,rgba(255,255,255,.4) 46%,transparent 52%),
    radial-gradient(1.2px 1.2px at 30.1% 1.2%,rgba(53,230,174,.75) 46%,transparent 52%),
    radial-gradient(1.8px 1.8px at 31.2% 76.4%,rgba(255,255,255,.55) 46%,transparent 52%),
    radial-gradient(1.8px 1.8px at 53.8% 2.1%,rgba(255,255,255,.55) 46%,transparent 52%),
    radial-gradient(1px 1px at 11.7% 8.0%,rgba(255,255,255,.55) 46%,transparent 52%),
    radial-gradient(1.2px 1.2px at 81.1% 8.8%,rgba(53,230,174,.75) 46%,transparent 52%),
    radial-gradient(1px 1px at 55.6% 49.3%,rgba(255,255,255,.4) 46%,transparent 52%),
    radial-gradient(1.8px 1.8px at 86.6% 9.8%,rgba(255,255,255,.4) 46%,transparent 52%),
    radial-gradient(1.2px 1.2px at 38.6% 72.4%,rgba(53,230,174,.5) 46%,transparent 52%),
    radial-gradient(1px 1px at 4.4% 6.8%,rgba(255,255,255,.55) 46%,transparent 52%),
    radial-gradient(1.8px 1.8px at 74.8% 87.7%,rgba(53,230,174,.75) 46%,transparent 52%),
    radial-gradient(1px 1px at 66.2% 96.6%,rgba(53,230,174,.5) 46%,transparent 52%),
    radial-gradient(1px 1px at 11.9% 7.4%,rgba(53,230,174,.5) 46%,transparent 52%),
    radial-gradient(1px 1px at 47.1% 47.7%,rgba(255,255,255,.55) 46%,transparent 52%),
    radial-gradient(1.8px 1.8px at 52.1% 95.6%,rgba(255,255,255,.55) 46%,transparent 52%),
    radial-gradient(1px 1px at 96.2% 32.7%,rgba(53,230,174,.5) 46%,transparent 52%);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{margin:0;background:var(--ink);color:var(--lt-txt);
  font-family:var(--body);font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2.5px solid var(--volt);outline-offset:3px}

h1,h2,h3,h4{font-family:var(--disp);font-weight:700;hyphens:none;
  overflow-wrap:anywhere;margin:0;line-height:1.06;letter-spacing:-.012em}
p{margin:0}
.mn{font-family:var(--mono);font-size:.79rem;letter-spacing:.02em}
.shell{width:min(100% - 40px,var(--maxw));margin:0 auto}
section{position:relative}

/* grano de película sobre todo el documento */
.grain{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:80;
  opacity:.055;mix-blend-mode:overlay}

/* ── botones ───────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;padding:0 26px;border-radius:9px;text-decoration:none;
  font-family:var(--disp);font-weight:700;font-size:1.02rem;letter-spacing:.005em;
  border:2px solid transparent;transition:transform .22s ease,box-shadow .22s ease,background .22s ease}
.btn-solid{background:var(--volt);color:#04231A;
  box-shadow:0 3px 0 #0E7C5B,0 14px 26px rgba(0,0,0,.45)}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 5px 0 #0E7C5B,0 20px 32px rgba(0,0,0,.5)}
.btn-line{border-color:var(--cream2);color:var(--cream);background:rgba(242,231,211,.05)}
.btn-line:hover{background:rgba(242,231,211,.13);transform:translateY(-2px)}

/* ── NAV: riel opaco casi negro ────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:100;background:var(--ink);
  min-height:88px;display:flex;align-items:center;
  border-bottom:1px solid rgba(242,231,211,.12);transition:box-shadow .25s ease}
.nav.scrolled{box-shadow:0 14px 34px rgba(0,0,0,.62)}
.nav-in{width:min(100% - 32px,1360px);margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:clamp(1rem,3vw,2.4rem);padding:12px 0}
.nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none;
  flex:1 1 auto;min-width:0;flex-shrink:1;max-width:min(46%,520px)}
.biz-logo{height:44px;width:auto;max-width:180px;object-fit:contain;flex:0 0 auto}
.biz-logo[data-shape="square"]{height:50px}
.biz-logo[data-shape="tall"]{height:46px}
.mark{min-width:0;display:block}
.wordmark{font-family:var(--disp);font-weight:700;color:var(--cream);
  font-size:clamp(.95rem,1.15vw,1.18rem);line-height:1.14;letter-spacing:-.01em;
  hyphens:none;overflow-wrap:anywhere;display:block}
.nav .wordmark{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;max-width:min(40vw,340px)}
.wordmark-tail{display:block;font-size:.58em;font-weight:400;color:var(--lt-sub);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mark-sub{display:block;font-family:var(--mono);font-size:.7rem;color:var(--volt);
  letter-spacing:.09em;text-transform:uppercase;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(40vw,340px)}

.nav-links{display:none;gap:clamp(.9rem,1.7vw,1.9rem);flex:0 1 auto;min-width:0}
.nav-links a{text-decoration:none;color:var(--cream);font-weight:500;font-size:.97rem;
  padding:8px 2px;border-bottom:2px solid transparent;white-space:nowrap;transition:.2s}
.nav-links a:hover{color:var(--volt);border-bottom-color:var(--volt)}

.nav-acts{display:flex;align-items:center;gap:clamp(.6rem,1.4vw,1.1rem);flex:0 0 auto}
.acceder{text-decoration:none;color:var(--lt-sub);font-size:.92rem;font-weight:500;
  white-space:nowrap;display:none}
.acceder:hover{color:var(--cream)}
.act-wa{display:none;align-items:center;min-height:46px;padding:0 20px;border-radius:8px;
  background:var(--volt);color:#04231A;text-decoration:none;font-family:var(--disp);
  font-weight:700;font-size:.95rem;white-space:nowrap;box-shadow:0 3px 0 #0E7C5B}
.act-wa:hover{filter:brightness(1.06)}
.burger{width:46px;height:46px;border:1.5px solid rgba(242,231,211,.34);border-radius:9px;
  background:rgba(242,231,211,.05);display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.burger span,.burger span::before,.burger span::after{display:block;width:20px;height:2px;
  background:var(--cream);content:"";position:relative}
.burger span::before{position:absolute;top:-6px}
.burger span::after{position:absolute;top:6px}

/* cajón móvil: display:none hasta abrirse */
.drawer{display:none;position:fixed;inset:0;z-index:130;background:rgba(4,5,10,.86)}
.drawer.open{display:block}
.drawer-in{position:absolute;top:0;right:0;bottom:0;width:min(84vw,340px);
  background:var(--ink2);border-left:1px solid rgba(242,231,211,.14);
  padding:96px 26px 32px;display:flex;flex-direction:column;gap:6px;overflow-y:auto}
.drawer-in a{text-decoration:none;color:var(--cream);font-family:var(--disp);font-weight:600;
  font-size:1.15rem;padding:13px 0;border-bottom:1px solid rgba(242,231,211,.1)}
.drawer-in a:hover{color:var(--volt)}
.drawer-wa{margin-top:18px;background:var(--volt);color:#04231A!important;border:0!important;
  border-radius:9px;text-align:center;padding:15px 12px!important;box-shadow:0 3px 0 #0E7C5B}

@media (min-width:1080px){
  .nav-links{display:flex}
  .acceder{display:inline-block}
  .act-wa{display:inline-flex}
  .burger{display:none}
}

/* ── EFECTO 1 · recorte que enseña el campo de estrellas ────────────────── */
.cut{color:var(--cream)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .cut{background-color:#0b1016;background-image:var(--star-field),var(--star-field-b);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    -webkit-text-stroke:1.4px rgba(242,231,211,.8)}
}
/* ── EFECTO 2 · barrido de brillo, una vez ─────────────────────────────── */
.shine{position:relative;display:inline-block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.js .shine::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
  transform:translateX(-115%);animation:sweep 1.6s ease .35s 1 forwards;
  mix-blend-mode:screen}
@keyframes sweep{to{transform:translateX(115%)}}

/* ══ 1 · PORTADA ═══════════════════════════════════════════════════════ */
.hero{min-height:clamp(620px,74vh,700px);background:var(--ink);overflow:hidden;
  display:flex;align-items:flex-end;isolation:isolate}
.field{position:absolute;inset:0;z-index:0;
  background-image:var(--star-field),var(--star-field-b);opacity:.9}
.field::after{content:"";position:absolute;inset:0;
  background:radial-gradient(140% 92% at 50% 42%,transparent 34%,rgba(3,4,7,.72) 100%)}
/* tres espirales: disco inclinado, dos brazos y un núcleo duro */
.neb{position:absolute;z-index:0;pointer-events:none;--tw:-22deg;--sq:.6;--arm:.34}
.neb::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:
    conic-gradient(from 0deg,transparent 0 5%,rgba(53,230,174,calc(var(--arm))) 17%,
      rgba(53,230,174,calc(var(--arm) * .35)) 30%,transparent 44% 55%,
      rgba(53,230,174,calc(var(--arm) * .8)) 67%,rgba(53,230,174,calc(var(--arm) * .3)) 80%,
      transparent 94% 100%),
    radial-gradient(circle,rgba(53,230,174,.22) 0 10%,transparent 34%);
  -webkit-mask:radial-gradient(circle,#000 4%,rgba(0,0,0,.9) 20%,rgba(0,0,0,.42) 48%,transparent 74%);
  mask:radial-gradient(circle,#000 4%,rgba(0,0,0,.9) 20%,rgba(0,0,0,.42) 48%,transparent 74%);
  transform:rotate(var(--tw)) scaleY(var(--sq));filter:blur(3px)}
.neb::after{content:"";position:absolute;left:50%;top:50%;width:16%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(233,255,247,.95) 0 14%,rgba(120,246,208,.6) 30%,
             rgba(53,230,174,.28) 52%,transparent 74%);filter:blur(2px)}
.neb-a{width:min(30vw,360px);aspect-ratio:1;left:1%;top:-16%;--tw:-26deg;--sq:.55;--arm:.5}
.neb-b{width:min(38vw,430px);aspect-ratio:1;left:-14%;bottom:-20%;--tw:34deg;--sq:.52;--arm:.32}
.neb-c{width:min(48vw,540px);aspect-ratio:1;right:-17%;top:8%;--tw:-8deg;--sq:.66;--arm:.3}
.neb-b::after,.neb-c::after{width:5%;box-shadow:0 0 22px 8px rgba(53,230,174,.32)}

/* ── los dos objetos enormes ───────────────────────────────────────────── */
.stage{position:absolute;inset:0;z-index:1;pointer-events:none}
.obj{position:absolute}
.js .obj{will-change:transform}

.module{width:clamp(230px,29vw,420px);aspect-ratio:53/68;left:50%;top:50%;z-index:3;
  --tilt:-5deg;transform:translate(-8%,-50%) rotate(var(--tilt))}
.mod-body{position:absolute;inset:0;border-radius:9% / 7%;
  background:linear-gradient(158deg,#FFFCF4 0%,#F3E9D6 24%,#E0D0B4 66%,#C4B294 100%);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.95),inset 0 -14px 26px rgba(88,70,44,.32),
             inset 6px 0 14px rgba(255,255,255,.5),0 46px 78px rgba(0,0,0,.66),0 6px 0 #A99979;
  border:1px solid rgba(255,255,255,.42)}
.mod-screen{position:absolute;left:7.5%;top:5.5%;right:7.5%;height:56%;border-radius:5%/7%;
  background:var(--deep);overflow:hidden;
  box-shadow:inset 0 0 0 7px #E5D6BB,inset 0 0 0 8px rgba(60,45,25,.45),
             inset 0 16px 34px rgba(0,0,0,.95),0 2px 0 rgba(255,255,255,.55)}
.mod-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.5;filter:brightness(.62) saturate(.75) contrast(1.1)}
.mod-glass{position:absolute;inset:0;
  background:linear-gradient(152deg,rgba(255,255,255,.2) 0 22%,transparent 46%),
             radial-gradient(90% 70% at 20% 8%,rgba(53,230,174,.14),transparent 62%)}
.mod-maze{position:absolute;left:12%;right:12%;top:26%;bottom:22%}
.mod-maze svg{width:100%;height:100%}
.mod-face{position:absolute;left:0;right:0;top:63%;bottom:0}
/* un dial cóncavo de juego — no una cruz direccional */
.mod-dial{position:absolute;left:9%;top:11%;width:33%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 36% 26%,#8E805F,#5C523B 62%,#3E3729 100%);
  box-shadow:inset 0 6px 12px rgba(0,0,0,.7),inset 0 -4px 8px rgba(255,255,255,.28),
             0 3px 0 rgba(255,255,255,.7)}
.dial-ring{position:absolute;left:16%;top:16%;right:16%;bottom:16%;border-radius:50%;
  background:radial-gradient(circle at 34% 24%,#F8F0E0,#DCCCAF 66%,#BCAA8C);
  box-shadow:inset 0 3px 6px rgba(255,255,255,.9),inset 0 -5px 9px rgba(90,72,46,.45),
             0 4px 8px rgba(0,0,0,.45)}
.dial-nub{position:absolute;left:50%;top:20%;width:12%;height:22%;border-radius:99px;
  background:var(--volt);transform:translateX(-50%);
  box-shadow:0 0 12px 3px rgba(53,230,174,.55)}
/* cuatro bloques encajables como teclas */
.mod-blocks{position:absolute;right:9%;top:10%;width:36%;aspect-ratio:1;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:9%}
.blk{border-radius:22%;
  background:linear-gradient(152deg,#FBF4E6 0%,#E6D8BC 48%,#C2B092 100%);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.95),inset 0 -5px 9px rgba(90,72,46,.42),
             0 4px 7px rgba(0,0,0,.4)}
.blk-2{background:linear-gradient(152deg,#7CF3CC 0%,#35E6AE 46%,#12A87B 100%);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.6),inset 0 -5px 9px rgba(4,60,44,.5),
             0 4px 9px rgba(0,0,0,.45)}
.blk-3{background:linear-gradient(152deg,#5C6472 0%,#2C323B 52%,#171B21 100%);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.22),0 4px 7px rgba(0,0,0,.5)}
/* una sola pista moldeada con tres remaches de estrella */
.mod-track{position:absolute;left:11%;right:11%;bottom:11%;height:15%;border-radius:99px;
  background:linear-gradient(180deg,#2A2E36,#191D23);display:flex;align-items:center;
  justify-content:space-around;
  box-shadow:inset 0 3px 5px rgba(0,0,0,.9),0 2px 0 rgba(255,255,255,.7)}
.mod-track i{width:9%;aspect-ratio:1;background:var(--cream);
  clip-path:polygon(50% 0,61% 36%,100% 38%,68% 60%,79% 100%,50% 74%,21% 100%,32% 60%,0 38%,39% 36%)}
.mod-track i:nth-child(2){background:var(--volt)}
.mod-seam{position:absolute;left:4%;right:4%;top:61.5%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(120,100,70,.5) 12%,rgba(120,100,70,.5) 88%,transparent);
  box-shadow:0 1px 0 rgba(255,255,255,.7)}
.mod-light{position:absolute;inset:0;border-radius:9% / 7%;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.4) 0 12%,transparent 34%)}

.case{width:clamp(150px,19vw,286px);aspect-ratio:35/41;left:76%;top:41%;z-index:2;
  --tilt:4deg;transform:translate(-24%,-50%) rotate(var(--tilt))}
.case{filter:drop-shadow(0 30px 42px rgba(0,0,0,.66))}
.case-body{position:absolute;inset:0;border-radius:7%/6%;
  clip-path:polygon(0 0,74% 0,100% 16%,100% 100%,0 100%);
  background:linear-gradient(154deg,#E9DBC1 0%,#D3C0A0 34%,#A6957A 78%,#8B7C63 100%);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.8),inset 0 -12px 22px rgba(60,46,28,.45),
             inset 6px 0 12px rgba(255,255,255,.35)}
.case-step{position:absolute;left:6%;right:6%;top:6%;height:4%;border-radius:99px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 6px,rgba(90,72,46,.3) 6px 12px)}
.case-plate{position:absolute;left:9%;right:22%;top:13%;height:5.5%;border-radius:99px;
  background:linear-gradient(180deg,#F4E9D4,#CDBB9B);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.95),inset 0 -3px 6px rgba(90,72,46,.4),
             0 2px 4px rgba(0,0,0,.35)}
.case-ridge{position:absolute;left:16%;right:16%;bottom:6%;height:7%;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.6) 0 3px,rgba(70,56,36,.42) 3px 9px);
  border-radius:99px;box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.case-win{position:absolute;left:8%;right:8%;top:24%;height:56%;
  filter:drop-shadow(0 3px 0 rgba(255,255,255,.55)) drop-shadow(0 -2px 3px rgba(60,45,25,.6))}
.case-win svg{width:100%;height:100%;display:block}
.case-seam{position:absolute;left:6%;right:6%;top:80%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(90,72,46,.6),transparent);
  box-shadow:0 1px 0 rgba(255,255,255,.6)}

/* deriva orbital lenta */
@keyframes drift-a{0%,100%{transform:translate(-8%,-50%) rotate(-5deg)}
  50%{transform:translate(-8%,calc(-50% - 7px)) rotate(-6.6deg)}}
@keyframes drift-b{0%,100%{transform:translate(-24%,-50%) rotate(4deg)}
  50%{transform:translate(-24%,calc(-50% + 6px)) rotate(5.4deg)}}
@keyframes drift-neb{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
.js .module{animation:drift-a 6.4s ease-in-out infinite}
.js .case{animation:drift-b 7s ease-in-out infinite}
.js .neb-a{animation:drift-neb 6.8s ease-in-out infinite}
.js .neb-c{animation:drift-neb 7.4s ease-in-out .8s infinite}

.hero-in{position:relative;z-index:4;width:min(100% - 40px,var(--maxw));margin:0 auto;
  max-width:none;padding:24px 0 clamp(30px,4.4vh,52px)}
.hero-word{display:inline-block;font-family:var(--disp);font-weight:700;
  font-size:clamp(1.6rem,3vw,2.5rem);letter-spacing:.16em;line-height:1;margin-bottom:10px}
.hero h1{max-width:14ch;width:100%;font-size:clamp(2.05rem,3.85vw,3.15rem);
  color:var(--cream);text-shadow:0 4px 24px rgba(0,0,0,.85)}
.hero-lead{max-width:44ch;width:100%;margin-top:18px;color:var(--lt-sub);font-size:1.03rem;
  text-shadow:0 2px 14px rgba(0,0,0,.85)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.hero-note{margin-top:22px;color:var(--volt);opacity:.94}

/* ══ 2 · QUÉ VENDEMOS · campo de plástico templado ═════════════════════ */
.play{background:var(--sand);color:var(--ink-txt);
  padding:clamp(56px,6.4vw,96px) 0 clamp(52px,6vw,88px);overflow-x:clip}
.play::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(120,102,72,.28) 1px,transparent 1.4px);
  background-size:16px 16px}
.play>*{position:relative}
.play-top{display:grid;gap:14px;max-width:62ch;margin-bottom:clamp(30px,3.4vw,46px)}
.play-top h2{font-size:clamp(1.85rem,3.4vw,2.8rem);color:var(--ink-txt)}
.play-lead{color:#4A4E56}
.play-note{margin-top:clamp(26px,3vw,40px);padding-left:18px;
  border-left:3px solid var(--volt-dk);color:#4A4E56;max-width:66ch}

.svc-grid{display:grid;gap:clamp(18px,2vw,26px);grid-template-columns:1fr}
@media (min-width:720px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){
  .svc-grid:has(>.card:nth-child(3):last-child),
  .svc-grid:has(>.card:nth-child(6):last-child),
  .svc-grid:has(>.card:nth-child(9):last-child){grid-template-columns:repeat(3,1fr)}
  .svc-grid:has(>.card:nth-child(8):last-child){grid-template-columns:repeat(4,1fr)}
}
@media (min-width:720px){
  .svc-grid:has(>.card:nth-child(5):last-child)>.card:last-child,
  .svc-grid:has(>.card:nth-child(7):last-child)>.card:last-child{grid-column:1/-1}
}
.card{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;
  border-radius:18px;background:linear-gradient(162deg,#FFFDF7 0%,#F6EEDD 30%,#E7DAC0 100%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.95),inset 0 -8px 16px rgba(110,92,62,.16),
             0 2px 0 #CDBC9D,0 18px 34px rgba(70,56,34,.16);
  transition:transform .28s ease,box-shadow .28s ease}
.card:hover{transform:translateY(-5px) rotate(-.7deg);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.95),0 4px 0 #CDBC9D,0 26px 44px rgba(70,56,34,.24)}
.card-corner{position:absolute;right:12px;top:12px;z-index:2;width:20px;height:20px;
  background:var(--volt);opacity:.9;
  clip-path:polygon(50% 0,61% 36%,100% 38%,68% 60%,79% 100%,50% 74%,21% 100%,32% 60%,0 38%,39% 36%)}
.card-bay{position:relative;display:block;margin:12px 12px 0;border-radius:12px;overflow:hidden;
  background:var(--deep);box-shadow:inset 0 0 0 4px #E3D4B9,inset 0 10px 22px rgba(0,0,0,.7)}
.card-bay img{width:100%;aspect-ratio:4/3;object-fit:cover}
.bay-lip{position:absolute;inset:0;pointer-events:none;border-radius:12px;
  background:linear-gradient(158deg,rgba(255,255,255,.24) 0 16%,transparent 40%)}
.card-body{display:flex;flex-direction:column;gap:9px;padding:18px 20px 20px;flex:1 1 auto;min-width:0}
.card-body h3{font-size:1.16rem;color:var(--ink-txt)}
.card-body p{color:#4A4E56;font-size:.95rem;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.card-foot{margin-top:auto;padding-top:12px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;border-top:1px dashed rgba(120,102,72,.4)}
.card-price{color:var(--ink-txt);font-weight:500}
.card-go{text-decoration:none;color:#06382A;background:var(--volt);border-radius:7px;
  padding:8px 14px;font-family:var(--disp);font-weight:700;font-size:.87rem;
  box-shadow:0 2px 0 #0E7C5B}
.card-go:hover{filter:brightness(1.07)}
.promo{margin-top:clamp(26px,3vw,40px);display:flex;flex-wrap:wrap;gap:8px 16px;
  align-items:baseline;padding:16px 20px;border-radius:12px;background:#1A1E25;color:var(--cream)}
.promo b{font-family:var(--disp);color:var(--volt)}

/* ══ 3 · LA TIENDA · tinta profunda con grano estelar ══════════════════ */
.world{background:var(--char);color:var(--lt-txt);overflow:hidden;
  padding:clamp(58px,6.6vw,100px) 0}
.world::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.42;
  background-image:var(--star-field-b)}
.world>*{position:relative}
/* ⚠ la órbita NO gira: gira su punto, encerrado dentro de ella. Un cuadro que rota cambia su
   caja envolvente cuadro a cuadro, y la sección que lo recorta cambia con él — el medidor de
   huecos lee ese vaivén como «se está saliendo» y todo texto de la sección mide máximo 0. */
.orbit{position:absolute;right:-8%;top:8%;width:min(56vw,620px);aspect-ratio:1;z-index:0;
  border:1px solid rgba(53,230,174,.22);border-radius:50%;overflow:hidden;
  -webkit-mask:linear-gradient(200deg,#000 20%,transparent 62%);
  mask:linear-gradient(200deg,#000 20%,transparent 62%)}
.orbit::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle 7px at 50% 1.2%,#B6FBE4 0 34%,rgba(53,230,174,.7) 58%,
             rgba(53,230,174,.18) 78%,transparent 100%)}
.js .orbit::after{animation:spin 46s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.world-grid{display:grid;gap:clamp(26px,3.4vw,52px);align-items:start}
@media (min-width:980px){.world-grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}}
.world-fig{margin:0;min-width:0}
.pocket{position:relative;display:block;border-radius:16px;padding:10px;
  background:linear-gradient(158deg,#F6ECD9 0%,#E5D6BB 46%,#C6B597 100%);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.95),inset 0 -8px 16px rgba(110,92,62,.28),
             0 30px 56px rgba(0,0,0,.6),0 5px 0 #A2937A}
.pocket img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.45)}
.pocket-glass{position:absolute;inset:0;
  background:linear-gradient(152deg,rgba(255,255,255,.16) 0 18%,transparent 42%),
             radial-gradient(80% 60% at 18% 6%,rgba(53,230,174,.12),transparent 60%)}
.world-fig figcaption{margin-top:12px;color:var(--volt)}
.world-copy{display:grid;gap:22px;min-width:0}
.frame{position:relative;min-width:0;padding:clamp(22px,2.6vw,34px);border-radius:14px;
  background:linear-gradient(158deg,#1B2029 0%,#151A22 52%,#0F131A 100%);
  border:1px solid rgba(242,231,211,.14);
  box-shadow:inset 0 2px 0 rgba(242,231,211,.16),inset 0 -8px 20px rgba(0,0,0,.6),
             0 22px 44px rgba(0,0,0,.45)}
.frame::before{content:"";position:absolute;left:14px;right:14px;top:9px;height:1px;
  background:rgba(242,231,211,.14)}
.frame h2{font-size:clamp(1.7rem,3vw,2.5rem);color:var(--cream)}
.frame h3{font-size:1.24rem;color:var(--volt);margin-bottom:8px}
.world-body{margin-top:16px;color:var(--lt-sub)}
.world-mark{margin-top:18px;padding-left:16px;border-left:3px solid var(--volt);
  color:var(--cream);font-family:var(--disp);font-weight:600;font-size:1.08rem}
.frame-exp p{color:var(--lt-sub)}

/* ══ 4 · VENTAJAS · panel verde eléctrico ══════════════════════════════ */
.perks{background:var(--teal);color:var(--cream);overflow:hidden;
  padding:clamp(58px,6.6vw,100px) 0}
.perks::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(120% 90% at 78% 8%,rgba(53,230,174,.18),transparent 62%)}
.perks>*{position:relative}
.dice{position:absolute;left:-6%;bottom:-16%;width:min(46vw,470px);z-index:0;
  color:rgba(53,230,174,.16)}
.dice svg{width:100%;height:auto;display:block}
.perks-top{max-width:62ch;margin-bottom:clamp(28px,3.2vw,44px)}
.perks-top h2{font-size:clamp(1.85rem,3.4vw,2.8rem);color:var(--cream)}
.perks-lead{margin-top:12px;color:#CFE9DE}
.am-grid{display:grid;gap:14px;grid-template-columns:1fr;
  padding:clamp(18px,2.2vw,28px);border-radius:18px;background:var(--teal2);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.14),inset 0 -10px 24px rgba(0,0,0,.32),
             0 24px 48px rgba(0,0,0,.45)}
@media (min-width:600px){.am-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){
  .am-grid{grid-template-columns:repeat(4,1fr)}
  .am-grid:has(>.am:nth-child(3):last-child),
  .am-grid:has(>.am:nth-child(6):last-child),
  .am-grid:has(>.am:nth-child(9):last-child){grid-template-columns:repeat(3,1fr)}
  .am-grid:has(>.am:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
}
@media (min-width:600px){
  .am-grid:has(>.am:nth-child(5):last-child)>.am:last-child,
  .am-grid:has(>.am:nth-child(7):last-child)>.am:last-child{grid-column:1/-1}
}
.am{display:flex;align-items:center;gap:12px;min-width:0;padding:16px 16px;border-radius:12px;
  background:linear-gradient(160deg,#FBF5E9 0%,#F0E5CF 44%,#DFD0B2 100%);color:var(--ink-txt);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.95),inset 0 -6px 12px rgba(110,92,62,.18),
             0 2px 0 #C6B597}
.am b{font-weight:500;font-size:.95rem;line-height:1.34;min-width:0;overflow-wrap:anywhere}
.am .ico{flex:0 0 auto;width:24px;height:24px;color:#0B6E52}
.js .am{opacity:1}
.js .am.pre{opacity:0;transform:translateY(16px)}
.js .am.pre.is-in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
.cover{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline;color:#CFE9DE}
.cover b{font-family:var(--disp);color:var(--volt)}

/* ══ 5 · GALERÍA · papel mate con pecas de estrella ════════════════════ */
.cabinet{background:var(--paper);color:var(--ink-txt);overflow:hidden;
  padding:clamp(58px,6.6vw,100px) 0}
.cabinet::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;
  background-image:radial-gradient(1.6px 1.6px at 22% 30%,#12161D 46%,transparent 50%),
    radial-gradient(1.2px 1.2px at 68% 12%,#12161D 46%,transparent 50%),
    radial-gradient(2px 2px at 84% 62%,#12161D 46%,transparent 50%),
    radial-gradient(1.4px 1.4px at 38% 78%,#12161D 46%,transparent 50%),
    radial-gradient(1px 1px at 8% 58%,#12161D 46%,transparent 50%);
  background-size:190px 190px,230px 230px,270px 270px,210px 210px,160px 160px}
.cab-back{position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-mask:radial-gradient(120% 78% at 50% 56%,#000 22%,transparent 78%);
  mask:radial-gradient(120% 78% at 50% 56%,#000 22%,transparent 78%)}
.cab-back img{width:100%;height:100%;object-fit:cover;opacity:.16;filter:grayscale(.35) blur(2px)}
.cabinet>.shell{position:relative}
.cabinet h2{font-size:clamp(1.9rem,3.6vw,3rem)}
.cab-lead{margin-top:12px;max-width:60ch;color:#4A4E56}
.cab-grid,.cab-own{display:grid;gap:clamp(18px,2.2vw,30px);grid-template-columns:1fr;
  margin-top:clamp(28px,3.2vw,44px)}
@media (min-width:620px){.cab-grid,.cab-own{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.cab-grid,.cab-own{grid-template-columns:repeat(3,1fr)}}
.cab-own{margin-top:clamp(18px,2.2vw,30px)}
.piece{display:block;width:100%;min-width:0;padding:0;border:0;background:none;cursor:pointer;
  text-align:left;transition:transform .28s ease}
.piece:hover{transform:translateY(-4px)}
.piece-frame{position:relative;display:block;overflow:hidden;border-radius:10px;
  background:#DED0B4;padding:12px;transform:rotate(-1.1deg);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.95),inset 0 -8px 16px rgba(110,92,62,.28),
             0 3px 0 #BCA98A,0 20px 34px rgba(60,48,30,.22)}
.piece:nth-child(even) .piece-frame{transform:rotate(1.1deg)}
.piece-frame img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
.piece-frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);
  transform:translateX(-120%)}
.js .piece-frame::after{animation:sheen 5.6s ease-in-out infinite}
@keyframes sheen{0%,72%{transform:translateX(-120%)}86%,100%{transform:translateX(120%)}}
.piece-cap{display:block;margin-top:11px;color:#4A4E56}

/* ══ 6 · HISTORIA Y PREGUNTAS · tinta con brasas coral ═════════════════ */
.ask{background:#08090D;color:var(--lt-txt);overflow:hidden;padding:clamp(58px,6.6vw,100px) 0}
.ask::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.75;
  background-image:var(--star-field-b)}
.ask>*{position:relative}
.ember{position:absolute;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(255,138,91,.5),transparent 66%);filter:blur(2px)}
.ember-a{width:8px;height:8px;left:6%;top:22%;box-shadow:0 0 26px 9px rgba(255,138,91,.24)}
.ember-b{width:6px;height:6px;right:12%;top:12%;box-shadow:0 0 20px 7px rgba(255,138,91,.2)}
.ember-c{width:10px;height:10px;left:42%;bottom:9%;box-shadow:0 0 30px 11px rgba(255,138,91,.18)}
.js .ember-a{animation:drift-neb 6.6s ease-in-out infinite}
.js .ember-c{animation:drift-neb 7.2s ease-in-out 1.1s infinite}

.ask-grid{display:grid;gap:clamp(28px,3vw,44px);align-items:start}
@media (min-width:980px){
  .ask-grid{grid-template-columns:minmax(0,.8fr) 12px minmax(0,1.2fr)}
}
.constel{display:none;align-self:stretch;min-height:100%}
.constel svg{width:12px;height:100%;display:block}
@media (min-width:980px){.constel{display:block}}
.ask-side{display:grid;gap:24px;min-width:0}
.plaque{position:relative;min-width:0;padding:clamp(20px,2.4vw,30px);border-radius:16px;
  background:linear-gradient(158deg,#1A1E27 0%,#12161E 54%,#0C0F15 100%);
  border:1px solid rgba(242,231,211,.14);
  box-shadow:inset 0 2px 0 rgba(242,231,211,.16),0 26px 48px rgba(0,0,0,.5),0 4px 0 #05060A}
.plaque-fig{margin:0 0 18px}
.plaque-fig img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 14px 28px rgba(0,0,0,.5)}
.plaque-fig figcaption{margin-top:10px;color:var(--coral)}
.plaque h3{font-size:1.3rem;color:var(--cream);margin-bottom:9px}
.plaque p{color:var(--lt-sub);font-size:.97rem}
.quotes{display:grid;gap:14px;min-width:0;margin-top:clamp(24px,2.8vw,38px)}
.quotes h3{font-size:1.1rem;color:var(--volt)}
.quote-row{display:grid;gap:14px;min-width:0}
@media (min-width:720px){.quote-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:720px){.quote-row>.quote:last-child:nth-child(odd){grid-column:1/-1}}
.quote{margin:0;padding:16px 18px;border-radius:12px;background:rgba(242,231,211,.06);
  border-left:3px solid var(--coral)}
.quote blockquote{margin:0;color:var(--lt-txt);font-size:.96rem}
.quote figcaption{margin-top:9px;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;
  color:var(--lt-sub);font-size:.88rem}

.ask-main{min-width:0}
.ask-main h2{font-size:clamp(1.85rem,3.4vw,2.8rem);color:var(--cream)}
.ask-lead{margin-top:12px;max-width:58ch;color:var(--lt-sub)}
.faqs{margin-top:clamp(22px,2.6vw,34px);display:grid;gap:12px}
.fq{border-radius:12px;overflow:hidden;
  background:linear-gradient(158deg,#171B23 0%,#11151C 60%,#0D1016 100%);
  border:1px solid rgba(242,231,211,.13);
  box-shadow:inset 0 1px 0 rgba(242,231,211,.14),0 12px 24px rgba(0,0,0,.35)}
.fq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:16px;
  padding:17px 20px;min-width:0}
.fq summary::-webkit-details-marker{display:none}
.fq-q{flex:1 1 auto;min-width:0;font-family:var(--disp);font-weight:600;font-size:1.03rem;
  color:var(--cream);overflow-wrap:anywhere}
.fq-x{position:relative;flex:0 0 auto;width:20px;height:20px;margin-top:3px}
.fq-x::before,.fq-x::after{content:"";position:absolute;left:50%;top:50%;background:var(--volt);
  border-radius:2px;transform:translate(-50%,-50%)}
.fq-x::before{width:16px;height:2.4px}
.fq-x::after{width:2.4px;height:16px;transition:transform .3s ease}
.fq[open] .fq-x::after{transform:translate(-50%,-50%) scaleY(0)}
.fq-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s ease}
.fq[open] .fq-body{grid-template-rows:1fr}
.fq-body>div{overflow:hidden}
.fq-body p{padding:0 20px 19px;color:var(--lt-sub);font-size:.97rem}
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  .fq::details-content{block-size:0;overflow:hidden;content-visibility:hidden;
    transition:block-size .34s ease,content-visibility .34s allow-discrete}
  .fq[open]::details-content{block-size:auto;content-visibility:visible}
}

/* ══ 7 · CÓMO LLEGAR · crema quemada con dársena negra ═════════════════ */
.contact{background:var(--burnt);color:var(--ink-txt);overflow:hidden;
  padding:clamp(58px,6.6vw,100px) 0 clamp(52px,6vw,88px)}
.contact::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.42;
  background-image:radial-gradient(rgba(90,72,46,.3) 1px,transparent 1.4px);
  background-size:22px 22px}
.contact>*{position:relative}
.contact h2{font-size:clamp(1.85rem,3.4vw,2.8rem)}
.ct-lead{margin-top:12px;max-width:60ch;color:#4A4E56}
.ct-grid{display:grid;gap:clamp(22px,2.6vw,34px);margin-top:clamp(28px,3.2vw,44px);align-items:start}
.contact-map{display:grid;gap:20px;min-width:0}
@media (min-width:940px){
  .contact-map{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);align-items:start}
  .dock{margin-top:32px}
  .map-wrap{aspect-ratio:4/5}
}
.dock{min-width:0;padding:clamp(20px,2.4vw,30px);border-radius:16px;background:#101319;
  color:var(--lt-txt);border:2px solid #05060A;
  box-shadow:inset 0 2px 0 rgba(242,231,211,.14),0 22px 42px rgba(70,56,34,.28)}
.dock h3{font-size:1.24rem;color:var(--volt);margin-bottom:14px}
.dock h4{font-size:.95rem;color:var(--cream);margin:20px 0 9px;
  text-transform:uppercase;letter-spacing:.09em;font-family:var(--mono);font-weight:500}
.ct-rows{display:grid;gap:11px}
.ct-row{display:flex;align-items:flex-start;gap:12px;min-width:0}
.ct-row .ico{flex:0 0 auto;width:20px;height:20px;color:var(--volt);margin-top:3px}
.ct-row a,.ct-row span,.ct-row address{min-width:0;overflow-wrap:anywhere;font-style:normal;
  color:var(--lt-txt);text-decoration:none;font-size:.97rem}
.ct-row a:hover{color:var(--volt)}
.hrow{display:flex;justify-content:space-between;gap:14px;padding:6px 0;
  border-bottom:1px dashed rgba(242,231,211,.16);color:var(--lt-sub)}
.branches{display:grid;gap:11px}
.branch{display:grid;gap:3px;padding:11px 13px;border-radius:9px;background:rgba(242,231,211,.06);
  min-width:0;font-size:.92rem}
.branch b{font-family:var(--disp);color:var(--cream)}
.branch span,.branch a{color:var(--lt-sub);overflow-wrap:anywhere;text-decoration:none}
.map-frame{min-width:0;border-radius:16px;overflow:hidden;border:2px solid #05060A;
  box-shadow:0 22px 42px rgba(70,56,34,.28)}
.map-wrap{position:relative;width:100%;aspect-ratio:16/11;background:#101319}
.map-embed{position:absolute;inset:0;width:100%;height:100%;border:0}

.contact-form{position:relative;min-width:0;border-radius:16px;overflow:hidden;
  border:2px solid #05060A;box-shadow:0 24px 46px rgba(70,56,34,.3)}
.cf-bg{position:absolute;inset:0}
.cf-bg img{width:100%;height:100%;object-fit:cover}
.cf-veil{position:absolute;inset:0;
  background:linear-gradient(102deg,rgba(9,11,15,.62) 0%,rgba(9,11,15,.86) 40%,rgba(9,11,15,.96) 72%)}
@media (max-width:939px){
  .cf-veil{background:linear-gradient(178deg,rgba(9,11,15,.66) 0%,rgba(9,11,15,.93) 34%,rgba(9,11,15,.97) 100%)}
}
.cf-in{position:relative;padding:clamp(22px,2.6vw,34px);color:var(--lt-txt);display:grid;gap:18px}
.cf-head{min-width:0}
@media (min-width:940px){
  .cf-in{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(24px,3vw,44px);align-items:start}
}
.cf-in h3{font-size:1.34rem;color:var(--cream)}
.cf-hint{margin-top:9px;color:var(--lt-sub);font-size:.95rem}
#cform{display:grid;gap:14px;min-width:0}
.two{display:grid;gap:14px}
@media (min-width:560px){.two{grid-template-columns:1fr 1fr}}
#cform label{display:grid;gap:6px;min-width:0;font-family:var(--mono);font-size:.78rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--lt-sub)}
#cform input,#cform textarea{width:100%;min-width:0;font-family:var(--body);font-size:1rem;
  color:var(--lt-txt);background:rgba(242,231,211,.07);border:1.5px solid rgba(242,231,211,.24);
  border-radius:9px;padding:12px 14px;min-height:48px}
#cform textarea{min-height:96px;resize:vertical}
#cform input:focus,#cform textarea:focus{border-color:var(--volt);outline:none}
#cform input::placeholder,#cform textarea::placeholder{color:rgba(191,182,166,.6);
  text-transform:none;letter-spacing:0;font-family:var(--body)}
.err{display:none;color:#FFB9A0;font-family:var(--body);font-size:.84rem;
  letter-spacing:0;text-transform:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn-send{justify-self:start;margin-top:4px}
.okmsg{display:none;margin-top:6px;color:var(--volt);font-size:.94rem}

/* ══ PIE ═══════════════════════════════════════════════════════════════ */
.foot{position:relative;background:var(--ink);color:var(--lt-txt);overflow:hidden;
  padding:clamp(52px,5.6vw,84px) 0 0}
.foot-field{position:absolute;inset:0;z-index:0;background-image:var(--star-field-b);opacity:.6}
.foot>*{position:relative}
.foot-grid{display:grid;gap:clamp(24px,3vw,42px);grid-template-columns:1fr}
@media (min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.foot-brand{min-width:0;display:grid;gap:12px;justify-items:start}
.foot-brand>*{max-width:100%;min-width:0}
.foot-brand .wordmark-tail{white-space:normal;overflow:visible;text-overflow:clip}
.foot-brand .wordmark{font-size:clamp(1.15rem,1.7vw,1.45rem);color:var(--cream)}
.foot-brand p{color:var(--lt-sub);font-size:.93rem;max-width:40ch}
.foot-brand .biz-logo{height:52px}
.foot-col{display:grid;gap:9px;align-content:start;min-width:0}
.foot-col h4{font-family:var(--mono);font-weight:500;font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--volt);margin-bottom:4px}
.foot-col a,.foot-col span{color:var(--lt-sub);text-decoration:none;font-size:.93rem;
  overflow-wrap:anywhere}
.foot-col a:hover{color:var(--cream)}
.ghost-band{margin-top:clamp(34px,4vw,58px);overflow:hidden;padding:0 12px}
.ghost{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-family:var(--disp);font-weight:700;text-align:center;max-width:100%;
  font-size:clamp(1.5rem,4.8vw,3.9rem);line-height:1.04;color:rgba(242,231,211,.085);
  hyphens:none;overflow-wrap:anywhere}
.foot-base{margin-top:clamp(22px,2.6vw,34px);border-top:1px solid rgba(242,231,211,.13);
  padding:18px 0 22px}
.foot-base-in{display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;
  color:var(--lt-sub);font-size:.87rem}
.foot-base-in a{text-decoration:underline;text-underline-offset:3px}

/* ══ FLOTANTES ═════════════════════════════════════════════════════════ */
.goup{position:fixed;right:16px;bottom:88px;z-index:60;width:48px;height:48px;border-radius:12px;
  background:var(--volt);color:#04231A;border:0;cursor:pointer;display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .28s ease,transform .28s ease,visibility .28s;
  box-shadow:0 3px 0 #0E7C5B,0 14px 26px rgba(0,0,0,.5)}
.goup.on{opacity:1;visibility:visible;transform:none}
.goup svg{width:20px;height:20px;stroke-width:2}

.lbox{position:fixed;inset:0;z-index:9999;background:rgba(4,5,10,.95);display:flex;
  align-items:center;justify-content:center;padding:5vh 4vw}
.lbox[hidden]{display:none!important}
.lbox img{max-width:100%;max-height:90vh;border-radius:10px;
  box-shadow:0 30px 70px rgba(0,0,0,.7)}
.lbox-x{position:absolute;right:18px;top:18px;width:46px;height:46px;border-radius:10px;
  background:var(--cream);color:#101319;border:0;cursor:pointer;font-size:1.1rem;line-height:1}

#lb-cookie-notice{position:fixed;left:12px;right:12px;bottom:12px;z-index:9990;display:flex;
  align-items:center;gap:14px;flex-wrap:wrap;background:rgba(16,19,25,.97);color:#F2F4F7;
  padding:14px 18px;border-radius:10px;box-shadow:0 4px 18px rgba(0,0,0,.35);
  font-size:.85rem;line-height:1.45}
#lb-cookie-notice[hidden]{display:none}
#lb-cookie-notice p{margin:0;flex:1 1 260px}
#lb-cookie-notice a{color:inherit;text-decoration:underline}
#lb-cookie-btn{flex:0 0 auto;min-height:44px;padding:10px 22px;border:0;border-radius:8px;
  background:var(--volt);color:#04231A;font-weight:700;font-family:var(--disp);cursor:pointer}

/* ══ REVELADOS (la clase la pone JS; nada nace oculto) ═════════════════ */
.js .settle{opacity:0;transform:translateY(20px)}
.js .settle-r{transform:translateY(20px) rotate(.8deg)}
.js .settle.is-in{opacity:1;transform:none;
  transition:opacity .62s ease,transform .62s cubic-bezier(.22,.72,.3,1)}

/* ══ ICONOS ════════════════════════════════════════════════════════════ */
.ico{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
svg use{fill:none;stroke:currentColor}

/* ══ MÓVIL ═════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  body{font-size:16px}
  .hero{min-height:0;align-items:flex-start;padding:330px 0 54px}
  .stage{inset:0 0 auto 0;height:340px}
  .module{width:196px;left:6%;top:26px;transform:translate(0,0) rotate(-5deg)}
  .case{width:136px;left:auto;right:8%;top:70px;transform:translate(0,0) rotate(4deg)}
  .js .module{animation:drift-am 6.4s ease-in-out infinite}
  .js .case{animation:drift-bm 7s ease-in-out infinite}
  @keyframes drift-am{0%,100%{transform:translate(0,0) rotate(-5deg)}
    50%{transform:translate(0,-6px) rotate(-6.4deg)}}
  @keyframes drift-bm{0%,100%{transform:translate(0,0) rotate(4deg)}
    50%{transform:translate(0,5px) rotate(5.2deg)}}
  .hero h1{max-width:none}
  .hero-lead{max-width:none}
  .neb-c{right:-30%;top:2%}
  .goup{right:12px;bottom:96px;width:44px;height:44px}
  .ghost{font-size:clamp(1.9rem,11vw,3.4rem)}
}
@media (max-width:420px){
  .module{width:164px;left:4%}
  .case{width:116px;right:5%}
  .stage{height:300px}
  .hero{padding:296px 0 48px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.001ms!important;
    scroll-behavior:auto!important}
  .js .settle{opacity:1;transform:none}
  .js .am.pre{opacity:1;transform:none}
  .goup{transition:none}
}