/* =============================================================
   eteg-case-stats — tokens do design-system.json (ETEG 2023)
   ─────────────────────────────────────────────────────────────
   Figma: "AgitationSection" node 695:595 (1999×708px)
   Página: /cases/{slug} (resultados alcançados)

   colors.brand.primary     → #1662ff  (fundo azul da seção)
   colors.brand.accent      → #cba6ec  (valores, separadores)
   colors.text.dark         → #1a1a1a  (destaque bold do heading)
   colors.background.dark   → #2d2d2b  (fundo do card de stats)
   colors.text.white        → #ffffff  (eyebrow, heading, rótulos)
   typography.fonts.heading → "Anybody, sans-serif"
   layout.max_width         → 1440px

   Conversões (outer_frame × 0.7204):
   section padding 88px     → 63.4 → DS 64px (top E bottom)
   gap header ↔ bar 80px    → 57.6 → DS 64px (via flex gap)
   stats padding 48px       → 34.6 → DS 32px
   stats gap 16px           → 11.5 → DS 12px
   deco width 929px         → 669.5 → ~47% (constraints: RIGHT, CENTER vertical)
   header max-width 800px   → 800px (target_container — não converter)
   bar borderRadius         → 24px (Figma: 24px — não converter)

   Seletores para "CSS Personalizado" no Elementor:
   .eteg-case-stats                    → seção (fundo azul)
   .eteg-case-stats__deco              → deco abs (direita, centrada verticalmente)
   .eteg-case-stats__inner             → container flex-column max-width 1440px
   .eteg-case-stats__header            → área de texto (max-width 800px)
   .eteg-case-stats__eyebrow           → pré-título branco
   .eteg-case-stats__heading           → título italic uppercase
   .eteg-case-stats__heading-highlight → destaque dark bold (#1a1a1a)
   .eteg-case-stats__description       → parágrafo branco 24px
   .eteg-case-stats__bar               → card dark com border-radius 24px
   .eteg-case-stats__stats             → flex/grid dos indicadores
   .eteg-case-stats__stat              → coluna individual (valor + rótulo)
   .eteg-case-stats__stat-value        → número/resultado (lilás, 56px)
   .eteg-case-stats__stat-label        → texto descritivo (branco, 17px, letter-spacing)
   ============================================================= */

/* ── Reset de bloco ──────────────────────────────────────────── */
.eteg-case-stats *,
.eteg-case-stats *::before,
.eteg-case-stats *::after {
  box-sizing: border-box;
}

/* =============================================================
   EXTRA SMALL — max-width: 374px
   ============================================================= */
@media (max-width: 374px) {
  .eteg-case-stats__heading { font-size: 1.5rem; }
  .eteg-case-stats__inner { padding-inline: 12px; }
}

/* ── BASE: mobile-first (375px+) ─────────────────────────────── */

.eteg-case-stats {
  position: relative;
  overflow: hidden;
  background-color: #1662ff;
  padding: 40px 0 40px; /* top E bottom — Figma: 88px × 0.7204 = 64px */
}

/* Deco — abs direita, centrada verticalmente, oculta mobile */
.eteg-case-stats__deco {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 47%;                      /* Figma: 929px × 0.7204 ≈ 47% de 1440px */
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.eteg-case-stats__deco img {
  display: block;
  width: 100%;
  height: auto;
}

/* Container principal — flex column para empilhar header + bar com gap */
.eteg-case-stats__inner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 16px;
  display: flex;
  flex-direction: column;
  gap: 32px; /* mobile — espaço entre header e stats bar */
}

/* ── Área de texto (cabeçalho) ───────────────────────────────── */
.eteg-case-stats__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.eteg-case-stats__eyebrow {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-size: 1.0625rem; /* 17px */
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.4;
  color: #ffffff;
}

.eteg-case-stats__heading {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-size: clamp(1.75rem, 4.3vw + 0.74rem, 3.5rem); /* mobile: 1.75rem → desktop: 3.5rem — slope=(56-28)/649×100 */
  font-weight: 400;
  font-style: italic;
  text-transform: uppercase;
  line-height: 1.1;
  color: #ffffff;
}

.eteg-case-stats__heading-highlight {
  font-weight: 700;
  font-style: italic;
  color: #1a1a1a; /* dark sobre azul — contraste intencional */
}

.eteg-case-stats__description {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-size: var(--eteg-body-size); /* Figma: 24px → padronizado 16px */
  font-weight: 400;
  line-height: 1.6;
  color: #ffffff;
}

/* ── Card de stats (dark, contido no inner, com border-radius) ── */
.eteg-case-stats__bar {
  background-color: #2d2d2b;
  border-radius: 24px; /* Figma: borderRadius 24px — cantos arredondados visíveis */
  overflow: hidden;
}

/* Título opcional no topo da barra */
.eteg-case-stats__bar-title {
  margin: 0;
  padding: 20px 24px 0;
  font-family: "Anybody", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  color: rgba(255, 255, 255, 0.55);
}

@media (min-width: 1024px) {
  .eteg-case-stats__bar-title {
    font-size: 0.875rem;
    padding: 24px 32px 0;
  }
}

.eteg-case-stats__stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 colunas mobile */
}

.eteg-case-stats__stat {
  position: relative; /* âncora para o ::after do separador */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* valor sempre no topo (mesmo Y para todos) — label fica logo abaixo */
  align-items: center;            /* centraliza horizontalmente */
  text-align: center;
  gap: 6px;
  padding: 24px 16px; /* mobile */
  border-right: 1px solid #cba6ec; /* mobile grid: borda entre colunas */
  border-bottom: 1px solid #cba6ec; /* mobile grid: borda entre linhas */
}

/* remove borda-right da coluna direita (mobile grid) */
.eteg-case-stats__stat:nth-child(2n) {
  border-right: none;
}

/* remove borda-bottom da última linha mobile (2 colunas) */
.eteg-case-stats__stat:nth-last-child(-n+2) {
  border-bottom: none;
}

.eteg-case-stats__stat-value {
  font-family: "Anybody", sans-serif;
  font-size: 2.25rem; /* 36px mobile — Figma: 56px desktop */
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  color: #cba6ec;
}

.eteg-case-stats__stat-label {
  font-family: "Anybody", sans-serif;
  font-size: 0.875rem; /* 14px mobile — Figma: 17px desktop */
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.4;
  letter-spacing: 0.075rem; /* Figma: letterSpacing 1.2px */
  color: #ffffff;
  /* sem min-height — space-between garante o alinhamento dos valores */
}

/* =============================================================
   LARGE PHONE — min-width: 600px
   ============================================================= */
@media (min-width: 600px) {
  .eteg-case-stats__inner { padding-inline: 20px; }
}

/* =============================================================
   LANDSCAPE PHONE — orientation: landscape, max-height: 500px
   ============================================================= */
@media (orientation: landscape) and (max-height: 500px) {
  .eteg-case-stats { padding: 28px 0 28px; }
}

/* =============================================================
   TABLET — min-width: 768px
   ============================================================= */
@media (min-width: 768px) {

  .eteg-case-stats {
    padding: 48px 0 48px;
  }

  .eteg-case-stats__deco {
    display: block;
  }

  .eteg-case-stats__inner {
    padding-inline: 24px;
    gap: 48px;
  }

  .eteg-case-stats__header {
    max-width: 55%; /* deixa espaço para a deco */
    gap: 20px;
  }

  /* tablet: flex-row igual ao desktop — evita linha incompleta com 5 stats */
  .eteg-case-stats__stats {
    display: flex;
    flex-direction: row;
  }

  .eteg-case-stats__stat {
    flex: 1;
    padding: 20px 12px; /* padding reduzido para caber 5 colunas */
    gap: 8px;
    border-right: none;   /* sem border — separador via ::after abaixo */
    border-bottom: none;
  }

  /* reset nth-child do mobile */
  .eteg-case-stats__stat:nth-child(2n),
  .eteg-case-stats__stat:nth-last-child(-n+2) {
    border-right: none;
    border-bottom: none;
  }

  /* separador via ::after (igual ao desktop) */
  .eteg-case-stats__stat:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20px;
    bottom: 20px;
    width: 1px;
    background-color: #cba6ec;
  }

  .eteg-case-stats__stat-value { font-size: 2rem; }
  .eteg-case-stats__stat-label { font-size: 0.75rem; }
}

/* =============================================================
   DESKTOP — min-width: 1024px
   ============================================================= */
@media (min-width: 1024px) {

  .eteg-case-stats {
    padding: 64px 0 64px; /* Figma: 88px × 0.7204 = 63.4 → DS 64px (top e bottom) */
  }

  .eteg-case-stats__inner {
    padding-inline: 32px;
    gap: 64px; /* Figma: section gap 80px × 0.7204 = 57.6 → DS 64px */
  }

  .eteg-case-stats__header {
    max-width: 800px; /* Figma: 800px (target_container) */
    gap: 24px;
  }

  .eteg-case-stats__heading {
    font-size: 3.5rem; /* 56px — Figma: 56px */
    line-height: 1.1;
  }

  /* 5 colunas desktop: flex-row */
  .eteg-case-stats__stats {
    display: flex;
    flex-direction: row;
    align-items: stretch; /* todos os stats mesma altura — necessário para ::after full-height */
  }

  .eteg-case-stats__stat {
    flex: 1;
    padding: 32px; /* Figma: 48px × 0.7204 = 34.6 → DS 32px */
    gap: 12px;
    /* remove border-right (grid) — desktop usa ::after para separadores full-height */
    border-right: none;
    border-bottom: none;
  }

  /* reset regras tablet nth-child */
  .eteg-case-stats__stat:nth-child(2n),
  .eteg-case-stats__stat:nth-child(3n) {
    border-right: none;
  }

  /* separador via pseudo-elemento com 32px de espaçamento top e bottom */
  .eteg-case-stats__stat:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 32px;    /* espaçamento = padding do __stat */
    bottom: 32px;
    width: 1px;
    background-color: #cba6ec;
  }

  .eteg-case-stats__stat-value {
    font-size: 3.5rem; /* 56px — Figma: 56px */
  }

  /* último stat (ex: 12.000%) — fonte menor; padding-top extra desce o valor para alinhar visualmente */
  .eteg-case-stats__stat:last-child {
    padding-top: 40px; /* +8px sobre os 32px base — compensa a diferença de font-size (56→40px = 16px / 2) */
  }
  .eteg-case-stats__stat:last-child .eteg-case-stats__stat-value {
    font-size: 2.5rem; /* 40px — Figma: 40px */
  }

  .eteg-case-stats__stat-label {
    font-size: 1.0625rem; /* 17px — Figma: 17px */
  }
}

/* ── NOTEBOOK: min-width 1280px ─────────────────────────────── */
@media (min-width: 1280px) {

  .eteg-case-stats {
    padding: 48px 0 !important; /* era 64px */
  }

  .eteg-case-stats__inner {
    padding-inline: 48px; /* era 32px */
    gap: 48px;            /* era 64px */
  }

  .eteg-case-stats__header {
    max-width: 700px; /* era 800px */
    gap: 16px;        /* era 24px */
  }

  .eteg-case-stats__heading {
    font-size: 2.5rem; /* era 3.5rem */
    line-height: 1.1;
  }

  .eteg-case-stats__stat {
    flex: 1;
    padding: 24px;      /* era 32px */
    gap: 8px;           /* era 12px */
    border-right: none;
    border-bottom: none;
  }

  .eteg-case-stats__stat:not(:last-child)::after {
    top: 24px;    /* era 32px */
    bottom: 24px;
  }

  .eteg-case-stats__stat-value {
    font-size: 2.25rem; /* era 3.5rem */
  }

  .eteg-case-stats__stat:last-child {
    padding-top: 30px; /* era 40px */
  }

  .eteg-case-stats__stat:last-child .eteg-case-stats__stat-value {
    font-size: 1.875rem; /* era 2.5rem */
  }

  .eteg-case-stats__stat-label {
    font-size: 0.875rem; /* era 1.0625rem */
  }
}

/* =============================================================
   WIDE — min-width: 1440px
   ============================================================= */
@media (min-width: 1440px) {

  .eteg-case-stats {
    padding: 64px 0 !important; /* restaura */
  }

  .eteg-case-stats__inner {
    padding-inline: 80px; /* restaura */
    gap: 64px;            /* restaura */
  }

  .eteg-case-stats__header {
    max-width: 800px; /* restaura */
    gap: 24px;        /* restaura */
  }

  .eteg-case-stats__heading {
    font-size: 3.5rem; /* restaura */
    line-height: 1.1;
  }

  .eteg-case-stats__stat {
    flex: 1;
    padding: 32px;      /* restaura */
    gap: 12px;          /* restaura */
    border-right: none;
    border-bottom: none;
  }

  .eteg-case-stats__stat:not(:last-child)::after {
    top: 32px;    /* restaura */
    bottom: 32px;
  }

  .eteg-case-stats__stat-value {
    font-size: 3.5rem; /* restaura */
  }

  .eteg-case-stats__stat:last-child {
    padding-top: 40px; /* restaura */
  }

  .eteg-case-stats__stat:last-child .eteg-case-stats__stat-value {
    font-size: 2.5rem; /* restaura */
  }

  .eteg-case-stats__stat-label {
    font-size: 1.0625rem; /* restaura */
  }
}


/* ── PRESET: compact — palavras (ATENDIMENTO, AGENTES…) ─────── */
.eteg-case-stats--compact .eteg-case-stats__stat-value {
  font-size: 1.5rem;
  overflow-wrap: break-word;
  word-break: break-word;
}

.eteg-case-stats--compact .eteg-case-stats__stat-label {
  font-size: 0.75rem;
}

@media (min-width: 1024px) {
  .eteg-case-stats--compact .eteg-case-stats__stat-value {
    font-size: 1.875rem !important; /* 30px */
  }

  .eteg-case-stats--compact .eteg-case-stats__stat:last-child .eteg-case-stats__stat-value {
    font-size: 1.875rem !important;
  }

  .eteg-case-stats--compact .eteg-case-stats__stat-label {
    font-size: 0.875rem !important;
  }
}

@media (min-width: 1280px) {
  .eteg-case-stats--compact .eteg-case-stats__stat-value {
    font-size: 1.625rem !important; /* 26px */
  }

  .eteg-case-stats--compact .eteg-case-stats__stat:last-child .eteg-case-stats__stat-value {
    font-size: 1.625rem !important;
  }
}

@media (min-width: 1440px) {
  .eteg-case-stats--compact .eteg-case-stats__stat-value {
    font-size: 1.875rem !important; /* restaura */
  }

  .eteg-case-stats--compact .eteg-case-stats__stat:last-child .eteg-case-stats__stat-value {
    font-size: 1.875rem !important;
  }
}

/* ── PRESET: micro — frases longas (INTEGRAÇÃO TOTAL…) ──────── */
.eteg-case-stats--micro .eteg-case-stats__stat-value {
  font-size: 1.125rem;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.25;
}

.eteg-case-stats--micro .eteg-case-stats__stat-label {
  font-size: 0.6875rem;
}

@media (min-width: 1024px) {
  .eteg-case-stats--micro .eteg-case-stats__stat-value {
    font-size: 1.25rem !important; /* 20px */
  }

  .eteg-case-stats--micro .eteg-case-stats__stat:last-child .eteg-case-stats__stat-value {
    font-size: 1.25rem !important;
  }

  .eteg-case-stats--micro .eteg-case-stats__stat-label {
    font-size: 0.75rem !important;
  }
}

@media (min-width: 1280px) {
  .eteg-case-stats--micro .eteg-case-stats__stat-value {
    font-size: 1.0625rem !important; /* 17px */
  }

  .eteg-case-stats--micro .eteg-case-stats__stat:last-child .eteg-case-stats__stat-value {
    font-size: 1.0625rem !important;
  }
}

@media (min-width: 1440px) {
  .eteg-case-stats--micro .eteg-case-stats__stat-value {
    font-size: 1.25rem !important; /* restaura */
  }

  .eteg-case-stats--micro .eteg-case-stats__stat:last-child .eteg-case-stats__stat-value {
    font-size: 1.25rem !important;
  }
}

/* ── Deco reveal (eteg-scroll-reveal.js) ────────────────────── */
.eteg-case-stats.eteg-reveal .eteg-case-stats__deco {
  opacity: 0;
  transform: translateX(64px);
  transition: opacity 640ms cubic-bezier(0, 0, 0.2, 1),
              transform 640ms cubic-bezier(0, 0, 0.2, 1);
}
.eteg-case-stats.is-revealed .eteg-case-stats__deco {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 200ms;
}

/* ── Content stagger entry (eteg-scroll-reveal.js) ──────────── */
.eteg-case-stats.eteg-reveal .eteg-case-stats__heading {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 500ms cubic-bezier(0, 0, 0.2, 1), transform 500ms cubic-bezier(0, 0, 0.2, 1);
}
.eteg-case-stats.is-revealed .eteg-case-stats__heading {
  opacity: 1;
  transform: none;
  transition-delay: 60ms;
}
.eteg-case-stats.eteg-reveal .eteg-case-stats__stat {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 480ms cubic-bezier(0, 0, 0.2, 1), transform 480ms cubic-bezier(0, 0, 0.2, 1);
}
.eteg-case-stats.is-revealed .eteg-case-stats__stat:nth-child(1) { opacity: 1; transform: none; transition-delay: 160ms; }
.eteg-case-stats.is-revealed .eteg-case-stats__stat:nth-child(2) { opacity: 1; transform: none; transition-delay: 240ms; }
.eteg-case-stats.is-revealed .eteg-case-stats__stat:nth-child(3) { opacity: 1; transform: none; transition-delay: 320ms; }
.eteg-case-stats.is-revealed .eteg-case-stats__stat:nth-child(4) { opacity: 1; transform: none; transition-delay: 400ms; }
.eteg-case-stats.is-revealed .eteg-case-stats__stat:nth-child(5) { opacity: 1; transform: none; transition-delay: 480ms; }
.eteg-case-stats.is-revealed .eteg-case-stats__stat:nth-child(6) { opacity: 1; transform: none; transition-delay: 560ms; }

/* =============================================================
   ACESSIBILIDADE — prefers-reduced-motion
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .eteg-case-stats__deco { transition: none; }

  .eteg-case-stats.eteg-reveal .eteg-case-stats__deco {
    opacity: 1; transform: translateX(0); transition: none;
  }

  .eteg-case-stats.eteg-reveal .eteg-case-stats__heading,
  .eteg-case-stats.eteg-reveal .eteg-case-stats__stat {
    opacity: 1; transform: none; transition: none;
  }
}