/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header e Logo */
.header-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
}

.main-logo {
    height: 100px; /* Ajuste conforme necessário */
    margin-bottom: 15px;
    display: block;
}

.main-nav ul {
    display: flex;
    list-style: none;
    gap: 20px;
}

.main-nav a {
    text-decoration: none;
    color: #333;
    font-weight: 700;
}

/* O "QUADRADO" DO VÍDEO (Hero Section) */
.hero-video-section {
    position: relative;
    width: 100%;
    height: 60vh; /* Ajuste a altura do "quadrado" aqui */
    overflow: hidden;
    background: #000;
}

.video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.video-local {
    width: 100%;
    height: 100%;
    /* ENCAIXAR O VÍDEO: Isso faz o vídeo preencher o quadrado sem distorcer */
    object-fit: cover; 
}

/* SOBREPOSIÇÃO DO TEXTO */
/* O conteúdo que fica sobre o vídeo */
.hero-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;      /* Centraliza na vertical */
    justify-content: flex-start; /* MOVE PARA A ESQUERDA na horizontal */
    z-index: 2;
    background: rgba(0, 0, 0, 0.2); /* Sombra leve para destacar o texto */
}

/* Container que envolve o texto */
.hero-container-flex {
    display: flex;
    justify-content: flex-start; /* Alinha o conteúdo à esquerda */
    width: 100%;
    max-width: 1200px;
    margin: 0; /* REMOVA o '0 auto' que centraliza containers */
    padding-left: 50px; /* Dá o espaço do canto da tela */
}

/* O bloco de texto propriamente dito */
.hero-text-align-left {
    text-align: left; /* Garante que o texto dentro do bloco comece na esquerda */
    margin: 0; /* Remove margens que podem estar centralizando o bloco */
    max-width: 600px;
    color: #ffffff;
}
/* ESTILOS DA SEGUNDA PARTE */
.about-detailed {
    padding: 80px 0;
    background-color: #ffffff;
}

.main-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 40px;
}

/* Propósito */
.purpose-block {
    margin-bottom: 50px;
}

.purpose-block h3, .mv-item h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 15px;
}

.purpose-block p, .mv-item p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #444;
}

/* Grid Missão e Visão lado a lado */
.mv-grid {
    display: flex;
    gap: 40px; /* Espaço entre Missão e Visão */
}

.mv-item {
    flex: 1; /* Faz as duas colunas terem o mesmo tamanho */
}

/* Responsividade: No celular, Missão e Visão ficam uma embaixo da outra */
@media (max-width: 768px) {
    .mv-grid {
        flex-direction: column;
    }
}
/* Container que limita a largura do site (deve ser o mesmo em todo o index) */
.container {
    max-width: 1100px; /* Ou a largura que definiu para o seu texto */
    margin: 0 auto;
    padding: 0 20px;
}

/* Garante que a imagem se comporte como o texto acima dela */
.about-image-aligned {
    width: 100%;
    margin-top: 40px;
    display: flex;
    justify-content: center; /* Centraliza se a imagem for menor que o container */
}

.about-image-aligned img {
    width: 100%;       /* Faz a imagem ocupar toda a largura disponível do container */
    max-width: 100%;    /* Impede que ela transborde */
    height: auto;
    border-radius: 5px; /* Arredondamento leve como nas suas imagens */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Ajuste das colunas de Missão e Visão para alinhar com a imagem abaixo */
.mv-grid {
    display: flex;
    gap: 30px;
    margin-bottom: 20px;
}
.values-section {
    padding: 80px 0;
    background-color: #fff;
}

.values-container {
    display: flex;
    gap: 50px;
    align-items: flex-start;
}

/* Coluna de Texto */
.values-text {
    flex: 1;
}

.values-text h2 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 30px;
    color: #1a1a1a;
}

.value-item {
    margin-bottom: 20px;
}

.value-item p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #444;
}

/* Coluna Visual */
.values-visual {
    flex: 1;
}

.image-wrapper {
    position: relative;
    border-radius: 15px;
    overflow: visible; /* Permite que a caixa de stats saia um pouco da foto */
}

.team-photo {
    width: 100%;
    border-radius: 15px;
    display: block;
}

/* Caixa Cinza de Estatísticas */
.stats-box {
    position: absolute;
    bottom: -30px; /* Faz a caixa ficar um pouco "para fora" da imagem */
    left: 50%;
    transform: translateX(-50%);
    background-color: #4a4a4e; /* Cinza escuro da imagem */
    color: white;
    display: flex;
    padding: 25px 40px;
    border-radius: 5px;
    width: 90%;
    justify-content: space-around;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

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

.stat-item .number {
    display: block;
    font-size: 2.2rem;
    font-weight: 800;
}

.stat-item .label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Responsividade */
@media (max-width: 992px) {
    .values-container {
        flex-direction: column;
    }
    .stats-box {
        position: relative;
        bottom: 0;
        margin-top: 20px;
        width: 100%;
    }
}
/* Estilos da Seção de Locação */
.rental-section {
    padding: 80px 0;
    background-color: #ffffff;
}

.rental-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px auto;
}

.rental-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: #1a1a1a;
}

.rental-header p {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.6;
}

/* Grid de Cartões */
.rental-grid {
    display: flex;
    gap: 30px;
}

.rental-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5; /* Fundo cinza claro do texto */
}

.card-text {
    padding: 40px;
    min-height: 180px; /* Garante que os textos alinhem mesmo com tamanhos diferentes */
}

.card-text h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #000;
}

.card-text p {
    font-size: 1rem;
    color: #444;
    line-height: 1.5;
}

.card-image img {
    width: 100%;
    height: 350px;
    object-fit: cover; /* Mantém a proporção da foto sem achatar */
    display: block;
}

/* Responsividade para Celular */
@media (max-width: 768px) {
    .rental-grid {
        flex-direction: column;
    }
    
    .card-image img {
        height: 250px;
    }
}
.rental-grid {
    display: flex;
    gap: 30px; /* Espaço entre os dois cartões */
    justify-content: center;
}

.rental-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Remove qualquer borda ou espaçamento externo que desalinho o conjunto */
    overflow: hidden; 
}

.card-text {
    background-color: #f5f5f5; /* Cinza claro das imagens */
    padding: 40px;
    /* Define uma altura mínima para que os dois blocos cinza fiquem do mesmo tamanho */
    min-height: 200px; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

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

.card-text p {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
}

.card-image {
    width: 100%;
}

.card-image img {
    width: 100%;      /* Força a imagem a ter a mesma largura do bloco cinza */
    height: 350px;    /* Altura fixa para alinhar os dois cartões horizontalmente */
    object-fit: cover; /* Garante que a imagem preencha o espaço sem distorcer */
    display: block;   /* Remove espaço em branco abaixo da imagem */
}

/* Ajuste para ecrãs pequenos (Telemóveis) */
@media (max-width: 768px) {
    .rental-grid {
        flex-direction: column;
    }
}
.testimonials-section {
    background-color: #7d7f82; /* Cor cinza do fundo conforme o exemplo */
    padding: 60px 0;
    color: white;
}

.testimonials-flex {
    display: flex;
    align-items: center; /* Centraliza verticalmente o texto com as fotos */
    justify-content: space-between;
    gap: 50px;
}

/* Mosaico de Imagens */
.mosaic-gallery {
    display: flex;
    gap: 15px;
    flex: 1.2; /* Dá um pouco mais de espaço para a galeria */
}

.mosaic-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mosaic-gallery img {
    width: 100%;
    border-radius: 4px;
    object-fit: cover;
}

/* Bloco de Depoimento */
.testimonial-box {
    flex: 0.8;
    text-align: center;
}

.stars {
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.testimonial-quote {
    font-size: 1.1rem; /* Tamanho menor como solicitado */
    line-height: 1.5;
    margin-bottom: 25px;
    font-weight: 400;
}

/* Container Redondo para a Foto do Cliente */
.testimonial-client {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.client-avatar {
    width: 80px;  /* Tamanho da foto redonda */
    height: 80px;
    border-radius: 50%; /* TORNA REDONDO */
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.3);
}

.client-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.client-name {
    font-weight: 700;
    font-size: 1rem;
}

/* Ajuste Responsivo */
@media (max-width: 768px) {
    .testimonials-flex {
        flex-direction: column;
    }
}
.clients-section {
    padding: 60px 0;
    background-color: #ffffff;
    text-align: center;
}

.clients-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 40px;
    color: #333;
    text-transform: uppercase;
}

.clients-grid {
    display: flex;
    flex-wrap: wrap; /* Permite que os logos quebrem a linha */
    justify-content: center; /* Centraliza os logos horizontalmente */
    align-items: center;
    gap: 20px; /* Espaçamento entre os logos */
    max-width: 1000px;
    margin: 0 auto;
}

.client-logo {
    background: #f9f9f9; /* Fundo leve para destacar logos brancos */
    padding: 15px;
    border-radius: 8px;
    width: 160px; /* Largura fixa para manter a grade uniforme */
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
}

.client-logo:hover {
    transform: scale(1.05); /* Efeito suave ao passar o mouse */
}

.client-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Garante que o logo não seja cortado */
    filter: grayscale(20%); /* Opcional: deixa os logos levemente mais sóbrios */
}

/* Ajuste para dispositivos móveis */
@media (max-width: 768px) {
    .client-logo {
        width: 120px;
        height: 60px;
    }
}
.main-footer {
    background-color: #83858a; /* Cor cinza exata do modelo */
    color: #ffffff;
    padding: 80px 0 40px 0;
    font-size: 0.9rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr 1.5fr; /* Alinhamento das 3 áreas */
    gap: 40px;
    align-items: start;
}

/* Alinhamento do Copyright no rodapé da página */
.footer-bottom-left {
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.copyright {
    font-size: 0.8rem;
    opacity: 0.9;
}

/* Coluna de Contatos */
.footer-label {
    margin-bottom: 20px;
    font-weight: 700;
}

.contact-item {
    margin-bottom: 18px;
    line-height: 1.4;
}

.contact-item a {
    color: #fff;
    text-decoration: none;
    display: block;
}

.footer-social-icons {
    margin-top: 25px;
    font-size: 1.4rem;
}

.footer-social-icons a {
    color: #fff;
    margin-right: 15px;
}

/* Botões Superiores (Ouvidoria/Currículo) */
.top-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}

.btn-action {
    background-color: #ff0000; /* Vermelho vibrante */
    color: #fff;
    padding: 10px 30px;
    border-radius: 25px; /* Arredondado conforme imagem */
    text-decoration: none;
    font-weight: 700;
    font-size: 0.8rem;
    flex: 1;
    text-align: center;
}

/* Estilo do Formulário */
.footer-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.footer-form input, 
.footer-form textarea {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: none;
    margin-bottom: 5px;
    font-family: inherit;
}

.footer-form textarea {
    height: 100px;
    resize: none;
}

.field-error {
    color: #ff4d4d;
    font-size: 0.75rem;
    display: block;
    margin-bottom: 15px;
}

/* Botão Enviar Gigante */
.btn-submit-footer {
    background-color: #ff0000;
    color: #fff;
    border: none;
    padding: 16px;
    width: 100%;
    border-radius: 30px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 10px;
}

/* Ajuste Responsivo */
@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-bottom-left {
        order: 3;
        justify-content: center;
    }
    .top-buttons {
        justify-content: center;
    }
}/* Garante que a grade tenha sempre 3 colunas bem distribuídas */
.rental-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px;
    align-items: stretch; /* Garante que todos os cards tenham a mesma altura */
}

/* Estilização do Card conforme a imagem */
.rental-card {
    display: flex;
    flex-direction: column;
    border-radius: 15px;
    overflow: hidden; /* Corta a imagem nas bordas arredondadas do card */
    background-color: #dcdde1; /* Cinza claro da base */
}

.card-image img {
    width: 100%;
    height: 220px; /* Altura fixa para alinhar todas as fotos horizontalmente */
    object-fit: cover;
    display: block;
}

.card-text {
    padding: 20px;
    text-align: center;
    flex-grow: 1; /* Faz o bloco de texto preencher o espaço restante uniformemente */
}

.card-text h3 {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 10px;
    text-transform: none; /* Mantém como na imagem */
}

.card-text p {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.4;
}

/* Responsividade para manter o alinhamento em telas menores */
@media (max-width: 992px) {
    .rental-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .rental-grid {
        grid-template-columns: 1fr;
    }
}
/* Usamos um nome de classe bem específico para não afetar mais nada */
.site-main-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 15px 0 !important;
    background: #fff !important;
    width: 100% !important;
}

.site-main-header .main-logo {
    height: 70px !important;
    margin-bottom: 10px !important;
}

.site-main-header .main-nav ul {
    display: flex !important;
    gap: 30px !important;
    list-style: none !important;
}/* Cabeçalho centralizado e compacto */
header.header-container, .header-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 0 !important; /* Padding mínimo para reduzir altura */
    width: 100% !important;
    text-align: center !important;
}

/* Ajuste da Logo */
.main-logo {
    height: 60px !important; /* Diminuído para reduzir o volume do header */
    width: auto !important;
    margin: 0 auto 5px auto !important; /* Centraliza horizontalmente e reduz espaço abaixo */
    display: block !important;
}

/* Navegação centralizada */
.main-nav {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

.main-nav ul {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 20px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.main-nav a {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    padding: 5px 10px !important;
}/* HEADER CENTRALIZADO */
.header-main-compact {
    width: 100%;
    padding: 20px 0;
    background: #fff;
    display: flex;
    justify-content: center;
}

.header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo-centered {
    height: 65px;
    margin-bottom: 15px;
}

.nav-centered ul {
    display: flex;
    gap: 25px;
    list-style: none;
}

.nav-centered a {
    text-decoration: none;
    color: #1a1a1a;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: capitalize;
}

/* GRADE DE LOCAÇÃO */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-title {
    text-align: center;
    color: #707070;
    font-size: 2.2rem;
    font-weight: 800;
    margin: 50px 0;
}

.equipment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Colunas */
    gap: 30px;
    padding-bottom: 80px;
}

/* CARD COM PADRÃO CINZA */
.eq-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.eq-img img {
    width: 100%;
    height: 230px;
    object-fit: cover;
}

.eq-desc {
    padding: 25px;
    background: #f4f4f4; /* Fundo cinza */
    flex-grow: 1;
    min-height: 140px;
}

.eq-desc h3 {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 12px;
    color: #222;
}

.eq-desc p {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.5;
}

/* RESPONSIVIDADE */
@media (max-width: 1024px) { .equipment-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 650px) { .equipment-grid { grid-template-columns: 1fr; } }
/* Remove qualquer estilo anterior que esteja quebrando o topo */
.header-universal {
    width: 100% !important;
    background-color: #ffffff !important;
    display: block !important;
    padding: 15px 0 !important;
    border-bottom: 1px solid #eaeaea !important;
    position: relative !important;
    z-index: 1000 !important;
}

.header-inner {
    max-width: 1200px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important; /* Logo em cima, Menu embaixo */
    align-items: center !important;
    justify-content: center !important;
}

.logo-padrao {
    height: 70px !important; /* Tamanho proporcional */
    width: auto !important;
    margin-bottom: 10px !important;
    display: block !important;
}

.nav-padrao ul {
    display: flex !important;
    list-style: none !important;
    gap: 30px !important; /* Espaço entre os itens do guia */
    margin: 0 !important;
    padding: 0 !important;
}

.nav-padrao a {
    text-decoration: none !important;
    color: #1a1a1a !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    font-family: 'Montserrat', sans-serif !important;
}/* Container do Vídeo */
.video-hero-container {
    position: relative;
    width: 100%;
    height: 65vh; /* Altura ideal para telas desktop */
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #000; /* Fundo preto enquanto o vídeo carrega */
}

/* Ajuste Técnico do Vídeo */
.video-element {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1;
    transform: translate(-50%, -50%);
    object-fit: cover; /* Garante que preencha sem distorcer */
}

/* Camada de Contraste (Overlay) */
.video-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45); /* Escurece para destacar o texto branco */
    z-index: 2;
}

/* Centralização do Texto sobre o Vídeo */
.video-text-overlay {
    position: relative;
    z-index: 3;
    color: #ffffff;
    text-align: center; /* Centralização padrão */
    padding: 0 20px;
}

.video-text-overlay h1 {
    font-size: 3.5rem; /* Proporção das imagens de referência */
    font-weight: 800;
    margin-bottom: 10px;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.7);
}

.video-text-overlay p {
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.7);
}
/* Altera as letras para branco na seção de serviços/video */
.hero-text-centered h1, 
.hero-content h1 {
    color: #ffffff !important;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7); /* Recomendado para leitura sobre o vídeo */
}

.hero-text-centered p, 
.hero-content p {
    color: #ffffff !important;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
}/* Garante que o vídeo preencha o espaço sem sobras */
.video-fit {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Corta as bordas para preencher o container perfeitamente */
    display: block;
}

/* Mantém o container da imagem com altura fixa para alinhar com os outros cards */
.card-image {
    height: 250px; /* Ou a altura que você já definiu para as outras fotos */
    overflow: hidden;
}
/* Container da imagem/vídeo com altura fixa */
.card-image {
    width: 100%;
    height: 250px; /* Define a altura padrão para todos os cards */
    overflow: hidden;
    background-color: #000; /* Fundo preto para evitar espaços brancos */
}

/* Padronização universal para Imagens e Vídeos */
.card-image img, 
.card-image .media-padrao {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Corta as sobras e preenche o espaço totalmente */
    display: block;
}

/* Ajuste do texto para manter o padrão visual */
.card-text {
    padding: 20px;
    text-align: center;
    min-height: 150px; /* Garante que os cards tenham o mesmo tamanho de texto */
}/* Container da Grade de 4 Imagens */
.servicos-grid-quatro {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Duas colunas lado a lado */
    gap: 15px; /* Espaço entre as fotos */
    margin-bottom: 20px;
}

/* Padronização das Imagens */
.servico-item {
    width: 100%;
    height: 280px; /* Altura fixa para alinhar todas as fotos */
    border-radius: 15px;
    overflow: hidden;
}

.servico-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Preenche o espaço sem deformar o equipamento */
    display: block;
}

/* Estilo do Bloco de Texto Inferior */
.texto-informativo {
    background-color: #dcdde1; /* Fundo cinza claro conforme imagem */
    padding: 30px;
    border-radius: 0 0 15px 15px;
    margin-top: -5px; /* Encaixe perfeito com as fotos */
}

.texto-informativo h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #1a1a1a;
}

.texto-informativo p {
    font-size: 1rem;
    line-height: 1.6;
    color: #444;
}/* Força a centralização e o tamanho gigante */
.titulo-servicos-exp {
    display: block !important;
    text-align: center !important; /* Centraliza horizontalmente */
    width: 100% !important;
    
    /* Tamanho Exponencial */
    font-size: 80px !important; /* Tamanho fixo grande para teste */
    line-height: 1.1 !important; /* Espaço entre as duas linhas */
    font-weight: 800 !important;
    
    /* Espaçamento exponencial */
    margin-top: 100px !important; 
    margin-bottom: 120px !important; /* Empurra as imagens bem para baixo */
    
    color: #000000 !important;
    clear: both !important; /* Garante que nada nas laterais atrapalhe */
} /* 1. ESPAÇAMENTO ENTRE VÍDEOS E IMAGENS */
.divisor-espaco {
    height: 120px; /* O "buraco" de respiro entre as seções */
}

/* 2. PADRÃO DE CARDS (Topo) */
.container-flex {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.card-modelo-unico {
    width: 380px;
    background: #f8f9fa;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* 3. PADRÃO DA LINHA AMARELA (Seguindo o topo) */
.grid-modelo-amarela {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    max-width: 1100px;
    margin: 0 auto;
}

/* 4. AJUSTE DAS MÍDIAS (Imagens e Vídeos) */
.media-box, .media-box-amarela, .media-box video {
    width: 100%;
    height: 300px; /* Altura idêntica para todos os modelos */
    object-fit: cover !important; /* Preenchimento total sem bordas brancas */
    display: block;
}

.media-box-amarela {
    border-radius: 15px 15px 0 0; /* Arredondado só no topo para colar no bloco cinza */
}

/* 5. TEXTOS E CORES PADRÃO */
.bloco-texto-amarela {
    background-color: #dcdde1; /* Cinza padrão do site */
    padding: 35px;
    border-radius: 0 0 15px 15px;
    max-width: 1100px;
    margin: -5px auto 0 auto;
}

.destaque-maior {
    font-size: 2.3rem !important; /* Aumento exponencial do texto solicitado */
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 10px;
}/* 1. ESPAÇAMENTO ENTRE AS SEÇÕES */
.linha-amarela-secao-ajustada {
    margin-top: 150px !important; /* Espaço massivo solicitado entre vídeo e imagens */
    padding-bottom: 80px;
    background-color: #fff;
}

/* 2. PADRÃO DOS CARDS SUPERIORES */
.container-servicos {
    display: flex;
    justify-content: center;
    gap: 25px;
}

.card-padrao {
    width: 380px;
    height: 450px;
    background: #f4f4f4;
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.media-fill {
    width: 100%;
    height: 250px;
    object-fit: cover; /* Remove bordas cinzas/brancas */
}

/* 3. GRID DA LINHA AMARELA (Mantendo o padrão do site) */
.grid-maquinas-padrao {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

.foto-box {
    height: 320px;
    border-radius: 15px;
    overflow: hidden;
}

.foto-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Preenche o card totalmente */
}

/* 4. BLOCO CINZA E TEXTO AUMENTADO */
.informativo-cinza-padrao {
    background-color: #dcdde1; /* Cinza oficial do padrão */
    padding: 40px;
    border-radius: 0 0 15px 15px;
    max-width: 1100px;
    margin: -5px auto 0 auto; /* Conecta com as imagens de cima */
}

.destaque-texto-maior {
    font-size: 2.2rem !important; /* Aumento exponencial do texto solicitado */
    font-weight: 800;
    margin-bottom: 15px;
    color: #000;
}/* Container que trava o alinhamento lateral */
.bloco-servico-unificado {
    max-width: 1100px;
    margin: 0 auto;
    border-radius: 15px;
    overflow: hidden; /* Corta sobras para alinhar perfeitamente */
}

/* Remove o espaço entre as fotos e o bloco cinza */
.grade-fotos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px; /* Espaço entre fotos, mas margin-bottom deve ser ZERO */
    margin-bottom: 0 !important;
}

.foto-u img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block; /* Remove o espaço fantasma abaixo da imagem */
}

/* O BLOCO CINZA "COLADO" */
.base-cinza-alinhada {
    background-color: #dcdde1; /* Cinza padrão do site */
    padding: 35px 45px;
    margin-top: -5px; /* Sobe o bloco para cobrir qualquer fresta */
    border-radius: 0 0 15px 15px; /* Arredonda apenas o final do bloco */
    width: 100%;
    box-sizing: border-box; /* Garante que o padding não aumente a largura */
}

/* Título com destaque exponencial */
.titulo-destaque {
    font-size: 2.3rem !important;
    font-weight: 800;
    margin-bottom: 15px;
    color: #000;
    line-height: 1.1;
}/* Cabeçalho Ajustado */
.header-site-contato {
    text-align: center;
    padding: 10px 0; /* Espaçamento reduzido */
    background: #fff;
}

.logo-topo {
    max-width: 120px;
    margin-bottom: 5px;
}

.menu-simples a {
    margin: 0 15px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    font-size: 14px;
}

/* Container do Vídeo */
.sessao-contato-video {
    position: relative;
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: 0; /* Cola o vídeo no cabeçalho */
}

.video-bg-contato {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.video-overlay-escuro {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Escurece o vídeo para o texto saltar */
    z-index: -1;
}

/* Estilo do Título e Subtítulo Externos */
.conteudo-contato {
    text-align: center;
    color: #fff;
    z-index: 1;
    width: 100%;
    max-width: 600px;
}

.titulo-externo {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.subtitulo-externo {
    font-size: 1.1rem;
    margin-bottom: 30px;
    line-height: 1.4;
    padding: 0 20px;
}

/* Caixa Branca Aprimorada */
.caixa-branca-form {
    background: #fff;
    padding: 40px;
    border-radius: 30px; /* Bordas bem arredondadas conforme referência */
    color: #333;
    text-align: left;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    margin: 0 20px;
}

.campo-grupo {
    margin-bottom: 20px;
}

.campo-grupo label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #555;
    font-size: 14px;
}

.campo-grupo input, .campo-grupo textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fdfdfd;
}

/* Botão Estilo Pill */
.btn-azul-pill {
    background-color: #2980b9;
    color: #fff;
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 30px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 10px;
}

.btn-azul-pill:hover {
    background-color: #1c5980;
}/* Container de Locação (Padronizado 1100px) */
.secao-container {
    max-width: 1100px;
    margin: 80px auto;
    padding: 0 20px;
}

/* Moldura que unifica fotos e fundo cinza */
.unificado-locacao {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Grade de mídia */
.grade-locacao {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px; /* Espaçamento idêntico ao da Linha Amarela */
}

/* Ajuste do Vídeo no Container */
.box-video-locacao {
    height: 350px;
    background: #000;
}

.video-grid {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Faz o vídeo preencher o card sem sobras */
    display: block;
}

/* Bloco Cinza Inferior (Padrão exato) */
.bloco-informativo-cinza {
    background-color: #dcdde1; /* Cinza das imagens de referência */
    padding: 40px;
    margin-top: -5px; /* Elimina frestas entre vídeo e texto */
}

.bloco-informativo-cinza h2 {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 10px;
    color: #1a1a1a;
}/* Remove qualquer listra ou margem que cause a impressão de corte */
.listra-topo, 
.header-principal {
    border-top: none !important;
    margin-top: 0 !important;
    padding-top: 10px; /* Ajuste apenas para respiro da logo */
}

/* Garante que a seção de locação encoste no cabeçalho */
#locacao {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ajuste do vídeo para preenchimento total do container */
.video-grid, 
.video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Preenche o espaço sem deixar frestas ou listras */
    display: block;
}

/* Se houver um container de borda arredondada, remova a margem superior */
.unificado-locacao {
    border-top-left-radius: 0; /* Remove o arredondamento superior se estiver encostado no menu */
    border-top-right-radius: 0;
    margin-top: 0;
}/* PADRÃO DE FONTE E RESET */
.secao-locacao-index {
    font-family: 'Montserrat', sans-serif;
    padding: 60px 20px;
    background-color: #fff; /* Fundo branco limpo para evitar listras */
    text-align: center;
}

.header-locacao h2 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 10px;
    color: #1a1a1a;
}

.header-locacao p {
    font-size: 16px;
    color: #666;
    max-width: 800px;
    margin: 0 auto 40px auto;
}

/* CENTRALIZAÇÃO DOS DOIS ITENS */
.grid-locacao-central {
    display: flex;
    justify-content: center; /* Centraliza os dois cards no meio da tela */
    gap: 25px;               /* Espaçamento entre os cards */
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

/* ESTILO DO CARD (Texto acima da imagem) */
.card-locacao {
    background: #f4f4f4; /* Fundo cinza claro do card conforme imagem */
    border-radius: 15px;
    overflow: hidden;
    width: 380px;            /* Largura para manter os dois lado a lado */
    display: flex;
    flex-direction: column;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.card-texto-topo {
    padding: 30px 20px;
    min-height: 180px;      /* Garante que os textos alinhem os cards */
}

.card-texto-topo h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
}

.card-texto-topo p {
    font-size: 14px;
    line-height: 1.5;
    color: #444;
}

.card-locacao img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;          /* Remove a fresta/listra de 3px sob a imagem */
}.mosaic-gallery {
    display: flex;
    gap: 10px; /* Espaço entre as colunas */
    padding: 20px;
}

.mosaic-column {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Espaço entre os itens da coluna */
    flex: 1;
}

/* Garante que vídeos e imagens tenham o mesmo comportamento visual */
.mosaic-column img, 
.mosaic-column video {
    width: 100%;
    height: auto;
    border-radius: 10px; /* Mantém o padrão arredondado da tela */
    object-fit: cover;
    display: block;
}/* Container Geral - Reduzimos a largura máxima para centralizar e diminuir */
.mosaic-gallery {
    display: flex;
    gap: 10px;
    max-width: 800px; /* Diminuído de 1100px para 800px */
    margin: 0 auto;   /* Centraliza o mosaico na tela */
    padding: 10px;
}

.mosaic-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

/* Ajuste individual de tamanho para Imagens e Vídeos */
.mosaic-column img, 
.mosaic-column video {
    width: 100%;
    height: 200px;    /* Definimos uma altura menor e fixa para compactar */
    border-radius: 8px; 
    object-fit: cover; /* Garante que o vídeo preencha o espaço sem sobrar listras */
    display: block;
}/* Container que limita o tamanho total da galeria */
.container-mosaico-compacto {
    max-width: 900px; /* Reduzido para não ocupar a tela toda */
    margin: 40px auto;
    padding: 0 20px;
}

.mosaic-gallery {
    display: flex;
    gap: 15px; /* Espaço entre as colunas */
    justify-content: center;
}

.mosaic-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
}

/* Ajuste individual para diminuir as mídias */
.mosaic-column img, 
.mosaic-column video {
    width: 100%;
    height: 180px; /* Altura reduzida para os cards menores */
    object-fit: cover; /* Corta a mídia para preencher o box sem sobras */
    border-radius: 12px; /* Borda arredondada padrão */
    display: block;
}

/* Caso queira uma coluna com um vídeo mais alto (estilo destaque) */
.video-destaque {
    height: 375px !important; /* Soma das duas imagens + gap */
}/* Container Principal reduzido e centralizado */
.container-testimonials-flex {
    max-width: 950px; /* Diminuído para compactar a galeria */
    margin: 0 auto;
    padding: 20px;
}

.mosaic-gallery {
    display: flex;
    gap: 12px; /* Espaço entre as colunas */
    justify-content: center;
}

.mosaic-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

/* Diminuindo o tamanho das imagens e vídeos pequenos */
.mosaic-column img, 
.mosaic-column video {
    width: 100%;
    height: 160px;    /* Altura reduzida para ficar mais compacto */
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

/* Ajuste do vídeo central (Destaque) */
.video-destaque {
    height: 332px !important; /* Altura proporcional à soma dos itens laterais + gap */
}

/* Estrelas de avaliação (opcional, conforme imagem) */
.testimonials-section::after {
    content: "★★★★★";
    display: block;
    text-align: center;
    color: #fff;
    margin-top: 15px;
    font-size: 14px;
    letter-spacing: 2px;
}/* Container expandido para as 5 colunas */
.container-testimonials-flex {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.mosaic-gallery {
    display: flex;
    gap: 8px; /* Espaço reduzido entre colunas para caberem 5 */
    justify-content: center;
}

.mosaic-column {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Espaço reduzido entre os itens da coluna */
    flex: 1;
}

/* Tamanho reduzido para manter o mosaico compacto com 10 mídias */
.mosaic-column img, 
.mosaic-column video {
    width: 100%;
    height: 150px; /* Altura fixa para todos os 10 itens ficarem iguais */
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.rating-stars {
    color: #ffd700;
    text-align: center;
    margin-top: 20px;
    font-size: 22px;
    letter-spacing: 5px;
}#texto-final-ajustado {
    position: absolute !important;
    bottom: 20px !important; /* Valor baixo para encostar no rodapé */
    left: 40px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important; /* Força o conteúdo para a base do container */
    z-index: 999 !important;
    color: #ffffff !important;
    background: none !important; /* Garante que não haja fundo escuro */
}

#texto-final-ajustado h1 {
    margin: 0 !important; /* Remove espaço extra abaixo do título */
    padding: 0 !important;
    font-size: 2.8rem;
    line-height: 1.1;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.9);
}

#texto-final-ajustado p {
    margin-top: 5px !important; /* Pequeno respiro entre título e legenda */
    margin-bottom: 0 !important; /* Garante que a legenda seja a última coisa embaixo */
    font-size: 1.2rem;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.9);
}/* Container que define o padrão do site */
.hero-full-standard {
    position: relative;
    width: 100%;
    height: 85vh; /* Altura padrão para banners hero */
    overflow: hidden;
    background: #000;
}

/* Remove faixas pretas e preenche a largura */
.video-bg-standard {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover; /* Garante preenchimento total sem distorcer */
    z-index: 1;
}

/* Escurecimento total e alinhamento inferior */
.hero-overlay-standard {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45) !important; /* Escurecimento uniforme */
    z-index: 2;
    
    /* Força o texto para a parte inferior esquerda */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 0 0 50px 60px !important; /* Distância da base e lateral */
}

/* Estilização do Texto */
.hero-text-container {
    max-width: 750px;
    color: #ffffff !important;
}

.hero-text-container h1 {
    font-size: 3rem;
    font-weight: 800;
    margin: 0 !important;
    line-height: 1.1;
    text-transform: none;
}

.hero-text-container p {
    font-size: 1.2rem;
    margin: 10px 0 0 0 !important;
    line-height: 1.4;
    opacity: 0.95;
}/* Container principal do rodapé */
.footer-custom {
    width: 100%;
    background-color: #8c8f94; /* Cor cinza do seu print */
    padding: 30px 50px;
    position: relative;
    z-index: 10;
}

/* Alinhamento em coluna para empilhar os elementos */
.footer-container {
    display: flex;
    flex-direction: column; /* Empilha: ícones em cima, texto embaixo */
    align-items: flex-start; /* Alinha tudo à esquerda */
    gap: 10px; /* Espaço entre os ícones e o texto */
}

/* Estilo dos Ícones */
.footer-social-icons {
    display: flex;
    gap: 15px; /* Espaço entre cada ícone lateralmente */
}

.footer-social-icons img {
    width: 22px; /* Tamanho proporcional aos ícones do print */
    height: 22px;
    object-fit: contain;
    filter: brightness(0) invert(1); /* Deixa os ícones brancos */
    transition: opacity 0.3s;
}

.footer-social-icons img:hover {
    opacity: 0.7;
}

/* Estilo do Texto */
.footer-copyright {
    color: #ffffff;
    font-size: 0.85rem;
    margin: 0 !important;
    font-family: sans-serif;
}
/* 1. DISTANCIAMENTO PADRÃO: Aplica o espaço entre o vídeo e TODAS as imagens */
.equipment-grid {
    display: flex;
    justify-content: center;
    gap: 25px; /* Espaço entre os cards */
    flex-wrap: wrap;
    padding-top: 100px !important; /* Aumenta a distância do vídeo sem quebrar os cards */
    margin: 0 auto;
    max-width: 1200px; /* Ajuste conforme a largura do seu site */
}

/* 2. MODELO DO CARD: Mantém o padrão arredondado e com sombra */
.eq-card {
    background: #f9f9f9;
    border-radius: 20px; /* Bordas arredondadas do modelo */
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Sombra suave do padrão */
    width: 350px; /* Largura padrão dos seus cards */
    transition: transform 0.3s ease;
}

/* 3. IMAGEM COMPLETA: Garante que a foto preencha o topo sem sobras */
.eq-img img {
    width: 100%;
    height: 250px; /* Altura padrão para todas as imagens serem iguais */
    object-fit: cover; /* Preenche o espaço sem distorcer a foto */
    display: block;
}/* Media Query para Celulares */
@media (max-width: 480px) {
    
    /* 1. Ajusta o container para empilhar os cards centralizados */
    .equipment-grid {
        display: flex !important;
        flex-direction: column !important; /* Força um card embaixo do outro */
        align-items: center !important;    /* Centraliza os cards horizontalmente */
        padding-top: 60px !important;      /* Mantém a distância perfeita do vídeo */
        gap: 40px;                         /* Espaço entre um card e outro para não grudarem */
    }

    /* 2. Configura o Card para ocupar a tela inteira com margem lateral */
    .eq-card {
        width: 90vw !important;            /* Ocupa 90% da largura da janela do celular */
        max-width: 100%;                   /* Impede que ultrapasse a tela */
        margin: 0 auto !important;         /* Garante a centralização absoluta */
        border-radius: 20px;               /* Mantém o seu modelo arredondado */
        box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Sombra para destacar o card */
    }

    /* 3. Ajusta a imagem dentro do card no mobile */
    .eq-img img {
        width: 100% !important;
        height: 250px !important;          /* Altura fixa para manter o padrão visual */
        object-fit: cover !important;      /* Não deixa a imagem esticar ou sobrar espaço */
    }
}header {
  position: -webkit-sticky; /* Suporte para navegadores mais antigos (Safari) */
  position: sticky;
  top: 0;
  z-index: 1000; /* Garante que a barra fique por cima de outros elementos */
  background-color: #ffffff; /* Defina uma cor de fundo para não ficar transparente */
}.contact-group {
    margin-bottom: 20px;
}

.contact-group p {
    display: flex;         /* Faz o ícone e o texto ficarem na mesma linha */
    align-items: center;   /* Alinha o ícone verticalmente ao centro do texto */
    margin: 5px 0;
    gap: 10px;             /* Espaço entre o ícone e o texto */
}

.contact-group a {
    text-decoration: none;
    color: white;          /* Ou a cor que preferir */
}

.contact-group i {
    width: 18px;           /* Largura fixa para que os textos comecem no mesmo lugar */
    text-align: center;
}