/* =============================================================
   eteg-authority-banner-v2 — tokens do design-system.json (ETEG 2023)
   ─────────────────────────────────────────────────────────────
   Figma: "Section - AuthorityBanner" node 5:46231 (canvas 1999px)
   Seção full-width branca com badge Zendesk, divisor azul e CTA outlined.

   colors.background.default  → #FFFFFF (fundo da seção)
   colors.brand.primary       → #1563FF (divisor vertical)
   typography.fonts.heading   → "Anybody, sans-serif" (texto + CTA)
   breakpoints.tablet         → 768px
   breakpoints.desktop        → 1024px
   breakpoints.wide           → 1440px

   Conversão (outer_frame × 0.7204):
   padding do card: 80px × 0.7204 = 57.6 → DS: 64px
   gap badge/divider/texto:  112px × 0.7204 = 80.7 → DS: 80px
   deco left:               -112px × 0.7204 = -80.7 → -80px
   divider height:           191px × 0.7204 = 137.6 → DS: 128px
   badge max-width:          656px × 0.7204 = 472px

   Seletores para "CSS Personalizado" no Elementor (painel > Avançado):
   .eteg-authority-banner-v2         → seção raiz (bg, overflow)
   .eteg-authority-banner-v2__deco   → imagem decorativa (dots) absoluta
   .eteg-authority-banner-v2__inner  → container flex row centralizado
   .eteg-authority-banner-v2__badge-wrap → wrapper do badge
   .eteg-authority-banner-v2__badge  → imagem do badge Premier Partner
   .eteg-authority-banner-v2__divider → linha vertical azul
   .eteg-authority-banner-v2__content → coluna de texto + CTA
   .eteg-authority-banner-v2__body   → parágrafo descritivo (Anybody 24px fw500)
   .eteg-authority-banner-v2__cta    → botão outlined (borda #000, radius 8px)
   ============================================================= */

/* ── Reset de bloco ──────────────────────────────────────────── */
.eteg-authority-banner-v2 *,
.eteg-authority-banner-v2 *::before,
.eteg-authority-banner-v2 *::after {
  box-sizing: border-box;
}

/* =============================================================
   EXTRA SMALL — max-width: 374px
   ============================================================= */
@media (max-width: 374px) {

  .eteg-authority-banner-v2__body {
    font-size: 1rem;
  }

  .eteg-authority-banner-v2__badge {
    max-width: 200px;
  }
}

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

.eteg-authority-banner-v2 {
  position: relative;
  overflow: clip; /* clip nos dois eixos — impede deco de sangrar para seções adjacentes */
  background-color: #FFFFFF;
  padding: 48px 0; /* fallback; sobrescrito pelo controle section_padding */
}

/* Decoração mesh dots — absoluta, sangra para fora do left */
.eteg-authority-banner-v2__deco {
  display: none; /* oculta no mobile por padrão; controle show_deco sobrescreve */
  position: absolute;
  left: -80px;   /* Figma: -112px × 0.7204 ≈ -80px */
  top: 50%;
  transform: translateY(-50%);
  width: 60%;
  max-width: 500px;
  height: auto;
  pointer-events: none;
  z-index: 0;
  opacity: 0.65;
}

/* Container principal — flex column no mobile */
.eteg-authority-banner-v2__inner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 16px; /* DS: container_padding.mobile */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px; /* DS: spacing.scale.4 */
}

/* Badge — centralizado no mobile */
.eteg-authority-banner-v2__badge-wrap {
  display: flex;
  justify-content: center;
}

.eteg-authority-banner-v2__badge {
  display: block;
  max-width: 240px;
  width: 100%;
  height: auto;
}

/* Divisor vertical — oculto no mobile (layout empilhado) */
.eteg-authority-banner-v2__divider {
  display: none;
  width: 1px;        /* Figma: 2px → CSS: 1px */
  height: 128px;     /* Figma: 191px × 0.7204 ≈ 138px → DS: 128px */
  background-color: #1563FF; /* colors.brand.primary — fallback; controle Elementor sobrescreve */
  flex-shrink: 0;
}

/* Coluna de texto + CTA */
.eteg-authority-banner-v2__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px; /* DS: spacing.scale.2 */
}

/* Texto descritivo — Figma: 24px → padronizado 16px */
.eteg-authority-banner-v2__body {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-size: var(--eteg-body-size);
  font-weight: 500;
  line-height: 1.4;
  color: #000000;
}

/* CTA outlined — Figma: 14px Anybody fw800, padding 12px 24px, border 2px solid #000, radius 8px */
.eteg-authority-banner-v2__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  font-family: "Anybody", sans-serif;
  font-size: 0.875rem; /* Figma: 14px */
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  color: #000000;
  border: 2px solid #000000;
  border-radius: 8px; /* DS: border_radius.md — não converter */
  transition: background-color 250ms cubic-bezier(0, 0, 0.2, 1),
              color 250ms cubic-bezier(0, 0, 0.2, 1);
}

/* (0,5,0) — bate Elementor (0,4,0) que carrega depois */
.eteg-authority-banner-v2 .eteg-authority-banner-v2__inner .eteg-authority-banner-v2__content .eteg-authority-banner-v2__cta:hover,
.eteg-authority-banner-v2 .eteg-authority-banner-v2__inner .eteg-authority-banner-v2__content .eteg-authority-banner-v2__cta:focus-visible {
  background-color: #000000;
  color: #ffffff;
}

.eteg-authority-banner-v2__cta:focus-visible {
  outline: 2px solid #1563FF;
  outline-offset: 3px;
}

/* =============================================================
   LARGE PHONE / SMALL TABLET — min-width: 600px
   ============================================================= */
@media (min-width: 600px) {

  .eteg-authority-banner-v2__inner {
    padding-inline: 20px;
  }

  .eteg-authority-banner-v2__badge {
    max-width: 300px;
  }
}

/* =============================================================
   LANDSCAPE PHONE — orientation landscape + max-height 500px
   ============================================================= */
@media (orientation: landscape) and (max-height: 500px) {

  .eteg-authority-banner-v2__inner {
    flex-direction: row;
    align-items: center;
    gap: 32px;
  }

  .eteg-authority-banner-v2__divider { display: block; }

  .eteg-authority-banner-v2__badge { max-width: 200px; }

  .eteg-authority-banner-v2__body { font-size: 1rem; }
}

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

  .eteg-authority-banner-v2__deco {
    display: block; /* fallback; controle show_deco sobrescreve */
    width: 45%;
    left: -60px;
  }

  .eteg-authority-banner-v2__inner {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start; /* badge ancora à esquerda; content usa flex:1 para preencher */
    gap: 40px;
    padding-inline: 24px;
  }

  .eteg-authority-banner-v2__badge-wrap {
    flex: 1;
    min-width: 0;
    justify-content: center;
  }

  .eteg-authority-banner-v2__badge {
    max-width: 300px;
  }

  .eteg-authority-banner-v2__divider {
    display: block;
  }

  .eteg-authority-banner-v2__content {
    flex: 1;
    min-width: 0;
    gap: 20px;
  }

}

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

  .eteg-authority-banner-v2__deco {
    width: 50%;
    left: -80px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.7;
  }

  .eteg-authority-banner-v2__inner {
    gap: 48px;
    padding-inline: 24px;
  }

  .eteg-authority-banner-v2__badge {
    max-width: 420px;
  }

}

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

  .eteg-authority-banner-v2__inner {
    padding-inline: 48px;
    gap: 32px; /* era 48px */
  }

  .eteg-authority-banner-v2__badge {
    max-width: 320px; /* era 420px */
  }

  .eteg-authority-banner-v2__divider {
    height: 96px; /* era 128px */
  }
}

/* =============================================================
   WIDE — min-width: 1440px
   Alinha padding-inline com sectors-bento, stats-hero e ui-showcase.
   ============================================================= */
@media (min-width: 1440px) {

  .eteg-authority-banner-v2__inner {
    padding-inline: 80px;
    gap: 64px; /* restaura */
  }

  .eteg-authority-banner-v2__deco {
    width: 500px;
    max-width: 500px;
  }

  .eteg-authority-banner-v2__badge {
    max-width: 472px; /* restaura — Figma: 656px × 0.7204 = 472px */
  }

  .eteg-authority-banner-v2__divider {
    height: 128px; /* restaura */
  }
}


/* ── Deco reveal (eteg-scroll-reveal.js) ────────────────────── */
.eteg-authority-banner-v2.eteg-reveal .eteg-authority-banner-v2__deco {
  opacity: 0;
  transform: translateY(-50%) translateX(-64px);
  transition: opacity 640ms cubic-bezier(0, 0, 0.2, 1),
              transform 640ms cubic-bezier(0, 0, 0.2, 1);
}
.eteg-authority-banner-v2.is-revealed .eteg-authority-banner-v2__deco {
  opacity: 0.65;
  transform: translateY(-50%) translateX(0);
  transition-delay: 200ms;
}

/* ── Entry sequencial (eteg-scroll-reveal.js) ──────────────── */
.eteg-authority-banner-v2.eteg-reveal .eteg-authority-banner-v2__badge-wrap {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms cubic-bezier(0, 0, 0.2, 1), transform 500ms cubic-bezier(0, 0, 0.2, 1);
}
.eteg-authority-banner-v2.is-revealed .eteg-authority-banner-v2__badge-wrap {
  opacity: 1;
  transform: none;
  transition-delay: 60ms;
}
.eteg-authority-banner-v2.eteg-reveal .eteg-authority-banner-v2__body {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms cubic-bezier(0, 0, 0.2, 1), transform 500ms cubic-bezier(0, 0, 0.2, 1);
}
.eteg-authority-banner-v2.is-revealed .eteg-authority-banner-v2__body {
  opacity: 1;
  transform: none;
  transition-delay: 160ms;
}
.eteg-authority-banner-v2.eteg-reveal .eteg-authority-banner-v2__cta {
  opacity: 0;
  transition: opacity 400ms cubic-bezier(0, 0, 0.2, 1);
}
.eteg-authority-banner-v2.is-revealed .eteg-authority-banner-v2__cta {
  opacity: 1;
  transition-delay: 300ms;
}

/* =============================================================
   ACESSIBILIDADE — prefers-reduced-motion
   ============================================================= */
@media (prefers-reduced-motion: reduce) {

  .eteg-authority-banner-v2__cta {
    transition: none;
  }

  .eteg-authority-banner-v2.eteg-reveal .eteg-authority-banner-v2__deco {
    opacity: 1; transform: translateY(-50%) translateX(0); transition: none;
  }

  .eteg-authority-banner-v2.eteg-reveal .eteg-authority-banner-v2__badge-wrap,
  .eteg-authority-banner-v2.eteg-reveal .eteg-authority-banner-v2__body,
  .eteg-authority-banner-v2.eteg-reveal .eteg-authority-banner-v2__cta {
    opacity: 1; transform: none; transition: none;
  }
}