/*=====================================================================

RESET

=====================================================================*/

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

    scroll-padding-top:100px;

}

body{

    font-family:'Open Sans', sans-serif;

    background:#F8FAFB;

    color:#091421;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}

img{

    display:block;

    max-width:100%;

}

picture{

    display:block;

}

a{

    color:inherit;

    text-decoration:none;

}

button{

    border:none;

    background:none;

    cursor:pointer;

    font-family:inherit;

}

input,
textarea,
select{

    font-family:inherit;

}

ul{

    list-style:none;

}

section{

    position:relative;

}

iframe{

    border:none;

}

::selection{

    background:#0868C4;

    color:#fff;

}



/*=====================================================================

ROOT

=====================================================================*/

:root{

    --primary:#0868C4;

    --primary-dark:#0868C4;

    --primary-light:#1A6ED8;

    --secondary:#fff;

    --white:#FFFFFF;

    --background:#F8FAFB;

    --background-dark:#07131F;

    --text:#091421;

    --text-light:#5D6B79;

    --border:#E6EBF0;

    --radius:22px;

    --radius-small:14px;

    --container:1320px;

    --transition:.35s ease;

    --shadow:

        0 18px 45px

        rgba(15,32,55,.08);

    --shadow-large:

        0 35px 80px

        rgba(10,20,35,.12);

}



/*=====================================================================

CONTAINER

=====================================================================*/

.container{

    width:min(var(--container),92%);

    margin:auto;

}



/*=====================================================================

SPACING

=====================================================================*/

section{

    padding:130px 0;

}



/*=====================================================================

TYPOGRAPHY

=====================================================================*/

h1{

    font-size:clamp(60px,7vw,94px);

    line-height:1.02;

    font-weight:800;

}

h2{

    font-size:clamp(42px,5vw,66px);

    line-height:1.08;

    font-weight:800;

}

h3{

    font-size:30px;

    line-height:1.3;

}

p{

    font-size:18px;

    line-height:1.9;

    color:var(--text-light);

}



/*=====================================================================

SECTION TITLE

=====================================================================*/

.section-title{

    max-width:760px;

    margin-bottom:80px;

}

.section-title.center{

    margin-inline:auto;

    text-align:center;

}

.section-tag{

    display:inline-flex;

    align-items:center;

    gap:14px;

    margin-bottom:22px;

    font-size:13px;

    font-weight:700;

    letter-spacing:3px;

    color:var(--primary);

    text-transform:uppercase;

}

.section-tag::before{

    content:"";

    width:55px;

    height:2px;

    background:var(--primary);

}



/*=====================================================================

BUTTONS

=====================================================================*/

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    height:60px;

    padding:0 34px;

    border-radius:16px;

    background:var(--primary);

    color:#fff;

    font-weight:700;

    font-size:16px;

    transition:var(--transition);

    box-shadow:

    0 20px 45px
    

    rgba(143,190,231,.22);

}

.btn-primary:hover{

    transform:translateY(-6px);

    background:#0868C4;

}

.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    height:60px;

    padding:0 34px;

    border-radius:16px;

    border:1px solid rgba(255,255,255,.30);

    backdrop-filter:blur(20px);

    color:#fff;

    transition:var(--transition);

}

.btn-secondary:hover{

    background:#fff;

    color:#111;

}

.btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:55px;

    padding:0 30px;

    border:1px solid rgba(255,255,255,.25);

    border-radius:15px;

    color:#fff;

    transition:.35s;

}

.btn-outline:hover{

    background:#fff;

    color:var(--primary);

}



/*=====================================================================

LOADER

=====================================================================*/

.loader{

    position:fixed;

    inset:0;

    background:#07131F;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:999999;

}

.loader img{

    width:220px;

    animation:pulseLogo 2s infinite;

}



/*=====================================================================

HELPERS

=====================================================================*/

.grid-2{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:80px;

}

.grid-3{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

.grid-4{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.text-center{

    text-align:center;

}

.mb-30{

    margin-bottom:30px;

}

.mb-50{

    margin-bottom:50px;

}

.mb-80{

    margin-bottom:80px;

}



/*=====================================================================

BACKGROUND DECORATION

=====================================================================*/

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    opacity:.025;

    background-image:

        linear-gradient(rgba(0,74,153,.45) 1px, transparent 1px),

        linear-gradient(90deg, rgba(0,74,153,.45) 1px, transparent 1px);

    background-size:70px 70px;

    z-index:-3;

}

body::after{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    background:

        radial-gradient(circle at 15% 15%,

        rgba(0,74,153,.05),

        transparent 35%),

        radial-gradient(circle at 85% 70%,

        rgba(244,180,0,.05),

        transparent 40%);

    z-index:-2;

}



/*=====================================================================

CUSTOM SCROLLBAR

=====================================================================*/

::-webkit-scrollbar{

    width:11px;

}

::-webkit-scrollbar-track{

    background:#EEF2F7;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}



/*=====================================================================

ANIMATIONS

=====================================================================*/

@keyframes pulseLogo{

    0%{

        transform:scale(1);

        opacity:.85;

    }

    50%{

        transform:scale(1.06);

        opacity:1;

    }

    100%{

        transform:scale(1);

        opacity:.85;

    }

}
/*=====================================================================

HEADER

=====================================================================*/

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

    transition:.45s ease;

}

.header::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        180deg,
        rgba(6,15,28,.92),
        rgba(6,15,28,.35),
        transparent
    );

    z-index:-1;

    transition:.4s;

}

.header.scrolled{

    backdrop-filter:blur(18px);

}

.header.scrolled::before{

    background:rgba(7,19,31,.92);

    box-shadow:0 15px 45px rgba(0,0,0,.18);

}

.header .container{

    height:105px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    transition:.35s;

}

.header.scrolled .container{

    height:82px;

}

.logo{

    display:flex;

    align-items:center;

}

.logo img{
    height: 60px;
    width: auto;
    transition: .3s ease;
}

.header.scrolled .logo img{

    width:160px;

}

/*=====================================================================

NAVBAR

=====================================================================*/

.navbar{

    display:flex;

    align-items:center;

}

.navbar ul{

    display:flex;

    gap:42px;

}

.navbar a{

    position:relative;

    color:#fff;

    font-weight:600;

    letter-spacing:.4px;

    transition:.35s;

}

.navbar a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--secondary);

    transition:.35s;

}

.navbar a:hover{

    color:#fff;

}

.navbar a:hover::after{

    width:100%;

}

.header-buttons{

    display:flex;

    align-items:center;

    gap:18px;

}

.menu-mobile{

    display:none;

    width:54px;

    height:54px;

    border-radius:14px;

    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(12px);

}

.menu-mobile span{

    display:block;

    width:24px;

    height:2px;

    margin:5px auto;

    background:#fff;

    transition:.3s;

}

.menu-mobile.active span:nth-child(1){

    transform:translateY(7px) rotate(45deg);

}

.menu-mobile.active span:nth-child(2){

    opacity:0;

}

.menu-mobile.active span:nth-child(3){

    transform:translateY(-7px) rotate(-45deg);

}

/*=====================================================================

HERO

=====================================================================*/

.hero{
    position: relative;
    height: 100vh;
    min-height: 920px;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    padding-top: 170px;
    background: #07131F;
}

.hero video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    transform:scale(1.08);

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            90deg,
            rgba(5,16,30,.94) 0%,
            rgba(5,16,30,.82) 40%,
            rgba(5,16,30,.45) 70%,
            rgba(5,16,30,.18) 100%
        );

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at left center,

    rgba(0,74,153,.28),

    transparent 45%);

}

.hero-grid{

    position:relative;

    z-index:10;

    display:grid;

    grid-template-columns:1.2fr .8fr;

    align-items:center;

    gap:60px;

}

.hero-left{

    max-width:760px;

}



.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 22px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.12);

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(20px);

    color:#fff;

    font-size:13px;

    letter-spacing:2px;

    margin-bottom:28px;

}

.hero-badge::before{

    content:"";

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--secondary);

}

.hero h1{

    color:#fff;

    max-width:760px;

    margin-bottom:34px;

    font-weight:200;

    text-shadow:0 4px 12px rgba(0,0,0,.4);
    

}

.hero p{

    max-width:640px;

    color:rgba(255,255,255,.82);

    margin-bottom:45px;

    font-size:21px;

}

.hero-buttons{

    display:flex;

    gap:20px;

}

/*=====================================================================

30 ANOS

=====================================================================*/

.hero-right{

    position:relative;

    display:flex;

    justify-content:flex-end;

}

.experience{

    position:relative;

    text-align:right;

}

.experience span{

    display:block;

    font-size:230px;

    font-weight:800;

    color:rgba(255,255,255,.06);

    line-height:.8;

    user-select:none;

}

.experience small{

    display:block;

    margin-top:-20px;

    font-size:38px;

    font-weight:700;

    letter-spacing:12px;

    color:rgba(255,255,255,.22);

}

/*=====================================================================

SCROLL

=====================================================================*/

.scroll-down{

    position:absolute;

    left:50%;

    bottom:45px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:16px;

    color:#fff;

    font-size:12px;

    letter-spacing:3px;

    text-transform:uppercase;

    z-index:20;

}

.scroll-down::after{

    content:"";

    width:2px;

    height:52px;

    background:#fff;

    animation:scrollIndicator 2s infinite;

}

/*=====================================================================

HERO DETAILS

=====================================================================*/

.hero::after{

    content:"";

    position:absolute;

    right:-220px;

    bottom:-220px;

    width:700px;

    height:700px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(0,74,153,.22),

        transparent 70%

    );

    pointer-events:none;

}

.hero-grid>*{

    animation:heroFade 1s ease forwards;

}

.hero-left{

    animation-delay:.2s;

}

.hero-right{

    animation-delay:.6s;

}

@keyframes heroFade{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes scrollIndicator{

    0%{

        opacity:0;

        transform:translateY(0);

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:translateY(18px);

    }

}
/*=====================================================================

ABOUT

=====================================================================*/

.about{

    position:relative;

    overflow:hidden;

    background:#FFFFFF;

}

.about::before{

    content:"";

    position:absolute;

    top:-180px;

    right:-180px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(0,74,153,.05),
    transparent 72%);

}

.about::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.03;

    background-image:

        linear-gradient(rgba(0,74,153,.4) 1px,transparent 1px),

        linear-gradient(90deg,rgba(0,74,153,.4) 1px,transparent 1px);

    background-size:90px 90px;

}

.about .container{

    position:relative;

    z-index:2;

}

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;

}

.about-image{

    position:relative;

}

.about-image img{

    width:100%;

    height:450px;

    object-fit:cover;

    border-radius:28px;

    box-shadow:var(--shadow-large);

}

.about-image::before{

    content:"";

    position:absolute;

    left:-35px;

    bottom:-35px;

    width:220px;

    height:220px;

    border-radius:26px;

    border:2px solid rgba(0,74,153,.08);

}

.about-image::after{

    content:"";

    position:absolute;

    top:-35px;

    right:-35px;

    width:160px;

    height:160px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(244,180,0,.18),
    transparent 70%);

}

.about-content{

    position:relative;

}

.about-content h3{

    font-size:42px;

    margin-bottom:28px;

    color:var(--text);

}

.about-content p{

    margin-bottom:28px;

}

.about-list{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin-top:45px;

}

.about-list li{

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px;

    background:#fff;

    border:1px solid var(--border);

    border-radius:18px;

    transition:.35s;

    font-weight:600;

}

.about-list li:hover{

    transform:translateY(-6px);

    border-color:rgba(0,74,153,.18);

    box-shadow:var(--shadow);

}

/*=====================================================================

TIMELINE

=====================================================================*/

.experience-section{

    background:#07131F;

    color:#fff;

    overflow:hidden;

}

.experience-section .section-tag{

    color:var(--secondary);

}

.experience-section .section-tag::before{

    background:var(--secondary);

}

.experience-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at top right,

    rgba(0,74,153,.25),

    transparent 45%);

}

.experience-header{

    position:relative;

    z-index:2;

    margin-bottom:90px;

}

.experience-header h2{

    color:#fff;

    max-width:760px;

}

.timeline{

    position:relative;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:40px;

}

.timeline::before{

    content:"";

    position:absolute;

    left:0;

    top:42px;

    width:100%;

    height:2px;

    background:rgba(255,255,255,.08);

}

.timeline-item{

    position:relative;

    z-index:2;

}

.timeline-item span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:84px;

    height:84px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    font-weight:700;

    margin-bottom:35px;

    box-shadow:0 15px 40px rgba(0,74,153,.35);

}

.timeline-item h3{

    color:#fff;

    margin-bottom:20px;

}

.timeline-item p{

    color:rgba(255,255,255,.72);

}


/*=====================================================================

PRODUCTS

=====================================================================*/
/* =====================================================
   NOVO DESIGN DA SEÇÃO DE PRODUTOS
===================================================== */

.products-showcase{
    position:relative;
    overflow:hidden;
    padding:120px 0;
    background:#F4F7FA;
}

/* Detalhe suave no fundo */

.products-showcase::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;

    background:
        radial-gradient(
            circle at 10% 25%,
            rgba(0,74,153,.06),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 75%,
            rgba(242,184,75,.08),
            transparent 30%
        );
}

.products-showcase .container{
    position:relative;
    z-index:2;
}

/* Introdução */

.products-showcase .products-intro{
    max-width:820px;
    margin-bottom:100px;
}

.products-showcase .products-intro h2{
    color:#091421;
}

.products-showcase .products-intro p{
    color:#5D6B79;
}

/* Lista dos produtos */

.products-list-new{
    display:flex;
    flex-direction:column;
    gap:110px;
}

/* Cada categoria */

.product-feature{
    display:grid;
    grid-template-columns:
        minmax(0,1.05fr)
        minmax(360px,.95fr);

    align-items:center;

    gap:clamp(50px,8vw,120px);
}

/* Alterna a posição entre imagem e conteúdo */

.product-feature:nth-child(even)
.product-feature__image{
    order:2;
}

.product-feature:nth-child(even)
.product-feature__content{
    order:1;
    justify-self:end;
}

/* Imagem */

.product-feature__image{
    position:relative;
    width:100%;
    aspect-ratio:4 / 3;

    overflow:hidden;

    border-radius:24px;

    background:
        linear-gradient(
            180deg,
            #E9EEF3,
            #AAB2BA
        );

    box-shadow:
        0 30px 70px
        rgba(7,19,31,.14);
}

.product-feature__image::after{
    content:"";
    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(7,19,31,.12)
        );
}

.product-feature__image img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .8s ease,
        filter .8s ease;
}

/* Imagens de peças isoladas não devem ser cortadas */
.product-feature__image--contain{
    background:#EEF2F6;
}

.product-feature__image--contain img{
    object-fit:contain;
    padding:clamp(18px,2.5vw,38px);
}

.product-feature:hover
.product-feature__image img{
    transform:scale(1.045);
}

/* Informações */

.product-feature__content{
    position:relative;

    max-width:500px;

    padding-left:30px;

    text-align:left;
}

/* Linha azul vertical */

.product-feature__content::before{
    content:"";

    position:absolute;

    top:7px;
    left:0;

    width:3px;
    height:54px;

    border-radius:20px;

    background:#0B5DB5;
}

/* Número */

.product-feature__number{
    display:block;

    margin-bottom:4px;

    color:#fcfcfc;

    font-size:clamp(30px,3vw,44px);
    line-height:1;

    font-weight:300;
    letter-spacing:-.04em;
}

/* Título */

.products-showcase
.product-feature__content h3{
    margin-bottom:18px;

    color:#091421;

    font-size:clamp(25px,2.5vw,36px);
    line-height:1.2;

    font-weight:600;
    letter-spacing:-.025em;
}

/* Descrição */

.products-showcase
.product-feature__content p{
    margin-bottom:25px;

    color:#526273;

    font-size:17px;
    line-height:1.75;
}

/* Link */

.product-feature__link{
    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#ffffff;

    font-size:14px;
    font-weight:700;

    letter-spacing:.04em;
    text-transform:uppercase;

    transition:.3s ease;
}

.product-feature__link span{
    display:inline-block;

    transition:.3s ease;
}

.product-feature__link:hover{
    color:#004A99;
}

.product-feature__link:hover span{
    transform:translateX(7px);
}

/* =====================================================
   RESPONSIVO
===================================================== */

@media (max-width:900px){

    .products-showcase{
        padding:90px 0;
    }

    .products-showcase .products-intro{
        margin-bottom:70px;
    }

    .products-list-new{
        gap:80px;
    }

    .product-feature{
        grid-template-columns:1fr;
        gap:30px;
    }

    .product-feature__image,
    .product-feature__content{
        order:initial !important;
    }

    .product-feature__content,
    .product-feature:nth-child(even)
    .product-feature__content{
        justify-self:start;
        max-width:650px;
    }

    .product-feature__image{
        aspect-ratio:16 / 10;
    }

}

@media (max-width:600px){

    .products-showcase{
        padding:75px 0;
    }

    .products-list-new{
        gap:65px;
    }

    .product-feature{
        gap:25px;
    }

    .product-feature__image{
        aspect-ratio:4 / 3;
        border-radius:18px;
    }

    .product-feature__content{
        padding-left:22px;
    }

    .product-feature__content::before{
        width:2px;
        height:45px;
    }

    .products-showcase
    .product-feature__content p{
        font-size:16px;
        line-height:1.7;
    }

}
/* =============================================================
   CARROSSEL DE MARCAS COM LOGOS
   Cole este bloco no final do seu style.css
============================================================= */

.brands{
    position:relative;
    padding:110px 0;
    overflow:hidden;
    background:#F8FAFB;
}

.brands .container{
    position:relative;
    z-index:2;
}

.brands-marquee{
    position:relative;
    z-index:2;
    width:100%;
    margin-top:50px;
    overflow:hidden;
}

.brands-marquee::before,
.brands-marquee::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:110px;
    z-index:5;
    pointer-events:none;
}

.brands-marquee::before{
    left:0;
    background:linear-gradient(90deg,#F8FAFB,transparent);
}

.brands-marquee::after{
    right:0;
    background:linear-gradient(-90deg,#F8FAFB,transparent);
}

.brands-track{
    display:flex;
    align-items:center;
    width:max-content;
    animation:brandsInfiniteLoop 28s linear infinite;
    will-change:transform;
}

.brands-marquee:hover .brands-track{
    animation-play-state:paused;
}

.brands-group{
    display:flex;
    align-items:center;
    gap:32px;
    padding-right:32px;
    flex-shrink:0;
}

.brand-item{
    flex:0 0 230px;
    width:230px;
    height:120px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:22px;
    box-shadow:var(--shadow);
    transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}

.brand-item:hover{
    transform:translateY(-8px);
    border-color:rgba(0,74,153,.22);
    box-shadow:var(--shadow-large);
}

.brand-item img{
    display:block;
    width:auto;
    height:auto;
    max-width:170px;
    max-height:70px;
    object-fit:contain;
    filter:grayscale(100%);
    opacity:.72;
    transition:filter .35s ease,opacity .35s ease,transform .35s ease;
}

.brand-item:hover img{
    filter:grayscale(0);
    opacity:1;
    transform:scale(1.04);
}

/* Ajustes específicos para logos com proporções diferentes */
.brand-item[aria-label="Cummins"] img{
    max-width:76px;
    max-height:76px;
}

.brand-item[aria-label="Interstate-McBee"] img{
    max-width:190px;
    max-height:58px;
}

@keyframes brandsInfiniteLoop{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
}

@media (max-width:768px){
    .brands{ padding:85px 0; }
    .brands-marquee{ margin-top:35px; }
    .brands-group{ gap:20px; padding-right:20px; }
    .brand-item{
        flex-basis:185px;
        width:185px;
        height:100px;
        padding:18px;
        border-radius:18px;
    }
    .brand-item img{
        max-width:135px;
        max-height:55px;
    }
    .brands-track{ animation-duration:22s; }
    .brands-marquee::before,
    .brands-marquee::after{ width:45px; }
}
/*=====================================================================

SERVICES

=====================================================================*/

.services{

    position:relative;

    background:#07131F;

    overflow:hidden;

}

.services::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at left top,

    rgba(0,74,153,.28),

    transparent 45%);

}

.services .container{

    position:relative;

    z-index:2;

}

.services .section-title h2{

    color:#fff;

}

.services .section-title p{

    color:rgba(255,255,255,.72);

}

.services .section-tag{

    color:var(--secondary);

}

.services .section-tag::before{

    background:var(--secondary);

}

.services-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

.service-card{

    position:relative;

    overflow:hidden;

    padding:45px;

    border-radius:28px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(14px);

    transition:.4s;

}

.service-card:hover{

    transform:translateY(-12px);

    background:rgba(255,255,255,.08);

    border-color:rgba(255,255,255,.16);

}

.service-card span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:70px;

    height:70px;

    border-radius:50%;

    background:rgba(255, 255, 255, 0.08);

    color:var(--secondary);

    font-size:22px;

    font-weight:800;

    margin-bottom:28px;

}

.service-card h3{

    color:#fff;

    margin-bottom:18px;

}

.service-card p{

    color:rgba(255,255,255,.70);

}



/*=====================================================================

ADVANTAGES

=====================================================================*/

.advantages{

    background:#fff;

}

.advantages .container{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:80px;

}

.advantages-left{

    position:sticky;

    top:140px;

    align-self:start;

}

.advantages-right{

    display:flex;

    flex-direction:column;

    gap:28px;

}

.advantage{

    display:flex;

    gap:30px;

    padding:35px;

    border-radius:24px;

    background:#fff;

    border:1px solid var(--border);

    transition:.35s;

    box-shadow:var(--shadow);

}

.advantage:hover{

    transform:translateX(10px);

    box-shadow:var(--shadow-large);

}

.advantage>span{

    font-size:54px;

    font-weight:800;

    color:#D8E6F6;

    min-width:80px;

}

.advantage h3{

    margin-bottom:14px;

}

.advantage p{

    margin:0;

}



/*=====================================================================

GALLERY

=====================================================================*/

.gallery{

    background:#F5F7FA;

}

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:22px;

}

.gallery-grid img{

    width:100%;

    height:320px;

    object-fit:cover;

    border-radius:24px;

    transition:.6s;

    cursor:pointer;

    box-shadow:var(--shadow);

}

.gallery-grid img:hover{

    transform:scale(1.04);

    box-shadow:var(--shadow-large);

}



/*=====================================================================

CTA

=====================================================================*/

.cta{

    position:relative;

    overflow:hidden;

    background:

    linear-gradient(135deg,

    var(--primary),

    var(--primary-dark));

    color:#fff;

}

.cta::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at right top,

    rgba(255,255,255,.15),

    transparent 45%);

}

.cta .container{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1fr auto;

    align-items:center;

    gap:60px;

}

.cta span{

    display:block;

    margin-bottom:18px;

    letter-spacing:3px;

    font-size:13px;

    text-transform:uppercase;

    opacity:.8;

}

.cta h2{

    color:#fff;

    margin-bottom:25px;

}

.cta p{

    color:rgba(255,255,255,.82);

    max-width:620px;

}

.cta .btn-primary{

    background:#fff;

    color:var(--primary);

    min-width:240px;

}

.cta .btn-primary:hover{

    background:var(--secondary);

    color:#07131F;

}



/*=====================================================================

ANIMATIONS

=====================================================================*/

@keyframes brandsSlider{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}
/*=====================================================================

CONTACT

=====================================================================*/

.contact{

    position:relative;

    overflow:hidden;

    background:#FFFFFF;

}

.contact::before{

    content:"";

    position:absolute;

    top:-250px;

    left:-250px;

    width:700px;

    height:700px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(0,74,153,.05),
    transparent 70%);

}

.contact .container{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:520px 1fr;

    gap:90px;

    align-items:start;

}

.contact-left h2{

    margin-bottom:30px;

}

.contact-left p{

    margin-bottom:45px;

}

.contact-information{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.contact-information article{

    background:#fff;

    padding:28px;

    border-radius:22px;

    border:1px solid var(--border);

    transition:.35s;

    box-shadow:var(--shadow);

}

.contact-information article:hover{

    transform:translateX(8px);

    box-shadow:var(--shadow-large);

}

.contact-information small{

    display:block;

    margin-bottom:10px;

    color:var(--primary);

    font-size:13px;

    letter-spacing:2px;

    font-weight:700;

}

.contact-information h4{

    font-size:22px;

    color:var(--text);

    line-height:1.5;

}

/*=====================================================================

FORM

=====================================================================*/

.contact-right form{

    background:#fff;

    padding:50px;

    border-radius:28px;

    box-shadow:var(--shadow-large);

    border:1px solid var(--border);

}

.form-group{

    margin-bottom:22px;

}

.contact input,

.contact textarea{

    width:100%;

    padding:18px 22px;

    border-radius:16px;

    border:1px solid var(--border);

    background:#F8FAFB;

    transition:.35s;

    font-size:16px;

}

.contact textarea{

    min-height:190px;

    resize:vertical;

}

.contact input:focus,

.contact textarea:focus{

    outline:none;

    border-color:var(--primary);

    background:#fff;

    box-shadow:

    0 0 0 5px rgba(0,74,153,.08);

}

.contact button{

    width:100%;

}

/*=====================================================================

MAP

=====================================================================*/

.map{

    padding:0;

}

.map iframe{

    width:100%;

    height:520px;

    filter:grayscale(.2);

}

/*=====================================================================

FOOTER

=====================================================================*/

footer{

    background:#07131F;

    color:#fff;

    position:relative;

    overflow:hidden;

    padding:110px 0 35px;

}

footer::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:.05;

    background-image:

    linear-gradient(rgba(255,255,255,.4) 1px,transparent 1px),

    linear-gradient(90deg,rgba(255,255,255,.4) 1px,transparent 1px);

    background-size:90px 90px;

}

.footer-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:60px;

    margin-bottom:70px;

}

.footer-grid img{

    width:190px;

    margin-bottom:30px;

}

.footer-grid h3{

    margin-bottom:24px;

    font-size:22px;

}

.footer-grid p,

.footer-grid li{

    color:rgba(255,255,255,.70);

    line-height:2;

}

.footer-grid a{

    transition:.35s;

}

.footer-grid a:hover{

    color:#fff;

    padding-left:8px;

}

.footer-bottom{

    position:relative;

    z-index:2;

    border-top:1px solid rgba(255,255,255,.08);

    padding-top:30px;

    text-align:center;

}

.footer-bottom p{

    color:rgba(255,255,255,.55);

}

/*=====================================================================

WHATSAPP

=====================================================================*/

.whatsapp-btn{

    position:fixed;

    right:30px;

    bottom:30px;

    width:68px;

    height:68px;

    border-radius:50%;

    background:#25D366;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

    box-shadow:

    0 18px 45px rgba(37,211,102,.35);

    transition:.35s;

    z-index:999;

}

.whatsapp-btn:hover{

    transform:translateY(-6px) scale(1.08);

}

/*=====================================================================

BACK TOP

=====================================================================*/

.back-top{

    position:fixed;

    right:30px;

    bottom:120px;

    width:58px;

    height:58px;

    border-radius:50%;

    background:#07131F;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    box-shadow:var(--shadow-large);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:998;

}

.back-top.show{

    opacity:1;

    visibility:visible;

}

.back-top:hover{

    background:var(--primary);

    transform:translateY(-5px);

}

/*=====================================================================

BLUEPRINT DETAILS

=====================================================================*/

.about::after,
.products::after,
.gallery::after{

    content:"Ø450   R25   M16   X120";

    position:absolute;

    right:60px;

    bottom:50px;

    font-size:12px;

    letter-spacing:4px;

    color:rgba(0,74,153,.08);

    font-weight:700;

    user-select:none;

    pointer-events:none;

}

/*=====================================================================

MICRO INTERACTIONS

=====================================================================*/

img{

    transition:.45s ease;

}

a{

    transition:.3s ease;

}

button{

    transition:.3s ease;

}

::placeholder{

    color:#9AA7B5;

}

:focus-visible{

    outline:3px solid rgba(0,74,153,.25);

    outline-offset:4px;

}
/*=====================================================================

ANIMATIONS

=====================================================================*/

.fade-up{

    opacity:0;

    transform:translateY(60px);

    transition:
        opacity .9s ease,
        transform .9s ease;

}

.fade-left{

    opacity:0;

    transform:translateX(-60px);

    transition:
        opacity .9s ease,
        transform .9s ease;

}

.fade-right{

    opacity:0;

    transform:translateX(60px);

    transition:
        opacity .9s ease,
        transform .9s ease;

}

.zoom{

    opacity:0;

    transform:scale(.9);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.show{

    opacity:1 !important;

    transform:none !important;

}

/*=====================================================================

HOVER EFFECTS

=====================================================================*/

.product-card,
.service-card,
.number-card,
.advantage,
.contact-information article{

    will-change:transform;

}

.product-card:hover{

    rotate:0deg;

}

.service-card:hover{

    box-shadow:
    0 25px 70px rgba(0,0,0,.18);

}

.gallery img:hover{

    filter:brightness(1.05);

}

.brand-item{

    cursor:pointer;

}

.brand-item:hover{

    border-color:rgba(0,74,153,.2);

}

/*=====================================================================

GLOBAL TRANSITIONS

=====================================================================*/

section{

    transition:.5s ease;

}

h1,
h2,
h3,
p,
a,
button{

    transition:.3s ease;

}

/*=====================================================================

FORM STATES

=====================================================================*/

input:invalid{

    box-shadow:none;

}

input:focus,

textarea:focus{

    transform:translateY(-2px);

}

button:active{

    transform:scale(.98);

}

/*=====================================================================

IMAGE EFFECTS

=====================================================================*/

img{

    backface-visibility:hidden;

}

.about-image{

    overflow:hidden;

    border-radius:28px;

}

.about-image img:hover{

    transform:scale(1.04);

}

.product-image{

    background:#ECEFF3;

}

.gallery-grid{

    overflow:hidden;

}

/*=====================================================================

SMOOTH APPEARANCE

=====================================================================*/

.hero,
.about,
.products,
.services,
.gallery,
.contact{

    isolation:isolate;

}

/*=====================================================================

DECORATIVE LINES

=====================================================================*/

.hero::before,
.about::before,
.services::before,
.contact::before{

    pointer-events:none;

}

.hero::after,
.about::after,
.services::after,
.products::after{

    pointer-events:none;

}

/*=====================================================================

UTILITY CLASSES

=====================================================================*/

.w-100{

    width:100%;

}

.text-white{

    color:#fff;

}

.bg-dark{

    background:#07131F;

}

.bg-light{

    background:#F8FAFB;

}

.d-flex{

    display:flex;

}

.align-center{

    align-items:center;

}

.justify-between{

    justify-content:space-between;

}

.justify-center{

    justify-content:center;

}

.flex-column{

    flex-direction:column;

}

.gap-10{

    gap:10px;

}

.gap-20{

    gap:20px;

}

.gap-30{

    gap:30px;

}

.radius{

    border-radius:var(--radius);

}

.shadow{

    box-shadow:var(--shadow);

}

/*=====================================================================

RESPONSIVE

=====================================================================*/

@media (max-width:1200px){

    .hero-grid,
    .about-grid,
    .contact .container,
    .advantages .container{

        grid-template-columns:1fr;

        gap:60px;

    }

    .products-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .services-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .gallery-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .footer-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:992px){

    .navbar{

        display:none;

        position:fixed;

        top:0;

        left:0;

        width:100%;

        height:100vh;

        background:rgba(7,19,31,.97);

        backdrop-filter:blur(20px);

        flex-direction:column;

        justify-content:center;

        align-items:center;

        z-index:9998;

    }

    .navbar.active{

        display:flex;

    }

    .navbar ul{

        flex-direction:column;

        gap:32px;

        text-align:center;

    }

    .navbar a{

        font-size:22px;

    }

    body.menu-open{

        overflow:hidden;

    }

    .header-buttons{

        display:none;

    }

    .menu-mobile{

        display:block;

    }

    .hero{

        min-height:auto;

        padding:180px 0 120px;

    }

    .hero-grid{

        text-align:center;

    }

    .hero-buttons{

        justify-content:center;

        flex-wrap:wrap;

    }

    .experience{

        display:none;

    }

    .timeline{

        grid-template-columns:1fr;

    }

    .timeline::before{

        display:none;

    }

    .numbers .container{

        grid-template-columns:repeat(2,1fr);

    }

    .services-grid{

        grid-template-columns:1fr;

    }

}

@media (max-width:768px){

    section{

        padding:90px 0;

    }

    h1{

        font-size:48px;

    }

    h2{

        font-size:36px;

    }

    .products-grid,

    .gallery-grid,

    .numbers .container,

    .footer-grid{

        grid-template-columns:1fr;

    }

    .about-list{

        grid-template-columns:1fr;

    }

    .contact-right form{

        padding:35px;

    }

    .whatsapp-btn{

        width:60px;

        height:60px;

    }

}

@media (max-width:480px){

    .container{

        width:94%;

    }

    h1{

        font-size:40px;

    }

    h2{

        font-size:30px;

    }

    .btn-primary,

    .btn-secondary{

        width:100%;

    }

    .hero-buttons{

        flex-direction:column;

    }

}

/*=====================================================================

END OF FILE

=====================================================================*/
/*=====================================================================
DIFERENCIAIS
=====================================================================*/
.differentials{
    padding:80px 0;
    background:#F8FAFB;
}

.differentials-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.differential-card{
    background:#fff;
    padding:40px 30px;
    border-radius:16px;
    border:1px solid var(--border);
    text-align:center;
    transition:.3s;
}

.differential-card:hover{
    box-shadow:var(--shadow-large);
    transform:translateY(-8px);
}

.differential-icon{
    width:60px;
    height:60px;
    background:var(--primary);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 20px;
    font-weight:700;
    color:#fff;
    font-size:24px;
}

.differential-card h3{
    font-size:18px;
    margin-bottom:15px;
    font-weight:700;
    color:#1a1a1a;
}

.differential-card p{
    font-size:14px;
    color:#666;
    line-height:1.6;
}

@media(max-width:1024px){
    .differentials-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){
    .differentials{
        padding:60px 0;
    }
    
    .differentials-grid{
        grid-template-columns:1fr;
        gap:20px;
    }
    
    .differential-card{
        padding:30px 20px;
    }
}

/*=====================================================================
INTEGRAÇÃO VISUAL — SITE MAG(3)
Mantém a estrutura do primeiro projeto e incorpora os elementos visuais
mais delicados do segundo: grid técnico, tipografia leve e indicadores.
=====================================================================*/

.hero{
    min-height:100svh;
    padding-bottom:118px;
}

.hero::before{
    background-image:
        linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
    background-size:72px 72px;
    opacity:.55;
}

.hero-overlay{
    background:
        linear-gradient(90deg,rgba(4,15,27,.92) 0%,rgba(4,15,27,.68) 48%,rgba(4,15,27,.38) 100%),
        linear-gradient(180deg,rgba(4,15,27,.15),rgba(4,15,27,.54));
}

.hero-left{
    max-width:800px;
}

.hero h1{
    max-width:760px;
    font-size:clamp(3rem,5vw,5.15rem);
    line-height:1.04;
    font-weight:100;
    letter-spacing:-.045em;
    text-wrap:balance;
}

.hero p{
    max-width:650px;
    font-size:clamp(1rem,1.25vw,1.18rem);
    line-height:1.75;
    color:rgba(255,255,255,.78);
}

.hero-badge{
    font-weight:600;
    letter-spacing:.16em;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.14);
    backdrop-filter:blur(14px);
}

.hero-metrics{
    position:absolute;
    z-index:8;
    left:0;
    right:0;
    bottom:0;
    min-height:104px;
    display:grid;
    grid-template-columns:repeat(3,1fr);

    background:transparent;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;

    border-top:1px solid rgba(255,255,255,.13);
}

.hero-metrics > div{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    padding:24px 36px;
   border-right:none;
}

.hero-metrics > div:last-child{border-right:0;}

.hero-metrics strong{
    color:#fff;
    font-size:clamp(1.2rem,2vw,2rem);
    font-weight:500;
    letter-spacing:-.03em;
}

.hero-metrics span{
    max-width:150px;
    color:rgba(255,255,255,.66);
    font-size:.8rem;
    line-height:1.35;
    text-transform:uppercase;
    letter-spacing:.1em;
}

.hero .scroll-down{bottom:128px;}

.header .logo img{
    width:auto;
    max-height:48px;
    object-fit:contain;
}

@media (max-width:900px){
    .hero{padding-bottom:176px;}
    .hero-right{display:none;}
    .hero-grid{grid-template-columns:1fr;}
    .hero-metrics{grid-template-columns:1fr 1fr 1fr;min-height:0;}
    .hero-metrics > div{padding:18px 10px;display:block;text-align:center;}
    .hero-metrics strong{display:block;margin-bottom:5px;}
    .hero-metrics span{display:block;margin:auto;font-size:.65rem;}
    .hero .scroll-down{display:none;}
}

@media (max-width:600px){
    .hero{padding-bottom:225px;}
    .hero h1{font-size:clamp(2.45rem,12vw,3.35rem);line-height:1.03;}
    .hero p{font-size:.98rem;line-height:1.65;}
    .hero-buttons{align-items:stretch;}
    .hero-buttons a{text-align:center;}
    .hero-metrics{grid-template-columns:1fr;}
    .hero-metrics > div{display:flex;justify-content:flex-start;text-align:left;padding:12px 7%;border-right:0;border-bottom:1px solid rgba(255,255,255,.1);}
    .hero-metrics strong{min-width:105px;margin:0;}
    .hero-metrics span{margin:0;max-width:none;}
}
/* =====================================================
   CORREÇÃO FINAL DE ALINHAMENTO
===================================================== */

/* Logo e título seguem o mesmo container */
.header .logo,
.hero-left{
    margin-left:0;
}

/* Bloco do texto principal */
.hero-left{
    max-width:800px;
}

/* Tamanho correto da logo */
.header .logo img{
    height:60px;
    width:auto;
    max-height:none;
    object-fit:contain;
}

/* Logo ao rolar a página */
.header.scrolled .logo img{
    height:52px;
    width:auto;
}

/* Alinha o primeiro indicador com a logo e o título */
.hero-metrics > div:first-child{
    justify-content:flex-start;
    text-align:left;
    padding-left:max(
        4vw,
        calc((100vw - var(--container)) / 2)
    );
}

@media (max-width:900px){

    .hero-metrics > div:first-child{
        padding-left:4vw;
    }

}

@media (max-width:480px){

    .hero-metrics > div:first-child{
        padding-left:3vw;
    }

}
/*=====================================================================
LIDERANÇA / CEO
=====================================================================*/

.leadership{
    position:relative;
    padding:140px 0;
    overflow:hidden;
    background:#FFFFFF;
}

.leadership::before{
    content:"";
    position:absolute;
    width:620px;
    height:620px;
    left:-280px;
    bottom:-300px;
    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(0,74,153,.09),
            transparent 68%
        );

    pointer-events:none;
}

.leadership-card{
    position:relative;

    display:grid;
    grid-template-columns:minmax(360px,.9fr) 1.1fr;

    min-height:650px;

    overflow:hidden;

    border-radius:36px;

    background:#07131F;

    box-shadow:
        0 45px 100px
        rgba(7,19,31,.18);
}

/* Foto */

.leadership-photo{
    position:relative;
    min-height:650px;
    overflow:hidden;
    background:#DDE4EB;
}

.leadership-photo::after{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(5,16,28,.58)
        );

    pointer-events:none;
}

.leadership-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;

    transition:transform 1s ease;
}

.leadership-card:hover .leadership-photo img{
    transform:scale(1.035);
}

.leadership-photo__label{
    position:absolute;
    left:32px;
    bottom:30px;
    z-index:3;

    padding:11px 18px;

    border-radius:50px;

    color:#fff;

    font-size:11px;
    font-weight:700;

    letter-spacing:.16em;
    text-transform:uppercase;

    background:rgba(7,19,31,.56);
    border:1px solid rgba(255,255,255,.20);

    backdrop-filter:blur(15px);
}

/* Conteúdo */

.leadership-content{
    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:clamp(55px,7vw,105px);
}

.leadership-content::before{
    content:"";
    position:absolute;
    top:0;
    right:0;

    width:280px;
    height:280px;

    background:
        radial-gradient(
            circle at top right,
            rgba(0,100,205,.24),
            transparent 70%
        );

    pointer-events:none;
}

.leadership .section-tag{
    color:#71B6F7;
}

.leadership .section-tag::before{
    background:#2B8FEA;
}

.leadership-quote{
    position:absolute;
    right:55px;
    top:45px;

    color:rgba(255,255,255,.045);

    font-family:Georgia,serif;
    font-size:190px;
    line-height:1;

    pointer-events:none;
}

.leadership-content h2{
    position:relative;

    max-width:720px;
    margin-bottom:32px;

    color:#fff;

    font-size:clamp(38px,4.5vw,62px);
    line-height:1.08;

    font-weight:400;
    letter-spacing:-.045em;
}

.leadership-content p{
    position:relative;

    max-width:680px;
    margin-bottom:22px;

    color:rgba(255,255,255,.70);

    font-size:17px;
    line-height:1.8;
}

/* Nome e cargo */

.leadership-person{
    position:relative;

    display:flex;
    align-items:center;
    gap:20px;

    margin-top:24px;
}

.leadership-person__line{
    display:block;

    width:55px;
    height:2px;

    background:#248BE7;
}

.leadership-person strong{
    display:block;
    margin-bottom:6px;

    color:#fff;

    font-size:17px;
    font-weight:600;
}

.leadership-person small{
    display:block;

    color:rgba(255,255,255,.48);

    font-size:12px;
    line-height:1.5;

    letter-spacing:.08em;
    text-transform:uppercase;
}

/* Responsivo */

@media (max-width:950px){

    .leadership-card{
        grid-template-columns:1fr;
    }

    .leadership-photo{
        min-height:580px;
    }

    .leadership-content{
        padding:70px 8%;
    }

}

@media (max-width:600px){

    .leadership{
        padding:85px 0;
    }

    .leadership-card{
        border-radius:25px;
    }

    .leadership-photo{
        min-height:430px;
    }

    .leadership-content{
        padding:55px 7%;
    }

    .leadership-quote{
        right:20px;
        top:35px;
        font-size:130px;
    }

}
/* =====================================================
   TÍTULOS EM CAIXA ALTA
===================================================== */

h1,
h2,
h3,
h4,
.section-tag,
.navbar a,
.btn-primary,
.btn-secondary,
.btn-outline,
button,
.product-feature__link,
.number-card__category{
    text-transform:uppercase;
}

/* =====================================================
   SUBTÍTULOS E TEXTOS EM FORMATO NORMAL
===================================================== */

p,
li,
label,
small,
input,
textarea,
select,
.hero p,
.section-title p,
.differential-card p,
.about-content p,
.timeline-item p,
.product-content p,
.product-feature__content p,
.service-card p,
.advantage p,
.numbers-showcase__intro p,
.number-card p,
.leadership-content p,
.contact-left p,
.contact-information h4,
.cta p,
.footer-grid p,
.footer-grid li{
    text-transform:none;
}

/* Aparência mais natural dos textos explicativos */

p,
.differential-card p,
.hero p,
.section-title p,
.about-content p,
.product-feature__content p,
.service-card p,
.leadership-content p{
    font-weight:400;
    letter-spacing:normal;
}
/* Diminui os títulos da linha do tempo */
.timeline-item h3{
    font-size:20px;
    line-height:1.25;
    margin-bottom:16px;
}
/* =====================================================
   TÍTULO DA SEÇÃO DE PARCEIROS MAIS LARGO
===================================================== */

.brands .section-title{
    max-width:1200px;
    width:92%;
    margin-left:auto;
    margin-right:auto;
}

.brands .section-title h2{
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;

    letter-spacing:-0.02em;
    line-height:1.08;
    text-wrap:balance;
}
/* Espaço entre o título e o texto da seção Quem Somos */
.about .section-title h2{
    margin-bottom:38px;
}

.about .section-title p{
    margin-top:0;
}
.about-content h3{
    color:var(--text);

    font-family:'Open Sans', sans-serif;
    font-size:clamp(36px, 3.4vw, 52px);
    line-height:1.08;
    font-weight:800;

    letter-spacing:-0.025em;
    text-transform:uppercase;

    margin-bottom:32px;
}
/*=====================================================================
LOCALIZAÇÃO
=====================================================================*/

.map-location{
    position:relative;
    padding:0;
    min-height:620px;
    overflow:hidden;
    background:#07131F;
}

.map-location iframe{
    display:block;
    width:100%;
    height:620px;
    border:0;
}

/* Cartão sobre o mapa */

.map-location__card{
    position:absolute;
    z-index:5;
    top:50%;
    left:max(4%, calc((100vw - var(--container)) / 2));
    transform:translateY(-50%);

    width:min(390px, calc(100% - 40px));
    padding:38px;

    color:#fff;
    background:rgba(7,19,31,.94);

    border:1px solid rgba(255,255,255,.14);
    border-radius:6px;

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.28);

    backdrop-filter:blur(18px);
}

.map-location__tag{
    display:block;
    margin-bottom:18px;

    color:#65B4FF;

    font-size:12px;
    font-weight:700;
    letter-spacing:.2em;
    text-transform:uppercase;
}

.map-location__card h2{
    margin-bottom:22px;

    color:#fff;

    font-family:'Open Sans',sans-serif;
    font-size:clamp(30px,3vw,43px);
    line-height:1.08;
    font-weight:800;

    letter-spacing:-.035em;
    text-transform:uppercase;
}

.map-location__card p{
    margin-bottom:28px;

    color:rgba(255,255,255,.72);

    font-size:16px;
    line-height:1.75;
    text-transform:none;
}

/* Botão do mapa */

.map-location__button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    min-height:52px;
    padding:0 22px;

    color:#fff;
    background:var(--primary);

    border-radius:6px;

    font-size:13px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;

    transition:
        background .3s ease,
        transform .3s ease;
}

.map-location__button:hover{
    padding-left:22px;
    background:var(--primary-light);
    transform:translateY(-3px);
}

/*=====================================================================
RODAPÉ — FRASE COMO TÍTULO E LOGO ABAIXO
=====================================================================*/

.footer-brand{
    max-width:540px;
}

.footer-brand__title{
    max-width:520px;
    margin:0 0 35px;

    color:#fff;

    font-family:'Open Sans',sans-serif;
    font-size:clamp(30px,3.1vw,48px);
    line-height:1.08;
    font-weight:800;

    letter-spacing:-.035em;
    text-transform:uppercase;
}

.footer-grid .footer-brand__logo{
    width:190px;
    height:auto;
    margin:0;

    object-fit:contain;
}

.footer-address{
    display:inline-block;
    line-height:1.7;
    text-transform:none;
}

.footer-grid .footer-address:hover{
    padding-left:0;
    color:#fff;
}

/*=====================================================================
RESPONSIVO
=====================================================================*/

@media (max-width:768px){

    .map-location{
        display:flex;
        flex-direction:column;
        min-height:auto;
    }

    .map-location iframe{
        height:440px;
    }

    .map-location__card{
        position:relative;
        top:auto;
        left:auto;
        transform:none;

        width:100%;
        padding:38px 7%;

        border:0;
        border-radius:0;
        box-shadow:none;
    }

    .footer-brand__title{
        font-size:clamp(30px,9vw,42px);
    }

}
/* Ajuste do título principal do rodapé */
.footer-brand__title{
    max-width:420px;
    margin:0 0 35px;

    font-size:22px;
    line-height:1.4;
    font-weight:700;
    letter-spacing:0;

    color:#fff;
    text-transform:uppercase;
}
@media (max-width:768px){

    .footer-brand__title{
        max-width:100%;
        font-size:20px;
        line-height:1.4;
    }

}
/* =====================================================
   AJUSTE DE TAMANHO — SEÇÃO DIFERENCIAIS
===================================================== */

/* Título: TRÊS DÉCADAS CONSTRUINDO CONFIANÇA */

.advantages-left h2{
    font-size:55px;
    line-height:1.12;
    letter-spacing:-0.02em;
    max-width:430px;
}

/* Subtítulos dos cartões */

.advantage h3{
    font-size:22px;
    line-height:1.25;
    margin-bottom:12px;
}

/* Textos explicativos */

.advantage p{
    font-size:16px;
    line-height:1.65;
}

/* Números 01, 02, 03 e 04 */

.advantage > span{
    font-size:42px;
    min-width:70px;
}

/* Ajuste para celular */

@media (max-width:768px){

    .advantages-left h2{
        font-size:34px;
        max-width:100%;
    }

    .advantage h3{
        font-size:20px;
    }

    .advantage > span{
        font-size:36px;
        min-width:55px;
    }

}

/*=====================================================================
AVALIAÇÕES DO GOOGLE
=====================================================================*/

.google-reviews{
    position:relative;
    padding:130px 0;
    overflow:hidden;
    background:#F4F7FA;
}

.google-reviews::before{
    content:"";
    position:absolute;
    inset:0;

    opacity:.04;

    background-image:
        linear-gradient(
            rgba(0,74,153,.45) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0,74,153,.45) 1px,
            transparent 1px
        );

    background-size:80px 80px;
    pointer-events:none;
}

.google-reviews::after{
    content:"";
    position:absolute;

    width:650px;
    height:650px;

    top:-350px;
    right:-280px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(0,92,185,.12),
            transparent 70%
        );

    pointer-events:none;
}

.google-reviews .container{
    position:relative;
    z-index:2;
}

/* Cabeçalho */

.google-reviews__header{
    max-width:900px;
    margin:0 auto 75px;
    text-align:center;
}

.google-reviews__header .section-tag{
    justify-content:center;
}

.google-reviews__header h2{
    margin-bottom:22px;

    color:#091421;

    font-family:'Open Sans',sans-serif;
    font-size:clamp(38px,5vw,64px);
    line-height:1.08;
    font-weight:800;

    letter-spacing:-.035em;
    text-transform:uppercase;
}

.google-reviews__header > p{
    max-width:650px;
    margin:0 auto 27px;

    color:#617083;

    font-size:17px;
    line-height:1.75;
    text-transform:none;
}

/* Resumo da nota */

.google-rating{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;

    gap:12px;

    padding:15px 22px;

    background:#fff;

    border:1px solid #DEE5EC;
    border-radius:6px;

    box-shadow:
        0 15px 40px
        rgba(15,32,55,.08);
}

.google-rating strong{
    color:#091421;
    font-size:27px;
    font-weight:700;
}

.google-rating__stars{
    color:#F4B400;

    font-size:20px;
    line-height:1;

    letter-spacing:2px;
}

.google-rating span{
    color:#667587;

    font-size:14px;
    text-transform:none;
}

.google-rating > i{
    color:#4285F4;
    font-size:21px;
}

/* Carrossel */

.reviews-carousel{
    position:relative;
    display:flex;
    align-items:center;
    gap:18px;
}

.reviews-carousel__viewport{
    width:100%;
    overflow:hidden;
}

.reviews-carousel__track{
    display:flex;
    align-items:stretch;
    gap:25px;

    overflow-x:auto;
    scroll-behavior:smooth;
    scroll-snap-type:x mandatory;

    padding:15px 3px 35px;

    scrollbar-width:none;
}

.reviews-carousel__track::-webkit-scrollbar{
    display:none;
}

/* Cartão */

.google-review-card{
    position:relative;

    flex:0 0
        calc(
            (100% - 50px) / 3
        );

    min-width:0;
    min-height:310px;

    display:flex;
    flex-direction:column;

    padding:30px;

    overflow:hidden;

    background:#FFFFFF;

    border:1px solid #DDE5EC;
    border-radius:6px;

    box-shadow:
        0 22px 55px
        rgba(15,32,55,.10);

    scroll-snap-align:start;

    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;
}

.google-review-card::before{
    content:"“";

    position:absolute;
    right:18px;
    bottom:-25px;

    color:rgba(0,74,153,.055);

    font-family:Georgia,serif;
    font-size:150px;
    line-height:1;

    pointer-events:none;
}

.google-review-card::after{
    content:"";

    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:4px;

    background:
        linear-gradient(
            90deg,
            #004A99,
            #3199EE
        );

    transform:scaleX(.25);
    transform-origin:left;

    transition:transform .4s ease;
}

.google-review-card:hover{
    transform:translateY(-9px);

    border-color:rgba(0,74,153,.25);

    box-shadow:
        0 35px 75px
        rgba(15,32,55,.16);
}

.google-review-card:hover::after{
    transform:scaleX(1);
}

/* Informações do autor */

.google-review-card__top{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;

    gap:13px;

    margin-bottom:23px;
}

.google-review-card__avatar{
    width:46px;
    height:46px;

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

    border-radius:50%;

    color:#fff;
    background:
        linear-gradient(
            135deg,
            #004A99,
            #1987E4
        );

    font-size:13px;
    font-weight:700;
}

.google-review-card__top strong{
    display:block;
    margin-bottom:3px;

    color:#091421;

    font-size:15px;
    line-height:1.3;
    font-weight:700;

    text-transform:none;
}

.google-review-card__top span{
    display:block;

    color:#8793A0;

    font-size:11px;
    line-height:1.4;

    text-transform:none;
}

.google-review-card__top > i{
    color:#4285F4;
    font-size:19px;
}

/* Estrelas */

.google-review-card__stars{
    position:relative;
    z-index:2;

    margin-bottom:23px;

    color:#F4B400;

    font-size:18px;
    line-height:1;

    letter-spacing:2px;
}

/* Comentário */

.google-review-card blockquote{
    position:relative;
    z-index:2;

    margin:0;

    color:#4F5F70;

    font-size:16px;
    line-height:1.75;
    font-style:italic;
    font-weight:400;

    text-transform:none;
}

/* Setas */

.reviews-carousel__button{
    flex:0 0 52px;

    width:52px;
    height:52px;

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

    color:#fff;
    background:#07131F;

    border-radius:50%;

    font-size:16px;

    box-shadow:
        0 15px 35px
        rgba(7,19,31,.20);

    transition:
        background .3s ease,
        transform .3s ease;
}

.reviews-carousel__button:hover{
    background:#0057AA;
    transform:scale(1.07);
}

/* Indicadores */

.reviews-carousel__dots{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    min-height:18px;
    margin-top:6px;
}

.reviews-carousel__dot{
    width:8px;
    height:8px;

    padding:0;

    border-radius:50%;

    background:#C9D3DD;

    transition:
        width .3s ease,
        border-radius .3s ease,
        background .3s ease;
}

.reviews-carousel__dot.active{
    width:28px;
    border-radius:6px;
    background:#0057AA;
}

/* Link do Google */

.google-reviews__link{
    width:max-content;

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

    gap:11px;

    min-height:52px;
    margin:34px auto 0;
    padding:0 23px;

    color:#fff;
    background:#0868C4;

    border-radius:6px;

    font-size:12px;
    font-weight:700;

    letter-spacing:.04em;
    text-transform:uppercase;

    box-shadow:
        0 16px 35px
        rgba(0,87,170,.22);

    transition:
        background .3s ease,
        transform .3s ease;
}

.google-reviews__link:hover{
    padding-left:23px;
    background:#073D73;
    transform:translateY(-4px);
}

/* Responsivo */

@media (max-width:1050px){

    .google-review-card{
        flex-basis:
            calc(
                (100% - 25px) / 2
            );
    }

}

@media (max-width:700px){

    .google-reviews{
        padding:90px 0;
    }

    .google-reviews__header{
        margin-bottom:50px;
        text-align:left;
    }

    .google-reviews__header .section-tag{
        justify-content:flex-start;
    }

    .google-rating{
        justify-content:flex-start;
    }

    .reviews-carousel{
        gap:8px;
    }

    .google-review-card{
        flex-basis:100%;
        min-height:285px;
        padding:25px;
    }

    .reviews-carousel__button{
        position:absolute;
        z-index:10;

        top:50%;
        transform:translateY(-50%);

        width:44px;
        height:44px;

        opacity:.95;
    }

    .reviews-carousel__button:hover{
        transform:translateY(-50%) scale(1.05);
    }

    .reviews-carousel__button--prev{
        left:-10px;
    }

    .reviews-carousel__button--next{
        right:-10px;
    }

    .reviews-carousel__viewport{
        padding:0 14px;
    }

}
/* =========================================================
   PADRÃO VISUAL MAG
   Cantos técnicos e discretos
========================================================= */

:root{
    --radius:6px;
    --radius-small:6px;
    --mag-radius:6px;
}

/* =========================================================
   BOTÕES E CONTROLES
========================================================= */

.btn-primary,
.btn-secondary,
.btn-outline,
.google-reviews__link,
.map-location__button,
.contact button,
.menu-mobile,
input,
textarea,
select{
    border-radius:var(--mag-radius);
}

/* =========================================================
   CARTÕES E CAIXAS
========================================================= */

.differential-card,
.service-card,
.advantage,
.number-card,
.google-review-card,
.client-card,
.client-testimonial,
.brand-item,
.contact-information article,
.contact-right form,
.map-location__card,
.leadership-card,
.product-card,
.about-list li{
    border-radius:var(--mag-radius);
}

/* =========================================================
   IMAGENS E ÁREAS VISUAIS
========================================================= */

.about-image,
.about-image img,
.product-feature__image,
.product-image,
.gallery-grid img,
.gallery-grid video 
.leadership-photo{
    border-radius:var(--mag-radius);
}

/* Garante 6px também nas imagens de produtos no celular */

@media (max-width:600px){

    .product-feature__image,
    .brand-item,
    .leadership-card{
        border-radius:var(--mag-radius);
    }

}

/* =========================================================
   ETIQUETAS E PEQUENOS BLOCOS
========================================================= */

.hero-badge,
.leadership-photo__label,
.google-rating,
.client-card__relationship,
.number-card__icon{
    border-radius:var(--mag-radius);
}

/* =========================================================
   ELEMENTOS QUE DEVEM CONTINUAR CIRCULARES
========================================================= */

.whatsapp-btn,
.back-top,
.differential-icon,
.service-card > span,
.timeline-item > span,
.google-review-card__avatar,
.reviews-carousel__button{
    border-radius:50%;
}

/* Indicadores pequenos do carrossel */

.reviews-carousel__dot{
    border-radius:50%;
}

.reviews-carousel__dot.active{
    border-radius:6px;
}
/* =====================================================
   HEADER TRANSPARENTE
===================================================== */

.header,
.header.scrolled{
    background:transparent;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}

.header::before,
.header.scrolled::before{
    background:transparent;
    box-shadow:none;
}
.header.scrolled .navbar a{
    color:#091421;
}

.header.scrolled .btn-outline{
    color:#091421;
    border-color:rgba(9,20,33,.30);
}
/*=====================================================================
HISTÓRIA MAG — LINHA DO TEMPO VERTICAL
=====================================================================*/

.mag-history{
    --history-progress:0;

    position:relative;
    padding:145px 0 165px;

    overflow:hidden;

    color:#FFFFFF;
    background:#061421;

    isolation:isolate;
}

/* Grade técnica */

.mag-history::before{
    content:"";

    position:absolute;
    inset:0;

    z-index:-3;
    pointer-events:none;

    opacity:.05;

    background-image:
        linear-gradient(
            rgba(255,255,255,.24) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.24) 1px,
            transparent 1px
        );

    background-size:80px 80px;
}

/* Degradê geral */

.mag-history::after{
    content:"";

    position:absolute;
    inset:0;

    z-index:-2;
    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(2,13,24,.20),
            rgba(2,13,24,.03) 40%,
            rgba(0,74,153,.08)
        );
}

/* Luzes de fundo */

.mag-history__glow{
    position:absolute;

    width:620px;
    height:620px;

    border-radius:50%;

    z-index:-1;
    pointer-events:none;

    filter:blur(8px);

    animation:
        historyGlow
        9s
        ease-in-out
        infinite alternate;
}

.mag-history__glow--one{
    top:-270px;
    right:-230px;

    background:
        radial-gradient(
            circle,
            rgba(0,100,210,.28),
            transparent 68%
        );
}

.mag-history__glow--two{
    left:-320px;
    bottom:5%;

    animation-delay:-4s;

    background:
        radial-gradient(
            circle,
            rgba(0,74,153,.20),
            transparent 70%
        );
}

@keyframes historyGlow{

    from{
        transform:translate3d(0,0,0) scale(.92);
        opacity:.65;
    }

    to{
        transform:translate3d(45px,30px,0) scale(1.08);
        opacity:1;
    }

}

/* Cabeçalho */

.mag-history__header{
    position:relative;
    z-index:3;

    max-width:940px;
    margin:0 auto 110px;

    text-align:center;
}

.mag-history__header .section-tag{
    justify-content:center;

    color:#78BCFF;
}

.mag-history__header .section-tag::before{
    background:#3998F2;
}

.mag-history__header h2{
    margin-bottom:30px;

    color:#FFFFFF;

    font-size:clamp(42px,5.3vw,74px);
    line-height:1.03;
    font-weight:800;

    letter-spacing:-.045em;
    text-wrap:balance;
}

.mag-history__header p{
    max-width:720px;
    margin:0 auto;

    color:rgba(255,255,255,.66);

    font-size:17px;
    line-height:1.8;
    text-transform:none;
}

/* Área da linha do tempo */

.mag-history__timeline{
    position:relative;

    max-width:1180px;
    margin:0 auto;

    padding:20px 0 40px;
}

/* Linha central */

.mag-history__rail{
    position:absolute;

    top:0;
    bottom:120px;
    left:50%;

    width:3px;

    transform:translateX(-50%);

    background:rgba(255,255,255,.10);

    box-shadow:
        -8px 0 0 rgba(255,255,255,.025),
        8px 0 0 rgba(255,255,255,.025);
}

/* Luz percorrendo a linha */

.mag-history__rail-light{
    position:absolute;

    top:0;
    left:50%;

    width:11px;
    height:120px;

    border-radius:50px;

    transform:translateX(-50%);

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(73,171,255,.95),
            transparent
        );

    filter:blur(3px);

    animation:
        historyRailLight
        4.5s
        linear
        infinite;
}

@keyframes historyRailLight{

    from{
        top:-130px;
        opacity:0;
    }

    12%{
        opacity:1;
    }

    88%{
        opacity:1;
    }

    to{
        top:100%;
        opacity:0;
    }

}

/* Progresso preenchido pelo scroll */

.mag-history__progress{
    position:absolute;

    top:0;
    bottom:120px;
    left:50%;

    width:3px;

    transform:
        translateX(-50%)
        scaleY(var(--history-progress));

    transform-origin:top;

    background:
        linear-gradient(
            180deg,
            #1C8FF2,
            #0054A8,
            #67BCFF
        );

    box-shadow:
        0 0 20px rgba(35,143,240,.65);

    transition:transform .12s linear;
}

/* Cada marco */

.mag-history__item{
    position:relative;
    z-index:3;

    display:grid;
    grid-template-columns:
        minmax(0,1fr)
        110px
        minmax(0,1fr);

    align-items:center;

    min-height:285px;
    margin-bottom:25px;
}

/* Posição dos cartões */

.mag-history__item--left .mag-history__card{
    grid-column:1;
    justify-self:end;
}

.mag-history__item--right .mag-history__card{
    grid-column:3;
    justify-self:start;
}

/* O nó permanece no centro */

.mag-history__node{
    grid-column:2;
    grid-row:1;

    position:relative;
    z-index:5;

    justify-self:center;

    width:74px;
    height:74px;

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

    border-radius:50%;

    color:#FFFFFF;
    background:#0757A7;

    border:8px solid #061421;

    box-shadow:
        0 0 0 1px rgba(92,182,255,.38),
        0 0 35px rgba(0,100,205,.52);

    transition:
        transform .4s ease,
        background .4s ease,
        box-shadow .4s ease;
}

.mag-history__node i{
    position:relative;
    z-index:3;

    font-size:18px;
}

/* Pulso dos pontos */

.mag-history__node > span{
    position:absolute;
    inset:-11px;

    border-radius:50%;

    border:1px solid rgba(79,171,251,.46);

    animation:
        historyNodePulse
        2.8s
        ease-out
        infinite;
}

@keyframes historyNodePulse{

    0%{
        transform:scale(.75);
        opacity:0;
    }

    30%{
        opacity:.8;
    }

    100%{
        transform:scale(1.55);
        opacity:0;
    }

}

.mag-history__item:hover .mag-history__node{
    transform:scale(1.12) rotate(-5deg);

    background:#1387E8;

    box-shadow:
        0 0 0 1px rgba(104,193,255,.60),
        0 0 50px rgba(0,128,235,.75);
}

/* Cartão */

.mag-history__card{
    position:relative;

    width:min(100%,470px);
    padding:34px;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.09),
            rgba(255,255,255,.035)
        );

    border:1px solid rgba(255,255,255,.11);
    border-radius:6px;

    box-shadow:
        0 28px 70px
        rgba(0,0,0,.23);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    transition:
        transform .45s ease,
        border-color .45s ease,
        background .45s ease,
        box-shadow .45s ease;
}

/* Ano gigante no fundo */

.mag-history__card::before{
    content:attr(data-year);

    position:absolute;

    right:18px;
    bottom:-23px;

    color:rgba(255,255,255,.035);

    font-size:105px;
    line-height:1;
    font-weight:800;

    letter-spacing:-.07em;

    pointer-events:none;
}

/* Conector até a linha */

.mag-history__card::after{
    content:"";

    position:absolute;
    top:50%;

    width:56px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            rgba(64,164,250,.10),
            rgba(64,164,250,.80)
        );
}

.mag-history__item--left .mag-history__card::after{
    right:-56px;
}

.mag-history__item--right .mag-history__card::after{
    left:-56px;

    transform:rotate(180deg);
}

/* Efeito no cartão */


/* Informações superiores */

.mag-history__meta{
    position:relative;
    z-index:2;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    margin-bottom:25px;
}

.mag-history__year{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:38px;
    padding:0 15px;

    color:#FFFFFF;
    background:#075DB5;

    border-radius:6px;

    font-size:13px;
    font-weight:800;

    letter-spacing:.08em;
}

.mag-history__index{
    color:rgba(255,255,255,.22);

    font-size:13px;
    font-weight:700;

    letter-spacing:.18em;
}

.mag-history__card h3{
    position:relative;
    z-index:2;

    margin-bottom:17px;

    color:#FFFFFF;

    font-size:23px;
    line-height:1.25;
    font-weight:800;

    letter-spacing:-.015em;
}

.mag-history__card p{
    position:relative;
    z-index:2;

    margin:0;

    color:rgba(255,255,255,.67);

    font-size:15px;
    line-height:1.75;
    text-transform:none;
}



.mag-history__item:hover .mag-history__card-line{
    width:130px;
}

/* Encerramento */

.mag-history__finish{
    position:relative;
    z-index:4;

    width:max-content;
    max-width:100%;

    display:flex;
    align-items:center;

    gap:18px;

    margin:70px auto 0;
    padding:22px 28px;

    background:rgba(255,255,255,.055);

    border:1px solid rgba(255,255,255,.10);
    border-radius:6px;

    box-shadow:
        0 20px 55px
        rgba(0,0,0,.20);

    backdrop-filter:blur(15px);
}

.mag-history__finish-icon{
    width:48px;
    height:48px;

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

    flex:0 0 48px;

    border-radius:50%;

    color:#FFFFFF;
    background:#075DB5;

    box-shadow:
        0 0 30px rgba(0,98,200,.42);
}

.mag-history__finish small{
    display:block;

    margin-bottom:5px;

    color:#67B6F9;

    font-size:10px;
    font-weight:800;

    letter-spacing:.17em;
    text-transform:uppercase;
}

.mag-history__finish strong{
    display:block;

    color:#FFFFFF;

    font-size:16px;
    line-height:1.4;
}

/* =====================================================
   ENTRADA DOS ELEMENTOS
===================================================== */

.mag-history.history-ready .mag-history__item--left
.mag-history__card{
    opacity:0;
    transform:translateX(-65px);
}

.mag-history.history-ready .mag-history__item--right
.mag-history__card{
    opacity:0;
    transform:translateX(65px);
}

.mag-history.history-ready .mag-history__node{
    opacity:0;
    transform:scale(.55);
}

.mag-history.history-ready
.mag-history__item.is-visible
.mag-history__card{
    opacity:1;
    transform:translateX(0);

    transition:
        opacity .75s ease,
        transform .75s cubic-bezier(.2,.75,.25,1),
        border-color .45s ease,
        background .45s ease,
        box-shadow .45s ease;
}

.mag-history.history-ready
.mag-history__item.is-visible
.mag-history__node{
    opacity:1;
    transform:scale(1);

    transition:
        opacity .55s ease .18s,
        transform .65s cubic-bezier(.2,.75,.25,1) .18s,
        background .4s ease,
        box-shadow .4s ease;
}

/* =====================================================
   TABLET E CELULAR
===================================================== */

@media (max-width:800px){

    .mag-history{
        padding:100px 0;
    }

    .mag-history__header{
        margin-bottom:70px;
        text-align:left;
    }

    .mag-history__header .section-tag{
        justify-content:flex-start;
    }

    .mag-history__header h2{
        font-size:clamp(36px,10vw,50px);
    }

    .mag-history__header p{
        margin-left:0;
    }

    .mag-history__timeline{
        padding-left:5px;
    }

    .mag-history__rail,
    .mag-history__progress{
        left:28px;
    }

    .mag-history__item{
        grid-template-columns:56px minmax(0,1fr);

        min-height:auto;
        margin-bottom:55px;
    }

    .mag-history__item--left .mag-history__card,
    .mag-history__item--right .mag-history__card{
        grid-column:2;
        grid-row:1;

        width:100%;
        justify-self:stretch;
    }

    .mag-history__node{
        grid-column:1;
        grid-row:1;

        width:54px;
        height:54px;

        border-width:6px;
    }

    .mag-history__node i{
        font-size:14px;
    }

    .mag-history__card{
        margin-left:20px;
        padding:27px;
    }

    .mag-history__card::after,
    .mag-history__item--left .mag-history__card::after,
    .mag-history__item--right .mag-history__card::after{
        left:-21px;
        right:auto;

        width:21px;

        transform:none;
    }

    .mag-history.history-ready
    .mag-history__item--left
    .mag-history__card,
    .mag-history.history-ready
    .mag-history__item--right
    .mag-history__card{
        transform:translateX(45px);
    }

    .mag-history.history-ready
    .mag-history__item.is-visible
    .mag-history__card{
        transform:translateX(0);
    }

    .mag-history__finish{
        margin-left:65px;
        margin-right:0;
    }

}

@media (max-width:480px){

    .mag-history__card{
        padding:23px;
    }

    .mag-history__card h3{
        font-size:20px;
    }

    .mag-history__card p{
        font-size:14px;
    }

    .mag-history__card::before{
        font-size:75px;
    }

    .mag-history__finish{
        align-items:flex-start;
        padding:20px;
    }

}

/* Pessoas que preferem menos movimento */

@media (prefers-reduced-motion:reduce){

    .mag-history *,
    .mag-history *::before,
    .mag-history *::after{
        animation:none !important;
        transition:none !important;
    }

}
/* =====================================================
   TÍTULOS GRANDES — AZUL ESCURO MAG
===================================================== */

:root{
    --title-blue:#082F5B;
}

/* Títulos grandes das seções claras */

.about .section-title h2,
.about-content h3,
.products-showcase .products-intro h2,
.brands .section-title h2,
.advantages-left h2,
.gallery .section-title h2,
.contact-left h2,
.google-reviews__header h2,
.clients-showcase__header h2{
    color:var(--title-blue);
}
/* =====================================================
   TÍTULOS E DESTAQUES — AZUL-ESCURO MAG
===================================================== */

:root{
    --title-blue:#082F5B;
}

/* Cartões superiores:
   Assistência Técnica, Peças Originais etc. */

.differential-card h3{
    color:var(--title-blue);
}

/* Seção:
   Atendimento Especializado, Estoque Completo etc. */

.advantage h3{
    color:var(--title-blue);
}

/* Lista da seção Quem Somos */

.about-list li{
    color:var(--title-blue);
}

/* Títulos de cada produto:
   Motores Diesel, Turbo Compressores etc. */

.products-showcase .product-feature__content h3{
    color:var(--title-blue);
}

/* Títulos dos cartões de avaliações */

.google-review-card__top strong{
    color:var(--title-blue);
}

/* Títulos dos clientes, caso a seção antiga ainda exista */

.client-card h3{
    color:var(--title-blue);
}

/* Títulos dos campos de contato */

.contact-information h4{
    color:var(--title-blue);
}
/* =====================================================
   TIMELINE — CARTÃO MAG MAIS PROFISSIONAL
===================================================== */

.mag-history__card{
    position:relative;

    display:grid;
    grid-template-columns:95px minmax(0, 1fr);
    grid-template-rows:auto auto;
    column-gap:30px;
    row-gap:14px;

    width:min(100%, 500px);
    min-height:0;
    padding:32px;

    overflow:visible;

    background:#142332;

    border:1px solid rgba(255,255,255,.10);
    border-radius:6px;

    box-shadow:
        0 18px 45px
        rgba(0,0,0,.20);

    backdrop-filter:none;
    -webkit-backdrop-filter:none;

    transition:
        transform .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}

/* Remove o ano gigante decorativo */

.mag-history__card::before{
    display:none;
}

/* Coluna lateral do ano */

.mag-history__meta{
    grid-column:1;
    grid-row:1 / 3;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:space-between;

    min-height:130px;
    margin:0;
    padding-right:24px;

    border-right:1px solid rgba(255,255,255,.10);
}

/* Ano */

.mag-history__year{
    min-width:70px;
    min-height:38px;

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

    padding:0 13px;

    color:#fff;
    background:#0757A7;

    border-radius:6px;

    font-size:13px;
    line-height:1;
    font-weight:800;
    letter-spacing:.04em;
}

/* Número 01, 02, 03... */

.mag-history__index{
    color:rgba(255,255,255,.28);

    font-size:12px;
    line-height:1;
    font-weight:700;
    letter-spacing:.16em;
}

/* Título */

.mag-history__card h3{
    grid-column:2;
    grid-row:1;

    align-self:end;

    margin:0;

    color:#fff;

    font-size:23px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:-.015em;
}

/* Descrição */

.mag-history__card p{
    grid-column:2;
    grid-row:2;

    align-self:start;

    margin:0;

    color:rgba(255,255,255,.66);

    font-size:15px;
    line-height:1.75;
    font-weight:400;

    text-transform:none;
}

/* Remove definitivamente a linha pequena interna */

.mag-history__card-line{
    display:none;
}

/* Hover discreto e profissional */

.mag-history__item:hover .mag-history__card{
    transform:translateY(-4px);

    background:#172838;

    border-color:rgba(255,255,255,.12);

    box-shadow:
        0 24px 55px
        rgba(0,0,0,.25);
}

/* Não mostra contorno azul ao clicar */

.mag-history__card:focus,
.mag-history__card:focus-visible,
.mag-history__card:active{
    outline:none;
    border-color:rgba(255,255,255,.10);
}

/* =====================================================
   RESPONSIVO
===================================================== */

@media (max-width:600px){

    .mag-history__card{
        grid-template-columns:1fr;
        grid-template-rows:auto auto auto;

        gap:20px;
        padding:25px;
    }

    .mag-history__meta{
        grid-column:1;
        grid-row:1;

        min-height:auto;

        flex-direction:row;
        align-items:center;
        justify-content:space-between;

        padding:0 0 18px;

        border-right:0;
        border-bottom:1px solid rgba(255,255,255,.10);
    }

    .mag-history__card h3{
        grid-column:1;
        grid-row:2;

        font-size:21px;
    }

    .mag-history__card p{
        grid-column:1;
        grid-row:3;

        font-size:14px;
    }

}
/* =====================================================
   TIMELINE — ANO SEM FUNDO
===================================================== */

/* Centraliza o ano na coluna lateral */

.mag-history__meta{
    align-items:center;
    justify-content:center;
}

/* Remove o retângulo azul */

.mag-history__year{
    min-width:auto;
    min-height:auto;
    padding:0;

    color:#FFFFFF;
    background:transparent;
    border-radius:0;

    font-size:21px;
    line-height:1;
    font-weight:800;
    letter-spacing:.02em;

    text-align:center;
}

/* Retira o número 01, 02, 03 e 04 */

.mag-history__index{
    display:none;
}
@media (max-width:600px){

    .mag-history__meta{
        justify-content:center;
        padding-bottom:18px;
    }

    .mag-history__year{
        font-size:19px;
    }

}

/*=====================================================================
CATÁLOGO DE PRODUTOS — GRADE ESCURA COM HOVER BRANCO
=====================================================================*/

.product-catalog{
    position:relative;
    padding:120px 0 130px;
    overflow:hidden;
    background:#061624;
}

.product-catalog::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 8% 10%,rgba(28,126,214,.10),transparent 30%),
        radial-gradient(circle at 92% 88%,rgba(28,126,214,.06),transparent 30%);
}

.product-catalog .container{
    position:relative;
    z-index:2;
    width:min(1500px,96%);
}

.product-category-grid{
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    grid-auto-rows:245px;
    gap:12px;
}

/* Painel institucional */

.product-catalog__intro{
    position:relative;
    grid-column:span 3;
    grid-row:span 2;
    min-width:0;
    min-height:502px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    overflow:hidden;
    padding:34px 42px 30px;
    color:#FFFFFF;
    background:#0A2032;
    border:1px solid rgba(143,190,231,.22);
    border-radius:6px;
    box-shadow:0 22px 55px rgba(0,0,0,.16);
}

.product-catalog__intro::after{
    content:"";
    position:absolute;
    right:-95px;
    bottom:-130px;
    width:285px;
    height:285px;
    border:1px solid rgba(78,157,226,.15);
    border-radius:50%;
    pointer-events:none;
}

.product-catalog__intro .section-tag{
    position:relative;
    z-index:2;
    margin-bottom:16px;
    color:#75B9F7;
}

.product-catalog__intro .section-tag::before{
    background:#75B9F7;
}

.product-catalog__intro h2{
    position:relative;
    z-index:2;
    max-width:520px;
    margin:0 0 18px;
    color:#FFFFFF;
    font-size:clamp(30px,2.75vw,42px);
    line-height:1.04;
    font-weight:800;
    letter-spacing:-.042em;
}

.product-catalog__intro > p{
    position:relative;
    z-index:2;
    max-width:560px;
    margin:0 0 22px;
    color:rgba(255,255,255,.78);
    font-size:14px;
    line-height:1.66;
    text-transform:none;
}

.product-catalog__stock{
    position:relative;
    z-index:2;
    width:100%;
    display:flex;
    align-items:center;
    gap:18px;
    margin-top:auto;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.13);
}

.product-catalog__stock strong{
    flex:0 0 auto;
    color:#FFFFFF;
    font-size:clamp(31px,3.2vw,46px);
    line-height:1;
    font-weight:700;
    letter-spacing:-.045em;
}

.product-catalog__stock span{
    max-width:210px;
    color:#AFC7DA;
    font-size:10px;
    line-height:1.45;
    font-weight:700;
    letter-spacing:.085em;
    text-transform:uppercase;
}

.product-catalog__intro .product-catalog__button{
    position:relative;
    z-index:4;
    flex:0 0 auto;
    min-height:50px;
    height:50px;
    margin-top:20px;
    padding:0 24px;
    border-radius:6px;
    color:#FFFFFF;
    background:#0868C4;
    box-shadow:none;
    font-size:12px;
    pointer-events:auto;
}

.product-catalog__intro .product-catalog__button:hover{
    color:#FFFFFF;
    background:#07559F;
}

/* Cartões: escuros e profissionais no estado normal */

.product-category-card{
    position:relative;
    min-width:0;
    height:245px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    color:#FFFFFF;
    background:#101F2C;
    border:1px solid rgba(162,194,220,.16);
    border-radius:6px;
    box-shadow:0 12px 28px rgba(0,8,18,.16);
    cursor:pointer;
    isolation:isolate;
    transition:
        transform .38s cubic-bezier(.2,.75,.25,1),
        background-color .38s ease,
        box-shadow .38s ease,
        border-color .38s ease;
}

.product-category-card::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:0;
    background:#FFFFFF;
    transform:translateY(101%);
    transition:transform .42s cubic-bezier(.2,.75,.25,1);
}

.product-category-card:hover,
.product-category-card:focus-visible{
    color:#073A6A;
    border-color:#A7CBEA;
    box-shadow:0 24px 48px rgba(0,8,18,.26);
}

.product-category-card:hover::before,
.product-category-card:focus-visible::before{
    transform:translateY(0);
}

.product-category-card:focus-visible{
    outline:3px solid rgba(75,163,238,.42);
    outline-offset:3px;
}

.product-category-card__image{
    position:relative;
    flex:1 1 auto;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:18px 14px 8px;
    background:
        radial-gradient(circle at 50% 52%,rgba(255,255,255,.075),transparent 57%);
    transition:background .38s ease;
}

.product-category-card:hover .product-category-card__image,
.product-category-card:focus-visible .product-category-card__image{
    background:radial-gradient(circle at 50% 52%,rgba(9,91,163,.07),transparent 60%);
}

.product-category-card__image img{
    display:block;
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    padding:0;
    background:transparent;
    mix-blend-mode:normal;
    filter:drop-shadow(0 13px 14px rgba(0,0,0,.24));
    transition:
        transform .58s cubic-bezier(.2,.7,.2,1),
        filter .38s ease;
}

.product-category-card:hover .product-category-card__image img,
.product-category-card:focus-visible .product-category-card__image img{
    transform:scale(1.075) translateY(-3px);
    filter:drop-shadow(0 14px 14px rgba(10,37,61,.18));
}

/* Apenas o nome do produto */

.product-category-card__body{
    position:relative;
    z-index:2;
    flex:0 0 auto;
    min-height:58px;
    display:flex;
    align-items:center;
    padding:12px 14px;
    border-top:1px solid rgba(162,194,220,.12);
    transition:border-color .38s ease;
}

.product-category-card:hover .product-category-card__body,
.product-category-card:focus-visible .product-category-card__body{
    border-top-color:#E0E8EF;
}

.product-category-card h3{
    width:100%;
    margin:0;
    color:#FFFFFF;
    font-size:12px;
    line-height:1.28;
    font-weight:800;
    letter-spacing:-.012em;
    text-transform:none;
    transition:color .38s ease;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.product-category-card:hover h3,
.product-category-card:focus-visible h3{
    color:#0758A5;
}

/* Animação de entrada existente */

.product-catalog [data-product-reveal]{
    opacity:0;
    transform:translateY(34px);
    transition:
        opacity .66s ease,
        transform .66s cubic-bezier(.2,.75,.25,1),
        box-shadow .38s ease,
        border-color .38s ease,
        background-color .38s ease;
}

.product-catalog [data-product-reveal].is-visible{
    opacity:1;
    transform:translateY(0);
}

@media (max-width:1280px){
    .product-category-grid{
        grid-template-columns:repeat(5,minmax(0,1fr));
    }

    .product-catalog__intro{
        grid-column:span 2;
        grid-row:span 2;
        padding:30px;
    }
}

@media (max-width:920px){
    .product-catalog{
        padding:95px 0 105px;
    }

    .product-category-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        grid-auto-rows:225px;
    }

    .product-catalog__intro{
        grid-column:1 / -1;
        grid-row:auto;
        min-height:430px;
        padding:40px;
    }

    .product-category-card{
        height:225px;
    }
}

@media (max-width:620px){
    .product-catalog{
        padding:82px 0 90px;
    }

    .product-catalog .container{
        width:min(94%,1500px);
    }

    .product-category-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        grid-auto-rows:225px;
        gap:10px;
    }

    .product-catalog__intro{
        grid-column:1 / -1;
        min-height:455px;
        padding:32px 26px;
    }

    .product-catalog__intro h2{
        font-size:clamp(32px,10.2vw,44px);
    }

    .product-catalog__stock{
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
    }

    .product-catalog__stock span{
        max-width:280px;
    }

    .product-category-card{
        height:225px;
    }

    .product-category-card h3{
        font-size:11.5px;
    }
}

@media (max-width:420px){
    .product-category-grid{
        grid-template-columns:1fr;
        grid-auto-rows:255px;
    }

    .product-catalog__intro{
        min-height:455px;
    }

    .product-category-card{
        height:255px;
    }

    .product-category-card h3{
        font-size:14px;
    }
}

@media (prefers-reduced-motion:reduce){
    .product-catalog [data-product-reveal]{
        opacity:1;
        transform:none;
    }

    .product-category-card,
    .product-category-card::before,
    .product-category-card__image,
    .product-category-card__image img,
    .product-category-card__body,
    .product-category-card h3{
        transition:none;
    }
}

/* =========================================================
   AJUSTES FINAIS — DIFERENCIAIS E MAPA
   Remove os elementos decorativos excessivos e mantém
   o visual mais limpo e alinhado à identidade da MAG.
========================================================= */

/* Remove círculos e desenhos decorativos nos cartões */
.differential-card::before,
.differential-card::after{
    content:none !important;
    display:none !important;
}

/* Identificador minimalista: número + linha fina */
.differential-icon{
    width:auto !important;
    height:auto !important;
    min-width:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:12px !important;

    margin:0 0 26px !important;
    padding:0 !important;

    color:#0757A7 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    font-size:14px !important;
    line-height:1 !important;
    font-weight:800 !important;
    letter-spacing:.12em !important;
}

/* Garante que o ponto laranja desapareça */
.differential-icon::before{
    content:none !important;
    display:none !important;
}

/* Linha discreta no lugar do quadrado */
.differential-icon::after{
    content:"" !important;
    display:block !important;

    width:42px !important;
    height:2px !important;

    border-radius:999px !important;
    background:#0757A7 !important;
    opacity:.28 !important;
}

/* Mantém somente a elevação suave do cartão */
.differential-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-large);
}

/* Mapa mais baixo e proporcional */
.map-location{
    min-height:470px !important;
}

.map-location iframe{
    height:470px !important;
    min-height:470px !important;
}

/* Cartão de endereço menor e totalmente visível */
.map-location__card{
    width:min(360px, calc(100% - 40px)) !important;
    padding:30px !important;
}

.map-location__card h2{
    margin-bottom:16px !important;
    font-size:clamp(28px,2.4vw,36px) !important;
}

.map-location__card p{
    margin-bottom:22px !important;
    font-size:15px !important;
    line-height:1.6 !important;
}

.map-location__button{
    min-height:46px !important;
}

/* Celular */
@media (max-width:768px){

    .map-location{
        min-height:auto !important;
    }

    .map-location iframe{
        height:360px !important;
        min-height:360px !important;
    }

    .map-location__card{
        width:100% !important;
        padding:34px 7% !important;
    }

    .differential-icon{
        margin-bottom:22px !important;
    }
}
/* =====================================================
   CORREÇÃO DEFINITIVA DO CARTÃO SOBRE O MAPA
   Cole no FINAL do arquivo CSS
===================================================== */

.map-location{
    min-height:520px !important;
}

.map-location iframe{
    display:block !important;
    width:100% !important;
    height:520px !important;
    min-height:520px !important;
}

.map-location__card{
    top:50% !important;
    bottom:auto !important;

    transform:translateY(-50%) !important;

    width:min(350px, calc(100% - 40px)) !important;
    max-height:calc(100% - 50px) !important;

    padding:28px !important;

    overflow:auto !important;
}

.map-location__card h2{
    margin-bottom:14px !important;

    font-size:32px !important;
    line-height:1.08 !important;
}

.map-location__card p{
    margin-bottom:18px !important;

    font-size:15px !important;
    line-height:1.5 !important;
}

.map-location__tag{
    margin-bottom:14px !important;
}

.map-location__button{
    min-height:44px !important;
}


/* CELULAR */

@media (max-width:768px){

    .map-location{
        display:flex !important;
        flex-direction:column !important;
        min-height:auto !important;
    }

    .map-location iframe{
        height:360px !important;
        min-height:360px !important;
    }

    .map-location__card{
        position:relative !important;

        top:auto !important;
        left:auto !important;
        bottom:auto !important;

        width:100% !important;
        max-height:none !important;

        padding:32px 7% !important;

        transform:none !important;
        overflow:visible !important;
    }
}
/* =====================================================
   TÍTULO PRINCIPAL DA HOME — TAMANHO PROPORCIONAL
===================================================== */

.hero h1{
    max-width:780px;
    margin-bottom:32px;

    color:#FFFFFF;

    font-family:'Open Sans', sans-serif;
    font-size:clamp(46px, 4.3vw, 68px);
    line-height:1.08;
    font-weight:700;

    letter-spacing:-0.025em;
    text-transform:uppercase;
    text-wrap:balance;

    text-shadow:0 4px 12px rgba(0,0,0,.40);
}


/* TABLET */

@media (max-width:900px){

    .hero h1{
        max-width:680px;
        font-size:clamp(42px, 7vw, 56px);
    }

}


/* CELULAR */

@media (max-width:600px){

    .hero h1{
        max-width:100%;
        font-size:clamp(34px, 9vw, 43px);
        line-height:1.1;
        letter-spacing:-0.015em;
    }

}
/*=====================================================================
TRABALHE CONOSCO
=====================================================================*/

.careers{
    position:relative;
    overflow:hidden;
    padding:130px 0;
    background:#F4F7FA;
}

.careers::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.045;
    background-image:
        linear-gradient(rgba(0,74,153,.45) 1px,transparent 1px),
        linear-gradient(90deg,rgba(0,74,153,.45) 1px,transparent 1px);
    background-size:82px 82px;
}

.careers::after{
    content:"";
    position:absolute;
    width:620px;
    height:620px;
    right:-300px;
    top:-320px;
    border-radius:50%;
    pointer-events:none;
    background:radial-gradient(circle,rgba(0,104,196,.13),transparent 70%);
}

.careers .container{
    position:relative;
    z-index:2;
}

.careers__grid{
    display:grid;
    grid-template-columns:minmax(0,.92fr) minmax(460px,1.08fr);
    align-items:center;
    gap:clamp(60px,8vw,115px);
}

.careers__content{
    max-width:610px;
}

.careers__content h2{
    margin-bottom:28px;
    color:#082E56;
    font-size:clamp(42px,4.7vw,65px);
    line-height:1.07;
    letter-spacing:-.035em;
}

.careers__content > p{
    max-width:590px;
    margin-bottom:38px;
    color:#5D6B79;
    font-size:17px;
    line-height:1.8;
}

.careers__highlights{
    display:grid;
    gap:15px;
}

.careers__highlights article{
    display:flex;
    align-items:center;
    gap:17px;
    padding:19px 20px;
    background:rgba(255,255,255,.72);
    border:1px solid #DDE5EC;
    border-radius:6px;
    box-shadow:0 12px 30px rgba(15,32,55,.055);
}

.careers__highlights article > span{
    width:46px;
    height:46px;
    flex:0 0 46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#fff;
    background:#0868C4;
    box-shadow:0 10px 25px rgba(8,104,196,.23);
}

.careers__highlights strong{
    display:block;
    margin-bottom:4px;
    color:#091421;
    font-size:15px;
    line-height:1.35;
    text-transform:none;
}

.careers__highlights small{
    display:block;
    color:#6B7886;
    font-size:13px;
    line-height:1.55;
    text-transform:none;
}

.careers__form-card{
    position:relative;
    padding:42px;
    overflow:hidden;
    color:#fff;
    background:#07131F;
    border:1px solid rgba(255,255,255,.10);
    border-radius:6px;
    box-shadow:0 35px 85px rgba(7,19,31,.22);
}

.careers__form-card::before{
    content:"";
    position:absolute;
    top:-150px;
    right:-160px;
    width:360px;
    height:360px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(15,124,222,.35),transparent 70%);
    pointer-events:none;
}

.careers__form-card form,
.careers__form-heading{
    position:relative;
    z-index:2;
}

.careers__form-heading{
    margin-bottom:30px;
}

.careers__form-heading > span{
    display:block;
    margin-bottom:11px;
    color:#68B8FF;
    font-size:11px;
    font-weight:800;
    letter-spacing:.20em;
}

.careers__form-heading h3{
    margin-bottom:10px;
    color:#fff;
    font-size:31px;
    line-height:1.2;
}

.careers__form-heading p{
    color:rgba(255,255,255,.62);
    font-size:14px;
    line-height:1.65;
}

.career-form-group{
    margin-bottom:22px;
}

.career-form-group > label:first-child{
    display:block;
    margin-bottom:9px;
    color:rgba(255,255,255,.88);
    font-size:13px;
    font-weight:700;
    letter-spacing:.03em;
    text-transform:none;
}

.career-form-group input[type="text"]{
    width:100%;
    min-height:56px;
    padding:0 18px;
    color:#fff;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.13);
    border-radius:6px;
    font-size:15px;
    outline:none;
    transition:border-color .3s ease,background .3s ease,box-shadow .3s ease;
}

.career-form-group input[type="text"]::placeholder{
    color:rgba(255,255,255,.38);
}

.career-form-group input[type="text"]:focus{
    transform:none;
    background:rgba(255,255,255,.08);
    border-color:#2389E8;
    box-shadow:0 0 0 4px rgba(35,137,232,.13);
}

.career-upload{
    width:100%;
    min-height:108px;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:15px;
    padding:19px;
    cursor:pointer;
    background:rgba(255,255,255,.045);
    border:1px dashed rgba(104,184,255,.46);
    border-radius:6px;
    transition:background .3s ease,border-color .3s ease,transform .3s ease;
}

.career-upload:hover,
.career-upload:focus-within{
    background:rgba(22,126,218,.11);
    border-color:#68B8FF;
    transform:translateY(-2px);
}

.career-upload__icon{
    width:50px;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#fff;
    background:#0868C4;
    font-size:18px;
    box-shadow:0 12px 27px rgba(0,105,202,.24);
}

.career-upload__copy strong{
    display:block;
    margin-bottom:4px;
    color:#fff;
    font-size:14px;
    text-transform:none;
}

.career-upload__copy small{
    display:block;
    color:rgba(255,255,255,.48);
    font-size:12px;
    line-height:1.45;
    text-transform:none;
}

.career-upload__action{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:0 14px;
    color:#fff;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.13);
    border-radius:6px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.04em;
    white-space:nowrap;
}

.career-upload__input{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}

.career-upload__filename{
    margin:9px 0 0;
    color:rgba(255,255,255,.48);
    font-size:12px;
    line-height:1.5;
}

.career-upload__filename.has-file{
    color:#86C9FF;
}

.career-consent{
    display:flex;
    align-items:flex-start;
    gap:11px;
    margin:4px 0 22px;
    color:rgba(255,255,255,.60);
    font-size:12px;
    line-height:1.55;
    text-transform:none;
}

.career-consent input{
    width:17px;
    height:17px;
    flex:0 0 17px;
    margin-top:2px;
    accent-color:#1687E8;
}

.career-consent a{
    color:#7CC4FF;
    text-decoration:underline;
    text-underline-offset:2px;
}

.career-submit{
    width:100%;
    min-height:58px;
    border-radius:6px;
    box-shadow:0 18px 42px rgba(0,105,202,.25);
}

.career-submit:active,
.career-submit:focus{
    transform:none !important;
}

.career-submit:disabled{
    cursor:wait;
    opacity:.72;
}

.career-form-status{
    min-height:18px;
    margin:12px 0 0;
    color:rgba(255,255,255,.62);
    font-size:12px;
    line-height:1.5;
    text-align:center;
}

.career-form-status.is-error{
    color:#FFB0B0;
}

/* =========================================================
   COMO TRABALHAMOS — PROCESSO COM MOTOR 3D
   Visual profissional, limpo e alinhado à identidade MAG.
========================================================= */

.advantages-process{
    padding:120px 0;
    background:#FFFFFF;
    border-top:1px solid #E8EDF2;
    overflow:hidden;
}

.advantages-process .container{
    display:block;
}

.advantages-process__header{
    max-width:940px;
    margin:0 auto 64px;
    text-align:center;
}

.advantages-process__header .section-tag{
    justify-content:center;
}

.advantages-process__header h2{
    max-width:900px;
    margin:0 auto;
    color:#0A345F;
    font-size:clamp(38px,4.7vw,64px);
    line-height:1.06;
    letter-spacing:-.035em;
    text-wrap:balance;
}

.advantages-process__layout{
    display:grid;
    grid-template-columns:minmax(420px,.92fr) minmax(500px,1.08fr);
    align-items:center;
    gap:clamp(48px,6vw,90px);
}

.advantages-process__steps{
    display:flex;
    flex-direction:column;
    gap:0;
}

.advantages-process .advantage{
    display:grid;
    grid-template-columns:76px minmax(0,1fr);
    align-items:start;
    gap:24px;
    padding:27px 0;
    background:transparent;
    border:0;
    border-bottom:1px solid #DDE5EC;
    border-radius:0;
    box-shadow:none;
    transition:transform .3s ease,border-color .3s ease;
}

.advantages-process .advantage:first-child{
    border-top:1px solid #DDE5EC;
}

.advantages-process .advantage:hover{
    transform:translateX(8px);
    border-color:#9DC7EC;
    box-shadow:none;
}

.advantages-process .advantage > span{
    min-width:0;
    color:#0C6FC8;
    font-size:42px;
    line-height:1;
    font-weight:300;
    letter-spacing:-.05em;
}

.advantages-process .advantage h3{
    margin:0 0 9px;
    color:#0B355E;
    font-size:21px;
    line-height:1.25;
    font-weight:800;
    letter-spacing:.01em;
}

.advantages-process .advantage p{
    margin:0;
    color:#657485;
    font-size:16px;
    line-height:1.7;
}

.advantages-engine{
    position:relative;
    min-width:0;
    overflow:hidden;
    background:#071827;
    border:1px solid #15334D;
    border-radius:8px;
    box-shadow:0 30px 70px rgba(7,24,39,.18);
}

.advantages-engine__heading{
    padding:28px 32px 24px;
    border-bottom:1px solid rgba(255,255,255,.10);
}

.advantages-engine__heading span{
    display:block;
    margin-bottom:8px;
    color:#68B7F8;
    font-size:11px;
    line-height:1.4;
    font-weight:800;
    letter-spacing:.18em;
}

.advantages-engine__heading strong{
    display:block;
    margin-bottom:8px;
    color:#FFFFFF;
    font-size:25px;
    line-height:1.25;
    font-weight:700;
}

.advantages-engine__heading p{
    margin:0;
    color:rgba(255,255,255,.66);
    font-size:14px;
    line-height:1.6;
}

.advantages-engine__viewer{
    position:relative;
    width:100%;
    min-height:480px;
    background:
        radial-gradient(circle at center,rgba(28,127,210,.20),transparent 56%),
        #071827;
}

.advantages-engine__viewer iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
    display:block;
}

.advantages-engine__footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:16px 24px;
    color:rgba(255,255,255,.56);
    background:#06131F;
    border-top:1px solid rgba(255,255,255,.08);
    font-size:12px;
}

.advantages-engine__footer a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#88C9FF;
    font-weight:700;
}

.advantages-engine__footer a:hover{
    color:#FFFFFF;
}


/* =========================================================
   MOTOR 3D SEM CARTÃO — AJUSTE SOLICITADO
   Mantém somente o modelo interativo, sem fundo azul, título
   interno, rodapé, borda ou sombra de cartão.
========================================================= */

.advantages-engine.advantages-engine--clean{
    position:relative;
    min-width:0;
    overflow:visible;
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
}

.advantages-engine--clean .advantages-engine__viewer{
    position:relative;
    width:100%;
    min-height:560px;
    overflow:visible;
    background:transparent;
}

.advantages-engine--clean .advantages-engine__viewer iframe{
    position:absolute;
    inset:-8% -8%;
    width:116%;
    height:116%;
    display:block;
    border:0;
    background:transparent;
}

/* =========================================================
   MOTOR 3D ISOLADO — SEM INTERFACE VISÍVEL DO VISUALIZADOR
========================================================= */

.advantages-engine.advantages-engine--clean{
    background:transparent;
    border:0;
    box-shadow:none;
    overflow:visible;
}

.advantages-engine--clean .advantages-engine__viewer{
    position:relative;
    min-height:560px;
    overflow:hidden;
    background:#FFFFFF;
    border:0;
    border-radius:0;
    box-shadow:none;
    isolation:isolate;
}

.advantages-engine--clean .advantages-engine__viewer::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:#FFFFFF;
    pointer-events:none;
}

.advantages-engine--clean .advantages-engine__viewer iframe{
    position:absolute;
    z-index:1;
    top:-10%;
    left:-12%;
    width:124%;
    height:124%;
    display:block;
    border:0;
    background:#FFFFFF;
    opacity:0;
    transition:opacity .35s ease;
}

.advantages-engine--clean .advantages-engine__viewer iframe.is-ready{
    opacity:1;
}

.advantages-engine--clean .advantages-engine__viewer iframe.has-error{
    opacity:0;
}

/* =========================================================
   MOTOR 3D — RECORTE LIMPO DO VISUALIZADOR
   Mantém apenas a área útil do motor e cobre os elementos
   residuais do serviço externo nas bordas superior e inferior.
========================================================= */

.advantages-engine--clean .advantages-engine__viewer{
    position:relative;
    overflow:hidden;
    background:#FFFFFF;
}

.advantages-engine--clean .advantages-engine__viewer::before,
.advantages-engine--clean .advantages-engine__viewer::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    z-index:4;
    display:block;
    background:#FFFFFF;
    pointer-events:none;
}

.advantages-engine--clean .advantages-engine__viewer::before{
    top:0;
    height:48px;
}

.advantages-engine--clean .advantages-engine__viewer::after{
    bottom:0;
    height:58px;
}

.advantages-engine--clean .advantages-engine__viewer iframe{
    top:-12% !important;
    left:-12% !important;
    width:124% !important;
    height:124% !important;
    background:#FFFFFF !important;
}