/* ASA Funilaria e Estética — estilos do site */
:root{
  --vermelho:#D7141E;
  --vermelho-claro:#ff5a61;
  --preto:#000;
  --grafite:#121212;
  --linha:#2a2a2a;
  --texto:#fff;
  --texto-suave:#b5b5b5;
  --concreto:#e9e9e6;
  --fonte:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--preto);color:var(--texto);font-family:var(--fonte);-webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%;display:block}
a{color:var(--texto)}
a:hover{color:var(--vermelho-claro)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--vermelho-claro);outline-offset:3px}
h1,h2,h3{margin:0}
p{margin:0}
.container{max-width:1240px;margin:0 auto;padding-left:24px;padding-right:24px}

/* Botões */
.botao{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:4px;font:inherit;font-weight:700;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:filter .15s}
.botao:hover{filter:brightness(1.12);color:#fff}
.botao--grande{min-height:56px;padding:0 28px;font-size:17px;gap:10px}
.botao--vermelho{background:var(--vermelho);color:#fff}
.botao--preto{background:#000;color:#fff;min-height:60px;font-size:18px}
.botao--contorno{border-color:#5a5a5a;color:#fff;font-weight:600}
.botao--contorno:hover{border-color:#fff}

/* Cabeçalho */
.topo{position:sticky;top:0;z-index:20;background:rgba(0,0,0,.92);backdrop-filter:blur(6px);border-bottom:1px solid #262626;padding-top:env(safe-area-inset-top,0px)}
.topo__linha{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;padding-bottom:14px}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none}
.marca img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.marca__texto{display:flex;flex-direction:column;line-height:1.1}
.marca__texto strong{font-size:20px;font-weight:800;font-stretch:120%}
.marca__texto span{font-size:13px;color:var(--texto-suave)}
.menu{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;font-size:15px}
.menu > a:not(.botao){text-decoration:none}

/* Abertura */
.hero{display:flex;flex-wrap:wrap;align-items:center;gap:56px;padding-top:clamp(40px,7vw,96px);padding-bottom:clamp(56px,8vw,112px)}
.hero__texto{flex:1 1 460px;min-width:0;display:flex;flex-direction:column;gap:28px}
.hero h1{font-size:clamp(40px,6.2vw,84px);line-height:.95;font-weight:850;font-stretch:118%;letter-spacing:-.02em}
.lead{max-width:34em;font-size:19px;line-height:1.55;color:#c9c9c9}
.acoes{display:flex;flex-wrap:wrap;gap:12px}
.garantias{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 32px;font-size:16px;color:#e6e6e6}
.garantias li{display:inline-flex;align-items:center;gap:10px}
.garantias svg{color:var(--vermelho-claro)}
.hero__foto{flex:1 1 420px;min-width:0;margin:0;position:relative;padding:18px 18px 0;border:14px solid var(--vermelho);border-bottom:0}
.hero__foto img{width:100%;height:clamp(300px,38vw,520px);object-fit:cover}
.hero__foto figcaption{position:absolute;left:18px;bottom:18px;background:#000;padding:10px 14px;font-size:14px;color:#e6e6e6}

/* Faixas */
.faixa{padding:clamp(56px,8vw,104px) 0}
.faixa--grafite{background:var(--grafite);border-top:1px solid #262626}
.faixa--concreto{background:var(--concreto);color:#111}
.faixa--vermelha{background:var(--vermelho);padding:clamp(48px,6vw,80px) 0}
.cabecalho-secao{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:48px}
.cabecalho-secao h2,.orcamento h2{max-width:14em;font-size:clamp(32px,4.2vw,54px);line-height:1;font-weight:800;font-stretch:112%;letter-spacing:-.01em}
.cabecalho-secao p{max-width:30em;font-size:17px;line-height:1.6;color:var(--texto-suave)}
.faixa--concreto h2{color:#000}
.faixa--concreto .cabecalho-secao p{color:#3d3d3d}

/* Serviços */
.servicos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2px;background:var(--linha);border:2px solid var(--linha)}
.servico{background:#000;padding:32px 28px 36px;display:flex;flex-direction:column;gap:16px}
.servico__num{font-size:64px;line-height:1;font-weight:900;font-stretch:125%;color:var(--vermelho)}
.servico h3{font-size:26px;font-weight:800;font-stretch:110%}
.servico__para{font-size:15px;font-weight:700}
.servico p:last-child{font-size:16px;line-height:1.6;color:var(--texto-suave)}

/* Orçamento */
.orcamento{display:flex;flex-wrap:wrap;gap:56px;padding-top:clamp(56px,8vw,104px);padding-bottom:clamp(56px,8vw,104px)}
.orcamento__texto{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:20px}
.orcamento__texto p{max-width:28em;font-size:17px;line-height:1.6;color:var(--texto-suave)}
.cartao-form{flex:1.3 1 480px;min-width:0;background:var(--grafite);border:1px solid var(--linha);border-radius:6px;padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:28px}
fieldset{border:0;margin:0;padding:0}
legend{padding:0;margin-bottom:12px;font-size:17px;font-weight:700}
.opcoes{display:flex;flex-wrap:wrap;gap:10px}
.opcao{min-height:48px;padding:0 18px;border-radius:4px;border:1px solid #4a4a4a;background:transparent;color:#fff;font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.opcao:hover{border-color:#fff}
.opcao[aria-pressed="true"]{background:var(--vermelho);border-color:var(--vermelho);font-weight:700}
.opcao--branca[aria-pressed="true"]{background:#fff;border-color:#fff;color:#000}
.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.cartao-form label{display:flex;flex-direction:column;gap:8px;font-size:15px;font-weight:600}
.cartao-form input,.cartao-form textarea{min-height:48px;padding:12px 14px;border-radius:4px;border:1px solid #4a4a4a;background:#000;color:#fff;font:inherit;font-size:16px;font-weight:400}
.cartao-form textarea{resize:vertical}
.cartao-form ::placeholder{color:#8a8a8a}
.enviar{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.enviar .botao{border:0}
.resumo{font-size:14px;color:#a8a8a8}

/* Galeria */
.galeria{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.galeria figure{margin:0;display:flex;flex-direction:column;gap:10px}
.galeria img{width:100%;height:440px;object-fit:cover;border-radius:4px}
.galeria figcaption{font-size:14px;color:#3d3d3d}

/* Chamada final */
.chamada{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px}
.chamada h2{max-width:16em;font-size:clamp(30px,4vw,50px);line-height:1.02;font-weight:850;font-stretch:115%}

/* Rodapé */
.rodape{border-top:1px solid #262626}
.rodape__grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px;padding-top:56px;padding-bottom:40px;font-size:15px;line-height:1.6;color:#c9c9c9}
.rodape__grade > div{display:flex;flex-direction:column;gap:8px}
.rodape h3{font-size:16px;color:#fff;margin-bottom:4px}
.rodape__logo{width:88px;height:88px;border-radius:50%;object-fit:cover}
.rodape__copy{padding-bottom:32px;font-size:13px;color:#8f8f8f}

/* Botão flutuante */
.whats-flutuante{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:30;width:60px;height:60px;border-radius:50%;background:var(--vermelho);color:#fff;display:none;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.5)}
.whats-flutuante:hover{color:#fff}

/* Celular */
@media (max-width:720px){
  .menu > a:not(.botao){display:none}
  .menu .botao{display:none}
  .whats-flutuante{display:flex}
  .hero{gap:40px}
  .galeria img{height:360px}
  .hero__foto{border-width:10px;padding:12px 12px 0}
  .hero__foto figcaption{left:12px;bottom:12px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}