/* Hero da home: vídeo full-bleed com texto sobreposto.
   Escopo em .hero-tempo — .conteudo-hero e .texto-2.hero são compartilhados
   com tempo-xp.html e não podem ser restilizados globalmente. */

/* O fundo creme (#fbf6f1) da home inteira vive no `.body` do seutempo.webflow.css
   (site-wide agora). */

/* Títulos das seções legadas na serifa premium (Fraunces), pra bater com as
   seções novas (hero/pratica/memória/pagamentos). Só a home carrega este CSS. */
.texto-1-tarefas,
.texto-1-seguranca,
.texto-1-parceiros,
.texto-1-depoimentos,
.texto-1-faq {
  font-family: Fraunces, Georgia, serif;
  font-weight: 300;
  line-height: 1.1;
}

/* Benefício corporativo + Parcerias: layout de 2 cards. No desktop centraliza
   e alarga pra preencher a linha com equilíbrio; no estreito o Webflow empilha
   em coluna full-width. */
@media screen and (min-width: 768px) {
  .holder-1-ctas {
    justify-content: center;
    gap: 28px;
  }

  /* min-height acompanha a nova largura: sem isto o `cover` dá zoom e corta a
     foto no card mais largo. */
  .holder-2-ctas {
    width: 48%;
    min-height: 520px;
    margin: 0;
  }
}

/* Fades das pontas dos carrosséis nascem brancos (ou no bege antigo) no export;
   recoloridos pro creme da home. Transparente-creme no miolo pra não tingir. */
.sombras-tarefas {
  background-image: linear-gradient(
    90deg,
    #fbf6f1,
    rgba(251, 246, 241, 0) 25%,
    rgba(251, 246, 241, 0) 75%,
    #fbf6f1
  );
}

.holder-3-parceiros {
  background-image: linear-gradient(
    90deg,
    #fbf6f1,
    rgba(251, 246, 241, 0) 30%,
    rgba(251, 246, 241, 0) 70%,
    #fbf6f1
  );
}

.fade-depoimentos {
  background-image: linear-gradient(
    90deg,
    #fbf6f1,
    rgba(251, 246, 241, 0) 5%,
    rgba(251, 246, 241, 0) 95%,
    #fbf6f1
  );
}

/* O carrossel de tarefas tinha min-height:720px do export — deixava ~155px
   vazios abaixo dos pills. Deixa a seção abraçar o conteúdo. */
.tarefas-carrossel {
  min-height: auto;
}

/* Vídeo de logo full-bleed atrás da FAQ tem fundo branco e lava o creme da
   seção inteira; sem ele o acordeão fica no creme, mais limpo. */
.video-faq {
  display: none;
}

.hero-tempo {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  background-color: #121212;
}

/* O poster pinta o fundo antes do primeiro frame e permanece como fallback
   quando o autoplay é recusado ou o movimento é reduzido. */
.hero-media {
  position: absolute;
  inset: 0;
  background: url("../videos/hero-bg-poster.webp") 50% 50% / cover no-repeat #121212;
}

.hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* O texto mora na base, dentro da faixa escura do gradiente — por isso o miolo
   da imagem fica limpo. Mexer na âncora do texto exige refazer estas paradas.
   As paradas da base são calibradas pelas cenas mais claras do vídeo (sol a
   contraluz em ~12s, sofá claro em ~17s): abaixo disto a subcopy de 16px cai
   sob 4.5:1 nelas. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(18, 18, 18, 0.25) 0%,
    rgba(18, 18, 18, 0) 35%,
    rgba(18, 18, 18, 0.32) 62%,
    rgba(18, 18, 18, 0.82) 100%
  );
}

.hero-tempo .conteudo-hero {
  z-index: 2;
  position: relative;
  flex-flow: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  max-width: 1100px;
  margin: 0;
  padding: 0 48px 96px;
}

/* O "+" pendura num gutter à esquerda (largura --plus-w) para que a palavra
   ("tempo"/"tô") e a tagline abaixo comecem todas no MESMO x — o do texto, não
   o do "+". */
.conteudo-hero {
  --plus-w: clamp(26px, 3.7vw, 52px);
}

/* Frases empilhadas na mesma célula: a caixa cresce pra maior delas, então uma
   frase que quebra em duas linhas no celular não invade o CTA. */
.hero-line {
  display: grid;
  justify-items: start;
  margin: 0;
  padding-left: var(--plus-w);
  font-family: Fraunces, Georgia, serif;
  font-weight: 300;
  /* Mínimo baixo pra a frase mais longa caber em UMA linha até nos celulares
     estreitos (a 32px o prefixo "+ tempo" quebrava do resto). O crossfade só é
     limpo com todas as frases na mesma contagem de linha. */
  font-size: clamp(21px, 6vw, 84px);
  line-height: 1.05;
  color: var(--branco);
}

/* Build ("+ tempo ___") e remate ("tô com tempo") dividem a mesma célula e
   fazem crossfade entre si no último corte. */
.hero-build,
.hero-finale {
  grid-area: 1 / 1;
  transition: opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hero-finale {
  opacity: 0;
}

.hero-line.is-finale .hero-build {
  opacity: 0;
}

.hero-line.is-finale .hero-finale {
  opacity: 1;
}

/* Só o final da frase troca; o prefixo "+ tempo" permanece fixo. Os tails
   empilham na mesma célula (inline-grid), largura da maior — sem reflow. */
.hero-tail {
  display: inline-grid;
  margin-left: 0.24em;
  vertical-align: baseline;
}

.hero-tail .tail {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hero-tail .tail.active {
  opacity: 1;
}

/* "+" no gutter: recuado para a esquerda da palavra e baixado para o centro
   óptico da minúscula (o glifo "+" da Fraunces assenta alto). */
.hero-plus {
  display: inline-block;
  width: var(--plus-w);
  margin-left: calc(-1 * var(--plus-w));
  transform: translateY(0.13em);
}

.hero-line em {
  font-style: italic;
  color: #fbc104;
}

/* Subtítulo = a própria CTA. Sem botão preenchido para não disputar destaque
   com o vídeo e as frases; o convite mora no link inline. */
.hero-sub {
  margin: 44px 0 0;
  padding-left: var(--plus-w);
  color: rgba(255, 255, 255, 0.9);
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 0.01em;
}

/* Parte da mesma frase: mesma cor e peso do texto ao redor, sem afordância em
   repouso. O único destaque é o underline no hover. */
.hero-cta-inline {
  color: inherit;
  font: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}

.hero-cta-inline:hover,
.hero-cta-inline:focus-visible {
  border-bottom-color: currentColor;
}

/* Sinaliza que existe página abaixo do 100svh. Centralizado por eliminação: à
   direita bate no balão fixo do WhatsApp, à esquerda encosta no CTA. */
.scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 1px;
  height: 56px;
  background: rgba(255, 255, 255, 0.4);
  overflow: hidden;
}

.scroll-hint::after {
  content: "";
  position: absolute;
  top: -50%;
  left: 0;
  width: 100%;
  height: 50%;
  background: var(--branco);
  animation: hero-drip 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

@keyframes hero-drip {
  0% {
    top: -50%;
  }
  100% {
    top: 110%;
  }
}

@media screen and (max-width: 767px) {
  .hero-tempo .conteudo-hero {
    padding: 0 24px 72px;
  }

  .hero-sub {
    margin-top: 32px;
    font-size: 16px;
  }

  .scroll-hint {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video {
    display: none;
  }

  .hero-build,
  .hero-finale,
  .hero-tail .tail {
    transition: none;
  }

  .scroll-hint::after {
    animation: none;
  }
}

/* Nav sobre o hero: transparente no topo, sólida depois de 60% do viewport.
   Só a home tem hero de vídeo — daí a classe no markup.
   z-index explícito: `.menu-1` não define um, e a classe `w-nav` (que trazia
   z-index:1000) saiu junto com o menu do Webflow — sem isto a nav fica atrás
   do vídeo. */
.menu-1.menu-over-hero {
  z-index: 1000;
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    backdrop-filter 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.menu-1.menu-over-hero.is-scrolled {
  background-color: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Nav = logo à esquerda, CTA à direita. */
.menu-1.menu-over-hero .holder-1-menu {
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

/* Véu próprio da nav: sem ele, logo e CTA brancos somem quando o topo do vídeo
   é céu estourado (o scrim do hero é fraco no topo de propósito). Só na faixa
   da barra, some pra baixo — não escurece o hero. Desaparece quando a barra
   vira creme. */
.menu-1.menu-over-hero:not(.is-scrolled)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 140px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(18, 18, 18, 0.5) 0%,
    rgba(18, 18, 18, 0) 100%
  );
}

.menu-1.menu-over-hero:not(.is-scrolled) .img-1-menu {
  filter: brightness(0) invert(1);
}

/* CTA da nav: contorno branco minimalista sobre o vídeo, preenche roxo no hover.
   Ao rolar (barra creme) inverte para tinta escura, mantendo o hover roxo. */
.nav-cta {
  font-family: Lexend, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--branco);
  text-decoration: none;
  padding: 11px 24px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  transition: background-color 0.4s ease, border-color 0.4s ease,
    color 0.4s ease;
}

.nav-cta:hover {
  background-color: var(--roxo);
  border-color: var(--roxo);
  color: var(--branco);
}

.menu-1.menu-over-hero.is-scrolled .nav-cta {
  color: var(--cinza-escuro);
  border-color: rgba(15, 15, 15, 0.25);
}

.menu-1.menu-over-hero.is-scrolled .nav-cta:hover {
  background-color: var(--roxo);
  border-color: var(--roxo);
  color: var(--branco);
}