/* =============================================================
   eteg-home-hero — tokens do design-system.json (ETEG 2024)
   ─────────────────────────────────────────────────────────────
   Figma: "HeroSection" node 779:47165 (canvas 1920px × 933px)
   Layout: centered full-section — vídeo de fundo + overlay + texto centralizado
   Refatorado de: split (texto esquerda / screenshots direita) para full-background.

   colors.background.dark   → #2D2D2B (fallback bg / mobile sem vídeo)
   colors.brand.primary     → #1563FF (CTA button)
   colors.text.on_dark      → #FFFFFF (todos os textos sobre o vídeo)
   typography.fonts.heading → "Anybody, sans-serif"
   layout.section_padding   → desktop 128px top/64px bottom / tablet 96px/48px / mobile 64px/40px
   layout.max_width         → 1440px
   _figma.ratio             → 0.7204 (canvas 1920px → CSS 1440px)

   Conversões (outer_frame 1920px × 0.7204):
     padding-top 159px   → 114.6px → DS: 128px
     padding-bottom 80px →  57.6px → DS: 64px
   Tipografia — NÃO converter:
     heading: 100px → tablet: 64px → mobile: 36px
     subtitle: 24px → tablet: 20px → mobile: 16px
   Overlay padrão: preto 59% (Figma: black opacity 0.59)

   Seletores para "CSS Personalizado" no Elementor:
   .eteg-home-hero              → seção raiz (bg, overflow)
   .eteg-home-hero__video       → <video> full-cover (position: absolute, inset: 0)
   .eteg-home-hero__overlay     → camada escura configurável sobre o vídeo
   .eteg-home-hero__screens     → screenshots decorativas (position: absolute, inset: 0)
   .eteg-home-hero__screen--1   → screenshot frente (canto inferior direito)
   .eteg-home-hero__screen--2   → screenshot fundo (canto superior direito)
   .eteg-home-hero__inner       → container de conteúdo centralizado (z-index: 3)
   .eteg-home-hero__heading     → título principal (italic fw:200, centered)
   .eteg-home-hero__heading-highlight → parte em destaque (fw:400, branco)
   .eteg-home-hero__subtitle    → subtítulo (branco, centered)
   .eteg-home-hero__cta-row     → container botão + nota
   .eteg-home-hero__cta         → botão CTA (azul)
   .eteg-home-hero__cta-note    → nota ao lado do botão
   ============================================================= */

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

/* =============================================================
   EXTRA SMALL — max-width: 374px
   ============================================================= */
@media (max-width: 374px) {
  .eteg-home-hero__heading {
    font-size: 1.875rem; /* 30px */
  }

  .eteg-home-hero__cta {
    font-size: 0.875rem;
    padding: 14px 20px;
  }
}

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

.eteg-home-hero {
  position: relative;
  overflow: hidden;
  background-color: #2D2D2B; /* fallback: mobile (sem vídeo) e enquanto carrega */
  padding: 124px 0 40px;     /* fallback: 64px bottom + 60px header fixo mobile */
  min-height: 85svh;
  min-height: 85vh;          /* fallback para browsers sem suporte a svh */
  display: flex;
  align-items: center;
}

/* ── Vídeo de fundo ──────────────────────────────────────────── */

.eteg-home-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* ── Overlay configurável sobre o vídeo ─────────────────────── */

.eteg-home-hero__overlay {
  position: absolute;
  inset: 0;
  background-color: #000000; /* fallback; sobrescrito por video_overlay_color */
  opacity: 0.59;              /* fallback; sobrescrito por video_overlay_opacity */
  z-index: 1;
  pointer-events: none;
}

/* ── Screenshots decorativas (absolute sobre o overlay) ──────── */

.eteg-home-hero__screens {
  display: none; /* oculto por padrão no novo layout de vídeo; ligar via controle "Exibir imagens" */
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.eteg-home-hero__screen {
  position: absolute;
}

/* screen-2 (tickets): canto superior direito, semi-transparente */
.eteg-home-hero__screen--2 {
  top: -5%;
  right: -3%;
  width: 45%;
  opacity: 0.3;
}

/* screen-1 (dashboard): canto inferior direito, semi-transparente */
.eteg-home-hero__screen--1 {
  bottom: -5%;
  right: 3%;
  width: 38%;
  opacity: 0.3;
}

.eteg-home-hero__screen img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

/* ── Inner: conteúdo centralizado (z-index sobre o overlay) ─── */

.eteg-home-hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  padding-inline: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

/* ── Título principal ────────────────────────────────────────── */

.eteg-home-hero__heading {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-size: clamp(2.25rem, 6.5vw, 4.5rem); /* mobile: 36px → desktop: 72px */
  font-weight: 200;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: #FFFFFF;
}

/* Destaque: mesmo branco, mas fw 400 — ligeiramente mais pesado que fw 200 */
.eteg-home-hero__heading-highlight {
  font-weight: 400;
  color: #FFFFFF;
}

/* ── Subtítulo ───────────────────────────────────────────────── */

.eteg-home-hero__subtitle {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-size: var(--eteg-body-size); /* Figma: 20px → padronizado 16px */
  font-weight: 400;
  line-height: 1.5;
  color: #FFFFFF;
  max-width: 640px; /* ~80 chars por linha */
}

.eteg-home-hero .eteg-home-hero__inner .eteg-home-hero__cta-note {
  text-align: left;
}

/* ── CTA row ─────────────────────────────────────────────────── */

.eteg-home-hero__cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.eteg-home-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px 32px;
  background-color: #1563FF;
  color: #FFFFFF;
  font-family: "Anybody", sans-serif;
  font-size: 0.9375rem; /* mobile: ~15px */
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  border-radius: 12px;
  white-space: nowrap;
  transition: background-color 250ms cubic-bezier(0, 0, 0.2, 1),
              box-shadow 250ms cubic-bezier(0, 0, 0.2, 1);
}

.eteg-home-hero__cta:hover,
.eteg-home-hero__cta:focus-visible {
  background-color: #1150D4;
  box-shadow: 0 8px 24px rgba(21, 99, 255, 0.4);
}

.eteg-home-hero__cta:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
}

.eteg-home-hero__cta-note {
  margin: 0;
  font-family: "Anybody", sans-serif;
  font-size: 0.875rem; /* 14px */
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}

/* =============================================================
   LARGE PHONE / SMALL TABLET — min-width: 600px
   ============================================================= */
@media (min-width: 600px) {
  .eteg-home-hero__inner {
    padding-inline: 32px;
  }
}

/* =============================================================
   LANDSCAPE PHONE — orientation landscape + max-height 500px
   ============================================================= */
@media (orientation: landscape) and (max-height: 500px) {
  .eteg-home-hero__heading {
    font-size: 2rem;
    line-height: 1;
  }

  .eteg-home-hero__cta-row {
    flex-direction: row;
    align-items: center;
  }

  .eteg-home-hero__screens {
    display: none; /* oculta screenshots no landscape phone */
  }
}

/* =============================================================
   TABLET — min-width: 768px
   ============================================================= */
@media (min-width: 768px) {
  .eteg-home-hero {
    padding-top: 132px; /* fallback: 64px + 68px header fixo tablet */
  }

  .eteg-home-hero__inner {
    padding-inline: 48px;
    gap: 28px;
  }

  .eteg-home-hero__cta-row {
    flex-direction: row;
    align-items: center;
    gap: 24px;
  }

  .eteg-home-hero__cta {
    font-size: 1rem;
    padding: 20px 32px;
  }

  .eteg-home-hero__screen--2 {
    width: 38%;
    opacity: 0.4;
  }

  .eteg-home-hero__screen--1 {
    width: 32%;
    opacity: 0.4;
  }
}

/* =============================================================
   DESKTOP — min-width: 1024px
   ============================================================= */
@media (min-width: 1024px) {
  .eteg-home-hero {
    padding-top: 136px; /* fallback: 64px + 72px header fixo desktop */
  }

  .eteg-home-hero__inner {
    padding-inline: 48px;
    gap: 32px;
    max-width: 1200px;
  }

  .eteg-home-hero__heading {
    font-size: 4.5rem; /* 72px */
  }

  .eteg-home-hero__cta {
    font-size: 1.125rem; /* Figma: 18px */
    padding: 24px 40px;
  }

  .eteg-home-hero__screen--2 {
    width: 36%;
    opacity: 0.5;
  }

  .eteg-home-hero__screen--1 {
    width: 30%;
    opacity: 0.5;
  }
}

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

  .eteg-home-hero {
    padding-top: 80px; /* era 136px */
    min-height: 60vh;  /* era 85vh */
  }

  .eteg-home-hero__inner {
    padding-inline: 32px;  /* era 48px */
    gap: 16px;             /* era 32px */
    max-width: 900px;      /* era 1200px */
  }

  .eteg-home-hero__heading {
    font-size: 2.5rem; /* era 4.5rem */
  }

  .eteg-home-hero__cta {
    font-size: 0.875rem; /* era 1.125rem */
    padding: 14px 24px;  /* era 24px 40px */
  }

  .eteg-home-hero__screen--2 {
    width: 28%;   /* era 36% */
    opacity: 0.35;
  }

  .eteg-home-hero__screen--1 {
    width: 22%;   /* era 30% */
    opacity: 0.35;
  }
}

/* =============================================================
   WIDE — min-width: 1440px
   ============================================================= */
@media (min-width: 1440px) {
  .eteg-home-hero {
    padding-top: 136px; /* restaura */
    min-height: 85vh;   /* restaura */
  }

  .eteg-home-hero__inner {
    padding-inline: 0;
    gap: 32px;         /* restaura */
    max-width: 1200px;
  }

  .eteg-home-hero__heading {
    font-size: 4.5rem; /* restaura */
  }

  .eteg-home-hero__cta {
    font-size: 1.125rem; /* restaura */
    padding: 24px 40px;  /* restaura */
  }

  .eteg-home-hero__screen--2 {
    width: 34%;
    opacity: 0.6;
  }

  .eteg-home-hero__screen--1 {
    width: 28%;
    opacity: 0.6;
  }
}

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

  /* autoplay + loop continuam por CSS spec — pausa via JS se necessário */
  .eteg-home-hero__video {
    animation: none;
  }
}