:root{
  --bg:#292b2f;
  --bg-2:#232529;
  --panel:#32353a;
  --panel-2:#3a3d42;
  --text:#f4f5f6;
  --muted:#aeb3ba;
  --line:#45494f;
  --orange:#ff9f1a;
  --orange-2:#ffc15a;
  --blue:#1e88ff;
  --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 15% 4%,rgba(255,159,26,.10),transparent 22%),
    linear-gradient(180deg,var(--bg),var(--bg-2));
  color:var(--text);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit}
.hero{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);
  align-items:center;
  gap:clamp(32px,6vw,90px);
  max-width:1320px;
  margin:auto;
  padding:64px 34px;
}
.brand{
  font-size:clamp(72px,10vw,148px);
  font-weight:900;
  letter-spacing:-.07em;
  line-height:.86;
  color:var(--orange);
  text-shadow:0 0 38px rgba(255,159,26,.12);
}
.brand.small{font-size:32px;letter-spacing:-.04em}
.eyebrow,.kicker{
  color:var(--orange-2);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:.78rem;
}
h1{
  max-width:800px;
  margin:14px 0 20px;
  font-size:clamp(40px,5.5vw,76px);
  line-height:1.02;
  letter-spacing:-.045em;
}
h2{
  margin:8px 0 0;
  font-size:clamp(30px,4vw,52px);
  line-height:1.08;
  letter-spacing:-.035em;
}
h3{margin:0 0 10px;font-size:1.22rem}
p strong{color:#fff}
.lead{
  max-width:720px;
  color:#d2d5d9;
  font-size:clamp(17px,1.8vw,21px);
}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.chips span{
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  padding:9px 13px;
  border-radius:999px;
  color:#dce0e4;
  font-size:.9rem;
}
.device-stage{
  position:relative;
  min-height:520px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.halo{
  position:absolute;
  width:72%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(30,136,255,.20),rgba(255,159,26,.07) 35%,transparent 68%);
  filter:blur(18px);
}
.slideshow{
  width:min(82vw,560px);
  aspect-ratio:1/1;
  position:relative;
  z-index:1;
}
.slide{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:contain;
  opacity:0;transform:scale(.985);
  transition:opacity .35s ease,transform .35s ease;
  filter:drop-shadow(0 35px 70px rgba(0,0,0,.45));
}
.slide.active{opacity:1;transform:scale(1)}
.counter{
  position:absolute;z-index:2;bottom:20px;right:8%;
  color:var(--muted);font-size:.85rem;letter-spacing:.12em;
}
main{max-width:1320px;margin:auto;padding:0 34px 60px}
.section{padding:92px 0;border-top:1px solid var(--line)}
.section-title{max-width:900px;margin-bottom:42px}
.copy-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;
  color:#c9cdd2;font-size:1.05rem;
}
.use-grid{display:grid;gap:24px}
.use-card{
  display:grid;
  grid-template-columns:minmax(280px,.95fr) minmax(0,1.05fr);
  border:1px solid var(--line);
  border-radius:30px;
  overflow:hidden;
  background:rgba(255,255,255,.025);
}
.use-card:nth-child(even){grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr)}
.use-card:nth-child(even) img{order:2}
.use-card img{
  width:100%;height:100%;min-height:360px;object-fit:cover;
}
.use-copy{
  padding:clamp(28px,5vw,58px);
  display:flex;flex-direction:column;justify-content:center;
}
.use-copy span{
  color:var(--orange-2);text-transform:uppercase;
  letter-spacing:.12em;font-weight:700;font-size:.75rem;margin-bottom:10px;
}
.use-copy h3{font-size:clamp(25px,3vw,40px);line-height:1.1;letter-spacing:-.03em}
.use-copy p{color:var(--muted);font-size:1.03rem}
.portable-grid{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center
}
.portable-grid p{color:#c9cdd2;font-size:1.04rem}
.mini-gallery{
  display:grid;grid-template-columns:1fr 1fr;gap:14px
}
.mini-gallery img{
  border-radius:24px;height:420px;width:100%;object-fit:cover;
  border:1px solid var(--line)
}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;min-height:270px;
}
.card p{color:var(--muted);margin-bottom:0}
.icon{
  width:48px;height:48px;border-radius:16px;
  display:grid;place-items:center;margin-bottom:48px;
  background:rgba(255,159,26,.10);
  border:1px solid rgba(255,159,26,.28);
  color:var(--orange-2);font-weight:800;
}
.benefit-list{
  display:grid;grid-template-columns:1fr 1fr;gap:12px
}
.benefit-list div{
  display:grid;grid-template-columns:48px 1fr;gap:16px;
  align-items:start;padding:22px 24px;
  border:1px solid var(--line);border-radius:20px;
  background:rgba(255,255,255,.025);
}
.benefit-list strong{color:var(--orange);font-size:1.05rem}
.benefit-list span{color:#d2d5d9}
.photo-strip{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.photo-strip img{
  border-radius:28px;
  height:520px;width:100%;object-fit:cover;
  border:1px solid var(--line)
}
.flow{display:grid;gap:14px}
.flow-item{
  display:grid;grid-template-columns:64px 1fr;gap:20px;
  align-items:start;padding:24px;border:1px solid var(--line);
  border-radius:22px;background:rgba(255,255,255,.025);
}
.flow-item strong{
  width:50px;height:50px;border-radius:50%;
  display:grid;place-items:center;background:var(--orange);
  color:#191a1c;font-size:1.25rem;
}
.flow-item p{margin:0;color:var(--muted)}
.cta-box{
  display:grid;grid-template-columns:1fr 1fr;gap:50px;
  padding:42px;border-radius:32px;
  background:linear-gradient(135deg,rgba(255,159,26,.13),rgba(30,136,255,.08)),var(--panel);
  border:1px solid #50545b;
}
.cta-box p{font-size:1.05rem;color:#d2d5d9}
footer{
  max-width:1320px;margin:0 auto;padding:36px 34px 56px;
  display:flex;gap:24px;align-items:center;color:var(--muted);
  border-top:1px solid var(--line);
}
footer p{margin:0}
footer a{margin-left:auto;text-decoration:none;color:#dfe3e7}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:46px;min-height:auto}
  .device-stage{min-height:420px}
  .cards,.benefit-list{grid-template-columns:1fr}
  .copy-grid,.portable-grid,.cta-box{grid-template-columns:1fr}
  .use-card,.use-card:nth-child(even){grid-template-columns:1fr}
  .use-card:nth-child(even) img{order:0}
  .photo-strip{grid-template-columns:1fr}
  .photo-strip img{height:auto}
  .section{padding:68px 0}
}
@media(max-width:620px){
  .hero,main,footer{padding-left:20px;padding-right:20px}
  .hero{gap:8px}
  .brand{font-size:82px}
  .device-stage{min-height:350px}
  .slideshow{width:94vw}
  .copy-grid{gap:12px}
  .mini-gallery{grid-template-columns:1fr}
  .mini-gallery img{height:auto}
  .cta-box{padding:26px}
  footer{align-items:flex-start;flex-direction:column}
  footer a{margin-left:0}
}
@media(prefers-reduced-motion:reduce){.slide{transition:none}}


/* ===== Explorador interactivo estilo producto ===== */
.interactive-stage{
  min-height:620px;
  align-items:center;
  justify-content:center;
  isolation:isolate;
  perspective:1100px;
}
.stage-code{
  position:absolute;
  width:min(78%,470px);
  height:390px;
  left:2%;
  top:50%;
  transform:translateY(-50%) rotate(-2deg);
  border-radius:34px;
  overflow:hidden;
  background:#1f2528;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 35px 80px rgba(0,0,0,.38);
  opacity:.9;
}
.code-top{
  height:48px;
  display:flex;
  gap:8px;
  align-items:center;
  padding:0 18px;
  border-bottom:1px solid rgba(255,255,255,.07);
  color:#8f979e;
  font-size:.72rem;
}
.code-top span{
  width:9px;height:9px;border-radius:50%;
  background:#555d62;
}
.code-top b{margin-left:auto;font-weight:600}
.stage-code pre{
  margin:0;
  padding:28px 24px 30px;
  color:#e7e9ea;
  font:600 15px/1.72 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.stage-code code{white-space:pre-wrap}
.stage-code .ln{
  color:#6d767c;
  display:inline-block;
  width:34px;
  user-select:none;
}
.stage-code code{
  background:
    linear-gradient(90deg,transparent 0 38px,rgba(255,159,26,.06) 38px 100%);
}
.device-deck{
  position:relative;
  z-index:3;
  width:min(76vw,470px);
  aspect-ratio:1;
  margin-left:19%;
  cursor:grab;
  touch-action:pan-y;
  user-select:none;
  transform-style:preserve-3d;
}
.device-deck.dragging{cursor:grabbing}
.deck-glow{
  position:absolute;
  inset:10%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(35,154,255,.35),rgba(255,159,26,.12) 43%,transparent 70%);
  filter:blur(28px);
  transform:translateZ(-80px);
}
.screen-card{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  border-radius:50%;
  transform:rotateY(-7deg) rotateX(2deg);
  transition:transform .28s cubic-bezier(.2,.8,.2,1), filter .28s ease;
  will-change:transform;
}
.screen-card img{
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 32px 42px rgba(0,0,0,.48));
}
.screen-card.switching-left{animation:screenOutLeft .28s ease forwards}
.screen-card.switching-right{animation:screenOutRight .28s ease forwards}
.screen-card.enter-left{animation:screenInLeft .34s cubic-bezier(.2,.8,.2,1) both}
.screen-card.enter-right{animation:screenInRight .34s cubic-bezier(.2,.8,.2,1) both}
@keyframes screenOutLeft{
  to{opacity:0;transform:translateX(-85px) rotateY(14deg) scale(.92)}
}
@keyframes screenOutRight{
  to{opacity:0;transform:translateX(85px) rotateY(-14deg) scale(.92)}
}
@keyframes screenInLeft{
  from{opacity:0;transform:translateX(85px) rotateY(-14deg) scale(.92)}
  to{opacity:1;transform:rotateY(-7deg) rotateX(2deg)}
}
@keyframes screenInRight{
  from{opacity:0;transform:translateX(-85px) rotateY(14deg) scale(.92)}
  to{opacity:1;transform:rotateY(-7deg) rotateX(2deg)}
}
.deck-shadow{
  position:absolute;
  left:12%;right:6%;bottom:-4%;
  height:13%;
  background:radial-gradient(ellipse,rgba(0,0,0,.46),transparent 70%);
  filter:blur(10px);
  transform:rotate(-5deg);
  z-index:-1;
}
.deck-controls{
  position:absolute;
  z-index:5;
  left:50%;
  transform:translateX(-35%);
  bottom:6px;
  display:flex;
  align-items:center;
  gap:14px;
  background:rgba(28,30,33,.78);
  border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  padding:8px 10px;
  border-radius:999px;
  box-shadow:0 14px 32px rgba(0,0,0,.22);
}
.deck-btn{
  width:44px;height:44px;
  border:0;
  border-radius:50%;
  background:#3a3d42;
  color:#fff;
  font-size:29px;
  line-height:1;
  cursor:pointer;
  transition:.2s ease;
}
.deck-btn:hover{background:var(--orange);color:#1d1e20;transform:scale(1.04)}
.deck-status{
  min-width:145px;
  text-align:center;
  display:flex;
  flex-direction:column;
  line-height:1.22;
}
.deck-status span{font-size:.88rem;font-weight:750;color:#f5f6f7}
.deck-status small{
  margin-top:4px;
  color:#9fa6ac;
  font-size:.69rem;
  letter-spacing:.04em;
}
.deck-dots{
  position:absolute;
  z-index:5;
  bottom:-34px;
  left:50%;
  transform:translateX(-25%);
  display:flex;
  gap:7px;
}
.deck-dot{
  width:7px;height:7px;border:0;padding:0;
  border-radius:99px;
  background:#5a6066;
  cursor:pointer;
  transition:all .25s ease;
}
.deck-dot.active{width:24px;background:var(--orange)}
@media(max-width:900px){
  .interactive-stage{min-height:560px}
  .stage-code{width:67%;left:0;height:340px}
  .device-deck{width:min(78vw,430px);margin-left:16%}
}
@media(max-width:620px){
  .interactive-stage{
    min-height:470px;
    margin-top:10px;
    overflow:hidden;
  }
  .stage-code{
    width:74%;
    height:300px;
    left:-10%;
    border-radius:26px;
  }
  .stage-code pre{font-size:11px;padding:18px 14px;line-height:1.75}
  .device-deck{
    width:min(79vw,340px);
    margin-left:23%;
  }
  .deck-controls{
    bottom:0;
    transform:translateX(-41%);
  }
  .deck-status{min-width:120px}
  .deck-dots{bottom:-27px;transform:translateX(-35%)}
}

/* ===== v4: demo táctil real del dispositivo ===== */
.device-demo{position:relative;z-index:4;width:min(76vw,470px);aspect-ratio:1;margin-left:19%;display:grid;place-items:center}
.device-shell{position:relative;width:100%;aspect-ratio:1;border-radius:50%;cursor:grab;touch-action:pan-y;user-select:none;filter:drop-shadow(0 34px 42px rgba(0,0,0,.48))}
.device-shell.dragging{cursor:grabbing}
.screen-viewport{position:absolute;inset:14.6%;border-radius:50%;overflow:hidden;background:#071d63;z-index:2}
.screen-track{height:100%;display:flex;will-change:transform}
.screen-panel{height:100%;min-width:100%;position:relative;overflow:hidden}
.screen-panel img{position:absolute;width:141.2%;height:141.2%;max-width:none;left:50%;top:50%;transform:translate(-50%,-50%);object-fit:contain;pointer-events:none}
.physical-bezel{position:absolute;inset:0;border-radius:50%;z-index:3;pointer-events:none;background:radial-gradient(circle at center,transparent 0 70.3%,rgba(7,8,10,.96) 70.7% 88.8%,#17191d 89.1% 91%,#050607 91.4% 95.4%,#2d3035 95.8% 96.4%,#08090b 97% 100%);box-shadow:inset 0 3px 7px rgba(255,255,255,.28),inset 0 -7px 12px rgba(0,0,0,.8)}
.glass-reflection{position:absolute;z-index:4;pointer-events:none;inset:7%;border-radius:50%;background:linear-gradient(145deg,rgba(255,255,255,.14),transparent 24%,transparent 72%,rgba(255,255,255,.035));mix-blend-mode:screen}
.swipe-hand{position:absolute;z-index:8;left:58%;top:45%;font-size:52px;opacity:0;pointer-events:none;filter:drop-shadow(0 8px 12px rgba(0,0,0,.32));transform:translateX(45px) rotate(-18deg)}
.swipe-hand.show{animation:handSwipe 1.25s ease-in-out 2 .15s}
.swipe-hand.done{display:none}
@keyframes handSwipe{0%{opacity:0;transform:translateX(48px) rotate(-18deg)}15%{opacity:.95}65%{opacity:.95;transform:translateX(-95px) rotate(-18deg)}100%{opacity:0;transform:translateX(-110px) rotate(-18deg)}}
.try-copy{position:absolute;left:50%;bottom:-92px;transform:translateX(-50%);width:max-content;max-width:92vw;text-align:center;display:flex;flex-direction:column;gap:4px}
.try-copy strong{font-size:1rem;color:#f4f5f6}.try-copy span{font-size:.78rem;color:#aeb4ba}.try-copy small{margin-top:5px;font-size:.66rem;letter-spacing:.18em;color:var(--orange-2);font-weight:800}
.interactive-stage .deck-controls{bottom:-2px}.interactive-stage .deck-dots{bottom:-38px}
@media(max-width:900px){.device-demo{width:min(78vw,430px);margin-left:16%}}
@media(max-width:620px){.device-demo{width:min(79vw,340px);margin-left:23%}.swipe-hand{font-size:43px}.try-copy{bottom:-84px}.try-copy span{font-size:.72rem}.interactive-stage{margin-bottom:60px}}
@media(prefers-reduced-motion:reduce){.swipe-hand{display:none}.screen-track{transition:none!important}}


/* =========================================================
   WEB V4 — DEMO REAL DE LA PANTALLA SOBRE FONDO NARANJA
   ========================================================= */
.interactive-stage{
  position:relative;
  min-height:650px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:visible;
  perspective:none;
}
.product-demo{
  position:relative;
  width:min(88vw,610px);
  aspect-ratio:1/1;
  user-select:none;
  -webkit-user-select:none;
  touch-action:pan-y;
  cursor:grab;
  isolation:isolate;
}
.product-demo.dragging{cursor:grabbing}
.product-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  z-index:1;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.28));
}
/* La zona visible coincide con el cristal negro de la imagen base. */
.screen-window{
  position:absolute;
  z-index:3;
  left:25.35%;
  top:24.05%;
  width:49.55%;
  aspect-ratio:1/1;
  border-radius:50%;
  overflow:hidden;
  background:#071d63;
  touch-action:pan-y;
  cursor:grab;
  -webkit-mask-image:-webkit-radial-gradient(white,black);
}
.product-demo.dragging .screen-window{cursor:grabbing}
.screen-track{
  position:absolute;
  inset:0;
  height:100%;
  display:flex;
  will-change:transform;
  transform:translate3d(-100%,0,0);
}
.screen-panel{
  position:relative;
  flex:0 0 100%;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:50%;
}
.screen-panel img{
  position:absolute;
  width:141.5%;
  height:141.5%;
  max-width:none;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  object-fit:contain;
  pointer-events:none;
  user-select:none;
}
.swipe-arrow{
  position:absolute;
  z-index:5;
  top:45%;
  transform:translateY(-50%);
  color:rgba(255,255,255,.93);
  font:300 clamp(52px,7vw,76px)/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  text-shadow:0 6px 18px rgba(0,0,0,.20);
  pointer-events:none;
  animation:arrowPulse 2.2s ease-in-out infinite;
}
.swipe-arrow-left{left:8.5%}
.swipe-arrow-right{right:8.5%}
@keyframes arrowPulse{
  0%,100%{opacity:.48;transform:translateY(-50%) scale(.94)}
  50%{opacity:1;transform:translateY(-50%) scale(1.05)}
}
.swipe-hand{
  position:absolute;
  z-index:8;
  width:37%;
  height:auto;
  right:7.5%;
  bottom:-1%;
  opacity:0;
  pointer-events:none;
  transform-origin:68% 85%;
  transform:translate3d(52px,30px,0) rotate(-17deg) scale(.96);
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.26));
}
.swipe-hand.guide{
  animation:realHandSwipe 1.55s cubic-bezier(.2,.72,.2,1) forwards;
}
@keyframes realHandSwipe{
  0%{opacity:0;transform:translate3d(54px,30px,0) rotate(-17deg) scale(.96)}
  12%{opacity:1}
  27%{opacity:1;transform:translate3d(24px,18px,0) rotate(-17deg) scale(.96)}
  73%{opacity:1;transform:translate3d(-102px,18px,0) rotate(-17deg) scale(.96)}
  100%{opacity:0;transform:translate3d(-126px,22px,0) rotate(-17deg) scale(.96)}
}
.touch-ripple{
  position:absolute;
  z-index:7;
  width:66px;
  aspect-ratio:1;
  border-radius:50%;
  left:63%;
  top:44%;
  opacity:0;
  pointer-events:none;
  border:2px solid rgba(255,255,255,.88);
  box-shadow:0 0 0 10px rgba(255,255,255,.13),0 0 30px rgba(255,255,255,.25);
}
.touch-ripple.guide{animation:rippleMove 1.35s ease-out forwards}
@keyframes rippleMove{
  0%{opacity:0;transform:translate(45px,0) scale(.3)}
  18%{opacity:.95;transform:translate(25px,0) scale(1)}
  72%{opacity:.45;transform:translate(-95px,0) scale(1.28)}
  100%{opacity:0;transform:translate(-118px,0) scale(1.5)}
}
.swipe-message{
  margin-top:-15px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  transition:opacity .4s ease,transform .4s ease;
}
.swipe-message strong{
  font-size:clamp(1rem,2vw,1.22rem);
  color:#f6f7f8;
}
.swipe-message span{
  color:#adb3b9;
  font-size:.84rem;
}
.swipe-message.used{
  opacity:.35;
  transform:translateY(3px);
}
@media(max-width:900px){
  .interactive-stage{min-height:590px}
  .product-demo{width:min(92vw,540px)}
}
@media(max-width:620px){
  .interactive-stage{
    min-height:500px;
    margin-top:12px;
    margin-bottom:10px;
    overflow:visible;
  }
  .product-demo{width:min(96vw,460px)}
  .screen-window{
    left:25.35%;
    top:24.05%;
    width:49.55%;
  }
  .swipe-hand{
    width:39%;
    right:5%;
    bottom:-1%;
  }
  .swipe-arrow{font-size:54px}
  .swipe-arrow-left{left:7%}
  .swipe-arrow-right{right:7%}
  .swipe-message{
    margin-top:-24px;
    padding:0 18px;
  }
  .swipe-message span{font-size:.76rem}
}
@media(prefers-reduced-motion:reduce){
  .swipe-hand,.touch-ripple{display:none}
  .swipe-arrow{animation:none}
}


/* ===== V5 DEMO TÁCTIL ===== */
.interactive-stage{
  position:relative;
  min-height:620px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  padding:0;
}
.product-demo{
  position:relative;
  width:min(100%, 690px);
  aspect-ratio:1/1;
  margin:0 auto;
  user-select:none;
  -webkit-user-select:none;
  touch-action:pan-y;
  cursor:grab;
  isolation:isolate;
}
.product-demo.dragging{cursor:grabbing}

.product-frame{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 28px 48px rgba(0,0,0,.24));
}

/* Cristal del reloj dentro del PNG naranja. */
.screen-window{
  position:absolute;
  z-index:3;
  left:25.25%;
  top:24.15%;
  width:49.65%;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:50%;
  background:#061b67;
  touch-action:pan-y;
  cursor:grab;
  -webkit-mask-image:-webkit-radial-gradient(white,black);
  mask-image:radial-gradient(circle,#000 99%,transparent 100%);
}
.product-demo.dragging .screen-window{cursor:grabbing}

/* IMPORTANTE: el track mide el ancho total de las 10 pantallas.
   Así la traslación funciona de verdad en Safari/iPhone. */
.screen-track{
  position:absolute;
  inset:0 auto 0 0;
  display:flex;
  height:100%;
  width:1000%;
  transform:translate3d(-10%,0,0);
  will-change:transform;
}
.screen-panel{
  position:relative;
  flex:0 0 10%;
  width:10%;
  height:100%;
  overflow:hidden;
  border-radius:50%;
}
.screen-panel img{
  position:absolute;
  left:50%;
  top:50%;
  width:141.6%;
  height:141.6%;
  max-width:none;
  transform:translate(-50%,-50%);
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}

/* Mano real aportada por el usuario. */
.swipe-hand{
  position:absolute;
  z-index:8;
  width:42%;
  height:auto;
  right:1%;
  bottom:-9%;
  opacity:0;
  pointer-events:none;
  transform-origin:67% 82%;
  transform:translate3d(60px,30px,0) rotate(-13deg);
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.22));
}
.swipe-hand.guide{
  animation:v5HandSwipe 1.7s cubic-bezier(.2,.72,.2,1) forwards;
}
@keyframes v5HandSwipe{
  0%   {opacity:0; transform:translate3d(85px,34px,0) rotate(-13deg)}
  13%  {opacity:1; transform:translate3d(70px,24px,0) rotate(-13deg)}
  26%  {opacity:1; transform:translate3d(45px,15px,0) rotate(-13deg)}
  72%  {opacity:1; transform:translate3d(-120px,15px,0) rotate(-13deg)}
  88%  {opacity:.85;transform:translate3d(-145px,18px,0) rotate(-13deg)}
  100% {opacity:0; transform:translate3d(-165px,22px,0) rotate(-13deg)}
}

.touch-ripple{
  position:absolute;
  z-index:7;
  width:62px;
  aspect-ratio:1;
  border-radius:50%;
  left:64%;
  top:43%;
  opacity:0;
  pointer-events:none;
  border:2px solid rgba(255,255,255,.92);
  box-shadow:
    0 0 0 11px rgba(255,255,255,.12),
    0 0 28px rgba(255,255,255,.28);
}
.touch-ripple.guide{animation:v5Ripple 1.45s ease-out forwards}
@keyframes v5Ripple{
  0%   {opacity:0; transform:translateX(50px) scale(.3)}
  18%  {opacity:.95; transform:translateX(35px) scale(1)}
  70%  {opacity:.48; transform:translateX(-110px) scale(1.22)}
  100% {opacity:0; transform:translateX(-135px) scale(1.45)}
}

/* Sin textos, sin selector, sin flechas externas. */
.swipe-message,
.swipe-arrow,
.deck-controls,
.deck-dots{display:none !important;}

@media(max-width:900px){
  .interactive-stage{min-height:560px}
  .product-demo{width:min(96vw,620px)}
}
@media(max-width:620px){
  .hero{
    grid-template-columns:1fr;
  }
  .interactive-stage{
    min-height:auto;
    width:100vw;
    margin-left:calc(50% - 50vw);
    padding:18px 4px 30px;
    overflow:hidden;
  }
  .product-demo{
    width:98vw;
    max-width:none;
  }
  .swipe-hand{
    width:45%;
    right:-1%;
    bottom:-8%;
  }
}
@media(prefers-reduced-motion:reduce){
  .swipe-hand,.touch-ripple{display:none}
}


/* =========================================================
   V1.HTML / V6 - DEMO SIMPLE POR CAPAS
   Marco transparente delante. Pantallas apiladas detrás.
   No carrusel, no track, no botones, no texto lateral.
   ========================================================= */
.interactive-stage{
  position:relative !important;
  min-height:auto !important;
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:20px 0 42px !important;
  overflow:visible !important;
}

.simple-demo{
  position:relative;
  width:min(100%, 720px);
  aspect-ratio:1/1;
  margin:0 auto;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
  cursor:grab;
}
.simple-demo.dragging{cursor:grabbing}

/* The uploaded PNG's transparent central hole is roughly:
   x 23.8%..75.5%, y 23.2%..74.5%.
   The display is positioned underneath that hole. */
.screen-stack{
  position:absolute;
  z-index:1;
  left:23.8%;
  top:23.2%;
  width:51.7%;
  height:51.3%;
  border-radius:50%;
  overflow:hidden;
  background:#000;
  pointer-events:none;
}

.screen-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  opacity:0;
  transform:scale(1.002);
  transition:opacity .16s ease;
  pointer-events:none;
}
.screen-layer.active{opacity:1}

/* New transparent frame sits ABOVE the screens */
.demo-frame{
  position:absolute;
  z-index:3;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}

/* Real hand supplied by user, same role as old emoji guide */
.demo-hand{
  position:absolute;
  z-index:7;
  width:38%;
  height:auto;
  right:5%;
  bottom:-5%;
  opacity:0;
  pointer-events:none;
  transform:translate3d(70px,20px,0) rotate(0deg);
  transform-origin:65% 80%;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.18));
}
.demo-hand.guide-left{
  animation:handGuideLeft 1.55s cubic-bezier(.18,.75,.2,1) forwards;
}
.demo-hand.guide-right{
  animation:handGuideRight 1.55s cubic-bezier(.18,.75,.2,1) forwards;
}
@keyframes handGuideLeft{
  0%   {opacity:0; transform:translate3d(82px,20px,0) rotate(0deg)}
  14%  {opacity:1; transform:translate3d(64px,16px,0) rotate(0deg)}
  28%  {opacity:1; transform:translate3d(40px,12px,0) rotate(0deg)}
  76%  {opacity:1; transform:translate3d(-128px,12px,0) rotate(0deg)}
  100% {opacity:0; transform:translate3d(-158px,15px,0) rotate(0deg)}
}
@keyframes handGuideRight{
  0%   {opacity:0; transform:translate3d(-145px,15px,0) rotate(0deg)}
  14%  {opacity:1; transform:translate3d(-125px,12px,0) rotate(0deg)}
  28%  {opacity:1; transform:translate3d(-100px,12px,0) rotate(0deg)}
  76%  {opacity:1; transform:translate3d(62px,14px,0) rotate(0deg)}
  100% {opacity:0; transform:translate3d(85px,18px,0) rotate(0deg)}
}

.demo-touch{
  position:absolute;
  z-index:6;
  width:56px;
  height:56px;
  border-radius:50%;
  left:64%;
  top:45%;
  opacity:0;
  pointer-events:none;
  border:2px solid rgba(255,255,255,.88);
  box-shadow:0 0 0 10px rgba(255,255,255,.11);
}
.demo-touch.guide-left{animation:touchLeft 1.35s ease-out forwards}
@keyframes touchLeft{
  0%{opacity:0;transform:translateX(35px) scale(.5)}
  18%{opacity:.9;transform:translateX(20px) scale(1)}
  72%{opacity:.45;transform:translateX(-125px) scale(1.15)}
  100%{opacity:0;transform:translateX(-145px) scale(1.3)}
}

/* Kill every old carousel/control element */
.stage-code,
.device-deck,
.deck-controls,
.deck-dots,
.deck-btn,
.swipe-message,
.swipe-arrow,
.product-demo,
.product-frame,
.screen-window,
.screen-track,
.touch-ripple,
.swipe-hand{display:none !important;}

@media(max-width:900px){
  .simple-demo{width:min(96vw,680px)}
}
@media(max-width:620px){
  .interactive-stage{
    width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    padding:8px 2px 30px !important;
    overflow:hidden !important;
  }
  .simple-demo{
    width:99vw;
    max-width:none;
  }
  .demo-hand{
    width:42%;
    right:1%;
    bottom:-4%;
  }
}
@media(prefers-reduced-motion:reduce){
  .demo-hand,.demo-touch{display:none}
}


/* =========================================================
   V2 - GUÍA QUE NO CAMBIA PÁGINA
   La interacción real se limita al círculo de la pantalla.
   ========================================================= */

.screen-stack{
  pointer-events:auto !important;
  cursor:grab;
  touch-action:pan-y;
}
.screen-stack.dragging{cursor:grabbing}

/* La mano de demostración solo enseña el gesto.
   Nunca cambia la pantalla por sí sola. */
.demo-hand.guide-right{
  animation:handGuideRight 1.55s cubic-bezier(.18,.75,.2,1) forwards !important;
}

.demo-touch.guide-right{
  animation:touchRight 1.35s ease-out forwards;
}

@keyframes touchRight{
  0%   {opacity:0; transform:translateX(-125px) scale(.5)}
  18%  {opacity:.9; transform:translateX(-110px) scale(1)}
  72%  {opacity:.45; transform:translateX(35px) scale(1.15)}
  100% {opacity:0; transform:translateX(55px) scale(1.3)}
}


/* =========================================================
   V3 - CABECERA CENTRADA + MARENGO NEXTION
   8585 (RGB565) ~= #21314A
   ========================================================= */

:root{
  --bg:#21314A !important;
  --bg-2:#21314A !important;
  --panel:#263A54 !important;
  --panel-2:#2B405C !important;
  --line:#3D506A !important;
}

/* Fondo limpio: sin matices marrones ni verdes */
html,
body{
  background:#21314A !important;
  background-image:none !important;
}

body::before,
body::after{
  display:none !important;
}

/* Cabecera completamente centrada */
.hero{
  text-align:center !important;
}

.hero-copy{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  width:100% !important;
}

.hero-copy .brand,
.hero-copy .eyebrow,
.hero-copy h1,
.hero-copy .lead{
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}

.hero-copy h1{
  max-width:900px !important;
}

.hero-copy .lead{
  max-width:780px !important;
}

.chips{
  justify-content:center !important;
  width:100% !important;
}

/* Mantener todos los bloques en la misma familia marengo */
.card,
.flow-item,
.benefit-list div,
.use-card{
  background:rgba(255,255,255,.035) !important;
  border-color:#3D506A !important;
}

.cta-box{
  background:linear-gradient(135deg,rgba(255,159,26,.10),rgba(30,136,255,.07)),#263A54 !important;
  border-color:#445A77 !important;
}

.section,
footer{
  border-color:#3D506A !important;
}

/* El área naranja de la demo mantiene su color propio.
   Todo lo que la rodea continúa en marengo. */
.interactive-stage{
  background:transparent !important;
}

@media(max-width:900px){
  .hero{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
  }
}

@media(max-width:620px){
  .hero-copy{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .hero-copy h1{
    max-width:100% !important;
    font-size:clamp(42px,12vw,64px) !important;
    line-height:1.04 !important;
  }

  .hero-copy .lead{
    max-width:100% !important;
  }

  .chips{
    justify-content:center !important;
  }
}


/* V4 — GRIS MARENGO NEUTRO REAL
   Sin dominante azul, verde, roja ni marrón. */
:root {
  --bg: #292929 !important;
  --bg-2: #292929 !important;
  --panel: #303030 !important;
  --panel-2: #343434 !important;
  --line: #4A4A4A !important;
}

html, body {
  background: #292929 !important;
  background-color: #292929 !important;
  background-image: none !important;
}

main, header, footer, section, .section, .hero {
  background-color: transparent !important;
}

body::before, body::after {
  content: none !important;
  display: none !important;
}

.card, .flow-item, .benefit-list div, .use-card {
  background: rgba(255,255,255,.035) !important;
  border-color: #4A4A4A !important;
}

.cta-box {
  background: #303030 !important;
  border-color: #4A4A4A !important;
}

/* La demo naranja se conserva tal cual. */

/* v9.1 — marca comercial simplificada */
.hero-copy .brand{margin-bottom:14px !important;}
.hero-copy .version-mark{
  margin-top:0 !important;
  margin-bottom:24px !important;
  font-size:clamp(.82rem,1.4vw,1rem) !important;
  letter-spacing:.16em !important;
  line-height:1 !important;
  text-transform:none !important;
  color:var(--orange-2) !important;
}


/* ===== V10 additions ===== */
.lineup-section{
  padding-top:30px !important;
  padding-bottom:58px !important;
}
.lineup-card{
  max-width:1180px;
  margin:0 auto;
  border-radius:28px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 24px 60px rgba(0,0,0,.26);
}
.lineup-card img{
  width:100%;
  height:auto;
  display:block;
}

.coming-soon{
  padding-top:18px !important;
  padding-bottom:90px !important;
}
.coming-card{
  max-width:1080px;
  margin:0 auto;
  text-align:center;
  padding:54px 34px;
  border:1px solid rgba(255,159,26,.38);
  border-radius:30px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,159,26,.14), transparent 45%),
    #303030;
  box-shadow:0 22px 50px rgba(0,0,0,.22);
}
.coming-kicker{
  display:inline-block;
  color:#ff9f1a;
  font-size:clamp(18px,2.4vw,28px);
  line-height:1;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:18px;
}
.coming-card h2{
  max-width:820px;
  margin:0 auto 14px !important;
  text-align:center !important;
}
.coming-card p{
  max-width:760px;
  margin:0 auto;
  color:#c9c9c9;
  font-size:1.08rem;
}

@media(max-width:620px){
  .lineup-section{
    width:100vw;
    margin-left:calc(50% - 50vw);
    padding-left:12px !important;
    padding-right:12px !important;
  }
  .lineup-card{
    border-radius:20px;
  }
  .coming-card{
    padding:38px 22px;
    border-radius:24px;
  }
}


/* ===== V11: lineup transparente + redes sociales ===== */
.lineup-card{
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  overflow:visible !important;
}
.lineup-card img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  background:transparent !important;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.28));
}

.social-bar{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  padding:16px 20px;
  position:relative;
  z-index:20;
}
.social-top{
  padding-top:18px;
  padding-bottom:8px;
}
.social-bottom{
  padding-top:30px;
  padding-bottom:18px;
  margin-top:20px;
  border-top:1px solid #4a4a4a;
}
.social-icon{
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid #555;
  background:#202020;
  display:grid;
  place-items:center;
  padding:0;
  color:#fff;
  cursor:default;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.social-icon svg{
  width:23px;
  height:23px;
  fill:currentColor;
}
.social-icon:hover{
  transform:translateY(-2px);
  border-color:#ff9f1a;
  background:#272727;
}
@media(max-width:620px){
  .social-bar{gap:12px}
  .social-icon{width:43px;height:43px}
  .lineup-section{
    padding-left:0 !important;
    padding-right:0 !important;
  }
  .lineup-card{
    width:100%;
  }
}


/* =========================================================
   V13 — CAMPERDISPLAY
   ========================================================= */

.product-lockup{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  margin:-2px 0 24px;
}
.product-name{
  color:#fff;
  font-size:clamp(28px,4vw,48px);
  font-weight:850;
  letter-spacing:-.035em;
  line-height:1;
}
.product-version{
  color:var(--orange-2);
  font-size:clamp(13px,1.3vw,17px);
  font-weight:750;
  letter-spacing:.16em;
}

/* Contraste reforzado para los 3 bloques fotográficos */
@media(max-width:900px){
  .use-card,
  .use-card:nth-child(even){
    position:relative;
    display:block !important;
    min-height:650px;
    overflow:hidden;
    background:#111 !important;
  }
  .use-card img,
  .use-card:nth-child(even) img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    min-height:0;
    object-fit:cover;
    order:0;
  }
  .use-card::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:
      linear-gradient(180deg,
        rgba(0,0,0,.03) 0%,
        rgba(0,0,0,.10) 38%,
        rgba(0,0,0,.62) 68%,
        rgba(0,0,0,.88) 100%);
    pointer-events:none;
  }
  .use-copy{
    position:absolute;
    z-index:2;
    left:0;
    right:0;
    bottom:0;
    padding:40px 34px 42px;
    background:linear-gradient(180deg,transparent,rgba(0,0,0,.20));
  }
  .use-copy span{
    color:#ffbd61 !important;
    text-shadow:0 2px 10px rgba(0,0,0,.85);
  }
  .use-copy h3{
    color:#fff !important;
    text-shadow:0 2px 14px rgba(0,0,0,.95);
  }
  .use-copy p{
    color:#f3f3f3 !important;
    font-weight:560;
    line-height:1.65;
    text-shadow:0 2px 10px rgba(0,0,0,1);
  }
}

@media(max-width:620px){
  .use-card,
  .use-card:nth-child(even){
    min-height:760px;
  }
  .use-copy{
    padding:34px 26px 38px;
  }
  .use-copy p{
    font-size:1.06rem !important;
  }
}

/* Bloque de actualización futura */
.future-ready{
  padding-top:80px !important;
  padding-bottom:90px !important;
}
.future-grid{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:48px;
  align-items:center;
}
.future-media img{
  width:100%;
  display:block;
  border-radius:30px;
  border:1px solid #4a4a4a;
  box-shadow:0 26px 60px rgba(0,0,0,.32);
}
.future-copy h2{
  margin-bottom:20px;
}
.future-copy p{
  color:#d8d8d8;
  font-size:1.05rem;
}
.future-lead{
  color:#fff !important;
  font-size:1.15rem !important;
  font-weight:650;
}
.future-points{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}
.future-points span{
  border:1px solid rgba(255,159,26,.42);
  background:rgba(255,159,26,.08);
  color:#ffd18a;
  padding:9px 13px;
  border-radius:999px;
  font-size:.88rem;
  font-weight:700;
}
.update-flow{
  border-color:rgba(255,159,26,.36) !important;
  background:rgba(255,159,26,.055) !important;
}
.update-flow strong{
  box-shadow:0 0 0 8px rgba(255,159,26,.08);
}

@media(max-width:900px){
  .future-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   V14 — CABECERA PC + IMÁGENES CORREGIDAS
   ========================================================= */

/* Cabecera: marca centrada arriba, contenido debajo en dos columnas */
.hero{
  display:block !important;
  min-height:auto !important;
  max-width:1320px !important;
  margin:0 auto !important;
  padding:42px 34px 56px !important;
}

.hero-brand{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  margin:8px auto 34px;
}

.hero-brand .brand{
  margin:0 !important;
  text-align:center !important;
}

.hero-brand .product-lockup{
  margin:10px 0 0 !important;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

.hero-brand .product-name{
  font-size:clamp(27px,3.1vw,44px) !important;
  font-weight:850 !important;
  color:#fff !important;
  letter-spacing:-.035em;
  line-height:1;
}

.hero-brand .product-version{
  color:var(--orange-2) !important;
  font-size:clamp(13px,1.2vw,17px) !important;
  font-weight:800;
  letter-spacing:.14em;
}

.hero-content{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr);
  align-items:center;
  gap:clamp(34px,6vw,88px);
  width:100%;
}

.hero-content .hero-copy{
  display:block !important;
  width:100% !important;
  text-align:left !important;
  align-items:initial !important;
}

.hero-content .hero-copy h1,
.hero-content .hero-copy .lead{
  text-align:left !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

.hero-content .chips{
  justify-content:flex-start !important;
}

.hero-content .device-stage{
  width:100%;
  min-height:530px;
}

/* Lineup sin borde/blanco visual */
.lineup-card{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  overflow:visible !important;
  padding:0 !important;
}
.lineup-card img{
  display:block;
  width:100%;
  height:auto;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.24));
}

/* La foto de actualización siempre debe verse completa */
.future-media img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  background:#1f2022;
}

/* Móvil: marca arriba y luego texto + dispositivo */
@media(max-width:900px){
  .hero{
    padding:30px 20px 38px !important;
  }
  .hero-brand{
    margin-bottom:24px;
  }
  .hero-content{
    grid-template-columns:1fr;
    gap:10px;
  }
  .hero-content .hero-copy,
  .hero-content .hero-copy h1,
  .hero-content .hero-copy .lead{
    text-align:center !important;
  }
  .hero-content .chips{
    justify-content:center !important;
  }
  .hero-content .device-stage{
    min-height:auto;
  }
}

@media(max-width:620px){
  .hero-brand .brand{
    font-size:82px !important;
  }
  .hero-brand .product-name{
    font-size:30px !important;
  }
}


/* =========================================================
   V15 — MANO CORREGIDA + NUEVA COMPOSICIÓN DE ESFERAS
   ========================================================= */

.demo-hand{
  object-fit:contain !important;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.22));
  image-rendering:auto;
}

/* Oculta cualquier pequeño fringe inferior y deja la muñeca visualmente recta */
.simple-demo{
  overflow:visible !important;
}
.demo-hand{
  clip-path:inset(0 0 0 0 round 0);
}

/* Nueva imagen de esferas */
.lineup-card img{
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  background:transparent !important;
}


/* V16 — mano nueva con muñeca recta */
.demo-hand{
  transform-origin:50% 100% !important;
  rotate:-4deg;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.22));
}

/* V17 — mano original del usuario, sin giro ni deformación */
.demo-hand{
  rotate:0deg !important;
  transform-origin:50% 100% !important;
  object-fit:contain !important;
}


/* =========================================================
   V18 — PRIMERAS UNIDADES + CONTACTO
   ========================================================= */

.launch-section{
  padding-top:90px !important;
  padding-bottom:90px !important;
}

.launch-card{
  border:1px solid #474747;
  border-radius:34px;
  background:linear-gradient(180deg,#303030 0%,#252525 100%);
  padding:clamp(28px,4.5vw,58px);
  box-shadow:0 30px 70px rgba(0,0,0,.24);
}

.launch-badge{
  display:inline-flex;
  align-items:center;
  padding:9px 14px;
  margin-bottom:28px;
  border-radius:999px;
  border:1px solid rgba(255,159,26,.56);
  background:rgba(255,159,26,.10);
  color:#ffc15e;
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.09em;
}

.launch-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);
  gap:clamp(36px,5vw,70px);
  align-items:start;
}

.launch-copy h2{
  margin:.28em 0 .7em;
}

.launch-copy p{
  color:#d7d7d7;
  line-height:1.7;
}

.launch-lead{
  color:#fff !important;
  font-size:1.12rem;
  font-weight:620;
}

.compatibility-note{
  margin-top:30px;
  padding:24px;
  border-radius:22px;
  background:#1f1f1f;
  border:1px solid #454545;
}

.compatibility-note h3{
  margin:0 0 12px;
  color:#fff;
  font-size:1.15rem;
}

.compatibility-note p:last-child{
  margin-bottom:0;
}

.purchase-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}

.shop-button{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:12px 18px;
  border-radius:14px;
  border:1px solid #565656;
  background:#343434;
  color:#fff;
  font:inherit;
  font-weight:800;
  text-decoration:none;
}

.shop-button svg{
  width:20px;
  height:20px;
  fill:currentColor;
}

.shop-button[disabled]{
  opacity:.58;
  cursor:not-allowed;
}

.shop-button-primary{
  border-color:rgba(255,159,26,.48);
  background:rgba(255,159,26,.10);
  color:#ffc260;
}

.contact-action{
  background:var(--orange);
  border-color:var(--orange);
  color:#141414;
  cursor:pointer;
}

.contact-action:hover{
  filter:brightness(1.06);
}

.purchase-status{
  margin-top:12px !important;
  font-size:.9rem;
  color:#a9a9a9 !important;
}

.contact-panel{
  background:#1b1b1b;
  border:1px solid #484848;
  border-radius:26px;
  padding:clamp(24px,3vw,34px);
  scroll-margin-top:24px;
}

.contact-panel h3{
  margin:.3em 0 .45em;
  font-size:clamp(1.65rem,2.4vw,2.2rem);
}

.contact-panel > p{
  color:#cfcfcf;
  line-height:1.55;
}

.contact-form{
  display:grid;
  gap:15px;
  margin-top:24px;
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.contact-form label{
  display:grid;
  gap:7px;
  color:#ededed;
  font-size:.9rem;
  font-weight:700;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid #505050;
  border-radius:12px;
  background:#292929;
  color:#fff;
  padding:13px 14px;
  font:inherit;
  outline:none;
}

.contact-form input:focus,
.contact-form textarea:focus{
  border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(255,159,26,.12);
}

.contact-form textarea{
  resize:vertical;
  min-height:132px;
}

.check-line{
  display:flex !important;
  grid-template-columns:none !important;
  align-items:flex-start;
  gap:10px !important;
  font-weight:500 !important;
  line-height:1.4;
}

.check-line input{
  width:18px !important;
  height:18px;
  flex:0 0 auto;
  margin-top:2px;
  padding:0;
  accent-color:#ff9f1a;
}

.privacy-line{
  color:#c8c8c8 !important;
  font-size:.82rem !important;
}

.submit-contact{
  min-height:52px;
  border:0;
  border-radius:14px;
  background:var(--orange);
  color:#151515;
  font:inherit;
  font-weight:900;
  cursor:pointer;
  padding:13px 18px;
}

.submit-contact:hover{
  filter:brightness(1.06);
}

.form-note{
  text-align:center;
  color:#989898 !important;
  font-size:.82rem;
  margin:0 !important;
}

.website-trap{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.contact-result{
  max-width:780px;
  margin:80px auto;
  padding:34px;
  border-radius:28px;
  border:1px solid #484848;
  background:#292929;
  text-align:center;
}

.contact-result h1{
  margin-bottom:14px;
}

.contact-result p{
  color:#d0d0d0;
  line-height:1.6;
}

.contact-result a{
  display:inline-flex;
  margin-top:18px;
  padding:12px 18px;
  border-radius:12px;
  text-decoration:none;
  background:var(--orange);
  color:#151515;
  font-weight:850;
}

@media(max-width:900px){
  .launch-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:620px){
  .launch-section{
    padding-top:55px !important;
    padding-bottom:55px !important;
  }
  .launch-card{
    border-radius:26px;
    padding:24px 20px;
  }
  .form-row{
    grid-template-columns:1fr;
  }
  .purchase-actions{
    display:grid;
  }
  .shop-button{
    width:100%;
  }
}