
:root{
  color-scheme: dark;
  --bg:#030004;
  --bg-2:#0b0610;
  --ink:#fff7ff;
  --muted:#cdb8d9;
  --soft:#8d7a96;
  --violet:#a52cf4;
  --violet-2:#c148f6;
  --pink:#ff2b80;
  --hot:#ff4a36;
  --cyan:#23f2e7;
  --panel:#2b003e;
  --line:rgba(255,255,255,.15);
  --z-sticky:50;
  --z-carousel-controls:70;
  --z-bottom-cta:80;
  --z-toast:90;
  --z-modal-backdrop:100;
  --z-modal:110;
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:16px;
  --shadow-deep:0 30px 90px rgba(129,24,190,.38),0 16px 36px rgba(0,0,0,.7);
  --header-h:70px;
  font-family:"Trebuchet MS","Aptos Rounded","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;
  min-height:100svh;
  background:
    radial-gradient(circle at 50% -18%,rgba(177,46,255,.28),transparent 38rem),
    radial-gradient(circle at -20% 34%,rgba(255,43,128,.16),transparent 24rem),
    linear-gradient(180deg,#000 0%,#050006 46%,#09000d 100%);
  color:var(--ink);
  overflow-x:hidden;
}
button{font:inherit;color:inherit}
button:focus-visible,a:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}
svg{display:block;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.skip-link{position:fixed;top:10px;left:10px;z-index:1000;padding:10px 14px;border-radius:14px;background:#fff;color:#000;transform:translateY(-140%)}
.skip-link:focus{transform:translateY(0)}
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:auto;
  width:100%;
  max-width:100%;
  height:calc(var(--header-h) + env(safe-area-inset-top));
  padding:calc(12px + env(safe-area-inset-top)) max(18px,env(safe-area-inset-left)) 12px max(18px,env(safe-area-inset-right));
  z-index:var(--z-sticky);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(0,0,0,.88),rgba(0,0,0,.42) 68%,transparent);
  backdrop-filter:blur(8px);
}
.brand{display:flex;align-items:center;flex:1 1 auto;min-width:0;text-decoration:none;-webkit-tap-highlight-color:transparent}
.brand__mark{width:clamp(138px,38vw,176px);max-width:100%;height:46px;object-fit:contain;object-position:left center;filter:drop-shadow(0 8px 20px rgba(35,242,231,.18))}
 .promo__button,.download-main,.bottom-download-cta__button{
  border:0;
  min-height:46px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  cursor:pointer;
  background:linear-gradient(135deg,var(--violet) 0%,#b63ff1 44%,#dc55f7 100%);
  color:white;
  box-shadow:0 12px 28px rgba(184,57,244,.42), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
  -webkit-tap-highlight-color:transparent;
}
 .promo__button:active,.download-main:active,.bottom-download-cta__button:active{transform:translateY(1px) scale(.98);filter:saturate(1.18)}
main{min-height:100vh;padding-top:calc(var(--header-h) + env(safe-area-inset-top));padding-bottom:calc(92px + env(safe-area-inset-bottom));max-width:520px;margin:0 auto;position:relative}
.hero{position:relative;text-align:center;padding:20px 0 24px;isolation:isolate}
.ambient{position:absolute;border-radius:999px;filter:blur(16px);opacity:.72;z-index:-1;pointer-events:none}
.ambient--one{width:180px;height:180px;background:#5c167b;right:-70px;top:72px}
.ambient--two{width:160px;height:160px;background:#42114e;left:-72px;top:242px}
h1{
  margin:0 auto 15px;
  max-width:330px;
  padding:0 18px;
  font-size:16px;
  line-height:1.22;
  font-weight:900;
  letter-spacing:-.02em;
  color:#fff;
  text-wrap:balance;
}
h1::after{content:" · cada semana";color:var(--cyan);font-style:italic}
.hero-carousel{position:relative;min-height:468px;overflow:hidden}
.hero-dots{height:24px;display:flex;gap:14px;align-items:center;justify-content:center;margin:0 0 8px}
.hero-dot{width:36px;height:9px;border-radius:999px;border:0;padding:0;background:rgba(255,255,255,.25);cursor:pointer;transform:scaleX(.25);transform-origin:center;transition:transform .3s ease, background .3s ease;min-height:9px}
.hero-dot.is-active{transform:scaleX(1);background:linear-gradient(90deg,var(--violet-2),#e058ff)}
.hero-stage{position:relative;height:420px;margin:0 auto;width:100%;touch-action:pan-y}
.hero-card{
  position:absolute;
  top:5px;
  left:50%;
  width:min(78vw,330px);
  height:min(99vw,410px);
  max-height:410px;
  border-radius:26px;
  overflow:hidden;
  background:#1a101e;
  box-shadow:var(--shadow-deep);
  transform:translateX(calc(-50% + var(--x))) scale(var(--s));
  opacity:var(--o);
  z-index:var(--z);
  pointer-events:none;
  transition:transform .58s cubic-bezier(.2,.82,.2,1),opacity .42s ease,filter .42s ease;
  filter:saturate(var(--sat)) brightness(var(--b));
}
.hero-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.12) 55%,rgba(0,0,0,.88) 100%);z-index:1}
.hero-card::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);z-index:2;pointer-events:none}
.hero-card img{width:100%;height:100%;object-fit:cover;display:block}
.hero-card__meta{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:26px 22px 22px;text-align:left}
.hero-card__label{display:inline-flex;margin-bottom:9px;padding:5px 9px;border-radius:999px;background:rgba(0,0,0,.42);backdrop-filter:blur(8px);font-size:11px;font-weight:900;color:#ffd8ff;letter-spacing:.01em}
.hero-card__title{margin:0;color:white;font-size:25px;line-height:.98;font-weight:950;letter-spacing:-.035em;text-wrap:balance;text-shadow:0 3px 16px rgba(0,0,0,.65)}
.hero-card__sub{margin:9px 0 0;color:#f8dcff;font-size:13px;font-weight:800}
.arrow{position:absolute;top:214px;width:52px;height:52px;border-radius:999px;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;background:rgba(20,11,28,.78);box-shadow:0 16px 30px rgba(0,0,0,.5);backdrop-filter:blur(10px);z-index:var(--z-carousel-controls);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.arrow svg{width:27px;height:27px}
.arrow--left{left:12px}.arrow--right{right:12px}
.rail-section{padding:18px 0 8px}
.rail-section--tight{padding-top:16px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:0 18px 12px}
.section-head h2{margin:0;font-size:22px;line-height:1;font-weight:950;letter-spacing:-.035em;text-shadow:0 8px 25px rgba(166,44,244,.22)}
.section-head span{font-size:12px;color:var(--cyan);font-weight:900;white-space:nowrap}
.poster-rail{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:136px;
  gap:12px;
  overflow-x:auto;
  padding:0 18px 14px;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  cursor:grab;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
.poster-rail::-webkit-scrollbar{display:none}
.poster-rail.is-dragging{cursor:grabbing;scroll-snap-type:none}
.poster-rail.is-dragging *{pointer-events:none}
.poster-card{
  scroll-snap-align:start;
  cursor:default;
  user-select:none;
  -webkit-user-select:none;
}
.poster-shell{
  position:relative;
  width:100%;
  aspect-ratio:3/4.18;
  overflow:hidden;
  border-radius:18px;
  background:#17091c;
  box-shadow:0 14px 28px rgba(0,0,0,.46);
}
.poster-shell img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.poster-shell::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,transparent 48%,rgba(0,0,0,.66) 100%);pointer-events:none}
.poster-episodes{position:absolute;left:8px;bottom:8px;z-index:2;padding:4px 8px;border-radius:999px;background:rgba(0,0,0,.58);font-size:11px;font-weight:900;color:#fff}
.poster-title{margin:8px 2px 0;font-size:13px;line-height:1.12;font-weight:900;color:#fff;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:29px}
.promo{position:relative;margin:26px 13px 10px;min-height:560px;border-radius:26px;overflow:hidden;background:radial-gradient(circle at 88% 0%,rgba(183,47,255,.38),transparent 24%),linear-gradient(154deg,#330047 0%,#3b0054 42%,#270032 100%);box-shadow:0 30px 90px rgba(91,0,122,.56),inset 0 1px 0 rgba(255,255,255,.12)}
.promo::before{content:"";position:absolute;inset:-60px -80px auto 6%;height:360px;border-radius:50%;background:linear-gradient(160deg,rgba(255,255,255,.08),transparent 60%);transform:rotate(-18deg)}
.promo::after{content:"";position:absolute;inset:0;background:linear-gradient(150deg,transparent 18%,rgba(255,255,255,.035) 18% 31%,transparent 31% 44%,rgba(255,255,255,.03) 44% 58%,transparent 58%);pointer-events:none}
.promo__copy{position:relative;z-index:2;padding:26px 18px 0}
.promo__brand{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.72);font-weight:950;font-size:28px;line-height:1;letter-spacing:-.04em}
.promo__brand img{width:50px;height:50px;object-fit:contain;border-radius:14px;filter:drop-shadow(0 10px 22px rgba(35,242,231,.22))}
.promo__tag{margin:18px 0 8px;color:#d7b8e8;font-size:13px;font-weight:950;text-transform:uppercase;letter-spacing:.06em}
.promo h2{margin:0;max-width:350px;font-size:43px;line-height:.95;font-weight:950;letter-spacing:-.055em;text-wrap:balance}
.promo p:not(.promo__tag){max-width:330px;margin:15px 0 20px;color:#f1dff8;font-size:16px;line-height:1.42;font-weight:650}
.promo__button{min-height:46px;background:#fff;color:#050006;padding:0 24px;font-size:15px;font-weight:950;box-shadow:0 14px 24px rgba(0,0,0,.28)}
.promo__fan{
  position:absolute;
  left:0;
  right:0;
  bottom:18px;
  display:flex;
  align-items:flex-end;
  gap:0;
  padding:0 18px 10px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  z-index:2;
  touch-action:pan-x;
}
.promo__fan::-webkit-scrollbar{display:none}
.promo__fan.is-dragging{cursor:grabbing;scroll-snap-type:none}
.fan-card{
  position:relative;
  flex:0 0 auto;
  width:122px;
  aspect-ratio:3/4.2;
  border-radius:13px;
  overflow:hidden;
  box-shadow:0 16px 32px rgba(0,0,0,.5);
  border:2px solid var(--fan-color);
  transform:rotate(var(--rot)) translateY(var(--lift));
  transform-origin:50% 92%;
  background:#1b071d;
  scroll-snap-align:center;
}
.fan-card + .fan-card{margin-left:-26px}
.fan-card img{width:100%;height:100%;object-fit:cover;display:block}
.poster-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 10px;padding:0 18px 12px}.poster-grid .poster-title{font-size:12px}.poster-grid .poster-shell{border-radius:15px}
.download-panel{position:relative;margin:30px 13px calc(28px + env(safe-area-inset-bottom));padding:30px 18px 26px;text-align:center;border-radius:28px;overflow:hidden;background:linear-gradient(160deg,#18011f 0%,#25002d 45%,#070008 100%);box-shadow:0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12)}
.download-panel__glow{position:absolute;width:250px;height:250px;border-radius:999px;left:50%;top:-130px;transform:translateX(-50%);background:radial-gradient(circle,rgba(255,43,128,.62),rgba(166,44,244,.36) 44%,transparent 70%);filter:blur(4px)}
.download-panel__logo{position:relative;width:112px;height:112px;margin:0 auto 6px;object-fit:contain;filter:drop-shadow(0 18px 36px rgba(35,242,231,.24))}
.download-panel__label{position:relative;margin:0 auto 8px;width:max-content;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.1);color:#ffd4f2;font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.08em}
.download-panel h2{position:relative;margin:0 auto;max-width:355px;font-size:38px;line-height:.96;font-weight:950;letter-spacing:-.05em;text-wrap:balance}
.download-panel p{position:relative;color:#e6cce9;line-height:1.45;font-size:15px;font-weight:650;max-width:350px;margin:14px auto 0}
.download-main{position:relative;margin:22px auto 0;min-height:56px;padding:0 24px;width:min(100%,320px);font-size:17px;font-weight:950;background:linear-gradient(135deg,#ff2b80 0%,#b12ff2 52%,#7a2fff 100%)}
.download-main svg{width:25px;height:25px}.download-panel__note{font-size:12px!important;color:#b89bc5!important;margin-top:14px!important}
.bottom-download-cta{
  position:fixed;
  left:0;
  right:auto;
  width:100%;
  bottom:0;
  z-index:var(--z-bottom-cta);
  display:flex;
  justify-content:center;
  padding:0 14px max(14px,env(safe-area-inset-bottom));
  pointer-events:none;
}
.bottom-download-cta{
  left:50%;
  width:100vw;
  max-width:100vw;
  transform:translateX(-50%) translateY(var(--bottom-cta-y,0px));
}
.bottom-download-cta{
  left:50svw;
  width:100svw;
  max-width:100svw;
}
.bottom-download-cta__button{
  width:min(calc(100vw - 28px),340px);
  max-width:calc(100svw - 28px);
  min-height:54px;
  padding:0 24px;
  font-size:16px;
  font-weight:950;
  cursor:pointer;
  pointer-events:auto;
  background:linear-gradient(135deg,#ff2b80 0%,#b12ff2 52%,#7a2fff 100%);
}
.bottom-download-cta__button svg{width:22px;height:22px}
@supports (width: 1svw){
  .bottom-download-cta__button{width:min(calc(100svw - 28px),340px)}
}
.toast{visibility:hidden;opacity:0;pointer-events:none;position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));z-index:var(--z-toast);transform:translate(-50%,130%);padding:12px 16px;border-radius:999px;background:#fff;color:#080009;font-weight:900;box-shadow:0 18px 40px rgba(0,0,0,.48);transition:transform .35s cubic-bezier(.2,.82,.2,1),opacity .25s ease;white-space:nowrap}.toast.is-visible{visibility:visible;opacity:1;transform:translate(-50%,0)}
body.modal-open{overflow:hidden}
.download-modal[hidden]{display:none}
.download-modal{
  position:fixed;
  inset:0;
  z-index:var(--z-modal);
  display:grid;
  place-items:center;
  padding:18px;
}
.download-modal__backdrop{
  position:absolute;
  inset:0;
  z-index:var(--z-modal-backdrop);
  background:rgba(2,0,6,.88);
  backdrop-filter:blur(10px) saturate(110%);
}
.download-modal__dialog{
  position:relative;
  z-index:var(--z-modal);
  width:min(100%,364px);
  max-height:calc(100dvh - 28px);
  overflow:auto;
  outline:0;
  padding:48px 16px 18px;
  border:0;
  border-radius:24px;
  background:
    radial-gradient(circle at 50% -10%,rgba(255,84,96,.12),transparent 36%),
    radial-gradient(circle at 100% 0%,rgba(181,69,244,.16),transparent 34%),
    linear-gradient(180deg,rgba(12,14,26,.98),rgba(8,10,18,.98));
  box-shadow:0 24px 54px rgba(0,0,0,.6);
  isolation:isolate;
}
.download-modal__dialog::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.08);
  pointer-events:none;
}
.download-modal__close{
  position:absolute;
  top:10px;
  right:10px;
  width:38px;
  height:38px;
  border:0;
  padding:0;
  background:rgba(255,255,255,.02);
  color:#b8bfd3;
  font-size:36px;
  line-height:1;
  cursor:pointer;
  border-radius:999px;
}
.download-modal__dialog h2{
  margin:0 auto 24px;
  max-width:280px;
  text-align:center;
  color:#ff5360;
  font-size:30px;
  line-height:1.08;
  font-weight:950;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.download-modal__dialog > p{
  margin:0;
  color:#c7ccdf;
  font-size:17px;
  line-height:1.58;
  font-weight:700;
  text-wrap:pretty;
}
.download-modal__fallback{
  margin-top:22px;
  padding:16px 15px;
  border:1px solid rgba(63,71,96,.55);
  border-radius:16px;
  background:rgba(8,10,20,.78);
}
.download-modal__fallback p{
  margin:0;
  color:#c6cbde;
  font-size:15px;
  line-height:1.58;
  font-weight:700;
}
.download-modal__actions{
  display:grid;
  gap:17px;
  margin-top:24px;
}
.download-modal__primary,
.download-modal__secondary{
  border:0;
  min-height:54px;
  width:100%;
  border-radius:999px;
  cursor:pointer;
  font-size:15px;
  font-weight:950;
  letter-spacing:.01em;
  transition:transform .22s ease,filter .22s ease;
  -webkit-tap-highlight-color:transparent;
}
.download-modal__primary{
  background:linear-gradient(135deg,#ff2b80 0%,#b12ff2 52%,#7a2fff 100%);
  color:#fff;
  box-shadow:0 14px 30px rgba(184,57,244,.36), inset 0 1px 0 rgba(255,255,255,.2);
}
.download-modal__secondary{
  background:rgba(255,255,255,.1);
  color:#fff7ff;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.download-modal__primary:active,
.download-modal__secondary:active{transform:scale(.985);filter:saturate(1.1)}
 @media (min-width:640px){body{background-color:#0a0710}body::after{content:"";position:fixed;inset:22px auto 22px 50%;width:456px;transform:translateX(-50%);border-radius:38px;border:1px solid rgba(255,255,255,.08);box-shadow:0 0 0 9999px rgba(0,0,0,.42);pointer-events:none}.site-header,main{max-width:456px;margin-left:auto;margin-right:auto}.site-header{left:50%;right:auto;width:456px;max-width:456px;transform:translateX(-50%);border-radius:0 0 26px 26px}.bottom-download-cta{left:50%;right:auto;width:456px;max-width:456px;transform:translateX(-50%) translateY(var(--bottom-cta-y,0px))}.bottom-download-cta__button{width:min(calc(100% - 28px),340px);max-width:340px}.arrow--left{left:18px}.arrow--right{right:18px}}
 @media (max-width:374px){.site-header{gap:8px;padding-right:max(12px,env(safe-area-inset-right));padding-left:max(12px,env(safe-area-inset-left))}.brand__mark{width:clamp(126px,39vw,148px);height:42px}.hero-card{width:80vw;height:104vw}.hero-carousel{min-height:438px}.hero-stage{height:392px}.arrow{top:198px}.poster-rail{grid-auto-columns:126px}.promo h2{font-size:38px}.download-panel h2{font-size:34px}.download-modal{padding:6px}.download-modal__dialog{width:100%;min-height:calc(100dvh - 12px);border-radius:20px;padding:44px 14px 16px}.download-modal__dialog h2{font-size:28px;max-width:260px}.download-modal__dialog > p{font-size:16px}.download-modal__fallback{padding:14px}.download-modal__actions{gap:14px}.download-modal__primary,.download-modal__secondary{min-height:50px;font-size:14px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}.hero-card{transition:none}}



