/* =========================================================
       1. TOKENS DE DESIGN
       -----------------------------------------------------------
       Paleta industrial: fundo grafite quase preto, azul Fassina
       como camada estrutural, amarelo como acento de ação (é a
       cor de sinalização de equipamentos pesados / faixas de
       segurança de obra), branco/cinza para texto e contraste.
    ========================================================= */
    :root{
        --amarelo:        #fcee02;
        --amarelo-escuro: #d4c900;
        --azul:           #083d7c;
        --azul-claro:     #1257b8;
        --grafite:        #14171c;   /* fundo principal, "aço frio" */
        --grafite-2:      #1d2128;   /* fundo secundário / cards */
        --cinza-linha:    #2a2f38;   /* bordas e divisores */
        --branco:         #ffffff;
        --cinza-texto:    #b7bdc9;   /* texto secundário sobre escuro */

        --fonte-display: 'Oswald', sans-serif;
        --fonte-corpo:   'Barlow', sans-serif;

        --raio: 4px;
        --container: 1180px;
    }

    /* =========================================================
       2. RESET / BASE
    ========================================================= */
    *{ margin:0; padding:0; box-sizing:border-box; }

    html{ scroll-behavior:smooth; }

    body{
        font-family: var(--fonte-corpo);
        background: var(--grafite);
        color: var(--branco);
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
    }

    img{ max-width:100%; display:block; }

    a{ text-decoration:none; color:inherit; }

    ul{ list-style:none; }

    .container{
        width:100%;
        max-width: var(--container);
        margin: 0 auto;
        padding: 0 24px;
    }

    h1, h2, h3{
        font-family: var(--fonte-display);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        line-height: 1.15;
    }

    /* Respeita usuários com preferência por menos movimento */
    @media (prefers-reduced-motion: reduce){
        *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    }

    /* =========================================================
       3. ELEMENTO ASSINATURA — "LANÇA DO MUNCK"
       -----------------------------------------------------------
       Uma linha diagonal amarela que atravessa as seções,
       lembrando o braço articulado (lança) de um caminhão Munck
       se estendendo pela página. Reaparece de forma sutil como
       fio condutor visual entre o hero e o rodapé.
    ========================================================= */
    /*.lanca{
        position: absolute;
        pointer-events: none;
        z-index: 1;
    }/*

    /* =========================================================
       4. FAIXA SUPERIOR DE CONTATO RÁPIDO
    ========================================================= */
    .topbar{
        background: var(--azul);
        padding: 8px 0;
        font-size: 13px;
        border-bottom: 3px solid var(--amarelo);
    }
    .topbar .container{
        display:flex;
        justify-content: space-between;
        align-items:center;
        flex-wrap: wrap;
        gap: 6px;
    }
    .topbar-info{
        display:flex;
        gap: 22px;
        flex-wrap: wrap;
        color: #dbe6f7;
        font-weight: 500;
    }
    .topbar-info span{ white-space: nowrap; }
    .topbar-info strong{ color: var(--amarelo); }

    /* =========================================================
       5. CABEÇALHO / LOGO
    ========================================================= */
    header.main-header{
        background: var(--grafite);
        padding: 18px 0;
        border-bottom: 1px solid var(--cinza-linha);
    }
    header.main-header .container{
        display:flex;
        justify-content: space-between;
        align-items:center;
    }
    .logo img{ height: 80px; width:auto; }
    .btn-header{
        display:inline-block;
        background: var(--amarelo);
        color: var(--grafite);
        font-family: var(--fonte-display);
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 0.5px;
        padding: 10px 22px;
        border-radius: var(--raio);
        font-size: 14px;
        transition: transform .15s ease, background .2s ease;
    }
    .btn-header:hover{ background: var(--branco); transform: translateY(-2px); }

/* =========================================================
   HERO — PRIMEIRA DOBRA
========================================================= */
    .hero {
        position: relative;
        min-height: 640px;
        display: flex;
        align-items: center;
        overflow: hidden;
        background: var(--grafite);
    }

    /* Guindaste no desktop */
    .hero-bg {
        position: absolute;
        inset: 0;
        z-index: 0;

        display: flex;
        align-items: center;
        justify-content: flex-end;

        padding: 36px 3.5vw 36px 48%;
        pointer-events: none;
    }

    .hero-bg img {
        display: block;

        width: min(54vw, 1040px);
        max-width: 100%;
        max-height: 620px;
        height: auto;

        object-fit: contain;
        object-position: center;
        filter: saturate(1.05);
    }

    /* Gradiente para manter o texto legível */
    .hero-overlay {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;

        background:
        linear-gradient(
            90deg,
            rgba(8, 12, 18, 0.98) 0%,
            rgba(8, 12, 18, 0.94) 31%,
            rgba(8, 12, 18, 0.70) 48%,
            rgba(8, 12, 18, 0.18) 72%,
            rgba(8, 12, 18, 0.05) 100%
        );
    }

    .hero > .container {
        position: relative; 
        z-index: 3;
        width: 100%;
    }

    .hero-content {
        position: relative;
        z-index: 3;
        max-width: 620px;
        padding: 70px 0;
}
    .eyebrow{
        display:inline-flex;
        align-items:center;
        gap:8px;
        background: rgba(252,238,2,0.12);
        border: 1px solid var(--amarelo);
        color: var(--amarelo);
        font-family: var(--fonte-display);
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 1.5px;
        padding: 6px 14px;
        border-radius: 999px;
        margin-bottom: 22px;
    }

    .hero h1{
        font-size: clamp(2.4rem, 5vw, 3.6rem);
        color: var(--branco);
        margin-bottom: 18px;
    }
    .hero h1 .destaque{ color: var(--amarelo); }

    .hero .subtitulo{
        font-size: 19px;
        color: #e6e9ee;
        font-weight: 500;
        margin-bottom: 14px;
        max-width: 560px;
    }
    .hero .apoio{
        font-size: 15px;
        color: var(--cinza-texto);
        margin-bottom: 34px;
        max-width: 520px;
    }

    @media (max-width: 768px) {
    .hero {
        min-height: auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        overflow: hidden;
    }

    /*
      A imagem deixa de ser absoluta e passa
      a ocupar uma linha própria acima do texto.
    */
    .hero-bg {
        position: relative;
        inset: auto;
        z-index: 2;
        order: 1;

        width: 100%;
        min-height: 350px;
        padding: 34px 18px 8px;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero-bg img {
        width: min(108%, 580px);
        max-width: none;
        max-height: 360px;
        height: auto;

        object-fit: contain;
        object-position: center;
    }

    /*
      O gradiente deixa de ficar entre a imagem
      e o conteúdo no mobile.
    */
    .hero-overlay {
        z-index: 0;
        background:
            linear-gradient(
                180deg,
                rgba(8, 12, 18, 0) 0%,
                rgba(8, 12, 18, 0.35) 38%,
                rgba(8, 12, 18, 0.92) 66%,
                rgba(8, 12, 18, 1) 100%
            );
    }

    .hero > .container {
        order: 2;
        z-index: 3;
    }

    .hero-content {
        max-width: 100%;
        padding: 28px 0 58px;
    }
}

    /* =========================================================
       7. BOTÕES
    ========================================================= */
    .btn{
        display:inline-flex;
        align-items:center;
        gap: 10px;
        font-family: var(--fonte-display);
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 0.5px;
        padding: 16px 30px;
        border-radius: var(--raio);
        font-size: 15px;
        transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
    }
    .btn-primario{
        background: var(--amarelo);
        color: var(--grafite);
        box-shadow: 0 6px 0 var(--amarelo-escuro);
    }
    .btn-primario:hover{
        transform: translateY(-3px);
        box-shadow: 0 9px 0 var(--amarelo-escuro);
    }
    .btn-primario:active{ transform: translateY(0); box-shadow: 0 2px 0 var(--amarelo-escuro); }

    .btn-secundario{
        background: transparent;
        border: 2px solid var(--branco);
        color: var(--branco);
    }
    .btn-secundario:hover{ background: var(--branco); color: var(--grafite); }

    .btn svg{ width:18px; height:18px; flex-shrink:0; }

    /* =========================================================
       8. SEÇÃO — DESTAQUES RÁPIDOS
    ========================================================= */
    .destaques{
        position: relative;
        background: var(--grafite-2);
        padding: 90px 0 80px;
        border-top: 1px solid var(--cinza-linha);
        border-bottom: 1px solid var(--cinza-linha);
    }

    .secao-titulo{
        text-align:center;
        max-width: 720px;
        margin: 0 auto 56px;
    }
    .secao-tag{
        font-family: var(--fonte-display);
        color: var(--amarelo);
        text-transform: uppercase;
        letter-spacing: 2px;
        font-size: 13px;
        margin-bottom: 10px;
        display:block;
    }
    .secao-titulo h2{
        font-size: clamp(1.8rem, 3.4vw, 2.6rem);
        color: var(--branco);
    }

    .cards-grid{
        display:grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        margin-bottom: 48px;
    }

    .card{
        background: var(--grafite);
        border: 1px solid var(--cinza-linha);
        border-top: 4px solid var(--amarelo);
        border-radius: var(--raio);
        padding: 34px 30px;
        transition: transform .2s ease, border-color .2s ease;
    }
    .card:hover{ transform: translateY(-6px); border-color: var(--amarelo); }

    .card-icone{
        width: 52px; height:52px;
        background: rgba(252,238,2,0.1);
        border-radius: var(--raio);
        display:flex; align-items:center; justify-content:center;
        margin-bottom: 20px;
    }
    .card-icone svg{ width:28px; height:28px; color: var(--amarelo); }

    .card h3{
        font-size: 20px;
        color: var(--branco);
        margin-bottom: 10px;
    }
    .card p{
        color: var(--cinza-texto);
        font-size: 15px;
    }

    .destaques-cta{ text-align:center; }

    /* =========================================================
       9. SEÇÃO — POR QUE ESCOLHER
    ========================================================= */
    .porque{
        position:relative;
        padding: 90px 0;
        background: var(--grafite);
        overflow:hidden;
    }

    .porque-grid{
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items:center;
        margin-bottom: 70px;
    }

    .porque-texto .secao-tag{ text-align:left; }
    .porque-texto h2{
        font-size: clamp(1.8rem, 3.2vw, 2.4rem);
        margin-bottom: 20px;
        color: var(--branco);
    }
    .porque-texto > p{
        color: var(--cinza-texto);
        font-size: 16px;
        margin-bottom: 28px;
        max-width: 480px;
    }

    .lista-diferenciais{ display:flex; flex-direction:column; gap:14px; }
    .lista-diferenciais li{
        display:flex;
        align-items:flex-start;
        gap: 12px;
        font-size: 15.5px;
        color: #e6e9ee;
        font-weight: 500;
    }
    .lista-diferenciais svg{
        width:20px; height:20px;
        flex-shrink:0;
        margin-top:2px;
        color: var(--amarelo);
    }

    /* Galeria de fotos operacionais */
    .porque-galeria{
        position:relative;
        display:grid;
        grid-template-columns: 1.2fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 14px;
        height: 460px;
    }
    .porque-galeria img{
        width:100%; height:100%;
        object-fit:cover;
        border-radius: var(--raio);
        border: 1px solid var(--cinza-linha);
    }
    .g-item-1{ grid-row: 1 / 3; }
    .g-item-2, .g-item-3{ height:100%; }

    /* Faixa de depoimentos — agora em código (cards), não mais imagem */
    .depoimentos-wrap{
        background: var(--azul);
        border-radius: var(--raio);
        border: 1px solid var(--azul-claro);
        padding: 50px 36px 44px;
    }
    .depoimentos-titulo{
        text-align:center;
        font-family: var(--fonte-display);
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--amarelo);
        font-size: 26px;
        margin-bottom: 34px;
    }
    .depoimentos-grid{
        display:grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
    .depoimento-card{
        background: var(--branco);
        border-radius: 8px;
        padding: 24px 22px;
    }
    .depoimento-estrelas{
        color: var(--amarelo);
        font-size: 16px;
        letter-spacing: 3px;
        margin-bottom: 14px;
    }
    .depoimento-card p{
        color: #2b2f38;
        font-size: 14.5px;
        line-height: 1.55;
    }
    @media (max-width: 900px){
        .depoimentos-grid{ grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 560px){
        .depoimentos-grid{ grid-template-columns: 1fr; }
        .depoimentos-wrap{ padding: 40px 20px 34px; }
    }

    /* =========================================================
       10. GALERIA DE OPERAÇÕES (mini carrossel)
    ========================================================= */
    .operacoes{
        padding: 0 0 90px;
        background: var(--grafite);
    }
    .carrossel{
        display:flex;
        gap: 18px;
        overflow-x: auto;
        padding-bottom: 10px;
        scroll-snap-type: x mandatory;
    }
    .carrossel::-webkit-scrollbar{ height:6px; }
    .carrossel::-webkit-scrollbar-thumb{ background: var(--amarelo); border-radius:10px; }
    .carrossel::-webkit-scrollbar-track{ background: var(--cinza-linha); }

    .carrossel-item{
        position:relative;
        flex: 0 0 300px;
        height: 220px;
        border-radius: var(--raio);
        overflow:hidden;
        scroll-snap-align: start;
        border: 1px solid var(--cinza-linha);
    }
    .carrossel-item img{ width:100%; height:100%; object-fit:cover; transition: transform .35s ease; }
    .carrossel-item:hover img{ transform: scale(1.06); }
    .carrossel-legenda{
        position:absolute; left:0; right:0; bottom:0;
        background: linear-gradient(0deg, rgba(0,0,0,0.85), transparent);
        color:var(--branco);
        font-family: var(--fonte-display);
        text-transform:uppercase;
        font-size: 13px;
        letter-spacing:0.5px;
        padding: 26px 14px 10px;
    }

    /* =========================================================
       11. SEÇÃO — CLIENTES / PARCEIROS (slider automático)
    ========================================================= */
    .clientes{
        padding: 70px 0 80px;
        background: var(--azul);
        border-top: 1px solid var(--azul-claro);
        border-bottom: 1px solid var(--azul-claro);
    }
    .clientes .secao-titulo h2 .destaque{ color: var(--amarelo); }

    /* Wrapper com máscara de fade nas bordas, escondendo o "corte" do slide */
    .logos-slider-wrapper{
        position: relative;
        width: 100%;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    }

    /* Trilha com a lista de logos duplicada (para loop contínuo sem "salto") */
    .logos-track{
        display:flex;
        align-items:center;
        gap: 64px;
        width: max-content;
        animation: rolar-logos 32s linear infinite;
    }
    /* Pausa a animação ao passar o mouse, para o usuário poder ver com calma */
    .logos-slider-wrapper:hover .logos-track{ animation-play-state: paused; }

    .logos-track img{
        height: 56px;
        width: auto;
        flex-shrink: 0;
        opacity: 0.92;
        transition: opacity .2s ease;
    }
    .logos-track img:hover{ opacity: 1; }

    /* Move exatamente 50%: como a lista está duplicada 2x, o loop fica invisível */
    @keyframes rolar-logos{
        from{ transform: translateX(0); }
        to{ transform: translateX(-50%); }
    }

    @media (max-width: 640px){
        .logos-track img{ height: 40px; }
        .logos-track{ gap: 40px; animation-duration: 22s; }
    }

    /* =========================================================
       11B. SEÇÃO — LOCAÇÃO DE CONTÊINERES
    ========================================================= */
    .conteineres{
        position: relative;
        padding: 90px 0;
        background: var(--grafite-2);
        border-top: 1px solid var(--cinza-linha);
        border-bottom: 1px solid var(--cinza-linha);
        overflow: hidden;
    }

    .conteineres-grid{
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items:center;
    }

    .conteineres-img{
        border-radius: var(--raio);
        overflow: hidden;
        border: 1px solid var(--cinza-linha);
    }
    .conteineres-img img{
        width:100%;
        height:100%;
        object-fit: cover;
        display:block;
    }

    .conteineres-texto .secao-tag{ text-align:left; }
    .conteineres-texto h2{
        font-size: clamp(1.8rem, 3.2vw, 2.4rem);
        color: var(--branco);
        margin-bottom: 14px;
    }
    .conteineres-texto .conteineres-subtitulo{
        font-family: var(--fonte-display);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--amarelo);
        font-size: 16px;
        margin-bottom: 20px;
    }
    .conteineres-texto p{
        color: var(--cinza-texto);
        font-size: 15.5px;
        margin-bottom: 18px;
        max-width: 520px;
    }

    @media (max-width: 900px){
        .conteineres-grid{ grid-template-columns: 1fr; gap: 32px; }
        .conteineres-img img{ max-height: 320px; }
    }

    /* =========================================================
       12. CHAMADA FINAL
    ========================================================= */
    .final{
        position:relative;
        background: var(--azul);
        padding: 100px 0;
        overflow:hidden;
        text-align:center;
    }
    /*.final .lanca-svg{
        bottom: -60px;
        left: -100px;
        width: 520px;
        opacity: 0.5;
        transform: rotate(180deg);
    }*/
    .final-conteudo{ position:relative; z-index:2; max-width:640px; margin:0 auto; }
    .final h2{
        font-size: clamp(2rem, 4vw, 2.8rem);
        color: var(--branco);
        margin-bottom: 16px;
    }
    .final h2 .destaque{ color: var(--amarelo); }
    .final p{
        color: #dbe6f7;
        font-size: 17px;
        margin-bottom: 36px;
    }

    .contato-rapido{
        display:flex;
        justify-content:center;
        gap: 34px;
        flex-wrap:wrap;
        margin-top: 46px;
        padding-top: 36px;
        border-top: 1px solid rgba(255,255,255,0.18);
    }
    .contato-item{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap: 6px;
        color:#dbe6f7;
        font-size: 14px;
    }
    .contato-item strong{
        font-family: var(--fonte-display);
        color: var(--branco);
        font-size: 15px;
        text-transform:uppercase;
        letter-spacing:0.4px;
    }
    .contato-item svg{ width:22px; height:22px; color: var(--amarelo); margin-bottom:4px; }

    /* =========================================================
       13. RODAPÉ
    ========================================================= */
    footer{
        background: var(--grafite);
        padding: 28px 0;
        text-align:center;
    }
    footer p{
        color: #6b7280;
        font-size: 13px;
    }
    footer .logo-rodape{ height: 40px; margin: 0 auto 14px; opacity:0.85; }

    /* =========================================================
       14. BOTÃO FLUTUANTE WHATSAPP
    ========================================================= */
    .whatsapp-flutuante{
        position: fixed;
        bottom: calc(24px + env(safe-area-inset-bottom, 0px));
        right: calc(24px + env(safe-area-inset-right, 0px));
        z-index: 50;
        width: 58px; height:58px;
        background: #25D366;
        border-radius: 50%;
        display:flex; align-items:center; justify-content:center;
        box-shadow: 0 8px 20px rgba(0,0,0,0.4);
        animation: pulsar 2.4s ease-in-out infinite;
    }
    .whatsapp-flutuante svg{ width:30px; height:30px; color:#fff; }
    @keyframes pulsar{
        0%,100%{ box-shadow: 0 8px 20px rgba(0,0,0,0.4), 0 0 0 0 rgba(37,211,102,0.5); }
        50%{ box-shadow: 0 8px 20px rgba(0,0,0,0.4), 0 0 0 10px rgba(37,211,102,0); }
    }

    /* =========================================================
       15. RESPONSIVO
    ========================================================= */
    @media (max-width: 900px){
        .porque-grid{ grid-template-columns: 1fr; gap: 40px; }
        .porque-galeria{ height: 380px; }
        .cards-grid{ grid-template-columns: 1fr; }
        .hero{ min-height: auto; }
        .hero-bg img{ object-position: 65% 30%; }
        .hero-content{ padding: 90px 0 60px; }
    }

    @media (max-width: 640px){
        .topbar .container{ justify-content:center; text-align:center; }
        .topbar-info{ justify-content:center; }
        header.main-header .container{ flex-direction:column; gap:14px; }
        .hero-overlay{
            background:
                linear-gradient(180deg, rgba(8,12,18,0.55) 0%, rgba(8,12,18,0.92) 55%, rgba(8,12,18,0.98) 100%);
        }
        .hero-bg img{ object-position: 70% 15%; }
        .hero-content{ max-width:100%; text-align:left; }
        .btn{ width:100%; justify-content:center; }
        .porque-galeria{ grid-template-columns: 1fr 1fr; height: 300px; }
        .final .lanca-svg, .hero .lanca-svg{ display:none; }
        .contato-rapido{ gap: 26px; }
    }


    /* =========================================================
       16. MENU DE NAVEGAÇÃO DO HEADER
       -----------------------------------------------------------
       Desktop: logo + links + CTA.
       Mobile: logo + botão hambúrguer com menu expansível.
    ========================================================= */
    header.main-header{
        position: relative;
        z-index: 40;
    }

    header.main-header .container{
        display:flex;
        flex-direction:row;
        justify-content:space-between;
        align-items:center;
        gap:30px;
    }

    .logo{
        display:block;
        flex-shrink:0;
    }

    .header-nav{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:28px;
        margin-left:auto;
    }

    .header-nav a{
        position:relative;
        font-family:var(--fonte-display);
        text-transform:uppercase;
        font-size:14px;
        font-weight:600;
        letter-spacing:.7px;
        color:#e6e9ee;
        padding:8px 0;
        white-space:nowrap;
        transition:color .2s ease;
    }

    .header-nav a::after{
        content:"";
        position:absolute;
        left:0;
        bottom:2px;
        width:0;
        height:2px;
        background:var(--amarelo);
        transition:width .2s ease;
    }

    .header-nav a:hover,
    .header-nav a:focus-visible{
        color:var(--amarelo);
    }

    .header-nav a:hover::after,
    .header-nav a:focus-visible::after{
        width:100%;
    }

    .header-actions{
        display:flex;
        align-items:center;
        gap:14px;
        flex-shrink:0;
    }

    .menu-toggle{
        display:none;
        width:46px;
        height:46px;
        padding:0;
        border:1px solid var(--cinza-linha);
        border-radius:var(--raio);
        background:var(--grafite-2);
        cursor:pointer;
        align-items:center;
        justify-content:center;
        flex-direction:column;
        gap:5px;
    }

    .menu-toggle span{
        display:block;
        width:22px;
        height:2px;
        background:var(--amarelo);
        transition:transform .25s ease, opacity .2s ease;
    }

    .menu-toggle.is-active span:nth-child(1){
        transform:translateY(7px) rotate(45deg);
    }

    .menu-toggle.is-active span:nth-child(2){
        opacity:0;
    }

    .menu-toggle.is-active span:nth-child(3){
        transform:translateY(-7px) rotate(-45deg);
    }

    @media (max-width: 900px){
        header.main-header{
            padding:14px 0;
        }

        header.main-header .container{
            flex-direction:row;
            justify-content:space-between;
            align-items:center;
            gap:16px;
        }

        .logo img{
            height:66px;
        }

        .menu-toggle{
            display:flex;
        }

        .header-nav{
            position:absolute;
            top:100%;
            left:0;
            right:0;
            display:flex;
            flex-direction:column;
            align-items:stretch;
            gap:0;
            margin:0;
            padding:8px 24px 22px;
            background:rgba(20,23,28,.99);
            border-top:1px solid var(--cinza-linha);
            border-bottom:3px solid var(--amarelo);
            box-shadow:0 18px 30px rgba(0,0,0,.28);
            opacity:0;
            visibility:hidden;
            pointer-events:none;
            transform:translateY(-10px);
            transition:opacity .2s ease, visibility .2s ease, transform .2s ease;
        }

        .header-nav.is-open{
            opacity:1;
            visibility:visible;
            pointer-events:auto;
            transform:translateY(0);
        }

        .header-nav a{
            width:100%;
            padding:16px 4px;
            border-bottom:1px solid var(--cinza-linha);
            font-size:15px;
        }

        .header-nav a:last-child{
            border-bottom:0;
        }

        .header-nav a::after{
            display:none;
        }
    }

    @media (max-width: 640px){
        header.main-header .container{
            flex-direction:row;
            justify-content:space-between;
            align-items:center;
            gap:12px;
        }

        .logo img{
            height:58px;
        }

        .btn-header{
            display:none;
        }

        .header-actions{
            margin-left:auto;
        }
    }

/* =========================================================
   SITE MULTIPÁGINA (29/09/2026)
========================================================= */
img{ height:auto; }
.topbar-ig, .rodape-ig{ display:inline-flex; align-items:center; gap:6px; }
.icone-ig{ width:16px; height:16px; flex-shrink:0; }
.btn .icone-ig{ width:18px; height:18px; }
.videos{ padding:90px 0; background:var(--grafite-2); border-top:1px solid var(--cinza-linha); }
.videos-grid{ display:grid; gap:16px; margin-bottom:40px; }
.videos-4{ grid-template-columns:repeat(4, 1fr); }
.videos-3{ grid-template-columns:repeat(3, 1fr); max-width:900px; margin-left:auto; margin-right:auto; }
.video-item{ margin:0; }
.video-item video{ width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; background:#000; border-radius:var(--raio);
    border:1px solid var(--cinza-linha); display:block; }
.video-item figcaption{ margin-top:8px; font-size:14px; color:var(--cinza-texto); }
@media (max-width: 900px){ .videos-4, .videos-3{ grid-template-columns:1fr 1fr; } }
.logo-rodape, .logo img, .logos-track img{ width:auto; }
.topbar a{ color:inherit; }
.header-nav{ gap:20px; }
.header-nav a{ font-size:13.5px; }
.header-nav a[aria-current="page"]{ color:var(--amarelo); }
@media (max-width: 1150px){
    .menu-toggle{ display:flex; }
    .header-nav{
        position:absolute; top:100%; left:0; right:0; display:flex; flex-direction:column; align-items:stretch;
        gap:0; margin:0; padding:8px 24px 22px; background:rgba(20,23,28,.99); border-top:1px solid var(--cinza-linha);
        border-bottom:3px solid var(--amarelo); box-shadow:0 18px 30px rgba(0,0,0,.28); opacity:0; visibility:hidden;
        pointer-events:none; transform:translateY(-10px); transition:opacity .2s ease, visibility .2s ease, transform .2s ease;
    }
    .header-nav.is-open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
    .header-nav a{ width:100%; padding:16px 4px; border-bottom:1px solid var(--cinza-linha); font-size:15px; }
    .header-nav a:last-child{ border-bottom:0; }
    .header-nav a::after{ display:none; }
}

.card-link{ display:block; color:inherit; }
.card-mais{ display:inline-block; margin-top:14px; font-family:var(--fonte-display); text-transform:uppercase;
    letter-spacing:.5px; font-size:14px; color:var(--amarelo); }
.conteineres-texto .btn-secundario{ margin-top:14px; }

/* Topo das páginas de serviço */
.page-hero{ position:relative; min-height:560px; display:flex; align-items:flex-end; overflow:hidden; background:var(--grafite); }
.page-hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.page-hero-overlay{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(8,12,18,.95) 0%, rgba(8,12,18,.82) 45%, rgba(8,12,18,.35) 100%); }
.page-hero-conteudo{ position:relative; z-index:2; padding:90px 24px 70px; }
.page-hero h1{ font-size:clamp(2.2rem, 4.6vw, 3.4rem); max-width:760px; margin-bottom:16px; }
.page-hero h1 .destaque{ color:var(--amarelo); }
.page-hero .subtitulo{ font-size:18px; color:#e6e9ee; max-width:620px; margin-bottom:30px; }
.page-hero-botoes{ display:flex; gap:14px; flex-wrap:wrap; }
.breadcrumb{ font-size:13px; color:var(--cinza-texto); margin-bottom:18px; }
.breadcrumb a{ color:var(--amarelo); }
.breadcrumb span{ margin:0 6px; }
@media (max-width: 640px){
    .page-hero{ min-height:auto; }
    .page-hero-overlay{ background:linear-gradient(180deg, rgba(8,12,18,.55) 0%, rgba(8,12,18,.9) 55%, rgba(8,12,18,.97) 100%); }
    .page-hero-conteudo{ padding:120px 24px 50px; }
}

/* Introdução com foto */
.intro{ padding:90px 0; background:var(--grafite); }
.intro-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.intro-texto h2{ font-size:clamp(1.8rem, 3.2vw, 2.4rem); margin-bottom:18px; }
.intro-texto p{ color:var(--cinza-texto); font-size:16px; margin-bottom:16px; }
.intro-texto .lista-diferenciais{ margin-top:24px; }
.intro-img img{ width:100%; max-height:520px; object-fit:cover; border-radius:var(--raio); border:1px solid var(--cinza-linha); }
@media (max-width: 900px){ .intro-grid{ grid-template-columns:1fr; gap:32px; } }

.cards-3{ grid-template-columns:repeat(3, 1fr); }
@media (max-width: 900px){ .cards-3{ grid-template-columns:1fr; } }

/* Galeria */
.galeria{ padding:90px 0; background:var(--grafite-2); border-top:1px solid var(--cinza-linha); }
.galeria-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.galeria-grid figure{ margin:0; aspect-ratio:4/3; overflow:hidden; border-radius:var(--raio); border:1px solid var(--cinza-linha); }
.galeria-grid img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.galeria-grid figure:hover img{ transform:scale(1.05); }
@media (max-width: 640px){ .galeria-grid{ grid-template-columns:1fr 1fr; } }

/* Fotos verticais de cesto (21/10/2026): o cesto fica no alto da foto, o recorte mira nele */
img[src*="cesto-aereo-poste"]{ object-position:center 22%; }
img[src*="cesto-aereo-munck-galpao"]{ object-position:center 55%; }

/* Passos */
.passos{ padding:90px 0; background:var(--grafite); }
.passos-lista{ list-style:none; display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-bottom:44px; counter-reset:none; }
.passos-lista li{ background:var(--grafite-2); border:1px solid var(--cinza-linha); border-radius:var(--raio); padding:28px 24px; }
.passo-num{ display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; border-radius:50%;
    background:var(--amarelo); color:var(--grafite); font-family:var(--fonte-display); font-weight:700; margin-bottom:14px; }
.passos-lista h3{ font-size:18px; margin-bottom:8px; }
.passos-lista p{ color:var(--cinza-texto); font-size:15px; }
@media (max-width: 900px){ .passos-lista{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .passos-lista{ grid-template-columns:1fr; } }

/* FAQ */
.faq{ padding:90px 0; background:var(--grafite-2); border-top:1px solid var(--cinza-linha); }
.faq-lista{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq details{ background:var(--grafite); border:1px solid var(--cinza-linha); border-radius:var(--raio); padding:0 22px; }
.faq summary{ cursor:pointer; list-style:none; padding:20px 0; font-family:var(--fonte-display); text-transform:uppercase;
    letter-spacing:.4px; font-size:16px; display:flex; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--amarelo); font-size:22px; line-height:1; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ color:var(--cinza-texto); padding:0 0 20px; }

/* Cidades */
.cidades{ padding:80px 0; background:var(--azul); }
.cidades .secao-titulo h2{ color:var(--branco); }
.cidades-lista{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:900px; margin:0 auto; }
.cidades-lista li{ border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:8px 16px; font-size:14.5px; color:#e6e9ee; }

/* Outros serviços */
.outros{ padding:90px 0; background:var(--grafite); }
.outros-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.outro-servico{ position:relative; display:block; aspect-ratio:4/3; overflow:hidden; border-radius:var(--raio);
    border:1px solid var(--cinza-linha); }
.outro-servico img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.outro-servico:hover img{ transform:scale(1.06); }
.outro-servico span{ position:absolute; left:0; right:0; bottom:0; padding:30px 14px 12px; font-family:var(--fonte-display);
    text-transform:uppercase; font-size:15px; background:linear-gradient(0deg, rgba(0,0,0,.88), transparent); }
@media (max-width: 900px){ .outros-grid{ grid-template-columns:1fr 1fr; } }

/* Rodapé */
.rodape{ background:var(--grafite); padding:60px 0 28px; border-top:1px solid var(--cinza-linha); text-align:left; }
.rodape-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:40px; margin-bottom:36px; }
.rodape .logo-rodape{ margin:0 0 16px; height:44px; }
.rodape p{ color:var(--cinza-texto); font-size:14px; }
.rodape h3{ font-size:16px; color:var(--amarelo); margin-bottom:14px; }
.rodape ul{ display:flex; flex-direction:column; gap:8px; }
.rodape li, .rodape li a{ color:var(--cinza-texto); font-size:14px; }
.rodape li a:hover{ color:var(--amarelo); }
.rodape-copy{ text-align:center; color:#6b7280 !important; font-size:13px !important; border-top:1px solid var(--cinza-linha); padding-top:22px; }
@media (max-width: 800px){ .rodape-grid{ grid-template-columns:1fr; gap:28px; } }

/* Celular (11/10/2026): barra fixa Ligar | WhatsApp e topo enxuto, para os botões aparecerem sem rolar */
.barra-contato{ display:none; }
@media (max-width: 768px){
    .barra-contato{ position:fixed; left:0; right:0; bottom:0; z-index:60; display:grid; grid-template-columns:1fr 1fr;
        gap:8px; padding:8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); background:rgba(20,23,28,.97);
        border-top:2px solid var(--amarelo); box-shadow:0 -6px 18px rgba(0,0,0,.35); }
    .barra-contato a{ display:flex; align-items:center; justify-content:center; gap:8px; min-height:50px;
        border-radius:var(--raio); font-family:var(--fonte-display); text-transform:uppercase; font-weight:700;
        letter-spacing:.5px; font-size:17px; }
    .barra-contato svg{ width:22px; height:22px; flex-shrink:0; }
    .barra-ligar{ background:var(--amarelo); color:var(--grafite); }
    .barra-wa{ background:#25D366; color:#fff; }
    body{ padding-bottom:calc(68px + env(safe-area-inset-bottom, 0px)); }
    .whatsapp-flutuante{ display:none; }
}
@media (max-width: 640px){
    .topbar{ padding:5px 0; font-size:12px; border-bottom-width:2px; }
    .topbar .container, .topbar-info{ gap:0; }
    .topbar .tb-rotulo, .topbar .tb-horas, .topbar .tb-contatos{ display:none; }
    .topbar .tb-area{ white-space:normal; }
    header.main-header{ padding:8px 0; }
    .logo img{ height:44px; }
    .page-hero-conteudo{ padding:28px 20px 30px; }
    .page-hero .breadcrumb, .page-hero .eyebrow{ display:none; }
    .page-hero h1{ font-size:1.9rem; margin-bottom:10px; }
    .page-hero .subtitulo{ font-size:16px; margin-bottom:18px; }
    .page-hero-botoes{ gap:10px; }
}