/* Sliders TV — lienzo fijo 3840x2160 (UHD 16:9) escalado a la pantalla */
:root{
  --orange:#E8651A;
  --orange-bright:#FF7A00;
  --orange-light:#FF9B4F;
  --white:#fff;
  --stripe:80px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#000;cursor:none}
body{font-family:'Poppins',sans-serif;-webkit-font-smoothing:antialiased}
img{display:block}

#stage{
  position:absolute;left:50%;top:50%;
  width:3840px;height:2160px;
  transform:translate(-50%,-50%) scale(var(--s,1));
  overflow:hidden;background:var(--white);
}

/* franja inferior */
.stripe{
  position:absolute;left:0;right:0;bottom:0;height:var(--stripe);z-index:10;
  background:linear-gradient(var(--orange) 0 30px,#F7A26A 30px 38px,var(--orange) 38px);
}

/* carrusel */
.slide{
  position:absolute;left:0;top:0;width:100%;height:calc(100% - var(--stripe));
  display:flex;transform:translateX(100%);background:var(--white);
}
.slide.on,.slide.off{transition:transform 1.1s cubic-bezier(.77,0,.18,1)}
.slide.on{transform:none;z-index:2}
.slide.off{transform:translateX(-100%);z-index:1}

/* columnas */
.col{flex:1 1 0;min-width:0;position:relative;overflow:hidden;display:flex}
.panel{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
.head,.foot{position:relative;z-index:3}
.media{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center}
.product{max-width:118%;max-height:100%;object-fit:contain;transform-origin:50% 100%}
.badge{position:absolute;top:10px;left:70px;width:260px;height:260px;object-fit:contain;z-index:3}

.name-img{max-width:100%;max-height:330px;object-fit:contain;object-position:left top}
.name{font-weight:800;line-height:.95;letter-spacing:-.02em}
.desc,.extra{font-weight:700;text-transform:uppercase;line-height:1.28}
.price{font-weight:800;line-height:1;letter-spacing:-.02em;white-space:nowrap}

/* colores por columna: texto naranja sobre blanco, blanco sobre color */
.col{color:var(--orange)}
.t-a .col:nth-child(even){background:var(--orange);color:var(--white)}
.t-c .col:nth-child(even){background:var(--orange-light);color:var(--white)}

/* Slide 1 — 5 columnas: nombre / símbolo + producto / descripción + precio */
.t-a .panel{padding:110px 80px 70px}
.t-a .head{height:400px}
.t-a .name{font-size:140px}
.t-a .media{margin:0 -80px}
.t-a .foot{height:520px;display:flex;flex-direction:column;justify-content:space-between;padding-top:60px}
.t-a .desc{font-size:46px}
.t-a .price{font-size:150px;align-self:flex-end}

/* Slide 2 — combos: tarjeta naranja + columna blanca */
.t-b{background:var(--orange-bright)}
.t-b .col:nth-child(odd){background:var(--orange-bright);color:var(--white);padding:70px}
.t-b .col:nth-child(odd) .panel{
  border-radius:80px;padding:120px 110px 110px;
  background:linear-gradient(180deg,#FF5A10 0%,#E8450A 55%,#8C1408 100%);
}
.t-b .col:nth-child(even){background:var(--white)}
.t-b .col:nth-child(even) .panel{padding:190px 180px 180px}
.t-b .head{text-align:right}
.t-b .name{font-size:170px;text-transform:uppercase}
.t-b .name-img{margin-left:auto;object-position:right top}
.t-b .media{padding:40px 0}
.t-b .foot{display:flex;justify-content:space-between;align-items:flex-end;gap:80px}
.t-b .desc{font-size:46px;max-width:58%}
.t-b .price{font-size:220px;margin-left:auto}

/* Slide 3 — 5 columnas: descripción / producto / precio */
.t-c .panel{padding:110px 90px 70px}
.t-c .head{min-height:300px}
.t-c .desc{font-size:52px}
.t-c .media{margin:0 -90px}
.t-c .foot{height:240px;display:flex;align-items:flex-end;justify-content:flex-end}
.t-c .price{font-size:150px}

/* animaciones de entrada (se reinician cada vez que entra el slide) */
.play .product{animation:drop 1.6s both;animation-delay:calc(.6s + var(--i) * .14s)}
.play .badge{animation:pop .7s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(1.5s + var(--i) * .14s)}
.play .head>*,.play .foot>*{animation:rise .8s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(.45s + var(--i) * .1s)}

@keyframes drop{
  0%  {transform:translateY(-1600px);opacity:0;animation-timing-function:cubic-bezier(.55,.06,.68,.19)}
  8%  {opacity:1}
  46% {transform:translateY(0) scale(1.035,.965);animation-timing-function:cubic-bezier(.22,.61,.36,1)}
  64% {transform:translateY(-110px) scale(.99,1.01);animation-timing-function:cubic-bezier(.55,.06,.68,.19)}
  79% {transform:translateY(0) scale(1.015,.985);animation-timing-function:cubic-bezier(.22,.61,.36,1)}
  90% {transform:translateY(-26px) scale(1);animation-timing-function:cubic-bezier(.55,.06,.68,.19)}
  100%{transform:translateY(0) scale(1);opacity:1}
}
@keyframes pop{
  0%  {transform:scale(0) rotate(-30deg);opacity:0}
  100%{transform:scale(1) rotate(0);opacity:1}
}
@keyframes rise{
  0%  {transform:translateY(50px);opacity:0}
  100%{transform:none;opacity:1}
}