/* Identidade Promotech para o mostruário.
 *
 * A paleta abaixo é a OFICIAL, copiada do :root de promotech.com.br/css/style.css
 * — não é aproximação de olho. As fontes são as mesmas do site (Poppins nos
 * títulos, Inter no corpo) e a marca é o arquivo do próprio site.
 *
 * Este arquivo desenha só a MOLDURA (topo, rodapé, tipografia e fundo). O miolo
 * de cada bancada — painéis, log, botões — continua no <style> da própria
 * página, porque cada uma tem o seu.
 */

:root{
    --pt-brand:var(--jg-4c8c21, #4C8C21);
    --pt-brand-dark:var(--jg-386718, #386718);
    --pt-brand-light:var(--jg-8bc34a, #8BC34A);
    --pt-accent:#FF7A3D;
    --pt-dark:#0B1220;
    --pt-dark-2:#121A2B;
    --pt-dark-3:#1B2740;
    --pt-ink:#1A2233;
    --pt-muted:#5B6472;
    --pt-surface:var(--jg-f6f8f4, #F6F8F4);
    --pt-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    --pt-titulo:"Poppins",var(--pt-sans);
}

body{
    margin:0;
    background:var(--pt-surface);
    color:var(--pt-ink);
    font-family:var(--pt-sans);
    /* O padding lateral sai do body e passa para o miolo: o topo e o rodapé
       precisam sangrar de ponta a ponta. */
    padding:0 !important;
}

/* ---------------- topo ---------------- */

.pt-topo{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,var(--pt-dark) 0%,var(--pt-dark-3) 62%,#20344f 100%);
    color:#fff;
}
/* Dois halos da paleta — é o que dá o "chamativo" sem inventar nada. */
.pt-topo::before{
    content:'';position:absolute;right:-8%;top:-70%;width:50%;aspect-ratio:1;border-radius:50%;
    background:radial-gradient(circle,rgba(var(--jg-rgb-8bc34a, 139,195,74),.30) 0%,rgba(var(--jg-rgb-8bc34a, 139,195,74),0) 68%);pointer-events:none;
}
.pt-topo::after{
    content:'';position:absolute;left:-10%;bottom:-80%;width:42%;aspect-ratio:1;border-radius:50%;
    background:radial-gradient(circle,rgba(255,122,61,.20) 0%,rgba(255,122,61,0) 68%);pointer-events:none;
}
.pt-topo-in{
    position:relative;max-width:1180px;margin:0 auto;
    padding:clamp(18px,3.5vw,30px) clamp(16px,4vw,36px) clamp(20px,3.5vw,34px);
}
.pt-marca{display:flex;align-items:center;gap:12px;margin-bottom:clamp(12px,2.5vw,20px)}
.pt-marca img{height:24px;width:auto;display:block}
.pt-marca .pt-div{width:1px;height:20px;background:rgba(255,255,255,.22)}
.pt-marca .pt-prod{font-family:var(--pt-titulo);font-weight:600;font-size:13.5px;color:rgba(255,255,255,.9)}
.pt-topo h1{
    font-family:var(--pt-titulo);font-weight:800;letter-spacing:-.02em;
    font-size:clamp(21px,3.4vw,30px);margin:0 0 6px;color:#fff;
}
.pt-topo .pt-sub{margin:0;font-size:14px;color:rgba(255,255,255,.72);max-width:70ch}
.pt-voltar{
    display:inline-block;margin-bottom:14px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.85);
    text-decoration:none;border:1px solid rgba(255,255,255,.26);border-radius:999px;padding:5px 13px;
    transition:background .2s,border-color .2s;
}
.pt-voltar:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5);color:#fff}

/* ---------------- miolo ---------------- */

.pt-miolo{max-width:1180px;margin:0 auto;padding:clamp(18px,3vw,28px) clamp(16px,4vw,36px) 40px}

/* ---------------- rodapé ---------------- */

.pt-rodape{
    background:var(--pt-dark);color:rgba(255,255,255,.72);
    font-size:13.5px;border-top:3px solid var(--pt-brand);
}
.pt-rodape-in{
    max-width:1180px;margin:0 auto;
    padding:clamp(26px,4vw,40px) clamp(16px,4vw,36px) 20px;
    display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(20px,4vw,46px);
}
.pt-rodape h3{
    font-family:var(--pt-titulo);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--pt-brand-light);margin:0 0 12px;font-weight:700;
}
.pt-rodape img.pt-rlogo{height:20px;width:auto;display:block;margin-bottom:12px}
.pt-rodape p{margin:0 0 10px;line-height:1.6}
.pt-rodape a{color:rgba(255,255,255,.86);text-decoration:none}
.pt-rodape a:hover{color:var(--pt-brand-light);text-decoration:underline}
.pt-rodape ul{list-style:none;margin:0;padding:0}
.pt-rodape li{margin-bottom:8px}
.pt-rodape .pt-tel{display:block;font-weight:600;color:#fff}
.pt-rodape .pt-tel span{font-weight:400;color:rgba(255,255,255,.6)}
.pt-rodape-fim{
    max-width:1180px;margin:0 auto;padding:15px clamp(16px,4vw,36px) 24px;
    border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;gap:10px;
    justify-content:space-between;font-size:12.5px;color:rgba(255,255,255,.55);
}
@media (max-width:820px){ .pt-rodape-in{grid-template-columns:1fr 1fr} }
@media (max-width:560px){
    .pt-rodape-in{grid-template-columns:1fr}
    .pt-marca{flex-wrap:wrap;gap:8px}
    .pt-marca .pt-div{display:none}
}