/* ==========================================================
   1. VARIÁVEIS
   ========================================================== */

:root {
    --azul: #001f3f;
    --vermelho: #ff0000;
    --branco: #ffffff;
    --cinza-fundo: #f4f7f6;

    --vermelho-escuro: #8f1119;
    --vermelho-medio: #b81b24;

    --preto: #050607;
    --preto-claro: #111315;

    --gotrix-laranja: #ff4500;
    --gotrix-amarelo: #F2B705;

    --gotrix-gradient:
        linear-gradient(
            135deg,
            #001f3f 0%,
            #3a0000 100%
        );
}


/* ==========================================================
   2. RESET E GLOBAL
   ========================================================== */

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

    font-family: Arial, sans-serif;
}


html {
    scroll-behavior: smooth;
}


body {
    width: 100%;
    min-height: 100vh;

    overflow-x: hidden;

    color: #333333;
    background: #ffffff;

    line-height: 1.6;
}


img {
    max-width: 100%;
}


.container {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;
}


.section-padding {
    padding: 60px 0;
}


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


.bg-light {
    background: var(--cinza-fundo);
}


/* ==========================================================
   3. TOPBAR
   ========================================================== */

.topbar {
    width: 100%;

    padding: 7px 0;

    background:
        linear-gradient(
            100deg,
            #050607 0%,
            #101214 50%,
            #050607 100%
        );

    border-bottom:
        1px solid rgba(143, 17, 25, 0.45);

    color: rgba(255,255,255,0.90);

    font-size: 0.78rem;
}


.topbar-content {
    display: flex;

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

    gap: 20px;
}


.topbar-content span {
    display: flex;

    align-items: center;

    gap: 7px;

    white-space: nowrap;
}


.topbar-content i {
    color: #d5222d;

    font-size: 0.85rem;
}


.topbar-content .fa-whatsapp {
    color: #25D366;
}


.topbar-gotrix {
    background: #000000 !important;

    color: #ffffff;
}


/* ==========================================================
   4. HEADER / MENU PRINCIPAL
   ========================================================== */

header,
.header-principal {
    position: sticky;

    top: 0;

    z-index: 1000;

    width: 100%;

    padding: 9px 0;

    background:
        linear-gradient(
            100deg,
            #020303 0%,
            #070808 50%,
            #020303 100%
        );

    border-bottom:
        1px solid rgba(255,255,255,0.04);

    box-shadow:
        0 5px 20px rgba(0,0,0,0.22);
}


header nav,
.header-principal nav {
    position: relative;

    min-height: 72px;

    display: flex;

    align-items: center;
    justify-content: space-between;
}


/* ================= LOGO ================= */

.logo {
    display: flex;

    align-items: center;

    text-decoration: none;
}


.logo img {
    display: block;

    width: auto;
    height: 66px;

    max-width: 190px;

    object-fit: contain;
}


/* ================= LINKS ================= */

.nav-links {
    display: flex;

    align-items: center;

    gap: 36px;

    margin: 0;
    padding: 0;

    list-style: none;
}


.nav-links li {
    margin: 0;
    padding: 0;
}


.nav-links a {
    position: relative;

    display: block;

    padding: 8px 0;

    color: rgba(255,255,255,0.86);

    text-decoration: none;

    font-size: 0.84rem;
    font-weight: 500;

    text-transform: uppercase;

    transition:
        color 0.3s ease;
}


.nav-links a:not(.btn-gotrix-nav)::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 0;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #8f1119,
            #d9232e
        );

    transform:
        translateX(-50%);

    transition:
        width 0.3s ease;
}


.nav-links a:hover {
    color: #ffffff;
}


.nav-links a:hover::after {
    width: 100%;
}


.nav-links a.ativo {
    color: #df202c;
}


.nav-links a.ativo::after {
    width: 100%;
}


/* ================= GOTRIX MENU ================= */

.btn-gotrix-nav {
    padding: 9px 18px !important;

    background:
        linear-gradient(
            100deg,
            #d9a500,
            #F2B705
        );

    border-radius: 5px;

    color: #111111 !important;

    font-weight: 800 !important;

    text-transform: none !important;

    transition:
        all 0.3s ease;
}


.btn-gotrix-nav::after {
    display: none !important;
}


.btn-gotrix-nav:hover {
    background: #25D366;

    color: #ffffff !important;

    transform:
        translateY(-2px);
}


/* ================= MENU MOBILE ================= */

.menu-icon {
    display: none;

    padding: 8px;

    background: transparent;

    border: none;

    color: #ffffff;

    font-size: 27px;

    cursor: pointer;
}


/* ==========================================================
   5. HERO / SLIDER HOME
   ========================================================== */

.hero-home {
    width: 100%;

    margin: 0;
    padding: 0;

    background: #050505;
}


.hero-slider {
    position: relative;

    width: 100%;

    overflow: hidden;

    background: #050505;
}


.hero-slides {
    position: relative;

    width: 100%;

    aspect-ratio: 2048 / 658;

    background: #050505;
}


.hero-slide {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    opacity: 0;
    visibility: hidden;

    cursor: pointer;

    transition:
        opacity 0.8s ease,
        visibility 0.8s ease;
}


.hero-slide.active {
    z-index: 2;

    opacity: 1;
    visibility: visible;
}


.hero-slide img {
    display: block;

    width: 100%;
    height: 100%;

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


/* ================= SETAS ================= */

.hero-prev,
.hero-next {
    position: absolute;

    top: 50%;

    z-index: 10;

    width: 42px;
    height: 42px;

    display: flex;

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

    transform:
        translateY(-50%);

    background:
        rgba(0,0,0,0.32);

    border:
        1px solid rgba(255,255,255,0.18);

    border-radius: 50%;

    color:
        rgba(255,255,255,0.82);

    font-size: 0.95rem;

    cursor: pointer;

    opacity: 0;

    transition:
        all 0.3s ease;
}


.hero-prev {
    left: 20px;
}


.hero-next {
    right: 20px;
}


.hero-slider:hover .hero-prev,
.hero-slider:hover .hero-next {
    opacity: 1;
}


.hero-prev:hover,
.hero-next:hover {
    background: var(--vermelho-escuro);

    border-color: var(--vermelho-medio);

    color: #ffffff;
}


/* ================= DOTS ================= */

.hero-indicadores {
    position: absolute;

    left: 50%;
    bottom: 14px;

    z-index: 10;

    display: flex;

    align-items: center;

    gap: 7px;

    transform:
        translateX(-50%);
}


.hero-dot {
    width: 7px;
    height: 7px;

    padding: 0;

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

    border: none;

    border-radius: 50%;

    cursor: pointer;

    transition:
        all 0.3s ease;
}


.hero-dot.active {
    width: 24px;

    background:
        var(--vermelho-medio);

    border-radius: 5px;
}


/* ==========================================================
   6. FAIXA DE CONFIANÇA
   ========================================================== */

.faixa-confianca {
    padding: 25px 0;

    background: #f4f7f6;

    border-top:
        3px solid var(--vermelho-escuro);

    border-bottom:
        1px solid #eeeeee;
}


.confianca-grid {
    display: grid;

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

    gap: 20px;

    text-align: center;

    color: #333333;

    font-weight: 700;
}


/* ==========================================================
   7. SERVIÇOS HOME
   ========================================================== */

.servicos-home {
    width: 100%;

    padding:
        0 0 55px;

    background: #ffffff;
}


.servicos-home-header {
    width: 100%;

    margin-bottom: 32px;

    padding:
        21px 20px 24px;

    text-align: center;

    background:
        linear-gradient(
            110deg,
            #07090a 0%,
            #111315 50%,
            #07090a 100%
        );

    border-top:
        3px solid var(--vermelho-escuro);

    border-bottom:
        3px solid var(--vermelho-escuro);

    box-shadow:
        0 5px 15px rgba(0,0,0,0.10);
}


.servicos-home-kicker {
    display: block;

    margin-bottom: 5px;

    color: #d72630;

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 2.3px;

    text-transform: uppercase;
}


.servicos-home-header h2 {
    margin: 0;

    color: #ffffff;

    font-size: 2rem;
    font-weight: 800;

    line-height: 1.2;
}


.servicos-home-grid {
    max-width: 1080px;

    margin: 0 auto;

    display: grid;

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

    gap: 16px;
}


.servico-home-card {
    min-height: 180px;

    padding: 25px 20px;

    display: flex;

    flex-direction: column;

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

    text-align: center;

    background: #fbfbfb;

    border:
        1px solid #e7e7e7;

    border-radius: 5px;

    text-decoration: none;

    box-shadow:
        0 2px 8px rgba(0,0,0,0.025);

    transition:
        all 0.3s ease;
}


.servico-home-card i {
    margin-bottom: 16px;

    color: #99151d;

    font-size: 2.7rem;

    transition:
        all 0.3s ease;
}


.servico-home-card h3 {
    margin-bottom: 8px;

    color: #181818;

    font-size: 1rem;
    font-weight: 700;
}


.servico-home-card p {
    max-width: 190px;

    margin: 0;

    color: #666666;

    font-size: 0.82rem;

    line-height: 1.5;
}


.servico-home-card:hover {
    background: #ffffff;

    border-color:
        var(--vermelho-escuro);

    transform:
        translateY(-5px);

    box-shadow:
        0 9px 22px rgba(0,0,0,0.08);
}


.servico-home-card:hover i {
    color: #d2202f;

    transform:
        scale(1.12);
}


.servicos-home-footer {
    margin-top: 24px;

    text-align: center;
}


.btn-servicos-home {
    display: inline-flex;

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

    gap: 18px;

    padding:
        13px 25px;

    background:
        linear-gradient(
            100deg,
            #8f1119,
            #b81b24
        );

    color: #ffffff !important;

    text-decoration: none;

    font-size: 0.78rem;
    font-weight: 800;

    border-radius: 5px;

    transition:
        all 0.3s ease;
}


.btn-servicos-home:hover {
    background: #25D366;

    transform:
        translateY(-3px);
}


/* ==========================================================
   8. CLIENTES HOME
   ========================================================== */

.clientes-home {
    width: 100%;

    background: #090b0c;

    overflow: hidden;
}


.clientes-home-header {
    width: 100%;

    padding:
        21px 20px 24px;

    text-align: center;

    background:
        linear-gradient(
            110deg,
            #07090a 0%,
            #111315 50%,
            #07090a 100%
        );

    border-top:
        3px solid var(--vermelho-escuro);

    border-bottom:
        3px solid var(--vermelho-escuro);

    box-shadow:
        0 5px 15px rgba(0,0,0,0.12);
}


.clientes-home-kicker {
    display: block;

    margin-bottom: 5px;

    color: #d72630;

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 2.3px;

    text-transform: uppercase;
}


.clientes-home-header h2 {
    margin: 0;

    color: #ffffff;

    font-size: 2rem;
    font-weight: 800;
}


.clientes-home-header h2 span {
    color: #d3202b;
}


.clientes-home-container {
    width: 100%;
    max-width: 1350px;

    margin: 0 auto;

    padding:
        26px 0 29px;
}


.clientes-carousel {
    position: relative;

    width: 100%;

    overflow: hidden;
}


.clientes-carousel::before,
.clientes-carousel::after {
    content: "";

    position: absolute;

    top: 0;

    width: 55px;
    height: 100%;

    z-index: 5;

    pointer-events: none;
}


.clientes-carousel::before {
    left: 0;

    background:
        linear-gradient(
            to right,
            #090b0c,
            transparent
        );
}


.clientes-carousel::after {
    right: 0;

    background:
        linear-gradient(
            to left,
            #090b0c,
            transparent
        );
}


.clientes-lista {
    display: flex;

    align-items: center;

    gap: 14px;

    width: max-content;

    padding: 4px 0;

    animation:
        clientesScroll 30s linear infinite;

    will-change: transform;
}


.clientes-carousel:hover .clientes-lista {
    animation-play-state: paused;
}


.cliente-logo {
    flex:
        0 0 175px;

    width: 175px;
    height: 92px;

    display: flex;

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

    padding: 12px;

    background: #ffffff;

    border:
        1px solid #dedede;

    border-radius: 7px;

    box-shadow:
        0 4px 10px rgba(0,0,0,0.25);

    transition:
        all 0.25s ease;
}


.cliente-logo img {
    display: block;

    max-width: 94%;
    max-height: 70px;

    width: auto;
    height: auto;

    object-fit: contain;
}


.cliente-logo:hover {
    transform:
        translateY(-3px);

    border-color:
        var(--vermelho-escuro);

    box-shadow:
        0 7px 16px rgba(0,0,0,0.35);
}


@keyframes clientesScroll {

    from {
        transform:
            translateX(0);
    }

    to {
        transform:
            translateX(calc(-50% - 7px));
    }
}


/* ==========================================================
   9. GALERIA HOME
   ========================================================== */

.galeria-home {
    padding:
        28px 20px;

    background:
        #f7f7f7;
}


.galeria-home-card {
    max-width: 1080px;

    min-height: 125px;

    margin: 0 auto;

    padding:
        22px 28px;

    display: flex;

    align-items: center;

    gap: 22px;

    background: #ffffff;

    border:
        1px solid #e8e8e8;

    border-radius: 8px;

    box-shadow:
        0 4px 15px rgba(0,0,0,0.04);
}


.galeria-home-icon {
    flex:
        0 0 72px;

    width: 72px;
    height: 72px;

    display: flex;

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

    background:
        #fff0f0;

    border-radius: 50%;
}


.galeria-home-icon i {
    color: var(--vermelho-escuro);

    font-size: 2rem;
}


.galeria-home-texto {
    flex: 1;
}


.galeria-home-texto span {
    display: block;

    margin-bottom: 3px;

    color: var(--vermelho-escuro);

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 1.7px;
}


.galeria-home-texto h2 {
    margin:
        0 0 4px;

    color: #171717;

    font-size: 1.45rem;
    font-weight: 800;
}


.galeria-home-texto p {
    margin: 0;

    color: #555555;

    font-size: 0.82rem;
}


.galeria-home-acao {
    flex-shrink: 0;
}


.galeria-home-acao a {
    display: inline-flex;

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

    gap: 18px;

    padding:
        14px 23px;

    background:
        linear-gradient(
            100deg,
            #8f1119,
            #b81b24
        );

    color: #ffffff !important;

    text-decoration: none;

    font-size: 0.77rem;
    font-weight: 800;

    border-radius: 5px;

    transition:
        all 0.3s ease;
}


.galeria-home-acao a:hover {
    background: #25D366;

    transform:
        translateY(-3px);
}


/* ==========================================================
   10. GOTRIX HOME
   ========================================================== */

.gotrix-home-faixa {
    position: relative;

    width: 100%;

    padding:
        28px 20px;

    overflow: hidden;

    background:
        linear-gradient(
            115deg,
            #050505 0%,
            #080808 55%,
            #111111 100%
        );

    border-top:
        1px solid rgba(242,183,5,0.25);
}


.gotrix-home-faixa::after {
    content: "";

    position: absolute;

    top: -160px;
    right: 5%;

    width: 185px;
    height: 650px;

    background:
        linear-gradient(
            135deg,
            #f2b705,
            #ffcc20
        );

    transform:
        rotate(31deg);

    opacity: 0.95;

    z-index: 0;
}


.gotrix-home-conteudo {
    position: relative;

    z-index: 2;

    min-height: 280px;

    display: grid;

    grid-template-columns:
        1.05fr
        1px
        0.9fr
        1.8fr;

    align-items: center;

    gap: 30px;
}


.gotrix-home-esquerda {
    color: #ffffff;
}


.gotrix-home-chamada {
    display: block;

    color: #ffffff;

    font-size: 1rem;
    font-weight: 600;
}


.gotrix-home-logo {
    display: block;

    width: 100%;
    max-width: 275px;

    height: auto;
}


.gotrix-home-esquerda h2 {
    margin:
        0 0 17px;

    color:
        var(--gotrix-amarelo);

    font-size: 1rem;
}


.gotrix-home-esquerda p {
    max-width: 390px;

    margin: 0;

    color:
        rgba(255,255,255,0.88);

    font-size: 0.92rem;
}


.gotrix-home-divisor {
    width: 1px;
    height: 205px;

    background:
        linear-gradient(
            transparent,
            rgba(242,183,5,0.65),
            transparent
        );
}


.gotrix-home-centro {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 17px;
}


.gotrix-beneficio {
    display: flex;

    align-items: center;

    gap: 16px;

    color: #ffffff;

    font-size: 0.9rem;
}


.gotrix-beneficio i {
    width: 28px;

    color:
        var(--gotrix-amarelo);

    font-size: 1.6rem;

    text-align: center;
}


.btn-gotrix-home {
    display: inline-flex;

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

    padding:
        11px 25px;

    background:
        var(--gotrix-amarelo);

    color:
        #111111 !important;

    text-decoration: none;

    font-size: 0.78rem;
    font-weight: 800;

    border-radius: 5px;

    transition:
        all 0.3s ease;
}


.btn-gotrix-home:hover {
    background:
        #25D366;

    color:
        #ffffff !important;
}


.gotrix-home-imagem {
    position: relative;

    z-index: 3;

    width: 100%;
    height: 315px;

    display: flex;

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


.gotrix-home-imagem img {
    display: block;

    width: 100%;
    max-width: 840px;

    height: 100%;
    max-height: 310px;

    object-fit:
        contain !important;

    transform:
        scale(1.28);

    transform-origin:
        center;

    filter:
        drop-shadow(
            0 14px 18px rgba(0,0,0,0.55)
        );
}


.separador-gotrix-footer {
    height: 20px;

    background: #ffffff;
}


/* ==========================================================
   11. PRODUTOS / CARDS GERAIS
   ========================================================== */

.grid-produtos {
    display: grid !important;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(280px,1fr)
        ) !important;

    gap:
        30px !important;

    margin-top: 40px;
}


.card-produto,
.produto-card {
    position: relative;

    overflow: hidden;

    background: #ffffff;

    border-radius: 10px;

    box-shadow:
        0 8px 25px rgba(0,0,0,0.08);

    transition:
        all 0.3s ease;
}


.card-produto:hover,
.produto-card:hover {
    transform:
        translateY(-8px);

    box-shadow:
        0 15px 30px rgba(0,0,0,0.15);
}


.produto-img {
    width: 100%;
    height: 220px;

    overflow: hidden;
}


.produto-img img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.4s ease;
}


.card-produto:hover .produto-img img,
.produto-card:hover .produto-img img {
    transform:
        scale(1.08);
}


.card-produto h3 {
    margin:
        15px 20px 10px;

    color:
        var(--azul);
}


.card-produto p {
    margin:
        0 20px;
}


.btn-detalhe {
    display: block;

    width: 80%;
    max-width: 200px;

    margin:
        15px auto 20px;

    padding: 10px;

    background:
        var(--azul);

    border: none;

    border-radius: 5px;

    color: #ffffff;

    cursor: pointer;
}


/* ==========================================================
   12. CABEÇALHO PADRÃO PÁGINAS INTERNAS
   ========================================================== */

.page-header {
    width: 100%;

    padding:
        18px 0 20px;

    background:
        linear-gradient(
            110deg,
            #080a0b 0%,
            #111315 50%,
            #090b0c 100%
        );

    border-bottom:
        3px solid var(--vermelho-escuro);

    color: #ffffff;

    box-shadow:
        0 4px 12px rgba(0,0,0,0.10);
}


.page-header h1 {
    margin:
        0 0 3px;

    color: #ffffff;

    font-size: 1.75rem;
    font-weight: 800;
}


.page-header p {
    margin: 0;

    color:
        rgba(255,255,255,0.76);

    font-size: 0.87rem;
}


/* ==========================================================
   13. PÁGINA SOBRE
   ========================================================== */

.pagina-sobre .page-header {
    width: 100%;

    padding:
        36px 0 25px;

    background: #ffffff;

    border: none;

    box-shadow: none;

    color: #171717;
}


.pagina-sobre .page-header h1 {
    position: relative;

    margin:
        0 0 10px;

    padding-bottom: 13px;

    color:
        #171717 !important;

    font-size: 1.8rem;

    font-weight: 800;

    letter-spacing: 0;

    text-transform: none;
}


.pagina-sobre .page-header h1::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 55px;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            #7c0d14,
            #a91620
        );

    border-radius: 2px;
}


.pagina-sobre .page-header p {
    margin: 0;

    color: #666666;

    font-size: 0.9rem;

    line-height: 1.5;
}


.pagina-sobre .section-padding {
    padding-top: 28px;

    padding-bottom: 50px;
}


.pagina-sobre .about-grid {
    display: grid;

    grid-template-columns:
        1.42fr
        0.92fr;

    gap: 42px;

    align-items: stretch;
}


.pagina-sobre .about-grid > div:first-child {
    display: flex;

    flex-direction: column;

    height: 100%;
}


.pagina-sobre .about-grid > div:first-child > img {
    display: block;

    width: 100%;

    height: 355px;

    object-fit: cover;
    object-position: center;

    border-radius: 10px;

    box-shadow:
        0 8px 24px rgba(0,0,0,0.10);
}


.pagina-sobre .about-grid > div:first-child > p {
    margin-top: 24px;

    color: #4f4f4f;

    font-size: 0.94rem;

    line-height: 1.75;

    text-align: justify;
}


/* ================= MISSÃO E VISÃO ================= */

.pagina-sobre .mission-vision {
    display: grid;

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

    gap: 18px;

    margin-top: 30px;
}


.pagina-sobre .mv-item {
    min-height: 150px;

    padding:
        21px 22px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8f8f8
        );

    border:
        1px solid #e7e7e7;

    border-left:
        4px solid var(--vermelho-escuro);

    border-radius: 8px;

    box-shadow:
        0 5px 15px rgba(0,0,0,0.045);

    transition:
        all 0.3s ease;
}


.pagina-sobre .mv-item:hover {
    transform:
        translateY(-4px);

    border-left-color:
        #b91b25;

    box-shadow:
        0 9px 22px rgba(0,0,0,0.08);
}


.pagina-sobre .mv-item i {
    margin-bottom: 9px;

    color:
        var(--vermelho-escuro);

    font-size: 1.7rem;
}


.pagina-sobre .mv-item h4 {
    margin-bottom: 5px;

    color: #171717;

    font-size: 1rem;
    font-weight: 800;
}


.pagina-sobre .mv-item p {
    margin: 0 !important;

    color:
        #606060 !important;

    font-size:
        0.84rem !important;

    line-height:
        1.55 !important;

    text-align:
        left !important;
}


/* ================= DADOS INSTITUCIONAIS ================= */

.pagina-sobre .official-data-card {
    position: relative;

    width: 100%;
    height: 100%;

    min-height: 100%;

    align-self: stretch;

    padding:
        30px 34px;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #050607 0%,
            #0c0e0f 48%,
            #121415 100%
        );

    border:
        1px solid rgba(255,255,255,0.07);

    border-left:
        7px solid var(--vermelho-escuro);

    border-radius: 10px;

    color: #ffffff;

    box-shadow:
        0 10px 28px rgba(0,0,0,0.18);
}


.pagina-sobre .official-data-card::after {
    content: "";

    position: absolute;

    right: -120px;
    bottom: -150px;

    width: 320px;
    height: 320px;

    background:
        radial-gradient(
            circle,
            rgba(143,17,25,0.14),
            transparent 68%
        );

    pointer-events: none;
}


.pagina-sobre .official-data-card h3 {
    position: relative;

    z-index: 2;

    margin:
        0 0 8px !important;

    padding-bottom: 14px;

    border-bottom:
        1px solid rgba(255,255,255,0.24);

    color: #ffffff;

    font-size: 1.05rem;
    font-weight: 800;
}


.pagina-sobre .official-data-card p {
    position: relative;

    z-index: 2;

    margin: 0;

    padding:
        11px 0;

    border-bottom:
        1px solid rgba(255,255,255,0.16);

    color:
        rgba(255,255,255,0.92);

    font-size: 0.87rem;

    line-height: 1.4;
}


.pagina-sobre .official-data-card p:last-child {
    border-bottom: none;
}


.pagina-sobre .official-data-card strong {
    color: #ffffff;

    font-weight: 800;
}


/* ==========================================================
   14. PÁGINA SERVIÇOS
   ========================================================== */

.pagina-servicos .page-header {
    width: 100%;

    padding:
        36px 0 25px;

    background: #ffffff;

    border: none;

    box-shadow: none;

    color: #171717;
}


.pagina-servicos .page-header h1 {
    position: relative;

    margin:
        0 0 10px;

    padding-bottom: 13px;

    color:
        #171717 !important;

    font-size: 1.8rem;

    font-weight: 800;

    letter-spacing: 0;

    text-transform: none;
}


.pagina-servicos .page-header h1::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 55px;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            #7c0d14,
            #a91620
        );

    border-radius: 2px;
}


.pagina-servicos .page-header p {
    margin: 0;

    color: #666666;

    font-size: 0.9rem;

    line-height: 1.5;
}


.pagina-servicos .section-padding {
    padding-top: 28px;

    padding-bottom: 55px;
}


.pagina-servicos .grid-produtos {
    display: grid !important;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(280px,1fr)
        ) !important;

    gap:
        30px !important;

    margin-top: 0;
}


.pagina-servicos .card-produto {
    position: relative;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid #e5e5e5 !important;

    border-top:
        4px solid #08090a !important;

    border-radius: 10px;

    box-shadow:
        0 7px 22px rgba(0,0,0,0.07);

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


.pagina-servicos .card-produto:hover {
    transform:
        translateY(-6px);

    border-color:
        #bdbdbd !important;

    border-top-color:
        var(--vermelho-escuro) !important;

    box-shadow:
        0 12px 28px rgba(0,0,0,0.12);
}


.pagina-servicos .produto-img {
    width: 100%;

    height: 220px;

    overflow: hidden;

    background: #f5f5f5;
}


.pagina-servicos .produto-img img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform 0.4s ease;
}


.pagina-servicos .card-produto:hover .produto-img img {
    transform:
        scale(1.04);
}


.pagina-servicos .card-produto h3 {
    margin:
        16px 20px 8px;

    color:
        #111111 !important;

    font-size: 1.08rem;

    font-weight: 800;

    line-height: 1.3;
}


.pagina-servicos .card-produto > p {
    margin:
        0 20px;

    color: #555555;

    font-size: 0.9rem;

    line-height: 1.55;
}


/* ================= VER DETALHES ================= */

.pagina-servicos .btn-detalhe {
    display: block;

    width:
        calc(100% - 80px);

    max-width: 200px;

    margin:
        18px auto 22px;

    padding:
        10px 18px;

    background:
        linear-gradient(
            110deg,
            #050607,
            #111315
        ) !important;

    border:
        1px solid #111111 !important;

    border-radius: 5px;

    color:
        #ffffff !important;

    text-align: center;

    font-size: 0.82rem;

    font-weight: 800;

    cursor: pointer;

    transition:
        all 0.3s ease;
}


.pagina-servicos .btn-detalhe:hover {
    background:
        var(--vermelho-escuro) !important;

    border-color:
        var(--vermelho-escuro) !important;

    transform:
        translateY(-2px);
}


/* ================= DETALHES ESCONDIDOS ================= */

.pagina-servicos .detalhe-produto {
    display: none;

    margin:
        0 20px 22px;

    padding:
        18px 18px 20px;

    background:
        #f7f7f7;

    border:
        1px solid #e4e4e4;

    border-left:
        4px solid var(--vermelho-escuro);

    border-radius:
        6px;

    color:
        #333333;

    font-size:
        0.88rem;

    line-height:
        1.6;
}


.pagina-servicos .detalhe-produto strong {
    color: #111111;

    font-weight: 800;
}


/* ================= SOLICITAR ORÇAMENTO ================= */

.pagina-servicos .detalhe-produto .btn-cotar-item {
    display: flex;

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

    gap: 9px;

    width: 100%;

    margin-top: 16px;

    padding:
        11px 16px;

    background:
        linear-gradient(
            110deg,
            #050607,
            #111315
        );

    border:
        1px solid #111111;

    border-radius: 5px;

    color:
        #ffffff !important;

    text-decoration: none !important;

    font-size:
        0.82rem;

    font-weight: 800;

    transition:
        all 0.3s ease;
}


.pagina-servicos .detalhe-produto .btn-cotar-item i {
    color: #25D366;
}


.pagina-servicos .detalhe-produto .btn-cotar-item:hover {
    background:
        #25D366;

    border-color:
        #25D366;

    transform:
        translateY(-2px);
}


.pagina-servicos .detalhe-produto .btn-cotar-item:hover i {
    color: #ffffff;
}


/* ==========================================================
   15. PÁGINA GALERIA
   ========================================================== */

.pagina-galeria .page-header {
    width: 100%;

    padding:
        36px 0 25px;

    background:
        #ffffff;

    border: none;

    box-shadow: none;

    color:
        #171717;
}


.pagina-galeria .page-header h1 {
    position: relative;

    margin:
        0 0 10px;

    padding-bottom:
        13px;

    color:
        #171717 !important;

    font-size:
        1.8rem;

    font-weight:
        800;

    letter-spacing:
        0;

    text-transform:
        none;
}


.pagina-galeria .page-header h1::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 55px;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            #7c0d14,
            #a91620
        );

    border-radius: 2px;
}


.pagina-galeria .page-header p {
    margin: 0;

    color:
        #666666;

    font-size:
        0.9rem;

    line-height:
        1.5;
}


.galeria-aviso-section {
    padding:
        70px 20px;

    background:
        #f7f7f7;
}


.galeria-em-desenvolvimento {
    position: relative;

    max-width:
        850px;

    margin:
        0 auto;

    padding:
        60px 50px;

    overflow:
        hidden;

    background:
        #ffffff;

    border:
        1px solid #eeeeee;

    border-radius:
        18px;

    text-align:
        center;

    box-shadow:
        0 15px 40px rgba(0,0,0,0.08);
}


.galeria-em-desenvolvimento::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 6px;

    background:
        var(--vermelho-escuro);
}


.galeria-icon {
    width: 90px;
    height: 90px;

    margin:
        0 auto 25px;

    display: flex;

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

    background:
        #fff1f1;

    border-radius:
        50%;
}


.galeria-icon i {
    color:
        var(--vermelho-escuro);

    font-size:
        38px;
}


.galeria-status {
    display:
        inline-block;

    margin-bottom:
        22px;

    padding:
        8px 20px;

    background:
        #090a0b;

    color:
        #ffffff;

    border-radius:
        30px;

    font-size:
        0.78rem;

    font-weight:
        700;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;
}


.galeria-em-desenvolvimento h2 {
    margin-bottom:
        18px;

    color:
        #171717;

    font-size:
        2rem;

    line-height:
        1.3;
}


.galeria-em-desenvolvimento p {
    max-width:
        680px;

    margin:
        0 auto 15px;

    color:
        #555555;

    font-size:
        1.05rem;

    line-height:
        1.8;
}


.galeria-instagram-texto {
    margin-top:
        20px !important;

    color:
        #333333 !important;

    font-weight:
        500;
}


.galeria-separador {
    width:
        60px;

    height:
        3px;

    margin:
        28px auto;

    background:
        var(--vermelho-escuro);

    border-radius:
        10px;
}


.btn-instagram-galeria {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    margin-top:
        15px;

    padding:
        16px 32px;

    color:
        #ffffff !important;

    text-decoration:
        none;

    font-size:
        1rem;

    font-weight:
        bold;

    border-radius:
        9px;

    background:
        linear-gradient(
            45deg,
            #833ab4,
            #c13584,
            #e1306c,
            #fd1d1d,
            #f77737
        );

    box-shadow:
        0 8px 22px rgba(225,48,108,0.30);

    transition:
        all 0.3s ease;
}


.btn-instagram-galeria:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 13px 28px rgba(225,48,108,0.38);
}


.instagram-handle {
    display:
        block;

    margin-top:
        14px;

    color:
        #888888;

    font-size:
        0.9rem;
}


/* ==========================================================
   16. PÁGINA CONTATO
   ========================================================== */


/* ================= CABEÇALHO ================= */

.pagina-contato .page-header {
    width: 100%;

    padding:
        36px 0 25px;

    background:
        #ffffff;

    border:
        none;

    box-shadow:
        none;

    color:
        #171717;
}


.pagina-contato .page-header h1 {
    position:
        relative;

    margin:
        0 0 10px;

    padding-bottom:
        13px;

    color:
        #171717 !important;

    font-size:
        1.8rem;

    font-weight:
        800;

    letter-spacing:
        0;

    text-transform:
        none;
}


.pagina-contato .page-header h1::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        55px;

    height:
        3px;

    background:
        linear-gradient(
            90deg,
            #7c0d14,
            #a91620
        );

    border-radius:
        2px;
}


.pagina-contato .page-header p {
    margin:
        0;

    color:
        #666666;

    font-size:
        0.9rem;

    line-height:
        1.5;
}


/* ================= ÁREA PRINCIPAL ================= */

.pagina-contato .contato-section {
    padding:
        30px 20px 60px;

    background:
        #f7f7f7;
}


/* ==========================================================
   GRID DO CONTATO

   IMPORTANTE:
   align-items: stretch faz as duas colunas
   terem a mesma altura disponível.
   ========================================================== */

.pagina-contato .contact-wrapper {
    max-width:
        1120px;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        0.95fr
        1.35fr;

    gap:
        38px;

    align-items:
        stretch;
}


/* ==========================================================
   COLUNA ESQUERDA

   O padding-bottom corresponde aproximadamente ao espaço
   interno abaixo do botão no formulário.

   Isso faz o card Atendimento terminar alinhado
   com a base do botão Enviar Mensagem.
   ========================================================== */

.pagina-contato .contact-wrapper > div:first-child {
    display:
        flex;

    flex-direction:
        column;

    min-height:
        100%;

    padding-bottom:
        35px;
}


/* ================= TÍTULO ================= */

.pagina-contato .contact-section-title {
    position:
        relative;

    margin:
        0 0 25px;

    padding-bottom:
        12px;

    color:
        #171717;

    font-size:
        1.45rem;

    font-weight:
        800;
}


.pagina-contato .contact-section-title::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        45px;

    height:
        3px;

    background:
        var(--vermelho-escuro);

    border-radius:
        2px;
}


/* ================= CARDS DE DEPARTAMENTO ================= */

.pagina-contato .info-card-atendimento {
    margin-bottom:
        18px;

    padding:
        22px 24px;

    background:
        #ffffff;

    border:
        1px solid #e5e5e5;

    border-left:
        5px solid #0b0c0d;

    border-radius:
        8px;

    box-shadow:
        0 5px 16px rgba(0,0,0,0.05);

    transition:
        all 0.3s ease;
}


.pagina-contato .info-card-atendimento:hover {
    border-left-color:
        var(--vermelho-escuro);

    transform:
        translateY(-3px);

    box-shadow:
        0 9px 22px rgba(0,0,0,0.09);
}


.pagina-contato .info-card-atendimento h3 {
    margin:
        0 0 15px;

    padding-bottom:
        11px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    border-bottom:
        1px solid #e8e8e8;

    color:
        #151515;

    font-size:
        1rem;

    font-weight:
        800;
}


.pagina-contato .info-card-atendimento h3 i {
    width:
        22px;

    color:
        var(--vermelho-escuro) !important;

    text-align:
        center;
}


.pagina-contato .info-card-atendimento p {
    margin:
        0 0 9px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    color:
        #555555;

    font-size:
        0.88rem;

    line-height:
        1.5;
}


.pagina-contato .info-card-atendimento p:last-child {
    margin-bottom:
        0;
}


.pagina-contato .info-card-atendimento p i {
    width:
        20px;

    color:
        #161718;

    text-align:
        center;
}


.pagina-contato .info-card-atendimento p .fa-whatsapp {
    color:
        #25D366;
}


/* ==========================================================
   CARD DE HORÁRIO

   margin-top:auto empurra o card para baixo dentro
   da coluna esquerda e alinha sua base com o botão.
   ========================================================== */

.pagina-contato .horario-atendimento {
    position:
        relative;

    margin-top:
        auto;

    padding:
        24px 25px;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #050607 0%,
            #0c0e0f 55%,
            #131516 100%
        );

    border:
        1px solid rgba(255,255,255,0.06);

    border-left:
        6px solid var(--vermelho-escuro);

    border-radius:
        9px;

    color:
        #ffffff;

    box-shadow:
        0 8px 22px rgba(0,0,0,0.16);
}


.pagina-contato .horario-atendimento::after {
    content:
        "";

    position:
        absolute;

    right:
        -75px;

    bottom:
        -90px;

    width:
        190px;

    height:
        190px;

    background:
        radial-gradient(
            circle,
            rgba(143,17,25,0.20),
            transparent 70%
        );
}


.pagina-contato .horario-atendimento h4 {
    position:
        relative;

    z-index:
        2;

    margin:
        0 0 9px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        #ffffff;

    font-size:
        0.96rem;

    font-weight:
        800;
}


.pagina-contato .horario-atendimento h4 i {
    color:
        #b51b24;
}


.pagina-contato .horario-atendimento p {
    position:
        relative;

    z-index:
        2;

    margin:
        0;

    color:
        rgba(255,255,255,0.84);

    font-size:
        0.86rem;
}


/* ==========================================================
   FORMULÁRIO
   ========================================================== */

.pagina-contato .contact-form {
    position:
        relative;

    height:
        100%;

    padding:
        32px 35px 35px;

    background:
        #ffffff;

    border:
        1px solid #e5e5e5;

    border-top:
        5px solid #090a0b;

    border-radius:
        10px;

    box-shadow:
        0 9px 26px rgba(0,0,0,0.08);
}


.pagina-contato .contact-form h3 {
    position:
        relative;

    margin:
        0 0 28px;

    padding-bottom:
        12px;

    color:
        #171717;

    font-size:
        1.35rem;

    font-weight:
        800;
}


.pagina-contato .contact-form h3::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        45px;

    height:
        3px;

    background:
        var(--vermelho-escuro);

    border-radius:
        2px;
}


/* ================= CAMPOS ================= */

.pagina-contato .form-group {
    margin-bottom:
        18px;
}


.pagina-contato .form-group label {
    display:
        block;

    margin-bottom:
        7px;

    color:
        #202020;

    font-size:
        0.84rem;

    font-weight:
        700;
}


.pagina-contato .form-group input,
.pagina-contato .form-group textarea {
    display:
        block;

    width:
        100%;

    padding:
        12px 13px;

    background:
        #fbfbfb;

    border:
        1px solid #dddddd;

    border-radius:
        5px;

    color:
        #333333;

    font-size:
        0.92rem;

    outline:
        none;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


.pagina-contato .form-group textarea {
    min-height:
        135px;

    resize:
        vertical;
}


.pagina-contato .form-group input:focus,
.pagina-contato .form-group textarea:focus {
    background:
        #ffffff;

    border-color:
        var(--vermelho-escuro);

    box-shadow:
        0 0 0 3px rgba(143,17,25,0.08);
}


.pagina-contato .form-group input::placeholder,
.pagina-contato .form-group textarea::placeholder {
    color:
        #999999;
}


/* ================= BOTÃO ENVIAR ================= */

.pagina-contato .btn-enviar {
    width:
        100%;

    padding:
        13px 25px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    background:
        linear-gradient(
            110deg,
            #050607,
            #111315
        );

    border:
        1px solid #111111;

    border-radius:
        5px;

    color:
        #ffffff;

    font-size:
        0.84rem;

    font-weight:
        800;

    text-transform:
        uppercase;

    cursor:
        pointer;

    transition:
        all 0.3s ease;
}


.pagina-contato .btn-enviar:hover {
    background:
        #25D366;

    border-color:
        #25D366;

    transform:
        translateY(-2px);

    box-shadow:
        0 7px 16px rgba(37,211,102,0.25);
}


/* ==========================================================
   17. GALERIA INTERNA ANTIGA / MODAL
   ========================================================== */

.grid-galeria {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(280px,1fr)
        );

    gap: 30px;

    margin-top: 40px;
}


.album {
    overflow: hidden;

    background: #ffffff;

    border-radius: 10px;

    cursor: pointer;

    box-shadow:
        0 8px 25px rgba(0,0,0,0.1);

    transition:
        all 0.3s ease;
}


.album:hover {
    transform:
        translateY(-5px);
}


.album img {
    width: 100%;
    height: 220px;

    object-fit: cover;
}


.album h3 {
    padding: 15px;

    text-align: center;
}


.modal {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: none;

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

    background:
        rgba(0,0,0,0.9);
}


.modal.active {
    display: flex;
}


.modal img {
    max-width: 90%;
    max-height: 80%;
}


/* ==========================================================
   18. REVEAL
   ========================================================== */

.reveal {
    opacity: 0;

    transform:
        translateY(40px);

    transition:
        all 0.8s ease;
}


.reveal.ativo,
.reveal.active {
    opacity: 1;

    transform:
        translateY(0);
}


/* ==========================================================
   19. FOOTER
   ========================================================== */

.footer-contato {
    width: 100%;

    background:
        linear-gradient(
            115deg,
            #050708 0%,
            #090c0e 55%,
            #060809 100%
        );

    color: #ffffff;

    border-top:
        1px solid rgba(143,17,25,0.70);
}


.footer-titulo {
    padding-top: 14px;

    margin-bottom: 12px;

    text-align: center;
}


.footer-titulo h2 {
    margin: 0;

    color: #ffffff;

    font-size: 1.45rem;
}


.footer-titulo span {
    display: block;

    width: 48px;
    height: 2px;

    margin:
        4px auto 0;

    background:
        var(--vermelho-escuro);
}


.footer-conteudo {
    max-width: 1000px;

    margin: 0 auto;

    padding-bottom: 12px;

    display: grid;

    grid-template-columns:
        1fr
        1px
        1.2fr;

    gap: 32px;
}


.footer-coluna {
    display: flex;

    flex-direction: column;
}


.footer-bloco + .footer-bloco {
    margin-top: 14px;
}


.footer-bloco h3 {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 4px;

    color: #c6222c;

    font-size: 0.9rem;
}


.footer-bloco h3 i {
    width: 18px;

    text-align: center;
}


.footer-bloco p {
    margin:
        0 0 2px 26px;

    color:
        rgba(255,255,255,0.90);

    font-size:
        0.76rem;
}


.footer-divisor {
    width: 1px;

    background:
        rgba(255,255,255,0.20);
}


.footer-mapa {
    margin-top: 8px;

    margin-left: 26px;

    overflow: hidden;

    background: #ffffff;

    border-radius: 6px;
}


.footer-mapa iframe {
    display: block;

    width: 100%;
    height: 105px;

    border: 0;
}


.footer-links {
    max-width: 1100px;

    margin: 0 auto;

    padding:
        8px 10px 9px;

    display: flex;

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

    gap: 14px;

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

    color:
        rgba(255,255,255,0.80);

    font-size: 0.72rem;
}


.footer-links a {
    color: #ffffff;

    text-decoration: none;

    transition:
        color 0.3s ease;
}


.footer-links a:hover {
    color: #c6222c;
}


.footer-links > span {
    width: 1px;
    height: 12px;

    background:
        rgba(255,255,255,0.30);
}


.footer-links p {
    margin: 0;
}


.footer-copyright {
    width: 100%;

    background:
        linear-gradient(
            90deg,
            #430609,
            #5e090e,
            #420608
        );

    border-top:
        1px solid rgba(143,17,25,0.55);
}


.footer-copyright .container {
    padding-top: 7px;
    padding-bottom: 7px;
}


.footer-copyright p {
    margin: 0;

    text-align: center;

    color:
        rgba(255,255,255,0.80);

    font-size: 0.66rem;
}


.footer-copyright p span {
    display: inline-block;

    width: 1px;
    height: 10px;

    margin:
        0 12px;

    vertical-align: middle;

    background:
        rgba(255,255,255,0.35);
}


/* ==========================================================
   20. WHATSAPP FIXO
   ========================================================== */

.whatsapp-fixed {
    position: fixed;

    right: 30px;
    bottom: 30px;

    z-index: 9999;

    width: 60px;
    height: 60px;

    display: flex;

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

    background: #25D366;

    border-radius: 50%;

    color:
        #ffffff !important;

    font-size: 35px;

    text-decoration: none;

    box-shadow:
        2px 2px 10px rgba(0,0,0,0.3);

    transition:
        all 0.3s ease;
}


.whatsapp-fixed:hover {
    background: #128c7e;

    transform:
        scale(1.1);
}


/* ==========================================================
   21. RESPONSIVO - ATÉ 992PX
   ========================================================== */

@media (max-width: 992px) {

    .servicos-home-grid {
        grid-template-columns:
            repeat(2,1fr);
    }


    .gotrix-home-conteudo {
        grid-template-columns:
            1fr 1fr;
    }


    .gotrix-home-divisor {
        display: none;
    }


    .gotrix-home-imagem {
        grid-column:
            1 / -1;

        height: 270px;
    }

}


/* ==========================================================
   22. RESPONSIVO - ATÉ 900PX
   ========================================================== */

@media (max-width: 900px) {

    .nav-links {
        gap: 20px;
    }


    .nav-links a {
        font-size: 0.76rem;
    }


    .cliente-logo {
        flex:
            0 0 150px;

        width: 150px;
        height: 82px;
    }


    .cliente-logo img {
        max-height: 60px;
    }


    /* SOBRE */

    .pagina-sobre .about-grid {
        grid-template-columns:
            1fr;

        gap: 30px;
    }


    .pagina-sobre .about-grid > div:first-child > img {
        height: auto;
    }


    .pagina-sobre .official-data-card {
        height: auto;

        min-height: 0;
    }


    /* SERVIÇOS */

    .pagina-servicos .grid-produtos {
        grid-template-columns:
            repeat(2,1fr) !important;
    }


    /* CONTATO */

    .pagina-contato .contact-wrapper {
        grid-template-columns:
            1fr;

        gap:
            30px;
    }


    /*
       NO TABLET/CELULAR NÃO PRECISA MAIS
       ALINHAR AS BASES DAS DUAS COLUNAS.
    */

    .pagina-contato .contact-wrapper > div:first-child {
        padding-bottom:
            0;
    }


    .pagina-contato .horario-atendimento {
        margin-top:
            22px;
    }


    .pagina-contato .contact-form {
        height:
            auto;
    }


    /* FOOTER */

    .footer-conteudo {
        grid-template-columns:
            1fr 1fr;
    }


    .footer-divisor {
        display: none;
    }


    .footer-mapa {
        margin-left: 0;
    }

}


/* ==========================================================
   23. RESPONSIVO - ATÉ 768PX
   ========================================================== */

@media (max-width: 768px) {

    /* TOPBAR */

    .topbar-content {
        justify-content: center;

        flex-wrap: wrap;

        gap:
            5px 14px;

        font-size:
            0.7rem;
    }


    /* HEADER */

    header,
    .header-principal {
        padding:
            7px 0;
    }


    .logo img {
        height:
            50px;
    }


    .menu-icon {
        display:
            block;
    }


    .nav-links {
        position:
            absolute;

        top:
            100%;

        left:
            0;

        right:
            0;

        z-index:
            1100;

        display:
            none;

        width:
            100%;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            0;

        padding:
            12px 20px 18px;

        background:
            #050607;

        border-radius:
            0 0 8px 8px;

        box-shadow:
            0 12px 25px rgba(0,0,0,0.40);
    }


    .nav-links.active {
        display:
            flex;
    }


    .nav-links li {
        width:
            100%;

        text-align:
            center;
    }


    .nav-links a {
        padding:
            11px;
    }


    .nav-links a:not(.btn-gotrix-nav)::after {
        display:
            none;
    }


    /* CONFIANÇA */

    .confianca-grid {
        grid-template-columns:
            repeat(2,1fr);
    }


    /* GOTRIX */

    .gotrix-home-conteudo {
        display:
            flex;

        flex-direction:
            column;

        text-align:
            center;
    }


    .gotrix-home-centro {
        align-items:
            center;
    }


    .gotrix-home-imagem {
        width:
            100%;

        height:
            245px;
    }


    .gotrix-home-imagem img {
        max-height:
            235px;

        transform:
            scale(1);
    }


    /* SOBRE */

    .pagina-sobre .page-header {
        padding:
            28px 0 21px;
    }


    .pagina-sobre .page-header h1 {
        font-size:
            1.5rem;
    }


    .pagina-sobre .page-header p {
        font-size:
            0.83rem;
    }


    /* SERVIÇOS */

    .pagina-servicos .page-header {
        padding:
            28px 0 21px;
    }


    .pagina-servicos .page-header h1 {
        font-size:
            1.5rem;
    }


    .pagina-servicos .page-header p {
        font-size:
            0.83rem;
    }


    .pagina-servicos .section-padding {
        padding-top:
            22px;
    }


    /* GALERIA */

    .pagina-galeria .page-header {
        padding:
            28px 0 21px;
    }


    .pagina-galeria .page-header h1 {
        font-size:
            1.5rem;
    }


    .pagina-galeria .page-header p {
        font-size:
            0.83rem;
    }


    .galeria-aviso-section {
        padding:
            45px 15px;
    }


    .galeria-em-desenvolvimento {
        padding:
            45px 22px;

        border-radius:
            14px;
    }


    .galeria-icon {
        width:
            75px;

        height:
            75px;
    }


    .galeria-icon i {
        font-size:
            32px;
    }


    .galeria-em-desenvolvimento h2 {
        font-size:
            1.6rem;
    }


    .galeria-em-desenvolvimento p {
        font-size:
            1rem;
    }


    .btn-instagram-galeria {
        width:
            100%;

        padding:
            15px 20px;
    }


    /* CONTATO */

    .pagina-contato .page-header {
        padding:
            28px 0 21px;
    }


    .pagina-contato .page-header h1 {
        font-size:
            1.5rem;
    }


    .pagina-contato .page-header p {
        font-size:
            0.83rem;
    }


    .pagina-contato .contato-section {
        padding:
            25px 15px 45px;
    }


    .pagina-contato .contact-form {
        padding:
            26px 20px 28px;
    }


    .pagina-contato .contact-section-title {
        font-size:
            1.3rem;
    }


    /* WHATSAPP */

    .whatsapp-fixed {
        width:
            50px;

        height:
            50px;

        right:
            20px;

        bottom:
            20px;

        font-size:
            30px;
    }

}


/* ==========================================================
   24. RESPONSIVO - ATÉ 600PX
   ========================================================== */

@media (max-width: 600px) {

    /* SERVIÇOS HOME */

    .servicos-home-header {
        padding:
            18px 15px 20px;
    }


    .servicos-home-header h2 {
        font-size:
            1.5rem;
    }


    .servicos-home-grid {
        grid-template-columns:
            1fr;
    }


    .btn-servicos-home {
        width:
            100%;
    }


    /* CLIENTES */

    .clientes-home-header {
        padding:
            18px 15px 20px;
    }


    .clientes-home-header h2 {
        font-size:
            1.45rem;
    }


    .cliente-logo {
        flex:
            0 0 130px;

        width:
            130px;

        height:
            72px;
    }


    .cliente-logo img {
        max-height:
            52px;
    }


    .clientes-lista {
        animation-duration:
            26s;
    }


    /* GALERIA HOME */

    .galeria-home-card {
        flex-direction:
            column;

        text-align:
            center;
    }


    .galeria-home-acao {
        width:
            100%;
    }


    .galeria-home-acao a {
        width:
            100%;
    }


    /* SOBRE */

    .pagina-sobre .mission-vision {
        grid-template-columns:
            1fr;
    }


    .pagina-sobre .official-data-card {
        padding:
            25px 22px;
    }


    /* SERVIÇOS */

    .pagina-servicos .grid-produtos {
        grid-template-columns:
            1fr !important;

        gap:
            22px !important;
    }


    .pagina-servicos .produto-img {
        height:
            210px;
    }


    .pagina-servicos .btn-detalhe {
        width:
            calc(100% - 40px);

        max-width:
            none;
    }


    .pagina-servicos .detalhe-produto {
        margin:
            0 15px 20px;

        padding:
            16px;
    }


    /* CONTATO */

    .pagina-contato .info-card-atendimento {
        padding:
            20px;
    }


    .pagina-contato .horario-atendimento {
        padding:
            22px 20px;
    }


    .pagina-contato .btn-enviar {
        width:
            100%;
    }


    /* FOOTER */

    .footer-conteudo {
        display:
            flex;

        flex-direction:
            column;

        text-align:
            center;

        gap:
            20px;
    }


    .footer-bloco h3 {
        justify-content:
            center;
    }


    .footer-bloco p {
        margin-left:
            0;
    }


    .footer-mapa {
        margin-left:
            0;
    }


    .footer-links {
        flex-direction:
            column;

        gap:
            5px;
    }


    .footer-links > span {
        display:
            none;
    }


    .footer-copyright p span {
        display:
            none;
    }

}


/* ==========================================================
   25. ACESSIBILIDADE
   ========================================================== */

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

    html {
        scroll-behavior:
            auto;
    }


    .clientes-lista {
        animation:
            none;
    }


    .hero-slide {
        transition:
            none;
    }


    .reveal {
        opacity:
            1;

        transform:
            none;

        transition:
            none;
    }

}