/* ============ RESET / BASE ============ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --ago-yellow: #EBB540;
  --ink: #0a0a0a;
  --ink-soft: #444;
  --ink-faint: #8a8a8a;
  --bg-light: #ffffff;
  --bg-dark: #050505;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Consolas, monospace;
}

html {
  /* NUNCA usar overflow-x:hidden aqui — quebra position:sticky nos filhos
     (bug conhecido do Chrome quando a raiz ganha overflow) */
  scroll-behavior: auto;
  width: 100%;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-light);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  position: relative;
}

img { max-width: 100%; }

/* util */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ago-yellow);
  margin-bottom: 26px;
}

.eyebrow-dark { color: rgba(5,5,5,0.65); }

.big-title {
  font-size: clamp(28px, 3.6vw, 54px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.split-words .word { display: inline-block; }

/* ============ HERO TV — fallback estático (sem vídeo) ============ */
.hero-tv { display: none; } /* só aparece com <html class="tv-fallback"> */

html.tv-fallback .hero,
html.tv-fallback .hero-sticky { display: none; }

html.tv-fallback .hero-tv {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 3vw;
  height: 100vh;
  padding: 0 3vw;
  background: var(--bg-light);
  overflow: hidden;
}

html.tv-fallback .hero-tv .hero-brand {
  position: static;
  transform: none;
  flex: none;
}

.hero-tv-stage {
  position: relative;
  flex: none;
  width: min(58vh, 40vw);
  aspect-ratio: 1 / 1;
}

.hero-tv-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}


.hero-final.hero-final-tv {
  position: static;
  opacity: 1;
  transform: none;
  flex: none;
  font-size: clamp(36px, 4.4vw, 84px);
}

/* telas de TV estreitas/verticais (raro, mas por segurança): empilha */
@media (max-width: 700px) {
  html.tv-fallback .hero-tv {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    padding: 5vh 4vw;
    gap: 3vh;
  }
  .hero-tv-stage { width: min(70vh, 88vw); }
}

/* ============ HERO ============ */
.hero {
  position: relative;
  height: 300vh;
  background: var(--bg-light);
}

.hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh; /* svh: no Chrome do Android o 100vh ignora a barra de endereço e corta a base */
  overflow: hidden;

  /* TAMANHO DO RELÓGIO NO DESKTOP E NO TABLET DEITADO.
     No fim da animação o vidro (peça mais à esquerda) chega a ~0,49 do lado do
     quadrado à esquerda do centro. Medido: em iPad deitado (1180x820, 1194x834,
     1024x768) o vidro ficava 61 a 95 px POR CIMA do logo. O quadrado agora é o
     maior que deixa o vidro a 36 px do logo (a barra de rolagem do desktop tira ~8), sem passar da altura da tela:
       vidro = 50vw - 0,4039 x lado   (0,4039 = 0,4926 x escala final 0,82)
       logo  = 6vw + largura da marca (logo ou slogan, o que for maior)
     No notebook de 1440x670 o limite dá 750 px e a altura (670) manda: não muda. */
  --H: 100vh;
  --logo-w: clamp(190px, 21vw, 380px);
  --slogan-fs: clamp(12px, 0.95vw, 16px);
  --brand-w: max(var(--logo-w), calc(19.4 * var(--slogan-fs)));
  --lado-max: calc((44vw - var(--brand-w) - 36px) / 0.404);
  --lado: max(320px, min(var(--H), var(--lado-max)));
}
@supports (height: 100svh) {
  .hero-sticky { --H: 100svh; }
}

/* o container é um QUADRADO exato centralizado (mesma proporção do vídeo):
   assim o "cover" da lib nunca corta o enquadramento, em qualquer tela/DPR */
#scrolly-mask {
  position: absolute;
  inset: 0;
  margin: auto;
  height: var(--lado);
  aspect-ratio: 1 / 1;
  width: auto;
  max-width: 100%;
}

#scrolly-container {
  position: absolute;
  inset: 0;
}

/* A IMAGEM É UM <canvas>, NÃO O <video>.
   Um <video> na tela é composto direto pela placa de vídeo, e com a escala
   animada a borda cai em meio pixel: o Chrome desenha uma linha cinza de 1 px na
   borda direita e na de baixo (medido em foto do notebook: 1 px, luminância 213,
   só em partes do vídeo, e some no print). Desenhado num canvas, o quadro é uma
   textura comum, sem esse caminho. O <video> continua só como DECODIFICADOR:
   minúsculo, invisível, fora do fluxo — nunca é pintado. O canvas ainda descarta
   2 px de cada borda do vídeo (o relógio fica a >= 8 px da borda). */
#watch-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#watch-video {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 2px;
  opacity: 0;
  pointer-events: none;
}

/* rede de segurança: se o canvas não funcionar, o próprio vídeo aparece */
html.sem-canvas #watch-canvas { display: none; }
html.sem-canvas #watch-video {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  object-fit: contain;
}

.hero-ui {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

/* marca — começa grande, centro-esquerda */
.hero-brand {
  position: absolute;
  top: 50%;
  left: 6vw;
  transform: translateY(-50%); /* alinhado ao centro, como a headline */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transform-origin: center center;
}

.hero-logo { width: clamp(190px, 21vw, 380px); height: auto; }

.hero-slogan {
  font-size: var(--slogan-fs);
  line-height: 1.6;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

/* headline direita */
.hero-headline {
  position: absolute;
  top: 50%;
  right: 5vw;
  transform: translateY(-50%);
  font-size: clamp(44px, 5.6vw, 104px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-align: center;
  white-space: nowrap;
}

/* headline final */
.hero-final {
  position: absolute;
  right: 5vw;
  top: 50%;
  font-size: clamp(44px, 5.6vw, 104px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-align: center;
  color: var(--ink);
  opacity: 0;
}

/* hint */
.scroll-hint {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.scroll-hint-arrow { font-size: 15px; animation: bob 1.8s ease-in-out infinite; }

/* aviso "role para contato" sobre o vídeo do rodapé — herda o estilo do hint do
   hero; começa invisível e o JS o revela quando o vídeo da moça chega ao fim */
.scroll-hint-footer {
  bottom: 34px;
  z-index: 4;
  opacity: 0;
  color: rgba(255, 255, 255, 0.6); /* discreto sobre o fundo escuro, como o hint do hero */
  pointer-events: none;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ============ BOUNCE EDGE ============ */
.bounce-edge {
  position: absolute;
  top: -219px;
  left: 0;
  width: 100%;
  height: 220px;
  display: block;
  overflow: visible;
  pointer-events: none;
}

/* ============ ATUAÇÃO ============ */
.atuacao {
  position: relative;
  background: var(--bg-dark);
  color: #fff;
  padding: 170px 10vw 190px;
}

.atuacao-inner { max-width: 1060px; margin: 0 auto; text-align: center; }

.section-sub {
  margin-top: 24px;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.65;
  color: #b5b5b5;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.cards {
  margin-top: 38px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  text-align: left;
}

.card {
  background: #0e0e0e;
  border: 1px solid #1d1d1d;
  border-radius: 22px;
  padding: 36px 30px 32px;
  position: relative;
  /* sem transition em transform: conflita com a animação de entrada do gsap */
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.card:hover {
  border-color: var(--ago-yellow);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

.card-icon {
  width: 42px;
  height: 42px;
  color: var(--ago-yellow);
  margin-bottom: 26px;
}
.card-icon svg { width: 100%; height: 100%; }

.card-num {
  position: absolute;
  top: 32px;
  right: 30px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: #3a3a3a;
}

.card h3 {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.card ul { list-style: none; }

.card li {
  font-size: 14px;
  line-height: 1.5;
  color: #c9c9c9;
  padding: 8px 0;
  border-bottom: 1px solid #1a1a1a;
}

.card li:last-child { border-bottom: 0; }

.card-note {
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.55;
  color: #8a8a8a;
  font-style: italic;
}

/* ============ PROCESSO ============ */
.processo {
  background: var(--bg-dark);
  color: #fff;
  padding: 40px 10vw 190px;
  overflow-x: hidden; /* as fases entram deslocadas em x — sem isso, vazam a largura da página */
}

.processo-inner { max-width: 1000px; margin: 0 auto; text-align: center; }

.fases {
  margin-top: 76px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
}

.fase {
  flex: 1;
  max-width: 300px;
  padding: 0 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fase-sep {
  width: 1px;
  background: linear-gradient(to bottom, transparent, #2a2a2a, transparent);
}

.fase-icon {
  width: 38px;
  height: 38px;
  color: var(--ago-yellow);
  margin-bottom: 22px;
}
.fase-icon svg { width: 100%; height: 100%; }

.fase-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 12px;
}

.fase h3 {
  font-size: clamp(16px, 1.25vw, 19px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.35;
}

.processo-caminho {
  margin: 90px auto 0;
  max-width: 680px;
  font-size: clamp(15px, 1.15vw, 18.5px);
  line-height: 1.75;
  color: #b5b5b5;
}

/* ============ ATENDEPRÓ ============ */
.atendepro {
  position: relative;
  background: var(--ago-yellow);
  color: var(--bg-dark);
  padding: 160px 10vw;
  text-align: center;
}

.atendepro-inner { max-width: 640px; margin: 0 auto; }

.ap-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 30px;
  color: var(--bg-dark);
}
.ap-icon svg { width: 100%; height: 100%; }

.ap-sub {
  margin-top: 24px;
  font-size: clamp(15.5px, 1.15vw, 18px);
  line-height: 1.65;
  font-weight: 500;
}

.btn-dark, .btn-yellow {
  display: inline-block;
  margin-top: 44px;
  padding: 17px 38px;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  pointer-events: auto;
}

.btn-dark { background: var(--bg-dark); color: #fff; }
.btn-yellow { background: var(--ago-yellow); color: var(--bg-dark); }

.btn-dark:hover, .btn-yellow:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.22);
}

/* ============ QUEM SOMOS ============ */
.quem-somos {
  position: relative;
  background: var(--bg-light);
  color: var(--ink);
  padding: 180px 10vw;
}

.qs-inner { max-width: 940px; margin: 0 auto; }

.qs-def {
  font-size: clamp(15px, 1.2vw, 19px);
  margin-bottom: 26px;
  color: var(--ink-soft);
}

.qs-def em { font-weight: 700; font-style: italic; color: var(--ink); }
.qs-ipa { font-family: var(--font-mono); font-size: 0.85em; color: var(--ink-faint); }

.qs-cols {
  margin-top: 52px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.qs-cols p {
  font-size: clamp(14px, 1.05vw, 16.5px);
  line-height: 1.8;
  color: var(--ink-soft);
}

/* ============ QUOTE ============ */
.quote {
  position: relative;
  background: var(--bg-dark);
  color: #fff;
  padding: 180px 10vw;
  text-align: center;
}

.quote blockquote { max-width: 860px; margin: 0 auto; }

.quote-text {
  font-size: clamp(22px, 2.6vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.25;
}

.quote footer {
  margin-top: 42px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-faint);
}

.quote footer span { color: var(--ago-yellow); font-size: 12px; }
.quote-author { white-space: nowrap; display: inline-block; } /* não quebra nome no meio */

/* ============ FAQ ============ */
.faq {
  position: relative;
  background: var(--bg-light);
  padding: 180px 10vw;
  overflow-x: hidden; /* itens entram deslocados em x — mesma lógica do .processo */
}

.faq-inner { max-width: 760px; margin: 0 auto; }

.faq-list { margin-top: 60px; }

.faq-item {
  border-bottom: 1px solid #e4e4e4;
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 46px 24px 0;
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 700;
  letter-spacing: -0.015em;
  position: relative;
  transition: color 0.25s ease;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--ago-yellow); }

.faq-plus {
  position: absolute;
  right: 4px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
}

.faq-plus::before, .faq-plus::after {
  content: "";
  position: absolute;
  background: var(--ink);
  transition: transform 0.3s ease;
}

.faq-plus::before { left: 0; top: 7px; width: 16px; height: 2px; }
.faq-plus::after { left: 7px; top: 0; width: 2px; height: 16px; }

.faq-item[open] .faq-plus::after { transform: rotate(90deg); }

.faq-item p {
  padding: 0 60px 26px 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-soft);
}

/* ============ FOOTER ============ */
.footer {
  position: relative;
  background: var(--bg-dark);
  color: #fff;
  padding: 0 0 60px;
}

/* ---- scrub da moça (mesmo mecanismo do relógio) ---- */
.footer-scrub {
  position: relative;
  height: 250vh;
}

.footer-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.moca-wrap {
  position: absolute;
  right: 17vw;
  top: 50%;
  transform: translateY(-50%);
  height: 76vh;
  aspect-ratio: 1252 / 1652;
}

#moca-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* nunca corta o enquadramento */
  display: block;
}

.moca-tv-img { display: none; } /* só aparece com <html class="tv-fallback"> */

html.tv-fallback #moca-video { display: none; }
html.tv-fallback .moca-tv-img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footer-ui {
  position: relative;
  z-index: 5;
  padding-left: 10vw;
  max-width: 46vw;
  text-align: left;
}

.footer-title { color: #fff; }

.footer-inner {
  padding: 0 10vw;
  text-align: center;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  text-align: left;
  border-top: 1px solid #1d1d1d;
  padding-top: 64px;
}

.footer-col { display: flex; flex-direction: column; gap: 10px; }

.footer-logo { width: 175px; }

.footer-col-logo {
  justify-content: center; /* logo centralizado na altura das outras colunas */
}

.footer-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ago-yellow);
  margin-bottom: 8px;
}

.footer-col a, .footer-col p {
  color: #d6d6d6;
  text-decoration: none;
  font-size: 15.5px;
  line-height: 1.6;
  transition: color 0.25s ease;
}

.footer-col a:hover { color: var(--ago-yellow); }

.footer-copy {
  margin-top: 80px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: #555;
}

/* empilha no celular E em qualquer tela vertical (tablet em pe) */
@media (max-width: 900px), (orientation: portrait) {
  .footer-scrub { height: 220vh; }
  .moca-wrap {
    right: auto;
    left: 50%;
    top: 8vh;
    transform: translateX(-50%);
    height: 56vh;
  }
  .footer-ui {
    max-width: 100%;
    padding: 66vh 8vw 0;
    text-align: center;
  }
}

/* ============ REVEAL (estado inicial p/ GSAP) ============ */
.reveal { opacity: 0; transform: translateY(44px); }
.no-js .reveal { opacity: 1; transform: none; }

/* ============ RESPONSIVO ============ */
/* idem para o hero: vertical = empilhado, nunca lado a lado */
@media (max-width: 900px), (orientation: portrait) {
  .hero { height: 250vh; }

  /* O TAMANHO DO RELÓGIO SAI DO ESPAÇO QUE SOBRA, não de uma % fixa da altura.
     Medido num Galaxy Tab de 600 px (600x900): o quadrado do relógio ficava com
     600 px (80% da altura) e o logo e o título entravam 89 e 144 px dentro dele.
     Agora: reserva em cima (logo + slogan) e embaixo (título de 2 linhas, no maior
     tamanho que ele chega a ter) e o relógio ocupa o que sobra, sem passar da
     largura da tela. Por isso não depende do aparelho. */
  .hero-sticky {
    --u: 1vh;
    --gap: 12px;
    --logo: clamp(140px, 22vw, 176px);
    --fs-titulo: clamp(34px, min(13vw, 7.4 * var(--u)), 76px);
    --fs-final: clamp(40px, min(16vw, 9 * var(--u)), 88px);
    --y-marca: calc(7 * var(--u));
    --y-titulo: calc(9 * var(--u));
    --teto: 100vw;                       /* celular: o relógio pode ir até a largura da tela */
    --reserva-topo: calc(var(--y-marca) + var(--logo) * 0.45 + 62px + var(--gap));
    --reserva-base: calc(var(--y-titulo) + 2.1 * var(--fs-final) + var(--gap));
    --util: calc(100 * var(--u) - var(--reserva-topo) - var(--reserva-base));
    --lado: max(200px, min(var(--teto), var(--util)));
  }
  @supports (height: 100svh) {
    .hero-sticky { --u: 1svh; }
  }

  .hero-brand {
    top: var(--y-marca);
    left: 50%;
    transform: translateX(-50%);
  }

  .hero-logo { width: var(--logo); }
  .hero-slogan { font-size: 13px; }

  .hero-headline {
    top: auto;
    bottom: var(--y-titulo);
    right: 50%;
    transform: translateX(50%);
    font-size: var(--fs-titulo);
  }

  /* fica cortada pelo relógio/headline no mobile — remover só aqui */
  .scroll-hint { display: none; }

  /* o relógio: quadrado de --lado, centrado na faixa entre o logo e o título */
  #scrolly-mask {
    inset: auto;
    margin: 0;
    max-width: none;
    width: var(--lado);
    height: var(--lado);
    top: calc(var(--reserva-topo) + (var(--util) - var(--lado)) / 2);
    left: calc((100% - var(--lado)) / 2);
  }

  /* mesma lógica de ancoragem do "O futuro chegou": centralizado embaixo,
     sem sobrepor o relógio */
  .hero-final {
    top: auto;
    bottom: var(--y-titulo);
    right: 50%;
    transform: translateX(50%);
    font-size: var(--fs-final);
  }

  .cards { grid-template-columns: 1fr; }

  .fases { flex-direction: column; gap: 60px; }
  .fase { max-width: none; }
  .fase-sep { display: none; }

  .qs-cols { grid-template-columns: 1fr; gap: 32px; }

  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .footer-col { align-items: center; }
}

/* ---- tablet em pé (601px ou mais, vertical) ----
   Aqui o relógio não passa de 52% da altura (medido em 820x1180 e 1024x1366: com
   mais que isso o logo e o título caem dentro dele). As margens e fontes mudam;
   o cálculo do espaço é o mesmo do bloco acima. */
@media (min-width: 601px) and (orientation: portrait) {
  .hero-sticky {
    --teto: calc(52 * var(--u));
    --y-marca: calc(6 * var(--u));
    --y-titulo: calc(8 * var(--u));
    --fs-titulo: clamp(40px, 7.6vw, 68px);
    --fs-final: clamp(46px, 9vw, 78px);
  }
  .hero-slogan { font-size: 14px; }
}