/* ==========================================================================
   EN-GLOBAL.CSS — Design system global do site endoo.com.br
   Versão 1.3.0 · out/2026

   Fonte da verdade: repositório endoo-site → css/en-global.css
   Carregado em todo o site pelo plugin "Endoo — CSS Global".

   REGRAS DE USO
   1. Todo conteúdo fica dentro de <div class="en-page">. Nenhuma regra
      deste arquivo atinge elementos fora desse wrapper.
   2. Toda seção é um painel: <section class="en-panel ...">.
   3. Títulos SEMPRE com classe (en-h1, en-h2, en-h3, en-h4). A classe
      garante especificidade 0,2,0, que vence o CSS do tema e do Elementor.
   4. Cores, tamanhos e espaçamentos SEMPRE via variáveis --en-*.
      Nenhum hex fora do bloco de tokens.
   5. Fundo de seção: só pelas variantes de painel (--light, --brand,
      --dark) e pelo sistema de imagem en-has-bg.
   6. Ícones em SVG inline (stroke="currentColor", fill="none",
      24x24, stroke-width 2). Nunca emojis.
   7. Tudo funciona sem JavaScript (FAQ, faixa de logos, animações),
      porque o widget HTML do site pode não executar scripts.
   8. Sem !important. Conflito de especificidade se resolve com classe.
   9. CSS exclusivo de uma página: bloco de estilo próprio na página,
      escopado em .en-page--[slug], usando apenas os tokens daqui.
   10. Destaque em título: <em> dentro de en-h1/en-h2/en-h3 fica teal,
       nunca itálico. Use em 1 ou 2 palavras.

   SUMÁRIO
   01 Tokens                 09 Cards e ícones
   02 Tokens por breakpoint  10 Blocos de conteúdo
   03 Base e reset           11 FAQ
   04 Layout                 12 Logos e clientes
   05 Fundos de painel       13 Mídia e telas simuladas
   06 Tipografia             14 Utilitários
   07 Botões                 15 Responsivo
   08 Badges, tags e chips   16 Movimento reduzido
   ========================================================================== */


/* ==========================================================================
   01 TOKENS
   Declarados no wrapper, não no :root, para não vazar para o resto do site.
   ========================================================================== */

.en-page {
  /* ── Cores da marca ── */
  --en-primary:        #2C48E7;
  --en-primary-dark:   #000075;
  --en-primary-light:  #017CDB;
  --en-teal:           #01BEBE;
  --en-purple:         #A464F9;
  --en-orange:         #F35633;
  --en-dark:           #252525;
  --en-light:          #F3F8FE;
  --en-white:          #FFFFFF;

  /* ── Cores de apoio ── */
  --en-ink:            #111114;   /* fundo da seção escura com glow */
  --en-page-bg:        #E9EFF8;   /* fundo atrás dos painéis */
  --en-warn:           #F59E0B;
  --en-danger:         #DC3545;
  --en-black:          #000000;

  /* ── Derivadas (não editar: seguem as cores acima) ── */
  --en-primary-hover:  color-mix(in srgb, var(--en-primary) 82%, var(--en-black));
  --en-teal-hover:     color-mix(in srgb, var(--en-teal) 84%, var(--en-black));
  --en-orange-hover:   color-mix(in srgb, var(--en-orange) 86%, var(--en-black));
  --en-teal-text:      color-mix(in srgb, var(--en-teal) 80%, var(--en-black));
  --en-orange-text:    color-mix(in srgb, var(--en-orange) 85%, var(--en-black));
  --en-warn-text:      color-mix(in srgb, var(--en-warn) 68%, var(--en-black));

  /* ── Papéis de cor (remapeados nos painéis escuros, seção 05) ── */
  --en-heading:        var(--en-dark);
  --en-text:           var(--en-dark);
  --en-text-mid:       color-mix(in srgb, var(--en-dark) 74%, transparent);
  --en-text-soft:      color-mix(in srgb, var(--en-dark) 56%, transparent);
  --en-accent-text:    var(--en-teal);          /* <em> nos títulos */
  --en-eyebrow-color:  var(--en-primary);
  --en-link:           var(--en-primary);
  --en-value-color:    var(--en-primary);       /* números de destaque */
  --en-surface:        var(--en-white);         /* fundo de cards */
  --en-surface-alt:    var(--en-light);         /* fundo de inputs, ícones */
  --en-border:         color-mix(in srgb, var(--en-primary) 10%, transparent);
  --en-border-strong:  color-mix(in srgb, var(--en-primary) 20%, transparent);
  --en-divider:        color-mix(in srgb, var(--en-black) 8%, transparent);

  /* ── Tipografia base ── */
  --en-font:           'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Tipografia: tamanhos, alturas de linha, tracking e margens ── */
  --en-h1-size:        clamp(30px, 4.2vw, 52px);
  --en-h1-lh:          1.1;
  --en-h1-ls:          0.024em;
  --en-h1-mb:          20px;

  --en-h2-size:        clamp(26px, 3.5vw, 40px);
  --en-h2-lh:          1.2;
  --en-h2-ls:          0.024em;
  --en-h2-mb:          16px;

  --en-h3-size:        18px;
  --en-h3-lh:          1.3;
  --en-h3-ls:          0.024em;
  --en-h3-mb:          10px;

  --en-h4-size:        16px;
  --en-h4-lh:          1.3;
  --en-h4-mb:          8px;

  --en-lead-size:      18px;
  --en-lead-lh:        1.65;
  --en-body-size:      16px;
  --en-body-lh:        1.65;
  --en-small-size:     14px;
  --en-small-lh:       1.6;

  --en-eyebrow-size:   11px;
  --en-eyebrow-ls:     0.12em;
  --en-btn-size:       14px;
  --en-btn-ls:         0.06em;
  --en-badge-size:     12px;

  --en-stat-size:      clamp(40px, 5.5vw, 72px);
  --en-result-size:    40px;
  --en-price-size:     44px;
  --en-quote-size:     24px;

  --en-faq-q-size:     16px;
  --en-faq-a-size:     15px;

  /* ── Layout ── */
  --en-container:        1160px;
  --en-container-narrow: 820px;
  --en-frame-gap:      12px;      /* respiro entre painéis e nas bordas */
  --en-frame-radius:   28px;      /* curva dos painéis */
  --en-panel-py:       96px;
  --en-panel-px:       56px;
  --en-hero-pt:        104px;
  --en-hero-pb:        88px;
  --en-grid-gap:       24px;
  --en-split-gap:      64px;
  --en-head-mb:        56px;
  --en-section-cta-mt: 56px;

  /* ── Raios, sombras e transição ── */
  --en-radius-sm:      8px;
  --en-radius:         12px;
  --en-radius-lg:      20px;
  --en-radius-pill:    40px;
  --en-shadow:         0 4px 24px rgba(0, 0, 0, 0.08);
  --en-shadow-lg:      0 12px 48px rgba(0, 0, 0, 0.14);
  --en-shadow-card:    0 2px 16px rgba(0, 0, 0, 0.05);
  --en-tr:             0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Imagem de fundo (seção 05) ── */
  --en-bg-overlay-default: rgba(0, 0, 0, 0.45);

  /* ── Faixa de logos ── */
  --en-logo-h:         120px;
  --en-logos-speed:    40s;
}


/* ==========================================================================
   02 TOKENS POR BREAKPOINT
   Regra de ouro: toda variável sobrescrita aqui já existe no bloco 01.
   ========================================================================== */

@media (max-width: 900px) {
  .en-page {
    --en-frame-gap:      10px;
    --en-frame-radius:   24px;
    --en-panel-py:       72px;
    --en-panel-px:       32px;
    --en-hero-pt:        80px;
    --en-hero-pb:        64px;
    --en-grid-gap:       20px;
    --en-split-gap:      40px;
    --en-head-mb:        44px;
    --en-section-cta-mt: 44px;
    --en-lead-size:      17px;
    --en-logo-h:         96px;
  }
}

@media (max-width: 600px) {
  .en-page {
    --en-frame-gap:      8px;
    --en-frame-radius:   20px;
    --en-panel-py:       56px;
    --en-panel-px:       20px;
    --en-hero-pt:        64px;
    --en-hero-pb:        52px;
    --en-grid-gap:       16px;
    --en-split-gap:      32px;
    --en-head-mb:        36px;
    --en-section-cta-mt: 36px;
    --en-h3-size:        17px;
    --en-lead-size:      16px;
    --en-body-size:      15px;
    --en-btn-size:       13px;
    --en-result-size:    34px;
    --en-price-size:     38px;
    --en-quote-size:     19px;
    --en-faq-q-size:     15px;
    --en-logo-h:         72px;
  }
}

@media (max-width: 400px) {
  .en-page {
    --en-panel-px:       16px;
    --en-h1-size:        28px;
    --en-h2-size:        24px;
  }
}


/* ==========================================================================
   03 BASE E RESET
   Neutraliza o que o tema e o Elementor aplicam em tags globais.
   ========================================================================== */

.en-page {
  font-family: var(--en-font);
  font-size: var(--en-body-size);
  line-height: var(--en-body-lh);
  color: var(--en-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  interpolate-size: allow-keywords;   /* permite animar a abertura do FAQ */
}

.en-page *,
.en-page *::before,
.en-page *::after {
  box-sizing: border-box;
}

.en-page :is(h1, h2, h3, h4, h5, h6, p, blockquote, figure, figcaption, cite, ul, ol, li, dl, dt, dd) {
  margin: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
  color: inherit;
  border: 0;
  background: none;
}

.en-page :is(ul, ol) {
  list-style: none;
}

.en-page a {
  color: var(--en-link);
  text-decoration: none;
  transition: color var(--en-tr);
}

.en-page strong,
.en-page b {
  font-weight: 700;
}

.en-page img,
.en-page video {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.en-page svg {
  display: block;
  flex-shrink: 0;
}

/* Reset de botão limitado a aparência e cursor (nunca zerar fundo ou borda) */
.en-page button {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font: inherit;
}

.en-page [hidden] {
  display: none;
}

.en-page :focus-visible {
  outline: 3px solid color-mix(in srgb, var(--en-teal) 60%, transparent);
  outline-offset: 3px;
}


/* ==========================================================================
   04 LAYOUT
   ========================================================================== */

/* Wrapper: empilha os painéis com o respiro.
   No Elementor, o container que recebe o HTML deve estar em largura total
   e sem padding lateral. */
.en-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--en-frame-gap);
  padding: var(--en-frame-gap);
  background-color: var(--en-page-bg);
  overflow-x: hidden;
  overflow-x: clip;
}

/* Painel: toda seção da página */
.en-page .en-panel {
  position: relative;
  isolation: isolate;               /* glows com z-index -1 ficam dentro do painel */
  padding: var(--en-panel-py) var(--en-panel-px);
  border-radius: var(--en-frame-radius);
  background-color: var(--en-white);
  color: var(--en-text);
  overflow: hidden;
}

/* Painel sem padding interno (faixas, stats coloridos, mídia de borda a borda) */
.en-page .en-panel--flush {
  padding: 0;
}

/* Container interno */
.en-page .en-container {
  width: 100%;
  max-width: var(--en-container);
  margin-inline: auto;
}

.en-page .en-container--narrow {
  max-width: var(--en-container-narrow);
}

/* Cabeçalho de seção: eyebrow + título + lead */
.en-page .en-head {
  max-width: 720px;
  margin: 0 auto var(--en-head-mb);
  text-align: center;
}

.en-page .en-head--left {
  margin-left: 0;
  text-align: left;
}

.en-page .en-head .en-lead {
  margin-inline: auto;
}

.en-page .en-head--left .en-lead {
  margin-inline: 0;
}

/* Grids. O auto-fit usa min(100%, ...) para nunca estourar a tela. */
.en-page .en-grid {
  display: grid;
  gap: var(--en-grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--en-grid-min, 260px)), 1fr));
}

.en-page .en-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.en-page .en-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.en-page .en-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Split: texto + mídia */
.en-page .en-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--en-split-gap);
  align-items: center;
}

.en-page .en-split > * {
  min-width: 0;
}

.en-page .en-split--wide {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}

.en-page .en-split--top {
  align-items: start;
}

.en-page .en-split--reverse > :first-child {
  order: 2;
}

/* Pilha vertical com espaçamento uniforme */
.en-page .en-stack {
  display: grid;
  gap: var(--en-stack-gap, 16px);
  align-content: start;
}


/* ==========================================================================
   05 FUNDOS DE PAINEL
   Duas regras de escrita:
   1. Cor de fundo sempre com background-color, nunca com o atalho background:.
   2. Gradiente próprio vai em --en-bg-base e é aplicado com
      background-image: var(--en-bg-base). Assim o sistema en-has-bg
      consegue colocar uma imagem por cima e, sem imagem, o gradiente volta.
   ========================================================================== */

.en-page .en-panel--light {
  background-color: var(--en-light);
}

/* Remapeamento de cores para painéis escuros: os componentes leem os papéis
   (--en-heading, --en-surface...) e se adaptam sozinhos. */
.en-page .en-panel--brand,
.en-page .en-panel--dark,
.en-page .en-on-dark {
  --en-heading:       var(--en-white);
  --en-text:          var(--en-light);
  --en-text-mid:      color-mix(in srgb, var(--en-light) 80%, transparent);
  --en-text-soft:     color-mix(in srgb, var(--en-light) 60%, transparent);
  --en-eyebrow-color: var(--en-teal);
  --en-link:          var(--en-teal);
  --en-value-color:   var(--en-teal);
  --en-surface:       color-mix(in srgb, var(--en-white) 7%, transparent);
  --en-surface-alt:   color-mix(in srgb, var(--en-white) 10%, transparent);
  --en-border:        color-mix(in srgb, var(--en-white) 14%, transparent);
  --en-border-strong: color-mix(in srgb, var(--en-white) 24%, transparent);
  --en-divider:       color-mix(in srgb, var(--en-white) 12%, transparent);
  --en-shadow-card:   none;
  color: var(--en-text);
}

/* Azul da marca: hero, CTA final, seções de destaque */
.en-page .en-panel--brand {
  --en-bg-base: linear-gradient(140deg, var(--en-primary-dark) 0%, var(--en-primary) 100%);
  background-color: var(--en-primary-dark);
  background-image: var(--en-bg-base);
}

/* Hero azul: ganha um foco de luz teal no canto superior direito */
.en-page .en-hero.en-panel--brand {
  --en-bg-base:
    radial-gradient(circle at 78% 30%, color-mix(in srgb, var(--en-teal) 30%, transparent) 0%, transparent 42%),
    linear-gradient(140deg, var(--en-primary-dark) 0%, var(--en-primary) 100%);
}

/* Escuro com glow (dois focos de luz no canto inferior direito) */
.en-page .en-panel--dark {
  background-color: var(--en-ink);
}

.en-page .en-panel--dark::before,
.en-page .en-panel--dark::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.en-page .en-panel--dark::before {
  bottom: -18%;
  right: -8%;
  width: 680px;
  height: 680px;
  background-image: radial-gradient(circle,
    color-mix(in srgb, var(--en-primary) 72%, transparent) 0%,
    color-mix(in srgb, var(--en-primary) 18%, transparent) 45%,
    transparent 72%);
  filter: blur(48px);
}

.en-page .en-panel--dark::after {
  bottom: -28%;
  right: 6%;
  width: 460px;
  height: 460px;
  background-image: radial-gradient(circle,
    color-mix(in srgb, var(--en-purple) 62%, transparent) 0%,
    color-mix(in srgb, var(--en-purple) 20%, transparent) 50%,
    transparent 72%);
  filter: blur(64px);
}

/* Variação: glow à esquerda */
.en-page .en-panel--glow-left::before { right: auto; left: -8%; }
.en-page .en-panel--glow-left::after  { right: auto; left: 6%; }

/* Sem glow */
.en-page .en-panel--no-glow::before,
.en-page .en-panel--no-glow::after {
  display: none;
}

/* ── SISTEMA DE IMAGEM DE FUNDO (en-has-bg) ──
   Uso: class="en-panel en-has-bg" + style inline na <section>:
     --en-bg: url('...')                 imagem desktop
     --en-bg-mobile: url('...')          imagem em telas ≤ 900px (opcional)
     --en-bg-position: center top        enquadramento (opcional, padrão center)
     --en-bg-overlay: 0 a 1              intensidade da camada escura (padrão 0)
     --en-bg-overlay-color: rgba(...)    cor da camada (padrão preto 45%)
   Fica depois das variantes de painel para vencer o background-image delas. */
.en-page .en-has-bg {
  --en-bg-layer: color-mix(in srgb,
    var(--en-bg-overlay-color, var(--en-bg-overlay-default)) calc(var(--en-bg-overlay, 0) * 100%),
    transparent);
  background-image:
    linear-gradient(var(--en-bg-layer), var(--en-bg-layer)),
    var(--en-bg, var(--en-bg-base, none));
  background-size: cover;
  background-position: var(--en-bg-position, center);
  background-repeat: no-repeat;
}

@media (max-width: 900px) {
  .en-page .en-has-bg {
    background-image:
      linear-gradient(var(--en-bg-layer), var(--en-bg-layer)),
      var(--en-bg-mobile, var(--en-bg, var(--en-bg-base, none)));
  }
}


/* ==========================================================================
   06 TIPOGRAFIA
   ========================================================================== */

.en-page .en-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  font-size: var(--en-eyebrow-size);
  font-weight: 700;
  letter-spacing: var(--en-eyebrow-ls);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--en-eyebrow-color);
}

.en-page .en-h1 {
  margin-bottom: var(--en-h1-mb);
  font-size: var(--en-h1-size);
  font-weight: 500;
  line-height: var(--en-h1-lh);
  letter-spacing: var(--en-h1-ls);
  color: var(--en-heading);
}

.en-page .en-h2 {
  margin-bottom: var(--en-h2-mb);
  font-size: var(--en-h2-size);
  font-weight: 500;
  line-height: var(--en-h2-lh);
  letter-spacing: var(--en-h2-ls);
  color: var(--en-heading);
}

.en-page .en-h3 {
  margin-bottom: var(--en-h3-mb);
  font-size: var(--en-h3-size);
  font-weight: 700;
  line-height: var(--en-h3-lh);
  letter-spacing: var(--en-h3-ls);
  color: var(--en-heading);
}

.en-page .en-h4 {
  margin-bottom: var(--en-h4-mb);
  font-size: var(--en-h4-size);
  font-weight: 700;
  line-height: var(--en-h4-lh);
  color: var(--en-heading);
}

.en-page :is(.en-h1, .en-h2, .en-h3) em {
  font-style: normal;
  color: var(--en-accent-text);
}

.en-page .en-lead {
  max-width: 680px;
  font-size: var(--en-lead-size);
  line-height: var(--en-lead-lh);
  color: var(--en-text-mid);
}

.en-page .en-text {
  font-size: var(--en-body-size);
  line-height: var(--en-body-lh);
  color: var(--en-text-mid);
}

.en-page .en-small {
  font-size: var(--en-small-size);
  line-height: var(--en-small-lh);
  color: var(--en-text-soft);
}

.en-page .en-muted {
  color: var(--en-text-soft);
}

.en-page :is(.en-lead, .en-text, .en-small) strong {
  color: var(--en-heading);
}

.en-page :is(.en-lead, .en-text, .en-small) a,
.en-page .en-link {
  color: var(--en-link);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Texto corrido longo (artigos, políticas): estiliza tags sem classe */
.en-page .en-prose {
  max-width: 720px;
  font-size: var(--en-body-size);
  line-height: 1.75;
  color: var(--en-text-mid);
}

.en-page .en-prose > * + * {
  margin-top: 1.1em;
}

.en-page .en-prose :is(h2, h3) {
  margin-top: 1.8em;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.024em;
  color: var(--en-heading);
}

.en-page .en-prose h2 { font-size: 24px; }
.en-page .en-prose h3 { font-size: 19px; }

.en-page .en-prose :is(ul, ol) {
  padding-left: 1.3em;
}

.en-page .en-prose ul { list-style: disc; }
.en-page .en-prose ol { list-style: decimal; }

.en-page .en-prose li + li {
  margin-top: 0.4em;
}

.en-page .en-prose li::marker {
  color: var(--en-teal);
}

.en-page .en-prose a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.en-page .en-prose strong {
  color: var(--en-heading);
}


/* ==========================================================================
   07 BOTÕES
   Pílula. Todas as variantes têm borda de 2px (transparente nas cheias),
   para que cheias e contornadas tenham exatamente o mesmo tamanho.
   ========================================================================== */

.en-page .en-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 32px;
  border: 2px solid transparent;
  border-radius: var(--en-radius-pill);
  background-color: var(--en-teal);
  color: var(--en-white);
  font-family: var(--en-font);
  font-size: var(--en-btn-size);
  font-weight: 700;
  letter-spacing: var(--en-btn-ls);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--en-tr), border-color var(--en-tr), color var(--en-tr),
              box-shadow var(--en-tr), transform var(--en-tr);
}

.en-page .en-btn:hover {
  transform: translateY(-2px);
}

.en-page .en-btn svg {
  width: 18px;
  height: 18px;
}

/* Primary: teal — CTA principal */
.en-page .en-btn-primary,
.en-page .en-btn-primary:visited {
  background-color: var(--en-teal);
  color: var(--en-white);
}

.en-page .en-btn-primary:hover {
  background-color: var(--en-teal-hover);
  color: var(--en-white);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--en-teal) 40%, transparent);
}

/* Blue: azul da marca */
.en-page .en-btn-blue,
.en-page .en-btn-blue:visited {
  background-color: var(--en-primary);
  color: var(--en-white);
}

.en-page .en-btn-blue:hover {
  background-color: var(--en-primary-hover);
  color: var(--en-white);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--en-primary) 35%, transparent);
}

/* Secondary: laranja — CTA alternativo quando teal e azul já estão na seção */
.en-page .en-btn-secondary,
.en-page .en-btn-secondary:visited {
  background-color: var(--en-orange);
  color: var(--en-white);
}

.en-page .en-btn-secondary:hover {
  background-color: var(--en-orange-hover);
  color: var(--en-white);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--en-orange) 35%, transparent);
}

/* Dark */
.en-page .en-btn-dark,
.en-page .en-btn-dark:visited {
  background-color: var(--en-dark);
  color: var(--en-white);
}

.en-page .en-btn-dark:hover {
  background-color: var(--en-black);
  color: var(--en-white);
  box-shadow: var(--en-shadow-lg);
}

/* Outline: contorno azul, para fundos claros */
.en-page .en-btn-outline,
.en-page .en-btn-outline:visited {
  background-color: transparent;
  border-color: var(--en-primary);
  color: var(--en-primary);
}

.en-page .en-btn-outline:hover {
  background-color: var(--en-primary);
  color: var(--en-white);
}

/* Ghost: contorno branco, para fundos escuros e imagens */
.en-page .en-btn-ghost,
.en-page .en-btn-ghost:visited {
  background-color: transparent;
  border-color: var(--en-white);
  color: var(--en-white);
}

.en-page .en-btn-ghost:hover {
  background-color: color-mix(in srgb, var(--en-white) 14%, transparent);
  color: var(--en-white);
}

/* Tamanhos */
.en-page .en-btn--sm {
  padding: 11px 22px;
  font-size: 12px;
}

.en-page .en-btn--block {
  width: 100%;
}

/* Grupo de botões */
.en-page .en-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center;
}

.en-page .en-actions--left {
  justify-content: flex-start;
}

/* CTA contextual ao fim de cada seção de conteúdo */
.en-page .en-section-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: var(--en-section-cta-mt);
}


/* ==========================================================================
   08 BADGES, TAGS E CHIPS
   ========================================================================== */

/* Badge: a cor sai de --en-badge-color; o fundo é a mesma cor a 12% */
.en-page .en-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--en-radius-pill);
  background-color: color-mix(in srgb, var(--en-badge-color, var(--en-primary)) 12%, transparent);
  color: var(--en-badge-color, var(--en-primary));
  font-size: var(--en-badge-size);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
}

.en-page .en-badge--primary   { --en-badge-color: var(--en-primary); }
.en-page .en-badge--accent    { --en-badge-color: var(--en-teal-text); }
.en-page .en-badge--secondary { --en-badge-color: var(--en-orange-text); }
.en-page .en-badge--purple    { --en-badge-color: var(--en-purple); }
.en-page .en-badge--warn      { --en-badge-color: var(--en-warn-text); }

.en-page :is(.en-panel--brand, .en-panel--dark, .en-on-dark) .en-badge {
  --en-badge-color: var(--en-teal);
}

/* Tag: rótulo translúcido sobre fundo escuro ou imagem (topo do hero) */
.en-page .en-tag {
  display: inline-block;
  margin-bottom: 24px;
  padding: 7px 18px;
  border: 1px solid color-mix(in srgb, var(--en-white) 22%, transparent);
  border-radius: var(--en-radius-pill);
  background-color: color-mix(in srgb, var(--en-white) 12%, transparent);
  color: var(--en-white);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* Chip: item de lista de features */
.en-page .en-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.en-page .en-chips--center {
  justify-content: center;
}

.en-page .en-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid var(--en-border-strong);
  border-radius: var(--en-radius-pill);
  background-color: var(--en-surface-alt);
  color: var(--en-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  transition: background-color var(--en-tr), border-color var(--en-tr), color var(--en-tr);
}

.en-page .en-chip svg {
  width: 16px;
  height: 16px;
  color: var(--en-teal);
}

.en-page a.en-chip:hover,
.en-page .en-chip--hover:hover {
  background-color: var(--en-primary);
  border-color: var(--en-primary);
  color: var(--en-white);
}

.en-page a.en-chip:hover svg,
.en-page .en-chip--hover:hover svg {
  color: var(--en-white);
}


/* ==========================================================================
   09 CARDS E ÍCONES
   ========================================================================== */

.en-page .en-card {
  position: relative;
  padding: 32px 28px;
  border: 1px solid var(--en-border);
  border-radius: var(--en-radius-lg);
  background-color: var(--en-surface);
  box-shadow: var(--en-shadow-card);
  transition: box-shadow var(--en-tr), transform var(--en-tr), border-color var(--en-tr);
}

.en-page .en-card:hover {
  box-shadow: var(--en-shadow-lg);
  transform: translateY(-3px);
}

.en-page .en-card--static:hover {
  box-shadow: var(--en-shadow-card);
  transform: none;
}

.en-page .en-card > :last-child {
  margin-bottom: 0;
}

.en-page .en-card p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--en-text-mid);
}

/* Imagem no topo do card */
.en-page .en-card-media {
  display: block;
  margin-bottom: 20px;
  overflow: hidden;
  border-radius: var(--en-radius);
  background-color: var(--en-light);
}

.en-page .en-card-media img {
  width: 100%;
  height: auto;
}

/* Card com borda lateral de destaque */
.en-page .en-card--accent  { border-left: 4px solid var(--en-teal); }
.en-page .en-card--primary { border-left: 4px solid var(--en-primary); }

/* Card destacado (contorno teal) */
.en-page .en-card--featured {
  border: 2px solid var(--en-teal);
  box-shadow: var(--en-shadow);
}

/* Card que é link inteiro */
.en-page a.en-card {
  display: block;
  color: inherit;
}

/* Ícone em quadrado com gradiente */
.en-page .en-icon {
  --en-icon-from: var(--en-primary);
  --en-icon-to:   var(--en-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  border-radius: 14px;
  background-color: var(--en-icon-from);
  background-image: linear-gradient(135deg, var(--en-icon-from), var(--en-icon-to));
  color: var(--en-white);
}

.en-page .en-icon svg {
  width: 24px;
  height: 24px;
}

.en-page .en-icon--teal   { --en-icon-from: var(--en-teal);    --en-icon-to: color-mix(in srgb, var(--en-teal) 70%, var(--en-white)); }
.en-page .en-icon--purple { --en-icon-from: var(--en-purple);  --en-icon-to: color-mix(in srgb, var(--en-purple) 70%, var(--en-primary)); }
.en-page .en-icon--orange { --en-icon-from: var(--en-orange);  --en-icon-to: var(--en-warn); }
.en-page .en-icon--dark   { --en-icon-from: var(--en-primary-dark); --en-icon-to: var(--en-primary); }

/* Ícone discreto (fundo translúcido), bom para seções escuras */
.en-page .en-icon--soft {
  border: 1px solid var(--en-border);
  background-image: none;
  background-color: var(--en-surface-alt);
  color: var(--en-teal);
}


/* ==========================================================================
   10 BLOCOS DE CONTEÚDO
   ========================================================================== */

/* ── Dores / desafios (ícone vermelho) ── */
.en-page .en-challenges {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.en-page .en-challenge {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--en-border);
  border-radius: var(--en-radius-lg);
  background-color: var(--en-surface);
  box-shadow: var(--en-shadow-card);
}

.en-page .en-challenge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--en-danger) 10%, transparent);
  color: var(--en-danger);
}

.en-page .en-challenge-icon svg {
  width: 18px;
  height: 18px;
}

.en-page .en-challenge p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--en-text-mid);
}

/* ── Antes → depois ── */
.en-page .en-adapts {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.en-page .en-adapt {
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--en-border);
  border-radius: var(--en-radius-lg);
  background-color: var(--en-surface);
}

.en-page .en-adapt-from,
.en-page .en-adapt-to {
  flex: 1;
  min-width: 0;
  padding: 20px;
}

.en-page .en-adapt-to {
  background-color: color-mix(in srgb, var(--en-teal) 7%, transparent);
}

.en-page .en-adapt-label {
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--en-text-soft);
}

.en-page .en-adapt-to .en-adapt-label {
  color: var(--en-teal-text);
}

.en-page .en-adapt-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--en-heading);
}

.en-page .en-adapt-arrow {
  flex-shrink: 0;
  color: var(--en-teal);
}

.en-page .en-adapt-arrow svg {
  width: 18px;
  height: 18px;
}

/* ── Resultados (números em cards) ── */
.en-page .en-results {
  display: grid;
  gap: var(--en-grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.en-page .en-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 24px;
  border: 1px solid var(--en-border);
  border-radius: var(--en-radius-lg);
  background-color: var(--en-surface);
  box-shadow: var(--en-shadow-card);
  text-align: center;
}

.en-page .en-result-value {
  display: block;
  margin-bottom: 8px;
  font-size: var(--en-result-size);
  font-weight: 700;
  line-height: 1;
  color: var(--en-value-color);
}

.en-page .en-result-source {
  display: block;
  margin-top: auto;
  padding-top: 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--en-text-soft);
}

.en-page .en-result--teal .en-result-value {
  color: var(--en-teal);
}

.en-page .en-result-label {
  font-size: 15px;
  line-height: 1.6;
  color: var(--en-text-mid);
}

/* ── Stats coloridos (4 blocos, painel en-panel--flush) ── */
.en-page .en-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.en-page .en-stats--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.en-page .en-stat {
  --en-stat-bg: var(--en-primary);
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 44px 32px;
  background-color: var(--en-stat-bg);
  color: var(--en-white);
}

.en-page .en-stat:nth-child(4n + 1) { --en-stat-bg: var(--en-orange); }
.en-page .en-stat:nth-child(4n + 2) { --en-stat-bg: var(--en-teal); }
.en-page .en-stat:nth-child(4n + 3) { --en-stat-bg: var(--en-purple); }
.en-page .en-stat:nth-child(4n + 4) { --en-stat-bg: var(--en-primary); }

/* 4 blocos: número em cima e texto embaixo, para caber em colunas estreitas */
.en-page .en-stats:not(.en-stats--3) .en-stat {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.en-page .en-stat > div {
  min-width: 0;
}

.en-page .en-stat-value {
  flex-shrink: 0;
  font-size: var(--en-stat-size);
  font-weight: 800;
  line-height: 1;
  color: var(--en-white);
}

.en-page .en-stat-label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--en-white) 72%, transparent);
}

.en-page .en-stat-desc {
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: color-mix(in srgb, var(--en-white) 92%, transparent);
}

/* ── Passos numerados ── */
.en-page .en-steps {
  display: grid;
  gap: var(--en-grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  counter-reset: en-step;
}

.en-page .en-step {
  position: relative;
  padding: 36px 30px;
  border: 1px solid var(--en-border);
  border-radius: var(--en-radius-lg);
  background-color: var(--en-surface);
  box-shadow: var(--en-shadow-card);
  counter-increment: en-step;
}

.en-page .en-step::before {
  content: counter(en-step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  border-radius: 50%;
  background-image: linear-gradient(135deg, var(--en-primary), var(--en-teal));
  color: var(--en-white);
  font-size: 18px;
  font-weight: 700;
}

.en-page .en-step p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--en-text-mid);
}

/* ── Linha do tempo ── */
.en-page .en-timeline {
  position: relative;
  display: grid;
  gap: 36px;
  max-width: 720px;
  margin-inline: auto;
  padding-left: 36px;
}

.en-page .en-timeline::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 10px;
  width: 2px;
  background-color: var(--en-border-strong);
}

.en-page .en-timeline-item {
  position: relative;
}

.en-page .en-timeline-item::before {
  content: "";
  position: absolute;
  top: 4px;
  left: -33px;
  width: 16px;
  height: 16px;
  border: 3px solid var(--en-white);
  border-radius: 50%;
  background-color: var(--en-teal);
  box-shadow: 0 0 0 2px var(--en-teal);
}

.en-page .en-timeline-item p {
  font-size: 15px;
  color: var(--en-text-mid);
}

/* ── Listas ── */
.en-page .en-checklist {
  display: grid;
  gap: 14px;
  align-content: start;
}

.en-page .en-checklist li {
  position: relative;
  padding-left: 34px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--en-text);
}

.en-page .en-checklist li::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--en-teal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-position: center;
  background-size: 13px;
  background-repeat: no-repeat;
}

.en-page .en-list {
  display: grid;
  gap: 10px;
}

.en-page .en-list li {
  position: relative;
  padding-left: 22px;
  color: var(--en-text-mid);
}

.en-page .en-list li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--en-teal);
}

/* ── Lista de itens com ícone ──
   <div class="en-rows">
     <div class="en-row">
       <div class="en-icon">svg</div>
       <div><h3 class="en-h3">Título</h3><p>Descrição</p></div>
     </div>
   </div> */
.en-page .en-rows {
  display: grid;
  gap: 22px;
}

.en-page .en-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.en-page .en-row > .en-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: 12px;
}

.en-page .en-row > .en-icon svg {
  width: 20px;
  height: 20px;
}

.en-page .en-row > div:last-child {
  min-width: 0;
}

.en-page .en-row :is(.en-h3, .en-h4) {
  margin-bottom: 4px;
  font-size: 16px;
}

.en-page .en-row p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--en-text-mid);
}

/* ── Depoimento ── */
.en-page .en-testimonial {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  border: 1px solid var(--en-border);
  border-radius: var(--en-radius-lg);
  background-color: var(--en-surface);
  box-shadow: var(--en-shadow-card);
}

.en-page .en-testimonial-text {
  position: relative;
  padding-top: 28px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--en-text-mid);
}

.en-page .en-testimonial-text::before {
  content: "\201C";
  position: absolute;
  top: -10px;
  left: -2px;
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: var(--en-teal);
}

.en-page .en-testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
}

.en-page .en-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 50%;
  background-image: linear-gradient(135deg, var(--en-primary), var(--en-teal));
  color: var(--en-white);
  font-size: 16px;
  font-weight: 700;
}

.en-page .en-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.en-page .en-testimonial-name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--en-heading);
}

.en-page .en-testimonial-role {
  display: block;
  font-size: 13px;
  color: var(--en-text-soft);
}

/* ── Citação de destaque ── */
.en-page .en-quote {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}

.en-page .en-quote blockquote {
  margin-bottom: 24px;
  font-size: var(--en-quote-size);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--en-heading);
}

.en-page .en-quote cite {
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  color: var(--en-text-mid);
}

/* ── Preços ── */
.en-page .en-pricing {
  display: grid;
  gap: var(--en-grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  align-items: stretch;
}

.en-page .en-price-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px 32px;
  border: 1px solid var(--en-border);
  border-radius: var(--en-radius-lg);
  background-color: var(--en-surface);
  box-shadow: var(--en-shadow-card);
  text-align: center;
}

.en-page .en-price-card--featured {
  border: 2px solid var(--en-teal);
  box-shadow: var(--en-shadow);
}

.en-page .en-price {
  font-size: var(--en-price-size);
  font-weight: 700;
  line-height: 1;
  color: var(--en-value-color);
}

.en-page .en-price small {
  font-size: 15px;
  font-weight: 500;
  color: var(--en-text-soft);
}

.en-page .en-price-card .en-checklist {
  flex: 1;
  text-align: left;
}

/* ── Tabela ── */
.en-page .en-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--en-border);
  border-radius: var(--en-radius-lg);
  box-shadow: var(--en-shadow-card);
}

.en-page .en-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background-color: var(--en-white);
  font-size: 15px;
}

.en-page .en-table th {
  padding: 16px 20px;
  border: 0;
  background-color: var(--en-primary-dark);
  color: var(--en-white);
  font-weight: 700;
  text-align: left;
}

.en-page .en-table td {
  padding: 14px 20px;
  border: 0;
  border-bottom: 1px solid var(--en-divider);
  background-color: transparent;
  color: color-mix(in srgb, var(--en-dark) 78%, transparent);
}

.en-page .en-table tr:last-child td {
  border-bottom: 0;
}

.en-page .en-table tbody tr:hover td {
  background-color: var(--en-light);
}

/* ── Formulário ── */
.en-page .en-form {
  display: grid;
  gap: 18px;
  max-width: 560px;
  margin-inline: auto;
}

.en-page .en-form-row {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.en-page .en-form label {
  display: grid;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--en-heading);
}

.en-page .en-form :is(input, textarea, select) {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--en-border-strong);
  border-radius: var(--en-radius);
  background-color: var(--en-white);
  color: var(--en-dark);
  font-family: var(--en-font);
  font-size: 15px;
  line-height: 1.4;
  outline: none;
  box-shadow: none;
  transition: border-color var(--en-tr), box-shadow var(--en-tr);
}

.en-page .en-form :is(input, textarea, select):focus {
  border-color: var(--en-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--en-primary) 14%, transparent);
}

.en-page .en-form textarea {
  min-height: 120px;
  resize: vertical;
}

.en-page .en-form-note {
  font-size: 13px;
  color: var(--en-text-soft);
}

/* ── Alerta / aviso ── */
.en-page .en-alert {
  padding: 18px 24px;
  border: 1px solid var(--en-border);
  border-left: 4px solid var(--en-primary);
  border-radius: var(--en-radius);
  background-color: var(--en-surface);
  color: var(--en-text-mid);
  font-size: 15px;
}

.en-page .en-alert--accent { border-left-color: var(--en-teal); }
.en-page .en-alert--warn   { border-left-color: var(--en-warn); }


/* ==========================================================================
   11 FAQ — padrão obrigatório, sem JavaScript
   Usa <details> nativo. O atributo name="en-faq" faz com que abrir uma
   pergunta feche a anterior. A numeração 01, 02... é automática.

   <div class="en-faq">
     <details class="en-faq-item" name="en-faq">
       <summary class="en-faq-q">Pergunta</summary>
       <div class="en-faq-a"><p>Resposta. Use <strong> em 2 ou 3 termos.</p></div>
     </details>
   </div>

   O Schema FAQPage continua sendo gerado na página.
   ========================================================================== */

.en-page .en-faq {
  max-width: var(--en-container-narrow);
  margin-inline: auto;
  counter-reset: en-faq;
}

.en-page .en-faq-item {
  border-bottom: 1px solid var(--en-divider);
  counter-increment: en-faq;
}

.en-page .en-faq-item:last-child {
  border-bottom: 0;
}

.en-page .en-faq-q {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 0;
  list-style: none;
  cursor: pointer;
  font-size: var(--en-faq-q-size);
  font-weight: 600;
  line-height: 1.4;
  color: var(--en-heading);
  user-select: none;
  transition: color var(--en-tr);
}

.en-page .en-faq-q::-webkit-details-marker {
  display: none;
}

.en-page .en-faq-q::marker {
  content: "";
}

.en-page .en-faq-q::before {
  content: counter(en-faq, decimal-leading-zero);
  flex-shrink: 0;
  width: 28px;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 600;
  color: var(--en-primary);
}

.en-page .en-faq-q::after {
  content: "+";
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  margin-left: auto;
  border-radius: 50%;
  background-color: var(--en-surface-alt);
  color: var(--en-primary);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.3s, background-color 0.3s, color 0.3s;
}

.en-page .en-faq-q:hover {
  color: var(--en-primary);
}

.en-page .en-faq-item[open] > .en-faq-q::after {
  transform: rotate(45deg);
  background-color: var(--en-primary);
  color: var(--en-white);
}

.en-page .en-faq-a {
  padding: 0 40px 22px 44px;   /* 44px alinha a resposta com o texto da pergunta */
  font-size: var(--en-faq-a-size);
  line-height: 1.7;
  color: var(--en-text-mid);
}

.en-page .en-faq-a > * + * {
  margin-top: 0.8em;
}

.en-page .en-faq-a strong {
  font-weight: 600;
  color: var(--en-heading);
}

/* Abertura animada nos navegadores que suportam; nos demais abre direto */
.en-page .en-faq-item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.35s ease, content-visibility 0.35s allow-discrete;
}

.en-page .en-faq-item[open]::details-content {
  block-size: auto;
}

.en-page :is(.en-panel--brand, .en-panel--dark, .en-on-dark) .en-faq-q::before {
  color: var(--en-teal);
}


/* ==========================================================================
   12 LOGOS E CLIENTES
   ========================================================================== */

/* Faixa animada de logos: sempre um painel próprio.
   <section class="en-panel en-panel--flush en-logos" aria-label="Clientes do Endoo">
     <div class="en-logos-track"> logos + os mesmos logos repetidos </div>
   </section>
   Os logos repetidos levam aria-hidden="true" e alt="". */
.en-page .en-logos {
  --en-bg-base: linear-gradient(180deg, var(--en-purple), var(--en-primary));
  padding: 24px 0;
  background-color: var(--en-primary);
  background-image: var(--en-bg-base);
}

.en-page .en-logos-track {
  display: flex;
  align-items: center;
  gap: 48px;
  width: max-content;
  animation: en-logo-scroll var(--en-logos-speed) linear infinite;
}

.en-page .en-logos:hover .en-logos-track {
  animation-play-state: paused;
}

.en-page .en-logos-track img {
  flex-shrink: 0;
  width: auto;
  max-width: none;
  height: var(--en-logo-h);
}

/* Variante clara (fundo branco, sem gradiente) */
.en-page .en-logos--light {
  --en-bg-base: none;
  background-color: var(--en-white);
}

@keyframes en-logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Grade estática de clientes */
.en-page .en-clients {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.en-page .en-client {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  padding: 24px 36px;
  border: 1px solid var(--en-border);
  border-radius: var(--en-radius-lg);
  background-color: var(--en-white);
  transition: box-shadow var(--en-tr);
}

.en-page .en-client:hover {
  box-shadow: var(--en-shadow);
}

.en-page .en-client img {
  width: auto;
  max-height: 56px;
}


/* ==========================================================================
   13 MÍDIA E TELAS SIMULADAS
   ========================================================================== */

.en-page .en-shot {
  overflow: hidden;
  border-radius: var(--en-radius-lg);
  box-shadow: var(--en-shadow-lg);
}

.en-page .en-shot img {
  width: 100%;
}

/* Bloco de mídia decorativo (quando ainda não há imagem) */
.en-page .en-media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  border-radius: var(--en-radius-lg);
  background-color: var(--en-primary);
  background-image: linear-gradient(135deg, var(--en-primary), var(--en-teal));
  color: var(--en-white);
}

.en-page .en-media svg {
  width: 88px;
  height: 88px;
  opacity: 0.9;
}

/* Vídeo responsivo 16:9 (iframe do YouTube/Vimeo) */
.en-page .en-video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--en-radius-lg);
  background-color: var(--en-ink);
  box-shadow: var(--en-shadow-lg);
}

.en-page .en-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* ── TELAS SIMULADAS (en-mock) ──
   Representações do produto feitas em HTML/CSS, para usar quando não há print.
   Todas as peças leem as cores de papel, então funcionam em fundo claro e escuro.

   Cartão:       <div class="en-mock"> ... </div>   (várias juntas: en-mock-stack)
   Barra de app: <div class="en-mock-bar"><i></i><i></i><i></i>Título</div>
   Cabeçalho:    en-mock-head > en-mock-title + en-badge
   Textos:       en-mock-label, en-mock-big, en-mock-sub, en-mock-meta (span + b)
   Progresso:    <div class="en-progress"><span style="--en-pct: 72%"></span></div>
                 variantes en-progress--teal, --warn, --muted
   Blocos:       en-mock-tiles (3 colunas; --2 para duas) > en-mock-tile
                 (svg, b, en-mock-tile-name, en-mock-tile-sub)
   Linhas:       en-mock-rows > en-mock-row (span com <small> + b) e en-mock-total
   Item:         en-mock-item > en-icon + div (en-mock-item-name, en-mock-item-desc) + en-badge
   Chat:         en-mock-msgs > en-mock-msg (--user / --ai) + en-mock-source; en-mock-input
   Nota:         en-mock-note (caixa de destaque dentro do cartão)                    */

.en-page .en-mock {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--en-border);
  border-radius: var(--en-radius-lg);
  background-color: var(--en-surface);
  box-shadow: var(--en-shadow-lg);
  color: var(--en-text);
  font-size: 13px;
  line-height: 1.5;
}

.en-page :is(.en-panel--brand, .en-panel--dark, .en-on-dark) .en-mock {
  box-shadow: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.en-page .en-mock-stack {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.en-page .en-mock-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -4px 0 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--en-text-soft);
}

.en-page .en-mock-bar i {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--en-orange);
}

.en-page .en-mock-bar i:nth-child(2) { background-color: var(--en-warn); }
.en-page .en-mock-bar i:nth-child(3) { background-color: var(--en-teal); margin-right: 6px; }

.en-page .en-mock-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.en-page .en-mock-head > .en-badge {
  flex-shrink: 0;
  white-space: nowrap;
}

.en-page .en-mock-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--en-heading);
}

.en-page .en-mock-label {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--en-text-soft);
}

.en-page .en-mock-big {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--en-heading);
}

.en-page .en-mock-sub {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--en-value-color);
}

.en-page .en-mock-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--en-text-soft);
}

.en-page .en-mock-meta b {
  flex-shrink: 0;
  color: var(--en-value-color);
}

/* Barra de progresso */
.en-page .en-progress {
  height: 8px;
  margin-top: 16px;
  overflow: hidden;
  border-radius: var(--en-radius-pill);
  background-color: var(--en-surface-alt);
}

.en-page .en-progress > span {
  display: block;
  width: var(--en-pct, 0%);
  height: 100%;
  border-radius: inherit;
  background-color: var(--en-primary);
  background-image: linear-gradient(90deg, var(--en-primary), var(--en-teal));
}

.en-page .en-progress--teal > span  { background-image: none; background-color: var(--en-teal); }
.en-page .en-progress--warn > span  { background-image: none; background-color: var(--en-orange); }
.en-page .en-progress--muted > span { background-image: none; background-color: var(--en-border-strong); }

/* Blocos lado a lado */
.en-page .en-mock-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.en-page .en-mock-tiles--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.en-page .en-mock-tile {
  min-width: 0;
  padding: 12px 10px;
  border-radius: var(--en-radius);
  background-color: var(--en-surface-alt);
  text-align: center;
}

.en-page .en-mock-tile svg {
  width: 20px;
  height: 20px;
  margin: 0 auto 6px;
  color: var(--en-teal);
}

.en-page .en-mock-tile b {
  display: block;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--en-value-color);
}

.en-page .en-mock-tile b small {
  font-size: 13px;
  font-weight: 600;
  color: var(--en-text-soft);
}

.en-page .en-mock-tile-name {
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--en-heading);
}

.en-page .en-mock-tile-sub {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--en-text-soft);
}

/* Linhas (extrato, ranking, métricas) */
.en-page .en-mock-rows {
  margin-top: 12px;
}

.en-page .en-mock-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--en-divider);
  font-size: 13px;
  line-height: 1.4;
  color: var(--en-text);
}

.en-page .en-mock-row small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--en-text-soft);
}

.en-page .en-mock-row b {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--en-value-color);
  white-space: nowrap;
}

.en-page .en-mock-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  font-size: 12px;
  color: var(--en-text-soft);
}

.en-page .en-mock-total b {
  font-size: 22px;
  font-weight: 700;
  color: var(--en-heading);
  white-space: nowrap;
}

/* Item de lista com ícone e selo */
.en-page .en-mock-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--en-divider);
}

.en-page .en-mock-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.en-page .en-mock-item > .en-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin: 0;
  border-radius: 10px;
}

.en-page .en-mock-item > .en-icon svg {
  width: 18px;
  height: 18px;
}

.en-page .en-mock-item > div:not(.en-icon) {
  flex: 1;
  min-width: 0;
}

.en-page .en-mock-item > .en-badge {
  flex-shrink: 0;
  font-size: 10px;
}

.en-page .en-mock-item-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--en-heading);
}

.en-page .en-mock-item-desc {
  font-size: 12px;
  line-height: 1.45;
  color: var(--en-text-soft);
}

/* Chat */
.en-page .en-mock-msgs {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}

.en-page .en-mock-msg {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
}

.en-page .en-mock-msg--user {
  justify-self: end;
  border-bottom-right-radius: 4px;
  background-color: var(--en-primary);
  color: var(--en-white);
}

.en-page .en-mock-msg--ai {
  justify-self: start;
  border-bottom-left-radius: 4px;
  background-color: var(--en-surface-alt);
  color: var(--en-text);
}

.en-page .en-mock-source {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--en-value-color);
}

.en-page .en-mock-source svg {
  width: 13px;
  height: 13px;
}

.en-page .en-mock-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px 10px 16px;
  border: 1px solid var(--en-border-strong);
  border-radius: var(--en-radius-pill);
  font-size: 12px;
  color: var(--en-text-soft);
}

.en-page .en-mock-input i {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--en-teal);
  color: var(--en-white);
}

.en-page .en-mock-input svg {
  width: 14px;
  height: 14px;
}

/* Caixa de destaque dentro do cartão */
.en-page .en-mock-note {
  margin-top: 16px;
  padding: 14px 16px;
  border-left: 3px solid var(--en-teal);
  border-radius: var(--en-radius-sm);
  background-color: var(--en-surface-alt);
  font-size: 13px;
  line-height: 1.6;
  color: var(--en-text);
}

.en-page .en-mock-note strong {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  color: var(--en-heading);
}

.en-page .en-mock-note svg {
  width: 15px;
  height: 15px;
  color: var(--en-teal);
}


/* ==========================================================================
   14 UTILITÁRIOS
   ========================================================================== */

.en-page .en-center    { text-align: center; }
.en-page .en-mx-auto   { margin-inline: auto; }
.en-page .en-mt-0      { margin-top: 0; }
.en-page .en-mb-0      { margin-bottom: 0; }
.en-page .en-mt-16     { margin-top: 16px; }
.en-page .en-mt-32     { margin-top: 32px; }
.en-page .en-mt-48     { margin-top: 48px; }
.en-page .en-mb-16     { margin-bottom: 16px; }
.en-page .en-mb-32     { margin-bottom: 32px; }
.en-page .en-mb-48     { margin-bottom: 48px; }

.en-page .en-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   15 RESPONSIVO — layout (os tamanhos ficam nos tokens, seção 02)
   ========================================================================== */

/* Hero e CTA final: padding maior no topo do hero */
.en-page .en-hero {
  padding-top: var(--en-hero-pt);
  padding-bottom: var(--en-hero-pb);
}

.en-page .en-hero--center,
.en-page .en-cta {
  text-align: center;
}

.en-page :is(.en-hero--center, .en-cta) .en-lead {
  margin-inline: auto;
}

.en-page .en-cta .en-actions {
  margin-top: 32px;
}

.en-page .en-hero .en-actions {
  margin-top: 32px;
  justify-content: flex-start;
}

.en-page .en-hero--center .en-actions {
  justify-content: center;
}

@media (max-width: 900px) {
  .en-page .en-grid--2,
  .en-page .en-split,
  .en-page .en-split--wide {
    grid-template-columns: minmax(0, 1fr);
  }

  .en-page .en-grid--3,
  .en-page .en-grid--4,
  .en-page .en-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .en-page .en-stats--3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .en-page .en-split--reverse > :first-child {
    order: 0;
  }

  .en-page .en-panel--dark::before {
    width: 480px;
    height: 480px;
  }

  .en-page .en-panel--dark::after {
    width: 320px;
    height: 320px;
  }
}

@media (max-width: 600px) {
  .en-page .en-grid--3,
  .en-page .en-grid--4,
  .en-page .en-stats,
  .en-page .en-form-row {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Botões ocupam a largura toda e podem quebrar linha */
  .en-page .en-actions,
  .en-page .en-section-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .en-page .en-actions .en-btn,
  .en-page .en-section-cta .en-btn {
    width: 100%;
    padding-block: 14px;
    white-space: normal;
    line-height: 1.35;
  }

  .en-page .en-card,
  .en-page .en-step,
  .en-page .en-testimonial,
  .en-page .en-price-card {
    padding: 28px 22px;
  }

  .en-page .en-stat {
    padding: 32px 24px;
  }

  .en-page .en-stats:not(.en-stats--3) .en-stat {
    flex-direction: row;
    align-items: center;
    gap: 18px;
  }

  /* Card de lista: no celular, imagem pequena à esquerda e título ao lado */
  .en-page .en-card--row-mobile {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 14px 18px 14px 14px;
  }

  .en-page .en-card--row-mobile .en-card-media {
    margin-bottom: 0;
  }

  .en-page .en-card--row-mobile :is(.en-h3, .en-h4) {
    margin-bottom: 0;
  }

  .en-page .en-adapt {
    flex-direction: column;
    align-items: stretch;
  }

  .en-page .en-adapt-arrow {
    align-self: center;
    transform: rotate(90deg);
  }

  .en-page .en-faq-a {
    padding: 0 0 20px 44px;
  }

  .en-page .en-client {
    min-width: 0;
    flex: 1 1 140px;
    padding: 20px;
  }

  .en-page .en-logos-track {
    gap: 32px;
  }

  .en-page .en-hide-mobile {
    display: none;
  }

  /* Card em linha com ícone (em vez de imagem): coluna estreita */
  .en-page .en-card--row-mobile:has(> .en-icon) {
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    padding: 18px;
  }

  .en-page .en-card--row-mobile > .en-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 0;
    border-radius: 12px;
  }

  .en-page .en-card--row-mobile > .en-icon svg {
    width: 20px;
    height: 20px;
  }

  .en-page .en-card--row-mobile :is(.en-h3, .en-h4) {
    margin-bottom: 4px;
  }

  .en-page .en-mock {
    padding: 16px;
  }

  .en-page .en-mock-big {
    font-size: 28px;
  }

  .en-page .en-mock-tile {
    padding: 10px 6px;
  }

  .en-page .en-mock-tile b {
    font-size: 18px;
  }

  .en-page .en-mock-msg {
    max-width: 94%;
  }

  .en-page .en-mock-item > .en-badge {
    display: none;
  }

  .en-page .en-mock-item:has(+ .en-hide-mobile:last-child) {
    border-bottom: 0;
  }
}


/* ==========================================================================
   16 MOVIMENTO REDUZIDO
   Respeita quem desativou animações no sistema operacional.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .en-page .en-logos-track {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    padding-inline: 24px;
    animation: none;
  }

  .en-page .en-logos-track [aria-hidden="true"] {
    display: none;
  }

  .en-page .en-card:hover,
  .en-page .en-btn:hover {
    transform: none;
  }

  .en-page .en-faq-item::details-content {
    transition: none;
  }
}