/* Lucas Dias — estilo do site. Cores e tipografia conforme o manual da marca. */

@font-face { font-family:'Bodoni LD'; src:url('fontes/bodoni-500.woff2') format('woff2');
  font-weight:500; font-display:swap; }
@font-face { font-family:'Bodoni LD'; src:url('fontes/bodoni-400.woff2') format('woff2');
  font-weight:400; font-display:swap; }
@font-face { font-family:'Montserrat LD'; src:url('fontes/montserrat-400.woff2') format('woff2');
  font-weight:400; font-display:swap; }
@font-face { font-family:'Montserrat LD'; src:url('fontes/montserrat-600.woff2') format('woff2');
  font-weight:600; font-display:swap; }

:root {
  --tinta:#1F1F1F;
  --acento:#5F1826;
  --acento-claro:#B5545F;
  --fundo:#F5EEE8;
  --branco:#FFFFFF;
  --serif:'Bodoni LD', Didot, 'Bodoni MT', Georgia, serif;
  --sans:'Montserrat LD', 'Helvetica Neue', Arial, sans-serif;
  --limite:1120px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--fundo); color:var(--tinta); overflow-x:hidden;
  font-family:var(--sans); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased; }

h1,h2,h3 { font-family:var(--serif); font-weight:500; line-height:1.15; margin:0; }
h2 { font-size:clamp(30px,4.6vw,50px); letter-spacing:.01em; margin-bottom:14px; }
h3 { font-size:26px; }
p { margin:0 0 18px; }
a { color:inherit; }

.pular { position:absolute; left:-9999px; }
.pular:focus { left:16px; top:16px; background:var(--tinta); color:var(--branco);
  padding:10px 16px; z-index:99; }

/* ---------- topo ---------- */
.topo { position:sticky; top:0; z-index:20; display:flex; align-items:center;
  justify-content:space-between; gap:24px; padding:14px clamp(20px,5vw,56px);
  background:color-mix(in srgb, var(--fundo) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid rgba(0,0,0,.08); }
.marca { display:flex; align-items:center; gap:14px; text-decoration:none; }
.marca .simbolo { display:block; width:26px; color:var(--tinta); }
.marca .nome { font-family:var(--serif); font-size:19px; letter-spacing:.22em; }
.topo nav { display:flex; gap:clamp(14px,2.4vw,32px); font-size:12px;
  letter-spacing:.18em; text-transform:uppercase; }
.topo nav a { text-decoration:none; padding:6px 0; border-bottom:1px solid transparent; }
.topo nav a:hover { border-color:var(--acento); }
.cta-nav { color:var(--acento); }

svg { display:block; width:100%; height:auto; }

/* ---------- secoes ---------- */
section { padding:clamp(72px,11vw,148px) clamp(20px,5vw,56px); }
section > * { max-width:var(--limite); margin-inline:auto; }
.claro { background:var(--branco); }
.escuro { background:var(--tinta); color:var(--branco); }
.escuro h2 { color:var(--branco); }
.texto { max-width:62ch; }

/* ---------- capa ---------- */
.capa { min-height:calc(100svh - 64px); display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:26px; }
.capa .assinatura { width:min(440px,74vw); color:var(--tinta); }
.chamada { font-family:var(--serif); font-size:clamp(19px,2.4vw,26px);
  max-width:22ch; margin:0; }

.botao { display:inline-block; text-decoration:none; padding:15px 34px;
  background:var(--tinta); color:var(--branco); font-size:12px; letter-spacing:.24em;
  text-transform:uppercase; border:1px solid var(--tinta);
  transition:background .25s, color .25s; }
.botao:hover { background:var(--acento); border-color:var(--acento); }
.botao.claro { background:var(--branco); color:var(--tinta); border-color:var(--branco); }
.botao.claro:hover { background:var(--acento-claro); border-color:var(--acento-claro);
  color:var(--branco); }
.botao.vazado { background:transparent; color:var(--branco); border-color:rgba(255,255,255,.45); }
.botao.vazado:hover { background:var(--acento-claro); border-color:var(--acento-claro); }

/* ---------- espinha dorsal ---------- */
.olho { font-size:13px; letter-spacing:.30em; text-transform:uppercase;
  color:rgba(255,255,255,.75); margin-bottom:56px; line-height:2; }
.olho strong { color:var(--branco); font-weight:600; }

.espinha { list-style:none; margin:0; padding:0; }
.par { display:grid; grid-template-columns:1fr 92px 1fr; align-items:center;
  padding:26px 0; position:relative; }
.par .pilar { text-align:right; font-size:clamp(15px,2vw,22px); letter-spacing:.16em;
  text-transform:uppercase; }
.par .atitude { font-family:var(--serif); font-size:clamp(26px,4.2vw,46px);
  letter-spacing:.06em; }
.par .no { position:relative; height:100%; }
.par .no::before { content:''; position:absolute; top:50%; left:0; right:0; height:2px;
  background:var(--acento-claro); transform:translateY(-50%); }
.par .no::after { content:''; position:absolute; top:50%; left:50%; width:13px; height:13px;
  border-radius:50%; background:var(--acento-claro); transform:translate(-50%,-50%); }
/* fio vertical costurando os pares */
.par:not(:last-child)::after { content:''; position:absolute; top:50%; bottom:-50%;
  left:50%; width:2px; background:var(--acento-claro); transform:translateX(-50%); }

/* ---------- metodo ---------- */
.metodo { list-style:none; margin:0; padding:0; display:grid; gap:36px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.metodo li { border-top:2px solid var(--acento); padding-top:20px; }
.metodo .num { font-family:var(--serif); font-size:14px; letter-spacing:.2em;
  color:var(--acento); }
.metodo h3 { margin:6px 0 10px; }
.metodo p { font-size:16px; margin:0; }

/* ---------- cards ---------- */
.cards { display:grid; gap:28px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.card { background:var(--fundo); padding:34px 30px; border-left:3px solid var(--acento); }
.card h3 { margin-bottom:10px; }
.card p { font-size:16px; margin:0; }

/* ---------- contato ---------- */
.contatos { display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; }

/* ---------- rodape ---------- */
footer { background:var(--tinta); color:var(--branco); text-align:center;
  padding:56px 20px 64px; border-top:1px solid rgba(255,255,255,.12); }
footer .simbolo { display:block; width:34px; margin:0 auto 22px; color:var(--branco); }
footer p { margin:0; font-size:12px; letter-spacing:.22em; text-transform:uppercase; }
footer .mini { margin-top:10px; font-size:10px; color:rgba(255,255,255,.6);
  letter-spacing:.16em; }

/* ---------- animacao de entrada ---------- */
.revela { opacity:0; transform:translateY(18px); transition:opacity .7s ease,
  transform .7s ease; transition-delay:calc(var(--i,0) * .09s); }
.revela.visivel { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) {
  .revela { opacity:1; transform:none; transition:none; }
  html { scroll-behavior:auto; }
}

@media (max-width:640px) {
  .topo { padding:14px 20px; justify-content:center; }
  .topo nav { display:none; }   /* one-pager: no mobile o menu vira scroll + botoes */
  .marca .nome { font-size:17px; }
  .par { grid-template-columns:1fr 52px 1fr; }
  .par .pilar { letter-spacing:.10em; }
}