/* ==========================================================================
   Widget: DNA Ellos (bloco 8)
   Depende de ellos-ds.css, base.css e ellos-helix.css.

   O DS traz as peças — fitas, hélice, degraus, chuva. Aqui mora só a
   composição do bloco: quem pinta o fundo, quem fica por cima de quem, e
   os ajustes que o widget precisa e o componente isolado não.
   ========================================================================== */

/* Trava do eixo horizontal.

   Diferente dos cartões do hero, este bloco não tem nada que precise passar
   da borda lateral: fitas, valores e hélice vivem todos dentro da largura do
   site. `clip` e não `hidden` de propósito — `hidden` criaria um contêiner
   de rolagem, o que quebraria `position: sticky` de qualquer ancestral e
   mudaria o comportamento do canvas.

   O eixo vertical continua `visible`, senão a sangria da chuva de partículas
   seria cortada. A combinação clip/visible é válida justamente para isto. */
.ew-dna {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
}

/* O fundo é do bloco, não das peças. Fitas e hélice ficam transparentes
   para a chuva passar por trás delas — se cada uma pintasse o próprio
   gradiente, as partículas sumiriam entre uma e outra. */
.ew-dna .ec-strands,
.ew-dna .ec-helix { background: transparent; }

/* Conteúdo acima da chuva (z-index 3 no DS). */
.ew-dna__cabecalho,
.ew-dna .ec-strands,
.ew-dna .ec-helix {
  position: relative;
  z-index: 4;
}

/* Sangria vertical da chuva. Zero por padrão: qualquer valor só aparece se
   o bloco seguinte não pintar fundo próprio, e isso o widget não tem como
   saber. Quem liga, mede. */
.ew-dna .ec-dissolve {
  top: calc(var(--ew-dna-sangria-topo, 0px) * -1);
  bottom: calc(var(--ew-dna-sangria-base, 0px) * -1);
}

/* --------------------------------------------------------------------------
   Fundos do bloco
   -------------------------------------------------------------------------- */

/* Gradiente do protótipo: branco lavanda descendo até o azul claro do DS.
   Não é uma superfície do sistema porque só este bloco a usa — promover a
   token exigiria um nome que valesse em outro lugar, e não vale. */
.ew-dna--degrade {
  background: linear-gradient(180deg, #F6F7FE 0%, #EDEFFC 42%, var(--ec-blue-100) 100%);
  color: var(--ec-ink-900);
}

/* --------------------------------------------------------------------------
   Cabeçalho do bloco
   -------------------------------------------------------------------------- */
.ew-dna__cabecalho {
  max-width: var(--ec-container);
  margin-inline: auto;
  padding-inline: var(--ec-gutter);
  margin-bottom: var(--ec-sp-5);
}

/* .ec-flow aplica margem por seletor filho e venceria a classe do elemento;
   por isso as margens dos cabeçalhos de bloco são explícitas. */
.ew-dna__cabecalho .ew-title { margin: 0 0 var(--ec-sp-4); }
.ew-dna__cabecalho .ec-eyebrow { margin: 0 0 var(--ec-sp-2); }
.ew-dna__cabecalho .ew-dna__lead { margin: 0; max-width: 44rem; }

/* --------------------------------------------------------------------------
   Fitas e faixa da hélice dentro do widget
   -------------------------------------------------------------------------- */

/* Uma fita só (a outra vazia) não deve ficar com metade da largura sobrando. */
.ew-dna--fita-unica .ec-strands__grid { grid-template-columns: minmax(0, 1fr); }

/* --------------------------------------------------------------------------
   Avisos do editor
   -------------------------------------------------------------------------- */
.ew-dna .ew-aviso { position: relative; z-index: 5; }