/* Reduz o espaçamento acima do botão 'Fale Conosco' na seção de 4 passos no mobile */
    .timeline-steps+.text-center {
        margin-top: 2.5rem !important;
    }

    /* Corrige o círculo branco do ícone de informação no mobile */
    .info-icon-container {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        background: #fff !important;
        margin: 0 auto !important;
    }

    .info-icon-container .fa-info-circle {
        font-size: 1.3rem !important;
    }

    /* Ajusta proporção do círculo e ícone para todos os cards de contato no mobile */
    .contact-block-height .w-16.h-16 {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
    }

    .contact-block-height .fa-envelope {
        font-size: 1.35rem !important;
    }

    .contact-block-height .fa-whatsapp,
    .contact-block-height .fa-map-marker-alt {
        font-size: 1.6rem !important;
    }

    /* Diminui o ícone do card de E-mail no mobile para alinhar igual aos demais */
    a[href^="mailto:"] .w-16.h-16 {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    a[href^="mailto:"] .fa-envelope {
        font-size: 1.7rem !important;
    }

    /* Replica o layout dos cards WhatsApp e Endereço para o card de E-mail */
    a[href^="mailto:"] {
        display: flex !important;
        align-items: center !important;
        flex-direction: row !important;
        gap: 1rem !important;
        padding: 1.5rem !important;
        background: rgba(255, 255, 255, 0.10) !important;
        border-radius: 1rem !important;
    }

    a[href^="mailto:"]>.flex-1 {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    a[href^="mailto:"] h4 {
        margin-bottom: 0.25rem !important;
        display: inline-block !important;
        vertical-align: middle !important;
    }

    /* Solução definitiva: Remove o espaçamento horizontal do card de E-mail para garantir alinhamento correto */
    a[href^="mailto:"] {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 1rem !important;
        /* Remove qualquer space-x-4 herdado */
        column-gap: 1rem !important;
    }

    a[href^="mailto:"]>.flex-1 {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    a[href^="mailto:"] h4 {
        margin: 0 !important;
        display: inline-block !important;
        vertical-align: middle !important;
    }

    /* Correção definitiva: E-mail ao lado do ícone no card de contato */
    a[href^="mailto:"] {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 1rem !important;
    }

    a[href^="mailto:"]>.flex-1 {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    a[href^="mailto:"] h4 {
        margin: 0 !important;
        display: inline-block !important;
        vertical-align: middle !important;
    }

    /*
  CSS Otimizado para o Tema EXT Securitizadora
  Versão: 2.4
  Autor: Verzi Web
  Descrição: Refatorado para melhor legibilidade, manutenção e performance, com media queries agrupadas e estilos organizados.
*/

    /* ==========================================================================
   1. Variáveis de Cor
   ========================================================================== */
    :root {
        --primary: #1e40af;
        --secondary: #3b82f6;
        --accent: #f0f9ff;
        --brand: #22c55e;
        --success: #10b981;
        --warning: #f59e0b;
        --error: #ef4444;
        --text: #1f2937;
        --text-light: #6b7280;
        --bg: #ffffff;
        --bg-light: #f9fafb;
    }

    /* ==========================================================================
   2. Estilos Base e Globais
   ========================================================================== */
    html {
        scroll-behavior: smooth;
    }

    /* Estilização da Barra de Rolagem */
    ::-webkit-scrollbar {
        width: 8px;
    }

    ::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    ::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, #0B2447, #19376D);
        border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #19376D, #0B2447);
    }

    /* Foco para Acessibilidade */
    button:focus,
    a:focus,
    input:focus,
    textarea:focus {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }

    /* Estados de Carregamento */
    .loading {
        opacity: 0.6;
        pointer-events: none;
    }

    /* Classes de Fundo */
    .bg-navy {
        background-color: var(--primary);
    }

    .bg-white {
        background-color: #ffffff;
    }

    /* ==========================================================================
   3. Classes Utilitárias e Animações
   ========================================================================== */
    /* Animações */
    @keyframes float {

        0%,
        100% {
            transform: translateY(0px);
        }

        50% {
            transform: translateY(-20px);
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes pulse-slow {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.05);
        }

        100% {
            transform: scale(1);
        }
    }

    .animate-float {
        animation: float 6s ease-in-out infinite;
    }

    .animate-fade-in {
        animation: fadeIn 1s ease-in-out;
    }

    /* Texto em Gradiente */
    .gradient-text {
        background: linear-gradient(135deg, #69F0AE 0%, #4CAF50 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* ==========================================================================
   4. Estilos de Componentes
   ========================================================================== */
    /* Header */
    header {
        transition: all 0.3s ease;
    }

    header.scrolled {
        padding: 8px 0;
    }

    header .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px 2rem;
        max-width: 1280px;
        margin: 0 auto;
    }

    header nav {
        margin-left: auto;
    }

    header nav a {
        margin-left: 1.5rem;
        white-space: nowrap;
    }

    /* Logos */
    .header-logo,
    .footer-logo {
        height: auto;
        width: auto;
        display: block;
    }

    .header-logo {
        max-height: 45px;
    }

    .footer-logo {
        max-height: 45px;
        margin-bottom: 15px;
    }

    /* Fundo do Hero */
    .hero-bg {
        background: linear-gradient(135deg, rgba(11, 36, 71, 0.95) 0%, rgba(25, 55, 109, 0.85) 100%),
            url('https://images.unsplash.com/photo-1521791136064-7986c2920216?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2369&q=80');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
    }

    /* Efeitos de Hover em Cards */
    .card-hover {
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .card-hover:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }

    .bg-white\/10.hover\:bg-white\/20 {
        transition: background-color 0.3s ease !important;
    }

    /* Passos do Processo */
    .process-step {
        position: relative;
    }

    .process-step::before {
        content: '';
        position: absolute;
        top: 50%;
        right: -50px;
        width: 100px;
        height: 2px;
        background: linear-gradient(90deg, #A5D7E8, transparent);
        transform: translateY(-50%);
    }

    .process-step:last-child::before {
        display: none;
    }

    /* Bloco de Contato */
    .contact-block-height a {
        transition: all 0.3s ease !important;
    }

    .contact-block-height a:hover h4 {
        transition: color 0.3s ease !important;
    }

    .contact-block-height .fab,
    .contact-block-height .fas {
        transition: all 0.3s ease !important;
    }

    /* Botão Flutuante do WhatsApp */
    .whatsapp-float {
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
        z-index: 1000;
        transition: all 0.3s ease;
        animation: pulse-slow 3s infinite;
    }

    .whatsapp-float:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 25px rgba(37, 211, 102, 0.6);
    }

    /* Depoimentos */
    .testimonial-slide img.profile {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid rgba(105, 240, 174, 0.3);
    }

    .carousel-dots {
        position: relative;
        z-index: 20;
    }

    /* Rodapé */
    footer .flex-col {
        display: flex;
        flex-direction: column;
    }

    /* Correções de layout */
    .address .whitespace-nowrap {
        display: inline-block !important;
    }

    /* ==========================================================================
   5. Estilos Responsivos (Media Queries)
   ========================================================================== */

    /* Large Desktops (1025px e acima) */
    @media (min-width: 1025px) {
        header .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 15px 2rem;
        }

        header nav a {
            margin-left: 2rem;
        }

        .header-logo {
            max-height: 45px;
        }
    }

    /* Desktops (1024px e acima) */
    @media (min-width: 1024px) {

        .lg\:ml-16,
        div.lg\:ml-16,
        section.lg\:ml-16,
        .animate-float.lg\:ml-16 {
            margin-left: 8rem !important;
        }

        .contact-block-height {
            height: 100% !important;
            min-height: auto !important;
            max-height: fit-content !important;
            display: flex !important;
            flex-direction: column !important;
        }

        .bg-gradient-to-r.from-primary.to-secondary.contact-block-height {
            padding-bottom: 2rem !important;
            justify-content: flex-start !important;
        }

        .space-y-6 {
            display: flex !important;
            flex-direction: column !important;
            height: 100% !important;
        }

        .space-y-6>div:last-child {
            margin-top: auto !important;
        }

        .security-guarantees {
            flex-grow: 1 !important;
            display: flex !important;
            flex-direction: column !important;
        }

        .security-guarantees ul {
            flex-grow: 1 !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: space-evenly !important;
        }

        .bg-white\/10.hover\:bg-white\/20:hover {
            background-color: rgba(255, 255, 255, 0.2) !important;
        }
    }

    /* Tablets (768px a 1024px) */
    @media (min-width: 768px) and (max-width: 1024px) {
        header .container {
            padding: 12px 1.5rem;
            max-width: 100%;
        }

        header nav {
            margin-left: 10px;
        }

        header nav a {
            margin-left: 1rem;
            font-size: 0.9rem;
        }
    }

    /* Tablets e acima (768px e acima) */
    @media (min-width: 768px) {

        .md\:text-6xl,
        h1.md\:text-6xl,
        h2.md\:text-6xl,
        .text-4xl.md\:text-6xl,
        div.text-5xl.md\:text-6xl {
            font-size: 3.75rem !important;
            line-height: 1 !important;
            width: 100% !important;
        }
    }

    /* Mobile (até 400px) */
    @media (min-width: 400px) and (max-width: 767px) {
        .header-logo {
            max-height: 40px;
        }

        /* Correção definitiva: Card de E-mail no mobile igual aos demais */
        a[href^="mailto:"] {
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            gap: 1rem !important;
        }

        a[href^="mailto:"]>.flex-1 {
            display: block !important;
            flex: 1 !important;
        }

        a[href^="mailto:"] h4 {
            margin: 0 0 0.25rem 0 !important;
            display: inline-block !important;
            vertical-align: middle !important;
        }

        .footer-logo {
            max-height: 50px;
            margin-bottom: 15px;
        }

        header .container {
            padding: 10px 1rem;
            max-width: 100%;
        }

        .pb-4 {
            padding-bottom: 2rem !important;
        }

        .mr-3 {
            margin-right: 0.60rem !important;
        }

        p .text-gray-200 address {
            font-size: 0.875rem !important;
            line-height: 1.25rem !important;
        }

        p.text-xl.md\:text-2xl.text-gray-600.max-w-4xl.mx-auto.leading-relaxed {
            word-spacing: 3px;
        }

        p.text-xl.md\:text-2xl.text-gray-600.mb-12.leading-relaxed {
            word-spacing: -2px;
        }

        span.text-white.text-lg.font-medium {
            letter-spacing: -1px;
        }

        p.text-xl.md\:text-2xl.text-gray-600.max-w-3xl.mx-auto.leading-relaxed {
            word-spacing: 5px;
        }

        p.text-xl.md\:text-2xl.text-gray-300.max-w-4xl.mx-auto.leading-relaxed {
            letter-spacing: 1px;
        }

        .hero-bg {
            background-attachment: scroll;
        }

        header .container {
            max-width: 95%;
        }

        .text-mobile-adjusted {
            letter-spacing: 0px;
            word-spacing: -2px;
        }

        .animate-float.ml-8.lg\:ml-16 {
            margin-left: 0rem !important;
        }

        h2.title-spacing-mobile.operations-title,
        section.bg-primary h2.operations-title {
            margin-bottom: 3rem !important;
            padding-bottom: 1rem !important;
        }

        .contact-block-height .flex.space-x-4 {
            flex-wrap: wrap !important;
            gap: 0.75rem !important;
        }

        .contact-icon-container {
            margin-top: 0 !important;
            align-self: flex-start !important;
        }

        .contact-block-height h4 {
            margin-bottom: 0.25rem !important;
        }

        #mobile-menu-toggle {
            cursor: pointer;
            padding: 8px;
            border-radius: 4px;
            transition: all 0.3s ease;
        }

        #mobile-menu-toggle:hover {
            background-color: rgba(0, 0, 0, 0.05);
        }

        #mobile-menu {
            width: 100%;
            transition: all 0.3s ease;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        }

        .bg-white\/10.hover\:bg-white\/20:active {
            background-color: rgba(255, 255, 255, 0.15) !important;
        }

        .grid.grid-cols-1.md\:grid-cols-2.gap-6.mb-8 a:last-child {
            margin-bottom: 0 !important;
        }

        /* CORREÇÃO ROBUSTA v2.4: Garante alinhamento de todos os cards de contato */
        .contact-block-height .space-y-6>* {
            display: flex !important;
            align-items: center !important;
            gap: 1rem !important;
            flex-direction: row !important;
            justify-content: flex-start !important;
        }

        .relative.max-w-4xl.mx-auto.px-4 {
            padding-right: 0px;
            padding-left: 0px;
        }
    }

    /* Celular (até 400 de largura px) */
    @media (max-width: 399px) {
        .header-logo {
            max-height: 40px;
        }

        /* Correção definitiva: Card de E-mail no mobile igual aos demais */
        a[href^="mailto:"] {
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            gap: 1rem !important;
        }

        a[href^="mailto:"]>.flex-1 {
            display: block !important;
            flex: 1 !important;
        }

        a[href^="mailto:"] h4 {
            margin: 0 0 0.25rem 0 !important;
            display: inline-block !important;
            vertical-align: middle !important;
        }

        .footer-logo {
            max-height: 50px;
            margin-bottom: 15px;
        }

        header .container {
            padding: 10px 1rem;
            max-width: 100%;
        }

        .whitespace-nowrap {
            font-size: 18px !important;
        }

        .p-8 {
            padding: 1rem !important;
        }

        .pb-4 {
            padding-bottom: 2rem !important;
        }

        .mr-3 {
            margin-right: 0.60rem !important;
        }

        p .text-gray-200 address {
            font-size: 0.875rem !important;
            line-height: 1.25rem !important;
        }

        p.text-xl.md\:text-2xl.text-gray-600.max-w-4xl.mx-auto.leading-relaxed {
            word-spacing: -1px;
            letter-spacing: -1px;
        }

        p.text-xl.md\:text-2xl.text-gray-600.mb-12.leading-relaxed {
            word-spacing: -2px;
        }

        span.text-white.text-lg.font-medium {
            letter-spacing: -1px;
        }

        p.text-xl.md\:text-2xl.text-gray-600.max-w-3xl.mx-auto.leading-relaxed {
            word-spacing: 5px;
        }

        p.text-xl.md\:text-2xl.text-gray-300.max-w-4xl.mx-auto.leading-relaxed {
            letter-spacing: 1px;
        }

        .hero-bg {
            background-attachment: scroll;
        }

        header .container {
            max-width: 95%;
        }

        .text-mobile-adjusted {
            letter-spacing: 0px;
            word-spacing: -2px;
        }

        .animate-float.ml-8.lg\:ml-16 {
            margin-left: 0rem !important;
        }

        h2.title-spacing-mobile.operations-title,
        section.bg-primary h2.operations-title {
            margin-bottom: 3rem !important;
            padding-bottom: 1rem !important;
        }

        .contact-block-height .flex.space-x-4 {
            gap: 0.75rem !important;
        }

        .contact-icon-container {
            margin-top: 0 !important;
            align-self: flex-start !important;
        }

        .contact-block-height h4 {
            margin-bottom: 0.25rem !important;
        }

        #mobile-menu-toggle {
            cursor: pointer;
            padding: 8px;
            border-radius: 4px;
            transition: all 0.3s ease;
        }

        #mobile-menu-toggle:hover {
            background-color: rgba(0, 0, 0, 0.05);
        }

        #mobile-menu {
            width: 100%;
            transition: all 0.3s ease;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        }

        .bg-white\/10.hover\:bg-white\/20:active {
            background-color: rgba(255, 255, 255, 0.15) !important;
        }

        .grid.grid-cols-1.md\:grid-cols-2.gap-6.mb-8 a:last-child {
            margin-bottom: 0 !important;
        }

        /* CORREÇÃO ROBUSTA v2.4: Garante alinhamento de todos os cards de contato */
        .contact-block-height .space-y-6>* {
            display: flex !important;
            align-items: center !important;
            gap: 1rem !important;
            flex-direction: row !important;
            justify-content: flex-start !important;
        }

        .relative.max-w-4xl.mx-auto.px-4 {
            padding-right: 0px;
            padding-left: 0px;
        }

    }


    /* ==========================================================================
   6. Acessibilidade e Impressão
   ========================================================================== */

    /* Alto Contraste */
    @media (prefers-contrast: high) {
        :root {
            --primary: #000000;
            --secondary: #333333;
            --text: #000000;
            --text-light: #333333;
        }
    }

    /* Movimento Reduzido */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }

        .animate-float {
            animation: none;
        }
    }

    /* Estilos de Impressão */
    @media print {

        .whatsapp-float,
        header nav,
        .timeline-point,
        button {
            display: none !important;
        }

        body {
            font-size: 12pt;
            line-height: 1.4;
        }
    }