/* hecho por r3k1 */
@property --tono{syntax:'<color>';inherits:true;initial-value:#e5243b}
.escaparate{--tono:#e5243b;position:relative;min-height:100svh;padding:48px 0 0;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;background:#000;transition:--tono 1s}
.escaparate::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(560px circle at var(--mx,70%) var(--my,40%),color-mix(in srgb,var(--tono) 16%,transparent),transparent 60%)}
.halo{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.halo span{position:absolute;width:60vmax;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--tono) 26%,transparent),transparent 62%);transition:background 1.2s;animation:deriva 24s ease-in-out infinite alternate}
.halo span:nth-child(1){right:-20vmax;top:-18vmax}
.halo span:nth-child(2){left:-26vmax;bottom:-34vmax;animation-duration:30s;animation-delay:-8s}
@keyframes deriva{50%{transform:translate(-8vmax,6vmax) scale(1.12)}100%{transform:translate(4vmax,10vmax) scale(.9)}}

.escena{flex:1;display:grid;grid-template-rows:auto 1fr auto;width:100%;max-width:1180px;margin:0 auto;padding:22px 22px 0}
.cab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13px;color:var(--text-2)}
.cab h1{font-size:13px;font-weight:600;color:var(--text);letter-spacing:0}
.cab h1 span{color:var(--red)}
.cuenta{font-variant-numeric:tabular-nums}

.diapos{display:grid;align-items:center;min-height:0}
.diapo{grid-area:1/1;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:40px;padding:10px 0;
  opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s}
.diapo.activa{opacity:1;visibility:visible;transition:opacity .6s}

.info>*{opacity:0;transform:translateY(18px)}
.diapo.activa .info>*{animation:sube .8s cubic-bezier(.2,1.2,.3,1) both;animation-delay:calc(.1s + var(--o,0) * 80ms)}
.info>:nth-child(2){--o:1}.info>:nth-child(3){--o:2}.info>:nth-child(4){--o:3}.info>:nth-child(5){--o:4}.info>:nth-child(6){--o:5}
@keyframes sube{to{opacity:1;transform:none}}
.info .num{font-size:13px;font-weight:600;color:var(--tono)}
.info h2{margin-top:8px;font-size:clamp(40px,6vw,76px);font-weight:750;letter-spacing:-.05em;line-height:.95}
.info .tipo{margin-top:12px;font-size:15px;color:var(--text);font-weight:500}
.info .que{margin-top:14px;max-width:420px;color:var(--text-2);font-size:16px;line-height:1.5}
.info .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.info .chips span{padding:4px 10px;border-radius:980px;border:1px solid color-mix(in srgb,var(--tono) 55%,transparent);font-size:12px;color:var(--text)}
.info .ir{display:flex;align-items:center;gap:18px;margin-top:26px}
.info .btn{background:var(--tono);color:#000;font-weight:600;font-size:15px;padding:11px 22px;box-shadow:0 10px 30px -8px color-mix(in srgb,var(--tono) 70%,transparent)}
.info .btn:hover{box-shadow:0 12px 36px -6px color-mix(in srgb,var(--tono) 85%,transparent)}
.info .btn::after{content:"↗";font-size:15px}
.info .btn[href^="/"]::after{content:"›";font-size:20px;line-height:1}

.aparatos{position:relative;aspect-ratio:16/11;width:100%}
.diapo .aparatos>*{opacity:0}
.diapo.activa .aparatos>*{animation:entra 1s cubic-bezier(.2,1.1,.3,1) both}
.diapo.activa .movil{animation-delay:.18s}
@keyframes entra{from{opacity:0;transform:translateY(40px) scale(.96)}to{opacity:1;transform:none}}
.portatil{position:absolute;left:0;top:4%;width:88%}
.portatil .pantalla{position:relative;aspect-ratio:16/10;border-radius:14px 14px 0 0;background:#0a0a0b;padding:2.2% 2.2% 3%;border:1px solid #2c2c2e;border-bottom:0;box-shadow:0 30px 80px -20px color-mix(in srgb,var(--tono) 35%,transparent)}
.portatil .pantalla::before{content:"";position:absolute;top:1%;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#2c2c2e}
.portatil .base{height:14px;margin:0 -6%;border-radius:0 0 16px 16px;background:linear-gradient(#3a3a40,#1c1c1f);position:relative}
.portatil .base::before{content:"";position:absolute;left:50%;top:0;width:16%;height:5px;margin-left:-8%;border-radius:0 0 8px 8px;background:#141416}
.pantalla .vista,.movil .vista{width:100%;height:100%;overflow:hidden;border-radius:6px;background:#000}
.vista img{width:100%;height:100%;object-fit:cover;object-position:top;animation:acerca 16s ease-in-out infinite alternate}
@keyframes acerca{to{transform:scale(1.07) translateY(-2%)}}
.movil{position:absolute;right:0;bottom:2%;width:25%;aspect-ratio:500/1082;border-radius:22px;padding:5px;background:#0a0a0b;border:1px solid #3a3a40;
  box-shadow:0 30px 60px -10px rgba(0,0,0,.9),0 0 0 1px #000 inset}
.movil .vista{border-radius:17px}
.movil::before{content:"";position:absolute;top:10px;left:50%;width:26%;height:9px;margin-left:-13%;border-radius:9px;background:#000;z-index:1}
@keyframes entra-giro{from{opacity:0;transform:translate(-50%,-40%) rotate(4deg) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) rotate(-4deg)}}
@keyframes gira{to{transform:translate(-50%,-50%) rotate(360deg)}}

.selector{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border-top:1px solid var(--line);margin-top:10px}
.selector button{position:relative;text-align:left;padding:14px 16px 18px;border-left:1px solid var(--line);color:var(--text-2);transition:color .3s}
.selector button:first-child{border-left:0}
.selector button:hover{color:var(--text)}
.selector button[aria-selected="true"]{color:var(--text)}
.selector b{display:block;font-size:15px;font-weight:600;letter-spacing:-.02em}
.selector small{font-size:12px;opacity:.8}
.selector .barra{position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--tono);transform:scaleX(0);transform-origin:0 50%}
.selector [aria-selected="true"] .barra{animation:avanza 8s linear both}
.escaparate.quieto .selector [aria-selected="true"] .barra{animation-play-state:paused}
@keyframes avanza{to{transform:scaleX(1)}}

@media (max-width:820px){
  .escena{padding-top:14px}
  .diapo{grid-template-columns:1fr;gap:4px;align-content:center}
  .aparatos{order:-1;aspect-ratio:16/10.5;max-height:40svh;margin:0 auto}
  .info h2{font-size:clamp(34px,10vw,48px)}
  .info .que{font-size:14px;margin-top:8px}
  .info .tipo{margin-top:6px;font-size:14px}
  .info .chips{margin-top:12px}
  .info .ir{margin-top:16px}
  .selector button{padding:10px 10px 14px}
  .selector b{font-size:13px}
  .selector small{display:none}
}
@media (prefers-reduced-motion:reduce){.halo span,.vista img,.info>*,.aparatos>*{animation:none!important;opacity:1!important;transform:none}}