/*--------------------------------------------------
    [ FATORIAL - CSS GERAL ]
    Cores:
    - Azul Principal: #242b47
    - Cinza Texto: #555
    - Texto: #333
    - Fundo Claro: #f4f7fc (para seções)
----------------------------------------------------*/

:root {
    --fatorial-blue: #30435e; /* Azul principal */
    --fatorial-blue-dark: #30435e;
    --fatorial-text: #5c595a;
    --fatorial-light-bg: #f4f7fc;
}

body {
    font-family: 'Raleway', sans-serif;
    color: #5c595a;
    line-height: 1.7;
    scroll-behavior: smooth;
    font-size: 1.1rem; /* Increased base font size */
}

html, body {
    max-width: 100vw;       /* Garante que a largura nunca passe da viewport */
    overflow-x: hidden;     /* Corta tudo que vazar lateralmente */
    width: 100%;            /* Força a largura base */
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

/* Garante que as seções principais também não vazem */
section, header, footer {
    max-width: 100vw;
    overflow-x: clip; /* 'clip' é uma versão moderna do hidden para overflow programático */
}
h2, h3, h4 {
    font-family: 'Raleway', sans-serif; /* Ensure Raleway font */
    color: var(--fatorial-blue); /* Set headings to blue */
    font-size: 2.5rem; /* Significantly increased font size */
    letter-spacing: 5px; /* Add letter spacing */
}

/* --- 1. Header / Menu --- */
.header-fatorial {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-fatorial .navbar-brand img {
    max-height: 40px;
}

.header-fatorial .navbar-nav {
    /* Reverted: margin-right removed */
}

.last-nav-item {
    margin-right: 40px !important; /* Add margin to the last nav item for spacing with buttons */
}

.menu-buttons-container {
    /* Reverted: margin-left removed */
}

.header-fatorial .navbar-nav .nav-link {
    color: var(--fatorial-blue);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px; /* Slightly increased for menu links */
    margin-left: 15px;
    padding: 10px 15px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.header-fatorial .navbar-nav .nav-link:hover,
.header-fatorial .navbar-nav .nav-link.active {
    color: #fff;
    background-color: var(--fatorial-blue);
    border-radius: 5px;
}

/* --- 2. Seção Hero (Banner Principal) --- */
.hero-section-new {
    display: flex;
    min-height: 800px; /* Increased height */
    position: relative;
    overflow: hidden;
    background-color: var(--fatorial-blue-dark); /* Set blue background on parent */
    align-items: stretch; /* Ensure children stretch to fill height */
}

.hero-image-col {
    flex: 1.5; /* Increased size */
    background-image: url('../images/a.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1; /* Ensure it's above the curve */
    border-top-right-radius: 50% 70%; /* Make the top-right corner rounded */
    border-bottom-right-radius: 50% 70%; /* Make the bottom-right corner rounded */
    margin-left: -2% !important;
}

.hero-image-col::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2); /* Dark overlay for better text contrast */
    z-index: 2; /* Ensure overlay is above the image */
    border-top-right-radius: 50% 70%; /* Make the top-right corner rounded */
    border-bottom-right-radius: 50% 70%; /* Make the bottom-right corner rounded */
}

.hero-content-col {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* Alterado de relative para static */
    padding: 50px;
}

.hero-content-col .hero-text-container {
    text-align: center;
    position: relative; /* Adicionado para garantir z-index */
    z-index: 5;         /* Garante que o texto fique sobre a imagem/curva */
}

.hero-content-col h1 {
    font-size: 4rem; /* Adjust size as needed */
    line-height: 1.2;
    white-space: nowrap;
}

/* --- 3. Seção Sobre --- */
.section-padding {
    padding: 80px 0;
}
.section-title {
    font-size: 2.5rem; /* Adjusted to match general h2, h3, h4 size */
    font-weight: 700;
    color: var(--fatorial-blue);
    text-transform: uppercase;
    margin-bottom: 15px;
    position: relative;
    letter-spacing: 5px; /* Updated letter spacing */
    display: inline-block;
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: var(--fatorial-blue);
    border-radius: 2px;
}
.section-title.text-white {
    color: #fff;
}
.section-title.text-white::after {
    background-color: #fff;
}

.section-padding-dark {
    position: relative;
    padding: 80px 0; /* Revert padding to original */
    color: #fff;
    background: url('../images/g.webp') center center / cover no-repeat; /* Re-apply image without !important */
    z-index: 1;
}

.section-padding-dark .container {
    position: relative;
    z-index: 2;
}


.about-text {
    font-size: 1.2rem; /* Larger font size */
    font-weight: 600; /* Bolder font weight */
}

.fatorial-solution-heading {
    margin-top: 100px;
    color: var(--fatorial-blue);
    font: 2.5em sans-serif;
    letter-spacing: normal !important;
}

/* --- 4. Seção Serviços --- */
.services-section {
    background-color: var(--fatorial-light-bg);
}
.services-section .fa-check-circle {
    color: var(--fatorial-blue);
}

/* --- 5. Seção Diferenciais --- */
.diferencial-card {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: 5px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.diferencial-card h4 {
    font-weight: 700;
    color: #fff;
    margin-bottom: 15px;
}
.diferencial-card p {
    font-size: 1rem; /* Adjusted for larger text */
    color: #fff;
    flex-grow: 1;
}
.diferencial-card .btn {
    align-self: flex-start;
}

.service-card {
    background-color: #f9f9f8 !important; /* New background color */
    border: 1px solid #e0e0e0; /* Light border */
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    height: 100%;
    text-align: center;
}

.service-card .fa-3x {
    color: var(--fatorial-blue); /* Use fatorial blue for icons */
}

.service-card h3 {
    color: var(--fatorial-blue); /* Use fatorial blue for card titles */
    letter-spacing: normal; /* Remove letter spacing from card titles */
    font-size: 1.5rem; /* Increased font size for card titles */
}

.service-card p {
    color: var(--fatorial-text); /* Use fatorial text color for card descriptions */
    text-align: left; /* Left align paragraph text */
}

section p, section li {
    font-size: 1.3rem; /* Increased font size */
    font-weight: 700; /* Stronger font weight */
}

.diferenciais-cards-container {
    margin-top: -150px; /* Adjust this value for desired overlap */
    position: relative;
    z-index: 5; /* Ensure cards are above the section background */
}

.diferenciais-title-container {
    padding-top: 150px; /* Adjust this value to position the title */
}

.btn-fatorial-small {
    background-color: var(--fatorial-blue);
    color: #fff;
    border: 1px solid var(--fatorial-blue);
    padding: 8px 25px; /* Smaller padding */
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 50px;
    transition: all 0.3s ease;
    white-space: nowrap;
    font-size: 0.9rem; /* Smaller font size */
    display: inline-block; /* Allow it to fit within card */
}

.btn-fatorial-small:hover {
    background-color: var(--fatorial-blue-dark);
    border-color: var(--fatorial-blue-dark);
    color: #fff;
}

.subsection-title {
    font-size: 2.5rem; /* Same size as section-title */
    font-weight: 800; /* Increased font weight */
    color: var(--fatorial-blue);
    letter-spacing: 0; /* Removed letter spacing */
}

/* --- 6. Seção Contato --- */
.contact-info-box {
    background-color: var(--fatorial-blue);
    padding: 40px;
    height: 100%;
    border-radius: 5px;
    color: #fff;
}

.contact-info-box ul {
    font-size: 1rem; /* Adjusted for larger text */
}

.contact-heading {
    letter-spacing: normal; /* Remove letter spacing */
    font-size: 2.2rem; /* Increased font size */
}

.contact-info-box li {
    line-height: 1.8;
}

#contato .form-control {
    background-color: transparent; /* Transparent background */
    border: none; /* Remove all borders */
    border-bottom: 2px solid var(--fatorial-blue) !important; /* Only blue bottom border, thicker and forced */
    padding: 12px 0; /* Adjust padding for bottom border */
    border-radius: 0; /* Remove border-radius */
    box-shadow: none; /* Remove box-shadow */
    color: #333; /* Ensure text is visible */
}
#contato .form-control:focus {
    background-color: transparent; /* Keep transparent on focus */
    border-color: var(--fatorial-blue); /* Keep blue border on focus */
    box-shadow: none;
}

/* Placeholder styling */
#contato .form-control::placeholder {
    color: #000; /* Black placeholder text */
    font-weight: 600; /* Bolder placeholder text */
}

.btn-fatorial {
    background-color: var(--fatorial-blue);
    color: #fff;
    border: 5px solid var(--fatorial-blue);
    padding: 6px 36px;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.3s ease;
    white-space: nowrap;
    width: 100%;
    max-width: 300px;
    display: block;
    margin: 0 auto;
}

.btn-fatorial:hover {
    background-color: transparent;
    color: var(--fatorial-blue);
    border-color: var(--fatorial-blue); /* Explicitly set border-color on hover */
}

/* --- Botão --- */
.btn, button, [role="button"] {
    cursor: pointer;
}

.btn-fatorial-outline {
    background-color: transparent;
    color: var(--fatorial-blue) !important;
    border: 5px solid var(--fatorial-blue);
    padding: 10px 40px;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.3s ease;
    white-space: nowrap;
    font-size: 14px;
    width: 100%;
    max-width: 300px;
    display: block;
    margin: 0 auto;
    transition: all 0.3s ease;
}

.btn-fatorial-outline:hover {
    background-color: var(--fatorial-blue) !important;
    color: #fff !important;
}

/* Botão flutuando no canto inferior direito do Hero */
.whatsapp-float {
    /* Estado 1: Inicial (Dentro do Banner) */
    position: absolute;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    
    /* Visual (Azul da marca) */
    background-color: #30435e;
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    
    /* Tamanho e Layout */
    width: 60px;
    height: 60px;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    
    /* Animação suave de posição e cor */
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.whatsapp-float:hover {
    background-color: #ffffff;
    color: #30435e;
    border-color: #30435e;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* Estado 2: Fixo no Topo (Ativado via JS ao rolar) */
.whatsapp-float.floating-top {
    position: fixed;
    bottom: auto;
    top: 110px; /* Fica no topo, logo abaixo do Menu */
    right: 30px;
    z-index: 9999;
    
    /* Pequeno ajuste de tamanho ao flutuar */
    transform: scale(0.9);
    opacity: 0.9;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.whatsapp-float.floating-top:hover {
    transform: scale(1);
    opacity: 1;
}

/* --- 7. Rodapé --- */
.footer-fatorial {
    background-color: var(--fatorial-blue);
    color: #ccc;
}
.footer-fatorial .footer-logo {
    max-height: 45px;
    margin-bottom: 20px;
}

.footer-fatorial h5 {
    color: #fff;
    text-transform: uppercase;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 20px;
    font-size: 1rem;
}

.footer-fatorial ul {
    list-style: none;
    padding-left: 0;
}

.footer-fatorial ul li {
    margin-bottom: 10px;
}

.footer-fatorial ul li a {
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-fatorial ul li a:hover {
    color: #fff;
    text-decoration: underline;
}

.footer-fatorial .social-icons a {
    color: #fff;
    font-size: 20px;
    margin-right: 15px;
    transition: all 0.3s ease;
}

.footer-fatorial .social-icons a:hover {
    color: #fff;
}

.footer-bottom {
    border-top: 1px solid #30435e; /* Azul um pouco mais claro */
    padding: 20px 0;
    margin-top: 20px !important; /* Reduzido o espaço superior */
    font-size: 0.8rem;
    color: #fff;
}

.footer-bottom a {
    color: #fff;
}

/* Footer Customizations */

.footer-fatorial {
    font-weight: 600; /* Bolder font for all footer text */
}

.footer-fatorial .social-text {
    font-weight: 600;
}

.social-icons-footer a {
    background-color: #2e66af;
    color: #fff;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    margin-right: 10px;
    transition: all 0.3s ease;
}

.social-icons-footer a:hover {
    opacity: 0.9;
}

.footer-fatorial h5 {
    font-weight: 700; /* Bolder headings */
}

.footer-fatorial ul li a {
    font-weight: 600; /* Bolder menu links */
}

.btn-app-store,
.btn-google-play {
    background-color: #fff;
    color: #2e66af;
    border: 1px solid #2e66af;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 180px;
    padding: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-app-store:hover,
.btn-google-play:hover {
    background-color: #f0f0f0;
    color: #2e66af;
}

.btn-app-store i,
.btn-google-play i {
    margin-right: 10px;
    font-size: 1.5rem;
}

.qr-text {
    font-weight: 600;
}

.footer-h-image {
    mask-image: linear-gradient(to left, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
    object-fit: cover; /* Garante que a imagem cubra o espaço sem distorcer */
    width: 100%;
}

.footer-copyright-text {
    font-size: 0.9rem; /* Larger copyright text */
    font-weight: 700; /* Bolder copyright text */
}

/* Utility class for desktop-only nowrap */
.desktop-nowrap {
    white-space: nowrap;
}

/* --- Media Queries para Dispositivos Móveis --- */

@media (max-width: 920px) {
    body, html {
        overflow-x: hidden; /* Impede o scroll horizontal */
    }
/* Utility class for desktop-only logo margin */
.desktop-logo-margin {
    margin-left: -100px;
}
}
/* --- Media Queries para Dispositivos Móveis --- */

@media (max-width: 920px) {
    /* Ajuste no Hero Section para mobile */
    .hero-section-new {
        min-height: 500px; /* Altura menor para mobile */
        align-items: center; /* Centraliza o conteúdo verticalmente */
    }

    .hero-image-col {
        opacity: hidden;
    }

    .hero-logo {
        opacity: hidden;
    }

    .last-nav-item {
    margin-right: 0px !important; /* Add margin to the last nav item for spacing with buttons */
    }

    .hero-image-col {
        display: none; /* Oculta a imagem do hero */
    }

    .hero-content-col h1 {
        font-size: 2rem; /* Tamanho de fonte menor para o título no mobile */
        white-space: nowrap;
    }

    /* Ajuste para títulos não vazarem no mobile */
    h1, h2, h3, h4, h5, h6 {
    }

    /* Ajuste no texto que está vazando */
    section p, section li {
        font-size: 1.1rem; /* Tamanho de fonte ajustado para mobile */
        font-weight: 700; /* Restaura o peso da fonte para bold */
    }

    /* Controla a quebra de linha apenas no mobile */
    .mobile-only-break {
        display: block;
    }

    /* Remove margem negativa da logo no mobile */
    .desktop-logo-margin {
        margin-left: 0;
    }

    /* Adiciona espaço abaixo do botão do formulário */
    .btn-fatorial {
        margin-bottom: 30px;
    }

    /* Permite quebra de linha no mobile para elementos com nowrap no desktop */
    .desktop-nowrap {
        white-space: normal;
    }

    /* --- Estilos para o Menu Hambúrguer --- */
    .navbar-collapse {
        position: absolute;
        top: 100%; /* Posiciona abaixo do header */
        left: 0;
        right: 0;
        background-color: #fff;
        padding: 15px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        border-top: 1px solid #eee;
    }

    .header-fatorial .navbar-nav {
        width: 100%;
    }

    .header-fatorial .navbar-nav .nav-link {
        padding: 10px 0;
        text-align: center;
        border-bottom: 1px solid #f0f0f0;
    }

    .header-fatorial .navbar-nav .nav-item:last-child .nav-link {
        border-bottom: none;
    }

    /* Estilização do ícone do hamburguer */
    .navbar-toggler {
        border-color: var(--fatorial-blue) !important;
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(48, 67, 94, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    /* Ajusta o tamanho da fonte no box de contato para mobile */
    .contact-info-box ul li {
        font-size: 0.9rem;
    }

    .menu-buttons-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-top: 15px;
        gap: 10px;
    }
    .menu-buttons-container .btn {
        margin: 0;
        text-align: center;
    }
    .menu-buttons-container .first-menu-button {
        margin-right: 0 !important;
    }
}
@keyframes fadeInUp {
     0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-100%); /* Start from off-screen left */
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInLeft2 {
    0% {
        opacity: 0;
        transform: translateX(-100%); /* Start from off-screen left */
    }
    100% {
        opacity: 0.2;
        transform: translateX(0);
    }
}


@keyframes fadeInFromBottom {
    0% {
        opacity: 0;
        transform: translateY(1em); /* 1em for text height */
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-on-scroll {
    /* original properties, if any, or leave empty if it was just a marker class */
}

.animate-on-scroll.is-animated {
    animation: fadeInUp 1s ease-out forwards; /* 'forwards' keeps the end state of the animation */
}

.animate-fade-in-left.is-animated {
    animation: fadeInLeft 1s ease-out forwards;
}

.animate-fade-in-left2.is-animated {
    animation: fadeInLeft2 1s ease-out forwards;
}

.animation-initial-hidden {
    opacity: 0;
    transform: translateY(20px);
}

/* Staggered Text Animation Styles */
.split-text-parent {
    /* To ensure spans are properly positioned relative to the parent */
    /* If the parent has display: inline or inline-block, its size might be affected. */
    /* Consider making it block or inline-block, or apply position: relative to it. */
    display: inline-block; /* Adjust as needed for the title's parent container */
    overflow: hidden; /* Hide chars that are animating from outside */
}

.char {
    opacity: 0;
    display: inline-block; /* Crucial for transform to work on individual chars */
    /* Initial transform for animation start */
    transform: translateY(1em); /* Start from 1em below */
    /* Transition for smooth animation before is-animated is added (fallback) */
    transition: opacity 0.1s ease-out, transform 0.1s ease-out; /* A tiny transition to prevent flicker */
}

.char.is-animated {
    animation: fadeInFromBottom 0.6s ease-out forwards; /* Shorter duration for letters */
}



.mobile-only-break {



    display: none;



}



/* --- Additional Media Queries for Font Sizing --- */



/* For small mobile devices */



@media (max-width: 480px) {



    .hero-content-col h1 {



        font-size: 1.8rem;



    }



}







/* For large desktop screens */



@media (min-width: 1440px) {



    .hero-content-col h1 {



        font-size: 3.5rem;



    }



}







/* For very large desktop screens */



@media (min-width: 2048px) {



    .hero-content-col h1 {



        font-size: 3rem;



    }



}







@media (max-width: 1600px) and (min-width: 921px) {



    .fatorial-solution-heading {



        font-size: 2em;



    }



    .header-fatorial .navbar-nav .nav-link {



        margin-left: 10px;



        padding: 10px 10px;



    }



    .btn-fatorial-outline {



        padding: 10px 20px;



    }



    .btn-fatorial {



        padding: 6px 20px;



    }



    .last-nav-item {



        margin-right: 20px !important;



    }



}

/* --- Modal Styles --- */
.modal-header .btn-close {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2330435e'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}

.modal-title {
    color: var(--fatorial-blue);
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
}

/* --- Hero Logo --- */
.hero-logo {
    position: absolute;
    z-index: 2;
    top: 13%;
    left: 10%; /* Centered in the 60% width of the hero-image-col */
    transform: translate(-50%, -50%);
    max-width: 700px; /* Adjust as needed */
    width: 70%;
    animation-delay: 0.3s; /* Delay to make it appear after the background */
    opacity: 0.3;
}

@media (max-width: 900px) {
    .hero-image-col,
    .hero-logo {
        display: none;
    }
}


/* Garante que o texto do select (o que aparece fechado) seja preto */
    #assunto {
        color: #000 !important;
    }

    /* Garante que as opções da lista (quando aberto) sejam pretas */
    #assunto option {
        color: #000 !important;
        background-color: #fff; /* Garante fundo branco para contraste */
    }

.img-overlap-custom {
        margin-top: 15px !important; 
        margin-bottom: 20px;
    }

    /* Comportamento Desktop (Telas grandes): Mantém o efeito de sobreposição */
@media (min-width: 992px) {
        .img-overlap-custom {
            margin-top: -120px !important;
            margin-bottom: 0;
        }
    }

.footer-app-divider {
    border-left: 1px solid rgba(255, 255, 255, 0.2); /* Linha branca suave e translúcida */
    padding-left: 15px; /* Espaço entre a linha e a imagem */
    height: 45px; /* Altura fixa para a linha ficar alinhada com o botão */
    object-fit: contain; /* Garante que a imagem não distorça */
}

.linha-divisoria {
    border-top: 1px solid rgba(255, 255, 255, 0.15); /* Branco com 15% de opacidade */
    margin: 20px 0; /* Espaçamento acima e abaixo da linha */
    width: 70%;
}

/* --- Alterações Específicas para Mobile (Max 920px) --- */
/* --- Alterações Específicas para Mobile (Max 920px) --- */
@media (max-width: 920px) {

    /* 1. Ajuste de Estrutura do Hero para Posicionamento */
    /* Define a seção como referência para o botão absoluto */
    .hero-section-new {
        position: relative !important;
        min-height: 500px;
        align-items: center; /* Centraliza o texto verticalmente */
    }   
    .contact-info-box ul li,
    .contact-info-box ul li span,
    .contact-info-box ul li i {
        font-size: 0.8rem !important; /* Reduzido de 0.9rem para 0.8rem */
    }
    /* Remove a referência da coluna de texto para que o botão "vaze" para a seção pai */
    .hero-content-col {
        position: static !important; 
        padding: 30px !important;
    }

    /* 2. Botão WhatsApp - Canto Inferior Direito do HERO */
    .whatsapp-float {
        /* Estado 1: Inicial (Dentro do Banner) */
        position: absolute !important;
        bottom: 30px !important;       /* Canto inferior do banner */
        right: 20px !important;
        z-index: 999 !important;
        
        /* Estilo Visual */
        background-color: #30435e !important; /* Azul Fatorial */
        color: #ffffff !important;            /* Ícone Branco */
        border: 2px solid #ffffff !important; /* Borda branca para destaque */
        border-radius: 50%;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
        
        /* Tamanho */
        width: 55px !important;
        height: 55px !important;
        font-size: 28px !important;
        
        /* Flex para centralizar ícone */
        display: flex !important;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        
        /* Animação Suave para a troca de posição */
        transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important;
        
        /* Resets */
        margin: 0 !important;
        left: auto !important;
        top: auto !important;
    }

    /* Estado 2: Fixo no Topo (Quando rolar a página) */
    .whatsapp-float.floating-top {
        position: fixed !important;
        bottom: auto !important;
        top: 100px !important;  /* Fica no topo, logo abaixo do Header */
        right: 20px !important;
        z-index: 9999 !important; /* Acima de tudo */
        
        /* Mudança visual opcional para indicar que "prendeu" */
        transform: scale(0.9); 
        border: 2px solid #30435e !important; /* Inverte borda se quiser, ou mantém branca */
        opacity: 0.9;
    }

    /* 3. Título Reduzido (Máximo 3 linhas) */
    .fatorial-solution-heading {
        font-size: 1.3rem !important; /* Tamanho calibrado para não quebrar demais */
        line-height: 1.2 !important;
        margin-top: 20px !important;
        letter-spacing: -0.5px !important; /* Leve ajuste para caber melhor */
        text-align: left !important;
        max-width: 100%;
    }

    /* Oculta a quebra de linha <br> no mobile */
    .desktop-break {
        display: none;
    }

    /* 4. Texto Justificado Geral */
    p, li, .service-card p, .contact-info-box ul, .modal-body p {
        text-align: justify !important;
    }

    /* 5. Footer: Logo Create à direita do Copyright */
    .footer-bottom .row {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important; /* Impede quebra de linha */
    }

    /* Coluna do Texto (Esquerda) */
    .footer-bottom .col-md-8 {
        width: 65% !important;
        flex: 0 0 65% !important;
        padding-right: 5px;
        order: 1;
    }

    .contact-info-box h3 {
        font-size: 1.2rem !important;
    }

    /* Coluna da Logo (Direita) */
    .footer-bottom .col-md-4 {
        width: 35% !important;
        flex: 0 0 35% !important;
        text-align: right !important;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-left: 0;
        order: 2;
        margin-top: 0 !important; /* Remove margem padrão do bootstrap se houver */
    }

    .footer-copyright-text {
        font-size: 0.7rem !important;
        line-height: 1.2;
        margin-bottom: 0 !important;
        text-align: left !important;
    }

    .footer-bottom img {
        max-height: 20px !important;
        margin-top: 0 !important;
    }
    /* Seleciona a coluna de apps (excluindo a coluna da imagem de fundo) */
    .footer-fatorial .col-lg-4:not(.footer-image-col) {
        padding-right: 40px !important; /* Adiciona respiro na direita, empurrando o conteúdo para a esquerda */
    }
    
    /* Opcional: Se quiser garantir que o container geral do footer não esteja empurrando tudo para a direita */
    .footer-fatorial .container[style*="padding-left: 42px"] {
        padding-left: 15px !important; /* Reseta o padding inline forçado do PHP para um padrão mobile */
        padding-right: 15px !important;
    }
    /* Oculta elementos desnecessários no mobile */
    .hero-image-col, .hero-logo {
        display: none;
    }
}