/* ============================================================================
   shark-web · HERO
   ----------------------------------------------------------------------------
   Quatro arquetipos de primeira dobra. Sao OPOSTOS entre si de proposito: a
   media morna dos quatro nao funciona, do mesmo jeito que os dois arquetipos
   de card do dash-shark nao se misturam.

     --dado        headline curta + prova medida logo abaixo
     --vsl         video na primeira dobra, subheadline depois dele
     --declaracao  so tipografia e um CTA, muito ar
     --produto     tabs de produto sobre a dobra, duas colunas

   Escolha pelo que a pagina precisa PROVAR, nao pelo que parece mais bonito.
   ========================================================================== */

.sw-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(92vh, 900px);
  padding-block: calc(var(--sw-secao-y) * 0.9);
  overflow: hidden;
  isolation: isolate;
}

.sw-hero--curto { min-height: 0; }

.sw-hero-conteudo {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sw-gap);
}

/* ============================================================================
   TEXTURAS DE FUNDO
   ----------------------------------------------------------------------------
   Duas, ambas sem nenhuma requisicao de rede: sao gradiente e SVG embutido.
   Fundo de hero que depende de imagem baixada aparece DEPOIS do texto e faz a
   dobra piscar de preto para texturado no meio da leitura.
   ========================================================================== */

.sw-hero-fundo {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* TRAMA — a assinatura da marca. Campo de pontos que some para baixo.
   O mask e o que impede a textura de brigar com o conteudo: ela existe onde
   nao ha texto e desaparece onde ha. */
.sw-hero-fundo--trama {
  background-image: radial-gradient(var(--sw-mesh-dot) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.5;
  mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
}

/* CONTORNO — linhas de nivel, como mapa topografico. E a textura que da o ar
   de precisao sem gritar. Uma onda em SVG embutido, repetida. */
.sw-hero-fundo--contorno {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120' viewBox='0 0 240 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.055' stroke-width='1'%3E%3Cpath d='M0 20c40 0 40-16 80-16s40 16 80 16 40-16 80-16'/%3E%3Cpath d='M0 45c40 0 40-16 80-16s40 16 80 16 40-16 80-16'/%3E%3Cpath d='M0 70c40 0 40-16 80-16s40 16 80 16 40-16 80-16'/%3E%3Cpath d='M0 95c40 0 40-16 80-16s40 16 80 16 40-16 80-16'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 240px 120px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000, transparent 78%);
}

/* AURA — a luz do acento nascendo atras do conteudo. Um por dobra.
   Fica no fundo, nao no texto: glow atras da letra e legivel, glow NA letra e
   gloss, e gloss sai. */
.sw-hero-fundo--aura {
  background: radial-gradient(ellipse 60% 50% at 50% 8%,
    color-mix(in srgb, var(--sw-acento) 16%, transparent),
    transparent 70%);
}

/* ============================================================================
   1 · HERO DE DADO
   ----------------------------------------------------------------------------
   Headline curta, subheadline de uma linha, a prova medida logo abaixo e um
   CTA unico. Nada mais cabe: a barra comparativa E o argumento, e qualquer
   elemento a mais rouba dela.
   ========================================================================== */

.sw-hero--dado .sw-hero-conteudo {
  align-items: center;
  text-align: center;
  max-width: 860px;
  margin-inline: auto;
}

.sw-hero--dado .sw-lead { margin-inline: auto; }

.sw-hero-prova {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  margin-top: var(--sw-bloco-y);
}

/* ============================================================================
   2 · HERO COM VIDEO
   ----------------------------------------------------------------------------
   A ordem e deliberada e ja foi testada no ar: titulo, VIDEO, so entao a
   subheadline. Colocar a subheadline antes do video empurra o player para
   baixo da dobra no celular, e o video e a peca que converte.
   ========================================================================== */

.sw-hero--vsl .sw-hero-conteudo {
  align-items: center;
  text-align: center;
  max-width: 980px;
  margin-inline: auto;
}

.sw-hero-video {
  position: relative;
  width: 100%;
  max-width: 860px;
  aspect-ratio: 16 / 9;
  border-radius: var(--ds-r-xl, 24px);
  overflow: hidden;
  /* O QUADRO PRECISA EXISTIR antes de o video existir.

     Estava em --sw-poco (#060707), praticamente indistinguivel do preto puro:
     o player desaparecia no fundo e a dobra parecia ter um buraco. Superficie um
     degrau acima, anel de 1px, luz de quina — passa a existir sem competir. */
  background: var(--sw-superficie-2);
  box-shadow: inset 0 0 0 1px var(--sw-veu-3),
              inset 0 1px 0 var(--sw-veu-2),
              var(--ds-e4, 0 40px 110px -50px rgba(0, 0, 0, 0.95)),
              0 50px 140px -70px var(--sw-acento-glow);
}

.sw-hero-video img,
.sw-hero-video video,
.sw-hero-video iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}

.sw-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 74px;
  height: 74px;
  border: 0;
  border-radius: 50%;
  background: var(--sw-btn-fundo);
  color: var(--sw-btn-tinta);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.8);
  transition: transform var(--sw-dur-1) var(--sw-ease);
}

.sw-play:hover { transform: scale(1.06); }

/* O triangulo e desenhado com borda. Um glifo "▶" muda de forma entre
   plataformas e e lido em voz alta pelo leitor de tela. */
.sw-play::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 5px;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 18px solid currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .sw-play:hover { transform: none; }
}

/* Selo de avaliacao abaixo do video. */
.sw-selo-nota {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--ds-r-pill, 999px);
  background: var(--sw-veu-1);
  font-size: var(--sw-fs-xs);
  color: var(--sw-tinta-2);
}

/* ============================================================================
   3 · HERO DE DECLARACAO
   ----------------------------------------------------------------------------
   So tipografia e um CTA. E o arquetipo mais dificil de acertar porque nao ha
   onde se esconder: se a frase nao for boa, a dobra fica vazia. Nao use este
   quando a promessa ainda esta em negociacao.
   ========================================================================== */

.sw-hero--declaracao {
  min-height: min(88vh, 820px);
}

.sw-hero--declaracao .sw-hero-conteudo {
  max-width: var(--sw-medida);
  gap: var(--sw-gap-lg);
}

/* 28ch, nao 20: em 20 a frase virava coluna alta e estreita, com linhas de
   duas palavras. Declaracao quer LARGURA — a frase e lida de uma vez, nao
   descida. */
.sw-hero--declaracao .sw-d1 { max-width: 28ch; }

/* ============================================================================
   4 · HERO DE PRODUTO
   ----------------------------------------------------------------------------
   Tabs sobre a dobra, duas colunas embaixo. Serve quando a empresa vende mais
   de uma coisa e a primeira dobra precisa dizer as duas sem virar lista.
   ========================================================================== */

.sw-hero--produto .sw-hero-conteudo { gap: var(--sw-gap-lg); }

.sw-hero-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--sw-gap-lg);
  align-items: center;
  width: 100%;
}

@media (max-width: 900px) {
  .sw-hero-duo { grid-template-columns: minmax(0, 1fr); }
}

/* Painel de demonstracao ao lado do texto. */
.sw-hero-painel {
  border-radius: var(--ds-r-xl, 24px);
  background: var(--sw-superficie);
  box-shadow: var(--ds-e3, 0 24px 70px -30px rgba(0, 0, 0, 0.9)),
              inset 0 1px 0 var(--sw-veu-1);
  padding: var(--sw-gap);
  overflow: hidden;
}

/* ============================================================================
   DICA DE ROLAGEM
   ----------------------------------------------------------------------------
   Some assim que a pagina anda. Uma dica que continua piscando depois que o
   visitante ja rolou vira ruido permanente.
   ========================================================================== */

.sw-scroll-dica {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--ds-mono, ui-monospace, monospace);
  font-size: var(--sw-fs-micro);
  letter-spacing: var(--sw-track-kicker);
  text-transform: uppercase;
  color: var(--sw-tinta-4);
  transition: opacity var(--sw-dur-2) var(--sw-ease);
}

.sw-scroll-dica::after {
  content: "";
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--sw-tinta-4), transparent);
}

.sw-scroll-dica.is-oculta { opacity: 0; }

/* ============================================================================
   HERO · COPY (com dither)
   ----------------------------------------------------------------------------
   O arquetipo da pagina /copy trazido para o acervo: a promessa em duas linhas,
   a prova numerica logo abaixo dela, e um retrato tramado ocupando a metade
   direita da dobra.

   A DIFERENCA PARA O --dado NAO E O LAYOUT, E A ORDEM DA LEITURA. No --dado o
   numero vem primeiro e o texto explica; aqui a FRASE vem primeiro e o numero
   confirma. Um serve para quem esta comparando; este, para quem ainda nao sabe
   o que e.

   O RETRATO E TRAMADO DE VERDADE, e nao "escurecido". A trama e o que impede a
   foto de parecer banco de imagem colado numa landing: ela impoe a mesma
   materia do resto da marca sobre qualquer foto que chegue, boa ou ruim.

   Trama sobre foto vai com `mix-blend-mode: overlay`, e nao com opacidade: o
   overlay mantem os pontos visiveis no meio-tom e os apaga no preto, que e
   exatamente como um dither se comporta. Com opacidade a trama apareceria
   igual nas sombras e a foto ficaria suja.
   ========================================================================== */

.sw-hero--copy .sw-hero-conteudo {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: var(--sw-gap-lg);
  text-align: left;
}

.sw-hero--copy .sw-lead { margin-inline: 0; }

/* O paragrafo precisa do respiro explicito: o <h3> do acervo nasce com margem
   zero (para a escala ser classe e nao tag), entao sem esta linha o texto
   encosta no descendente do titulo. */
.sw-hero--copy .sw-d2 + .sw-texto,
.sw-hero--copy .sw-d1 + .sw-texto { margin-top: 16px; }

/* A coluna da foto sangra ate a borda da dobra. Foto emoldurada no hero le como
   ilustracao de artigo; sangrando, ela e o chao daquele lado. */
.sw-hero-retrato {
  position: relative;
  align-self: stretch;
  min-height: clamp(320px, 46vw, 560px);
  margin-block: calc(var(--sw-secao-y) * -0.5);
  margin-right: calc(var(--sw-gutter) * -1);
  border-radius: var(--ds-r-2xl, 32px) 0 0 var(--ds-r-2xl, 32px);
  overflow: hidden;
  isolation: isolate;
}

.sw-hero-retrato img,
.sw-hero-retrato video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.35) contrast(1.08);
}

/* A trama, por cima. */
.sw-hero-retrato::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(var(--sw-mesh-dot, rgba(254, 254, 254, 0.18)) 0.85px, transparent 0.85px),
    radial-gradient(color-mix(in srgb, var(--sw-mesh-dot, rgba(254, 254, 254, 0.18)) 45%, transparent) 0.85px, transparent 0.85px);
  background-size: 5px 5px;
  background-position: 0 0, 2.5px 2.5px;
  mix-blend-mode: overlay;
  opacity: 0.72;
}

/* O scrim na direcao do texto: a foto encosta na coluna da esquerda e sem ele a
   ultima linha do paragrafo cai sobre a imagem. */
.sw-hero-retrato::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(100deg,
    var(--sw-fundo) 0%,
    color-mix(in srgb, var(--sw-fundo) 55%, transparent) 22%,
    transparent 52%);
}

/* A fileira de prova, colada embaixo da promessa. Tres numeros, nao seis: a
   partir do quarto o olho para de ler e passa a contar. */
/* GRADE DE TRES, e nao flex com quebra.

   Com `flex-wrap` os tres numeros cabiam em 1440 e quebravam 2+1 numa coluna
   mais estreita — e 2+1 le como erro, nao como responsivo. Numa grade de tres
   colunas iguais eles encolhem juntos e so viram duas linhas quando REALMENTE
   nao cabem, ai 2+1 de propria escolha. */
.sw-hero-prova-linha {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sw-gap-sm);
  margin-top: var(--sw-gap);
  padding-top: var(--sw-gap-sm);
  box-shadow: inset 0 1px 0 var(--sw-linha);
}

.sw-hero-prova-linha > div { display: grid; gap: 2px; }

.sw-hero-prova-linha b {
  font-family: var(--ds-display, "Space Grotesk", system-ui, sans-serif);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--sw-tinta-1);
}

.sw-hero-prova-linha span {
  font-family: var(--ds-mono, ui-monospace, monospace);
  font-size: var(--sw-fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sw-tinta-3);
}

@media (max-width: 520px) {
  .sw-hero-prova-linha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .sw-hero--copy .sw-hero-conteudo { grid-template-columns: minmax(0, 1fr); }
  .sw-hero-retrato {
    order: -1;
    min-height: 260px;
    margin: 0 calc(var(--sw-gutter) * -1) var(--sw-gap);
    border-radius: 0;
  }
  /* Empilhado, o scrim muda de direcao: a foto passa a ficar ACIMA do texto. */
  .sw-hero-retrato::after {
    background: linear-gradient(to bottom,
      transparent 40%,
      color-mix(in srgb, var(--sw-fundo) 60%, transparent) 76%,
      var(--sw-fundo) 100%);
  }
}

/* ============================================================================
   HERO · VSL TRAMADA
   ----------------------------------------------------------------------------
   A variante de video da primeira dobra, com a trama entrando na MOLDURA e nao
   no video.

   POR QUE NAO TRAMAR O VIDEO: a trama teria que ficar por cima do iframe, e
   qualquer coisa por cima do iframe rouba o clique — o mesmo problema que o
   escudo do `.sw-player` resolve de proposito. Alem disso, dither sobre video em
   movimento cintila: os pontos ficam parados enquanto a imagem anda, e o olho
   le como sujeira de tela.

   A trama entra ENTAO na aura em volta do quadro. O efeito lido e o mesmo — a
   dobra inteira tem a materia da marca — e o video continua limpo e clicavel.
   ========================================================================== */

.sw-hero--vsl-trama .sw-hero-conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sw-gap);
  text-align: center;
}

.sw-hero-quadro-trama {
  position: relative;
  width: 100%;
  max-width: 940px;
  margin-inline: auto;
  padding: clamp(18px, 3vw, 40px);
  border-radius: var(--ds-r-2xl, 32px);
  isolation: isolate;
}

/* A moldura tramada. Ela MORRE nas bordas, com mascara radial: trama de
   densidade constante em volta do video vira um quadro de papel de parede. */
.sw-hero-quadro-trama::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    radial-gradient(var(--sw-mesh-dot, rgba(254, 254, 254, 0.18)) 1px, transparent 1px),
    radial-gradient(color-mix(in srgb, var(--sw-mesh-dot, rgba(254, 254, 254, 0.18)) 45%, transparent) 1px, transparent 1px);
  background-size: 7px 7px;
  background-position: 0 0, 3.5px 3.5px;
  opacity: 0.5;
  mask-image: radial-gradient(ellipse at center, transparent 46%, #000 92%);
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 46%, #000 92%);
}

/* A luz por baixo do quadro, com a cor da dobra. Nasce DENTRO da cena e vaza —
   a assinatura da casa. */
.sw-hero-quadro-trama::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -18%;
  width: 86%;
  aspect-ratio: 3 / 1;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--sw-acento) 24%, transparent), transparent 66%);
  z-index: -1;
  pointer-events: none;
}

.sw-hero-quadro-trama > * { position: relative; z-index: 1; }

/* A etiqueta acima do quadro: duracao, ou o que a pessoa vai ver. Uma linha,
   mono, e ela existe porque "assista ao video" nao diz nada — quanto tempo e o
   que muda a decisao de apertar play. */
.sw-hero-vsl-nota {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ds-mono, ui-monospace, monospace);
  font-size: var(--sw-fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sw-tinta-3);
}

.sw-hero-vsl-nota::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
}

@media (max-width: 640px) {
  .sw-hero-quadro-trama { padding: 12px; }
}