/* Solução Gás — CSS organizado em blocos verticais. */

/* 01. Variáveis e base */
:root {
    --blue:#064b92;
    --blue-dark:#083568;
    --blue-soft:#edf5fc;
    --ink:#142b44;
    --muted:#53667a;
    --line:#d9e4ee;
    --paper:#ffffff;
    --radius:20px
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    font-size:16px;
    line-height:1.65;
    color:var(--ink);
    background:var(--paper)
}
img {
    display:block;
    max-width:100%;
    height:auto
}
a {
    color:inherit;
    text-decoration:none
}
button {
    font:inherit
}
h1,h2,h3,p {
    margin-top:0
}
h1,h2,h3 {
    line-height:1.14;
    letter-spacing:-.035em
}
h1 {
    font-size:clamp(2.6rem,5vw,4.75rem);
    font-weight:700;
    margin-bottom:24px
}
h2 {
    font-size:clamp(1.9rem,3vw,2.65rem);
    margin-bottom:20px
}
h3 {
    font-size:1.6rem
}
p {
    color:var(--muted)
}
a:focus-visible,button:focus-visible {
    outline:3px solid #c87b00;
    outline-offset:5px
}
a:hover {
    text-decoration:underline
}
.container {
    width:min(1180px,calc(100% - 48px));
    margin-inline:auto
}
.section {
    padding-block:70px
}
.eyebrow {
    display:block;
    font-size:.8rem;
    text-transform:uppercase;
    letter-spacing:.15em;
    font-weight:700;
    color:var(--blue);
    margin-bottom:18px
}
.muted {
    color:var(--muted)
}
.skip-link {
    position:absolute;
    left:-9999px
}
.skip-link:focus {
    left:16px;
    top:16px;
    background:white;
    padding:12px;
    z-index:100
}


/* 02. Cabeçalho e navegação */
.topbar {
    background:var(--blue-dark);
    color:white;
    font-size:.875rem
}
.topbar .container {
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding-block:8px
}
.site-header {
    background:white;
    border-bottom:1px solid var(--line)
}
.header-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    min-height:108px
}
.brand {
    width:220px;
    flex-shrink:0
}
.brand img {
    width:100%;
    height:auto
}
nav {
    display:flex;
    gap:25px;
    align-items:center
}
nav>a {
    font-size:.9rem;
    font-weight:600
}
nav [aria-current=page] {
    color:var(--blue);
    text-decoration:underline;
    text-underline-offset:8px
}
.menu-toggle {
    display:none;
    background:white;
    border:1px solid var(--line);
    padding:10px 14px;
    border-radius:8px;
    color:var(--ink)
}


/* 03. Botões e links */
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:50px;
    padding:14px 24px;
    border-radius:8px;
    background:var(--blue);
    color:white;
    font-weight:700;
    font-size:.95rem;
    line-height:1.4;
    transition:background .15s
}
.button:hover {
    background:var(--blue-dark);
    text-decoration:none
}
.button.small {
    padding:12px 18px;
    font-size:.85rem;
    min-height:44px
}
.button.outline {
    background:transparent;
    color:var(--blue);
    border:1px solid var(--blue)
}
.button.outline:hover {
    background:var(--blue-soft)
}
.text-link {
    color:var(--blue);
    font-weight:700;
    text-decoration:underline;
    text-underline-offset:5px
}
.actions {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:25px
}


/* 04. Página inicial — destaque */
.hero {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
    padding-block:76px
}
.hero-copy p {
    max-width:460px;
    font-size:1.1rem;
    margin-bottom:30px
}
.hero h1 em {
    font-style:normal;
    color:var(--blue)
}
.hero-photo {
    background:var(--blue-soft);
    border-radius:var(--radius);
    overflow:hidden;
    align-self:stretch;
    display:flex;
    flex-direction:column;
    justify-content:center
}
.hero-photo img {
    width:100%;
    object-fit:contain
}
.photo-caption {
    display:flex;
    justify-content:space-between;
    gap:15px;
    padding:24px;
    font-size:.85rem;
    align-items:center
}
.photo-caption strong {
    font-size:1.3rem
}
.hero-note {
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    margin-top:32px;
    font-size:.8rem;
    color:var(--muted)
}
.hero-note span+span {
    border-left:1px solid var(--line);
    padding-left:20px
}
.service-strip {
    border-block:1px solid var(--line);
    background:#fafcfe
}
.strip-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    padding-block:30px;
    gap:35px
}
.strip-grid span {
    color:var(--blue);
    font-size:.8rem;
    font-weight:700;
    display:block
}
.strip-grid strong {
    font-size:1rem
}
.strip-grid p {
    font-size:.875rem;
    margin-bottom:0
}


/* 05. Cards e seções */
.section-title {
    display:flex;
    justify-content:space-between;
    gap:25px;
    align-items:end;
    margin-bottom:28px
}
.section-title h2 {
    margin-bottom:0
}
.category-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px
}
.category {
    padding:32px;
    background:var(--blue-soft);
    border:1px solid transparent;
    border-radius:var(--radius)
}
.category:hover {
    border-color:var(--blue);
    text-decoration:none
}
.category-label {
    font-size:.75rem;
    letter-spacing:.12em;
    color:var(--blue);
    font-weight:700
}
.category h3 {
    margin-top:32px;
    margin-bottom:14px
}
.category-foot {
    display:block;
    font-size:.85rem;
    margin-top:32px;
    color:var(--blue)
}
.about-teaser {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
    border-top:1px solid var(--line)
}
.about-teaser>img {
    border-radius:var(--radius);
    width:100%
}
.contact-band {
    background:var(--blue-soft);
    padding-block:50px
}
.contact-band>.container {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px
}
.contact-band h2 {
    max-width:700px
}
.contact-band p {
    margin-bottom:0
}
.contact-band .button {
    flex-shrink:0
}


/* 06. Páginas internas */
.page-head {
    background:var(--blue-soft);
    padding-block:65px
}
.page-head h1 {
    font-size:clamp(2.6rem,5vw,4rem);
    max-width:850px
}
.page-head p {
    font-size:1.15rem;
    margin:0
}
.prose {
    max-width:960px
}
.prose>h2:not(:first-child) {
    margin-top:48px
}
.prose p {
    line-height:1.8
}
.two-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px
}
.panel {
    padding:35px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:white
}
.panel h2 {
    font-size:1.75rem
}
.panel p:last-child {
    margin-bottom:0
}
.value-list {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
    list-style:none;
    padding:0
}
.value-list li {
    border-bottom:1px solid var(--line);
    padding-block:12px
}
.gallery {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    align-items:start
}
.gallery figure {
    margin:0;
    background:var(--blue-soft);
    border-radius:16px;
    overflow:hidden
}
.gallery img {
    width:100%;
    height:240px;
    object-fit:contain;
    background:#edf2f6
}
.gallery figcaption {
    padding:14px 20px;
    font-size:.9rem
}
.product-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px
}
.product {
    background:var(--blue-soft);
    padding:28px;
    border-radius:var(--radius)
}
.product h3 {
    font-size:3rem;
    color:var(--blue);
    margin:25px 0
}
.product p {
    min-height:85px
}
.product a {
    font-size:.9rem
}
.product-grid+.muted {
    margin-top:25px
}
.wide-photo {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:50px
}
.wide-photo img {
    max-height:460px;
    object-fit:contain;
    width:100%;
    background:var(--blue-soft);
    border-radius:var(--radius)
}
.contact-details dt {
    color:var(--muted);
    font-size:.85rem;
    margin-top:20px
}
.contact-details dd {
    margin-left:0;
    margin-bottom:16px;
    font-weight:600;
    overflow-wrap:anywhere
}
.contact-details a:not(.button) {
    color:var(--blue);
    text-decoration:underline
}
.location>img {
    border-radius:var(--radius);
    margin-bottom:25px
}
.prose a {
    color:var(--blue);
    text-decoration:underline
}


/* 07. Rodapé */
.site-footer {
    border-top:1px solid var(--line);
    padding-top:55px;
    background:#f8fafc
}
.footer-grid {
    display:grid;
    grid-template-columns:.8fr 1fr 1.2fr;
    gap:50px
}
.footer-logo {
    width:200px;
    margin-bottom:24px
}
.site-footer h2 {
    font-size:1rem;
    letter-spacing:0
}
.site-footer p,.site-footer a {
    font-size:.875rem
}
.site-footer a {
    overflow-wrap:anywhere
}
.footer-bottom {
    display:flex;
    gap:25px;
    flex-wrap:wrap;
    margin-top:40px;
    padding-block:22px;
    border-top:1px solid var(--line);
    color:var(--muted);
    font-size:.8rem
}
.footer-bottom span {
    margin-right:auto
}


/* 08. Responsividade — tablet */
@media(max-width:1050px) {
    .header-inner {
        flex-wrap:wrap;
        justify-content:center;
        padding-block:20px;
        gap:20px
    }
    nav {
        gap:20px
    }
    .hero {
        gap:30px
    }
    .category {
        padding:25px
    }
    .product-grid {
        grid-template-columns:repeat(2,1fr)
    }
    .footer-grid {
        gap:25px
    }
    .photo-caption {
        flex-direction:column;
        align-items:start
    }

}


/* 09. Responsividade — celular */
@media(max-width:700px) {
    .container {
        width:calc(100% - 36px)
    }
    .topbar .container {
        font-size:.75rem;
        gap:10px
    }
    .header-inner {
        justify-content:space-between;
        min-height:90px
    }
    .brand {
        width:185px
    }
    .menu-toggle {
        display:block
    }
    .js nav {
        display:none
    }
    .js .header-inner:has(.menu-toggle[aria-expanded=true]) nav {
        display:flex
    }
    nav {
        width:100%;
        flex-direction:column;
        align-items:stretch;
        gap:0
    }
    nav>a {
        padding:12px
    }
    .hero {
        grid-template-columns:1fr;
        padding-block:40px;
        gap:35px
    }
    .hero h1 {
        font-size:2.9rem
    }
    .hero-copy p {
        font-size:1rem
    }
    .photo-caption {
        flex-direction:row;
        font-size:.8rem;
        padding:20px
    }
    .photo-caption strong {
        font-size:1rem
    }
    .section {
        padding-block:45px
    }
    .strip-grid {
        grid-template-columns:1fr;
        gap:20px
    }
    .strip-grid>div {
        border-bottom:1px solid var(--line);
        padding-bottom:18px
    }
    .strip-grid>div:last-child {
        border:0;
        padding:0
    }
    .category-grid,.about-teaser,.two-grid,.wide-photo,.footer-grid {
        grid-template-columns:1fr
    }
    .about-teaser {
        gap:30px
    }
    .section-title {
        align-items:start;
        flex-direction:column
    }
    .contact-band>.container {
        flex-direction:column;
        align-items:start
    }
    .page-head {
        padding-block:45px
    }
    .panel {
        padding:25px
    }
    .gallery {
        grid-template-columns:1fr 1fr;
        gap:15px
    }
    .gallery img {
        height:190px
    }
    .gallery figcaption {
        padding:12px;
        font-size:.85rem
    }
    .value-list {
        grid-template-columns:1fr
    }
    .product {
        padding:20px
    }
    .product p {
        min-height:110px
    }
    .product h3 {
        font-size:2.5rem
    }
    .footer-grid {
        gap:30px
    }
    .footer-bottom {
        gap:15px
    }
    .footer-bottom span {
        width:100%
    }
    .actions {
        gap:20px
    }

}
@media(max-width:380px) {
    .gallery,.product-grid {
        grid-template-columns:1fr
    }
    .product p {
        min-height:0
    }
    .topbar .container {
        flex-direction:column;
        gap:0
    }
    .hero h1 {
        font-size:2.5rem
    }

}


/* 10. Movimento reduzido e impressão */
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    * {
        transition:none!important
    }

}
@media print {
    .topbar,.menu-toggle,nav,.actions,.contact-band {
        display:none
    }
    .hero,.two-grid,.footer-grid {
        display:block
    }
    .section {
        padding-block:20px
    }
    .site-footer {
        background:white
    }
    .panel {
        break-inside:avoid
    }

}