/* ============================================================
   Baseline design system, aplicado sobre a LP do Dr. Rafael Pamplona
   Etapa 1: grid rem adaptativo, header e hero, loader e menu overlay
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --background:#ffffff;
  --foreground:#0a0a0a;
  --brand:#2563c9;
  --brand-deep:#0f2f63;
  --brand-light:#5790e6;
  --accent-teal:#0b6e97;
  --surface:#f4f4f4;
  --surface-card:#ffffff;
  --ink:#0a0a0a;
  --ink-soft:#717784;
  --ghost:#d7dae1;
  --hairline:#e6e8ec;
  --on-brand:#ffffff;

  --radius-card:1.5rem;
  --radius-card-lg:2rem;
  --radius-pill:62.5rem;

  --ff-ui:"Onest",system-ui,sans-serif;
}

/* ---------- Grid rem adaptativo (base 1920) ---------- */
html{font-size:16px;scroll-behavior:auto}
@media (max-width:1920px){ html{font-size:0.833333vw} }
@media (max-width:1440px){ html{font-size:1.111111vw} }
@media (max-width:1024px){ html{font-size:1.5625vw} }
@media (max-width:640px){  html{font-size:4.444444vw} }

html.is-locked{position:relative;overflow:hidden;height:100%}

body{background:var(--background)}
:focus-visible{outline:2px solid var(--brand-light);outline-offset:2px}

/* ---------- Primitivas de reveal ---------- */
/* A caixa de clip precisa de folga em cima para os acentos (Á, Ê, Ç) e
   embaixo para as descidas. A margem negativa devolve a posicao original. */
.w,.ln{
  display:inline-block;overflow:hidden;vertical-align:top;
  padding:.22em .04em .16em;
  margin:-.22em -.04em -.16em;
}
.wi,.lni{display:inline-block;transform:translateY(115%);opacity:0;will-change:transform,opacity}
.rvw{opacity:0;will-change:transform,opacity}

/* ============================================================
   HERO
   ============================================================ */
.hero-bl{
  position:relative;isolation:isolate;overflow:hidden;
  margin:.5rem;
  border-radius:var(--radius-card-lg);
  background:var(--brand-deep);
  color:var(--on-brand);
  font-family:var(--ff-ui);
  display:flex;flex-direction:column;
  height:calc(100svh - 1rem);
  min-height:36rem;
}
@media (min-width:640px){ .hero-bl{margin:.75rem;height:calc(100svh - 1.5rem)} }

.hero-bl__plate{position:absolute;inset:0;z-index:-10}
.hero-bl__plateIn{position:absolute;left:0;right:0;top:-16%;height:132%;width:100%;will-change:transform}
/* No mobile a chapa fica no tamanho exato do hero. Os 132% de altura existem
   só para dar curso ao parallax do desktop, e é isso que ampliava o banner. */
@media (max-width:900px){
  .hero-bl__plateIn{top:0;height:100%;transform:none!important}
}
.hero-bl__plateIn img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-bl__grad{display:none}
/* No mobile o texto cai sobre a foto. Um degradê leve, da base até por volta
   do meio, devolve a leitura sem fechar a arte. */
@media (max-width:900px){
  .hero-bl__grad{
    display:block;
    position:absolute;inset:0;z-index:-9;pointer-events:none;
    background:linear-gradient(to top,
      rgba(0,0,0,.72) 0%,
      rgba(0,0,0,.5) 22%,
      rgba(0,0,0,.22) 40%,
      rgba(0,0,0,0) 58%);
  }
}

/* ---------- Header ---------- */
.hdr{
  position:relative;z-index:20;
  display:flex;align-items:center;
  padding:1.5rem 1.5rem 0;
  font-size:.75rem;color:#fff;
}
@media (min-width:640px){ .hdr{padding:2rem 2.5rem 0} }

.hdr__nav{flex:1;display:none;gap:2rem;align-items:center}
@media (min-width:1024px){ .hdr__nav{display:flex} }
.hdr__nav a{
  color:rgba(255,255,255,.9);text-decoration:none;
  letter-spacing:.04em;transition:color .25s ease;white-space:nowrap;
}
.hdr__nav a:hover{color:#fff}

.hdr__brand{flex:1;display:flex;justify-content:flex-start;align-items:center}
@media (min-width:1024px){ .hdr__brand{justify-content:center} }
.hdr__brand img{height:2.5rem;width:auto}

.hdr__right{flex:1;display:flex;justify-content:flex-end;align-items:center;gap:1rem}
@media (min-width:640px){ .hdr__right{gap:1.25rem} }

.hdr__cta{
  display:none;color:#fff;text-decoration:none;
  font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;
}
@media (min-width:640px){ .hdr__cta{display:inline-flex;align-items:center;gap:.5rem} }
.hdr__cta:hover{text-decoration:underline}
.hdr__cta svg{width:1.125rem;height:1.125rem}

.burger{
  width:2.5rem;height:2.5rem;display:grid;place-content:center;gap:5px;
  border:0;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.15);backdrop-filter:blur(8px);
  transition:background .25s ease;
}
.burger:hover{background:rgba(255,255,255,.25)}
.burger span{display:block;width:1rem;height:1px;background:#fff}

/* ---------- Título ---------- */
.hero-bl__title{padding:1rem 1.5rem 0;position:relative;z-index:2}
@media (min-width:640px){ .hero-bl__title{padding:1rem 2.5rem 0} }

.hero-bl__title h1{
  font-family:var(--ff-ui);
  font-size:3.8vw;font-weight:500;text-transform:uppercase;
  line-height:.95;letter-spacing:-.02em;margin:0;max-width:24ch;
}
.hero-bl__title h1 em{
  display:block;font-style:normal;
  font-size:.56em;line-height:1.05;margin-top:.5em;
  color:rgba(255,255,255,.85);letter-spacing:-.01em;max-width:30ch;
}
@media (max-width:1024px){ .hero-bl__title h1{font-size:5.2vw;max-width:none} }
@media (max-width:640px){ .hero-bl__title h1{font-size:7.4vw} }

.hero-bl__eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.22em;
  color:rgba(255,255,255,.7);margin:0 0 1.25rem;
}
.hero-bl__eyebrow .dot{width:.375rem;height:.375rem;border-radius:var(--radius-pill);background:var(--brand-light)}

/* ---------- Bloco inferior ---------- */
.hero-bl__bottom{
  margin-top:auto;position:relative;z-index:2;
  display:flex;flex-direction:column;gap:1.5rem;
  padding:0 1.5rem 2rem;
}
@media (min-width:640px){
  .hero-bl__bottom{flex-direction:row;justify-content:space-between;align-items:flex-end;padding:0 2.5rem 2.5rem}
}

.hero-bl__lead{max-width:42rem}
.hero-bl__sub{
  font-size:1.75rem;line-height:1.45;color:rgba(255,255,255,.85);margin:0;
}
.hero-bl__sub strong{display:block;font-weight:500;color:#fff;margin-bottom:.6rem}
.hero-bl__sub .hl{color:var(--brand-light)}
/* No mobile o dobro estoura a altura do hero e joga os botoes para fora da
   tela. Aqui o apoio fica no maior tamanho que ainda deixa tudo visivel. */
@media (max-width:640px){
  .hero-bl__sub{font-size:1rem;line-height:1.5}
  /* A segunda frase sai de cena no mobile para nao cobrir o rosto na foto.
     O texto continua no HTML e aparece normalmente no desktop. */
  .hero-bl__sub2{display:none}
}

.hero-bl__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}

/* Pill button */
.pill{
  display:inline-flex;align-items:center;gap:.5rem;
  border-radius:var(--radius-pill);padding:.875rem 1.75rem;
  font-family:var(--ff-ui);font-size:.875rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;text-decoration:none;
  border:1px solid transparent;transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.pill svg{width:1rem;height:1rem;will-change:transform}
.pill--light{background:#fff;color:var(--brand-deep)}
.pill--light:hover{background:var(--brand-light);color:#fff}
.pill--outline{border-color:rgba(255,255,255,.55);color:#fff}
.pill--outline:hover{background:#fff;color:var(--brand-deep)}

/* ---------- Cluster direito ---------- */
.hero-bl__right{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem}
@media (min-width:640px){ .hero-bl__right{align-items:flex-end} }

.glass{
  border-radius:var(--radius-card);
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.1);
  box-shadow:0 1.5rem 3rem rgba(15,47,99,.2);
  backdrop-filter:blur(10px);
  padding:.75rem;
}

.hero-bl__trust{
  display:flex;gap:.75rem;align-items:stretch;
  width:100%;max-width:20rem;
}
@media (min-width:640px){ .hero-bl__trust{max-width:26rem} }
/* No mobile o card de credenciais sai, para liberar o centro da tela.
   O conteudo continua no DOM e visivel do tablet para cima. */
@media (max-width:640px){ .hero-bl__trust{display:none} }
.hero-bl__trustItem{flex:1;display:flex;flex-direction:column;gap:.25rem;padding:.25rem .25rem}
.hero-bl__trustItem strong{font-size:.8rem;font-weight:500;line-height:1.1;letter-spacing:.02em}
.hero-bl__trustItem span{font-size:.65rem;line-height:1.35;color:rgba(255,255,255,.8)}
.hero-bl__trustDiv{width:1px;background:rgba(255,255,255,.15)}

.hero-bl__google{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:#fff;
  padding:.6rem .9rem;
}
.hero-bl__google .stars{display:inline-flex;gap:.1rem;color:#f5c451}
.hero-bl__google .stars svg{width:.85rem;height:.85rem}
.hero-bl__google .txt{font-size:.7rem;letter-spacing:.02em;color:rgba(255,255,255,.9)}

/* ============================================================
   MENU OVERLAY
   ============================================================ */
.ovl{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;pointer-events:none;font-family:var(--ff-ui)}
.ovl.is-open{pointer-events:auto}
.ovl__bg{position:absolute;inset:0;background:var(--brand-deep);opacity:0}
.ovl__panel{
  position:relative;display:flex;flex-direction:column;height:100%;
  padding:.5rem;opacity:0;transform:translateY(-24px);color:#fff;
}
@media (min-width:640px){ .ovl__panel{padding:.75rem} }
.ovl__in{display:flex;flex-direction:column;height:100%;padding:1.5rem}
@media (min-width:640px){ .ovl__in{padding:2rem 2.5rem} }

.ovl__top{display:flex;align-items:center;justify-content:space-between}
.ovl__top img{height:2.5rem;width:auto}
.ovl__close{
  width:2.5rem;height:2.5rem;display:grid;place-content:center;border:0;
  border-radius:var(--radius-pill);background:rgba(255,255,255,.15);color:#fff;
  transition:background .25s ease;
}
.ovl__close:hover{background:rgba(255,255,255,.25)}
.ovl__close svg{width:1.25rem;height:1.25rem;will-change:transform}

.ovl__nav{flex:1;display:flex;flex-direction:column;justify-content:center;gap:.5rem}
.ovl__nav a{
  display:block;font-size:3rem;font-weight:500;line-height:1.05;letter-spacing:-.02em;
  color:#fff;text-decoration:none;opacity:0;transform:translateY(28px);
  transition:color .25s ease;
}
@media (min-width:640px){ .ovl__nav a{font-size:3.6rem} }
.ovl__nav a:hover{color:var(--brand-light)}

.ovl__bottom{
  border-top:1px solid rgba(255,255,255,.15);padding-top:2rem;
  display:flex;flex-direction:column;gap:1.25rem;
}
@media (min-width:640px){ .ovl__bottom{flex-direction:row;align-items:center;justify-content:space-between} }

/* Reduz movimento */
@media (prefers-reduced-motion:reduce){
  .wi,.lni,.rvw,.loader__mark,.ovl__nav a{transform:none!important;opacity:1!important}
}