/* =============================================================
   eteg-stats-hero — tokens do design-system.json (ETEG 2023)
   ─────────────────────────────────────────────────────────────
   colors.background.dark   → #2D2D2B  (stats bg)
   colors.brand.primary     → #1563FF  (hero bg)
   colors.brand.accent      → #CCA6ED  (stats text, highlight)
   colors.text.on_primary   → #FFFFFF
   typography.fonts.heading → "Anybody, sans-serif"
   typography.fonts.body    → "Inter, sans-serif"
   animation.easing.default → cubic-bezier(0, 0, 0.2, 1)
   breakpoints.tablet       → 768px
   breakpoints.desktop      → 1024px
   breakpoints.wide         → 1440px
   layout.max_width         → 1440px
   ============================================================= */

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

/* ── Fundo azul que cobre o widget inteiro ───────────────────── */
/* O control hero_bg_color do Elementor sobrescreve este valor.  */
/* padding-top: Figma 72px × 0.7204 = 51.87 → DS: 48px          */
.eteg-stats-hero {
  background-color: #1563FF;
  padding-top: 48px;
  overflow: hidden; /* recorta linhas divisórias estendidas na borda direita da seção */
  min-height: 80svh;
  min-height: 80vh; /* fallback */
}

/* Remove marcadores nativos do <ul> */
.eteg-stats-hero__stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-radius: 24px;
  margin-inline: 16px; /* mobile: recuo lateral — DS spacing.scale.2 */
}

/* Lista de problemas — reset de marcadores, CSS counter e layout */
.eteg-stats-hero__problems {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: problem-counter;
  display: flex;
  flex-direction: column;
}

.eteg-stats-hero__problem {
  counter-increment: problem-counter;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  position: relative;                     /* ancora o pseudo-element de desktop */
}

.eteg-stats-hero__problem-number::before {
  content: counter(problem-counter, decimal-leading-zero);
}

/* =============================================================
   EXTRA SMALL — max-width: 374px
   Galaxy Fold fechado (280px), iPhone SE 1ª gen (320px),
   pequenos Android (360px)
   ============================================================= */
@media (max-width: 374px) {

  .eteg-stats-hero__stat {
    padding: 12px;
  }

  .eteg-stats-hero__stat-value {
    font-size: 1.375rem;
  }

  /* Números dos problemas menores para evitar overflow */
  .eteg-stats-hero__problem-number {
    font-size: 1.75rem;
    min-width: 2.75rem;
  }

  .eteg-stats-hero__problem {
    gap: 10px;
  }
}

/* ── Barra de estatísticas — mobile: grade 2×2 ───────────────── */
.eteg-stats-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

/* coluna direita: sem borda-right */
.eteg-stats-hero__stat:nth-child(2n) {
  border-right: none;
}

/* linha superior: borda-bottom para separar das de baixo */
.eteg-stats-hero__stat:nth-child(-n+2) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.eteg-stats-hero__stat-label {
  font-family: "Inter", sans-serif;       /* typography.fonts.body */
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;                  /* overline.letter_spacing */
  text-transform: uppercase;
  line-height: 1.3;
}

.eteg-stats-hero__stat-value {
  font-family: "Anybody", sans-serif;     /* typography.fonts.heading */
  font-size: clamp(1.75rem, 1.2vw + 1.46rem, 2.25rem); /* mobile: 1.75rem → desktop: 2.25rem */
  font-weight: 800;                       /* typography.weights.extrabold */
  line-height: 1;
  letter-spacing: -0.02em;
}

/* ── Seção hero — mobile: coluna única ───────────────────────── */
/* Sem background próprio: herda o azul do .eteg-stats-hero.     */
.eteg-stats-hero__hero {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-left: 16px !important;   /* alinhamento: DS container_padding.mobile */
  padding-bottom: 0 !important;    /* imagem cola na borda inferior da seção */
}

/* ── Coluna esquerda: heading + CTA ─────────────────────────── */
.eteg-stats-hero__left {
  display: flex;
  flex-direction: column;
  gap: 24px;                              /* spacing.scale.3 */
}

.eteg-stats-hero__heading {
  margin: 0;
  font-family: "Anybody", sans-serif;     /* typography.fonts.heading */
  font-size: clamp(1.75rem, 7vw, 4.5rem); /* desktop: 72px */
  font-weight: 400;                       /* Figma: fw 400 — destaque usa 700 via __highlight */
  font-style: italic;                     /* Figma: todo o título é itálico */
  line-height: 1;                         /* Figma: 77px/77px = 100% */
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.eteg-stats-hero__highlight {
  font-style: italic;
  font-weight: 700;                       /* Figma: "CARO" fw 700, resto fw 400 */
}

.eteg-stats-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;                               /* spacing.scale.1 */
  font-family: "Anybody", sans-serif;     /* Figma: Anybody fw 900 */
  font-size: 1.125rem;                    /* Figma: 18px */
  font-weight: 900;                       /* Figma: fw 900 */
  line-height: 1.556;                     /* Figma: 28px / 18px */
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.9;
  transition: opacity 250ms cubic-bezier(0, 0, 0.2, 1); /* animation.easing.default */
}

.eteg-stats-hero__cta:hover,
.eteg-stats-hero__cta:focus-visible {
  opacity: 1;
}

.eteg-stats-hero__cta:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 2px;
}


.eteg-stats-hero__problem:first-child {
  border-top: none;
  padding-top: 0;
}

.eteg-stats-hero__problem-number {
  font-family: "Anybody", sans-serif;     /* typography.fonts.heading */
  font-size: clamp(2.5rem, 6.2vw + 1.06rem, 5rem); /* mobile: 2.5rem → desktop: 5rem */
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  flex-shrink: 0;
  min-width: 3.5rem;
}

.eteg-stats-hero__problem-title {
  font-family: "Inter", sans-serif;       /* typography.fonts.body */
  font-size: clamp(0.875rem, 2.8vw + 0.23rem, 2rem); /* mobile: 0.875rem → desktop: 2rem */
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
}

/* ── Imagem ──────────────────────────────────────────────────── */
.eteg-stats-hero__image-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: 32px;                       /* spacing.scale.4 */
}

.eteg-stats-hero__image {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: contain;
  object-position: bottom center;
}

/* =============================================================
   LARGE PHONE / SMALL TABLET — min-width: 600px
   iPad Mini portrait, tablets Android pequenos, phablets.
   Stats já podem ser 4 colunas; hero ainda coluna única.
   ============================================================= */
@media (min-width: 600px) {

  .eteg-stats-hero__hero {
    padding-left: 16px !important; /* alinha com sectors-bento__inner (base: 16px) */
  }

  .eteg-stats-hero__stats {
    grid-template-columns: repeat(4, 1fr);
    margin-inline: 16px; /* alinha com padding-left do hero neste breakpoint */
  }

  .eteg-stats-hero__stat:nth-child(-n+2) {
    border-bottom: none;
  }

  .eteg-stats-hero__stat:nth-child(2n) {
    border-right: 1px solid rgba(255, 255, 255, 0.15);
  }

  .eteg-stats-hero__stat:last-child {
    border-right: none;
  }
}

/* =============================================================
   LANDSCAPE PHONE — telefone em modo paisagem
   Altura reduzida (~375-430px): oculta imagem e compacta hero.
   ============================================================= */
@media (orientation: landscape) and (max-height: 500px) {

  .eteg-stats-hero__image-wrap {
    display: none;
  }

  .eteg-stats-hero__hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "left problems";
    align-items: start;
  }

  .eteg-stats-hero__left     { grid-area: left; }
  .eteg-stats-hero__problems { grid-area: problems; }

  .eteg-stats-hero__heading {
    font-size: clamp(1.25rem, 4vw, 1.75rem);
  }
}

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

  .eteg-stats-hero__stats {
    margin-inline: 20px; /* alinha com padding-left do hero neste breakpoint */
  }

  /* hero: 2 colunas — left | problems */
  .eteg-stats-hero__hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "left problems";
    align-items: start;
    padding-left: 20px !important; /* alinha com sectors-bento__inner (768px: 20px) */
  }

  /* Quando imagem presente: problems + image na coluna direita */
  .eteg-stats-hero__hero:has(.eteg-stats-hero__image-wrap) {
    grid-template-areas:
      "left problems"
      "left image";
  }

  .eteg-stats-hero__left       { grid-area: left; }
  .eteg-stats-hero__problems   { grid-area: problems; }
  .eteg-stats-hero__image-wrap { grid-area: image; margin-top: 0; align-self: end; }

  .eteg-stats-hero__image { max-height: 280px; }
}

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

  /* 2 colunas: left (heading+CTA) | problems.
     Padding simétrico 160px (Figma: 280px outer_frame × 0.7204 = 201px → DS 160px).
     !important sobrescreve inline style salvo pelo Elementor. */
  .eteg-stats-hero__hero {
    grid-template-columns: 3fr 4fr;   /* Figma: 406px / 539px ≈ 3:4 */
    grid-template-areas: "left problems";
    align-items: start;
    overflow: visible;
    padding-top: 64px !important;     /* Figma: gap stats→hero 88px × 0.7204 = 63.4 → 64px */
    padding-bottom: 64px !important;
    padding-left: 24px !important;    /* alinha com .eteg-sectors-bento__inner (24px 1024px) */
    padding-right: 24px !important;
  }

  /* Quando imagem presente: 3 colunas (retrocompatível) */
  .eteg-stats-hero__hero:has(.eteg-stats-hero__image-wrap) {
    grid-template-columns: 1.75fr 1.25fr 2fr;
    grid-template-areas: "left problems image";
    padding-right: 0 !important;
    padding-bottom: 0 !important;
  }

  .eteg-stats-hero__left { grid-area: left; align-self: center; }
  .eteg-stats-hero__image-wrap {
    grid-area: image;
    align-self: end;
    justify-content: flex-end;
    margin-right: -160px;
    position: relative;
    z-index: 1;
  }
  .eteg-stats-hero__image {
    max-height: 560px;
    max-width: none;
  }

  .eteg-stats-hero__problem {
    gap: 8px;
    border-top: none;
    border-bottom: 1px solid #CCA6ED;
    padding: 24px 0;
  }
  .eteg-stats-hero__problem:first-child { padding-top: 0; }

  .eteg-stats-hero__problem-number {
    /* font-size: mantida via clamp() na regra base (máx: 5rem) */
    min-width: auto;
  }

  /* Figma: item text 36px Anybody fw=500 → DS h2.size = 2rem */
  .eteg-stats-hero__problem-title {
    font-family: "Anybody", sans-serif;
    /* font-size: mantida via clamp() na regra base (máx: 2rem) */
    font-weight: 500;
  }

  .eteg-stats-hero__stat-label { font-size: 0.6875rem; }
  /* stat-value: font-size mantida via clamp() na regra base */

  .eteg-stats-hero__heading { font-size: clamp(2rem, 3.89vw, 4.5rem); } /* desktop: 72px */

  .eteg-stats-hero__stats {
    margin-inline: auto; /* centraliza dentro do widget */
    max-width: 1040px; /* Figma: 4 × 360px × 0.7204 ≈ 1037px */
    padding: 0 !important; /* container sem padding; células controlam espaçamento */
  }

  /* Figma: card 224px × 0.7204 = 161px; (161 - ~61px conteúdo) / 2 ≈ 48px T/B → DS 48px */
  .eteg-stats-hero__stat {
    padding: 48px 24px;
  }

  /* Figma: valor 96px tall × 0.7204 ≈ 69px CSS → font-size ~4rem; !important necessário porque
     o controle stats_value_typo salvo no Elementor tem font-size menor e sobrescreve via CSS gerado */
  .eteg-stats-hero__stat-value {
    font-size: clamp(2.5rem, 3.8vw, 4rem) !important;
  }

  /* Figma: VerticalBorder — gap 64px × 0.7204 = 46px → DS 48px cada lado */
  .eteg-stats-hero__problems {
    grid-area: problems;
    margin-left: 48px;
    border-left: 1px solid #CCA6ED;
    padding-left: 48px;
  }
}

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

  .eteg-stats-hero {
    min-height: 40vh; /* era 80vh */
  }

  .eteg-stats-hero__hero {
    padding-top: 16px !important;    /* era 64px */
    padding-bottom: 16px !important; /* era 64px */
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  .eteg-stats-hero__heading {
    font-size: clamp(1.25rem, 2.4vw, 2.25rem); /* era clamp(2rem, 3.89vw, 4.5rem) */
  }

  .eteg-stats-hero__stats {
    margin-inline: auto !important;
    max-width: 760px; /* era 1040px — achatado */
    grid-template-columns: repeat(4, 1fr);
  }

  .eteg-stats-hero__stat {
    padding: 10px 8px; /* era 48px 24px */
    align-items: center; /* centraliza valor + label na célula */
    text-align: center;
  }

  .eteg-stats-hero__stat-label {
    font-size: 0.5rem; /* era 0.6875rem */
  }

  .eteg-stats-hero__stat-value {
    font-size: clamp(1.5rem, 2vw, 1.875rem) !important; /* era clamp(2.5rem, 3.8vw, 4rem) */
  }

  .eteg-stats-hero__problems {
    margin-left: 16px;  /* era 48px */
    padding-left: 16px; /* era 48px */
  }

  .eteg-stats-hero__problem {
    padding: 6px 0; /* era 24px 0 */
  }

  .eteg-stats-hero__image-wrap {
    margin-right: -40px; /* era -160px */
  }

  .eteg-stats-hero__image {
    max-height: 260px; /* era 560px */
  }
}

/* =============================================================
   WIDE — min-width: 1440px  (breakpoints.wide / layout.max_width)
   ============================================================= */
@media (min-width: 1440px) {
  .eteg-stats-hero {
    min-height: 80vh; /* restaura */
  }

  /* Em viewports > 1440px: padding cresce com calc() para manter o conteúdo alinhado
     com os outros blocos centrados (max-width: 1440px + margin: auto). */
  .eteg-stats-hero__hero {
    padding-top: 64px !important;    /* restaura */
    padding-bottom: 64px !important; /* restaura */
    padding-left: max(80px, calc((100vw - 1440px) / 2 + 80px)) !important;  /* alinha com sectors-bento__inner (80px) */
    padding-right: max(80px, calc((100vw - 1440px) / 2 + 80px)) !important;
  }

  .eteg-stats-hero__stat {
    padding: 48px 24px; /* restaura */
  }

  .eteg-stats-hero__problems {
    margin-left: 48px;  /* restaura */
    padding-left: 48px; /* restaura */
  }

  .eteg-stats-hero__problem {
    padding: 24px 0; /* restaura */
  }

  /* !important: sobrescreve o inline style do controle Elementor (margin-inline: 24px),
     garantindo que a borda esquerda dos stats coincida com a borda esquerda da heading
     e que o recuo seja simétrico em viewports > 1440px. */
  .eteg-stats-hero__heading {
    font-size: clamp(2rem, 3.89vw, 4.5rem); /* restaura */
  }

  .eteg-stats-hero__stats {
    margin-inline: auto !important;
    max-width: 1040px; /* restaura */
  }

  .eteg-stats-hero__stat-label {
    font-size: 0.6875rem; /* restaura */
  }

  .eteg-stats-hero__stat-value {
    font-size: clamp(2.5rem, 3.8vw, 4rem) !important; /* restaura */
  }

  .eteg-stats-hero__image-wrap { margin-right: -160px; } /* restaura */
  .eteg-stats-hero__image { max-height: 560px; } /* restaura */
}

/* =============================================================
   ANIMAÇÕES — counter (JS) + reveal sequenciado por scroll
   ─────────────────────────────────────────────────────────────
   js-anim: adicionado pelo JS antes do observer — ativa o estado
   inicial oculto. Sem JS a classe não existe e os itens ficam
   visíveis normalmente (graceful degradation).
   is-visible: adicionado pelo IntersectionObserver quando
   .eteg-stats-hero__problems entra na viewport.
   ============================================================= */

/* Estado inicial oculto — só quando o JS ativou a animação */
.eteg-stats-hero__problems.js-anim .eteg-stats-hero__problem {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 360ms cubic-bezier(0, 0, 0.2, 1),
              transform 360ms cubic-bezier(0, 0, 0.2, 1);
}

/* Revelação: opacity + slide-up quando is-visible é adicionada */
.eteg-stats-hero__problems.is-visible .eteg-stats-hero__problem {
  opacity: 1;
  transform: none;
}

/* Delay escalonado: cada item 120ms depois do anterior */
.eteg-stats-hero__problems.is-visible .eteg-stats-hero__problem:nth-child(1) { transition-delay:   0ms; }
.eteg-stats-hero__problems.is-visible .eteg-stats-hero__problem:nth-child(2) { transition-delay: 120ms; }
.eteg-stats-hero__problems.is-visible .eteg-stats-hero__problem:nth-child(3) { transition-delay: 240ms; }
.eteg-stats-hero__problems.is-visible .eteg-stats-hero__problem:nth-child(4) { transition-delay: 360ms; }
.eteg-stats-hero__problems.is-visible .eteg-stats-hero__problem:nth-child(5) { transition-delay: 480ms; }

/* =============================================================
   ACESSIBILIDADE — prefers-reduced-motion
   Respeita a preferência do sistema operacional do usuário.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .eteg-stats-hero__cta {
    transition: none;
  }

  /* Anular estado inicial oculto e transitions de reveal */
  .eteg-stats-hero__problems.js-anim .eteg-stats-hero__problem {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =============================================================
   NOTA DE CONTRASTE — WCAG AA
   ─────────────────────────────────────────────────────────────
   colors.brand.accent (#CCA6ED) sobre colors.brand.primary
   (#1563FF) resulta em contraste ~2.34:1, abaixo do mínimo
   WCAG AA de 3:1 para texto grande. A palavra em destaque
   (highlight) usa este par por decisão de marca — avaliar com
   a UX lead se deve migrar para colors.text.on_primary (#FFF)
   que resulta em ~4.63:1 e passa WCAG AA.
   ============================================================= */