/* ==========================================================================
Horsth Plastering
Direcao visual: azul marinho da marca, cinza frio e vermelho de acao.
Atencao: a variavel --brass continua com esse nome por causa das centenas
de referencias espalhadas no arquivo, mas o valor dela hoje e vermelho.
Sem dependencia externa. Fontes do sistema. Zero request de terceiros.
========================================================================== */
:root{
/* Cor */
--ink:#2A3852;
--ink-2:#35435F;
--ink-3:#44536F;
--fog:#8FA3B8;
--lime:#EFEDE6;
--lime-2:#E4E1D8;
--stone:#CBD2D9;
--text:#33414F;
--brass:#E10A2C;
--brass-2:#B00722;
--white:#FFFFFF;
/* Tipo */
--serif:"Iowan Old Style","Hoefler Text","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
/* Ritmo */
--wrap:1180px;
--gutter:clamp(20px,5vw,40px);
--band:clamp(64px,8vw,116px);
--r:4px;
/* Textura de reboco, usada em varias superficies */
--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
margin:0;
background:var(--lime);
color:var(--text);
font-family:var(--sans);
font-size:1.0625rem;
line-height:1.65;
-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);margin:0 0 .5em;font-weight:600;letter-spacing:-.015em}
h1{font-size:clamp(2.5rem,5.6vw,4.3rem);line-height:1;letter-spacing:-.03em}
h2{font-size:clamp(2.19rem,4.14vw,3.22rem);line-height:1.08;letter-spacing:-.025em}
h3{font-size:clamp(1.15rem,1.8vw,1.4rem);line-height:1.2}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
/* Mesmo motivo: o anel de foco precisa aparecer tambem nas secoes escuras.
Heroi, faixa de confianca e pagehero sairam desta lista quando viraram claros. */
.topbar :focus-visible,.hero :focus-visible,.band--ink :focus-visible,
.cta :focus-visible,.foot :focus-visible,.mobar :focus-visible{outline-color:#E8897C}
/* Superficies claras dentro de secao escura voltam pro vermelho cheio. */
.card-form :focus-visible,.aside :focus-visible{outline-color:var(--brass)}
/* Sobre a faixa vermelha, so o branco marca. */
.cta--brass :focus-visible{outline-color:#fff}
/* Utilitarios ------------------------------------------------------------ */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.band{padding-block:var(--band);position:relative}
.band--tight{padding-block:clamp(44px,5vw,72px)}
.band--ink{background:var(--ink);color:#C8D5E2}
.band--ink h2,.band--ink h3,.band--ink h4{color:var(--white)}
.band--lime2{background:var(--lime-2)}
.grain::before{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:var(--grain);background-size:260px 260px;opacity:.05;
}
.band--ink.grain::before{opacity:.09}
.lede{font-size:clamp(1.08rem,1.5vw,1.24rem);line-height:1.55;max-width:56ch}
.tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase}
.muted{color:#4B5A6B}
.band--ink .muted{color:var(--fog)}
.center{text-align:center}
.hidden{display:none !important}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--brass);color:#fff;padding:10px 16px}
.skip:focus{left:8px;top:8px}
/* Cabecalho -------------------------------------------------------------- */
.topbar{background:var(--ink);color:#BDCBDA;border-bottom:1px solid rgba(225,10,44,.35)}
.topbar__in{display:flex;gap:18px;align-items:center;justify-content:space-between;min-height:42px;flex-wrap:wrap}
.topbar a{text-decoration:none}
.topbar .tag{color:#BDCBDA}
.topbar strong{color:var(--white)}
/* Vermelho puro sobre o azul escuro da o 2.3:1. Nos pontos onde a marca vira
texto ou icone sobre fundo escuro, usa a versao clara do mesmo vermelho. */
.stars{color:#E8897C;letter-spacing:.08em}
/* Redes sociais. Herdam a cor do texto ao redor e, no hover, vao pro vermelho
da marca na versao clara, porque o #E10A2C cheio sobre o navy da 2.3:1. */
.social{display:flex;align-items:center;gap:12px}
.social a{display:flex;color:inherit;transition:color .18s ease}
.social a:hover{color:#E8897C}
.foot__social{display:flex;align-items:center;gap:14px;margin-top:18px}
.foot__social a{display:flex;color:inherit;transition:color .18s ease}
.foot__social a:hover{color:#E8897C}
.head{position:sticky;top:0;z-index:40;background:rgba(247,246,242,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--stone);transition:box-shadow .2s ease}
.head__in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:128px;transition:min-height .2s ease}
@media (max-width:940px){.head__in{min-height:98px}}
/* Passou de 60px de rolagem, o header encolhe 20 por cento e ganha sombra. */
.head.is-scrolled{box-shadow:0 1px 2px rgba(20,30,45,.05),0 10px 24px -16px rgba(20,30,45,.22)}
.head.is-scrolled .head__in{min-height:102px}
.head.is-scrolled .brand__logo{height:73px}
@media (max-width:1100px){.head.is-scrolled .brand__logo{height:60px}}
@media (max-width:940px){.head.is-scrolled .head__in{min-height:79px}.head.is-scrolled .brand__logo{height:51px}}
@media (max-width:720px){.head.is-scrolled .brand__logo{height:42px}}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
/* Logo real. O nome esta dentro da imagem, entao nao existe mais texto na marca. */
.brand__logo{height:92px;width:auto;display:block}
@media (max-width:1100px){.brand__logo{height:70px}}
@media (max-width:940px){.brand__logo{height:64px}}
@media (max-width:720px){.brand__logo{height:52px}}
.nav{display:flex;align-items:center;gap:20px}
.nav a{text-decoration:none;font-size:.92rem;white-space:nowrap;color:var(--ink);padding-block:6px;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--brass)}
.nav__cta{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--white) !important;padding:11px 18px;border-radius:var(--r);font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;border-bottom:0 !important}
.nav__cta:hover{background:var(--brass)}
.burger{display:none;background:none;border:1px solid var(--stone);border-radius:var(--r);padding:10px 12px;cursor:pointer}
.burger span{display:block;width:20px;height:1.5px;background:var(--ink);margin:4px 0}
@media (max-width:940px){
.burger{display:block}
.nav{position:absolute;left:0;right:0;top:100%;background:var(--lime);border-bottom:1px solid var(--stone);flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gutter) 22px;display:none}
.nav.is-open{display:flex}
.nav a{padding:14px 0;border-bottom:1px solid var(--stone)}
.nav__cta{justify-content:center;margin-top:16px;border:0}
}
/* Menus suspensos do header ---------------------------------------------
Services e Areas abrem um painel branco abaixo do header. O desktop e o
caso base, igual ao resto do arquivo, e o celular sobrescreve em
max-width:940px. Nao usar min-width:941px aqui: uma janela com largura
fracionaria cairia entre as duas faixas e o painel entraria no fluxo.
Os seletores levam .nav na frente de proposito: as regras .nav a do
header tem especificidade 0,1,1 e sobrescreveriam cor, padding e borda
dos itens do painel.
O painel se ancora no .head__in, entao nunca passa da borda da pagina.
O .head fica com overflow visivel de proposito, senao o painel seria
cortado na base do cabecalho. */
.head{overflow:visible}
.head__in{position:relative}
.nav__item{position:static}
.nav__top{
display:inline-flex;align-items:center;gap:7px;
background:none;border:0;margin:0;padding-block:6px;padding-inline:0;
font-family:inherit;font-size:.92rem;line-height:inherit;white-space:nowrap;
color:var(--ink);cursor:pointer;border-bottom:1px solid transparent;
}
.nav__top:hover,.nav__top[aria-current="page"],.nav__item.is-open>.nav__top{border-bottom-color:var(--brass)}
.nav__chev{flex:0 0 auto;transition:transform .18s ease}
.nav__item.is-open .nav__chev{transform:rotate(180deg)}
.dd{
position:absolute;top:calc(100% + 1px);right:0;
background:var(--white);
border:1px solid var(--stone);border-radius:0 0 var(--r) var(--r);
box-shadow:0 1px 2px rgba(20,30,45,.05),0 26px 50px -28px rgba(20,30,45,.40);
padding:20px var(--gutter) 16px;
opacity:0;visibility:hidden;transform:translateY(8px);
transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.nav__item.is-open>.dd{opacity:1;visibility:visible;transform:translateY(0)}
.dd--svc{width:min(720px,100%)}
.dd--areas{width:min(760px,100%)}
.dd__grid--svc{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px}
.dd__grid--areas{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 16px}
.dd__foot{margin-top:14px;padding-top:14px;border-top:1px solid var(--stone)}
.nav .dd a{border-bottom:0}
.nav .dd__all{
display:inline-flex;align-items:center;
color:var(--brass);font-family:var(--mono);font-size:.72rem;
letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
padding:0;border-bottom:0;
}
.nav .dd__all:hover{color:var(--brass-2);text-decoration:underline}
.dd__thumb{
width:44px;height:44px;flex:0 0 44px;
object-fit:cover;border-radius:4px;display:block;background:var(--lime-2);
}
.nav .dd__svc{
display:flex;align-items:center;gap:12px;
padding:6px 10px;border-radius:var(--r);border-bottom:0;
text-decoration:none;transition:background .15s ease;
}
.dd__name{font-size:.92rem;line-height:1.25;color:var(--ink);transition:color .15s ease}
.nav .dd__svc:hover,.nav .dd__svc:focus-visible{background:var(--lime-2)}
.nav .dd__svc:hover .dd__name,.nav .dd__svc:focus-visible .dd__name{color:var(--brass)}
.nav .dd__city{
display:block;padding:6px 10px;border-radius:var(--r);border-bottom:0;
text-decoration:none;transition:background .15s ease;
}
.dd__city-name{display:block;font-size:.92rem;line-height:1.25;color:var(--ink);transition:color .15s ease}
.dd__city.is-key .dd__city-name{font-weight:600}
.dd__city-st{
display:block;margin-top:1px;
font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;color:var(--fog);
}
.nav .dd__city:hover,.nav .dd__city:focus-visible{background:var(--lime-2)}
.nav .dd__city:hover .dd__city-name,.nav .dd__city:focus-visible .dd__city-name{color:var(--brass)}
/* Celular: acordeao dentro do hamburger --------------------------------- */
@media (max-width:940px){
/* Volta o .head__in para estatico, senao o proprio menu hamburger, que e
absoluto em relacao ao .head, passaria a se ancorar nele. */
.head__in{position:static}
.nav{max-height:calc(100vh - 92px);overflow-y:auto;overscroll-behavior:contain}
.nav__item{display:block}
.nav__top{
display:flex;width:100%;justify-content:space-between;
padding:14px 0;font-size:1rem;
border-bottom:1px solid var(--stone);
}
.nav__top:hover,.nav__top[aria-current="page"],.nav__item.is-open>.nav__top{border-bottom-color:var(--stone)}
.dd{
position:static;display:none;width:auto;
background:none;border:0;border-radius:0;box-shadow:none;
padding:6px 0 14px;
opacity:1;visibility:visible;transform:none;transition:none;
}
.nav__item.is-open>.dd{display:block}
.dd__grid--svc{grid-template-columns:1fr;gap:0}
.dd__grid--areas{grid-template-columns:1fr 1fr;gap:0 12px}
.nav .dd__svc,.nav .dd__city{padding:8px 0;border-radius:0}
.nav .dd__svc:hover,.nav .dd__city:hover{background:none}
.dd__foot{margin-top:10px;padding-top:12px}
}
/* Peso visual ------------------------------------------------------------
Traco vermelho antes de cada H2 de secao, molduras nas fotos grandes e
as variantes escuras das faixas que passaram a ser escuras. */
/* 5. Traco vermelho antes do H2 de secao. Fica de fora o H2 do cartao de
formulario e os subtitulos de texto corrido em .prose. */
.band h2::before{content:"";display:block;width:48px;height:3px;background:var(--brass);margin-bottom:20px}
.band .center h2::before,.band.center h2::before{margin-inline:auto}
.card-form h2::before,.prose h2::before{content:none}
/* Vermelho sobre vermelho nao apareceria, entao na faixa brass o traco e branco. */
.cta--brass h2::before{background:#fff}
/* 7. Fotos grandes de secao: moldura e sombra. Nas faixas escuras, mais
uma borda clara de 1px pra foto nao encostar direto no fundo. */
.framed,
.band .split img,.band .split--wide img,.band .photos img,.band .steps li img,.band .house__ph{
border-radius:8px;box-shadow:0 20px 50px -24px rgba(20,30,45,.5);
}
.band--ink .framed,
.band--ink .split img,.band--ink .split--wide img,.band--ink .photos img,
.band--ink .steps li img,.band--ink .house__ph{border:1px solid rgba(255,255,255,.12)}
/* 3. Variantes escuras das faixas que viraram escuras. */
.band--ink .stats__n{color:var(--white)}
.band--ink .stats__l{color:#AFC0D2}
.band--ink .stats > div{border-top-color:rgba(225,10,44,.65)}
.band--ink .cards__item p{color:#ADBDCF}
.band--ink .filter{border-color:rgba(255,255,255,.22);color:#C8D5E2}
.band--ink .filter:hover{border-color:var(--brass);color:#fff}
/* 8. Numeros animados: sem JS, ou com movimento reduzido, nascem no valor
final. O JS so entra depois que o observer dispara. */
.stats__n[data-count]{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){
.gallery img,.svc img,.gallery figcaption{transition:none}
}
/* Fechamento da home -----------------------------------------------------
Duas colunas sobre o navy: argumento a esquerda, o mesmo formulario de 3
etapas a direita. O card branco destaca por contraste com a faixa escura. */
.closer__in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:start}
.closer__proof{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px;color:#E6EDF4;font-size:.97rem}
.closer__proof li{display:flex;align-items:flex-start;gap:12px}
/* Mesmo tracinho girado que o site ja usa em .checks e .hero__proof. */
.closer__proof li::before{
content:"";flex:0 0 auto;width:10px;height:6px;margin-top:7px;
border-left:1.6px solid var(--brass);border-bottom:1.6px solid var(--brass);transform:rotate(-45deg);
}
.closer .btn--tel{margin-top:30px}
.closer .card-form{padding:32px;box-shadow:0 2px 6px rgba(10,18,30,.20),0 34px 64px -24px rgba(10,18,30,.62)}
/* O cartao e branco dentro de uma faixa escura, entao os titulos dele nao
podem herdar o branco de .band--ink h2. */
.band--ink .card-form h2,.band--ink .card-form h3,.band--ink .card-form h4,
.band--ink .card-form legend{color:var(--ink)}
@media (max-width:1000px){
.closer__in{grid-template-columns:1fr}
.closer__form{max-width:640px}
}
@media (max-width:480px){.closer .card-form{padding:24px}}
/* Botoes ----------------------------------------------------------------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
font-family:var(--mono);font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;
padding:16px 26px;border-radius:var(--r);text-decoration:none;border:1px solid transparent;cursor:pointer;
transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn--brass{background:var(--brass);color:#fff}
.btn--brass:hover{background:var(--brass-2)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:var(--brass)}
.btn--ghost{border-color:currentColor;color:inherit;background:transparent}
.btn--ghost:hover{background:var(--brass);border-color:var(--brass);color:#fff}
.btn--wide{width:100%}
.btn--lg{padding:19px 32px;font-size:.8rem}
/* Botao de telefone, componente unico do site --------------------------
Unifica os dois botoes de telefone antigos. A cor vem do contexto, e a
borda usa currentColor pra acompanhar. */
.btn--tel{
display:inline-flex;align-items:center;gap:12px;
padding:15px 26px;
border:1.5px solid currentColor;border-radius:999px;
font-family:var(--serif);font-size:1.45rem;line-height:1;
text-decoration:none;background:transparent;white-space:nowrap;
color:var(--ink);
transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.btn--tel svg{width:20px;height:20px;flex:0 0 20px}
/* Fundos escuros do site. */
.hero .btn--tel,.cta .btn--tel,.foot .btn--tel,.band--ink .btn--tel,.trust .btn--tel{color:#fff}
.btn--tel:hover{background:var(--brass);border-color:var(--brass);color:#fff}
/* Na faixa vermelha o hover inverte: fundo branco, texto vermelho. */
.cta--brass .btn--tel{color:#fff}
.cta--brass .btn--tel:hover{background:#fff;border-color:#fff;color:var(--brass)}
/* Heroi ------------------------------------------------------------------
Foto real de fundo, com camada escura por cima pro texto continuar legivel.
A foto e um ![]()
absoluto, nao background-image, pra ela ser candidata a
LCP de verdade e poder levar fetchpriority high. */
.hero{position:relative;background:var(--ink);color:#C8D5E2;overflow:hidden}
.hero__bgs{position:absolute;inset:0;z-index:0}
/* Duas camadas empilhadas: a troca de foto e um crossfade de opacidade
entre elas, nunca um src trocado na mesma imagem, que piscaria. */
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity .45s ease}
.hero__bg.is-on{opacity:1}
/* Veu lateral, nao vertical: a foto do heroi e escura no meio e clara na
direita, entao o gradiente acompanha esse eixo em vez do vertical antigo.
Valores medidos, nao chutados: e o ponto mais claro que ainda da 4.5:1 no
H1, no paragrafo e na linha de provas, em 390..1920px. A ponta direita em
.58 e o que deixa a foto aparecer; abaixo disso o paragrafo cai de 4.5 nas
larguras grandes, onde ele fica sobre a parte clara da foto. */
.hero::before{
content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(100deg,rgba(14,26,40,.88) 0%,rgba(14,26,40,.76) 45%,rgba(14,26,40,.58) 100%);
}
.hero::after{
content:"";position:absolute;inset:0;z-index:1;background-image:var(--grain);background-size:260px 260px;opacity:.06;pointer-events:none;
}
.hero__in{position:relative;z-index:2;text-align:center;padding-block:clamp(49px,5.95vw,88px)}
.hero h1{color:var(--white);max-width:20ch;margin-inline:auto}
/* Ponto de cor no fim do H1. Sobre a camada escura o vermelho cheio da 3.6:1,
que serve pra texto grande. No resto do site o .hl fica no vermelho da marca. */
.hl{color:var(--brass)}
.hero .hl{color:#F0715F}
.hero__lede{color:#D8E1EA;font-size:clamp(1.05rem,1.4vw,1.2rem);max-width:62ch;margin:22px auto 0}
/* Tres provas rapidas em linha. O check e o mesmo tracinho girado que o
site ja usa em .checks, nao um icone novo. */
/* Cor mais clara que o #C8D5E2 do resto do heroi: esta linha fica na parte
media do gradiente, onde a camada escura e a mais leve, e no #C8D5E2 a
contraste caia pra 3.9:1, abaixo do 4.5:1 exigido pra texto normal. */
.hero__proof{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 22px;color:#E6EDF4;font-size:.92rem}
.hero__proof li{display:flex;align-items:center;gap:9px}
.hero__proof li::before{content:"";flex:0 0 auto;width:10px;height:6px;margin-top:-3px;border-left:1.6px solid var(--brass);border-bottom:1.6px solid var(--brass);transform:rotate(-45deg)}
.hero__form{max-width:640px;margin:34px auto 0;text-align:left}
/* So no heroi: o cartao esta sobre a foto, entao precisa de sombra forte. */
.hero .card-form{padding:32px;box-shadow:0 2px 6px rgba(10,18,30,.20),0 34px 64px -24px rgba(10,18,30,.62)}
.hero .btn--tel{margin-top:26px}
.hero__acts{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:38px}
.hero__note{display:flex;align-items:center;gap:10px;margin-top:26px;color:#BDCBDA;font-size:.9rem}
.hero__note svg{flex:0 0 auto}
/* Amostras de acabamento -------------------------------------------------
Tira de largura total logo abaixo do heroi. Cada amostra e um botao que
troca a foto de fundo do heroi no hover, no foco e no clique. Sem
interacao por 5s, o heroi passa a girar sozinho entre as 6. */
.finishes{background:var(--ink);padding-block:26px}
.finishes__strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.finish{margin:0;min-width:0}
/* 1 e 8. Botao de verdade, area de clique maior e cursor de mao. */
.swatch{
display:block;width:100%;background:none;border:2px solid transparent;border-radius:var(--r);
margin:0;padding:14px 10px 16px;font:inherit;color:inherit;cursor:pointer;
transition:border-color .18s ease,background .18s ease;
}
.swatch:hover,.swatch:focus-visible{background:rgba(255,255,255,.06)}
.finish__img{
width:100%;max-width:120px;height:auto;aspect-ratio:1/1;object-fit:cover;
border-radius:var(--r);display:block;margin:0 auto;background:var(--ink-2);
transition:transform .18s ease;
}
.finish__tag{
display:block;margin-top:10px;text-align:center;
font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
color:#C8D5E2;transition:color .18s ease;
}
.swatch:hover .finish__img,
.swatch:focus-visible .finish__img,
.swatch.is-locked .finish__img,
.swatch.is-auto .finish__img{transform:scale(1.05)}
.swatch:hover .finish__tag,
.swatch:focus-visible .finish__tag,
.swatch.is-auto .finish__tag{color:#F0715F}
/* 4. Travada: borda vermelha de 2px e rotulo em vermelho da marca. */
.swatch.is-locked .finish__tag{color:var(--brass)}
.swatch.is-locked{border-color:var(--brass)}
@media (prefers-reduced-motion:reduce){
/* Troca instantanea, sem crossfade nem escala. */
/* A rotacao automatica tambem nao roda, isso e decidido no JS. */
.hero__bg,.finish__img,.finish__tag,.swatch{transition:none}
}
/* Fotos dentro das paginas de servico ------------------------------------ */
.steps li img{width:100%;height:auto;margin-top:16px;border-radius:6px;display:block}
.photos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.photos img{width:100%;height:auto;border-radius:6px;display:block}
@media (max-width:720px){.photos{grid-template-columns:1fr}}
/* Cartao de formulario --------------------------------------------------- */
.card-form{background:var(--white);border-radius:6px;padding:clamp(22px,2.6vw,32px);box-shadow:0 1px 2px rgba(20,30,45,.04),0 8px 24px -12px rgba(20,30,45,.14);border-top:3px solid var(--brass)}
.card-form h2{font-size:1.5rem;margin-bottom:4px}
.card-form__sub{font-size:.92rem;color:#4B5A6B;margin-bottom:20px}
.field{margin-bottom:14px}
.field label{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#4F5C70;margin-bottom:6px}
.field input,.field select,.field textarea{
width:100%;padding:13px 14px;border:1px solid var(--stone);border-radius:var(--r);
font-family:var(--sans);font-size:1rem;color:var(--ink);background:#fff;
}
.field textarea{min-height:92px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brass);outline:none;box-shadow:0 0 0 3px rgba(225,10,44,.15)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form__fine{font-size:.8rem;color:#4F5C70;margin-top:12px;text-align:center}
.hp{position:absolute;left:-9999px}
/* Formulario em 3 etapas -------------------------------------------------
Sem JS o formulario aparece inteiro numa pagina so, com o submit nativo e
o required do navegador. O JS adiciona .is-stepped no