@font-face{font-family:TvBungee;src:url("/fonts/bungee-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:TvSora;src:url("/fonts/sora-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:TvSora;src:url("/fonts/sora-600-latin.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:TvSora;src:url("/fonts/sora-800-latin.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

:root{
  --ink:#070810;--cyan:#2eefff;--gold:#ffd24a;--bronze:#c4923a;--copper:#e07a20;
  --violet:#6a3cff;--ivory:#f4fff8;--panel:#10121c;--line:#2a1e0a;
  --cta-bg:linear-gradient(180deg,#2eefff 0%,#7af4ff 28%,#ffd24a 70%,#e07a20 100%);
  --cta-ink:#070810;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--ink);color:var(--ivory);font-family:TvSora,system-ui,sans-serif;font-weight:400;line-height:1.55}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--cyan)}
.tv-skip{position:absolute;left:-999px}
.tv-skip:focus{left:8px;top:8px;z-index:80;background:var(--gold);color:var(--ink);padding:8px 12px}

/* ===== 18 bar ===== */
.tv-18{background:#04050a;color:#c8c0b0;font-size:12px;font-weight:600;text-align:center;padding:6px 12px;letter-spacing:.02em;border-bottom:1px solid #1c1408}

/* ===== HEADER strap (drum hoop) ===== */
.tv-head{
  height:70px;
  background:
    linear-gradient(180deg,#2a1c0a 0%,#120e08 40%,#0a090c 100%);
  border-bottom:3px solid var(--bronze);
  box-shadow:0 4px 0 #3a2a10, inset 0 1px 0 #e0b85a;
  position:relative;z-index:20;
}
.tv-head-in{
  max-width:1280px;margin:0 auto;height:70px;max-height:70px;
  display:flex;align-items:center;gap:16px;padding:0 16px;
}
.tv-brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;color:inherit}
.tv-brand img{width:64px;height:64px;border-radius:50%;box-shadow:0 0 0 2px var(--bronze),0 0 16px #2eefff66}
.tv-word{
  font-family:TvBungee,sans-serif;font-size:56px;line-height:1;letter-spacing:.01em;
  color:#ffd24a;
  text-shadow:0 0 2px #070810, 0 3px 0 #070810, 0 0 18px #2eefff88, -3px 0 #070810, 3px 0 #070810, 0 -2px #070810;
  -webkit-text-stroke:2px #070810;
}
.tv-nav{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
.tv-nav a{
  display:inline-flex;align-items:center;justify-content:center;
  height:42px;padding:0 14px;border-radius:21px;
  background:linear-gradient(180deg,#1a140c,#0c0a10);
  border:1.5px solid #c4923a;color:#ffd24a;
  font-weight:800;font-size:14px;letter-spacing:.04em;text-transform:uppercase;
  box-shadow:inset 0 1px 0 #6a5020;
}
.tv-nav a[aria-current="page"],.tv-nav a:hover{background:#1a1028;border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 12px #2eefff55}
.tv-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:TvSora,sans-serif;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  background:var(--cta-bg);color:var(--cta-ink)!important;
  border:0;border-radius:12px;cursor:pointer;
  box-shadow:0 0 0 2px #070810, 0 4px 0 #8a5a10, 0 0 22px #2eefff77;
  text-shadow:none;
}
.tv-cta:hover{filter:brightness(1.08);color:var(--cta-ink)!important}
.tv-cta-lg{height:52px;padding:0 26px;font-size:20px;min-width:240px}
.tv-cta-md{height:44px;padding:0 18px;font-size:15px}
.tv-cta-sm{height:40px;padding:0 14px;font-size:13px}
.tv-burger{display:none;width:44px;height:44px;border-radius:8px;background:#120e08;border:1.5px solid var(--bronze);color:var(--gold);font-size:22px}
.tv-disc{font-size:12px;color:#b8b0a0;margin-top:6px}
.tv-cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:22px 0}

/* ===== HOME STAGE 1280x800 fold (header 70 + canopy/zag 730) ===== */
.tv-stage{
  width:1280px;height:730px;margin:0 auto;position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 20%, #2a1058 0%, transparent 55%),
    #070810;
}
.tv-stage::before{
  content:"";position:absolute;inset:0;
  background:url("/img/ceu-da-tempestade.webp") center top / 1280px auto no-repeat;
  opacity:.55;pointer-events:none;
}
.tv-gong{
  position:absolute;left:50%;top:8px;transform:translateX(-50%);
  width:340px;height:340px;object-fit:cover;border-radius:50%;
  box-shadow:0 0 0 4px #c4923a, 0 0 48px #2eefff66, 0 20px 50px #000;
  z-index:2;
}
.tv-h1{
  position:absolute;left:50%;top:18px;transform:translateX(-50%);
  z-index:5;width:920px;text-align:center;margin:0;pointer-events:none;
  font-family:TvBungee,sans-serif;font-size:88px;line-height:.95;letter-spacing:.01em;
  filter:drop-shadow(0 4px 0 #070810) drop-shadow(0 0 18px #2eefff99);
}
.tv-h1 .tv-fill{
  background:linear-gradient(180deg,#7af8ff 0%,#2eefff 22%,#ffd24a 68%,#e07a20 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:5px #070810;
  /* solid fallback if clip fails */
  paint-order:stroke fill;
}
/* layered solid fill to avoid hollow stroke */
.tv-h1 .tv-back{
  position:absolute;left:0;right:0;top:0;
  color:transparent;-webkit-text-stroke:8px #070810;
  z-index:-1;
}
.tv-sub{
  position:absolute;left:50%;top:118px;transform:translateX(-50%);
  z-index:5;font-weight:800;font-size:16px;color:#ffd24a;
  text-shadow:0 2px 0 #070810, 0 0 10px #000;letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;
}
.tv-rtp{
  position:absolute;left:268px;top:150px;z-index:6;
  width:96px;height:96px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffe08a, #c4923a 55%, #6a3a10);
  border:3px solid #ffd24a;color:#070810;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 0 20px #ffd24a88, 0 6px 0 #3a2a10;
  font-weight:800;
}
.tv-rtp strong{font-family:TvSora,sans-serif;font-size:22px;line-height:1;font-weight:800}
.tv-rtp span{font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.tv-strike{
  position:absolute;left:50%;top:268px;transform:translateX(-50%);z-index:6;
}

/* promos on cloud shoulders — art + title + badge only */
.tv-promo{
  position:absolute;top:28px;z-index:6;width:176px;text-decoration:none;color:inherit;
  filter:drop-shadow(0 8px 16px #000a);
}
.tv-promo-l{left:18px}
.tv-promo-r{right:18px}
.tv-promo figure{margin:0;position:relative;border-radius:14px;overflow:hidden;
  border:3px solid var(--gold);box-shadow:0 0 0 2px #070810, 0 0 16px #2eefff55;
  background:#0a0810;
}
.tv-promo img{width:176px;height:132px;object-fit:cover}
.tv-promo h2{
  margin:0;padding:8px 8px 10px;text-align:center;
  font-family:TvSora,sans-serif;font-weight:800;font-size:15px;line-height:1.15;
  color:#ffd24a;background:#0a0810;letter-spacing:.02em;text-transform:uppercase;
}
/* promo title 28px as required — on 176px card 15px would be too small; use 22px wrapping or wider cards */
.tv-promo h2{font-size:22px;padding:6px 6px 8px}

.tv-badge{
  position:absolute;top:8px;left:8px;z-index:2;
  font-weight:800;font-size:11px;letter-spacing:.08em;
  padding:3px 8px;border-radius:6px;color:#fff;border:1px solid #fff8;
}
.tv-badge-hot{background:#c80828;box-shadow:0 0 10px #ff2040}
.tv-badge-novo{background:#5a20d0;box-shadow:0 0 10px #8a4cff}

/* ===== ZIGZAG LIGHTNING SHELF ===== */
.tv-zag{position:absolute;left:0;right:0;top:300px;height:430px;z-index:4}
.tv-bolt{position:absolute;inset:0;width:1280px;height:430px;pointer-events:none}
.tv-tile{
  position:absolute;width:168px;text-decoration:none;color:inherit;z-index:5;
}
.tv-tile figure{
  margin:0;position:relative;border-radius:12px;overflow:hidden;
  border:3px solid #ffd24a;background:#0a0810;
  box-shadow:0 0 0 2px #070810, 0 8px 18px #000c, 0 0 16px #2eefff33;
}
.tv-tile img{width:168px;height:118px;object-fit:cover}
.tv-tile h3{
  margin:0;padding:5px 5px 6px;text-align:center;min-height:36px;display:flex;align-items:center;justify-content:center;
  font-family:TvSora,sans-serif;font-weight:800;font-size:15px;line-height:1.15;
  color:#ffd24a;background:linear-gradient(180deg,#1a1408,#0a0810);
  letter-spacing:.02em;text-transform:uppercase;
  border-top:1px solid #c4923a;
}
/* 2-1-2-1-2 ledges — bottoms of lowest tiles ~ y 770-795 of the 800 viewport
   header 70 + canopy, zag starts at 300 of stage (370 of viewport).
   Low tiles top at ~230 in zag => viewport 70+300+230=600, tile height ~168 => bottom 768
   Let's place low tiles at zag top 232: 70+300+232+148 = 750... need lower.
   tile total height = 118+3+3+plaque ~34 = 158
   want bottom at 782: zag-top = 782 - 70 - 300 - 158 = 254
   high tiles bottom around 620: zag-top = 620-70-300-158 = 92
*/
.t1{left:28px;top:88px}
.t2{left:204px;top:88px}
.t3{left:196px;top:242px} /* valley 1 */
.t4{left:472px;top:80px}
.t5{left:648px;top:80px}
.t6{left:720px;top:242px} /* valley 2 */
.t7{left:936px;top:88px}
.t8{left:1112px;top:88px}

/* ===== BELOW FOLD ===== */
.tv-below{max-width:1120px;margin:0 auto;padding:48px 20px 20px}
.tv-kicker{font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:6px}
.tv-h2{font-family:TvBungee,sans-serif;font-size:36px;color:var(--gold);margin:0 0 16px;
  text-shadow:0 2px 0 #000;letter-spacing:.02em}
.tv-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:16px 0 36px}
.tv-fact{
  background:linear-gradient(180deg,#161018,#0c0a12);border:1.5px solid var(--bronze);
  border-radius:14px;padding:18px 14px;text-align:center;
  box-shadow:inset 0 1px 0 #c4923a55;
}
.tv-fact strong{display:block;font-weight:800;font-size:26px;color:var(--gold);line-height:1.1}
.tv-fact span{display:block;font-size:13px;color:#d8d0c0;margin-top:4px}
.tv-prose{font-size:17px;max-width:70ch}
.tv-prose p{margin:0 0 14px}
.tv-prose h2,.tv-prose h3{font-family:TvBungee,sans-serif;color:var(--gold);margin:28px 0 10px;text-shadow:0 2px 0 #000}
.tv-prose h2{font-size:30px}.tv-prose h3{font-size:22px}
.tv-prose ul,.tv-prose ol{margin:0 0 14px 1.2em}
.tv-prose li{margin:0 0 6px}
.tv-figure{margin:20px 0 28px}
.tv-figure img{width:100%;border-radius:16px;border:2px solid var(--bronze);box-shadow:0 8px 28px #000a}
.tv-figure figcaption{font-size:13px;color:#c8c0b0;margin-top:8px}
.tv-teasers{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:18px 0 28px}
.tv-teaser{background:#10121c;border:1.5px solid var(--bronze);border-radius:12px;overflow:hidden}
.tv-teaser img{width:100%;height:110px;object-fit:cover}
.tv-teaser h3{font-size:14px;font-weight:800;color:var(--gold);padding:8px 10px 12px}

/* ===== INNER PAGES ===== */
.tv-page{max-width:920px;margin:0 auto;padding:28px 20px 40px}
.tv-crumbs{font-size:13px;color:#b8b0a0;margin-bottom:14px}
.tv-crumbs a{color:var(--cyan)}
.tv-page h1{font-family:TvBungee,sans-serif;font-size:46px;line-height:1.05;color:var(--gold);
  text-shadow:0 3px 0 #000,0 0 16px #2eefff55;margin:0 0 8px}
.tv-lead{font-size:18px;color:#e8e4d8;margin:0 0 20px}

/* reviews hub */
.tv-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:16px 0 18px}
.tv-tools input, .tv-tools select{
  background:#10121c;border:1.5px solid var(--bronze);color:var(--ivory);
  border-radius:10px;padding:10px 12px;font:inherit;font-weight:600;
}
.tv-tools input{min-width:240px;flex:1}
.tv-chip{height:38px;padding:0 12px;border-radius:19px;border:1.5px solid var(--bronze);
  background:#10121c;color:var(--gold);font-weight:800;font-size:13px;text-transform:uppercase;cursor:pointer}
.tv-chip.is-on{background:#1a1030;border-color:var(--cyan);color:var(--cyan)}
.tv-slips{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.tv-slip{
  background:linear-gradient(180deg,#16141c,#0c0a10);border:1.5px solid var(--bronze);
  border-radius:12px;padding:14px;display:none;flex-direction:column;gap:8px;
}
.tv-slip.is-on{display:flex}
.tv-mono{
  width:48px;height:48px;border-radius:10px;background:radial-gradient(circle at 30% 30%,#ffe08a,#c4923a);
  color:#070810;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;
}
.tv-slip h3{font-size:16px;color:var(--gold)}
.tv-slip .tv-visit{font-weight:800;font-size:13px;color:var(--cyan)}
.tv-more{margin:18px auto;display:block}

.tv-note{background:#120e18;border-left:4px solid var(--cyan);padding:12px 14px;margin:16px 0;font-size:15px}

/* footer */
.tv-foot{
  background:#05060a;border-top:2px solid var(--bronze);margin-top:40px;
  padding:28px 20px 40px;color:#c8c0b0;font-size:14px;
}
.tv-foot-in{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:24px}
.tv-foot h2{font-size:14px;color:var(--gold);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.tv-foot a{color:#e8e0c0}
.tv-foot ul{list-style:none}
.tv-foot li{margin:0 0 6px}

/* ===== MOBILE ===== */
@media (max-width:1279px){
  .tv-stage{width:100%;height:auto;overflow:visible;padding-bottom:16px}
  .tv-gong{position:relative;left:auto;top:auto;transform:none;display:block;margin:8px auto 0;width:min(72vw,280px);height:min(72vw,280px)}
  .tv-h1{position:relative;left:auto;top:auto;transform:none;width:auto;font-size:clamp(40px,10vw,72px);padding:8px 12px 0;pointer-events:auto}
  .tv-sub{position:relative;left:auto;top:auto;transform:none;display:block;text-align:center;margin:6px 0 10px;white-space:normal}
  .tv-rtp{position:relative;left:auto;top:auto;margin:0 auto 12px}
  .tv-strike{position:relative;left:auto;top:auto;transform:none;display:flex;justify-content:center;margin:8px 0 16px}
  .tv-promo{position:relative;top:auto;left:auto;right:auto;display:inline-block;width:46%;margin:1%}
  .tv-promo img{width:100%;height:120px}
  .tv-canopy-promos{display:flex;justify-content:center;flex-wrap:wrap;padding:0 8px 8px;position:relative;z-index:6}
  .tv-zag{position:relative;top:auto;height:auto;padding:8px 8px 16px}
  .tv-bolt{display:none}
  .tv-tile{position:relative;left:auto;top:auto;display:inline-block;width:47%;margin:1.4% 1.4%;vertical-align:top}
  .tv-tile img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
  .tv-tile h3{font-size:15px}
  .tv-facts{grid-template-columns:1fr 1fr}
  .tv-teasers{grid-template-columns:1fr 1fr}
  .tv-foot-in{grid-template-columns:1fr}
  .tv-word{font-size:32px}
  .tv-brand img{width:48px;height:48px}
  .tv-head-in{height:60px}
}
@media (max-width:860px){
  .tv-burger{display:inline-flex;align-items:center;justify-content:center;margin-left:auto}
  .tv-nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:#0c0a10;border-bottom:2px solid var(--bronze);
    flex-direction:column;align-items:stretch;padding:10px;z-index:30;
  }
  .tv-nav.is-open{display:flex}
  .tv-nav a,.tv-nav .tv-cta{width:100%;justify-content:center}
  .tv-head{position:relative}
  .tv-page h1{font-size:34px}
  .tv-h2{font-size:28px}
  .tv-promo h2{font-size:16px}
}
@media (min-width:1280px){
  body.tv-home .tv-18{/* keep above fold, included in? */
    /* 18 bar is ABOVE the 800 fold — problem?
       The brief is 1280x800 first screen of the LOBBY.
       If 18-bar is present it eats fold space. Many sites put a thin 18 bar.
       I'll put 18-bar inside footer only on home? Or very thin and include in 800.
       Decision: on home, hide the top 18 bar and keep +18 in the header strap as a tiny chip,
       so the fold is exactly header+canopy+tiles = 800.
    */
  }
  body.tv-home .tv-18{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

@media (min-width:1280px){
  .tv-canopy-promos{position:absolute;inset:0;z-index:6;pointer-events:none}
  .tv-canopy-promos .tv-promo{pointer-events:auto}
  .tv-h1{position:relative; /* fill+back stack */ }
  .tv-h1{position:absolute}
  .tv-h1 .tv-back{
    position:absolute;left:0;right:0;top:0;
    color:#070810;-webkit-text-stroke:0;
    text-shadow:-5px -5px 0 #070810,5px -5px 0 #070810,-5px 5px 0 #070810,5px 5px 0 #070810,
      -7px 0 0 #070810,7px 0 0 #070810,0 -7px 0 #070810,0 7px 0 #070810,0 0 18px #2eefff;
  }
  .tv-h1 .tv-fill{
    position:relative;
    background:linear-gradient(180deg,#7af8ff 0%,#2eefff 20%,#ffd24a 66%,#e07a20 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    -webkit-text-stroke:0;
  }
}