/* Seções do sistema central-stream: layout e posição das artes. Só tokens.
   Ordem da home: hero, gêneros, app, assinatura, aparelhos, passos, guias, FAQ, CTA final. */

/* 01. Hero com parede de pôsteres */
.ds-hero { position: relative; display: flex; align-items: center; min-height: max(680px, 100svh); padding-block: calc(var(--ds-component-header-altura) + var(--ds-space-48)) var(--ds-space-96); overflow: hidden; isolation: isolate; }
.ds-hero__parede { position: absolute; inset: -18% -10% -18% 28%; z-index: -2; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1vw, 18px); transform: rotate(-9deg); }
.ds-hero__coluna { display: flex; flex-direction: column; gap: clamp(10px, 1vw, 18px); animation: ds-sobe 70s linear infinite; }
.ds-hero__coluna:nth-child(even) { animation-name: ds-desce; animation-duration: 80s; }
.ds-hero__coluna img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--ds-radius-poster); }
@keyframes ds-sobe { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes ds-desce { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.ds-hero__veu { position: absolute; inset: 0; z-index: -1; background: var(--ds-gradient-hero-veu); }
.ds-hero__veu::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: var(--ds-gradient-base); }
.ds-hero__conteudo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ds-space-24); max-width: 760px; }
.ds-hero__titulo { max-width: 13ch; }
.ds-hero__lead { max-width: 580px; }
.ds-hero__provas { display: flex; flex-wrap: wrap; gap: var(--ds-space-8); margin-top: var(--ds-space-8); }

/* 02. Gêneros (trilho de pôsteres sangrando a tela) */
.ds-generos { position: relative; margin-top: calc(var(--ds-space-80) * -1); padding-bottom: var(--ds-space-48); z-index: 2; }
.ds-generos .ds-trilho__faixa { padding-inline: max(var(--ds-container-gutter), calc((100vw - var(--ds-container-max)) / 2)); scroll-padding-inline: max(var(--ds-container-gutter), calc((100vw - var(--ds-container-max)) / 2)); }

/* 03. App próprio (vitrine com vídeo + abas) */
.ds-app { position: relative; overflow: hidden; }
.ds-app::before { content: ""; position: absolute; inset: 0 0 auto; height: 900px; background: var(--ds-gradient-aura); pointer-events: none; }
.ds-app__vitrine { position: relative; max-width: 1180px; margin: 0 auto var(--ds-space-bloco); }
.ds-app__vitrine .ds-tv__tela video { opacity: .9; }
.ds-app__play { position: absolute; left: 0; right: 0; bottom: clamp(16px, 4vw, 40px); z-index: 2; width: max-content; margin-inline: auto; }
.ds-app__vitrine .ds-tv__tela::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 5, 10, 0) 50%, rgba(5, 5, 10, .75) 100%); pointer-events: none; }
.ds-app__recursos { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.ds-app__telas { position: relative; }
.ds-app__telas .ds-tv__tela { background: #07070F; }
.ds-app__destaques { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ds-space-8); margin-top: var(--ds-space-bloco); }

/* 04. Assinatura no celular */
.ds-assinatura { position: relative; overflow: hidden; }
.ds-assinatura::before { content: ""; position: absolute; inset: 0; background: var(--ds-gradient-aura-lado); pointer-events: none; }
.ds-assinatura__grade { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.ds-assinatura__texto { display: flex; flex-direction: column; gap: var(--ds-space-24); }
.ds-assinatura__celulares { position: relative; display: flex; justify-content: center; align-items: center; min-height: 640px; }
.ds-assinatura__celulares .ds-celular:nth-child(1) { position: relative; z-index: 2; transform: rotate(-4deg) translateX(-18%); }
.ds-assinatura__celulares .ds-celular:nth-child(2) { position: absolute; z-index: 1; transform: rotate(6deg) translate(48%, 6%) scale(.9); opacity: .92; }
.ds-assinatura__nota { color: var(--ds-color-texto-mudo); }

/* 05. Aparelhos */
.ds-aparelhos__grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ds-space-16); }

/* 06. Como começar (passos com número gigante) */
.ds-passos__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-space-24); }

/* 07. Guias do blog: a grade .ds-guias__grade fica em components.css (também usada no blog) */

/* 08. FAQ */
.ds-duvidas .ds-faq { margin-top: 0; }

/* 09. CTA final com pôsteres */
.ds-cta { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(96px, 10vw, 180px); text-align: center; }
.ds-cta__parede { position: absolute; inset: -30% -5%; z-index: -2; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px; transform: rotate(-6deg); opacity: .45; }
.ds-cta__parede img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--ds-radius-poster); }
.ds-cta__parede img:nth-child(odd) { transform: translateY(18%); }
.ds-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 50% 50%, rgba(5, 5, 10, .78) 0%, rgba(5, 5, 10, .96) 70%), linear-gradient(180deg, #05050A 0%, rgba(5, 5, 10, 0) 25%, rgba(5, 5, 10, 0) 75%, #05050A 100%); }
.ds-cta__conteudo { display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-24); max-width: 820px; margin-inline: auto; }

@media (max-width: 1280px) {
  .ds-hero__parede { inset: -18% -20% -18% 30%; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .ds-app__recursos { grid-template-columns: 1fr; }
  .ds-app__telas { order: -1; }
  .ds-assinatura__grade { grid-template-columns: 1fr; }
  .ds-assinatura__celulares { min-height: 600px; }
  .ds-aparelhos__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-passos__grade { grid-template-columns: 1fr; max-width: 640px; }
}
@media (max-width: 768px) {
  .ds-hero { align-items: flex-end; min-height: max(720px, 100svh); padding-bottom: var(--ds-space-80); }
  .ds-hero__parede { inset: -10% -40% 30% -40%; grid-template-columns: repeat(4, minmax(0, 1fr)); transform: rotate(-12deg); }
  .ds-hero__veu { background: var(--ds-gradient-hero-veu-mobile); }
  .ds-generos { margin-top: calc(var(--ds-space-48) * -1); }
  .ds-app__play { position: relative; bottom: auto; display: flex; max-width: 100%; margin-top: var(--ds-space-20); }
  .ds-cta__parede { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ds-assinatura__celulares { min-height: 500px; }
  .ds-assinatura__celulares .ds-celular:nth-child(1) { transform: rotate(-4deg) translateX(-16%); }
  .ds-assinatura__celulares .ds-celular:nth-child(2) { transform: rotate(6deg) translate(40%, 6%) scale(.88); }
  .ds-aparelhos__grade { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ds-hero__coluna { animation: none !important; }
}