/* =================================
   GERAL E RESET
   ================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    background-color: #fff;
    color: #333;
}

.container {
    max-width: 1200px; /* Keep this for other sections */
    margin: auto;
    overflow: hidden;
}

/* New: Remove max-width and margin from container1 to make it full width */
.container1 {
    max-width: none; /* Make it full width */
    margin: 0; /* Remove auto margin */
    overflow: hidden;
}

.container2 {
    max-width: 1500px; /* Keep this for other sections */
    margin: auto;
    overflow: hidden;
}
/* =================================
   TIPOGRAFIA
   ================================= */
h1, h2, h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #000000; /* verde musgo Corporativo */
    margin-bottom: 1rem;
}

h1 { font-size: 3.5rem; }
h2 { font-size: 2.7rem; }
h3 { font-size: 1.5rem; }

p {
    margin-bottom: 1rem;
    color: #555;
}

a {
    text-decoration: none;
    color: #405a37;
}

/* =================================
   HEADER (CABEÇALHO)
   ================================= */

/* ESTADO PADRÃO (TRANSLÚCIDO COM TEXTO BRANCO) */
.main-header {
    padding: 1rem 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0);
    backdrop-filter: blur(5px);
    transition: background-color 1s ease, box-shadow 1s ease;
}

/* ==============================================================
   ÚNICA ALTERAÇÃO NO CSS ESTÁ AQUI
   A classe .main-header1 agora tem posição fixa e fundo sólido
   ==============================================================
*/

.main-header1 {
    padding: 1rem 0;
    position: fixed; /* Adicionado para fixar no topo */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: #fff; /* Fundo branco sólido */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra suave */
    transition: none; /* Transição não é mais necessária */
}


/* ESTADO SÓLIDO (APÓS ROLAGEM OU HOVER) */
.main-header.header-solid,
.main-header.header-hovered {
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.main-header1 .container1 {
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #000000; /* Cor do texto quando o fundo é sólido: PRETO */
}
.main-header2 .container2 {
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #ffffff; /* Cor do texto quando o fundo é sólido: BRACO */
}

.logo img {
    max-height: 50px;
    width: auto;
    display: block;
}

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

.main-nav ul li {
    margin-left: 2rem;
}


/* TEXTO PADRÃO (BRANCO) */
.main-nav ul li a {
    color: #fff; /* Cor inicial do texto: BRANCO */
    font-weight: 700;
    padding-bottom: 5px;
    border-bottom: 2px solid transparent;
    transition: all 1s ease;
}
.main-nav1 ul {
    list-style: none;
    display: flex;
}

.main-nav1 ul li {
    margin-left: 2rem;
}
.main-nav1 ul li a {
    color: #000000; /* Cor inicial do texto: PRETO */
    font-weight: 700;
    padding-bottom: 5px;
    border-bottom: 2px solid transparent;
    transition: all 1s ease;
}
.main-nav1 ul {
    list-style: none;
    display: flex;
}

.main-nav1 ul li {
    margin-left: 2rem;
}
/* EFEITO HOVER NOS LINKS (OPCIONAL: MUDA COR DA BORDA) */
.main-nav1 ul li a:hover {
    border-bottom-color: #000000;
}

.main-nav1 ul li a.active {
    border-bottom-color: #000000;
}


/* MUDANÇA DA COR DO TEXTO PARA PRETO */
.main-header.header-solid .main-nav ul li a,
.main-header.header-hovered .main-nav ul li a {
    color: #000000; /* Cor do texto quando o fundo é sólido: PRETO */
}

/* EFEITO HOVER NOS LINKS (OPCIONAL: MUDA COR DA BORDA) */
.main-nav ul li a:hover {
    border-bottom-color: #000000;
}

.main-nav ul li a.active {
    border-bottom-color: #fff;
}

.main-header.header-solid .main-nav ul li a.active,
.main-header.header-hovered .main-nav ul li a.active {
    border-bottom-color: #000000;
}

/* =================================
   BOTÕES (CALL TO ACTION - CTA)
   ================================= */
.btn {
    display: inline-block;
    background: #405a377e;
    color: #fff;
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 700;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #50943a;
}

.btn1 {
    display: inline-block;
    background: #000000;
    color: #ffffff;
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 700;
    transition: background-color 0.3s ease;
}

.btn1:hover {
    color: #000000;
}

.featured-btn:hover {
    background-color: #ffffff;
}
/* ========================
    SEÇÃO HERO COM VÍDEO
    ======================= */
.hero {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    color: #fff;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    object-fit: cover;
    filter: brightness(0.6);
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-content h1, .hero-content p {
    color: #fff;
}

.hero-content p {
    font-size: 1.2rem;
    max-width: 600px;
    margin-bottom: 2rem;
}

/* =================================
    SEÇÕES GERAIS E CARDS
    ================================= */
.section {
    padding: 10rem 0;
}

.section-title {
    text-align: center;
    margin-bottom: 3rem;
}

/* New class for left-aligned section title */
.section-title-left {
    text-align: left; /* Aligns text to the left */
    margin-left: 16%; /* Adjust this value as needed to align with your content */
    margin-bottom: 4rem; /* Keep existing bottom margin */
}
.section1 {
    padding: 3rem 0;
}

.section1-title {
    text-align: center;
    margin-bottom: 3rem;
}

/* New class for left-aligned section title */
.section1-title-left {
    text-align: left; /* Aligns text to the left */
    margin-left: 16%; /* Adjust this value as needed to align with your content */
    margin-bottom: 4rem; /* Keep existing bottom margin */
}

/* Adjusted for 4 columns and to start at the edge */
.solutions-grid {
    display: grid;
    /* Changed to 3 columns, adjust minmax for preferred card width */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.card {
    background: #fff; /* Keep card background for separation if needed, but text will be transparent */
    border-radius: 0; /* No border-radius for flush look */
    box-shadow: none; /* Remove shadow if you want it completely flush */
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    display: block; /* Make the whole card clickable */
    color: inherit; /* Inherit text color from parent to avoid blue link color */
}

.card:hover {
    transform: translateY(-5px); /* Keep slight hover effect */
    box-shadow: 0 8pt 20px rgba(0,0,0,0.15); /* Re-introduce shadow on hover for distinction */
}

.card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-content {
    padding: 1.5rem;
}

/* =================================
   PÁGINA DE PROJETOS
   ================================= */
.filter-buttons {
    text-align: center;
    margin-bottom: 2.5rem;
}

.filter-btn {
    background: none;
    border: 2px solid #ddd;
    color: #555;
    padding: 10px 20px;
    margin: 0 5px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 700;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    background-color: #fff;
    border-color: #ccc;
}

.filter-btn.active {
    background-color: #405a37;
    color: #fff;
    border-color: #405a37;
}

.project-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    display: block;
}

.project-card.hide {
    display: none;
}

.project-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.project-card-content {
    padding: 1.5rem;
}

.project-card-content h3 {
    margin-bottom: 0.5rem;
}

.project-category {
    display: inline-block;
    background-color: #e0e0e0;
    color: #555;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 700;
}

/* ===================================================================
   PÁGINA DE SOLUÇÕES - VERSÃO COM BLOCOS ANIMADOS
   =================================================================== */

.solucao-bloco {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    padding: 6rem 0; /* Mais espaçamento vertical para dar respiro */
    border-bottom: 1px solid #eee;

    /* Estilos para o estado inicial da animação */
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Classe que será adicionada via JavaScript para ativar a animação */
.solucao-bloco.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Alterna a ordem da imagem e texto para um layout dinâmico */
.solucao-bloco:nth-child(even) {
    direction: rtl; /* Isso inverte a ordem das colunas */
}
.solucao-bloco:nth-child(even) > div {
    direction: ltr; /* Restaura a direção do texto dentro da coluna */
}

.solucao-imagem img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15); /* Sombra mais pronunciada */
}

.solucao-texto ul {
    list-style: none;
    padding-left: 0;
}

.solucao-texto ul li {
    padding-left: 1.5rem;
    position: relative;
    margin-bottom: 0.5rem;
}

.solucao-texto ul li::before {
    content: '✓';
    color: #405a37; /* Cor principal do seu site */
    font-weight: 700;
    position: absolute;
    left: 0;
}

/* Ajuste de responsividade para os blocos */
@media(max-width: 900px) {
    .solucao-bloco, .solucao-bloco:nth-child(even) {
        grid-template-columns: 1fr;
        direction: ltr; /* Remove a inversão em telas menores */
    }
}
/* =================================
   PÁGINA DE CONTATO
   ================================= */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 3rem;
    background-color: #fff;
    padding: 3rem;
    border-radius: 8px;
    box-shadow: 0 4pt 10px rgba(0,0,0,0.1);
}

.contact-info h3, .contact-form h3 {
    margin-bottom: 2rem;
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.contact-info-item svg {
    width: 24px;
    height: 24px;
    margin-right: 1rem;
    color: #405a37;
    flex-shrink: 0;
}

.map-container {
    margin-top: 2rem;
    height: 600px;
    background-color: #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
}

.form-group textarea {
    resize: vertical;
    height: 150px;
}

/* =================================
   FOOTER (RODAPÉ)
   ================================= */
.main-footer {
    background-color: #000000;
    color: #fff;
    padding: 3rem 0;
    text-align: center;
}

.main-footer .container p {
    color: #ccc;
}

/* =================================
   RESPONSIVIDADE
   ================================= */
@media(max-width: 900px) {
    .solution-section, .solution-section:nth-child(even) {
        grid-template-columns: 1fr;
        direction: ltr;
    }
    .contact-grid {
        grid-template-columns: 1fr;
    }
    /* Adjust for smaller screens: 2 columns */
    .solutions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 600px) {
    /* Adjust for even smaller screens: 1 column */
    .solutions-grid {
        grid-template-columns: 1fr;
    }
}


/* Adjustments for the media cards to handle the overlay */
.media-card {
    position: relative; /* Essential for positioning the overlay */
    overflow: hidden; /* Ensures content outside is hidden */
    border-radius: 0; /* No border-radius for flush look */
    box-shadow: none; /* Remove shadow if you want it completely flush */
    background: none; /* Remove card background */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Keep transition for the lift effect */
}

.media-card:hover {
    transform: translateY(-5px); /* Keep slight hover effect */
    box-shadow: 0 8pt 20px rgba(0,0,0,0.15); /* Re-introduce shadow on hover for distinction */
}


.media-visual-wrapper1 {
    position: relative;
    width: 100%;
    height: 552px; /* Adjust height as needed */
    overflow: hidden;
}

.media-visual-wrapper1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease; /* Smooth zoom effect on image */
}

.media-visual-wrapper1:hover img {
    transform: scale(1.1); /* Add zoom on hover */
}

/* Ensure initial info text is at the bottom */
.media-card-initial-info {
    position: absolute;
    bottom: 0; /* Position at the bottom */
    left: 0;
    width: 100%;
    /* No fixed height here, let content define it initially */
    padding: 1.5rem; /* Consistent padding */
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%); /* Gradient from bottom for readability */
    color: #fff; /* Initial text color */
    z-index: 2; /* Ensure it's above the image */
    text-align: center; /* Center the initial text */
    overflow: hidden; /* Crucial to hide the overflowing text */
    transition: opacity 0.5s ease; /* Animate opacity, height controlled by initial-text-wrapper */
}

/* New: Wrapper for initial visible text */
.initial-text-wrapper {
    /* This will control the initial visible height and then smoothly transition out */
    height: auto; /* Allow content to define height */
    opacity: 1;
    transform: translateY(0);
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.media-card-initial-info h3 {
    color: #fff; /* Text color remains white by default */
    margin-bottom: 0.1rem; /* Reduced margin to bring title and description closer */
}

.media-card-initial-info p {
    color: #fff; /* Text color remains white by default */
    margin-bottom: 0; /* Remove bottom margin to bring text even closer */
    opacity: 0.8;
}


.media-card-title-visible {
    font-size: 1.6rem; /* Increased font size for the initial visible title */
    font-weight: 700;
}

.media-card-description-visible {
    font-size: 0.9rem;
    /* This will be hidden on hover implicitly by the overlay sliding up */
}

/* The overlay will now slide up from the bottom and cover half the card */
/* Re-purpose this to be the full text container that slides up */
.media-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Now covers the full height of the media-visual-wrapper */
    background: linear-gradient(#00000000 10%,#000000 90%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Align content to the bottom */
    align-items: flex-start;
    padding: 1.5rem;
    opacity: 0; /* Still initially hidden, but we'll control its visibility with a different property */
    transform: translateY(100%); /* Start completely below its own height */
    transition: opacity 0.5s ease, transform 0.5s ease;
    z-index: 3;
    text-align: left; /* Ensure text is left-aligned in the overlay */
}

.overlay-text-content {
    color: #fff;
    text-align: left; /* Align text to left */
}

.overlay-text-content h3 {
    color: #fff;
    font-size: 1.8rem; /* Increased font size for the overlay title */
    margin-bottom: 0.5rem; /* Reduced margin */
}

.overlay-text-content p {
    color: #eee;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 0; /* Reduced margin */
}

/* Show overlay and hide initial info on card hover */
.media-card:hover .media-card-overlay {
    opacity: 1;
    transform: translateY(0); /* Slide up to show full text */
}

/* On hover, hide the initial-text-wrapper inside media-card-initial-info */
.media-card:hover .initial-text-wrapper {
    opacity: 0;
    transform: translateY(-20px); /* Move it up slightly as it fades */
}


/* Keep for the "Nossos Pilares" section */
#differentiators .card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4pt 10px rgba(0,0,0,0.1);
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#differentiators .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8pt 20px rgba(0,0,0,0.15);
}

/* New Featured Content Section Styling */
.new-featured-section {
    padding: 4rem 1.5rem; /* Consistent padding */
    background-color: #fff; /* Match body background or a contrasting color */
    margin-top: 200px; /* Added: At least 200px distance from the top */
}

.featured-content-grid {
    display: grid;
    gap: 2rem; /* Space between columns */
    align-items: center; /* Vertically align content in columns */
    max-width: 1300px; /* Added: Set maximum width to 1300px */
    margin: 0 auto; /* Added: Center the grid horizontally */
}

@media (min-width: 900px) { /* Equivalent to lg:grid-cols-12 md:col-span-6 */
    .featured-content-grid {
        grid-template-columns: 1fr 2fr; /* Two columns for larger screens */
    }

    /* To alternate image and text columns */
    .new-featured-section:nth-of-type(odd) .featured-image-col {
        order: 1; /* Image on left */
    }
    .new-featured-section:nth-of-type(even) .featured-image-col {
        order: 2; /* Image on right */
    }
}

.featured-image-col {
    /* Styles for the image column */
    position: relative;
    height: 0;
    padding-bottom: 60%; /* Aspect ratio for responsive image (e.g., 60% height relative to width) */
    overflow: hidden;
    border-radius: 0; /* Changed: No border-radius for the image container */
    box-shadow: 10px 10px 15px rgba(0,0,0,0.3); /* Changed: Shadow to the right and bottom */
}

.featured-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.featured-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the area without distortion */
    display: block;
    border-radius: 0; /* Changed: Ensure no rounded borders */
}

.featured-text-col {
    /* Styles for the text content column */
    padding: 2rem; /* Padding inside the text column */
    background-color: #9bd550; /* White background for text block */
    border-radius: 0; /* Rounded corners */
    box-shadow: 0 4pt 10px rgba(0, 0, 0, 0.281); /* Soft shadow */
}

.featured-eyebrow {
    font-size: 0.9rem;
    font-weight: 700;
    color: #405a37; /* A subtle color for the category/eyebrow text */
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.featured-title {
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: #000000;
}

.featured-description {
    font-size: 1rem;
    color: #000000;
    margin-bottom: 1.5rem;
}



/* Welcome Section Styling */
.welcome-section {
    background-color: #ffffff; /* White background */
    padding: 8rem 1.5rem; /* Consistent padding */
    margin: 2rem 0; /* Some margin top/bottom to separate from other sections */
}

.welcome-grid {
    display: grid;
    grid-template-columns: 1fr 596px; /* Text column (flexible) and fixed image column (596px) */
    gap: 3rem; /* Space between text and image */
    align-items: center; /* Vertically align content */
}

.welcome-text-content {
    /* Styles for the text area */
    padding-right: 2rem; /* Give some space before the image */
}

/* New styles for "Bem-vindo"*/
.welcome-title-bold {
    font-size: 1.5rem; /* Keep original size or adjust as desired for h2 */
    color: #000000;
    margin-bottom: 0.5rem;
    font-weight: 700; /* Make it bold */
    display: inline-block; /* Allows underline to be relative to its width */
    position: relative; /* For positioning the underline */
}

/* New style for the horizontal underline*/
.welcome-underline {
    width: 8.8em; /* Half the width of the "Bem-vindo" text */
    height: 3px; /* Thickness of the line */
    background-color: black; /* Color of the line */
    margin-top: 0; /* Space between text and line */
    margin-bottom: 1.5rem; /* Space below the line before the next text */
    /* If you want it exactly below "Bem-vindo" and only half its width: */
    position: absolute; /* Position relative to .welcome-title-bold's parent (welcome-text-content) */
    left: 22rem; /* Align with the start of the text */
}

/* New styles for "É ótimo te ter aqui"*/
.welcome-greeting-bold {
    font-size: 3rem; /* Larger font size for h1 */
    color: #000000; /* Keep original color or adjust */
    margin-bottom: 1.5rem;
    font-weight: 700; /* Make it bold */
}


.welcome-description {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.8;
}

.welcome-image-wrapper {
    width: 596px; /* Fixed width for the wrapper */
    height: 596px; /* Fixed height for the wrapper */
    overflow: hidden; /* Ensure image doesn't overflow */
    flex-shrink: 0; /* Prevent image from shrinking on flex layout */
}

.welcome-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crop image to fit the square without distortion */
    display: block; /* Remove extra space below image */
    border-radius: 0; /* Ensure no rounded borders */
}

/* Responsive adjustments for Welcome Section */
@media (max-width: 1200px) { /* Adjust grid for smaller screens, if 596px image causes overflow */
    .welcome-grid {
        grid-template-columns: 1fr; /* Stack columns on smaller screens */
        gap: 2rem;
    }
    .welcome-image-wrapper {
        width: 100%; /* Image wrapper takes full width */
        height: auto; /* Height adjusts proportionally */
        max-width: 596px; /* Maintain max-width if desired */
        margin: 0 auto; /* Center image on smaller screens */
    }
    .welcome-image {
        /* object-fit: contain; If you want the whole image to be visible, otherwise cover is fine */
        height: auto; /* Allow height to scale with width */
    }
    .welcome-text-content {
        padding-right: 0; /* Remove right padding when stacked */
        text-align: center; /* Center text when stacked */
    }
    .welcome-title, .welcome-greeting, .welcome-description {
        text-align: center;
    }
    .welcome-underline { /* Center the underline on smaller screens*/
        margin: 5px auto 1.5rem auto; /* Center horizontally with auto margins */
        position: static; /* Remove absolute positioning on mobile for easier centering */
    }
}

@media (max-width: 600px) {
    .welcome-section {
        padding: 2rem 1rem;
    }
    .welcome-title-bold {
        font-size: 2.2rem;
    }
    .welcome-greeting-bold {
        font-size: 1.8rem; /* Adjusted for smaller screens */
    }
    .welcome-description {
        font-size: 1rem;
    }
}

/* Quote Section Styling (Bizerba inspired with specific dimensions - Adjusted for left alignment and text size) */
.quote-section {
    padding: 6rem 1.5rem; /* Ample padding for this prominent section */
    background-color: #fff; /* Light background to differentiate */
    position: relative; /* For the main section to act as a positioning context for any truly page-wide elements */
    overflow: hidden; /* To contain any overflowing elements */
    min-height: 700px; /* Ensure section has enough height for layout, considering image sizes */
    display: flex;
    align-items: center; /* Center content vertically in the section */
}

.quote-main-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default to single column for mobile */
    align-items: center; /* Vertically align content */
    position: relative; /* For z-index over other elements, and possibly as a positioning context itself */
    z-index: 10; /* Ensure grid content is above the background quote if it were here */
    gap: 2rem; /* Gap for stacked layout */
    width: 100%; /* Take full width of container */
}

/* Container for both overlapping images - Left Aligned */
.quote-images-container {
    position: relative; /* Crucial for absolute positioning of child images */
    width: 654px; /* Set width to fit the largest image */
    height: 654px; /* Set height to fit the largest image */
    margin-left: 0; /* Ensure it's flush left on desktop, actual alignment handled by grid below */
    flex-shrink: 0; /* Prevent shrinking in flex contexts */
}

/* Background image (larger) - Left Aligned */
.quote-image-background-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 654px; /* Fixed size */
    height: 654px; /* Fixed size */
    overflow: hidden;
    z-index: 2; /* Below portrait, above background */
    box-shadow: 0 4pt 25px rgba(0,0,0,0.1); /* Add subtle shadow to background image */
}

/* Portrait image (smaller, overlapping) - 40px Up */
.quote-portrait-image-wrapper {
    position: absolute;
    bottom: 40px; /* Moved 40px up from the bottom of the container */
    left: 250px; /* Shift 250px to the right from the container's left */
    width: 478px; /* Fixed size */
    height: 478px; /* Fixed size */
    overflow: hidden;
    z-index: 3; /* Above background image */
    box-shadow: 0 4pt 30px rgba(0,0,0,0.3); /* Stronger shadow for foreground image */
}

.quote-figure {
    width: 100%;
    height: 100%;
}

.quote-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the entire container */
    display: block;
    border-radius: 0; /* Ensure no rounded borders */
}

/* Quote Content Text Block */
.quote-content-wrapper {
    background-color: rgba(255, 255, 255, 0.95); /* Slightly transparent white background for readability */
    padding: 3rem;
    box-shadow: 0 4pt 25px rgba(0,0,0,0.15); /* Add shadow */
    position: relative; /* To control z-index against images on desktop AND for ::before positioning */
    z-index: 4; /* Above both images */
    margin: 0 auto; /* Center on mobile */
    max-width: 600px; /* Limit text width even on wide screens for readability */
}

/* Large background quote icon - NOW IN THE GAP */
.quote-content-wrapper::before {
    content: none; /* Changed from '“' to none */
    /* Other properties can remain or be removed if no longer needed */
    font-family: 'Montserrat', sans-serif;
    font-size: 15rem;
    color: rgba(0, 0, 0, 0.05);
    position: absolute;
    top: 50%;
    left: -150px;
    transform: translate(-50%, -50%);
    line-height: 1;
    z-index: -1;
    pointer-events: none;
    opacity: 0.8;
}


.quote-title-above-quote {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 1rem;
}

.quote-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem; /* Reduced font size (roughly half of 2.2rem from original request) */
    line-height: 1.4;
    font-weight: 700;
    color: #333;
    margin-bottom: 1.5rem;
    position: relative;
}

.quote-text span {
    font-size: 1.5rem; /* Reduced inline quote size (proportional to new quote-text size) */
    line-height: 0;
    vertical-align: middle;
    color: rgba(0,0,0,0.2);
    margin: 0 5px;
}

.quote-author-info {
    margin-top: 1.5rem;
}

.quote-author {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 0.25rem;
}

.quote-role {
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    color: #777;
}


/* --- Desktop Grid Layout for Quote Section - Left Aligned Images --- */
@media (min-width: 992px) { /* Adjust breakpoint for larger desktop layout */
    .quote-main-grid {
        /* This grid defines how the image container and text container sit side-by-side */
        grid-template-columns: minmax(auto, 750px) 1fr; /* Image column slightly wider than 654px to account for overlap, then flexible text column */
        gap: 0; /* No gap, spacing handled by margins/absolute positioning */
        justify-content: start; /* Align grid content to the start (left) */
    }

    .quote-images-container {
        grid-column: 1 / 2;
        grid-row: 1; /* Ensure it stays in the first row */
        position: relative; /* Ensure children are positioned relative to this */
        width: 654px; /* Fixed width of the largest image */
        height: 654px; /* Fixed height of the largest image */
        margin-left: 1.5rem; /* Flush with section padding */
        /* Align self to the start of its grid cell if needed, otherwise default is stretch */
        align-self: start;
    }

    /* Position images absolutely within their container */
    .quote-image-background-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 654px;
        height: 654px;
        z-index: 2;
        box-shadow: 0 4pt 25px rgba(0,0,0,0.1); /* Add subtle shadow to background image */
    }

    .quote-portrait-image-wrapper {
        position: absolute;
        bottom: 40px; /* 40px up from the bottom of the *container* (which is 654px tall) */
        left: 180px; /* 250px from the left edge of its parent (quote-images-container) */
        width: 478px;
        height: 478px;
        z-index: 3;
        box-shadow: 0 4pt 30px rgba(0,0,0,0.3); /* Stronger shadow for foreground image */
    }

    .quote-content-wrapper {
        grid-column: 2 / 3; /* Text column to the right */
        grid-row: 1; /* Same row as images */
        padding: 4rem;
        margin-left: -150px; /* Pull it further left to visually overlap the image container */
        align-self: center; /* Vertically center the text block within its grid cell */
        max-width: none; /* Allow text to take available width of its grid cell */
    }
}

/* Responsive adjustments for Quote Section (Mobile first and then wider screens) */
@media (max-width: 991px) { /* For screens smaller than desktop layout */
    .quote-section {
        padding: 3rem 1rem;
        min-height: auto; /* Remove fixed min-height for mobile stacking */
    }
    .quote-main-grid {
        grid-template-columns: 1fr; /* Stack all items */
        gap: 2rem;
    }

    .quote-images-container {
        width: 100%; /* Take full width on smaller screens */
        height: auto; /* Height adapts to content */
        max-width: 654px; /* Limit max width for background image */
        margin: 0 auto; /* Center the image container on mobile */
        position: relative; /* Important for absolute children */
        padding-bottom: calc(654px / 654px * 100%); /* Maintain aspect ratio based on largest image */
    }

    .quote-image-background-wrapper {
        width: 100%; /* Fill container width */
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        box-shadow: none; /* Remove shadow on mobile */
    }

    .quote-portrait-image-wrapper {
        width: 60%; /* Smaller percentage for overlap on mobile */
        height: auto; /* Adjust height automatically */
        top: auto; /* Remove fixed top */
        bottom: 20px; /* Adjust mobile overlap, 20px up from bottom */
        left: 50%; /* Center relative to background image */
        transform: translateX(-50%); /* Adjust for true centering */
        box-shadow: 0 4pt 15px rgba(0,0,0,0.2); /* Lighter shadow for portrait */
    }

    .quote-content-wrapper {
        padding: 2rem;
        margin-left: 0; /* Remove overlap margin */
        text-align: center; /* Center text on mobile */
        max-width: 100%; /* Allow text to take full width */
    }
    /* Hide the large quote icon on mobile for better layout */
    .quote-content-wrapper::before {
        display: none;
    }
    .quote-title-above-quote {
        font-size: 1.5rem;
    }
    .quote-text {
        font-size: 1.2rem; /* Adjust mobile text size */
    }
    .quote-text span {
        font-size: 1.8rem; /* Adjust mobile inline quote size */
    }
    .quote-author, .quote-role {
        text-align: center;
    }
}
/* --- Configurações Globais e Variáveis --- */
:root {
    --primary-color_01: #005a9e;
    --secondary-color_01: #f4f4f4;
    --text-color_01: #333;
    --white-color_01: #fff;
    --border-radius_01: 0;
    --box-shadow_01: 0 4px 15px rgba(0, 0, 0, 0.1);
}



.container_01 {
    max-width: 1230px; /* Aumentado para caber 3 cards */
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Cabeçalho --- */
.main-header_01 { background-color: var(--white-color_01); padding: 15px 0; border-bottom: 1px solid #ddd; position: sticky; top: 0; z-index: 1000; }
.main-header_01 .container_01 { display: flex; justify-content: space-between; align-items: center; }
.logo_01 { font-size: 1.8em; font-weight: bold; color: var(--primary-color_01); }
.main-nav_01 a { margin: 0 15px; text-decoration: none; color: var(--text-color_01); font-weight: bold; }
.main-nav_01 a:hover { color: var(--primary-color_01); }

/* --- Seção de Filtro --- */
.filter-section_01 { text-align: center; padding: 150px 0; }
.filter-buttons_01 button { background-color: var(--secondary-color_01); border: 1px solid #ccc; color: var(--text-color_01); padding: 10px 20px; margin: 5px; border-radius: var(--border-radius_01); cursor: pointer; font-size: 1em; transition: background-color 0.3s; }
.filter-buttons_01 button:hover { background-color: #ddd; }
.filter-buttons_01 button.active_01 { background-color: var(--primary-color_01); color: var(--white-color_01); border-color: var(--primary-color_01); }

/* --- Grade de Conteúdo --- */
.content-grid_01 {
    display: grid;
    grid-template-columns: repeat(auto-fit, 376px);
    justify-content: center;
    column-gap: 30px;
    row-gap: 0;
    padding-bottom: 50px;
}

/* --- CARD --- */
.card_01 {
    width: 376px;
    height: 670px;
    background-color: var(--secondary-color_01);
    border-radius: var(--border-radius_01);
    box-shadow: var(--box-shadow_01);
    transition: margin-top 0.4s ease-in-out, transform 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
}

.card_01 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* --- EFEITO DE OVERLAY --- */
.card-overlay_01 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0));
    color: var(--white-color_01);
    padding: 20px;
    transition: transform 0.5s ease-in-out;
    transform: translateY(calc(100% - 75px));
}

/* VERSÃO CORRIGIDA COM AS FONTES CERTAS */
.card-title_01 { 
    margin: 0; 
    font-size: 1.8em; 
    font-family: 'Montserrat', sans-serif; /* <-- Fonte do título */
}
.card-description_01 { 
    margin-top: 15px; 
    opacity: 0; 
    transition: opacity 0.5s ease-in-out; 
    font-family: 'Roboto', sans-serif; /* <-- Fonte da descrição */
}
/* --- EFEITO HOVER --- */
.card_01:hover .card-overlay_01 { transform: translateY(0); }
.card_01:hover .card-description_01 { opacity: 1; }
.card_01:hover img { transform: scale(1.05); }

/* --- EFEITO ESCALONADO --- */
.card_01.stagger-down_01 {
    margin-top: 2rem;
}

.card_01:hover {
    transform: translateY(-10px);
}

/* --- Seção de Contato --- */
.contact-section_01 { background-color: var(--secondary-color_01); padding: 50px 0; }
.contact-form_01 { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 15px; }
.contact-form_01 input, .contact-form_01 textarea { width: 100%; padding: 15px; border: 1px solid #ccc; border-radius: var(--border-radius_01); font-size: 1em; }
.contact-form_01 button { background-color: var(--primary-color_01); color: var(--white-color_01); padding: 15px; border: none; border-radius: var(--border-radius_01); cursor: pointer; font-size: 1.1em; font-weight: bold; }

/* --- Rodapé --- */
.main-footer_01 { background-color: #222; color: var(--white-color_01); padding: 30px 0; }
.main-footer_01 .container_01 { display: flex; justify-content: space-between; align-items: center; }
.social-links_01 a { color: var(--white-color_01); text-decoration: none; margin-left: 15px; }

.about-text{
    width: 100%;
}
/* ===================================================================
   SEÇÃO CULTURA - SOLUÇÃO FINAL COM EFEITO FOSCO (IMAGEM E TEXTO)
   =================================================================== */

/* O Container Pai que segura o vídeo e o conteúdo */
.cultura-container-geral {
    display: grid;
    position: relative;
}

/* O vídeo de fundo, agora STICKY e contido pelo pai */
.video-background-sticky {
    grid-area: 1 / 1;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 1;
}

.video-background-sticky video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.2);
}

/* A seção de conteúdo, que rola por cima do vídeo */
.cultura-experience {
    grid-area: 1 / 1;
    position: relative;
    z-index: 2;
    padding: 10vh 0;
    color: #fff;
    background-color: transparent;
}

/* Garante que o sticky funcione */
.cultura-experience > .container2 {
    overflow: visible;
}

/* --- Cabeçalho de Impacto --- */
.experience-header { text-align: center; min-height: 80vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.experience-header h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 6rem;
    color: #fff;
    line-height: 1.1;
    text-shadow: 0 0 10px #ffffff8f, 0 0 20px #ffffff71, 0 0 30px rgba(255, 255, 255, 0.411);
    animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
.experience-header p { font-size: 1.5rem; color: rgba(255, 255, 255, 0.8); max-width: 600px; margin-top: 1rem; animation: text-focus-in 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; }
@keyframes text-focus-in { 0% { filter: blur(12px); opacity: 0; } 100% { filter: blur(0px); opacity: 1; } }

/* --- Valores em Cascata com EFEITO FOSCO --- */
.valores-cascata { padding: 15vh 0; text-align: center; }
.valores-cascata h2 { color: white; font-size: 3rem; margin-bottom: 3rem; }
.valores-grid-animated { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; }
.valor-item {
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 1.5rem;
    border-radius: 12px;
    font-size: 1.2rem;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background 0.3s, border-color 0.3s;
    opacity: 0;
    transform: translateY(30px);
}
.valor-item.is-visible { animation: fadeInUp 0.5s ease-out forwards; }
.valor-item:hover { background: rgb(11 255 0 / 46%); border-color: rgba(255, 255, 255, 0.5);     box-shadow: 0 0 10px #ffffff8f, 0 0 20px #ffffff71, 0 0 30px rgba(255, 255, 255, 0.411);}
.valor-item:nth-child(2) { animation-delay: 0.1s; } .valor-item:nth-child(3) { animation-delay: 0.2s; } .valor-item:nth-child(4) { animation-delay: 0.3s; } .valor-item:nth-child(5) { animation-delay: 0.4s; } .valor-item:nth-child(6) { animation-delay: 0.5s; } .valor-item:nth-child(7) { animation-delay: 0.6s; } .valor-item:nth-child(8) { animation-delay: 0.7s; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

/* --- Jornada Interativa (A) - Design Unificado --- */

/* O "Master Card" que envolve tudo */
.journey-master-panel {
    position: relative;
    padding: 10vh 0;
}

/* NOVO: Overlay que aplica o blur condicionalmente */
.blur-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Fica entre o vídeo e o conteúdo */
    
    /* Inicialmente transparente e sem blur */
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    
    /* Transição suave para o efeito */
    transition: opacity 0.8s ease, backdrop-filter 0.8s ease;
}

/* Classe que o JavaScript irá adicionar para ativar o efeito */
.blur-overlay.is-active {
    opacity: 1;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.journey-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem; /* Espaço entre a imagem e o texto */
    position: relative;
    z-index: 2; /* Fica na frente do overlay do blur */

    /* O painel principal agora tem o visual fosco */
    background: rgba(10, 10, 10, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    padding: 2rem;
}

/* A coluna da imagem agora não tem estilo próprio */
    .journey-visual-sticky {
        position: sticky;
        top: 20vh;
        height: 60vh;
    }
/* --- ESTILOS DO EFEITO FADE PARA AS IMAGENS (VERSÃO CORRIGIDA E SIMPLIFICADA) --- */

.visual-asset {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 16px;
    
    /* Estado inicial: invisível */
    opacity: 0;
    
    /* A transição de 0.4s se aplica tanto ao aparecer (fade-in) quanto ao desaparecer (fade-out) */
    transition: opacity 0.4s ease-in-out;
}

.visual-asset.active {
    /* Estado ativo: visível */
    opacity: 1;
}

/* O texto agora não tem estilo próprio, apenas posicionamento */
.journey-step {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: opacity 0.4s;
    opacity: 0.3;
    /* Removemos background, border, padding, etc. daqui */
}

.journey-step.is-active { opacity: 1; }
.journey-step h3 { font-size: 3.5rem; color: #405a37; text-shadow: 1px 1px 5px rgba(0,0,0,0.5); margin-bottom: 1.5rem; }
.journey-step p { font-size: 1.4rem; line-height: 1.8; color: rgba(255, 255, 255, 0.9); max-width: 500px; text-shadow: 1px 1px 3px rgba(0,0,0,0.5);}


/* --- Responsividade --- */
@media(max-width: 900px) {
    /* Regras Gerais */
    .solution-section, .solution-section:nth-child(even) {
        grid-template-columns: 1fr;
        direction: ltr;
    }
    .contact-grid {
        grid-template-columns: 1fr;
    }
    .solutions-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Regras da Seção de Cultura */
    .experience-header h1 { font-size: 4rem; }
    .journey-section {
        grid-template-columns: 1fr;
        padding: 1.5rem;
    }
    .journey-visual-sticky {
        position: relative;
        top: 0;
        height: 50vh;
        margin-bottom: 2rem;
    }
    .journey-step { min-height: auto; padding-bottom: 20vh; text-align: center; }
}

@media(max-width: 600px) {
    .solutions-grid {
        grid-template-columns: 1fr;
    }
}


/* --- ESTILOS DO EFEITO FADE PARA AS IMAGENS (VERSÃO DEFINITIVA COM DISPLAY) --- */

.visual-asset {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 16px;
    
    /* Começa invisível */
    opacity: 0;
    
    /* A transição de opacidade continua aqui para a animação */
    transition: opacity 0.4s ease-in-out;
}

.visual-asset.active {
    /* O estado ativo agora só controla a opacidade */
    opacity: 1;
}
/* ===================================================================
   NOVA SEÇÃO DE SOLUÇÕES INTERATIVAS
   =================================================================== */

.solucoes-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Duas colunas de larguras iguais */
    gap: 4rem; /* Espaço entre a imagem e o texto */
    padding: 5rem 0;
}

.solucoes-visual {
    position: sticky; /* Efeito "grudento" */
    top: 120px; /* Distância do topo (para não ficar sob o header) */
    height: 70vh; /* Altura da caixa da imagem */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.solucao-visual-asset {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem cubra todo o espaço */
    opacity: 0; /* Começa invisível */
    transition: opacity 0.5s ease-in-out; /* Animação suave de fade */
}

.solucao-visual-asset.active {
    opacity: 1; /* Torna a imagem ativa visível */
}


.solucao-item-texto {
    min-height: 75vh; /* Garante que cada bloco de texto tenha altura suficiente para a rolagem */
    padding: 2rem;
    margin-bottom: 20vh; /* Espaço entre os blocos de texto */
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 3px solid #eee; /* Um detalhe visual sutil */
    transition: border-color 0.4s ease;
}

.solucao-item-texto:last-child {
    margin-bottom: 0; /* Remove a margem do último item */
}

/* Estilo para quando o texto está ativo na tela */
.solucao-item-texto.is-active {
    border-left-color: #405a37; /* Usa a cor principal do seu site */
}

.solucao-item-texto ul {
    list-style: none;
    padding-left: 0;
}

.solucao-item-texto ul li {
    padding-left: 1.5rem;
    position: relative;
    margin-bottom: 0.5rem;
}

.solucao-item-texto ul li::before {
    content: '✓';
    color: #405a37;
    font-weight: 700;
    position: absolute;
    left: 0;
}


/* --- RESPONSIVIDADE PARA A NOVA SEÇÃO --- */
@media(max-width: 900px) {
    .solucoes-container {
        grid-template-columns: 1fr; /* Coluna única em telas menores */
    }

    .solucoes-visual {
        position: relative; /* Remove o efeito sticky */
        top: 0;
        width: 100%;
        height: 50vh; /* Ajusta a altura para o layout empilhado */
        margin-bottom: 2rem;
    }

    .solucao-item-texto {
        min-height: auto; /* Remove a altura mínima */
        margin-bottom: 4rem;
        padding: 1rem 0;
        border-left: none; /* Remove a borda lateral */
    }
}
/* ===================================================================
   PAINEL DE SOLUÇÕES MESTRE - DESIGN INTERATIVO
   =================================================================== */
.master-solucao-container {
    display: grid;
    grid-template-columns: 40% 60%; /* Coluna de conteúdo (40%) e visual (60%) */
    min-height: 80vh; /* Altura mínima para ocupar boa parte da tela */
    background-color: #f4f5f7; /* Fundo cinza claro */
    margin: 0; /* Remove margens para ocupar a largura toda */
    width: 100%;
    max-width: 100%; /* Garante que o container ocupe a largura toda */
    
}

.master-solucao-conteudo {
    padding: 4rem;
    display: flex;
    flex-direction: column;
}

.solucao-seletor {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    border-left: 2px solid #ddd; /* Linha guia vertical */
}

.solucao-seletor-item {
    padding: 1rem 1.5rem;
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s ease;
    color: #666;
    font-weight: 500;
}

.solucao-seletor-item:hover {
    background-color: #e9ebee;
    color: #000;
}

.solucao-seletor-item.active {
    color: #000;
    font-weight: 700;
}

/* Indicador visual para o item ativo */
.solucao-seletor-item.active::before {
    content: '';
    position: absolute;
    left: -2px;
    top: 0;
    height: 100%;
    width: 2px;
    background-color: #405a37; /* Cor principal */
    transition: all 0.4s ease;
}


.solucao-detalhes-wrapper {
    position: relative;
    flex-grow: 1; /* Faz com que o wrapper ocupe o espaço restante */
}

.solucao-detalhe-item {
    /* Esconde os itens inativos e permite animação de fade */
    opacity: 0;
    visibility: hidden;
    position: absolute;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.solucao-detalhe-item.active {
    opacity: 1;
    visibility: visible;
}

.solucao-detalhe-item h3 {
    font-size: 2.2rem;
    margin-bottom: 1rem;
}

.solucao-detalhe-item p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    max-width: 90%; /* Limita a largura do texto para melhor leitura */
}

.solucao-detalhe-item ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 2rem;
}
.solucao-detalhe-item ul li {
    padding-left: 1.5rem;
    position: relative;
    margin-bottom: 0.5rem;
}
.solucao-detalhe-item ul li::before {
    content: '✓';
    color: #405a37;
    font-weight: 700;
    position: absolute;
    left: 0;
}

/* ÁREA VISUAL */
.master-solucao-visual {
    position: relative;
    overflow: hidden;
}

.solucao-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(1.05); /* Começa com um leve zoom */
}
.solucao-bg-image.active {
    opacity: 1;
    transform: scale(1); /* Traz ao zoom normal quando ativo */
    transition: opacity 0.7s ease, transform 10s cubic-bezier(0.2, 0.8, 0.2, 1); /* Animação de zoom lento */
}
.solucao-bg-image.active:hover {
    transform: scale(1.02); /* Leve zoom no hover para feedback */
}

.visual-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(244,245,247,0.4) 0%, rgba(244,245,247,0) 30%); /* Gradiente suave para fundir com o conteúdo */
}


/* --- RESPONSIVIDADE PARA O PAINEL MESTRE --- */
@media(max-width: 900px) {
    .master-solucao-container {
        grid-template-columns: 1fr; /* Coluna única em telas menores */
    }

    .master-solucao-visual {
        grid-row: 1; /* Coloca a imagem no topo */
        min-height: 40vh;
    }

    .master-solucao-conteudo {
        padding: 2rem;
    }
}
/* Adicione esta linha ao seletor já existente no seu CSS */

.solucao-detalhes-wrapper {
    position: relative;
    flex-grow: 1; 
    transition: height 0.4s ease-in-out; /* <-- ADICIONE ESTA LINHA */
}
/* Modifique ou adicione esta regra no início do seu CSS */
body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    background-color: #fff; /* Garante o fundo branco padrão */
    color: #333;
}
/* ===================================================================
   PAINEL DE SOLUÇÕES MESTRE - VERSÃO COMPACTA E AJUSTADA
   =================================================================== */

/* Keyframe para a animação de entrada do conteúdo */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Keyframe para o efeito Ken Burns (zoom lento) na imagem */
@keyframes kenBurns {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.08);
    }
}

.master-solucao-container {
    display: grid;
    grid-template-columns: 40% 60%; 
    min-height: auto; /* AJUSTADO: Remove a altura mínima para deixar o conteúdo ditar o tamanho */
    background-color: #ffffff; 
    margin: 2.5rem auto; /* AJUSTADO: Margem vertical reduzida */
    width: 100%;
    max-width: 1400px; /* AJUSTADO: Largura máxima um pouco menor */
    border: 1px solid #e8e8e8; 
    border-radius: 8px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.04); 
    overflow: hidden; 
}

.master-solucao-conteudo {
    padding: 2.5rem 3rem; /* AJUSTADO: Espaçamento interno reduzido */
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e8e8e8; 
}

.solucao-seletor {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0; /* AJUSTADO: Margem inferior reduzida */
}

.solucao-seletor-item {
    padding: 1rem 1.25rem; /* AJUSTADO: Espaçamento do seletor reduzido */
    cursor: pointer;
    position: relative;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    color: #555; 
    font-weight: 500;
    font-size: 1rem; /* AJUSTADO: Tamanho da fonte do seletor reduzido */
    border-radius: 5px; 
    margin-bottom: 0.5rem;
}

.solucao-seletor-item:hover {
    color: #000;
    transform: translateX(5px); 
}

.solucao-seletor-item.active {
    background-color: #405a37;
    color: #ffffff;
    font-weight: 700;
    transform: translateX(0);
    box-shadow: 0 5px 15px rgba(64,90,55,0.2);
}

.solucao-seletor-item.active::before {
    display: none;
}

.solucao-seletor-item .numero {
    margin-right: 0.75rem; /* AJUSTADO: Margem do número reduzida */
    font-weight: 700;
    color: #000000;
    transition: color 0.3s ease;
}
.solucao-seletor-item.active .numero {
    color: rgb(255, 255, 255);
}

.solucao-detalhes-wrapper {
    position: relative;
    flex-grow: 1;
    transition: height 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); 
}

.solucao-detalhe-item {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.solucao-detalhe-item.active {
    opacity: 1;
    visibility: visible;
}

.solucao-detalhe-item.active > * {
    animation: fadeInUp 0.6s ease-out backwards;
}
.solucao-detalhe-item.active p { animation-delay: 0.1s; }
.solucao-detalhe-item.active ul { animation-delay: 0.2s; }
.solucao-detalhe-item.active .btn { animation-delay: 0.3s; }

.solucao-detalhe-item h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.2rem; /* AJUSTADO: Tamanho do título reduzido */
    margin-bottom: 0.75rem; /* AJUSTADO: Margem inferior reduzida */
}

.solucao-detalhe-item p {
    font-size: 1rem; /* AJUSTADO: Tamanho da fonte do parágrafo reduzido */
    line-height: 1.7;
    margin-bottom: 1.5rem; /* AJUSTADO: Margem inferior reduzida */
    max-width: 100%; 
}

.solucao-detalhe-item ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 2rem; /* AJUSTADO: Margem inferior reduzida */
}
.solucao-detalhe-item ul li {
    padding-left: 1.5rem;
    position: relative;
    margin-bottom: 0.5rem; /* AJUSTADO: Margem entre itens da lista reduzida */
    font-size: 0.95rem; /* AJUSTADO: Tamanho da fonte da lista reduzido */
}
.solucao-detalhe-item ul li::before {
    content: '✓';
    color: #405a37;
    font-weight: 700;
    position: absolute;
    left: 0;
}

.solucao-detalhe-item .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* ÁREA VISUAL */
.master-solucao-visual {
    position: relative;
    overflow: hidden;
}

.solucao-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(1.08);
}
.solucao-bg-image.active {
    opacity: 1;
    animation: kenBurns 15s ease-in-out infinite alternate;
}

.visual-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 30%);
    pointer-events: none; 
}

/* --- RESPONSIVIDADE --- */
@media(max-width: 1200px) {
    .master-solucao-container {
        grid-template-columns: 45% 55%; 
        margin: 2rem 1rem;
    }
}
@media(max-width: 900px) {
    .master-solucao-container {
        grid-template-columns: 1fr; 
        margin: 1.5rem;
        border: 1px solid #e8e8e8;
    }

    .master-solucao-visual {
        grid-row: 1; 
        min-height: 35vh; /* AJUSTADO: Altura da imagem em telas menores reduzida */
    }

    .master-solucao-conteudo {
        padding: 2rem;
        border-right: none;
    }
    
    .solucao-detalhe-item h3 {
        font-size: 2rem;
    }
}

/* --- RESPONSIVIDADE PARA O PAINEL MESTRE --- */
@media(max-width: 900px) {
    .master-solucao-container {
        grid-template-columns: 1fr; 
    }

    .master-solucao-visual {
        grid-row: 1; 
        min-height: 40vh;
    }

    .master-solucao-conteudo {
        padding: 2.5rem 2rem;
    }

    .solucao-detalhe-item h3 {
        font-size: 2rem;
    }
}.page-header {
    /* Define a imagem de fundo da sua pasta, com um gradiente escuro por cima */
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('images/capacidades.jpg') no-repeat center center/cover;
    
    /* Estilos para o espaçamento e alinhamento */
    padding: 8rem 0 6rem 0; /* Aumentei um pouco o padding inferior para mais respiro */
    text-align: center;
    
    /* A cor do texto principal e do parágrafo será branca */
    color: #fff; 
}

.page-header h1 {
    /* O título h1 também será branco para contrastar com o fundo */
    color: #ffffff; 
}

/* Opcional: Adiciona uma sombra sutil ao texto para destacá-lo ainda mais */
.page-header h1, .page-header p {
    text-shadow: 0 0 10px #ffffff8f, 0 0 20px #ffffff71, 0 0 30px rgba(255, 255, 255, 0.411);
}
/* ===================================================================
   ESTILOS ADICIONAIS PARA A PÁGINA DE PROJETOS (NOVOS)
   =================================================================== */

/* --- SEÇÃO DE PROJETO EM DESTAQUE --- */
.featured-project-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    padding: 10rem 0 6rem 0; /* Espaçamento vertical */
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 4rem;
}

.featured-project-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px; /* Bordas levemente arredondadas */
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.featured-project-content .eyebrow-text {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: #405a37; /* Cor primária */
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.featured-project-content .featured-project-title {
    font-size: 2.8rem;
    margin-bottom: 1rem;
}

.featured-project-content p {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.project-tags span {
    display: inline-block;
    background-color: #e9ecef;
    color: #555;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 500;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

/* --- SEÇÃO DE FILTRO APRIMORADA --- */
.filter-section_01 {
    text-align: center;
    padding: 0 0 4rem 0; /* Reduzido o padding superior */
}

.filter-section_01 h2 {
    font-size: 2.5rem;
}

.filter-section_01 p {
    color: #666;
    margin-bottom: 2rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.filter-buttons_01 .filter-btn_01 {
    background: transparent;
    border: 1px solid #ccc;
    color: #555;
    padding: 10px 25px;
    margin: 0 8px;
    border-radius: 20px; /* Botões mais arredondados */
    cursor: pointer;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.filter-buttons_01 .filter-btn_01:hover {
    background-color: #f1f1f1;
    border-color: #aaa;
    transform: translateY(-2px);
}

.filter-buttons_01 .filter-btn_01.active_01 {
    background-color: #000000;
    color: #fff;
    border-color: #000000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* --- NOVA GALERIA DE PROJETOS E CARDS --- */
.project-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Grid responsivo */
    gap: 2rem;
    padding-bottom: 6rem;
}

.project-card-new {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.07);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: auto; /* Altura automática */
    margin: 0; /* Remove a margem do efeito stagger antigo */
}

.project-card-new:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.project-card-image {
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.project-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.project-card-new:hover .project-card-image img {
    transform: scale(1.05); /* Efeito de zoom sutil na imagem */
}

.project-card-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.project-card-category {
    font-size: 0.8rem;
    font-weight: 700;
    color: #405a37;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.project-card-title {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    color: #333;
}

.project-card-description {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 0;
}

/* --- REMOVENDO O OVERLAY ANTIGO E EFEITOS DESNECESSÁRIOS --- */
.card_01.stagger-down_01 {
    margin-top: 0; /* Desativa o efeito escalonado */
}
.card_01 .card-overlay_01 {
    display: none; /* Esconde o overlay antigo */
}


/* --- RESPONSIVIDADE PARA AS NOVAS SEÇÕES --- */
@media (max-width: 900px) {
    .featured-project-section {
        grid-template-columns: 1fr; /* Coluna única em telas menores */
        padding: 8rem 0 4rem 0;
    }
}

@media (max-width: 768px) {
    .project-gallery-grid {
        grid-template-columns: 1fr; /* Uma coluna em telas muito pequenas */
    }
}
/* =================================
   NOVA PÁGINA DE CONTATO (REVAMPED)
   ================================= */

/* Header da Página de Contato */
.page-header.contact-header {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('images/fachada1.jpg') no-repeat center center/cover;
    padding: 10rem 0;
    text-align: center;
}
.page-header.contact-header h1 {
    color: #fff;
    font-size: 3.2rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.page-header.contact-header p {
    color: rgba(255, 255, 255, 0.9);
    max-width: 700px;
    margin: 1rem auto 0;
    font-size: 1.2rem;
}

/* Wrapper principal da seção */
.contact-section-wrapper {
    padding: 5rem 0;
    background-color: #f8f9fa; /* Um cinza bem claro para o fundo */
}

/* Grid Revamp */
.contact-grid-revamped {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Coluna de info menor que a de form */
    gap: 4rem;
    background-color: #fff;
    padding: 3rem;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    margin-bottom: 4rem;
}

.contact-info-col h2, .contact-form-col h2 {
    font-size: 2rem;
    color: #000;
    margin-bottom: 0.5rem;
}
.contact-info-col p {
    margin-bottom: 2.5rem;
    color: #666;
}

/* Itens de Contato Interativos */
.contact-info-item-revamped {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
}
.contact-info-item-revamped:hover {
    color: #405a37; /* Cor verde do site */
}
.contact-info-item-revamped i {
    font-size: 1.8rem;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #f1f1f1;
    border-radius: 50%;
    transition: all 0.3s ease;
}
.contact-info-item-revamped:hover i {
    background-color: #405a37;
    color: #fff;
}
.contact-info-item-revamped div {
    display: flex;
    flex-direction: column;
}
.contact-info-item-revamped strong {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.2rem;
}
.contact-info-item-revamped span {
    color: #555;
}

/* Seção de Selos de Confiança */
.contact-trust-seals {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #e9ecef;
}
.contact-trust-seals h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}
.seals-container img {
    max-height: 80px;
    width: auto;
    opacity: 0.8;
}

/* Estilo do Formulário */
.contact-form-col .form-group {
    margin-bottom: 1.5rem;
}
.contact-form-col label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 700;
    font-size: 0.9rem;
}
.contact-form-col input,
.contact-form-col textarea {
    width: 100%;
    padding: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
}
.contact-form-col input:focus,
.contact-form-col textarea:focus {
    outline: none;
    border-color: #405a37;
    box-shadow: 0 0 0 3px rgba(64, 90, 55, 0.2);
}
.contact-form-col textarea {
    resize: vertical;
    min-height: 150px;
}

/* Botão de Envio */
.btn-submit-revamped {
    display: inline-block;
    width: 100%;
    background: #000000;
    color: #fff;
    padding: 16px 30px;
    border-radius: 5px;
    font-weight: 700;
    font-size: 1.1rem;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-submit-revamped:hover {
    background: #405a37;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Mapa no final */
.map-container-full {
    margin-top: 4rem;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}
.map-container-full h3 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 2rem;
}

/* Responsividade */
@media(max-width: 900px) {
    .contact-grid-revamped {
        grid-template-columns: 1fr;
        gap: 3rem;
        padding: 2rem;
    }
}
/* =================================
   PÁGINA DE CONTATO (ESTILO REVAMPED)
   ================================= */

/* Header específico da página de contato */
.page-header.contact-header {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('images/fachada1.jpg') no-repeat center center/cover;
    padding: 10rem 0;
    text-align: center;
}
.page-header.contact-header h1 {
    color: #fff;
    font-size: 3.2rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.page-header.contact-header p {
    color: rgba(255, 255, 255, 0.9);
    max-width: 700px;
    margin: 1rem auto 0;
    font-size: 1.2rem;
}

/* Wrapper principal da seção de contato */
.contact-section-wrapper {
    padding: 5rem 0;
    background-color: #f8f9fa; /* Fundo cinza claro para destacar o conteúdo */
}

/* Estrutura do grid de conteúdo */
.contact-grid-revamped {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Coluna de informações menor que a do formulário */
    gap: 4rem;
    background-color: #fff;
    padding: 3rem;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    margin-bottom: 4rem;
}

/* Títulos e parágrafos dentro das colunas */
.contact-info-col h2, .contact-form-col h2 {
    font-size: 2rem;
    color: #000;
    margin-bottom: 0.5rem;
}
.contact-info-col p, .contact-form-col p {
    margin-bottom: 2.5rem;
    color: #666;
    line-height: 1.7;
}

/* Itens de contato interativos (endereço, tel, email) */
.contact-info-item-revamped {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
}
.contact-info-item-revamped:hover {
    color: #405a37; /* Cor principal do site */
}
.contact-info-item-revamped i {
    font-size: 1.8rem;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #f1f1f1;
    border-radius: 50%;
    transition: all 0.3s ease;
}
.contact-info-item-revamped:hover i {
    background-color: #405a37;
    color: #fff;
}
.contact-info-item-revamped div {
    display: flex;
    flex-direction: column;
}
.contact-info-item-revamped strong {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.2rem;
}
.contact-info-item-revamped span {
    color: #555;
}

/* Seção de selos de confiança (ISO 9001) */
.contact-trust-seals {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #e9ecef;
}
.contact-trust-seals h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}
.seals-container img {
    max-height: 80px;
    width: auto;
    opacity: 0.8;
}

/* Estilo do Formulário */
.contact-form-col .form-group {
    margin-bottom: 1.5rem;
}
.contact-form-col label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 700;
    font-size: 0.9rem;
}
.contact-form-col input,
.contact-form-col textarea {
    width: 100%;
    padding: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
}
.contact-form-col input:focus,
.contact-form-col textarea:focus {
    outline: none;
    border-color: #405a37;
    box-shadow: 0 0 0 3px rgba(64, 90, 55, 0.2);
}
.contact-form-col textarea {
    resize: vertical;
    min-height: 120px;
}

/* Botão de Envio do Formulário */
.btn-submit-revamped {
    display: inline-block;
    width: 100%;
    background: #000000;
    color: #fff;
    padding: 16px 30px;
    border-radius: 5px;
    font-weight: 700;
    font-size: 1.1rem;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-submit-revamped:hover {
    background: #405a37;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Container do Mapa */
.map-container-full {
    margin-top: 4rem;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}
.map-container-full h3 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 2rem;
}

/* --- Ajustes para Telas Menores (Responsividade) --- */
@media(max-width: 900px) {
    .contact-grid-revamped {
        grid-template-columns: 1fr; /* Coluna única em telas menores */
        gap: 3rem;
        padding: 2rem;
    }
}
/* =================================
   FOOTER APRIMORADO
   ================================= */

.site-footer {
    background-color: #000000;
    color: #a0a0a0; /* Um cinza mais claro para melhor leitura */
    font-size: 0.95rem;
    padding: 5rem 0 0 0; /* Padding superior, o inferior virá do footer-bottom */
}

.site-footer .container {
    max-width: 1300px;
}

.footer-main {
    display: flex;
    flex-wrap: wrap; /* Permite que as colunas quebrem em telas menores */
    justify-content: space-between;
    gap: 2rem; /* Espaço entre as colunas */
    padding-bottom: 3rem;
}

.footer-col {
    flex: 1; /* Faz com que as colunas tentem ocupar espaço igual */
    min-width: 250px; /* Largura mínima antes de quebrar a linha */
    margin-bottom: 2rem;
}

.footer-col-about {
    flex: 1.5; /* Faz a primeira coluna ser um pouco mais larga */
}

.logo-footer {
    max-width: 180px;
    margin-bottom: 1.5rem;
}

.footer-col h4 {
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 0.5rem;
}

/* Linha de destaque abaixo dos títulos das colunas */
.footer-col h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 2px;
    background-color: #405a37; /* Cor verde do seu site */
}

/* Estilo para links e parágrafos */
.footer-col p {
    color: #a0a0a0;
    line-height: 1.8;
}

.footer-col a {
    color: #a0a0a0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-col a:hover {
    color: #ffffff;
}

/* Coluna de Navegação */
.quick-links {
    list-style: none;
}

.quick-links li {
    margin-bottom: 0.8rem;
}

.quick-links a {
    display: inline-block;
    position: relative;
}
/* Efeito de sublinhado no hover */
.quick-links a::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: #ffffff;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}
.quick-links a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}


/* Coluna de Contato */
.contact-info-footer {
    font-style: normal;
}
.contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.2rem;
}
.contact-item i {
    color: #405a37;
    margin-right: 1rem;
    font-size: 1rem;
    margin-top: 5px; /* Alinha o ícone com o texto */
}

/* Coluna de Redes Sociais */
.social-links a {
    display: inline-flex; /* Usamos flex para centralizar o ícone */
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: #222;
    color: #fff;
    border-radius: 50%; /* Círculos perfeitos */
    margin-right: 0.5rem;
    font-size: 1rem;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.social-links a:hover {
    background-color: #405a37; /* Cor primária no hover */
    transform: translateY(-3px); /* Efeito de levantar */
}

/* Barra inferior do rodapé */
.footer-bottom {
    text-align: center;
    padding: 1.5rem 0;
    border-top: 1px solid #222; /* Linha sutil de separação */
}

.footer-bottom p {
    margin: 0;
    font-size: 0.9rem;
    color: #777;
}

/* --- Ajustes para Telas Menores (Responsividade) --- */
@media(max-width: 900px) {
    .footer-main {
        flex-direction: column; /* Empilha as colunas */
        text-align: center; /* Centraliza o texto */
    }
    .footer-col {
        min-width: 100%;
    }
    .footer-col h4::after {
        left: 50%; /* Centraliza a linha de destaque */
        transform: translateX(-50%);
    }
    .contact-item {
        justify-content: center; /* Centraliza os itens de contato */
    }
}
/* =================================
   SEÇÃO DE CTA PARA PDF (EMPRESA)
   ================================= */

.cta-pdf-section {
    background-color: #f8f9fa; /* Um cinza claro para destacar a seção */
    text-align: center;
    padding: 4rem 1rem;
}

.cta-pdf-section h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.cta-pdf-section p {
    color: #555;
    max-width: 700px;
    margin: 0 auto 2rem auto;
    font-size: 1.1rem;
    line-height: 1.7;
}

.pdf-button {
    background-color: #000000;
    color: #fff;
    padding: 14px 35px; /* Botão um pouco maior */
    font-size: 1rem;
}

.pdf-button:hover {
    background-color: #405a37; /* Cor primária no hover */
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.pdf-button i {
    margin-right: 10px; /* Espaço entre o ícone e o texto */
}