/* =============================================================
   eteg-ui-showcase — tokens do design-system.json (ETEG 2023)
   ─────────────────────────────────────────────────────────────
   colors.brand.primary   → #1662ff (highlight, tab ativa, card border, stats, CTA)
   colors.brand.accent    → #CCA6ED (label da tab ativa, divider do card)
   colors.text.heading    → #2D2D2B (tab names inativas, corpo do card)
   colors.background.default → #ffffff (card background)
   typography.fonts.heading → "Anybody, sans-serif"

   Figma: "Section - UIShowcase" — node 5:46242 (canvas 1999px)
   Outer frame sem fill → herda branco da página (sem background-color no widget).
   Dots do authority-banner sangram verticalmente graças a overflow-x: hidden na section anterior.

   Seletores para "CSS Personalizado" no Elementor (painel > Avançado):
   .eteg-ui-showcase          → seção principal (sem background)
   .eteg-ui-showcase__inner   → container max-width 1440px
   .eteg-ui-showcase__header  → área do heading
   .eteg-ui-showcase__heading → h2 italic uppercase (Anybody 77px)
   .eteg-ui-showcase__highlight → span "TRANSFORMAM" (azul bold)
   .eteg-ui-showcase__body    → flex row: tabs + card
   .eteg-ui-showcase__tabs    → coluna de tabs (esquerda)
   .eteg-ui-showcase__tab     → botão de produto inativo
   .eteg-ui-showcase__tab.is-active → estado ativo (azul, radius esquerdo)
   .eteg-ui-showcase__tab-label → "PRODUTO 01" (14px bold)
   .eteg-ui-showcase__tab-name  → nome do produto (24px ou 32px no ativo)
   .eteg-ui-showcase__tab-chevron → seta SVG (visível só no ativo via CSS)
   .eteg-ui-showcase__card    → card branco (borda azul, shadow)
   .eteg-ui-showcase__deco-mesh → mesh azul absoluta (bottom-right)
   .eteg-ui-showcase__panel   → painel de conteúdo (hidden por padrão)
   .eteg-ui-showcase__panel.is-active → painel visível
   .eteg-ui-showcase__card-heading → 48px mixed fw (strong = 800)
   .eteg-ui-showcase__card-body → 20px fw400 #2d2d2b
   .eteg-ui-showcase__divider  → hr lilás (#cba6ec)
   .eteg-ui-showcase__stats    → linha de stats + cta
   .eteg-ui-showcase__stats-group → grupo das estatísticas
   .eteg-ui-showcase__stat     → stat individual (valor + rótulo)
   .eteg-ui-showcase__stat-value → "+400%" (azul, bold)
   .eteg-ui-showcase__stat-label → "Performance" (dark, small)
   .eteg-ui-showcase__cta      → botão "+" (azul 32×32, radius 8px)
   ============================================================= */

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

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

  .eteg-ui-showcase__heading {
    font-size: 1.75rem;
  }
}

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

/* Seção — sem background (herda branco da página) */
.eteg-ui-showcase {
  position: relative;
  overflow-x: clip; /* previne scroll horizontal dos deco-dots sem criar BFC */
  padding: 48px 16px;
}

/* Container interno — position:relative + z-index para ficar acima do deco-mesh */
.eteg-ui-showcase__inner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin-inline: auto;
}

/* Heading */
.eteg-ui-showcase__header {
  margin-bottom: 32px;
}

.eteg-ui-showcase__heading {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-size: var(--eteg-section-heading-size);
  font-weight: 400;
  font-style: italic;
  text-transform: uppercase;
  line-height: 1.0;
  color: #000000;
}

.eteg-ui-showcase__highlight {
  font-weight: 700;
  color: #1662ff; /* colors.brand.primary */
}

/* Body: coluna única no mobile */
.eteg-ui-showcase__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Tabs (coluna de produtos) ──────────────────────────────── */
.eteg-ui-showcase__tabs {
  display: flex;
  flex-direction: column;
}

.eteg-ui-showcase__tab {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 16px;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color 200ms cubic-bezier(0, 0, 0.2, 1),
              border-color 200ms cubic-bezier(0, 0, 0.2, 1);
}

/* Grupo texto: label (pequeno) + nome (grande) em coluna */
.eteg-ui-showcase__tab-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.eteg-ui-showcase__tab.is-active {
  background-color: #1662ff;
  border-radius: 12px 0 0 12px;
  border-left-color: transparent;
  padding: 16px 16px 16px 20px;
}

/* Label "PRODUTO 0X" */
.eteg-ui-showcase__tab-label {
  display: block;
  font-family: "Anybody", sans-serif;
  font-size: 0.875rem; /* 14px */
  font-weight: 700;
  text-transform: uppercase;
  color: #1662ff;
  line-height: 1.43;
}

.eteg-ui-showcase__tab.is-active .eteg-ui-showcase__tab-label {
  color: #cba6ec; /* accent — tab ativa */
}

/* Nome do produto */
.eteg-ui-showcase__tab-name {
  display: block;
  font-family: "Anybody", sans-serif;
  font-size: 1.5rem; /* 24px inativo */
  font-weight: 800;
  text-transform: uppercase;
  color: #2d2d2b;
  line-height: 1.0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eteg-ui-showcase__tab.is-active .eteg-ui-showcase__tab-name {
  font-size: 1.75rem; /* 28px ativo mobile; 32px desktop */
  color: #ffffff;
}

/* Chevron — visível apenas no tab ativo */
.eteg-ui-showcase__tab-chevron {
  display: none;
  flex-shrink: 0;
  color: #ffffff;
}

.eteg-ui-showcase__tab.is-active .eteg-ui-showcase__tab-chevron {
  display: block;
}

.eteg-ui-showcase__tab:focus-visible {
  outline: 2px solid #1662ff;
  outline-offset: 2px;
}

/* ── Card (paineis de conteúdo) ─────────────────────────────── */
.eteg-ui-showcase__card {
  position: relative;
  background-color: #ffffff;
  border: 2px solid #1662ff;
  border-top: 12px solid #1662ff; /* Figma: peso 12, alinhamento Interno */
  border-radius: 20px;
  box-shadow: 0 4px 50px rgba(45, 45, 43, 0.1);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 320px;
}

/* Decoration dots — top-left da seção (mesma imagem dos dots do authority-banner) */
.eteg-ui-showcase__deco-dots {
  position: absolute;
  left: -60px;
  top: 0;
  width: 200px;
  height: auto;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

/* Decoration mesh — posicionada no bottom da SEÇÃO (não do card) */
.eteg-ui-showcase__deco-mesh {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  max-width: 560px;
  height: auto;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

/* Panel */
.eteg-ui-showcase__panel {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  position: relative;
  z-index: 1;
}

.eteg-ui-showcase__panel.is-active {
  display: flex;
}

/* Card content */
.eteg-ui-showcase__card-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.eteg-ui-showcase__card-heading {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-size: var(--eteg-section-subheading-size);
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.0;
  color: #2d2d2b;
}

.eteg-ui-showcase__card-heading strong {
  font-weight: 800;
}

.eteg-ui-showcase__card-body {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-size: 1rem; /* 20px desktop */
  font-weight: 400;
  line-height: 1.4;
  color: #2d2d2b;
}

/* Divider */
.eteg-ui-showcase__divider {
  border: none;
  border-top: 1px solid #cba6ec;
  margin: 0 0 16px;
}

/* Stats row */
.eteg-ui-showcase__stats {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.eteg-ui-showcase__stats-group {
  display: flex;
  flex-direction: row;
  gap: 24px;
  flex-wrap: wrap;
}

.eteg-ui-showcase__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.eteg-ui-showcase__stat-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  margin-bottom: 4px;
  flex-shrink: 0;
  color: #cba6ec; /* fallback para SVG inline quando MEDIA não tem URL */
}

.eteg-ui-showcase__stat-value {
  font-family: "Anybody", sans-serif;
  font-size: 1.5rem; /* 24px mobile; 32px desktop */
  font-weight: 700;
  text-transform: uppercase;
  color: #1662ff;
  line-height: 1.0;
}

.eteg-ui-showcase__stat-label {
  font-family: "Anybody", sans-serif;
  font-size: 0.75rem; /* 14px desktop */
  font-weight: 700;
  text-transform: uppercase;
  color: #2d2d2b;
  line-height: 1.43;
}

/* CTA button "+" */
.eteg-ui-showcase__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: #1662ff;
  border-radius: 8px;
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity 200ms cubic-bezier(0, 0, 0.2, 1);
}

.eteg-ui-showcase__cta:hover,
.eteg-ui-showcase__cta:focus-visible {
  opacity: 0.85;
}

.eteg-ui-showcase__cta:focus-visible {
  outline: 2px solid #1662ff;
  outline-offset: 4px;
}

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

  .eteg-ui-showcase {
    padding: 48px 20px;
  }

  .eteg-ui-showcase__deco-dots {
    left: -80px;
    width: 280px;
    opacity: 0.6;
  }

  .eteg-ui-showcase__heading {
    font-size: var(--eteg-section-heading-size);
  }

  .eteg-ui-showcase__tab.is-active .eteg-ui-showcase__tab-name {
    font-size: 2rem;
  }

  .eteg-ui-showcase__card {
    padding: 32px;
  }
}

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

  .eteg-ui-showcase {
    padding: 32px 20px;
  }

  .eteg-ui-showcase__heading {
    font-size: 2rem;
  }
}

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

  .eteg-ui-showcase {
    padding: 64px 24px;
  }

  .eteg-ui-showcase__deco-dots {
    left: -84px;
    width: 380px;
    opacity: 0.7;
  }


  .eteg-ui-showcase__heading {
    font-size: var(--eteg-section-heading-size);
  }

  .eteg-ui-showcase__header {
    margin-bottom: 40px;
  }

  .eteg-ui-showcase__body {
    flex-direction: row;
    gap: 32px;
    align-items: stretch;
  }

  .eteg-ui-showcase__tabs {
    flex: 0 0 40%;
  }

  .eteg-ui-showcase__card {
    flex: 1;
    min-height: 400px;
  }

  .eteg-ui-showcase__stat-value {
    font-size: 1.75rem;
  }

  .eteg-ui-showcase__stat-label {
    font-size: 0.875rem;
  }
}

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

  .eteg-ui-showcase {
    padding: 96px 24px;
  }

  .eteg-ui-showcase__heading {
    font-size: var(--eteg-section-heading-size); /* 32px — padronizado com demais h2 de seção */
  }

  .eteg-ui-showcase__deco-dots {
    left: -84px;
    width: 514px;
    opacity: 0.9;
  }

  .eteg-ui-showcase__header {
    margin-bottom: 40px;
  }

  .eteg-ui-showcase__body {
    gap: 0; /* active tab encosta no card — borda esquerda do card toca a borda direita do tab ativo */
    align-items: stretch;
  }

  .eteg-ui-showcase__tabs {
    flex: 0 0 500px;
  }

  .eteg-ui-showcase__tab {
    padding: 24px;
  }

  .eteg-ui-showcase__tab.is-active {
    border-radius: 16px 0 0 16px; /* Figma: 16px 0 0 16px */
    padding: 24px 16px 24px 24px;
  }

  .eteg-ui-showcase__tab.is-active .eteg-ui-showcase__tab-name {
    font-size: 1.625rem; /* 26px — reduzido de 32px para nomes longos não quebrarem */
  }

  .eteg-ui-showcase__card {
    flex: 1;
    padding: 32px; /* Figma: 48px outer_frame × 0.7204 = 34.6px → DS: 32px */
    min-height: 480px;
    /* Lado esquerdo plano — encosta no tab ativo para parecerem um único elemento */
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .eteg-ui-showcase__card-content {
    gap: 24px;
  }


  .eteg-ui-showcase__card-body {
    font-size: 1.25rem; /* 20px — Figma: 20px */
  }

  .eteg-ui-showcase__stats-group {
    gap: 32px; /* Figma: 40px outer_frame × 0.7204 = 29px → DS: 32px */
  }

  .eteg-ui-showcase__stat-value {
    font-size: 2rem; /* 32px */
  }

  .eteg-ui-showcase__stat-label {
    font-size: 0.875rem; /* 14px */
  }

  .eteg-ui-showcase__deco-mesh {
    opacity: 0.8;
  }
}

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

  .eteg-ui-showcase {
    padding-top: 64px !important;    /* era 96px */
    padding-bottom: 64px !important; /* era 96px */
    padding-inline: 48px !important; /* alinha com sectors-bento__inner (48px) */
  }

  .eteg-ui-showcase__header {
    margin-bottom: 28px; /* era 40px */
  }

  .eteg-ui-showcase__deco-dots {
    left: -60px;  /* era -84px */
    width: 380px; /* era 514px */
    opacity: 0.7; /* era 0.9 */
  }

  .eteg-ui-showcase__body {
    gap: 0;
    align-items: stretch;
  }

  .eteg-ui-showcase__tabs {
    flex: 0 0 320px; /* era 500px */
  }

  .eteg-ui-showcase__tab {
    padding: 16px; /* era 24px */
  }

  .eteg-ui-showcase__tab.is-active {
    border-radius: 12px 0 0 12px;         /* era 16px 0 0 16px */
    padding: 16px 12px 16px 16px;         /* era 24px 16px 24px 24px */
  }

  .eteg-ui-showcase__tab.is-active .eteg-ui-showcase__tab-name {
    font-size: 1.25rem; /* era 1.625rem */
  }

  .eteg-ui-showcase__card {
    flex: 1;
    padding: 24px;      /* era 32px */
    min-height: 360px;  /* era 480px */
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .eteg-ui-showcase__card-content {
    gap: 16px; /* era 24px */
  }

  .eteg-ui-showcase__card-body {
    font-size: 1rem; /* era 1.25rem */
  }

  .eteg-ui-showcase__stats-group {
    gap: 20px; /* era 32px */
  }

  .eteg-ui-showcase__stat-value {
    font-size: 1.375rem; /* era 2rem */
  }

  .eteg-ui-showcase__stat-label {
    font-size: 0.75rem; /* era 0.875rem */
  }

  .eteg-ui-showcase__deco-mesh {
    opacity: 0.5; /* era 0.8 */
  }
}

/* =============================================================
   WIDE — min-width: 1440px
   Alinha padding com authority banner e outras seções (80px inline).
   ============================================================= */
@media (min-width: 1440px) {

  /* !important necessário para sobrescrever o padding: 64px 24px !important do 1280px */
  .eteg-ui-showcase {
    padding-top: 96px !important;    /* restaura */
    padding-bottom: 96px !important; /* restaura */
    padding-inline: max(80px, calc((100vw - 1440px) / 2 + 80px)) !important;
  }

  .eteg-ui-showcase__header {
    margin-bottom: 40px; /* restaura */
  }

  .eteg-ui-showcase__deco-dots {
    left: -84px;  /* restaura */
    width: 514px; /* restaura */
    opacity: 0.9; /* restaura */
  }

  .eteg-ui-showcase__body {
    gap: 0;           /* restaura */
    align-items: stretch; /* restaura */
  }

  .eteg-ui-showcase__tabs {
    flex: 0 0 560px; /* restaura */
  }

  .eteg-ui-showcase__tab {
    padding: 24px; /* restaura */
  }

  .eteg-ui-showcase__tab.is-active {
    border-radius: 16px 0 0 16px;       /* restaura */
    padding: 24px 16px 24px 24px;       /* restaura */
  }

  .eteg-ui-showcase__tab.is-active .eteg-ui-showcase__tab-name {
    font-size: 1.75rem; /* restaura */
  }

  .eteg-ui-showcase__card {
    flex: 1;
    padding: 32px;     /* restaura */
    min-height: 480px; /* restaura */
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .eteg-ui-showcase__card-content {
    gap: 24px; /* restaura */
  }

  .eteg-ui-showcase__card-body {
    font-size: 1.25rem; /* restaura */
  }

  .eteg-ui-showcase__stats-group {
    gap: 32px; /* restaura */
  }

  .eteg-ui-showcase__stat-value {
    font-size: 2rem; /* restaura */
  }

  .eteg-ui-showcase__stat-label {
    font-size: 0.875rem; /* restaura */
  }

  .eteg-ui-showcase__deco-mesh {
    opacity: 0.8; /* restaura */
  }
}


/* ── Deco reveal (eteg-scroll-reveal.js) ────────────────────── */
.eteg-ui-showcase.eteg-reveal .eteg-ui-showcase__deco-dots {
  opacity: 0;
  transition: opacity 640ms cubic-bezier(0, 0, 0.2, 1);
}
.eteg-ui-showcase.is-revealed .eteg-ui-showcase__deco-dots {
  opacity: 1;
  transition-delay: 180ms;
}
.eteg-ui-showcase.eteg-reveal .eteg-ui-showcase__deco-mesh {
  opacity: 0;
  transition: opacity 640ms cubic-bezier(0, 0, 0.2, 1);
}
.eteg-ui-showcase.is-revealed .eteg-ui-showcase__deco-mesh {
  opacity: 1;
  transition-delay: 240ms;
}

/* ── Content entry (eteg-scroll-reveal.js) ──────────────────── */
.eteg-ui-showcase.eteg-reveal .eteg-ui-showcase__heading {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 550ms cubic-bezier(0, 0, 0.2, 1), transform 550ms cubic-bezier(0, 0, 0.2, 1);
}
.eteg-ui-showcase.is-revealed .eteg-ui-showcase__heading { opacity: 1; transform: none; transition-delay: 80ms; }

.eteg-ui-showcase.eteg-reveal .eteg-ui-showcase__body {
  opacity: 0;
  transition: opacity 400ms cubic-bezier(0, 0, 0.2, 1);
}
.eteg-ui-showcase.is-revealed .eteg-ui-showcase__body { opacity: 1; transition-delay: 200ms; }

.eteg-ui-showcase.eteg-reveal .eteg-ui-showcase__card {
  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-ui-showcase.is-revealed .eteg-ui-showcase__card { opacity: 1; transform: none; transition-delay: 360ms; }

/* =============================================================
   ACESSIBILIDADE — prefers-reduced-motion
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .eteg-ui-showcase__tab,
  .eteg-ui-showcase__cta {
    transition: none;
  }

  .eteg-ui-showcase.eteg-reveal .eteg-ui-showcase__deco-dots {
    opacity: 1; transition: none;
  }
  .eteg-ui-showcase.eteg-reveal .eteg-ui-showcase__deco-mesh {
    opacity: 1; transition: none;
  }

  .eteg-ui-showcase.eteg-reveal .eteg-ui-showcase__heading,
  .eteg-ui-showcase.eteg-reveal .eteg-ui-showcase__body,
  .eteg-ui-showcase.eteg-reveal .eteg-ui-showcase__card {
    opacity: 1; transform: none; transition: none;
  }
}