/* =========================================================
   BASE — reset, tipografia e utilitários de layout.
   ========================================================= */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  font-family:var(--fonte-corpo);
  font-size:1rem;
  line-height:1.6;
  color:#333;
  background:var(--branco);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{display:block;max-width:100%;height:auto}
ul{list-style:none}
a{text-decoration:none;color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

:focus-visible{outline:3px solid var(--verde);outline-offset:3px;border-radius:6px}

h1,h2,h3{font-family:var(--fonte-titulo);color:var(--tinta);line-height:1.25}
p{color:var(--cinza-texto)}
strong{color:inherit;font-weight:700}

/* ---------- layout ---------- */
.container{
  width:100%;
  max-width:var(--col);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

section{padding-block:var(--sec)}
.sec--cinza{background:var(--cinza-fundo)}

/* ---------------------------------------------------------
   Título de seção com a barra em gradiente por baixo.
   É a peça que marca o começo de cada bloco da página.
   --------------------------------------------------------- */
.section-title{
  position:relative;
  margin-bottom:3.5rem;
  text-align:center;
  font-size:clamp(1.85rem,4.5vw,2.75rem);
  font-weight:800;
  letter-spacing:-1px;
  color:var(--tinta);
}
.section-title::after{
  content:'';
  position:absolute;left:50%;bottom:-20px;
  transform:translateX(-50%);
  width:100px;height:5px;border-radius:10px;
  background:var(--grad-barra);
}
.section-title span{color:var(--verde)}

/* Linha de apoio abaixo do título de seção. */
.section-sub{
  max-width:640px;
  margin:-2.25rem auto 3rem;
  text-align:center;
  font-size:1.05rem;
}

/* ---------- animações ---------- */
@keyframes pulseSoft{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.04)}
}
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:none}
}

/* Entrada ao rolar. */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}