/* V9: carrusel horizontal de pantallas, video, redes y puntitos de navegación.
   Va aparte para no pisar base/landing/polish de la V8. */

/* ---------- Carrusel de pantallas (todas las medidas) ---------- */
.carousel{position:relative}
.carousel .product-stories{display:flex;grid-template-columns:none;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:6px 2px 26px;margin:0;cursor:grab;outline-offset:6px}
.carousel .product-stories::-webkit-scrollbar{display:none}
.carousel .product-stories.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.carousel .product-stories.dragging img{pointer-events:none}
.carousel .product-story{flex:0 0 clamp(270px,27vw,370px);max-width:none;scroll-snap-align:center}
.carousel .product-story img{-webkit-user-drag:none;user-select:none}

.car-arrow{position:absolute;top:calc(50% - 38px);z-index:3;width:48px;height:48px;border-radius:50%;border:1px solid #d7b9ef33;background:#15111bd9;color:var(--text);font-size:26px;line-height:1;display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:opacity .2s ease,transform .2s cubic-bezier(.2,0,0,1),background .2s ease}
.car-arrow.prev{left:-20px}.car-arrow.next{right:-20px}
.car-arrow:hover{background:#2a1f38}.car-arrow:active{transform:scale(.94)}
.car-arrow[disabled]{opacity:0;pointer-events:none}

.car-dots,.page-dots{display:flex;justify-content:center;align-items:center;gap:4px}
.car-dots[hidden]{display:none}
.car-dots button,.page-dots button{width:26px;height:26px;padding:0;border:0;background:none;display:grid;place-items:center;cursor:pointer}
.car-dots button:before,.page-dots button:before{content:"";width:7px;height:7px;border-radius:99px;background:#ffffff38;transition:width .32s cubic-bezier(.2,0,0,1),background .32s ease}
.car-dots button.on:before,.page-dots button.on:before{width:22px;background:var(--purple)}

/* ---------- Video de presentación ---------- */
.promo{max-width:1600px;margin:auto;padding:30px max(8vw,24px) 100px}
.promo-head{margin-bottom:34px}
.promo-head h2{font-size:clamp(34px,4vw,60px);line-height:1.02;letter-spacing:-.03em;margin:14px 0 0}
.promo-head h2 em{font-style:normal;color:var(--purple)}
.promo-frame{position:relative;aspect-ratio:16/9;max-width:1120px;margin:auto;border-radius:24px;overflow:hidden;border:1px solid #d7b9ef2d;background:#111014;box-shadow:0 24px 70px #0008}
.promo-frame iframe,.promo-play,.promo-play img{position:absolute;inset:0;width:100%;height:100%;border:0}
.promo-play{padding:0;background:none;cursor:pointer}
.promo-play img{object-fit:cover;transition:transform .6s cubic-bezier(.2,0,0,1),filter .3s ease;filter:brightness(.78)}
.promo-play:hover img{transform:scale(1.025);filter:brightness(.9)}
.promo-btn{position:absolute;left:50%;top:50%;translate:-50% -50%;width:86px;height:86px;border-radius:50%;display:grid;place-items:center;padding-left:6px;font-size:30px;color:#120b1a;background:linear-gradient(135deg,var(--purple-hot),var(--purple));box-shadow:0 12px 40px #b991ee66;transition:transform .25s cubic-bezier(.2,0,0,1)}
.promo-play:hover .promo-btn{transform:scale(1.07)}.promo-play:active .promo-btn{transform:scale(.95)}

/* ---------- Redes en el pie ---------- */
.social-links{display:flex;gap:10px;align-items:center}
.social-links a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:99px;border:1px solid #ceb0ec24;color:var(--muted);text-decoration:none;font-weight:600;transition:color .2s ease,border-color .2s ease,background .2s ease}
.social-links a:hover{color:var(--text);border-color:#ceb0ec66;background:#b991ee14}
.social-links svg{width:19px;height:19px;flex:none}

/* ---------- Puntitos de secciones: solo celular ---------- */
.page-dots{display:none}

@media(max-width:720px){
  html{scroll-snap-type:y proximity;scroll-padding-top:70px}
  main>section{scroll-snap-align:start}
  .carousel .product-stories{gap:14px;margin:0 -24px;padding:4px 24px 18px;scroll-padding-inline:24px}
  .carousel .product-story{flex-basis:82%;max-width:330px}
  .car-arrow{display:none}
  .promo{padding:20px 24px 65px}.promo-head{margin-bottom:22px}
  .promo-frame{border-radius:18px}.promo-btn{width:66px;height:66px;font-size:23px}
  .social-links{order:2;width:100%}.social-links a{flex:1;justify-content:center}
  .page-dots{display:flex;position:fixed;z-index:40;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));translate:-50% 0;padding:2px 8px;border-radius:99px;background:#120e18cc;border:1px solid #ffffff14;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:opacity .25s ease,translate .25s cubic-bezier(.2,0,0,1)}
  body.locked .page-dots{opacity:0;pointer-events:none;translate:-50% 20px}
  footer{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  /* Respuesta táctil mínima: lo que se toca se hunde apenas. */
  .cta:active,.outline:active,.text-link:active,.social-links a:active,.product-story:active{transform:scale(.975);transition-duration:.08s}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-snap-type:none}
  .carousel .product-stories{scroll-behavior:auto}
  .car-dots button:before,.page-dots button:before,.promo-play img,.promo-btn,.car-arrow{transition:none}
}

/* ---------- Instalar app / Ingresar ---------- */
[data-install][hidden]{display:none!important}
button.login{background:none;border:0;font:inherit;font-size:14px;cursor:pointer}
.install-btn{color:var(--purple-hot)!important;font-weight:600!important}
a.legal-link{text-decoration:none;display:inline-flex;align-items:center}

/* ---------- Paneles: se cierran deslizando hacia abajo (Hammer) ---------- */
.sheet.dragging{transition:none!important}
.sheet .handle,.sheet .sheet-head{touch-action:none}

/* ---------- Hero en PC: el celular va más chico y hacia el centro para no tapar a la DJ del fondo ---------- */
@media(min-width:1051px){
  .hero-product{justify-self:start;max-width:min(200px,12vw);margin-left:-3vw}
  .hero-screen{max-height:430px}
  .hero-product .product-caption span:last-child{display:none} /* con el celular chico las dos leyendas no entran en una línea */
}
@media(min-width:1600px){.hero-product{max-width:208px}.hero-screen{max-height:430px}}