/* ============================================================
   site.css, robertocalderon.com.br
   Fonte unica de estilo do site: tokens, tipografia, header,
   botoes, bloco de acao e rodape. Toda pagina do site carrega
   este arquivo e acrescenta so o CSS das SUAS secoes.
   Extraido da home v40 em 26/08/2026.
   ============================================================ */


:root{
  --tinta:#0B0B0C;
  --tinta-2:#4A4A52;
  --tinta-3:#6B6B75;
  --papel:#FFFFFF;
  --papel-2:#F4F4F6;
  --fio:#E4E4E9;
  --azul:#0A66C2;
  --breu:#0B0B0C;
  --breu-2:#17171A;
  --breu-fio:#2A2A2F;
  --breu-texto:#A8A8B2;
  --wrap:1280px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:Inter,system-ui,-apple-system,sans-serif;
  background:var(--papel);color:var(--tinta);
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}
/* o header e fixo: ancora nao pode parar debaixo dele */
section[id]{scroll-margin-top:76px}

/* ---------------- tipografia ---------------- */
.display{
  font-size:clamp(38px,4.15vw,62px);line-height:1.0;letter-spacing:-.038em;
  font-weight:800;text-wrap:balance;
}
.h2{
  font-size:clamp(31px,3.7vw,54px);line-height:1.04;letter-spacing:-.035em;
  font-weight:800;text-wrap:balance;
}
.olho{font-size:clamp(19px,1.7vw,23px);line-height:1.42;font-weight:600;letter-spacing:-.017em}
.lead{font-size:18px;line-height:1.6;color:var(--tinta-2)}
.rot{
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-3);display:block;
}
.azul{color:var(--azul)}
  /* titulo em dois tempos: afirmacao num tempo, virada no outro */
  .t2{display:block;color:var(--azul);margin-top:.12em}
  .dono .t2{font-size:.9em;margin-top:.14em}
  .consult-cx .t2{color:#DCEAF9;font-size:.9em}

/* ---------------- header ---------------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease;
}
header.solido{background:rgba(255,255,255,.93);backdrop-filter:blur(14px);border-bottom-color:var(--fio)}
nav{display:flex;align-items:center;gap:clamp(18px,2vw,30px);height:88px;max-width:none;margin:0;
  padding:0 clamp(24px,3vw,46px);transition:height .3s ease}
header.solido nav{height:68px}
.logo{
  font-family:Archivo,Inter,system-ui,sans-serif;margin-right:auto;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.4em;font-size:19px;line-height:1;
  min-height:44px;padding-right:8px;border-radius:8px;
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 22px rgba(0,0,0,.5);
  transition:color .3s ease,text-shadow .3s ease;
}
.logo .l1{font-weight:300;letter-spacing:.02em}
.logo .l2{font-weight:600;letter-spacing:.19em}
header.solido .logo{color:var(--tinta);text-shadow:none}
.nav-l{display:flex;gap:clamp(14px,1.6vw,26px);font-size:15px;font-weight:500;color:var(--tinta-2)}
.nav-l a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;border-radius:8px}
.ham{color:var(--tinta)}
.nav-l a:hover{color:var(--tinta)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--azul);color:#fff;font-weight:700;font-size:15.5px;
  padding:0 clamp(18px,1.6vw,24px);height:clamp(44px,5.4vh,50px);border-radius:999px;letter-spacing:-.01em;
  transition:background .18s ease;white-space:nowrap;
}
.btn:hover{background:#08529c}
.btn.sm{height:44px;font-size:14.5px;padding:0 18px}
.btn.ghost{background:transparent;color:var(--tinta);border:1.5px solid var(--fio)}
.btn.ghost:hover{background:var(--papel-2)}
.btn.luz{background:#fff;color:var(--tinta)}
.btn.luz:hover{background:#E9E9EE}
.ham{display:none;width:44px;height:44px;border:1.5px solid var(--fio);border-radius:10px;background:none;cursor:pointer;align-items:center;justify-content:center}

/* ---------------- 8. papo ---------------- */
.papo{padding:120px 0}
.papo-cx{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.papo .h2{max-width:14ch}
.contatos{display:flex;flex-wrap:wrap;gap:14px 30px;margin-top:26px;font-size:15.5px;color:var(--tinta-2);font-weight:500}
.caixa{background:var(--papel-2);border-radius:28px;padding:44px;position:relative}
.caixa h3{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.15;max-width:20ch}
.caixa p{color:var(--tinta-2);margin-top:12px;font-size:16px;max-width:42ch}
.caixa .btn{margin-top:24px}
.contatos span,.contatos a{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.contatos a{font-weight:500}
.contatos a:hover{color:var(--azul)}
.contatos svg{width:18px;height:18px;flex:0 0 auto}

/* ---------------- 9. rodape ---------------- */
footer{background:var(--breu);color:#fff;padding:76px 0 34px}
.rgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:44px}
.rgrid h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#7A7A85;font-weight:700;margin-bottom:16px}
.rgrid a{display:flex;align-items:center;padding:6px 0;color:#C8C8D0;font-size:15px;min-height:44px}
.rgrid a:hover{color:#fff}
.rmarca b{font-family:Archivo,Inter,sans-serif;font-size:19px;display:flex;align-items:baseline;gap:.4em;margin-bottom:12px;line-height:1}
.rmarca b .l1{font-weight:300;letter-spacing:.02em}
.rmarca b .l2{font-weight:600;letter-spacing:.19em}
.rmarca p{color:var(--breu-texto);font-size:15px;max-width:34ch;line-height:1.5}
.rselo{display:block;margin-top:18px;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:#8E8E99;font-weight:600;line-height:1.8}
.rbase{
  margin-top:52px;padding-top:24px;border-top:1px solid var(--breu-fio);
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  font-size:13.5px;color:#7A7A85;
}
.vsel{font-weight:700;color:#9EC4F0;letter-spacing:.06em}

a:focus-visible,button:focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:8px}

@media(max-width:1080px){
  .rgrid{grid-template-columns:1fr 1fr;gap:38px}
  .papo-cx{grid-template-columns:1fr;gap:36px}
}

@media(max-width:860px){
  .wrap,nav{padding-left:22px;padding-right:22px}
  .nav-l{display:none}
  .ham{display:inline-flex}
  header.aberto{background:#fff;border-bottom-color:var(--fio)}
  header.aberto .logo{color:var(--tinta);text-shadow:none}
  header.aberto .nav-l{
    display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
    background:#fff;border-bottom:1px solid var(--fio);padding:6px 22px 18px;
  }
  header.aberto .nav-l a{padding:14px 0;border-bottom:1px solid var(--fio);font-size:17px;min-height:48px}
  nav{gap:12px;padding:0 18px}
  .logo{font-size:15px;gap:.3em}
  .logo .l2{letter-spacing:.12em}
  nav .btn.sm{padding:0 14px;font-size:14px;gap:0}
  nav .btn.sm .rotulo-longo{display:none}
  .ham{width:44px;height:44px}
  .perdas,.prods,.papo{padding:76px 0}
  .caixa{padding:32px}
  .caixa h3{font-size:22px}
  .rgrid{grid-template-columns:1fr;gap:32px}
}

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