:root{--bg:#0A0A0B;--card:rgba(20,20,22,.88);--line:rgba(255,255,255,.08);--amber:#F5A623;--amber2:#FFC85C;--txt:#F4F1EA;--mut:#9A958C;--red:#FF3B3B;--green:#22C55E}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--txt);min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:inherit}
.bg{position:fixed;inset:0;z-index:-1;background:url(/assets/bg-m.webp) center top/cover no-repeat var(--bg)}
@media(min-width:760px){.bg{background-image:url(/assets/bg-d.webp)}}
.wrap{max-width:480px;margin:0 auto;padding-bottom:40px}

/* Cabecera */
.hero{position:relative;height:min(66vh,600px);overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover;object-position:50% 10%;display:block;
  -webkit-mask-image:radial-gradient(ellipse 62% 75% at 50% 50%,#000 58%,transparent 100%),linear-gradient(#000 55%,transparent 97%);
  -webkit-mask-composite:source-in;mask-image:radial-gradient(ellipse 62% 75% at 50% 50%,#000 58%,transparent 100%),linear-gradient(#000 55%,transparent 97%);mask-composite:intersect}
.id{position:relative;z-index:2;margin-top:-120px;padding:0 22px;text-align:center}
.id h1{font-family:Sora,sans-serif;font-weight:800;font-size:44px;letter-spacing:.06em;line-height:1;background:linear-gradient(100deg,#fff 0%,#FFE2A6 30%,#fff 42%,#fffbe8 50%,var(--amber2) 58%,#fff 72%,#FFE2A6 100%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s ease-in-out 1.2s infinite}
.tag{margin-top:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.tag:not(:empty)::before{content:"◆ "}
.id p{margin-top:10px;color:#CFCAC0;font-size:15px;line-height:1.5}
.chips{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.chip{font-size:12px;padding:6px 10px;border:1px solid var(--line);border-radius:99px;background:rgba(0,0,0,.4);color:var(--mut)}

section{padding:0 16px;margin-top:28px}
.h{display:flex;justify-content:space-between;align-items:baseline;margin:0 4px 12px}
.h h2{font-family:Sora,sans-serif;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);font-weight:700}
.h a{font-size:13px;color:var(--amber);text-decoration:none}

/* Botones */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:14px;padding:14px;border-radius:14px;font-weight:600;font-size:15px;text-decoration:none;border:0;cursor:pointer;font-family:inherit}
.btn svg{width:20px;height:20px;fill:currentColor}
.btn.red{background:var(--red);color:#fff;box-shadow:0 8px 30px rgba(255,59,59,.35)}
.btn.amb{background:linear-gradient(180deg,var(--amber2),var(--amber));color:#1a1003;box-shadow:0 8px 30px rgba(245,166,35,.22)}
.btn.ghost{background:rgba(255,255,255,.05);color:var(--txt);border:1px solid var(--line)}

/* En vivo */
.live{border-radius:20px;padding:16px;background:linear-gradient(135deg,rgba(255,59,59,.2),rgba(20,20,22,.92) 55%);border:1px solid rgba(255,59,59,.4);margin-bottom:12px}
.live .row{display:flex;gap:14px;align-items:center}
.thumb{width:120px;aspect-ratio:16/9;border-radius:10px;flex:none;background:#111 center/cover;position:relative;overflow:hidden}
.thumb.tt{display:grid;place-items:center;background:#000}
.thumb.tt svg{width:38px;height:38px;fill:#fff}
.badge{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:11px;letter-spacing:.12em;color:#fff;background:var(--red);padding:5px 10px;border-radius:99px}
.dot{width:8px;height:8px;border-radius:50%;background:#fff;position:relative;flex:none}
.dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #fff;animation:p 1.4s ease-out infinite}
@keyframes p{from{transform:scale(.6);opacity:1}to{transform:scale(1.8);opacity:0}}
.live h3{font-size:15px;font-weight:600;margin-top:8px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.live small,.sched small{color:var(--mut);font-size:12px}

/* Próximo directo */
.sched{border-radius:20px;overflow:hidden;background:var(--card);border:1px solid rgba(245,166,35,.25)}
.sched img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.sched .in{padding:16px}
.sched .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.sched h3{font-size:17px;font-weight:600;margin-top:6px;line-height:1.35}
.sched h3 b{color:var(--amber2)}
.cd{margin-top:6px;font-size:13px;color:var(--green)}
.zones{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.z{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.z span{display:block;font-size:12px;color:var(--mut)}
.z b{font-family:Sora,sans-serif;font-size:16px}
.z.me{border-color:rgba(245,166,35,.5)}

/* Grabaciones */
.rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 4px 6px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.vid{flex:0 0 72%;scroll-snap-align:start;text-decoration:none}
.vid .thumb{width:100%;border-radius:14px}
.vid h4{font-size:14px;font-weight:600;margin-top:10px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vid small{color:var(--mut);font-size:12px}

/* Redes */
.soc{display:grid;gap:10px}
.s{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:var(--card);border:1px solid var(--line);text-decoration:none;font-weight:600;font-size:15px;transition:transform .2s,border-color .2s}
.s:hover{border-color:rgba(245,166,35,.5);transform:translateY(-1px)}
.s .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none}
.s .ic svg{width:22px;height:22px;fill:#fff}
.s .sub{display:block;font-weight:400;font-size:12px;color:var(--mut);margin-top:2px}
.s .arr{margin-left:auto;color:var(--mut)}

/* Descuentos */
.deal{position:relative;border-radius:20px;padding:18px;background:linear-gradient(160deg,rgba(40,28,10,.95),rgba(20,20,22,.92) 55%);border:1px solid rgba(245,166,35,.28);margin-bottom:12px;overflow:hidden}
.deal .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.deal .firm{font-family:Sora,sans-serif;font-weight:700;font-size:17px;letter-spacing:.02em}
.deal .what{color:var(--mut);font-size:12px;margin-top:3px}
.deal .pct{font-family:Sora,sans-serif;font-weight:800;font-size:34px;line-height:1;color:var(--amber2);text-align:right}
.deal .pct span{display:block;font-size:11px;letter-spacing:.2em;color:var(--amber)}
.deal.rib .pct{margin-right:28px}
.ribbon{position:absolute;top:14px;right:-36px;transform:rotate(35deg);background:var(--red);color:#fff;font-size:10px;font-weight:700;letter-spacing:.12em;padding:4px 40px}
.code{display:flex;margin-top:14px;border:1px dashed rgba(245,166,35,.5);border-radius:12px;overflow:hidden}
.code b{flex:1;padding:12px 14px;font-family:Sora,sans-serif;letter-spacing:.18em;font-size:15px}
.code button{border:0;background:rgba(245,166,35,.14);color:var(--amber2);font-weight:600;padding:0 16px;font-family:inherit;font-size:14px;cursor:pointer}
.auto{margin-top:14px;font-size:12px;color:var(--green)}

footer{margin:36px 16px 0;padding:18px;border-top:1px solid var(--line);color:#8a857c;font-size:11.5px;line-height:1.6;text-align:center}
footer p+p{margin-top:10px}
footer b{color:var(--mut)}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,90px);background:var(--amber);color:#1a1003;font-weight:600;padding:10px 16px;border-radius:99px;transition:transform .3s;font-size:14px}
.toast.on{transform:translate(-50%,0)}
@media(min-width:760px){.wrap{margin-top:24px;margin-bottom:24px;border-radius:28px;overflow:hidden;border:1px solid var(--line);background:rgba(10,10,11,.82);backdrop-filter:blur(6px)}}

/* ── Toro (alcista, verde) y oso (bajista, rojo) del fondo ── */
.bg i{position:absolute;inset:0;pointer-events:none}
.bg i::before{content:"";position:absolute;inset:0}
#fx{position:absolute;inset:0;pointer-events:none}
.bg i::before{mix-blend-mode:color}          /* tiñe el dorado del animal */
.toro::before{background:radial-gradient(ellipse 30% 9% at 22% 6%,#16c75e,transparent 75%)}
.oso::before{background:radial-gradient(ellipse 28% 9% at 85% 10%,#ff2d2d,transparent 75%)}
@media(min-width:760px){
  .toro::before{background:radial-gradient(ellipse 17% 34% at 14% 22%,#16c75e,transparent 75%)}
    .oso::before{background:radial-gradient(ellipse 13% 30% at 93% 32%,#ff2d2d,transparent 75%)}
  }
/* Pelean: cuando uno se enciende el otro baja, como el mercado */
.toro::before{animation:pulso 7s ease-in-out infinite}
.oso::before{animation:pulso 7s ease-in-out -3.5s infinite}
@keyframes pulso{0%,100%{opacity:.35}50%{opacity:1}}

/* ── Animaciones: brillo y entrada ── */
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(ellipse 48% 42% at 50% 38%,rgba(245,166,35,.55),rgba(245,166,35,.12) 55%,transparent 75%);
  animation:respira 4.5s ease-in-out infinite}
.hero img{animation:entra 1.1s cubic-bezier(.2,.7,.2,1) both}
.sparks{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.sparks i{position:absolute;bottom:18%;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:#FFD27A;
  box-shadow:0 0 6px 2px rgba(245,166,35,.8);opacity:0;animation:sube var(--d) linear var(--w) infinite}
.id>*{animation:arriba .8s cubic-bezier(.2,.7,.2,1) both}
.id>:nth-child(1){animation-delay:.35s}.id>:nth-child(2){animation-delay:.5s}.id>:nth-child(3){animation-delay:.62s}.id>:nth-child(4){animation-delay:.74s}
#live-sec{animation:arriba .8s cubic-bezier(.2,.7,.2,1) .85s both}
@keyframes respira{0%,100%{opacity:.35;transform:scale(.97)}50%{opacity:.85;transform:scale(1.04)}}
@keyframes entra{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
@keyframes arriba{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes sube{0%{opacity:0;transform:translate(0,0)}12%{opacity:1}70%{opacity:.8}100%{opacity:0;transform:translate(var(--dx),-260px)}}
@keyframes shine{0%,55%{background-position:100% 0}85%,100%{background-position:0 0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}}