/* ==========================================================================
   SS Estúdio — design e desenvolvimento · Araçatuba/SP
   Paleta e tipografia vindas do manual da marca (Tinta, Brasa, Pedra, Fumaça).
   O site tem um objetivo: provar que ele entrega, e abrir conversa no WhatsApp.
   ========================================================================== */

:root{
  --tinta:    #151D2E;
  --tinta-2:  #243149;
  --brasa:    #D9481F;
  --brasa-cl: #F2703F;
  --pedra:    #EAEDF1;
  --papel:    #FBFCFD;
  --papel-2:  #F1F4F8;
  --fumaca:   #5A6577;
  --linha:    #D3D9E1;
  --linha-2:  #E2E7ED;
  --claro:    #F6F8FA;

  --f-disp: "Bricolage Grotesque", "Public Sans", system-ui, sans-serif;
  --f-corpo: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  --t-0:  clamp(1.02rem, .98rem + .2vw, 1.1rem);
  --t-2:  clamp(1.25rem, 1.1rem + .6vw, 1.6rem);
  --t-3:  clamp(1.85rem, 1.3rem + 2.1vw, 3rem);
  --disp: clamp(2.6rem, 1.5rem + 4.8vw, 5.2rem);

  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-6:48px; --s-8:64px; --s-12:96px;
  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 56px);
  --sec: clamp(64px, 9vw, 120px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; }
}

body{
  margin:0; background:var(--pedra); color:var(--tinta);
  font-family:var(--f-corpo); font-size:var(--t-0); line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3{ font-family:var(--f-disp); font-weight:800; line-height:1.04; letter-spacing:-.03em; margin:0; }
h3{ font-weight:600; letter-spacing:-.01em; }
p{ margin:0; } a{ color:inherit; } img{ display:block; max-width:100%; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:3px solid var(--brasa); outline-offset:3px; border-radius:2px; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); }
.sec{ padding:var(--sec) 0; }
.sec-papel{ background:var(--papel); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.sr-only:focus{ position:static; width:auto; height:auto; margin:0; clip:auto;
  padding:10px 16px; background:var(--brasa); color:#fff; }

.etiqueta{ display:block; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fumaca); margin-bottom:14px; }
.sec-cab{ max-width:62ch; margin-bottom:var(--s-6); }
.sec-cab h2{ font-size:var(--t-3); }
.sec-cab p{ color:var(--fumaca); font-size:1.08rem; margin-top:16px; max-width:56ch; }
.brasa{ color:var(--brasa); }

/* marca ------------------------------------------------------------------- */
/* As cores e a espessura do simbolo NAO ficam aqui: conteudo clonado por <use>
   vive numa shadow tree e nao e alcancado por seletor de CSS de fora. Elas sao
   atributos dos proprios <symbol> no HTML, em duas versoes (#ss e #ss-claro). */
svg.mark{ display:block; overflow:visible; }

/* topo -------------------------------------------------------------------- */
.topo{ position:sticky; top:0; z-index:60; background:rgba(21,29,46,.94);
  backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid rgba(246,248,250,.1); }
.topo-in{ display:flex; align-items:center; gap:var(--s-3); min-height:70px; }
.marca{ display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto; }
.marca svg.mark{ width:32px; height:32px; flex:none; }
.marca .nome{ font-family:var(--f-disp); font-weight:800; font-size:1.35rem;
  letter-spacing:-.05em; color:var(--claro); line-height:1; }
.marca .desc{ display:block; font-family:var(--f-mono); font-size:.52rem; letter-spacing:.2em;
  text-transform:uppercase; color:#8D9BB0; margin-top:3px; }
.nav ul{ display:flex; gap:var(--s-3); }
.nav a{ text-decoration:none; color:#B6C1D0; font-size:.95rem; padding:6px 0;
  border-bottom:2px solid transparent; transition:color .2s, border-color .2s; }
.nav a:hover, .nav a.ativo{ color:var(--claro); border-color:var(--brasa-cl); }
.burger{ display:none; background:none; border:1px solid rgba(246,248,250,.22); border-radius:4px;
  width:42px; height:38px; color:var(--claro); cursor:pointer; align-items:center; justify-content:center; }
.burger svg{ width:20px; height:20px; }

@media (max-width:900px){
  .burger{ display:flex; order:3; }
  .nav{ order:4; flex-basis:100%; display:none; padding-bottom:var(--s-2); }
  .nav.aberto{ display:block; }
  .nav ul{ flex-direction:column; gap:0; }
  .nav a{ display:block; padding:12px 0; border-bottom:1px solid rgba(246,248,250,.1); }
  .topo-in{ flex-wrap:wrap; }
  .topo-cta{ display:none; }
}

/* botoes ------------------------------------------------------------------ */
.btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--f-corpo);
  font-weight:700; font-size:.97rem; text-decoration:none; padding:13px 24px;
  border-radius:3px; border:1px solid transparent; cursor:pointer;
  transition:transform .16s ease, background .2s, color .2s, border-color .2s; }
.btn:hover{ transform:translateY(-2px); }
.btn svg{ width:19px; height:19px; flex:none; }
.btn-brasa{ background:var(--brasa); color:#fff; }
.btn-brasa:hover{ background:#C13D18; }
.btn-claro{ background:var(--claro); color:var(--tinta); }
.btn-linha{ border-color:var(--linha); color:var(--tinta); background:transparent; }
.btn-linha:hover{ border-color:var(--tinta); }
.btn-linha-clara{ border-color:rgba(246,248,250,.3); color:var(--claro); background:transparent; }
.btn-linha-clara:hover{ border-color:var(--claro); }
.btn-lg{ padding:16px 30px; font-size:1.02rem; }

/* hero -------------------------------------------------------------------- */
.hero{ background:var(--tinta); color:var(--claro); padding:clamp(64px,9vw,110px) 0 clamp(56px,8vw,96px); }
.hero-in{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(32px,5vw,64px); align-items:center; }
.hero .etiqueta{ color:#8D9BB0; }
.hero h1{ font-size:var(--disp); letter-spacing:-.045em; line-height:.95; }
.hero h1 em{ font-style:normal; color:var(--brasa-cl); }
.hero-lead{ color:#B6C1D0; font-size:1.14rem; max-width:48ch; margin-top:22px; }
.hero-acoes{ display:flex; gap:14px; flex-wrap:wrap; margin-top:var(--s-4); }
.hero-meta{ display:flex; gap:var(--s-4); flex-wrap:wrap; margin-top:var(--s-4);
  padding-top:var(--s-3); border-top:1px solid rgba(246,248,250,.14); }
.hero-meta div{ display:flex; flex-direction:column; gap:2px; }
.hero-meta .k{ font-family:var(--f-mono); font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:#7E8DA3; }
.hero-meta .v{ font-size:.95rem; color:#E6EBF1; }
.hero-marca{ width:clamp(140px,18vw,210px); }
.hero-marca svg.mark{ width:100%; height:auto; }
@media (max-width:860px){
  .hero-in{ grid-template-columns:1fr; }
  .hero-marca{ order:-1; width:110px; }
}

/* a virada ---------------------------------------------------------------- */
.virada{ background:var(--brasa); color:#fff; padding:clamp(40px,5vw,64px) 0; }
.virada-in{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(20px,3vw,40px); align-items:center; }
.virada .num{ font-family:var(--f-disp); font-weight:800; font-size:clamp(3rem,7vw,5rem);
  line-height:.85; letter-spacing:-.05em; color:rgba(255,255,255,.34); }
.virada h2{ font-size:var(--t-2); font-weight:800; letter-spacing:-.02em; }
.virada p{ margin-top:12px; font-size:1.04rem; color:rgba(255,255,255,.92); max-width:60ch; }
@media (max-width:640px){ .virada-in{ grid-template-columns:1fr; } }

/* trabalhos --------------------------------------------------------------- */
.trabalhos{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-3); }
@media (max-width:820px){ .trabalhos{ grid-template-columns:1fr; } }
.trab{ background:var(--papel); border:1px solid var(--linha); display:flex; flex-direction:column;
  overflow:hidden; transition:border-color .2s, transform .2s; }
.trab:hover{ border-color:var(--tinta); transform:translateY(-3px); }
.trab-shot{ position:relative; background:var(--papel-2); border-bottom:1px solid var(--linha-2); }
/* height:auto e obrigatorio: sem ele o atributo height do HTML vira altura fixa
   e ganha do aspect-ratio, esticando a miniatura na vertical. */
.trab-shot img{ width:100%; height:auto; aspect-ratio:1440/690; object-fit:cover; object-position:top center; }
.selo{ position:absolute; top:12px; left:12px; font-family:var(--f-mono); font-size:.6rem;
  letter-spacing:.14em; text-transform:uppercase; padding:6px 11px; border-radius:2px;
  background:var(--tinta); color:var(--claro); }
.selo.no-ar{ background:var(--brasa); }
.trab-corpo{ padding:clamp(20px,2.6vw,28px); display:flex; flex-direction:column; gap:10px; flex:1; }
.trab-corpo h3{ font-size:1.3rem; }
.trab-nicho{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--fumaca); }
.trab-corpo p{ color:var(--fumaca); font-size:.97rem; }
.trab-pe{ margin-top:auto; padding-top:14px; border-top:1px solid var(--linha-2);
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.trab-link{ font-family:var(--f-disp); font-weight:600; font-size:.95rem;
  text-decoration:none; color:var(--brasa); display:inline-flex; align-items:center; gap:7px; }
.trab-link svg{ width:16px; height:16px; }
.trab-link:hover{ color:var(--tinta); }
.trab-vazio{ font-family:var(--f-mono); font-size:.7rem; color:var(--fumaca); }

/* passos ------------------------------------------------------------------ */
.passos{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4); }
@media (max-width:820px){ .passos{ grid-template-columns:1fr; gap:var(--s-3); } }
.passo{ border-top:2px solid var(--tinta); padding-top:var(--s-2); }
.passo .n{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em;
  color:var(--brasa); display:block; margin-bottom:10px; }
.passo h3{ font-size:1.24rem; margin-bottom:9px; }
.passo p{ color:var(--fumaca); font-size:.97rem; }

/* preco ------------------------------------------------------------------- */
.precos{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px;
  background:var(--linha); border:1px solid var(--linha); }
@media (max-width:720px){ .precos{ grid-template-columns:1fr; } }
.preco{ background:var(--papel); padding:clamp(26px,3.4vw,40px); display:flex; flex-direction:column; gap:12px; }
.preco .rot{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fumaca); }
.preco .val{ font-family:var(--f-disp); font-weight:800; font-size:clamp(1.65rem,2.9vw,2.25rem);
  letter-spacing:-.04em; line-height:1; }
.preco .val small{ font-size:1rem; font-weight:600; color:var(--fumaca); letter-spacing:0; }
.preco p{ color:var(--fumaca); font-size:.97rem; }
.preco ul{ display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.preco li{ display:flex; gap:9px; align-items:flex-start; font-size:.95rem; }
.preco li svg{ width:17px; height:17px; color:var(--brasa); flex:none; margin-top:3px; }
.preco-nota{ margin-top:var(--s-3); font-size:.95rem; color:var(--fumaca); max-width:64ch; }

/* sobre ------------------------------------------------------------------- */
.sobre{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px); align-items:start; }
@media (max-width:860px){ .sobre{ grid-template-columns:1fr; } }
.sobre p + p{ margin-top:16px; }
.sobre p{ color:var(--fumaca); }
.fatos{ border:1px solid var(--linha); background:var(--papel); }
.fato{ display:flex; justify-content:space-between; gap:16px; padding:15px 20px;
  border-bottom:1px solid var(--linha-2); font-size:.95rem; }
.fato:last-child{ border-bottom:none; }
.fato dt{ color:var(--fumaca); margin:0; }
.fato dd{ margin:0; font-family:var(--f-mono); font-size:.88rem; text-align:right; }

/* cta final --------------------------------------------------------------- */
.cta{ background:var(--tinta); color:var(--claro); padding:clamp(64px,8vw,110px) 0; text-align:center; }
.cta h2{ font-size:var(--t-3); max-width:20ch; margin:0 auto; }
.cta h2 em{ font-style:normal; color:var(--brasa-cl); }
.cta p{ color:#B6C1D0; margin:18px auto 0; max-width:52ch; font-size:1.06rem; }
.cta .btn{ margin-top:var(--s-4); }

/* rodape ------------------------------------------------------------------ */
.rodape{ background:var(--papel); border-top:1px solid var(--linha); padding:var(--s-8) 0 var(--s-4); }
.rodape-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--s-4); }
@media (max-width:760px){ .rodape-grid{ grid-template-columns:1fr; gap:var(--s-3); } }
.rodape svg.mark{ width:34px; height:34px; margin-bottom:14px; }
.rodape .rnome{ font-family:var(--f-disp); font-weight:800; font-size:1.2rem; letter-spacing:-.04em; }
.rodape p, .rodape li{ color:var(--fumaca); font-size:.93rem; }
.rodape h4{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fumaca); margin:0 0 12px; font-weight:400; }
.rodape ul{ display:flex; flex-direction:column; gap:9px; }
.rodape a{ text-decoration:none; }
.rodape a:hover{ color:var(--brasa); text-decoration:underline; }
.rodape-base{ margin-top:var(--s-6); padding-top:var(--s-3); border-top:1px solid var(--linha-2);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:.74rem; color:var(--fumaca); }

/* whatsapp flutuante ------------------------------------------------------ */
.wa-float{ position:fixed; right:18px; bottom:18px; z-index:70; width:56px; height:56px;
  border-radius:50%; background:#1FA855; color:#fff; display:grid; place-items:center;
  box-shadow:0 8px 22px rgba(21,29,46,.3); text-decoration:none; transition:transform .18s; }
.wa-float:hover{ transform:scale(1.07); }
.wa-float svg{ width:29px; height:29px; }

/* lgpd -------------------------------------------------------------------- */
.lgpd{ position:fixed; left:14px; right:14px; bottom:14px; z-index:80; display:none;
  background:var(--tinta); color:#D5DCE6; border-radius:4px; padding:16px 20px;
  gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  font-size:.88rem; box-shadow:0 12px 30px rgba(21,29,46,.3); }
.lgpd.ver{ display:flex; }
.lgpd a{ color:var(--brasa-cl); }
@media (max-width:520px){ .lgpd{ bottom:84px; } }

/* reveal ------------------------------------------------------------------ */
.js .rv{ opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease; }
.js .rv.ver{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .js .rv{ opacity:1 !important; transform:none !important; } }