/* =============================================================
   eteg-proof-quote — tokens do design-system.json
   ─────────────────────────────────────────────────────────────
   colors.brand.primary   → #1563FF  (aspas decorativas)
   colors.brand.accent    → #CCA6ED  (fundo da seção, atribuição)
   colors.text.on_primary → #FFFFFF  (texto da citação)
   colors.background.subtle → #F5F5F4 (fundo do avatar)
   typography.fonts.heading → "Anybody, sans-serif"
   typography.fonts.body    → "Inter, sans-serif"
   layout.section_padding → desktop 96px / tablet 64px / mobile 48px
   _figma: canvas 1999px → ratio 0.7204
     deco-left  top: -130 × 0.7204 = -93.7 → -96px
     deco-right top: 0; largura: 456 × 0.7204 = 329px
     attribution gap: 16 × 0.7204 = 11.5 → 12px
   ============================================================= */

/* ── Seção principal ─────────────────────────────────────────── */
.eteg-proof-quote {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #CCA6ED; /* fallback — sobrescrito pelo controle Elementor */
  padding: 48px 0; /* fallback mobile — sobrescrito pelo controle section_padding */
}

/* ── Elementos decorativos (formas geométricas) ──────────────── */
.eteg-proof-quote__deco {
  display: none; /* oculto por padrão — ativar via controle Elementor */
  position: absolute;
  width: 329px; /* Figma: 456px × 0.7204 */
  height: 415px; /* Figma: 576px × 0.7204 */
  pointer-events: none;
}

.eteg-proof-quote__deco--left {
  left: 0;
  top: -96px; /* Figma: y=-130 → -130 × 0.7204 = -93.7px → DS: -96px */
}

.eteg-proof-quote__deco--right {
  right: 0;
  top: 0;
}

.eteg-proof-quote__deco img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── Conteúdo central ────────────────────────────────────────── */
.eteg-proof-quote__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  padding: 0 24px;
}

/* ── Logo acima das aspas ────────────────────────────────────── */
.eteg-proof-quote__logo {
  display: none; /* padrão oculto; control Elementor sobrescreve */
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
}

.eteg-proof-quote__logo img {
  display: block;
  width: 140px;
  height: 50px;
  object-fit: contain;
  object-position: center center;
}

/* ── Símbolo de aspas decorativo ─────────────────────────────── */
.eteg-proof-quote__mark {
  font-family: "Inter", sans-serif; /* Figma: Inter Black 900 — aspas curvas, não itálico */
  font-style: normal;
  font-size: 96px; /* mobile — reduzido; desktop em @media 1024px */
  font-weight: 900;
  line-height: 0.8;
  color: #1563FF; /* fallback — sobrescrito pelo controle quote_mark_color */
  margin-bottom: -24px; /* sobreposição visual com o texto abaixo */
  user-select: none;
}

/* ── Blockquote ──────────────────────────────────────────────── */
.eteg-proof-quote__blockquote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  margin: 0;
  padding: 0;
}

/* ── Texto da citação (tipografia via controle Elementor) ─────── */
.eteg-proof-quote__text {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-style: italic; /* Figma: Anybody italic — não capturado pelo extract */
  font-size: 24px; /* mobile fallback */
  font-weight: 400;
  line-height: 77px;
  text-transform: uppercase;
  text-align: center;
  color: #FFFFFF; /* fallback — sobrescrito pelo controle quote_text_color */
}

/* ── Rodapé de atribuição ────────────────────────────────────── */
.eteg-proof-quote__footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 12px; /* Figma: padding-left 16px no text container → 16 × 0.7204 = 11.5 → 12px */
}

/* ── Avatar circular ─────────────────────────────────────────── */
.eteg-proof-quote__avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  border: 1px solid #CCA6ED; /* sobrescrito pelo controle avatar_border_color */
  background-color: #F5F5F4;
  overflow: hidden;
}

.eteg-proof-quote__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%; /* mostra o rosto no topo da foto, não o torso */
  display: block;
}

/* ── Autor / atribuição ──────────────────────────────────────── */
.eteg-proof-quote__author {
  display: flex;
  flex-direction: column;
  font-style: normal; /* remove itálico padrão do <cite> */
}

.eteg-proof-quote__metric {
  font-family: "Anybody", sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  color: #1563FF; /* azul primário — sobrescrito pelo controle metric_color */
}

.eteg-proof-quote__name {
  font-family: "Anybody", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: #FFFFFF; /* fallback — sobrescrito pelo controle attribution_color */
}

/* =============================================================
   EXTRA SMALL — max-width: 374px
   ============================================================= */
@media (max-width: 374px) {
  .eteg-proof-quote__mark { font-size: 72px; }
  .eteg-proof-quote__content { padding: 0 16px; }
}

/* =============================================================
   LARGE PHONE / SMALL TABLET — min-width: 600px
   ============================================================= */
@media (min-width: 600px) {
  .eteg-proof-quote__mark { font-size: 120px; margin-bottom: -32px; }
}

/* =============================================================
   LANDSCAPE PHONE — orientation landscape + max-height 500px
   ============================================================= */
@media (orientation: landscape) and (max-height: 500px) {
  .eteg-proof-quote__deco { display: none; }
}

/* =============================================================
   TABLET — min-width: 768px
   ============================================================= */
@media (min-width: 768px) {
  .eteg-proof-quote__mark { font-size: 140px; margin-bottom: -40px; }
  .eteg-proof-quote__deco {
    width: 250px;
    height: 315px;
  }
}

/* =============================================================
   DESKTOP — min-width: 1024px
   ============================================================= */
@media (min-width: 1024px) {
  .eteg-proof-quote__mark { font-size: 192px; margin-bottom: -48px; } /* Figma: 192px */
  .eteg-proof-quote__deco {
    width: 329px; /* tamanho completo */
    height: 415px;
  }
}

/* =============================================================
   NOTEBOOK — min-width: 1280px  (1920×1080 @ 150% DPI Windows)
   ============================================================= */
@media (min-width: 1280px) {

  .eteg-proof-quote {
    padding: 32px 0 !important; /* era 96px */
  }

  .eteg-proof-quote__mark {
    font-size: 80px !important;   /* era 192px — !important bate especificidade do Elementor typography */
    line-height: 1;
    margin-bottom: 0;
    align-self: center; /* alinha com a __logo centralizada acima */
  }

  .eteg-proof-quote__deco {
    width: 160px;  /* era 329px */
    height: 202px; /* era 415px */
  }

  .eteg-proof-quote__text {
    font-size: 1.75rem !important; /* era 3.75rem — aumentado de 1.375rem */
    line-height: 1.25 !important;
  }

  .eteg-proof-quote__blockquote {
    gap: 12px; /* era 32px */
    padding-top: 24px; /* gap entre mark e texto da heading */
  }

  .eteg-proof-quote__content {
    padding-inline: 120px; /* era 24px — mais respiro lateral */
  }

  /* Logo menor para evitar pixelação */
  .eteg-proof-quote__logo img {
    width: 90px;
    height: 32px;
  }

  /* Attribution proporcional ao texto menor */
  .eteg-proof-quote__avatar {
    width: 36px;
    height: 36px;
  }

  .eteg-proof-quote__metric {
    font-size: 11px;
  }

  .eteg-proof-quote__name {
    font-size: 10px;
  }

  .eteg-proof-quote__footer {
    gap: 8px;
  }
}

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

  .eteg-proof-quote {
    padding: 96px 0 !important; /* restaura */
  }

  .eteg-proof-quote__mark {
    font-size: 192px !important;  /* restaura */
    margin-bottom: -48px;
  }

  .eteg-proof-quote__deco {
    width: 329px;  /* restaura */
    height: 415px; /* restaura */
  }

  .eteg-proof-quote__text {
    font-size: 3.75rem !important; /* restaura */
    line-height: 77px !important;
  }

  .eteg-proof-quote__blockquote {
    gap: 32px; /* restaura */
  }
}


/* ── Deco reveal (eteg-scroll-reveal.js) ────────────────────── */
.eteg-proof-quote.eteg-reveal .eteg-proof-quote__deco--left {
  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-proof-quote.is-revealed .eteg-proof-quote__deco--left {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 160ms;
}
.eteg-proof-quote.eteg-reveal .eteg-proof-quote__deco--right {
  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-proof-quote.is-revealed .eteg-proof-quote__deco--right {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 280ms;
}

/* ── Content stagger entry (eteg-scroll-reveal.js) ──────────── */

/* 0 — Logo: fade + slide down */
.eteg-proof-quote.eteg-reveal .eteg-proof-quote__logo {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 400ms cubic-bezier(0, 0, 0.2, 1),
              transform 400ms cubic-bezier(0, 0, 0.2, 1);
}
.eteg-proof-quote.is-revealed .eteg-proof-quote__logo {
  opacity: 1;
  transform: none;
  transition-delay: 40ms;
}

/* A — Mark: pop-in com spring */
.eteg-proof-quote.eteg-reveal .eteg-proof-quote__mark {
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 400ms cubic-bezier(0, 0, 0.2, 1),
              transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.eteg-proof-quote.is-revealed .eteg-proof-quote__mark {
  opacity: 1;
  transform: scale(1);
  transition-delay: 80ms;
}

/* B — Text: fade + slide up */
.eteg-proof-quote.eteg-reveal .eteg-proof-quote__text {
  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-proof-quote.is-revealed .eteg-proof-quote__text {
  opacity: 1;
  transform: none;
  transition-delay: 200ms;
}

/* C — Footer: fade + slide up */
.eteg-proof-quote.eteg-reveal .eteg-proof-quote__footer {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms cubic-bezier(0, 0, 0.2, 1),
              transform 500ms cubic-bezier(0, 0, 0.2, 1);
}
.eteg-proof-quote.is-revealed .eteg-proof-quote__footer {
  opacity: 1;
  transform: none;
  transition-delay: 360ms;
}

/* D — Avatar hover: scale sutil */
.eteg-proof-quote__avatar img {
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.eteg-proof-quote__footer:hover .eteg-proof-quote__avatar img {
  transform: scale(1.08);
}

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

  .eteg-proof-quote.eteg-reveal .eteg-proof-quote__deco--left {
    opacity: 1; transform: translateX(0); transition: none;
  }
  .eteg-proof-quote.eteg-reveal .eteg-proof-quote__deco--right {
    opacity: 1; transform: translateX(0); transition: none;
  }

  .eteg-proof-quote.eteg-reveal .eteg-proof-quote__logo,
  .eteg-proof-quote.eteg-reveal .eteg-proof-quote__mark,
  .eteg-proof-quote.eteg-reveal .eteg-proof-quote__text,
  .eteg-proof-quote.eteg-reveal .eteg-proof-quote__footer {
    opacity: 1; transform: none; transition: none;
  }

  .eteg-proof-quote__avatar img { transition: none; }
}