/* ==========================================================================
   Currículo Pra Ontem — estilos que o Tailwind não cobre
   (o resto da folha de estilo é utilitário, direto no HTML)
   ========================================================================== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem; /* compensa o header fixo ao pular por âncora */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* --- Revelação ao rolar ---------------------------------------------------
   O elemento nasce escondido e o IntersectionObserver em main.js adiciona
   .is-visible. Se o JS não rodar, o :not() abaixo nunca se aplica e o
   conteúdo aparece normal — nada de página em branco por causa de animação. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.js-off .reveal {
  opacity: 1;
  transform: none;
}

/* --- Fundo do hero -------------------------------------------------------- */
.grid-bg {
  background-image:
    linear-gradient(to right, rgba(148, 163, 184, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 163, 184, .07) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}

.glow {
  background: radial-gradient(closest-side, rgba(16, 185, 129, .28), transparent);
  filter: blur(20px);
}

/* --- Balões da simulação de conversa -------------------------------------- */
.bubble-in,
.bubble-out {
  position: relative;
  max-width: 85%;
  padding: .6rem .85rem;
  border-radius: 1rem;
  font-size: .875rem;
  line-height: 1.45;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .12);
}
.bubble-in {
  background: #ffffff;
  color: #0f172a;
  border-top-left-radius: .25rem;
  margin-right: auto;
}
.bubble-out {
  background: #d9fdd3;
  color: #0f172a;
  border-top-right-radius: .25rem;
  margin-left: auto;
}

/* --- FAQ ------------------------------------------------------------------ */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform .25s ease; }

/* --- Documentos legais ---------------------------------------------------- */
.legal h2 {
  font-size: 1.375rem;
  font-weight: 700;
  color: #0f172a;
  margin: 2.5rem 0 .75rem;
  scroll-margin-top: 6rem;
}
.legal h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: #0f172a;
  margin: 1.75rem 0 .5rem;
}
.legal p { margin: .75rem 0; }
.legal ul { margin: .75rem 0; padding-left: 1.25rem; list-style: disc; }
.legal ol { margin: .75rem 0; padding-left: 1.25rem; list-style: decimal; }
.legal li { margin: .35rem 0; }
.legal a { color: #047857; text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: #065f46; }
.legal strong { color: #0f172a; font-weight: 600; }
/* Tabela de três colunas não cabe em 375px. Ela rola dentro da própria caixa
   em vez de empurrar a página inteira para o lado. */
.legal-tabela {
  overflow-x: auto;
  margin: 1rem 0;
  -webkit-overflow-scrolling: touch;
}
.legal table { width: 100%; min-width: 34rem; border-collapse: collapse; margin: 1rem 0; font-size: .9rem; }
.legal-tabela > table { margin: 0; }
.legal th, .legal td { border: 1px solid #e2e8f0; padding: .6rem .7rem; text-align: left; vertical-align: top; }
.legal th { background: #f8fafc; font-weight: 600; color: #0f172a; }

/* Foco visível e consistente para navegação por teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid #10b981;
  outline-offset: 2px;
  border-radius: .375rem;
}