/* Estúdio Rock Design · páginas de serviço.
   Mesma paleta e mesma tipografia da home, em uma estrutura mais direta:
   quem chega aqui vem da busca e quer entender o serviço e falar com alguém. */

:root{
  --off:#EDEADE;
  --off2:#E4E0D2;
  --char:#3D3D3D;
  --mut:#6B6559;
  --line:rgba(61,61,61,.15);
  --acc:#B0512E;
  --acc-cl:#C4693F;
  --ease:cubic-bezier(.22,1,.36,1);
  --max:1180px;
  --pad:clamp(18px,4vw,44px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Montserrat',system-ui,sans-serif;background:var(--off);color:var(--char);
  font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:clip}
@supports not (overflow-x:clip){body{overflow-x:hidden}}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--acc);color:#fff}
:focus-visible{outline:2px solid var(--acc);outline-offset:4px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad);width:100%}
/* Medida de linha em display: NUNCA usar ch aqui. Em Anisette caixa alta um caractere
   real ocupa quase o dobro de 1ch, então um limite em ch estrangula o título e sobra
   palavra solta na última linha. O que resolve é deixar o título usar a coluna inteira
   e pedir para o navegador equilibrar as linhas com text-wrap:balance. */
h1,h2,h3,.disp{font-family:'anisette-std','Montserrat',sans-serif;font-weight:400;
  text-transform:uppercase;line-height:1.06;letter-spacing:.005em;
  text-wrap:balance;-webkit-hyphens:none;hyphens:none}
.tag{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700;
  color:var(--acc);display:block}
/* pretty cuida do órfão da última linha sem forçar linhas iguais, que é o certo para texto corrido */
p,li{text-wrap:pretty}
.corpo{font-size:1.04rem;line-height:1.78;color:var(--mut);max-width:min(100%,58ch)}
.ico{width:1em;height:1em;flex:0 0 auto}

/* ---------- topo escuro ---------- */
.topo{position:relative;isolation:isolate;color:var(--off);padding-bottom:clamp(46px,7vh,90px)}
.topo::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--char);
  background-image:
    radial-gradient(40% 52% at 10% 16%, rgba(176,81,46,.6), transparent 70%),
    radial-gradient(34% 44% at 90% 10%, rgba(150,145,138,.32), transparent 72%),
    radial-gradient(46% 54% at 76% 96%, rgba(176,81,46,.4), transparent 72%)}

.nav{position:sticky;top:14px;z-index:60;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.nav-in{position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:11px 11px 11px 22px;border-radius:999px;margin-top:14px}
.nav-in::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:rgba(61,61,61,.42);border:1px solid rgba(237,234,222,.16);
  backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4)}
.nav-logo img{height:14px;display:block}
.nav-menu{display:flex;align-items:center;gap:24px}
.nav-menu a{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:rgba(237,234,222,.74);transition:color .3s}
.nav-menu a:hover{color:var(--off)}
.nav-whatsapp{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.nav-whatsapp .ico{width:14px;height:14px;color:var(--acc-cl)}
@media(max-width:900px){.nav-menu a:not(.nav-whatsapp):not(.btn){display:none}.nav-menu{gap:14px}}
@media(max-width:520px){.nav-in{padding-left:16px}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:999px;font-size:.74rem;letter-spacing:.11em;
  text-transform:uppercase;font-weight:700;white-space:nowrap;
  transition:transform .4s var(--ease),background .35s,color .35s,border-color .35s}
.btn:hover{transform:translateY(-2px)}
.btn-cheio{background:var(--acc);color:#fff}
.btn-cheio:hover{background:#c15b34}
.btn-linha{border:1px solid rgba(237,234,222,.34);color:var(--off)}
.btn-linha:hover{border-color:var(--off)}
.btn-escuro{background:var(--char);color:var(--off)}
.btn-vazado{border:1px solid var(--line);color:var(--char)}
.btn-vazado:hover{border-color:var(--char)}
.nav .btn{padding:12px 20px}

/* migalha de pão. Serve para o leitor e para o Google entenderem onde a página fica. */
.migalha{padding:clamp(44px,7vh,76px) 0 0;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;color:rgba(237,234,222,.56)}
.migalha a{color:rgba(237,234,222,.8);border-bottom:1px solid rgba(237,234,222,.28);padding-bottom:2px}
.migalha a:hover{color:var(--off)}
.migalha span{margin:0 9px}

.hero{padding-top:clamp(22px,3.6vh,38px)}
.hero h1{font-size:clamp(1.65rem,3.7vw,2.85rem);max-width:100%;margin-top:16px}
.hero .lead{font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.75;color:rgba(237,234,222,.8);
  max-width:min(100%,54ch);margin-top:clamp(18px,2.6vh,28px)}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3.4vh,36px)}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:clamp(26px,3.6vh,38px)}
.chip{font-size:.72rem;letter-spacing:.05em;padding:9px 16px;border-radius:999px;
  border:1px solid rgba(237,234,222,.2);color:rgba(237,234,222,.82);background:rgba(237,234,222,.05)}
.chip b{font-weight:700;color:var(--off)}

/* ---------- seções claras ---------- */
section{padding:clamp(44px,7vh,88px) 0}
section[id]{scroll-margin-top:100px}
section h2{font-size:clamp(1.5rem,2.7vw,2.15rem);max-width:min(100%,17em);margin-top:14px}
section > .wrap > .corpo{margin-top:18px}

.entregas{list-style:none;margin-top:clamp(26px,4vh,40px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:0 clamp(24px,4vw,56px);border-top:1px solid var(--line)}
.entregas li{position:relative;padding:19px 0 19px 30px;border-bottom:1px solid var(--line);
  font-size:.98rem;line-height:1.6}
.entregas li::before{content:"";position:absolute;left:0;top:1.5em;width:13px;height:1px;
  background:var(--acc)}
.entregas li b{display:block;font-weight:700;margin-bottom:3px}
.entregas li span{color:var(--mut);font-size:.92rem;line-height:1.55}

/* casos reais */
.casos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:clamp(16px,2.2vw,26px);margin-top:clamp(26px,4vh,40px)}
.caso{display:flex;flex-direction:column;gap:12px;padding:clamp(24px,3vw,32px);
  border-radius:20px;background:var(--off2);border:1px solid var(--line);
  transition:transform .5s var(--ease),border-color .4s}
.caso:hover{transform:translateY(-4px);border-color:rgba(176,81,46,.5)}
.caso .mini{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--acc)}
.caso h3{font-size:1.24rem}
.caso p{font-size:.94rem;line-height:1.66;color:var(--mut);flex:1}
.caso .link{font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
  display:inline-flex;align-items:center;gap:8px;transition:gap .35s var(--ease),color .35s}
.caso:hover .link{gap:13px;color:var(--acc)}

/* etapas */
.escuro{position:relative;isolation:isolate;color:var(--off)}
.escuro::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--char);
  background-image:radial-gradient(44% 60% at 84% 12%, rgba(176,81,46,.42), transparent 72%)}
.escuro h2{color:var(--off)}
.escuro .corpo{color:rgba(237,234,222,.72)}
.etapas{list-style:none;margin-top:clamp(26px,4vh,40px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
  gap:clamp(18px,2.4vw,30px)}
.etapas li{padding-top:20px;border-top:1px solid rgba(237,234,222,.22)}
.etapas .no{font-family:'anisette-std','Montserrat',sans-serif;font-size:.84rem;color:var(--acc-cl);
  letter-spacing:.1em;display:block;margin-bottom:11px}
.etapas h3{font-size:1.1rem;margin-bottom:9px}
.etapas p{font-size:.92rem;line-height:1.62;color:rgba(237,234,222,.7)}

/* perguntas */
.faq{margin-top:clamp(24px,3.6vh,36px);border-top:1px solid var(--line)}
.faq .item{border-bottom:1px solid var(--line)}
.faq h3{font-family:'Montserrat',sans-serif;text-transform:none;font-weight:600;
  font-size:1.02rem;line-height:1.5;letter-spacing:0;padding:21px 0 9px;
  text-wrap:pretty;max-width:74ch}
.faq p{font-size:.96rem;line-height:1.72;color:var(--mut);padding-bottom:21px;max-width:74ch}

/* fecho */
.fecho .cartao{position:relative;overflow:hidden;border-radius:26px;color:#fff;
  background:var(--acc);padding:clamp(34px,6vw,66px);text-align:center}
.fecho .cartao::after{content:"";position:absolute;right:-12%;top:-40%;width:56%;aspect-ratio:1;
  border-radius:50%;background:rgba(255,255,255,.09)}
.fecho .cartao > *{position:relative;z-index:2}
.fecho h2{color:#fff;max-width:min(700px,100%);margin:0 auto 16px}
.fecho p{max-width:48ch;margin:0 auto 30px;color:rgba(255,255,255,.9);font-size:1rem;line-height:1.7}
.fecho .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-branco{background:#fff;color:var(--acc)}
.btn-linha-branco{border:1px solid rgba(255,255,255,.5);color:#fff}
.btn-linha-branco:hover{border-color:#fff}
.fecho .fone{margin:24px auto 0;font-size:.86rem;color:rgba(255,255,255,.78);max-width:none}
.fecho .fone a{font-weight:700;color:#fff;border-bottom:1px solid rgba(255,255,255,.42);
  padding-bottom:1px;font-variant-numeric:tabular-nums}

/* rodapé */
.footer{background:var(--char);color:rgba(237,234,222,.7);padding:clamp(40px,6vh,68px) 0 30px;
  font-size:.88rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(24px,4vw,60px)}
.footer img{height:15px;margin-bottom:16px}
.footer-marca p{max-width:34ch;line-height:1.7}
.footer h4{font-family:'anisette-std','Montserrat',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:.8rem;letter-spacing:.06em;color:var(--off);margin-bottom:14px}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.footer a:hover{color:var(--off)}
.footer-fim{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  align-items:center;margin-top:clamp(28px,4vh,48px);padding-top:22px;
  border-top:1px solid rgba(237,234,222,.16);font-size:.76rem}
.footer-legal{display:flex;gap:18px;flex-wrap:wrap}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr;gap:30px}}

/* atalho fixo de WhatsApp */
.zap{position:fixed;right:clamp(14px,2.4vw,26px);bottom:clamp(14px,2.4vw,26px);z-index:70;
  display:inline-flex;align-items:center;gap:9px;padding:13px 20px 13px 17px;border-radius:999px;
  background:var(--char);color:var(--off);border:1px solid rgba(237,234,222,.2);
  box-shadow:0 10px 30px rgba(61,61,61,.28);
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .35s}
.zap svg{width:19px;height:19px;flex:0 0 auto;color:var(--acc-cl)}
.zap:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(61,61,61,.36);background:#333}
@media(max-width:560px){.zap span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .zap{padding:15px;gap:0}}
@media print{.zap,.nav{display:none}}