/* Telhas Roveda - layout responsivo (2026) */
:root{
	--vermelho:#b72c2c;
	--vermelho-escuro:#962020;
	--laranja:#cf8d1d;
	--marrom:#4f2c22;
	--grafite:#262626;
	--grafite-2:#333;
	--areia:#f4f1ec;
	--linha:#e3ddd4;
	--texto:#2e2a27;
	--texto-suave:#6a625b;
	--verde-whats:#1fa855;
	--titulo:"Cabin Condensed", "Arial Narrow", Arial, sans-serif;
	--corpo:"Cabin", "Segoe UI", Arial, sans-serif;
	--raio:8px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--corpo);font-size:1.0625rem;line-height:1.6;color:var(--texto);background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:var(--vermelho)}
a:hover{color:var(--vermelho-escuro)}
h1,h2,h3{font-family:var(--titulo);font-weight:700;line-height:1.1;color:var(--grafite);margin:0 0 .5em}
h1{font-size:clamp(2.2rem,5vw,3.6rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}
h3{font-size:1.35rem}
p{margin:0 0 1em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pular{position:absolute;left:-999px;top:0;background:#fff;padding:.6em 1em;z-index:100}
.pular:focus{left:1rem}
:focus-visible{outline:3px solid var(--laranja);outline-offset:2px}

.moldura{width:min(1180px,100% - 2.5rem);margin-inline:auto}
.moldura-estreita{width:min(820px,100% - 2.5rem)}
.secao{padding:clamp(3rem,7vw,5rem) 0}
.secao-areia{background:var(--areia)}
.sobretitulo{font-family:var(--titulo);font-size:.95rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--vermelho);margin:0 0 .4rem}
.nota{font-size:.93rem;color:var(--texto-suave)}
.espaco-topo{margin-top:1.6rem}

/* Botoes */
.botoes{display:flex;flex-wrap:wrap;gap:.75rem}
.botao{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.7em 1.35em;border:2px solid var(--vermelho);border-radius:var(--raio);background:var(--vermelho);color:#fff;font:700 1.08rem/1.2 var(--titulo);letter-spacing:.02em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .2s,border-color .2s,color .2s}
.botao:hover{background:var(--vermelho-escuro);border-color:var(--vermelho-escuro);color:#fff}
.botao-whats{background:var(--verde-whats);border-color:var(--verde-whats)}
.botao-whats:hover{background:#178a45;border-color:#178a45}
.botao-contorno{background:transparent;border-color:rgba(255,255,255,.75);color:#fff}
.botao-contorno:hover{background:#fff;border-color:#fff;color:var(--grafite)}
.botao-contorno-escuro{background:transparent;border-color:var(--grafite);color:var(--grafite)}
.botao-contorno-escuro:hover{background:var(--grafite);border-color:var(--grafite);color:#fff}
.botao[disabled]{opacity:.6;cursor:wait}
.link-seta{font-family:var(--titulo);font-weight:700;font-size:1.1rem;text-decoration:none}
.link-seta::after{content:" →"}

/* Topo */
.topo{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 1px 0 var(--linha),0 4px 18px rgba(0,0,0,.06)}
.topo-linha{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:84px}
.logo img{width:210px;height:auto}
#menu-principal{display:flex;align-items:center;gap:.15rem}
#menu-principal a{color:var(--grafite);text-decoration:none;font-family:var(--titulo);font-weight:600;font-size:1.08rem;padding:.5em .6em;border-radius:6px}
#menu-principal a:not(.botao):hover{color:var(--vermelho)}
#menu-principal a[aria-current]:not(.botao){color:var(--vermelho);box-shadow:inset 0 -3px 0 var(--vermelho);border-radius:0}
#menu-principal .botao{color:#fff;margin-left:.5rem;min-height:44px;padding:.5em 1.1em}
.menu-botao{display:none;width:48px;height:48px;border:1px solid var(--linha);border-radius:var(--raio);background:#fff;cursor:pointer;padding:12px 11px;flex-direction:column;justify-content:space-between}
.menu-botao span:not(.sr){display:block;height:2px;background:var(--grafite);border-radius:2px;transition:transform .2s,opacity .2s}
.menu-botao[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.menu-botao[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-botao[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* Heroi */
.heroi{position:relative;min-height:clamp(440px,62vh,620px);display:flex;align-items:flex-end;color:#fff;isolation:isolate;background:var(--grafite)}
.heroi-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;z-index:-2}
.heroi::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(20,16,14,.85) 0%,rgba(20,16,14,.55) 45%,rgba(20,16,14,.05) 80%),linear-gradient(0deg,rgba(20,16,14,.55),transparent 45%)}
.heroi-texto{padding:4rem 0 3.5rem}
.heroi .sobretitulo{color:#f2b44b}
.heroi h1{color:#fff;max-width:14ch;margin-bottom:.35em}
.heroi-lead{font-size:1.2rem;max-width:44ch;color:#f1ece6;margin-bottom:1.6rem}

/* Atalhos (os tres botoes coloridos do site antigo) */
.atalhos{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:-2.2rem;position:relative;z-index:2}
.atalho{display:flex;flex-direction:column;gap:.15rem;padding:1.3rem 1.4rem;border-radius:var(--raio);color:#fff;text-decoration:none;box-shadow:0 10px 24px rgba(0,0,0,.15);transition:transform .2s}
.atalho:hover{color:#fff;transform:translateY(-3px)}
.atalho strong{font-family:var(--titulo);font-size:1.45rem;text-transform:uppercase;letter-spacing:.02em}
.atalho strong::after{content:" →";font-weight:400}
.atalho span{opacity:.92;font-size:.98rem}
.atalho-vermelho{background:var(--vermelho)}
.atalho-laranja{background:var(--laranja)}
.atalho-marrom{background:var(--marrom)}

/* Catalogo na inicial */
.titulo-linha{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.titulo-linha h2{margin:0}
.linha-nome{font-size:1.3rem;margin:1.6rem 0 .8rem;color:var(--texto-suave)}
.cores{list-style:none;padding:0 0 .6rem;margin:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.cores li{scroll-snap-align:start}
.cores a,.produtos a{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--linha);border-radius:var(--raio);text-decoration:none;color:var(--grafite);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.cores a:hover,.produtos a:hover{border-color:var(--vermelho);box-shadow:0 8px 20px rgba(0,0,0,.08)}
.cores img{width:100%;aspect-ratio:176/128;object-fit:contain;background:#faf9f7;padding:.5rem}
.cores span,.produto-nome{display:block;padding:.6rem .8rem;font-family:var(--titulo);font-weight:700;font-size:1.12rem;text-align:center;border-top:1px solid var(--linha)}

.duas-colunas{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.destaque{position:relative;display:block;border-radius:var(--raio);overflow:hidden;color:#fff;text-decoration:none;aspect-ratio:3/2;background:var(--grafite)}
.destaque img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.destaque:hover img{transform:scale(1.04)}
.destaque-texto{position:absolute;inset:auto 0 0 0;padding:3rem 1.4rem 1.3rem;background:linear-gradient(0deg,rgba(0,0,0,.78),transparent);font-size:1rem}
.destaque-texto strong{display:block;font-family:var(--titulo);font-size:1.7rem;line-height:1.1}
.destaque:hover{color:#fff}

.vantagens-resumo{list-style:none;padding:0;margin:1.5rem 0 1.6rem;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.vantagens-resumo li{border-top:3px solid var(--laranja);background:var(--areia);padding:1.2rem;border-radius:0 0 var(--raio) var(--raio)}
.vantagens-resumo strong{display:block;font-family:var(--titulo);font-size:1.3rem;color:var(--grafite);margin-bottom:.2rem}
.vantagens-resumo span{color:var(--texto-suave);font-size:.98rem}

/* Paginas internas */
.cabecalho-pagina{background:linear-gradient(110deg,var(--grafite) 0%,#3a2a24 70%,var(--marrom));color:#e9e1d9;padding:clamp(2rem,5vw,3.2rem) 0}
.cabecalho-pagina h1{color:#fff;margin:0}
.cabecalho-pagina p{margin:.5rem 0 0;color:#d9cfc6;font-size:1.1rem}
.trilha{font-size:.92rem;color:#bfb3a8;margin-bottom:.5rem}
.trilha a{color:#f0e7df}
.trilha span{margin:0 .15rem}
.dupla{display:grid;grid-template-columns:1.4fr .6fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.dupla-form{grid-template-columns:1.3fr .7fr}
.cartao-lateral{background:var(--areia);border-radius:var(--raio);padding:1.6rem;border-top:4px solid var(--vermelho);position:sticky;top:108px}
.cartao-lateral h2{font-size:1.5rem}
.cartao-lateral p{margin-bottom:.6em}
.texto h2{font-size:1.6rem;margin-top:1.4em}
.texto-empresa h2:first-child{margin-top:0}
.numeros{list-style:none;padding:0;margin:0 0 1.4rem}
.numeros li{display:flex;flex-direction:column;padding:.7rem 0;border-bottom:1px solid var(--linha)}
.numeros strong{font-family:var(--titulo);font-size:1.6rem;color:var(--vermelho);line-height:1.1}
.numeros span{color:var(--texto-suave)}

.filtro-linhas{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.filtro-linhas a{border:1px solid var(--linha);border-radius:999px;padding:.4em 1em;text-decoration:none;color:var(--grafite);font-weight:600;font-size:.97rem;background:#fff}
.filtro-linhas a:hover{border-color:var(--vermelho);color:var(--vermelho)}
.linha-produto{padding-top:1.6rem;scroll-margin-top:100px}
.linha-produto h2 a{color:inherit;text-decoration:none}
.linha-produto h2 a:hover{color:var(--vermelho)}
.produtos{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1rem}
.produto-foto{display:flex;align-items:center;justify-content:center;aspect-ratio:180/130;background:#faf9f7;padding:.5rem}
.produto-foto img{max-height:100%;width:auto}

.produto-detalhe{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
.produto-simulacao{width:100%;border-radius:var(--raio)}
.produto-peca{max-width:200px;margin:0 0 1rem}
.produto-peca-grande{display:flex;align-items:center;justify-content:center;background:#faf9f7;border:1px solid var(--linha);border-radius:var(--raio);padding:2rem;min-height:320px}
.produto-peca-grande img{max-width:min(420px,100%)}
.selos{list-style:none;padding:0;margin:0 0 1.5rem}
.selos li{padding:.45rem 0 .45rem 1.8rem;position:relative;border-bottom:1px solid var(--linha)}
.selos li::before{content:"✓";position:absolute;left:.2rem;color:var(--vermelho);font-weight:700}

.simulador{display:grid;grid-template-columns:1.5fr .5fr;gap:2rem;align-items:start}
.simulador-casa{margin:0;position:sticky;top:104px}
.simulador-casa img{width:100%;border-radius:var(--raio);transition:opacity .25s}
.simulador-casa figcaption{margin-top:.6rem;font-family:var(--titulo);font-size:1.3rem;font-weight:700}
.simulador-cores h2{font-size:1.5rem}
.simulador-cores ul{list-style:none;padding:0;margin:0 0 1rem;display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.cor-botao{width:100%;display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.6rem .4rem;background:#fff;border:2px solid var(--linha);border-radius:var(--raio);cursor:pointer;font:600 1rem var(--corpo);color:var(--grafite)}
.cor-botao img{width:100%;max-width:110px}
.cor-botao:hover{border-color:#c9bfb3}
.cor-botao[aria-pressed="true"]{border-color:var(--vermelho);box-shadow:0 0 0 2px rgba(183,44,44,.15)}

.vantagens{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.vantagens li{display:flex;gap:1.2rem;align-items:flex-start;background:var(--areia);border-radius:var(--raio);padding:1.4rem}
.vantagens img{flex:0 0 72px;border-radius:6px}
.vantagens h2{font-size:1.45rem;margin-bottom:.3rem}
.vantagens p{margin:0;color:var(--texto-suave)}

.infos{list-style:none;padding:0;margin:0 0 2.5rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.infos a,.info-larga a{display:block;border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;background:#fff;cursor:zoom-in}
.infos img{width:100%}
.infos h2{font-size:1.25rem;margin:.7rem 0 0}
.info-larga h2{font-size:1.5rem}
.info-larga img{width:100%}

.fotos{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.8rem}
.fotos a{display:block;border-radius:6px;overflow:hidden;aspect-ratio:310/167;background:var(--linha);cursor:zoom-in}
.fotos img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.fotos a:hover img{transform:scale(1.05)}

.noticias{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.2rem}
.noticias a{display:block;text-decoration:none;color:var(--grafite);background:#fff;border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;height:100%}
.noticias img{width:100%;aspect-ratio:4/3;object-fit:cover}
.noticias h2,.noticias h3{font-size:1.25rem;padding:.9rem 1rem;margin:0}
.noticia-foto img{border-radius:var(--raio)}

/* Formularios */
.campos{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.2rem}
.campos label{display:flex;flex-direction:column;gap:.35rem;font-weight:600;font-size:.97rem;color:var(--grafite)}
.campos .largo{grid-column:1/-1}
.opcional{font-weight:400;color:var(--texto-suave)}
.formulario input,.formulario select,.formulario textarea{font:inherit;font-weight:400;width:100%;min-height:48px;padding:.65em .8em;border:1px solid #cfc6bb;border-radius:var(--raio);background:#fff;color:var(--texto)}
.formulario input[type=file]{padding:.55em}
.formulario textarea{resize:vertical}
.formulario input:focus,.formulario select:focus,.formulario textarea:focus{border-color:var(--vermelho);outline:2px solid rgba(183,44,44,.18)}
.formulario .botao{margin-top:1.1rem}
.armadilha{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.form-retorno{margin-top:1rem;font-weight:600}
.form-retorno .ajax_send_success{color:#1d6b38}
.form-retorno .ajax_send_error{color:var(--vermelho-escuro)}
.mapa{width:100%;height:380px;border:0;border-radius:var(--raio);background:var(--linha)}

/* Lightbox */
.ampliar{border:0;padding:0;background:transparent;max-width:min(1100px,96vw);max-height:92vh;overflow:visible}
.ampliar::backdrop{background:rgba(0,0,0,.86)}
.ampliar img{max-width:min(1100px,96vw);max-height:84vh;margin:auto;border-radius:6px}
.ampliar-legenda{color:#eee;text-align:center;margin:.6rem 0 0}
.ampliar button{position:fixed;width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:2rem;line-height:1;cursor:pointer}
.ampliar button:hover{background:rgba(255,255,255,.28)}
.ampliar-fechar{top:16px;right:16px}
.ampliar-anterior{left:12px;top:50%;transform:translateY(-50%)}
.ampliar-proxima{right:12px;top:50%;transform:translateY(-50%)}

/* Chamada e rodape */
.chamada{position:relative;isolation:isolate;color:#fff;overflow:hidden}
.chamada picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.chamada::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(79,44,34,.95),rgba(79,44,34,.78) 55%,rgba(79,44,34,.45))}
.chamada-texto{padding:clamp(3rem,7vw,4.5rem) 0}
.chamada h2{color:#fff;margin-bottom:.3rem}
.chamada p{color:#f0e6dd;font-size:1.12rem;margin-bottom:1.4rem}
.rodape{background:var(--grafite);color:#c8c0b8;font-size:.98rem}
.rodape-grade{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:2rem;padding:3.5rem 0 2.5rem}
.rodape-logo{width:200px;background:#fff;border-radius:6px;padding:.5rem .8rem;margin-bottom:1rem}
.rodape h2{font-family:var(--titulo);font-size:1.15rem;letter-spacing:.06em;text-transform:uppercase;color:#fff;margin-bottom:.8rem}
.rodape a{color:#ece6df}
.rodape a:hover{color:#fff}
.rodape address{font-style:normal}
.rodape ul{list-style:none;padding:0;margin:0}
.rodape li{margin-bottom:.4rem;overflow-wrap:anywhere}
.sociais{display:flex;gap:1rem;margin-top:1rem}
.rodape-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;border-top:1px solid rgba(255,255,255,.1);padding:1.2rem 0 1.4rem;font-size:.9rem}
.whats-flutuante{position:fixed;right:18px;bottom:18px;z-index:60;width:58px;height:58px;border-radius:50%;background:var(--verde-whats);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.whats-flutuante:hover{color:#fff;background:#178a45}

.erro{text-align:center;padding:5rem 0}

@media (max-width:1180px){
	#menu-principal a{font-size:1rem;padding:.5em .45em}
	.logo img{width:180px}
}
@media (max-width:1040px){
	.menu-botao{display:flex}
	#menu-principal{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:#fff;padding:.4rem 1.25rem 1.25rem;box-shadow:0 14px 24px rgba(0,0,0,.12);max-height:calc(100vh - 80px);overflow:auto}
	#menu-principal.aberto{display:flex}
	#menu-principal a{padding:.85em .3em;border-bottom:1px solid var(--linha);font-size:1.15rem}
	#menu-principal a[aria-current]:not(.botao){box-shadow:inset 3px 0 0 var(--vermelho);padding-left:.7em}
	#menu-principal .botao{margin:1rem 0 0;border-bottom:2px solid var(--verde-whats)}
	.rodape-grade{grid-template-columns:1fr 1fr}
	.vantagens-resumo{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
	.dupla,.dupla-form,.produto-detalhe,.simulador{grid-template-columns:1fr}
	.cartao-lateral,.simulador-casa{position:static}
	.simulador-cores ul{grid-template-columns:repeat(3,1fr)}
	.infos{grid-template-columns:1fr 1fr}
	.vantagens{grid-template-columns:1fr}
}
@media (max-width:700px){
	.topo-linha{min-height:70px}
	.logo img{width:150px}
	.heroi{min-height:520px}
	.heroi-foto img{object-position:50% 30%}
	.heroi::before{background:linear-gradient(0deg,rgba(20,16,14,.94) 0%,rgba(20,16,14,.82) 55%,rgba(20,16,14,.45) 100%)}
	.heroi-texto{padding:2rem 0 3.6rem}
	.heroi-lead{font-size:1.06rem}
	.atalhos{grid-template-columns:1fr;margin-top:-1.6rem}
	.atalho{padding:1rem 1.2rem}
	.duas-colunas,.campos{grid-template-columns:1fr}
	.mapa{height:300px}
}
@media (max-width:560px){
	.vantagens-resumo,.rodape-grade,.infos{grid-template-columns:1fr}
	.botoes .botao{flex:1 1 100%}
	.simulador-cores ul{grid-template-columns:repeat(2,1fr)}
	.fotos{grid-template-columns:1fr 1fr;gap:.5rem}
	.produtos{grid-template-columns:1fr 1fr}
	.vantagens li{padding:1.1rem;gap:.9rem}
	.vantagens img{flex-basis:56px;width:56px}
	.ampliar-anterior,.ampliar-proxima{top:auto!important;bottom:16px;transform:none!important}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Turnstile */
.verificacao{margin:4px 0 14px;min-height:65px}