@font-face{font-family:"Inter";src:url(assets/fonts/Inter-Variable.ttf) format("truetype");font-weight:100 900;font-display:swap}
:root{--neon:#C9FD39;--negro:#0A0A0A;--hueso:#F2F2EE;--violeta:#BD96FE;--azul:#6399D9;--niebla:#8C8F88;--mute:rgba(242,242,238,.78);--line:rgba(242,242,238,.12)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--negro);color:var(--hueso);font:400 16px/1.5 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-align:center}
h1,h2,h3{font-weight:500;letter-spacing:-.025em;text-wrap:balance}

/* HERO */
.hero{position:relative;min-height:min(100svh,900px);display:flex;flex-direction:column;overflow:hidden;text-align:left}
/* FONDO ABSTRACTO (estático). Variantes por clase en .hero: bg-a (default) | bg-b | bg-c */
.hero-bg{position:absolute;inset:0;overflow:hidden;background:#0A0A0A}
.hero-bg::before,.hero-bg::after{content:"";position:absolute;pointer-events:none}
.hero-bg::after{-webkit-mask-image:linear-gradient(#000 70%,transparent 98%);mask-image:linear-gradient(#000 70%,transparent 98%)}
/* fundido inferior común, para que el hero se funda con el resto de la página */
.hero-bg .fade{position:absolute;inset:auto 0 0 0;height:22%;background:linear-gradient(to bottom,rgba(10,10,10,0),#0A0A0A)}

/* A: degradé profundo + brillo neón tenue desde la esquina superior derecha */
.bg-a .hero-bg{background:
  radial-gradient(90% 70% at 0% 100%,#141612 0%,rgba(10,10,10,0) 65%),
  linear-gradient(200deg,#11130E 0%,#0A0A0A 50%,#080908 100%)}
.bg-a .hero-bg::before{inset:0;background:
  radial-gradient(farthest-corner circle at 100% 0%,rgba(201,253,57,.22) 0%,rgba(201,253,57,.09) 18%,rgba(201,253,57,.03) 38%,rgba(201,253,57,0) 58%),
  radial-gradient(70% 60% at 100% 0%,rgba(150,190,50,.10) 0%,rgba(10,10,10,0) 70%)}
.bg-a .hero-bg::after{inset:0;opacity:.08;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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* B: degradé oscuro + grano de película + caída de luz Hueso */
.bg-b .hero-bg{background:
  radial-gradient(farthest-corner circle at 80% 0%,rgba(242,242,238,.20) 0%,rgba(242,242,238,.09) 20%,rgba(242,242,238,.03) 42%,rgba(242,242,238,0) 62%),
  linear-gradient(180deg,#131312 0%,#0A0A0A 75%)}
.bg-b .hero-bg::after{inset:0;opacity:.42;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .95 0 0 0 0 .93 1.4 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* C: formas orgánicas grandes y difuminadas (tipo aurora), neutros oscuros + toque neón/violeta/azul */
.bg-c .hero-bg::before{inset:-10%;filter:blur(56px);transform:rotate(-14deg);background:
  radial-gradient(28% 20% at 80% 18%,rgba(201,253,57,.26) 0%,rgba(201,253,57,.10) 50%,rgba(201,253,57,0) 100%),
  radial-gradient(30% 24% at 63% 47%,rgba(189,150,254,.24) 0%,rgba(189,150,254,.08) 50%,rgba(189,150,254,0) 100%),
  radial-gradient(28% 28% at 92% 66%,rgba(80,120,220,.28) 0%,rgba(80,120,220,.09) 50%,rgba(80,120,220,0) 100%),
  radial-gradient(42% 26% at 42% 6%,rgba(140,143,136,.22) 0%,rgba(140,143,136,0) 100%),
  radial-gradient(50% 30% at 78% 92%,rgba(70,72,66,.55) 0%,rgba(70,72,66,0) 100%)}
.bg-c .hero-bg::after{inset:0;opacity:.06;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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
header{position:relative;padding:24px 22px 0}
.logo-top{width:96px;height:auto}
/* D/E/F: fondos con gráfica (capa ::before = arte, ::after = protección del texto) */
.bg-d .hero-bg::after,.bg-e .hero-bg::after,.bg-f .hero-bg::after{inset:0;-webkit-mask-image:none;mask-image:none;background:linear-gradient(to bottom,rgba(10,10,10,0) 28%,rgba(10,10,10,.7) 46%,#0A0A0A 62%)}
.bg-d .hero-bg::before,.bg-e .hero-bg::before,.bg-f .hero-bg::before{inset:0;background-repeat:no-repeat;background-position:center top;background-size:100% auto}
/* D: composición 3D (arco + esfera, vidrio/metal oscuro con filo neón) */
.bg-d .hero-bg::before{background-image:url(assets/bg-d-m.webp)}
/* D en mobile: el anillo va en el flujo del hero (div .ring), entre la bajada y el formulario */
.ring{display:none}
@media(max-width:759px){
  .bg-d .hero-bg::before,.bg-d .hero-bg::after,.bg-d .hero-bg .fade{display:none}
  .hero.bg-d{min-height:min(100svh,900px)}
  .bg-d .hero-c{padding:clamp(22px,6svh,56px) 22px clamp(18px,3.5svh,32px)}
  .bg-d h1{font-size:clamp(30px,min(9.6vw,4.9svh),44px)}
  .bg-d .lead2{margin-top:clamp(10px,2svh,18px);font-size:clamp(16px,min(4.7vw,2.4svh),20px)}
  .bg-d .ring{display:block;flex:1 1 0;min-height:110px;margin:clamp(10px,2.2svh,22px) -22px;background:url(assets/bg-d-m.webp) center/contain no-repeat}
  .hero-form{margin-top:0}
}
@media(max-width:759px) and (max-height:720px){
  .hero-form{gap:8px}.hero-form input,.hero-form .btn{height:48px}
}
/* E: la marca A de Across gigante, tono sobre tono, punto con contorno neón */
.bg-e .hero-bg::before{background-image:url(assets/bg-e-m.svg)}
/* F: curvas de nivel finas en Hueso con una sola línea neón */
.bg-f .hero-bg::before{background-image:url(assets/bg-f-m.svg)}

.hero-c{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-start;padding:36px 22px 44px;max-width:1200px;margin:0 auto;width:100%}
h1{font-size:clamp(34px,9vw,72px);line-height:1.05;max-width:13ch}
.lead2{font-size:clamp(17px,4.6vw,22px);line-height:1.4;font-weight:400;letter-spacing:-.01em;margin-top:14px;color:var(--hueso);max-width:34ch;text-wrap:pretty}
.btn{height:52px;border:0;border-radius:999px;background:var(--neon);color:var(--negro);font:600 16px Inter,sans-serif;cursor:pointer;padding:0 28px;transition:transform .15s,filter .15s}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn:disabled{opacity:.6}
.btn-xl{height:58px;padding:0 20px;font-size:16px;margin-top:28px;width:100%;max-width:380px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.hero-form .btn{white-space:nowrap}
.btn-2{background:transparent;color:var(--hueso);border:1px solid rgba(242,242,238,.4);font-weight:500}
.wl{display:grid;gap:10px;width:100%;max-width:380px;margin-top:22px}
input{height:52px;border-radius:999px;border:1px solid rgba(242,242,238,.25);background:rgba(10,10,10,.55);backdrop-filter:blur(6px);color:var(--hueso);padding:0 22px;font:400 16px Inter,sans-serif;width:100%;text-align:left}
input::placeholder{color:rgba(242,242,238,.66)}
input:focus{outline:none;border-color:var(--hueso)}
.hp{position:absolute;left:-9999px;height:0;width:0;opacity:0}
.msg{font-size:15px}.msg:empty{display:none}

/* INVITACIÓN sobre el formulario del hero */
.invite{margin-top:clamp(18px,3svh,28px);font-size:16px;font-weight:500;letter-spacing:-.01em;color:var(--hueso)}
.invite+.hero-form{margin-top:12px}

/* PRODUCTOS: sección con título + dos tarjetas */
.products{max-width:1200px;margin:0 auto;padding:56px 16px 0;text-align:left}
.sec-head h2{font-size:clamp(26px,6.8vw,44px);line-height:1.1;max-width:18ch}
.pgrid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:24px}
.pcard{position:relative;overflow:hidden;border-radius:24px;padding:26px 22px 28px;background:linear-gradient(160deg,rgba(242,242,238,.06),rgba(242,242,238,.02));border:1px solid var(--line);isolation:isolate}
.k{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--hueso);padding:6px 12px 6px 10px;border-radius:999px;border:1px solid var(--line)}
.k .dot{width:8px;height:8px;border-radius:50%;background:var(--hueso)}
.pc-inv .k .dot{background:var(--azul)}
.pc-adv .k .dot{background:var(--neon)}
.pc-adv .k{border-color:rgba(201,253,57,.45)}
.pc-inv .k{border-color:rgba(99,153,217,.45)}
.pcard h3{font-size:clamp(24px,6.4vw,30px);line-height:1.12;letter-spacing:-.02em;margin-top:18px;max-width:14ch}
.ptxt{color:var(--mute);font-size:16px;margin-top:10px;line-height:1.5;max-width:36ch;text-wrap:pretty}
/* gráfica de marca: anillo segmentado tono sobre tono, recortado en la esquina */
.pring{position:absolute;z-index:-1;right:-64px;top:-64px;width:170px;height:170px;border-radius:50%;pointer-events:none;
  -webkit-mask:radial-gradient(circle,transparent 53%,#000 54%);mask:radial-gradient(circle,transparent 53%,#000 54%);
  background:conic-gradient(from 0deg,rgba(242,242,238,.08) 0 86deg,transparent 0 90deg,rgba(242,242,238,.05) 0 176deg,transparent 0 180deg,rgba(242,242,238,.11) 0 216deg,transparent 0 220deg,var(--seg,rgba(242,242,238,.28)) 0 300deg,transparent 0 304deg,rgba(242,242,238,.06) 0 356deg,transparent 0)}
.pc-adv .pring{--seg:var(--neon)}
.pc-inv .pring{--seg:var(--azul)}

/* CIERRE */
.closing{max-width:1200px;margin:0 auto;padding:72px 22px 16px}
.closing h2{font-size:clamp(26px,6.5vw,40px);line-height:1.1;max-width:16ch;margin:0 auto}
.closing .btn-xl{margin-top:24px}

/* PARTNERS: banda propia con acento violeta */
.partners{max-width:1200px;margin:0 auto;padding:64px 16px 48px}
.pband{position:relative;overflow:hidden;text-align:left;border-radius:24px;padding:28px 22px;border:1px solid rgba(189,150,254,.35);
  background:radial-gradient(120% 140% at 100% 0%,rgba(189,150,254,.16) 0%,rgba(189,150,254,.04) 45%,rgba(189,150,254,0) 70%),rgba(242,242,238,.03)}
.k-pt{border-color:rgba(189,150,254,.45);color:var(--violeta)}
.k-pt .dot{background:var(--violeta)}
.pband h2{font-size:clamp(26px,6.8vw,40px);line-height:1.1;margin-top:18px}
.pb-sub{color:var(--mute);font-size:16px;line-height:1.5;margin-top:10px;max-width:40ch;text-wrap:pretty}
.btn-pt{margin-top:24px;width:100%;background:transparent;color:var(--hueso);border:1.5px solid var(--violeta);display:inline-flex;align-items:center;justify-content:center}
.btn-pt:hover{background:rgba(189,150,254,.12);filter:none}

/* FOOTER */
dialog{margin:auto;border:1px solid var(--line);border-radius:24px;background:#111210;color:var(--hueso);padding:40px 24px 28px;width:min(440px,calc(100% - 32px))}
dialog::backdrop{background:rgba(10,10,10,.75);backdrop-filter:blur(4px)}
dialog h2{font-size:26px}
dialog .sub{font-size:15px;margin:10px auto 0}
.x{position:absolute;top:12px;right:16px;background:none;border:0;color:var(--mute);font-size:26px;cursor:pointer}
.x:focus-visible,.link:focus-visible,.btn:focus-visible{outline:2px solid var(--hueso);outline-offset:3px}
footer{max-width:820px;margin:0 auto;padding:16px 20px 48px;border-top:1px solid var(--line)}
.disclaimer{color:var(--mute);font-size:11.5px;line-height:1.6;margin-top:12px}

@media(min-width:760px){
  header{padding:40px 56px 0;max-width:1312px;margin:0 auto;width:100%}
  .logo-top{width:104px}
  .hero{min-height:min(100vh,860px)}
  .bg-d .hero-bg::before,.bg-e .hero-bg::before,.bg-f .hero-bg::before{inset:0;height:auto;background-position:right center;background-size:auto 100%}
  .bg-d .hero-bg::before{background-image:url(assets/bg-d.webp)}
  .bg-d .hero-bg .fade{height:10%}
  .bg-e .hero-bg::before{background-image:url(assets/bg-e.svg)}
  .bg-f .hero-bg::before{background-image:url(assets/bg-f.svg)}
  .bg-d .hero-bg::after,.bg-e .hero-bg::after,.bg-f .hero-bg::after{background:linear-gradient(to right,rgba(10,10,10,.85) 0%,rgba(10,10,10,.55) 30%,rgba(10,10,10,0) 50%)}
  .hero-c{justify-content:center;padding:56px 56px 72px;max-width:1312px}
  h1{font-size:clamp(40px,3.9vw,56px);line-height:1.08;letter-spacing:-.03em;max-width:15ch}
  .lead2{margin-top:20px;font-size:clamp(18px,1.45vw,20px);max-width:36ch;color:var(--mute)}
  .invite{margin-top:36px;font-size:18px}
  .invite+.hero-form{margin-top:14px}
  .btn-xl{height:62px;font-size:17px;width:auto;padding:0 40px;margin-top:36px}
  .hero-form{grid-template-columns:1fr 1fr;max-width:560px;margin-top:36px;gap:12px}
  .hero-form input{height:56px}
  .hero-form .btn{grid-column:1/-1;justify-self:start;height:60px;font-size:17px;padding:0 40px;margin-top:4px}
  .hero-form .msg{grid-column:1/-1}
  .products{padding:64px 56px 0;max-width:1312px}
  .sec-head h2{font-size:clamp(32px,3vw,44px);max-width:none}
  .pgrid{grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}
  .pcard{padding:44px 44px 52px;border-radius:28px;min-height:280px}
  .pcard h3{font-size:clamp(28px,2.4vw,36px);margin-top:32px;max-width:none}
  .ptxt{font-size:18px;margin-top:14px}
  .pring{width:280px;height:280px;right:-96px;top:-96px}
  .closing{padding:120px 22px 24px}
  .partners{padding:96px 56px 72px;max-width:1312px}
  .pband{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:52px 56px;border-radius:28px}
  .pband h2{font-size:clamp(30px,2.6vw,40px)}
  .pb-sub{font-size:18px}
  .btn-pt{margin-top:0;width:auto;flex:none;padding:0 36px}
}
/* SISTEMA DE CONTROLES (campos y botones): una sola altura por breakpoint,
   formulario en una columna (patrón recomendado para formularios cortos),
   botón con el mismo ancho que los campos y etiqueta proporcional a la altura. */
:root{--ctl-h:52px;--ctl-fs:16px;--btn-fs:17px}
@media(min-width:760px){:root{--ctl-h:56px;--ctl-fs:17px;--btn-fs:18px}}
input,.btn,.btn-xl,.hero-form input,.hero-form .btn{height:var(--ctl-h)}
input{font-size:var(--ctl-fs)}
.btn,.btn-xl{font-size:var(--btn-fs);font-weight:600;letter-spacing:-.01em;padding:0 32px}
.hero-form{grid-template-columns:1fr;gap:10px}
.hero-form .btn{width:100%;margin-top:4px}
@media(min-width:760px){
  .hero-form{grid-template-columns:1fr;max-width:420px;margin-top:32px}
  .hero-form .btn{grid-column:auto;justify-self:stretch;margin-top:4px}
  .btn-xl{width:100%;max-width:420px;margin-top:32px}
}
@media(max-width:759px){.btn-xl{width:100%;max-width:none}}
@media(max-width:759px) and (max-height:720px){
  :root{--ctl-h:48px}.hero-form{gap:8px}
}

.sec-sub{color:var(--mute);font-size:clamp(16px,1.4vw,19px);margin-top:10px}