/* =========================================================
   LOJA LUANDA — INTRO
   Compatível com hospedagem estática / WordPress
   ========================================================= */

:root{
  --blue:#29458e;
  --blue-2:#1f397e;
  --red:#ed1c24;
  --black:#050505;
  --white:#fff;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;font-family:Inter,Arial,Helvetica,sans-serif}
body{background:#050505;overflow:hidden}

a{text-decoration:none;color:inherit}

.intro{
  position:relative;
  min-height:100svh;
  height:100svh;
  overflow:hidden;
  isolation:isolate;
  background:#050505;
}

/* Soft central light */
.intro::before{
  content:"";
  position:absolute;
  z-index:-2;
  width:55vw;height:55vw;
  max-width:800px;max-height:800px;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,255,255,.13),transparent 65%);
  pointer-events:none;
}

/* ---------------- Header ---------------- */

.topbar{
  position:absolute;
  z-index:20;
  left:0;right:0;top:0;
  height:92px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 42px;
}

.brand{
  display:inline-flex;
  align-items:center;
  width:max-content;
  filter:drop-shadow(0 5px 15px rgba(0,0,0,.08));
}

.brand img{
  display:block;
  width:auto;
  height:48px;
  max-width:190px;
  object-fit:contain;
}

.question{
  text-align:center;
  color:#111;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 10px 40px rgba(0,0,0,.12);
  border-radius:999px;
  padding:9px 23px 10px;
  backdrop-filter:blur(14px);
}

.question span{
  display:block;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:2px;
  opacity:.55;
  margin-bottom:2px;
}

.question strong{
  display:block;
  font-size:16px;
  letter-spacing:-.3px;
}

.topbar-spacer{height:1px}

/* ---------------- Panels ---------------- */

.choices{
  display:flex;
  width:100%;
  height:100%;
}

.choice{
  position:relative;
  width:50%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  transition:
    width .7s var(--ease),
    filter .7s var(--ease);
}

.choice::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 35%,rgba(0,0,0,.15));
}

.choice-store{
  background:
    radial-gradient(circle at 55% 46%,#fff 0,#f9fafb 34%,#e8ebf0 100%);
  color:#111;
}

.choice-tv{
  background:
    radial-gradient(circle at 50% 38%,#202020 0,#0b0b0b 42%,#000 100%);
  color:#fff;
}

.choices:has(.choice:hover) .choice:not(:hover){
  width:43%;
  filter:brightness(.67) saturate(.8);
}

.choices:has(.choice:hover) .choice:hover{
  width:57%;
}

.choice-inner{
  position:relative;
  z-index:4;
  width:min(620px,82%);
  padding-top:65px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  transition:transform .7s var(--ease);
}

.choice:hover .choice-inner{transform:translateY(-7px)}

.glow{
  position:absolute;
  width:520px;height:520px;
  border-radius:50%;
  left:50%;top:42%;
  transform:translate(-50%,-50%);
  filter:blur(70px);
  opacity:.45;
  pointer-events:none;
}

.choice-store .glow{background:rgba(50,105,255,.18)}
.choice-tv .glow{background:rgba(237,28,36,.18)}

/* ---------------- Logos ---------------- */

.choice-logo{
  height:76px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:7px;
}

.choice-logo img{
  display:block;
  max-width:270px;
  max-height:72px;
  width:auto;
  height:auto;
  object-fit:contain;
}

.choice-store .choice-logo img{
  filter:drop-shadow(0 8px 15px rgba(41,69,142,.13));
}

.tv-logo img{
  max-width:250px;
  max-height:68px;
}

/* ---------------- Product / TV visual ---------------- */

.visual{
  position:relative;
  width:min(510px,100%);
  height:195px;
  margin:2px auto 7px;
  transition:transform .7s var(--ease);
}

.choice:hover .visual{transform:scale(1.035)}

.visual-store::before{
  content:"";
  position:absolute;
  width:360px;height:35px;
  left:50%;bottom:12px;
  transform:translateX(-50%);
  background:rgba(41,69,142,.12);
  filter:blur(20px);
  border-radius:50%;
}

.product{
  position:absolute;
  bottom:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  box-shadow:0 20px 35px rgba(0,0,0,.13);
}

.product-one{
  width:105px;height:130px;left:45px;
  border-radius:9px;
  background:linear-gradient(145deg,#fff,#dfe3e9);
  color:#777;
  font-size:12px;
  transform:rotate(-3deg);
}

.product-two{
  width:110px;height:42px;left:160px;
  border-radius:8px;
  background:linear-gradient(180deg,#111,#333);
  color:#ddd;
  font-size:12px;
  transform:rotate(-12deg);
}

.product-three{
  width:58px;height:138px;left:285px;
  border-radius:12px;
  background:linear-gradient(160deg,#1e1e1e,#080808);
}

.product-three::before,
.product-three::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:#222;
  border:3px solid #111;
}
.product-three::before{width:17px;height:17px;top:22px}
.product-three::after{width:10px;height:10px;top:57px}

.product-four{
  width:105px;height:78px;left:355px;
  border-radius:18px;
  background:linear-gradient(145deg,#fff,#e8e9eb);
  transform:rotate(3deg);
}

.visual-tv{
  width:min(570px,100%);
  height:205px;
}

.screen{
  position:absolute;
  left:50%;top:6px;
  width:82%;height:174px;
  transform:translateX(-50%);
  padding:8px;
  border-radius:10px;
  background:#111;
  border:2px solid #252525;
  box-shadow:
    0 20px 55px rgba(0,0,0,.7),
    0 0 30px rgba(237,28,36,.11);
}

.screen::after{
  content:"";
  position:absolute;
  left:9%;right:9%;bottom:-17px;
  height:16px;
  background:#171717;
  clip-path:polygon(15% 0,85% 0,100% 100%,0 100%);
}

.screen-top{
  height:20px;
  color:#ddd;
  font-size:8px;
  text-align:left;
  padding:3px 6px;
}

.screen-top span{float:right;color:#777}

.hero-film{
  height:93px;
  border-radius:5px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background:
    radial-gradient(circle at 72% 45%,rgba(245,145,40,.8),transparent 23%),
    linear-gradient(120deg,#19130d,#9b4817,#2b170e);
  box-shadow:inset 0 0 35px rgba(0,0,0,.35);
}

.film-title{
  font-size:32px;
  letter-spacing:8px;
  font-weight:900;
  color:#f2d5a7;
}

.film-sub{
  font-size:8px;
  letter-spacing:5px;
  color:#f5e5c7;
}

.poster-row{
  display:flex;
  gap:5px;
  margin-top:7px;
}

.poster-row i{
  display:block;
  width:46px;height:34px;
  border-radius:3px;
  background:linear-gradient(145deg,#7a2932,#d3a24a);
}
.poster-row i:nth-child(2){background:linear-gradient(145deg,#273b2d,#c4a76e)}
.poster-row i:nth-child(3){background:linear-gradient(145deg,#202b42,#bd3c35)}
.poster-row i:nth-child(4){background:linear-gradient(145deg,#c26a17,#e2b64f)}
.poster-row i:nth-child(5){background:linear-gradient(145deg,#172333,#737e8c)}

.remote{
  position:absolute;
  width:30px;height:85px;
  right:12px;bottom:8px;
  border-radius:14px;
  background:linear-gradient(90deg,#0d0d0d,#292929);
  transform:rotate(18deg);
  box-shadow:0 10px 20px rgba(0,0,0,.5);
}

.popcorn{
  position:absolute;
  right:30px;bottom:9px;
  font-size:43px;
  filter:drop-shadow(0 12px 15px rgba(0,0,0,.45));
}

/* ---------------- Copy ---------------- */

.eyebrow{
  margin:0 0 7px;
  font-size:10px;
  letter-spacing:2px;
  font-weight:800;
}

.choice-store .eyebrow{color:var(--blue)}
.choice-tv .eyebrow{color:#ff5358}

.copy h1{
  margin:0;
  font-size:clamp(37px,4vw,58px);
  line-height:.98;
  letter-spacing:-2.5px;
  font-weight:950;
}

.copy .description{
  max-width:470px;
  margin:12px auto 17px;
  font-size:15px;
  line-height:1.45;
}

.choice-store .description{color:#5f6368}
.choice-tv .description{color:#aaa}

/* ---------------- Benefits ---------------- */

.benefits{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:21px;
}

.benefits span{
  padding:6px 10px;
  border-radius:999px;
  font-size:10px;
  font-weight:750;
}

.choice-store .benefits span{
  color:#334155;
  background:rgba(255,255,255,.86);
  border:1px solid #e5e7eb;
  box-shadow:0 5px 15px rgba(0,0,0,.05);
}

.choice-tv .benefits span{
  color:#e7e7e7;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
}

/* ---------------- CTA ---------------- */

.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-width:225px;
  padding:14px 22px;
  border-radius:999px;
  font-size:13px;
  font-weight:900;
  letter-spacing:.2px;
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.cta b{
  display:grid;
  place-items:center;
  width:26px;height:26px;
  border-radius:50%;
  font-size:17px;
  transition:transform .25s ease;
}

.choice:hover .cta{
  transform:translateY(-2px);
}

.choice:hover .cta b{transform:translateX(4px)}

.cta-store{
  background:var(--blue);
  color:#fff;
  box-shadow:0 13px 32px rgba(41,69,142,.27);
}

.cta-store b{background:rgba(255,255,255,.16)}

.cta-tv{
  background:var(--red);
  color:#fff;
  box-shadow:0 13px 32px rgba(237,28,36,.27);
}

.cta-tv b{background:rgba(255,255,255,.18)}

/* ---------------- Footer ---------------- */

.footer{
  position:absolute;
  z-index:30;
  bottom:15px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(255,255,255,.52);
  font-size:8px;
  letter-spacing:1.7px;
  white-space:nowrap;
  pointer-events:none;
}

.footer .dot{
  width:3px;height:3px;
  background:currentColor;
  border-radius:50%;
}

/* ---------------- Entry animation ---------------- */

.choice-store{animation:enterLeft .9s var(--ease) both}
.choice-tv{animation:enterRight .9s var(--ease) .08s both}

@keyframes enterLeft{
  from{opacity:0;transform:translateX(-35px)}
  to{opacity:1;transform:none}
}
@keyframes enterRight{
  from{opacity:0;transform:translateX(35px)}
  to{opacity:1;transform:none}
}

/* ---------------- Tablet ---------------- */

@media (max-width: 980px){
  .topbar{padding:0 25px}
  .visual{transform:scale(.9)}
  .choice:hover .visual{transform:scale(.93)}
  .copy h1{font-size:42px}
  .copy .description{font-size:13px}
}

/* ---------------- Mobile ---------------- */

@media (max-width: 700px){

  body{overflow:auto}

  .intro{
    min-height:100svh;
    height:auto;
    overflow:visible;
    background:#050505;
  }

  .topbar{
    position:relative;
    height:92px;
    display:flex;
    justify-content:center;
    padding:12px 15px 5px;
  }

  .brand{
    position:absolute;
    top:13px;
    left:50%;
    transform:translateX(-50%);
  }

  .brand img{height:38px}

  .question{
    position:absolute;
    top:58px;
    font-size:12px;
    padding:6px 17px;
  }

  .question span{font-size:8px}

  .question strong{font-size:13px}

  .choices{
    height:auto;
    min-height:calc(100svh - 92px);
    flex-direction:column;
  }

  .choice,
  .choices:has(.choice:hover) .choice,
  .choices:has(.choice:hover) .choice:hover{
    width:100%;
    height:auto;
    min-height:calc((100svh - 92px) / 2);
    filter:none;
  }

  .choice-inner{
    width:90%;
    padding:23px 0 26px;
  }

  .choice:hover .choice-inner{transform:none}

  .choice-logo{
    height:45px;
    margin-bottom:1px;
  }

  .choice-logo img{
    max-height:44px;
    max-width:185px;
  }

  .tv-logo img{max-height:43px}

  .visual{
    height:108px;
    margin:0 auto 2px;
    transform:scale(.72);
  }

  .choice:hover .visual{transform:scale(.72)}

  .copy .eyebrow{
    font-size:8px;
    letter-spacing:1.2px;
  }

  .copy h1{
    font-size:31px;
    letter-spacing:-1.4px;
  }

  .copy .description{
    font-size:11px;
    line-height:1.35;
    margin:6px auto 9px;
    max-width:330px;
  }

  .benefits{
    gap:4px;
    margin-bottom:10px;
  }

  .benefits span{
    font-size:8px;
    padding:4px 7px;
  }

  .cta{
    min-width:190px;
    padding:10px 17px;
    font-size:10px;
  }

  .cta b{
    width:21px;height:21px;
    font-size:14px;
  }

  .footer{
    position:relative;
    bottom:auto;
    padding:12px 0 17px;
    background:#050505;
    width:100%;
    justify-content:center;
  }
}

/* ---------------- Accessibility ---------------- */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

.choice:focus-visible{
  outline:3px solid #fff;
  outline-offset:-7px;
}