/* Home: estilos de cortes com foco em live (#estilos). Usa os tokens e o celular (.phone/.screen) do clipador.css.
   Esportes, Notícias e Música são cenas desenhadas em CSS (marcadas "Ilustração"); Podcast e Lifestyle usam vídeos do site.
   As telas de celular ficam escuras nos dois temas, como no resto da home. Movimento só sem "reduzir movimento". */
.hs-panel { --tone: var(--t1); }
#estilo-esportes { --tone: #22c55e; }
#estilo-noticias { --tone: #ff3b5c; }
#estilo-musica { --tone: var(--t1); }
#estilo-podcast { --tone: var(--t4); }
#estilo-lifestyle { --tone: var(--t3); }

/* abas: só com JS; sem JS os cinco estilos aparecem empilhados */
.hs-tabs { position: relative; display: none; gap: 8px; margin: -8px 0 24px; padding: 6px 4px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.hs-tabs::-webkit-scrollbar { display: none; }
.is-ready > .hs-tabs { display: flex; }
.hs-tab { display: inline-flex; flex: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); background: var(--surface); font-size: 14.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
.hs-tab:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.hs-tab[aria-selected="true"] { color: #fff; background: var(--primary); border-color: var(--primary); }

.hs-dot { position: relative; display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #ff3b5c; }
.hs-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; opacity: 0; }
.hs-tab[aria-selected="true"] .hs-dot { background: #fff; }

/* painel: celular à esquerda, o que costuma virar corte à direita */
.hs-panels { display: grid; gap: 40px; }
.hs-panel { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 56px; align-items: start; padding: 32px; border: 1px solid color-mix(in srgb, var(--tone) 28%, var(--line)); border-radius: 28px; background: radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--tone) 12%, transparent), transparent 62%), var(--surface); }
.hs-panel[hidden] { display: none; }
.hs-media { display: grid; gap: 14px; justify-items: center; min-width: 0; }
.hs-media .proof { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.hs-media .proof.is-illus { color: var(--ink); border-color: color-mix(in srgb, var(--tone) 60%, transparent); background: color-mix(in srgb, var(--tone) 14%, transparent); }
.hs-media .fine { max-width: 290px; text-align: center; }
.hs-phone { max-width: 290px; }

.hs-copy { display: grid; gap: 24px; align-content: start; min-width: 0; max-width: 640px; padding-top: 38px; }
.hs-copy h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: clamp(26px, 2.6vw, 32px); line-height: 1.1; font-weight: 800; }
.hs-live-tag { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border: 1px solid color-mix(in srgb, #ff3b5c 50%, transparent); border-radius: 999px; color: var(--ink); background: color-mix(in srgb, #ff3b5c 12%, transparent); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.hs-lead { color: var(--muted); font-size: 16.5px; max-width: 56ch; }
.hs-block { display: grid; gap: 10px; }
.hs-block h4 { color: var(--soft); font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.hs-list, .hs-formats, .hs-titles { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; }
.hs-list li { position: relative; padding-left: 22px; font-size: 15px; }
.hs-list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 10px; height: 2px; border-radius: 2px; background: var(--tone); }
.hs-formats li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 10px; color: var(--muted); font-size: 14.5px; }
.hs-fmt { display: inline-flex; justify-self: start; align-items: center; padding: 3px 10px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink); background: var(--surface-2); font-size: 13px; font-weight: 700; }
.hs-fmt.is-live { border-color: color-mix(in srgb, #ff3b5c 50%, transparent); background: color-mix(in srgb, #ff3b5c 12%, transparent); }
.hs-fmt.is-live::before { content: ""; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #ff3b5c; }
.hs-fmt.is-plus { border-color: color-mix(in srgb, var(--primary) 50%, transparent); background: var(--primary-soft); }
.hs-titles { counter-reset: hs; }
.hs-titles li { counter-increment: hs; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); font-size: 15px; font-weight: 650; line-height: 1.35; }
.hs-titles li::before { content: counter(hs, decimal-leading-zero); color: var(--soft); font: 500 12px var(--mono); }
.hs-note { max-width: 860px; margin-top: 24px; }

/* elementos sobre a tela do celular */
.hs-onair { position: absolute; z-index: 3; top: 40px; left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 7px; border-radius: 6px; color: #fff; background: #ff1f4b; font: 800 10.5px/1.3 var(--body); letter-spacing: .05em; box-shadow: 0 4px 12px -4px rgb(255 31 75 / 70%); }
.hs-onair .hs-dot { width: 7px; height: 7px; background: #fff; }
.hs-phone .rail .avatar.is-blank { background: linear-gradient(135deg, var(--tone), #1c1c21); }
.hs-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hs-scene i, .hs-scene span { position: absolute; display: block; }

/* esportes: campo visto de cima, placar no canto */
.hs-sport { background: repeating-linear-gradient(180deg, #1d7536 0 10%, #218a3f 10% 20%); }
.hs-pitch { inset: 14% 9% 7%; border: 2px solid rgb(255 255 255 / 60%); border-radius: 3px; }
.hs-pitch::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: rgb(255 255 255 / 60%); }
.hs-circle { left: 50%; top: calc(14% + (100% - 21%) / 2); width: 34%; aspect-ratio: 1; border: 2px solid rgb(255 255 255 / 60%); border-radius: 50%; translate: -50% -50%; }
.hs-box { left: 27%; right: 27%; bottom: 7%; height: 13%; border: 2px solid rgb(255 255 255 / 60%); border-bottom: 0; }
.hs-box::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 0; height: 40%; border: 2px solid rgb(255 255 255 / 60%); border-bottom: 0; }
.hs-pl { width: 13px; height: 13px; border-radius: 50%; background: #f4f4f5; box-shadow: 0 0 0 2px rgb(0 0 0 / 35%), 0 3px 6px rgb(0 0 0 / 40%); }
.hs-pl.q1, .hs-pl.q2 { background: #2563eb; }
.hs-pl.p1 { left: 30%; top: 58%; } .hs-pl.p2 { left: 62%; top: 66%; } .hs-pl.p3 { left: 46%; top: 74%; }
.hs-pl.q1 { left: 40%; top: 82%; } .hs-pl.q2 { left: 58%; top: 80%; }
.hs-ball { left: 50%; top: 71%; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px #111, 0 0 12px 2px rgb(255 255 255 / 70%); }
.hs-score { top: 68px; left: 12px; display: flex !important; align-items: stretch; overflow: hidden; border-radius: 6px; color: #fff; background: rgb(10 10 12 / 88%); font: 700 10.5px/1 var(--mono); box-shadow: 0 6px 14px -6px rgb(0 0 0 / 60%); }
.hs-score > * { position: static !important; display: grid !important; place-items: center; padding: 5px 6px; }
.hs-score span { min-width: 18px; background: #fff; color: #0a0a0b; }
.hs-score span + span { border-left: 1px solid #ccc; }
.hs-score em { font-style: normal; color: #052e14; background: #4ade80; }

/* notícias: telejornal com tarja de ao vivo, manchete e letreiro */
.hs-news { background: radial-gradient(80% 50% at 50% 30%, #1e4a8f 0%, #0b1e3f 60%, #061024 100%); }
.hs-wall { left: 0; right: 0; top: 0; height: 52%; background: linear-gradient(90deg, rgb(97 216 243 / 18%) 1px, transparent 1px) 0 0 / 25% 100%, linear-gradient(180deg, rgb(97 216 243 / 14%) 1px, transparent 1px) 0 0 / 100% 33.3%, radial-gradient(60% 70% at 50% 60%, rgb(97 216 243 / 28%), transparent 70%); }
.hs-anchor { left: 50%; top: 37%; width: 52%; height: 32%; translate: -50% 0; }
.hs-anchor::before { content: ""; position: absolute; left: 50%; top: 0; width: 36%; aspect-ratio: 1 / 1.15; translate: -50% 0; border-radius: 48% 48% 44% 44%; background: radial-gradient(70% 40% at 50% 0%, #3a2418 0 60%, transparent 62%), #c98f6a; }
.hs-anchor::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 58%; border-radius: 46% 46% 0 0 / 58% 58% 0 0; background: linear-gradient(90deg, transparent 43%, #e8eef8 43% 57%, transparent 57%) center top / 100% 60% no-repeat, #1b2a4a; }
.hs-desk { left: -4%; right: -4%; top: 66%; height: 12%; border-top: 2px solid rgb(97 216 243 / 60%); background: linear-gradient(180deg, #23457f, #0f2147); }
.hs-lower { left: 8px; right: 54px; top: 68%; display: grid !important; overflow: hidden; border-radius: 4px; box-shadow: 0 8px 18px -8px rgb(0 0 0 / 70%); }
.hs-lower > * { position: static !important; }
.hs-lower b { display: inline-flex; align-items: center; gap: 5px; justify-self: start; padding: 3px 7px; color: #fff; background: #e11d48; font: 800 9.5px/1.2 var(--body); letter-spacing: .06em; }
.hs-lower b .hs-dot { position: relative; width: 6px; height: 6px; background: #fff; }
.hs-lower span { padding: 5px 8px; color: #0b1e3f; background: #fff; font: 800 11px/1.15 var(--body); text-transform: uppercase; }
.hs-ticker { left: 0; right: 0; top: 80.5%; height: 18px; overflow: hidden; background: rgb(0 0 0 / 72%); }
.hs-ticker span { position: static !important; display: inline-block !important; padding-left: 8px; color: #e9eef8; font: 600 9.5px/18px var(--mono); white-space: nowrap; }
.is-news .caption { top: 18%; }

/* música: palco, feixes de luz, painel de equalizador e público */
.hs-music { background: radial-gradient(90% 45% at 50% 0%, #6b21a8 0%, transparent 70%), radial-gradient(70% 40% at 50% 62%, rgb(240 72 122 / 35%), transparent 70%), #0b0614; }
.hs-beam { top: -6%; width: 34%; height: 78%; transform-origin: 50% 0; opacity: .55; mix-blend-mode: screen; clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); }
.hs-beam.b1 { left: 4%; background: linear-gradient(180deg, #f0487a, transparent 90%); rotate: -14deg; }
.hs-beam.b2 { left: 33%; background: linear-gradient(180deg, #61d8f3, transparent 90%); }
.hs-beam.b3 { right: 4%; background: linear-gradient(180deg, #f5a524, transparent 90%); rotate: 14deg; }
.hs-eq { left: 12%; right: 12%; top: 34%; height: 17%; display: flex !important; align-items: flex-end; gap: 4%; }
.hs-eq i { position: static !important; flex: 1; height: 100%; border-radius: 2px; background: linear-gradient(0deg, #61d8f3, #7a5af0 55%, #f0487a); transform-origin: 50% 100%; scale: 1 .55; opacity: .85; }
.hs-eq i:nth-child(3n) { scale: 1 .8; } .hs-eq i:nth-child(4n+1) { scale: 1 .35; }
.hs-stage { left: 0; right: 0; top: 58%; height: 7%; background: linear-gradient(180deg, #2a1838, #120a1a); box-shadow: 0 -2px 18px rgb(240 72 122 / 45%); }
.hs-singer { z-index: 1; left: 50%; top: 37%; width: 22%; height: 22%; translate: -50% 0; }
.hs-singer::before { content: ""; position: absolute; left: 50%; top: 0; width: 38%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: #050308; box-shadow: 0 0 0 2px rgb(240 72 122 / 35%); }
.hs-singer::after { content: ""; position: absolute; left: 12%; right: 12%; top: 34%; bottom: 0; border-radius: 45% 45% 10% 10% / 35% 35% 10% 10%; background: #050308; box-shadow: 0 -2px 0 rgb(240 72 122 / 35%); }
.hs-mic { z-index: 1; left: calc(50% + 15%); top: 44%; width: 2px; height: 15%; background: #050308; rotate: 8deg; }
.hs-mic::before { content: ""; position: absolute; left: -3px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #050308; }
.hs-crowd { left: -4%; right: -4%; bottom: 0; height: 36%; background: radial-gradient(circle at 50% 38%, #050308 0 30%, transparent 32%) 0 0 / 15% 34% repeat-x, radial-gradient(circle at 50% 38%, #050308 0 32%, transparent 34%) 7% 22% / 15% 34% repeat-x, linear-gradient(180deg, transparent 0 30%, #050308 46%); }
.hs-crowd::before { content: ""; position: absolute; left: 18%; top: -9%; width: 3px; height: 24%; border-radius: 3px; background: #050308; rotate: -12deg; box-shadow: 120px 6px 0 #050308, 168px -4px 0 #050308; }

/* podcast: tela dividida com a cena de teste, uma pessoa em cada metade */
.hs-split { position: absolute; inset: 0; z-index: 0; }
.hs-half { position: absolute; left: 0; right: 0; overflow: hidden; }
.hs-half.h1 { top: 0; bottom: 50%; border-bottom: 1px solid #000; }
.hs-half.h2 { top: 50%; bottom: 0; }
.hs-phone .hs-half video { inset: auto; top: -16%; left: -26%; width: 300%; max-width: none; height: auto; object-fit: fill; }
.hs-phone .hs-half.h2 video { top: -4%; left: -192%; }
.is-podcast .caption { top: 50%; transform: translateY(-50%); }

/* lifestyle: produto fixado na live */
.hs-product { position: absolute; z-index: 3; top: 68px; left: 12px; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 70px); padding: 5px 10px 5px 5px; border-radius: 10px; color: #111; background: rgb(255 255 255 / 94%); box-shadow: 0 8px 18px -8px rgb(0 0 0 / 60%); }
.hs-product > span { display: grid; gap: 1px; min-width: 0; line-height: 1.15; }
.hs-product small { color: #6b6b75; font-size: 9.5px; font-weight: 600; }
.hs-product b { overflow: hidden; font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; }
.hs-bag { position: relative; flex: none; width: 26px; height: 26px; border-radius: 7px; background: #ff3b5c; }
.hs-bag::before { content: ""; position: absolute; left: 7px; right: 7px; top: 10px; bottom: 6px; border-radius: 2px; background: #fff; }
.hs-bag::after { content: ""; position: absolute; left: 10px; right: 10px; top: 6px; height: 7px; border: 2px solid #fff; border-bottom: 0; border-radius: 5px 5px 0 0; }

@media (prefers-reduced-motion: no-preference) {
  .hs-dot::after { animation: hs-pulse 1.6s ease-out infinite; }
  .hs-onair { animation: hs-glow 1.6s ease-in-out infinite; }
  .hs-ball { animation: hs-ball 3.2s var(--ease-out) infinite; }
  .hs-pl.p2 { animation: hs-run 3.2s ease-in-out infinite; }
  .hs-ticker span { animation: hs-ticker 14s linear infinite; }
  .hs-beam { animation: hs-sweep 4.5s ease-in-out infinite alternate; }
  .hs-beam.b1 { --r0: -22deg; --r1: -6deg; } .hs-beam.b2 { --r0: -8deg; --r1: 8deg; animation-delay: -1.5s; } .hs-beam.b3 { --r0: 6deg; --r1: 22deg; animation-delay: -3s; }
  .hs-eq i { animation: hs-eq .9s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -1); }
}
@keyframes hs-pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(2.8); opacity: 0; } }
@keyframes hs-glow { 50% { box-shadow: 0 4px 18px -2px rgb(255 31 75 / 85%); } }
@keyframes hs-ball { 0%, 8% { translate: 0 0; } 55%, 100% { translate: 34px 54px; } }
@keyframes hs-run { 0%, 10% { translate: 0 0; } 60%, 100% { translate: -6px 30px; } }
@keyframes hs-ticker { to { translate: -50% 0; } }
@keyframes hs-sweep { from { rotate: var(--r0); } to { rotate: var(--r1); } }
@keyframes hs-eq { from { scale: 1 .25; } to { scale: 1 1; } }

@media (max-width: 960px) {
  .hs-panel { grid-template-columns: 1fr; gap: 28px; padding: 24px; }
  .hs-copy { max-width: none; padding-top: 0; }
}
@media (max-width: 760px) {
  .hs-tabs { margin-right: -16px; padding-right: 16px; }
  .hs-tab { min-height: 42px; padding: 0 14px; font-size: 14px; }
  .hs-panel { padding: 18px 16px 22px; border-radius: 22px; }
  .hs-phone { max-width: 260px; }
  .hs-copy { gap: 20px; }
  .hs-list li, .hs-titles li { font-size: 14.5px; }
}

/* Cenas reais geradas no Google Flow: mídia cobre a tela e os sobrepostos (placar, tarja, letreiro) ficam por cima */
.hs-scene.hs-real { background: #000; }
.hs-scene.hs-real > img, .hs-scene.hs-real > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hs-scene.hs-real > :not(img):not(video) { z-index: 1; }
.hs-scene.hs-real::before, .hs-scene.hs-real::after { display: none; }

/* Esportes e Notícias são imagens: movimento de câmera lento (zoom e deslize), chuva sob os refletores e brilho do estúdio */
@media (prefers-reduced-motion: no-preference) {
  .hs-sport.hs-real > img { animation: hs-cam-sport 9s ease-in-out infinite alternate; transform-origin: 50% 62%; }
  .hs-news.hs-real > img { animation: hs-cam-news 11s ease-in-out infinite alternate; transform-origin: 50% 45%; }
  .hs-sport.hs-real::after { display: block; content: ""; position: absolute; left: 0; right: 0; top: -170px; height: calc(100% + 170px); z-index: 1; pointer-events: none; opacity: .55;
    background-image: repeating-linear-gradient(104deg, transparent 0 14px, rgb(255 255 255 / 22%) 14px 15px, transparent 15px 31px),
                      repeating-linear-gradient(98deg, transparent 0 22px, rgb(255 255 255 / 14%) 22px 23px, transparent 23px 47px);
    background-size: 100% 170px, 100% 170px; animation: hs-rain .6s linear infinite; mix-blend-mode: screen; will-change: transform; }
  .hs-news.hs-real::after { display: block; content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(40% 25% at 30% 30%, rgb(120 180 255 / 18%), transparent 70%); animation: hs-glow 4s ease-in-out infinite alternate; }
}
@keyframes hs-cam-sport { from { transform: scale(1.04) translateY(0); } to { transform: scale(1.16) translate(-2%, -2%); } }
@keyframes hs-cam-news { from { transform: scale(1.02); } to { transform: scale(1.12) translateX(1.5%); } }
@keyframes hs-rain { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-10px, 170px, 0); } }
@keyframes hs-glow { from { opacity: .3; } to { opacity: 1; } }

/* Home: sem linha entre as seções e com menos espaço entre um bloco e outro (pedido do dono, 2026-11-09) */
.home .section { padding-block: 64px; border-top: 0; }
@media (max-width: 760px) { .home .section { padding-block: 44px; } }