/* ==========================================================================
   Ellos ConnecTI — Componente Hélice ("DNA Ellos")
   Requer ellos-ds.css. Par com ellos-dna.js e ellos-dissolve.js.
   Prefixo: ec-helix / --ec-hx-   |  Versão: 1.1.1

   Estrutura: as duas fitas são Missão e Visão (contínuas). Os degraus são
   os Valores (discretos) — é o que liga uma fita à outra.

   Regra de layout: a hélice SEMPRE tem faixa exclusiva. Nunca fica atrás
   de texto. Um único layout em todos os breakpoints; só a largura da faixa
   muda. Em faixa estreita a hélice sangra na borda, cortada pelo canvas.

   MUDANÇA DE MODELO — 1.1.0
   O desenho aprovado abandonou a rolagem travada. A hélice é uma seção de
   altura normal e os valores avançam sozinhos, respondendo a clique. O
   modelo antigo (sticky de 100vh empurrado por um irmão de 330vh) continua
   disponível em .ec-helix--rolagem, mas não é mais o padrão: dentro de um
   container do Elementor o sticky depende de nenhum ancestral ter
   overflow hidden ou clip, e isso não é verificável de dentro do widget.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PALETA DA HÉLICE
   O JS lê estas variáveis. Tema novo = bloco CSS, sem tocar em JavaScript.
   Os padrões ficam em :root de propósito — se ficassem em .ec-helix, teriam
   a mesma especificidade do seletor de tema e venceriam a herança quando o
   atributo estivesse no <body>.
   -------------------------------------------------------------------------- */
:root {
  --ec-hx-a: var(--ec-blue-400);
  --ec-hx-b: var(--ec-violet-600);
  --ec-hx-rung: var(--ec-blue-600);
  --ec-hx-active: var(--ec-green-500);
  --ec-hx-loose: #FFFFFF;
  --ec-hx-bg1: #02246F;
  --ec-hx-bg2: #01173F;
  --ec-hx-fg: #FFFFFF;
}

[data-ec-helix-theme="marca"]         { --ec-hx-a:#65B3FD; --ec-hx-b:#7D3CEE; --ec-hx-rung:#0078D6; --ec-hx-active:#21C55D; --ec-hx-loose:#FFFFFF; --ec-hx-bg1:#02246F; --ec-hx-bg2:#01173F; --ec-hx-fg:#FFFFFF; }
[data-ec-helix-theme="institucional"] { --ec-hx-a:#65B3FD; --ec-hx-b:#0078D6; --ec-hx-rung:#3360E1; --ec-hx-active:#D42F2E; --ec-hx-loose:#E9ECFD; --ec-hx-bg1:#012A86; --ec-hx-bg2:#011C52; --ec-hx-fg:#FFFFFF; }
[data-ec-helix-theme="bandeira"]      { --ec-hx-a:#21C55D; --ec-hx-b:#FAD500; --ec-hx-rung:#65B3FD; --ec-hx-active:#FFFFFF; --ec-hx-loose:#E9ECFD; --ec-hx-bg1:#013FB6; --ec-hx-bg2:#01245F; --ec-hx-fg:#FFFFFF; }
[data-ec-helix-theme="mono"]          { --ec-hx-a:#65B3FD; --ec-hx-b:#3360E1; --ec-hx-rung:#124BBE; --ec-hx-active:#FFFFFF; --ec-hx-loose:#65B3FD; --ec-hx-bg1:#021A55; --ec-hx-bg2:#01102F; --ec-hx-fg:#FFFFFF; }
[data-ec-helix-theme="clinico"]       { --ec-hx-a:#0078D6; --ec-hx-b:#21C55D; --ec-hx-rung:#1D283B; --ec-hx-active:#D42F2E; --ec-hx-loose:#1D283B; --ec-hx-bg1:#F3F5FE; --ec-hx-bg2:#E4E9FB; --ec-hx-fg:#1D283B; }
[data-ec-helix-theme="noturno"]       { --ec-hx-a:#7D3CEE; --ec-hx-b:#D42F2E; --ec-hx-rung:#65B3FD; --ec-hx-active:#FAD500; --ec-hx-loose:#FFFFFF; --ec-hx-bg1:#140B3A; --ec-hx-bg2:#07031C; --ec-hx-fg:#FFFFFF; }
[data-ec-helix-theme="institucional-claro"] { --ec-hx-a:#0078D6; --ec-hx-b:#013FB6; --ec-hx-rung:#3360E1; --ec-hx-active:#D42F2E; --ec-hx-loose:#1D283B; --ec-hx-bg1:#F3F5FE; --ec-hx-bg2:#E4E9FB; --ec-hx-fg:#1D283B; }

/* --------------------------------------------------------------------------
   2. FITAS — Missão e Visão
   -------------------------------------------------------------------------- */
.ec-strands {
  background: linear-gradient(180deg, var(--ec-hx-bg1), var(--ec-hx-bg2));
  color: var(--ec-hx-fg);
  padding-block: clamp(2rem, 6vw, 4rem);
  transition: background 600ms var(--ec-ease-soft, ease);
}
.ec-strands__grid {
  display: grid;
  gap: var(--ec-sp-5);
  max-width: var(--ec-container);
  margin-inline: auto;
  padding-inline: var(--ec-gutter);
}
@media (min-width: 820px) {
  .ec-strands__grid { grid-template-columns: 1fr 1fr; gap: var(--ec-sp-7); }
}

.ec-strand { position: relative; padding-left: var(--ec-sp-4); }
.ec-strand::before {
  content: "";
  position: absolute;
  left: 0; top: .35rem; bottom: .35rem;
  width: 3px;
  border-radius: 2px;
  background: var(--_c, var(--ec-hx-a));
}
.ec-strand--missao { --_c: var(--ec-hx-a); }
.ec-strand--visao  { --_c: var(--ec-hx-b); }

.ec-strand__tag {
  display: flex;
  align-items: center;
  gap: var(--ec-sp-2);
  font-size: var(--ec-fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .72;
  margin: 0 0 var(--ec-sp-2);
}
.ec-strand__tag b { width: 8px; height: 8px; border-radius: 50%; background: var(--_c); display: block; }
.ec-strand__title {
  overflow-wrap: anywhere;
  font-family: var(--ec-font-display);
  text-transform: uppercase;
  font-size: var(--ec-fs-d3);
  line-height: 1;
  margin: 0 0 var(--ec-sp-3);
}
.ec-strand__text { overflow-wrap: anywhere; margin: 0; font-size: var(--ec-fs-body); line-height: 1.62; opacity: .92; max-width: 48ch; }

/* --------------------------------------------------------------------------
   3. HÉLICE — degraus = Valores
   -------------------------------------------------------------------------- */
.ec-helix {
  position: relative;
  --ec-hx-band: 31%;
  background: linear-gradient(180deg, var(--ec-hx-bg2), var(--ec-hx-bg1));
  color: var(--ec-hx-fg);
  transition: background 600ms var(--ec-ease-soft, ease);
}
/* Modelo padrão: seção de altura normal. O nome da classe continua
   __sticky por compatibilidade — renomear órfãria o markup já publicado
   e o ganho seria só de vocabulário. */
.ec-helix__sticky {
  display: grid;
  grid-template-columns: 1fr var(--ec-hx-band);
  align-items: center;
  min-height: 26rem;
  max-width: var(--ec-container);
  margin-inline: auto;
  padding-block: clamp(2.5rem, 6vw, 4rem);
  padding-inline: var(--ec-gutter);
  gap: var(--ec-sp-6);
}
/* Sem separador entre o texto e a faixa.

   O protótipo tinha um border-left aqui, quase invisível sobre o azul
   escuro. No tema claro ele salta, e marca a borda de uma caixa que não
   precisa ser vista: a hélice já é uma coluna visualmente separada. Quem
   quiser a linha de volta declara a borda no bloco que hospeda. */
.ec-helix__band {
  position: relative;
  min-width: 0;
  min-height: 24rem;
  touch-action: none;
}
.ec-helix__band canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ec-helix__copy {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ec-helix__scroller { display: none; }

/* Variante de rolagem travada — o modelo até 1.0.0. Só entra em bloco que
   ocupa a página inteira e cujo ancestral não recorta. O JS reconhece o
   modo pela altura do estágio, sem precisar de atributo. */
.ec-helix--rolagem .ec-helix__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 0;
  max-width: none;
  align-items: stretch;
  padding: 0;
  gap: 0;
  overflow: hidden;
}
.ec-helix--rolagem .ec-helix__copy { padding: var(--ec-sp-4); }
.ec-helix--rolagem .ec-helix__band { min-height: 0; }
.ec-helix--rolagem .ec-helix__scroller { display: block; height: 330vh; }

/* lados invertidos — o JS espelha o centro da hélice junto */
[data-ec-helix-side="left"] .ec-helix__sticky { grid-template-columns: var(--ec-hx-band) 1fr; }
[data-ec-helix-side="left"] .ec-helix__band { order: -1; }

.ec-helix__kicker {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--ec-fs-xs);
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: .6;
  margin: 0 0 var(--ec-sp-1);
}
.ec-helix__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ec-sp-1) var(--ec-sp-4);
  font-size: var(--ec-fs-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .55;
  margin: 0 0 var(--ec-sp-3);
}
.ec-helix__legend span { display: flex; align-items: center; gap: var(--ec-sp-1); min-width: 0; overflow-wrap: anywhere; }
.ec-helix__legend b { width: 7px; height: 7px; border-radius: 50%; display: block; }
.ec-helix__legend .is-a { background: var(--ec-hx-a); }
.ec-helix__legend .is-b { background: var(--ec-hx-b); }

.ec-helix__steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ec-sp-1); }
.ec-helix__step { min-width: 0; }

/* O degrau é um <button>, e é aí que mora a armadilha.

   `font: inherit` já estava aqui porque o UA repinta a fonte do botão. O
   que faltava era `white-space`: tema e frameworks costumam declarar
   `button { white-space: nowrap }` (herança de normalize antigo e de
   Bootstrap), e a regra é herdada pelo <p> do degrau. Com `overflow:
   hidden` no parágrafo, o texto vira uma linha só cortada na borda do
   cartão — sem barra de rolagem, sem reticências, sem pista do motivo.
   Como o valor herdado vem de fora do componente, a única defesa é
   declarar o normal aqui e nos filhos: quem hospeda pode ter seletor mais
   específico que o do botão. Custa três linhas e fecha a porta.
   
   O degrau também é grid de coluna única para poder animar a revelação do
   texto por linha (ver .ec-helix__step p, adiante). Em navegador que
   ignore display:grid em <button>, as linhas caem fora e o texto fica
   sempre visível — degradação legível, não corte. */
.ec-helix__step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 0fr;
  white-space: normal;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--ec-r-md);
  padding: var(--ec-sp-2) var(--ec-sp-3);
  text-align: left;
  color: inherit;
  font: inherit;
  opacity: .42;
  cursor: pointer;
  transition: opacity 450ms var(--ec-ease-soft, ease),
              background 450ms var(--ec-ease-soft, ease),
              border-color 450ms var(--ec-ease-soft, ease),
              grid-template-rows 500ms var(--ec-ease-soft, ease);
}
.ec-helix__step.is-active {
  grid-template-rows: auto auto 1fr;
  opacity: 1;
  background: color-mix(in srgb, var(--ec-hx-active) 15%, transparent);
  border-color: var(--ec-hx-active);
}
.ec-helix__step:focus-visible { outline: 2px solid var(--ec-hx-active); outline-offset: 2px; }
.ec-helix__step p { overflow-wrap: anywhere; }
.ec-helix__step .ec-helix__n { font-size: var(--ec-fs-xs); letter-spacing: .14em; opacity: .55; display: block; }
/* overflow-wrap: anywhere, e não break-word.

   Só `anywhere` reduz o min-content do elemento. `break-word` quebra a
   palavra na hora de pintar, mas o cálculo de largura mínima continua
   contando a palavra inteira — e é esse cálculo que empurra a coluna do
   grid para além da tela. Título display em caixa alta é justamente onde a
   diferença aparece: "TRANSPARÊNCIA" mede mais que a coluna no celular. */
.ec-helix__step h3,
.ec-helix__step h4 {
  overflow-wrap: anywhere;
  white-space: normal;
  min-width: 0;
  font-family: var(--ec-font-display);
  text-transform: uppercase;
  font-size: clamp(.92rem, 3.4vw, 1.45rem);
  line-height: 1.02;
  margin: 2px 0 0;
}
/* A revelação do texto era `max-height: 0` → `9rem`. Além de depender de
   um número chutado, o teto cortava de verdade: valor com texto longo em
   coluna estreita passa de 9rem e some o final, calado. A linha 0fr→1fr do
   grid anima a mesma coisa medindo o conteúdo real — sem teto e sem
   número mágico.

   `min-height: 0` é obrigatório: item de grid tem mínimo automático igual
   ao conteúdo, e sem ele a linha nunca fecha em zero. O respiro entre o
   título e o texto vive no padding do próprio parágrafo, não em margem:
   margem de item de grid fica fora da linha e sobraria com o cartão
   fechado. */
.ec-helix__step p {
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  margin: 0;
  padding-top: 0;
  white-space: normal;
  font-size: var(--ec-fs-sm);
  line-height: 1.45;
  opacity: .86;
  overflow: hidden;
  transition: padding-top 500ms var(--ec-ease-soft, ease);
}
.ec-helix__step.is-active p { padding-top: var(--ec-sp-1); }

.ec-helix__hint {
  position: absolute;
  left: 50%; bottom: var(--ec-sp-2);
  transform: translateX(-50%);
  font-size: var(--ec-fs-xs);
  opacity: .4;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 500ms var(--ec-ease-soft, ease);
}
.ec-helix__hint.is-off { opacity: 0; }

/* --------------------------------------------------------------------------
   TEMAS DE FUNDO CLARO — 1.6.0
   Os degraus foram desenhados para fundo escuro: fundo e borda em branco
   translúcido, inativo com opacity .42. Sobre fundo claro isso desaparece.
   O inativo passa a se distinguir por cor de texto, não por opacidade.
   -------------------------------------------------------------------------- */
[data-ec-helix-theme="clinico"] .ec-helix__step,
[data-ec-helix-theme="institucional-claro"] .ec-helix__step {
  background: rgba(1, 63, 182, .04);
  border: 1px solid rgba(1, 63, 182, .12);
  opacity: 1;
  color: var(--ec-ink-400);
}
[data-ec-helix-theme="clinico"] .ec-helix__step h3,
[data-ec-helix-theme="clinico"] .ec-helix__step h4,
[data-ec-helix-theme="institucional-claro"] .ec-helix__step h3,
[data-ec-helix-theme="institucional-claro"] .ec-helix__step h4 { color: var(--ec-ink-400); }
[data-ec-helix-theme="clinico"] .ec-helix__step .ec-helix__n,
[data-ec-helix-theme="institucional-claro"] .ec-helix__step .ec-helix__n { opacity: .7; }

[data-ec-helix-theme="clinico"] .ec-helix__step:hover,
[data-ec-helix-theme="institucional-claro"] .ec-helix__step:hover {
  background-color: rgba(1, 63, 182, .07);
  border-color: rgba(1, 63, 182, .24);
  color: var(--ec-ink-900);
}
[data-ec-helix-theme="clinico"] .ec-helix__step:hover h3,
[data-ec-helix-theme="clinico"] .ec-helix__step:hover h4,
[data-ec-helix-theme="institucional-claro"] .ec-helix__step:hover h3,
[data-ec-helix-theme="institucional-claro"] .ec-helix__step:hover h4 { color: var(--ec-ink-900); }

[data-ec-helix-theme="clinico"] .ec-helix__step.is-active,
[data-ec-helix-theme="institucional-claro"] .ec-helix__step.is-active {
  background-color: var(--ec-white);
  border-color: var(--ec-hx-active);
  color: var(--ec-ink-900);
  box-shadow: 0 5px 0 0 rgba(1, 63, 182, .12);
}
[data-ec-helix-theme="clinico"] .ec-helix__step.is-active h3,
[data-ec-helix-theme="clinico"] .ec-helix__step.is-active h4,
[data-ec-helix-theme="institucional-claro"] .ec-helix__step.is-active h3,
[data-ec-helix-theme="institucional-claro"] .ec-helix__step.is-active h4 { color: var(--ec-ink-900); }

[data-ec-helix-theme="clinico"] .ec-helix__kicker,
[data-ec-helix-theme="clinico"] .ec-helix__legend,
[data-ec-helix-theme="institucional-claro"] .ec-helix__kicker,
[data-ec-helix-theme="institucional-claro"] .ec-helix__legend { color: var(--ec-ink-400); }

[data-ec-helix-theme="clinico"] .ec-helix__hint,
[data-ec-helix-theme="institucional-claro"] .ec-helix__hint {
  color: var(--ec-ink-400);
  background-color: rgba(255, 255, 255, .75);
  border-radius: var(--ec-r-pill);
  padding: .3em .9em;
}

/* --------------------------------------------------------------------------
   4. VALORES NO MESMO PESO DE MISSÃO E VISÃO — 1.1.0
   Era rótulo pequeno ao lado de dois títulos display. Vira o terceiro
   título da tríade, com a mesma marca lateral das fitas.
   -------------------------------------------------------------------------- */
.ec-helix__copy { position: relative; padding-left: var(--ec-sp-4); }
.ec-helix__copy::before {
  content: "";
  position: absolute;
  left: 0; top: .35rem; bottom: .35rem;
  width: 3px; border-radius: 2px;
  background: var(--ec-hx-active);
}
.ec-helix__tag { --_c: var(--ec-hx-active); margin-bottom: var(--ec-sp-2); }

/* Só nos temas claros: no escuro o kicker continua sendo rótulo pequeno,
   porque ali quem carrega o peso de título é o próprio fundo. */
[data-ec-helix-theme="clinico"] .ec-helix__kicker,
[data-ec-helix-theme="institucional-claro"] .ec-helix__kicker {
  font-family: var(--ec-font-display);
  font-size: var(--ec-fs-d3);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: var(--ec-ls-display);
  color: var(--ec-ink-900);
  margin: 0 0 var(--ec-sp-3);
  opacity: 1;
}
[data-ec-helix-theme="clinico"] .ec-helix__legend,
[data-ec-helix-theme="institucional-claro"] .ec-helix__legend { margin-bottom: var(--ec-sp-4); }

/* --------------------------------------------------------------------------
   5. BREAKPOINTS
   -------------------------------------------------------------------------- */
@media (min-width: 700px) {
  .ec-helix { --ec-hx-band: 34%; }
  .ec-helix__steps { gap: var(--ec-sp-2); }
  .ec-helix__step { padding: var(--ec-sp-3); }
  .ec-helix--rolagem .ec-helix__copy { padding: var(--ec-sp-6); }
  .ec-helix--rolagem .ec-helix__scroller { height: 360vh; }
}
@media (min-width: 1100px) {
  .ec-helix { --ec-hx-band: 42%; }
  .ec-helix__step { padding: var(--ec-sp-3) var(--ec-sp-4); border-radius: var(--ec-r-lg); }
  .ec-helix__step p { font-size: var(--ec-fs-body); }
  .ec-helix--rolagem .ec-helix__copy { padding: var(--ec-sp-7) 3.5rem; }
}

/* Empilhado: hélice em cima, valores embaixo. A faixa vem primeiro mesmo
   com side=left, porque em coluna única "esquerda" não quer dizer nada. */
@media (max-width: 820px) {
  .ec-helix__sticky {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    gap: var(--ec-sp-5);
  }
  /* Sem separador em coluna única: a linha cairia por cima do desenho,
     que sangra até a borda do canvas por definição, e o corte reto é lido
     como erro. O espaçamento já separa as duas áreas. */
  .ec-helix__band,
  [data-ec-helix-side="left"] .ec-helix__band {
    order: -1;
    min-height: 17rem;
    border: 0;
  }
}

/* --------------------------------------------------------------------------
   6. FALLBACK SEM MOVIMENTO
   Sem canvas animado nem avanço automático, os cards precisam ser todos
   legíveis ao mesmo tempo.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ec-helix--rolagem .ec-helix__sticky { position: static; height: auto; }
  .ec-helix--rolagem .ec-helix__scroller { display: none; }
  .ec-helix__step { opacity: 1; }
  /* .ec-helix__step.is-active vale 0,2,0 e venceria a regra abaixo se ela
     ficasse em 0,1,0: o cartão ativo era o único que continuava cortado. */
  .ec-helix__step,
  .ec-helix__step.is-active { grid-template-rows: auto auto auto; }
  .ec-helix__step p,
  .ec-helix__step.is-active p { padding-top: var(--ec-sp-1); }
  .ec-helix, .ec-strands, .ec-helix__step { transition: none; }
}

/* --------------------------------------------------------------------------
   7. CHUVA DE PARTÍCULAS — par com ellos-dissolve.js
   Camada decorativa entre o fundo e o conteúdo. Quem posiciona é o bloco
   que a hospeda: aqui ela só sabe cobrir o pai e ficar fora do caminho
   do ponteiro.
   -------------------------------------------------------------------------- */
.ec-dissolve {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.ec-dissolve canvas { display: block; width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) { .ec-dissolve { display: none; } }