/* ============================================================
   BASE — variáveis de cor/tipografia, reset, tipografia geral,
   utilitários reutilizados em várias seções (container, eyebrow,
   section-head, botões, placeholder de foto, animação reveal).
   Mexa aqui para mudar cores, fontes e botões em TODO o site.
   ============================================================ */

:root{
  --white:#FFFFFF;
  --pearl:#F3F6FA;
  --pearl-deep:#E7ECF3;
  --blue:#004AAD;
  --blue-deep:#00306E;
  --blue-ice:#EAF1FC;
  --graphite:#1C222B;
  --slate:#5C6572;
  --gold:#E3A33E;
  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:12px;
  --shadow-soft:0 20px 40px -24px rgba(0,74,173,0.35);
  --shadow-card:0 12px 28px -18px rgba(28,34,43,0.18);
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Manrope',sans-serif;
  color:var(--graphite);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
h1,h2,h3,h4{
  font-family:'Fredoka',sans-serif;
  font-weight:600;
  margin:0;
  line-height:1.15;
  color:var(--blue-deep);
}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
section{scroll-margin-top:88px;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

/* Utilitários de layout e texto usados em várias seções */
.container{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Manrope',sans-serif; font-weight:800; font-size:12.5px;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--blue);
}
.eyebrow::before{
  content:''; width:22px; height:2px; background:var(--gold); border-radius:2px;
}
.section-head{max-width:640px; margin-bottom:44px;}
.section-head h2{font-size:clamp(28px,4vw,38px); margin-top:10px;}
.section-head p{margin-top:14px; color:var(--slate); font-size:16.5px;}
.section-pearl{background:var(--pearl);}

/* Botões */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:100px; font-weight:700; font-size:15px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--blue); color:var(--white); box-shadow:var(--shadow-soft);}
.btn-primary:hover{background:var(--blue-deep); transform:translateY(-2px);}
.btn-outline{background:transparent; color:var(--blue-deep); border:1.5px solid var(--pearl-deep);}
.btn-outline:hover{border-color:var(--blue); transform:translateY(-2px);}
.btn-ghost{background:var(--blue-ice); color:var(--blue-deep);}
.btn-ghost:hover{background:var(--pearl-deep);}
.btn svg{width:18px; height:18px; flex-shrink:0;}

/* Animação de revelar ao rolar a página (usa js/scroll-reveal.js) */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease;}
.reveal.is-visible{opacity:1; transform:none;}

/* Caixa "placeholder" usada em Sobre, Produtos e Galeria enquanto não
   há fotos reais. Veja o README.md para trocar por fotos de verdade. */
.placeholder-photo{
  position:relative; border-radius:var(--radius-lg); background:var(--blue-ice);
  border:1.5px dashed #A9C4EA; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; color:var(--blue); text-align:center; padding:24px; min-height:100%;
}
.placeholder-photo svg{width:34px; height:34px;}
.placeholder-photo span{font-size:13px; font-weight:700; max-width:200px; line-height:1.4;}