/* Home da Sarah (oisarah.com.br). Versão escura da paleta do painel (sarah-painel/tela/painel.css):
   mesmas fontes, mesmo azul de ação, cantos retos, fio no lugar de caixa. */
:root{
  --fundo:#07080C; --fundo-2:#0D0F16;
  --texto:#F4F4F6; --texto-2:#B9BBC6; --texto-3:#8A8D9B;
  --fio:rgba(255,255,255,.12); --fio-forte:rgba(255,255,255,.22);
  --primary:#0620F3; --primary-hover:#2B43FF; --primary-claro:#8C9BFF;
  --font-display:"Bricolage Grotesque","Geist",system-ui,sans-serif;
  --font-body:"Geist",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  --ease:cubic-bezier(.4,0,.2,1); --dur:200ms;
  --pad-x:clamp(20px,4vw,64px); --topo-h:64px; --toque:44px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--fundo);color:var(--texto);font-family:var(--font-body);
  font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--primary-claro);outline-offset:3px}

/* Topo: flutua sobre a foto */
.topo{
  position:absolute;inset:0 0 auto 0;z-index:3;height:var(--topo-h);
  display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad-x);
}
.marca{font-family:var(--font-display);font-weight:800;font-size:24px;letter-spacing:-.02em}
.marca-oi{color:var(--primary-claro)}
.link-topo{
  display:inline-flex;align-items:center;min-height:var(--toque);padding:0 4px;
  font-size:14px;font-weight:500;color:var(--texto-2);transition:color var(--dur) var(--ease);
}
.link-topo:hover{color:var(--texto)}

/* A tela inteira: hero em cima, blocos embaixo */
main{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}

.hero{position:relative;flex:1 1 auto;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero-foto{
  position:absolute;inset:0;z-index:-2;
  background:var(--fundo-2) url("img/hero.jpg") 72% 30%/cover no-repeat;
}
/* Pontilhado escuro por cima da foto: os pontos deixam a foto passar, o entorno escurece.
   Por baixo dele, um degradê que fecha à esquerda (onde fica o texto) e na base (onde encosta nos blocos). */
.hero-pontos{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(circle,transparent 1px,rgba(7,8,12,.46) 1.6px) 0 0/5px 5px,
    linear-gradient(90deg,rgba(7,8,12,.88) 0%,rgba(7,8,12,.5) 40%,rgba(7,8,12,.05) 78%),
    linear-gradient(0deg,var(--fundo) 0%,rgba(7,8,12,0) 38%);
}
.hero-texto{
  width:100%;max-width:820px;
  padding:calc(var(--topo-h) + 16px) var(--pad-x) clamp(24px,4.5vh,56px);
}
.kicker{
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--primary-claro);
  margin-bottom:clamp(10px,1.8vh,18px);
}
h1{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(34px,min(5.4vw,8.4vh),76px);text-wrap:balance;
}
.apoio{
  margin-top:clamp(12px,2vh,22px);max-width:560px;
  font-size:clamp(16px,min(1.5vw,2.4vh),20px);color:var(--texto-2);text-wrap:pretty;
}
.hero-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:clamp(16px,3vh,32px)}
.botao{
  display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;
  background:var(--primary);color:#fff;font-weight:600;font-size:16px;
  transition:background var(--dur) var(--ease);
}
.botao:hover{background:var(--primary-hover)}
.botao span{transition:transform var(--dur) var(--ease)}
.botao:hover span{transform:translateX(4px)}
.nota{font-size:14px;color:var(--texto-3)}

/* Os seis blocos: uma faixa, separados por fio, sem caixa */
.blocos{
  flex:0 0 auto;display:grid;grid-template-columns:repeat(6,1fr);
  border-top:1px solid var(--fio);background:var(--fundo);
}
.bloco{
  position:relative;display:flex;flex-direction:column;gap:6px;
  padding:clamp(14px,2.4vh,24px) clamp(14px,1.4vw,24px) clamp(16px,2.6vh,26px);
  border-left:1px solid var(--fio);
  transition:background var(--dur) var(--ease);
}
.bloco:first-child{border-left:0;padding-left:var(--pad-x)}
.bloco:last-child{padding-right:var(--pad-x)}
.bloco::before{
  content:"";position:absolute;inset:-1px 0 auto 0;height:2px;background:var(--primary-hover);
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease);
}
.bloco:hover,.bloco:focus-visible{background:var(--fundo-2)}
.bloco:hover::before,.bloco:focus-visible::before{transform:scaleX(1)}
.bloco-num{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--texto-3)}
.bloco h2{font-family:var(--font-display);font-weight:800;font-size:clamp(17px,1.35vw,21px);letter-spacing:-.01em;line-height:1.15}
.bloco p{font-size:14px;line-height:1.4;color:var(--texto-2);text-wrap:pretty}
.bloco-seta{
  margin-top:auto;padding-top:8px;font-size:18px;color:var(--primary-claro);
  transition:transform var(--dur) var(--ease);
}
.bloco:hover .bloco-seta{transform:translateX(4px)}

/* Tela baixa (notebook de 13"): os blocos perdem a seta para tudo caber sem rolar */
@media (min-width:1025px) and (max-height:700px){
  .bloco-seta{display:none}
}

/* Tablet: três por linha */
@media (max-width:1024px){
  .blocos{grid-template-columns:repeat(3,1fr)}
  .bloco{padding-left:var(--pad-x);padding-right:16px}
  .bloco:nth-child(3n+1){border-left:0}
  .bloco:nth-child(n+4){border-top:1px solid var(--fio)}
  .bloco:nth-child(3n){padding-right:var(--pad-x)}
  .bloco:last-child{padding-right:var(--pad-x)}
  .bloco-seta{display:none}
}

/* Celular: a hero ocupa quase a tela e os blocos rolam um pouco, dois por linha */
@media (max-width:640px){
  :root{--topo-h:56px}
  main{min-height:0}
  .hero{min-height:74vh;min-height:74svh}
  .hero-foto{background-position:68% 20%}
  .hero-pontos{
    background:
      radial-gradient(circle,transparent 1px,rgba(7,8,12,.46) 1.6px) 0 0/5px 5px,
      linear-gradient(0deg,var(--fundo) 0%,rgba(7,8,12,.82) 38%,rgba(7,8,12,.15) 78%);
  }
  .botao{width:100%;justify-content:center}
  .blocos{grid-template-columns:repeat(2,1fr)}
  .bloco,.bloco:nth-child(3n),.bloco:last-child{padding:16px 14px 18px var(--pad-x);min-height:var(--toque)}
  .bloco:nth-child(3n+1){border-left:1px solid var(--fio)}
  .bloco:nth-child(2n+1){border-left:0}
  .bloco:nth-child(2n){padding-left:16px;padding-right:var(--pad-x)}
  .bloco:nth-child(n+3){border-top:1px solid var(--fio)}
  .bloco p{font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}