html {
    scroll-behavior: smooth; /* Hace que cualquier salto por ID (#seccion) sea fluido automáticamente */
}

/* Opcional: Si quieres un efecto de "pulso" o brillo sutil en los enlaces del menú/footer al interactuar */
.nav-item a, .footer-column.Links-column li a {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

    /* Animación de línea que se expande por debajo al pasar el cursor (Hover Dinámico) */
    .nav-item a::after, .footer-column.Links-column li a::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 0;
        height: 2px;
        background-color: var(--secondary-color, #d4af37); /* Color dorado institucional */
        transition: width 0.3s ease;
    }

    .nav-item a:hover::after, .footer-column.Links-column li a:hover::after {
        width: 100%;
    }
/* --- VARIABLES DE DISEÑO --- */
:root {
    --primary-color: #0f2a4a; /* Azul profundo: Confianza y Seguridad */
    --secondary-color: #d4af37; /* Dorado/Arena: Éxito y Soluciones */
    --text-dark: #2d3748;
    --text-light: #f7fafc;
    --bg-light: #f8fafc;
    --white: #ffffff;
    --transition: all 0.3s ease;
}

/* --- ESTILOS GENERALES --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    color: --text-dark;
    background-color: var(--white);
    line-height: 1.6;
}

h1, h2, h3 {
    font-weight: 700;
}

a {
    text-decoration: none;
    color: inherit;
}

/* --- HEADER / NAVEGACIÓN --- */
header {
    background-color: var(--white);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

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

.logo {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
    letter-spacing: 1px;
}

    .logo span {
        color: var(--secondary-color);
    }

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-item {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--primary-color);
    transition: var(--transition);
}

    .nav-item:hover {
        color: var(--secondary-color);
    }

.btn-nav {
    background-color: var(--primary-color);
    color: var(--white) !important;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
}

    .btn-nav:hover {
        background-color: var(--secondary-color);
    }

/* ================================================================= */
/* HERO CLEAN & REVELATION STYLING                                  */
/* ================================================================= */
.hero-clean-section {
    position: relative;
    height: 90vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    /* Imagen de fondo premium, elegante y corporativa (puedes cambiar esta URL por la tuya) */
    background-image: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=1600');
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* Capa de suavizado: Gradiente que va del azul institucional a un tono transparente */
.hero-soft-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(15, 42, 74, 0.92) 0%, rgba(15, 42, 74, 0.75) 50%, rgba(212, 175, 55, 0.15) 100%);
    z-index: 1;
}

/* Contenedor alineado y espaciado */
.hero-clean-content {
    position: relative;
    z-index: 2;
    max-width: 1140px;
    margin: 0 auto;
    width: 100%;
    padding: 0 2rem;
}

/* Caja de texto con animación de aparición suave (Reveal) */
.hero-text-reveal {
    max-width: 650px;
    color: var(--white, #ffffff);
    opacity: 0;
    transform: translateY(25px);
    animation: heroFadeInReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Tagline pequeño y elegante superior */
.hero-tagline {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--secondary-color, #d4af37);
    margin-bottom: 1.2rem;
    opacity: 0;
    animation: heroFadeInReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

/* Título refinado: Sin negritas toscas, fluido y balanceado */
.hero-text-reveal h1 {
    font-size: 2.8rem;
    font-weight: 400; /* Letras más esbeltas */
    line-height: 1.25;
    margin-bottom: 1.5rem;
    letter-spacing: -0.5px;
    color: #ffffff;
}

/* Texto descriptivo sereno */
.hero-text-reveal p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #e2e8f0;
    margin-bottom: 2.5rem;
    font-weight: 300;
}

/* Botones integrados con diseño minimalista */
.hero-actions-soft {
    display: flex;
    gap: 1.2rem;
    opacity: 0;
    animation: heroFadeInReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
}

.btn-hero-primary {
    background-color: var(--secondary-color, #d4af37);
    color: var(--primary-color, #0f2a4a);
    padding: 0.9rem 1.8rem;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
}

    .btn-hero-primary:hover {
        background-color: #ffffff;
        color: var(--primary-color, #0f2a4a);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(255, 255, 255, 0.25);
    }

.btn-hero-secondary {
    background-color: transparent;
    color: #ffffff;
    padding: 0.9rem 1.8rem;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .btn-hero-secondary:hover {
        border-color: #ffffff;
        background-color: rgba(255, 255, 255, 0.08);
        transform: translateY(-2px);
    }

/* Animación clave para la entrada elegante */
@keyframes heroFadeInReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsivo adaptativo */
@media (max-width: 768px) {
    .hero-clean-section {
        height: auto;
        padding: 8rem 0 6rem 0;
    }

    .hero-text-reveal h1 {
        font-size: 2.2rem;
    }

    .hero-actions-soft {
        flex-direction: column;
        gap: 1rem;
    }

    .btn-hero-primary, .btn-hero-secondary {
        text-align: center;
        width: 100%;
    }
}

.cta-buttons {
    display: flex;
    gap: 1rem;
}

.btn-primary {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    padding: 1rem 2rem;
    font-weight: 700;
    border-radius: 4px;
    transition: var(--transition);
    display: inline-block;
}

    .btn-primary:hover {
        background-color: var(--white);
        transform: translateY(-2px);
    }

.btn-secondary {
    border: 2px solid var(--white);
    color: var(--white);
    padding: 1rem 2rem;
    font-weight: 700;
    border-radius: 4px;
    transition: var(--transition);
    display: inline-block;
}

    .btn-secondary:hover {
        background-color: var(--white);
        color: var(--primary-color);
        transform: translateY(-2px);
    }

/* --- SECCIÓN SESTION/SERVICIOS --- */
.section {
    padding: 6rem 2rem;
}

.section-bg {
    background-color: var(--bg-light);
}

.section-title {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 4rem auto;
}

    .section-title h2 {
        font-size: 2.5rem;
        color: var(--primary-color);
        margin-bottom: 1rem;
        position: relative;
        padding-bottom: 1rem;
    }

        .section-title h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background-color: var(--secondary-color);
        }

    .section-title p {
        color: #718096;
        font-size: 1.1rem;
    }

.grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
}

.card {
    background-color: var(--white);
    padding: 3rem 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    transition: var(--transition);
    border-top: 4px solid transparent;
}

    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        border-top: 4px solid var(--secondary-color);
    }

.card-icon {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.card h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.4rem;
}

/* --- SECCIÓN CONFIANZA / PROPUESTA --- */
.trust-section {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 4rem;
    flex-wrap: wrap;
}

.trust-content {
    flex: 1;
    min-width: 300px;
}

.trust-image {
    flex: 1;
    min-width: 300px;
    position: relative;
}

    .trust-image img {
        width: 100%;
        border-radius: 8px;
        box-shadow: 0 12px 40px rgba(0,0,0,0.12);
    }

/* --- METRICAS RELEVANTES --- */
.stats-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
    background-color: var(--primary-color);
    padding: 2rem;
    border-radius: 8px;
    color: var(--white);
    text-align: center;
}

.stat-item h4 {
    font-size: 2.2rem;
    color: var(--secondary-color);
}

/* --- FORMULARIO DE CONTACTO / SOLUCIONES --- */
.contact-box {
    max-width: 700px;
    margin: 0 auto;
    background-color: var(--white);
    padding: 3rem;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
}

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

    .form-group label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--primary-color);
    }

.form-control {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-family: inherit;
    outline: none;
    transition: var(--transition);
}

    .form-control:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(15, 42, 74, 0.1);
    }

.btn-submit {
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transition);
}

    .btn-submit:hover {
        background-color: var(--secondary-color);
        color: var(--primary-color);
    }

/* --- FOOTER --- */
footer {
    background-color: var(--primary-color);
    color: var(--text-light);
    padding: 4rem 2rem 2rem 2rem;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-about h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--secondary-color);
}

.footer-links h4 {
    margin-bottom: 1.2rem;
    position: relative;
}

.footer-links ul {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.8rem;
    opacity: 0.8;
    transition: var(--transition);
}

    .footer-links li:hover {
        opacity: 1;
        color: var(--secondary-color);
        padding-left: 5px;
    }

.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 2rem;
    text-align: center;
    font-size: 0.85rem;
    opacity: 0.7;
}

/* --- RESPONSIVO --- */
@media (max-width: 768px) {
    .nav-menu {
        display: none; /* Simplificado para la demo, se puede expandir */
    }

    .hero h1 {
        font-size: 2.3rem;
    }

    .trust-section {
        flex-direction: column-reverse;
    }

    .stats-container {
        grid-template-columns: 1fr;
    }

    .cta-buttons {
        flex-direction: column;
    }
}

/* --- AJUSTES DEL LOGO EN IMAGEN --- */
.logo-container {
    display: flex;
    align-items: center;
    height: 50px; /* Ajusta la altura del contenedor según lo necesites */
}

.logo-img {
    height: 150%;
    width: auto;
    object-fit: contain;
}

/* --- SECCIÓN VALORES (EFECTO FLIP) --- */
.valores-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    justify-content: center;
}

/* Contenedor de la perspectiva 3D */
.valor-card {
    background-color: transparent;
    width: 100%;
    height: 350px;
    perspective: 1000px; /* Necesario para el efecto 3D */
    cursor: pointer;
}

/* Contenedor interno que rota */
.valor-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
}

/* Rotación al pasar el cursor */
.valor-card:hover .valor-card-inner {
    transform: rotateY(180deg);
}

/* Caras Frontal y Trasera */
.valor-card-front, .valor-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Soporte navegadores viejos */
    backface-visibility: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

/* Cara frontal (Con imagen de fondo) */
.valor-card-front {
    background-size: cover;
    background-position: center;
    color: var(--white);
}

.valor-front-content {
    z-index: 2;
}

.valor-icon {
    font-size: 3rem;
    color: var(--secondary-color);
    margin-bottom: 1rem;
    filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.5));
}

.valor-card-front h3 {
    font-size: 1.6rem;
    text-shadow: 0px 2px 8px rgba(0,0,0,0.7);
    font-weight: 700;
}

/* Cara trasera (Texto explicativo) */
.valor-card-back {
    background-color: var(--primary-color);
    color: var(--text-light);
    transform: rotateY(180deg);
    border: 2px solid var(--secondary-color);
}

    .valor-card-back h3 {
        color: var(--secondary-color);
        font-size: 1.4rem;
        margin-bottom: 1rem;
        border-bottom: 2px solid var(--secondary-color);
        padding-bottom: 0.5rem;
        width: 100%;
    }

    .valor-card-back p {
        font-size: 0.9rem;
        line-height: 1.5;
        font-weight: 300;
    }

/* --- SECCIÓN VALORES (AJUSTE 3 ARRIBA Y 2 ABAJO CENTRADOS) --- */
.valores-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center; /* Esto centra perfectamente ambas filas */
}

/* Contenedor de la perspectiva 3D */
.valor-card {
    background-color: transparent;
    width: calc(33.333% - 1.4rem); /* Ocupa un tercio del espacio en pantallas grandes */
    min-width: 280px; /* Evita que se encojan demasiado */
    height: 350px;
    perspective: 1000px;
    cursor: pointer;
}

/* Ajuste responsivo para móviles */
@media (max-width: 768px) {
    .valores-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

/* --- SECCIÓN QUIÉNES SOMOS Y ESTRUCTURA --- */
.about-container {
    max-width: 1200px;
    margin: 0 auto 4rem auto;
    display: flex;
    gap: 4rem;
    align-items: center;
    flex-wrap: wrap;
}

.about-main {
    flex: 2;
    min-width: 300px;
}

.about-text p {
    margin-bottom: 1.2rem;
    color: #4a5568;
    font-size: 1.05rem;
    text-align: justify;
}

.about-text .lead-text {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary-color);
    line-height: 1.5;
}

/* Sidebar con la cifra destacada */
.about-sidebar {
    flex: 1;
    min-width: 280px;
}

.stat-highlight-box {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 3rem 2rem;
    border-radius: 8px;
    text-align: center;
    border-bottom: 5px solid var(--secondary-color);
    box-shadow: 0 10px 30px rgba(15, 42, 74, 0.15);
}

.sidebar-icon {
    font-size: 2.5rem;
    color: var(--secondary-color);
    margin-bottom: 1rem;
}

.stat-number {
    display: block;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 0.5rem;
}

.stat-desc {
    font-size: 0.95rem;
    opacity: 0.9;
    font-weight: 300;
    line-height: 1.4;
}

/* --- CONTENEDOR DE MISIÓN Y VISIÓN --- */
.mv-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
}

.mv-card {
    background-color: var(--bg-light);
    padding: 3rem 2.5rem;
    border-radius: 8px;
    border-left: 4px solid var(--primary-color);
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    position: relative;
    transition: var(--transition);
}

    .mv-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.06);
        border-left-color: var(--secondary-color);
    }

.mv-icon-wrapper {
    width: 50px;
    height: 50px;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
}

.mv-card:hover .mv-icon-wrapper {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

.mv-card h3 {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.mv-card p {
    color: #5a6578;
    font-size: 0.98rem;
    line-height: 1.6;
}

/* Responsivo */
@media (max-width: 992px) {
    .about-container {
        flex-direction: column;
        gap: 2rem;
    }

    .about-main, .about-sidebar {
        width: 100%;
    }
}

/* --- DISEÑO DE PESTAÑAS (TABS) INTERACTIVAS --- */
.mv-tabs-section {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    background-color: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
}

/* Banner izquierdo decorativo */
.mv-tabs-image {
    flex: 1;
    background: linear-gradient(rgba(15, 42, 74, 0.8), rgba(15, 42, 74, 0.95)), url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=800') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--white);
    text-align: center;
}

.mv-tabs-image-overlay h3 {
    font-size: 1.8rem;
    color: var(--secondary-color);
    margin: 1rem 0 0.5rem 0;
}

.banner-icon {
    font-size: 3rem;
    color: var(--secondary-color);
}

/* Columna derecha de contenidos */
.mv-tabs-content {
    flex: 1.2;
    padding: 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Botonera de pestañas */
.tab-headers {
    display: flex;
    gap: 1rem;
    border-bottom: 2px solid #edf2f7;
    margin-bottom: 2rem;
}

.tab-btn {
    background: none;
    border: none;
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
    font-family: inherit;
    font-weight: 700;
    color: #718096;
    cursor: pointer;
    position: relative;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .tab-btn i {
        font-size: 1.2rem;
    }

    /* Indicador dinámico de pestaña activa */
    .tab-btn::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 2px;
        background-color: var(--primary-color);
        transition: var(--transition);
    }

    .tab-btn.active {
        color: var(--primary-color);
    }

        .tab-btn.active::after {
            width: 100%;
        }

/* Paneles de contenido */
.tab-pane {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
}

    .tab-pane.active {
        display: block;
    }

.tab-subtitle {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--secondary-color);
    letter-spacing: 1.5px;
    margin-bottom: 0.5rem;
}

.tab-pane h3 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.tab-pane p {
    color: #4a5568;
    line-height: 1.7;
    font-size: 1.05rem;
}

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

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

/* Responsivo */
@media (max-width: 768px) {
    .mv-tabs-section {
        flex-direction: column;
    }

    .mv-tabs-image {
        padding: 2.5rem;
    }

    .mv-tabs-content {
        padding: 2rem;
    }
}

/* --- SECCIÓN NUEVAS LÍNEAS DE NEGOCIO --- */
.servicios-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 2rem;
}

.servicio-card {
    background-color: var(--white);
    padding: 2.5rem 2rem;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

    .servicio-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background-color: var(--primary-color);
        transition: var(--transition);
    }

    .servicio-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(15, 42, 74, 0.08);
        border-color: #cbd5e1;
    }

        .servicio-card:hover::before {
            background-color: var(--secondary-color);
        }

/* Iconos de servicio */
.servicio-icon-box {
    width: 60px;
    height: 60px;
    background-color: var(--bg-light);
    color: var(--primary-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    transition: var(--transition);
}

.servicio-card:hover .servicio-icon-box {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

.servicio-card h3 {
    font-size: 1.25rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
    line-height: 1.4;
    font-weight: 700;
    height: 54px; /* Alineación de títulos */
    display: flex;
    align-items: center;
}

.servicio-desc {
    color: #4a5568;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1; /* Empuja el resto hacia abajo para mantener la simetría */
}

/* Badge de métricas */
.servicio-badge {
    background-color: rgba(212, 175, 55, 0.15);
    color: #b58d1a;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    align-self: flex-start;
}

/* Sub-servicios */
.servicio-sub {
    border-top: 1px dashed #e2e8f0;
    padding-top: 1.2rem;
}

    .servicio-sub h4 {
        font-size: 0.9rem;
        color: var(--primary-color);
        margin-bottom: 0.8rem;
        font-weight: 700;
    }

    .servicio-sub ul {
        list-style: none;
    }

    .servicio-sub li {
        font-size: 0.88rem;
        color: #5a6578;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
    }

        .servicio-sub li i {
            color: var(--secondary-color);
            margin-top: 0.2rem;
            font-size: 0.8rem;
        }

/* Tarjetas pendientes */
.servicio-card.pending {
    opacity: 0.7;
    background-color: #fafbfc;
    border-style: dashed;
}

.text-muted {
    font-style: italic;
    color: #a0aec0;
}

/* --- ESTILOS ESPECÍFICOS PARA EL MODELO HIPOTECARIO --- */
.modelo-negocio-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .modelo-negocio-list li {
        font-size: 0.85rem !important;
        color: #5a6578;
        margin-bottom: 0.8rem !important;
        display: flex;
        align-items: flex-start;
        gap: 0.6rem;
        line-height: 1.4;
    }

        .modelo-negocio-list li i {
            color: var(--secondary-color);
            font-size: 0.95rem;
            margin-top: 0.1rem;
            flex-shrink: 0;
        }

        .modelo-negocio-list li strong {
            color: var(--primary-color);
            display: block;
        }

/* --- ESTILOS DE TECNOLOGÍA Y LLAMADOS A LA ACCIÓN --- */
.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

    .tech-tags span {
        background-color: var(--bg-light);
        color: var(--primary-color);
        font-size: 0.78rem;
        font-weight: 600;
        padding: 0.4rem 0.6rem;
        border-radius: 4px;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        border: 1px solid #e2e8f0;
    }

        .tech-tags span i {
            color: var(--secondary-color);
        }

.servicio-actions {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    border-top: 1px dashed #e2e8f0;
    padding-top: 1.2rem;
    margin-top: 0.5rem;
}

.action-link {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary-color);
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

    .action-link:hover {
        color: var(--secondary-color);
        padding-left: 4px;
    }

    /* Enlace de acuerdo de pago más llamativo */
    .action-link.highlight {
        color: #b58d1a;
    }

        .action-link.highlight:hover {
            color: var(--primary-color);
        }
/* --- DISEÑO DE SERVICIOS EN SIDEBAR TABS --- */
.servicios-tabs-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 2rem;
    background-color: var(--white);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    min-height: 520px;
}

/* Menú lateral izquierdo */
.servicios-sidebar {
    flex: 0 0 320px;
    background-color: var(--bg-light);
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e2e8f0;
    padding: 1.5rem 0;
}

.servicios-tab-btn {
    background: none;
    border: none;
    padding: 1.2rem 2rem;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    text-align: left;
    cursor: pointer;
    width: 100%;
    transition: var(--transition);
    border-left: 4px solid transparent;
}

    .servicios-tab-btn i {
        font-size: 1.5rem;
        color: #718096;
        transition: var(--transition);
    }

    .servicios-tab-btn .btn-text {
        display: flex;
        flex-direction: column;
    }

    .servicios-tab-btn span {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--primary-color);
    }

    .servicios-tab-btn small {
        font-size: 0.75rem;
        color: #718096;
        margin-top: 0.1rem;
    }

    /* Hover y estado Activo del Botón */
    .servicios-tab-btn:hover {
        background-color: rgba(15, 42, 74, 0.02);
    }

    .servicios-tab-btn.active {
        background-color: var(--white);
        border-left-color: var(--secondary-color);
    }

        .servicios-tab-btn.active i {
            color: var(--secondary-color);
        }

/* Panel de Contenido de la Derecha */
.servicios-display-panel {
    flex: 1;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.servicios-pane {
    display: none;
    animation: fadeInService 0.4s ease-in-out;
}

    .servicios-pane.active {
        display: block;
    }

.pane-tag {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--secondary-color);
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: 0.4rem;
}

.servicios-pane h3 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.pane-desc {
    font-size: 1rem;
    color: #4a5568;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

/* Badge o cintas de datos */
.pane-badge {
    background-color: rgba(212, 175, 55, 0.12);
    border-left: 4px solid var(--secondary-color);
    padding: 1rem 1.5rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    color: #92710c;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 1.75rem !important;
}

    .pane-badge i {
        font-size: 1.3rem;
    }

.pane-sub-content {
    font-size: 1.1rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}



    /* Sub-contenidos e hilos secundarios */
    .pane-sub-content h4 {
        font-size: 1.1rem;
        color: var(--primary-color);
        margin-bottom: 1rem;
    }

.pane-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

    .pane-list li {
        font-size: 0.95rem;
        color: #5a6578;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

        .pane-list li i {
            color: var(--secondary-color);
            font-size: 0.9rem;
        }

/* Grid específico para el Modelo Hipotecario */
.modelo-grid-dos-columnas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.2rem;
}

.modelo-mini-item {
    font-size: 0.88rem;
    color: #5a6578;
    background-color: var(--bg-light);
    padding: 1rem;
    border-radius: 6px;
    line-height: 1.5;
    border: 1px solid #edf2f7;
}

    .modelo-mini-item strong {
        color: var(--primary-color);
        display: block;
        margin-bottom: 0.3rem;
    }

/* Contenedor principal */
.tech-grid {
    display: flex;
    flex-wrap: wrap; /* Si no caben en una línea, bajan elegantemente */
    gap: 0.75rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

    /* Transformación de los spans en Píldoras Tecnológicas */
    .tech-grid span {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background: rgba(15, 42, 74, 0.05); /* Fondo sutil azul Zéndere */
        color: #0f2a4a;
        border: 1px solid rgba(15, 42, 74, 0.12);
        border-radius: 20px; /* Bordes completamente redondeados */
        font-size: 0.85rem;
        font-weight: 600;
        transition: all 0.3s ease;
    }

        /* Pequeño truco: añade un puntito o icono brillante antes del texto automáticamente */
        .tech-grid span::before {
            content: '';
            display: inline-block;
            width: 6px;
            height: 6px;
            background-color: #d4af37; /* Tu dorado institucional como acento */
            border-radius: 50%;
            box-shadow: 0 0 6px #d4af37; /* Efecto led encendido */
        }

        /* Efecto al pasar el mouse por encima (Interactividad) */
        .tech-grid span:hover {
            background: #0f2a4a;
            color: #ffffff;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(15, 42, 74, 0.15);
        }

            .tech-grid span:hover::before {
                background-color: #ffffff;
                box-shadow: 0 0 6px #ffffff;
            }

/* Botonera inferior del panel de Consumo */
.pane-actions-footer {
    display: flex;
    gap: 1rem;
    border-top: 1px solid #edf2f7;
    padding-top: 1.5rem;
}

.btn-pane-action {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.8rem 1.2rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: var(--transition);
}

.primary-action {
    background-color: var(--primary-color);
    color: var(--white);
}

    .primary-action:hover {
        background-color: var(--secondary-color);
        color: var(--primary-color);
    }

.secondary-action {
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}

    .secondary-action:hover {
        background-color: var(--bg-light);
    }

@keyframes fadeInService {
    from {
        opacity: 0;
        transform: translateX(10px);
    }

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

/* Responsivo adaptativo */
@media (max-width: 992px) {
    .servicios-tabs-container {
        flex-direction: column;
        min-height: auto;
    }

    .servicios-sidebar {
        flex: none;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }

    .servicios-display-panel {
        padding: 2rem;
    }
}

/* --- SECCIÓN CONTACTO Y UBICACIÓN MULTI-COLUMNA --- */
.contacto-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.contacto-col {
    background-color: var(--white);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
}

.contacto-card-title {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--bg-light);
    padding-bottom: 0.8rem;
}

    .contacto-card-title i {
        font-size: 1.4rem;
        color: var(--secondary-color);
    }

    .contacto-card-title h3 {
        font-size: 1.25rem;
        color: var(--primary-color);
    }

/* Directorio de Teléfonos */
.telefonos-seccion {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.tel-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.9rem;
}

    .tel-item i {
        color: var(--primary-color);
        font-size: 1.1rem;
        width: 20px;
    }

    .tel-item strong {
        color: var(--primary-color);
        margin-right: 0.3rem;
    }

    .tel-item span {
        color: #4a5568;
    }

.directorio-divider {
    border: 0;
    border-top: 1px dashed #e2e8f0;
    margin: 1.5rem 0;
}

/* Directorio de Correos */
.correos-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
    max-height: 250px; /* Evita que crezca de más */
    padding-right: 0.5rem;
}

.correo-depto {
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
}

    .correo-depto strong {
        color: var(--primary-color);
        margin-bottom: 0.2rem;
    }

    .correo-depto a {
        color: #b58d1a;
        font-weight: 600;
        transition: var(--transition);
    }

        .correo-depto a:hover {
            color: var(--primary-color);
            text-decoration: underline;
        }

/* Formulario de Mensajes */
.form-box-nuevo form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-box-nuevo .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-box-nuevo label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary-color);
}



/* Contenedores */
.contacto-master-container {
    max-width: 1100px;
    margin: 0 auto;
}

.contacto-flex {
    display: flex;
    gap: 4rem;
    margin-bottom: 3rem;
}

.info-contacto {
    flex: 1;
}

.form-contacto {
    flex: 1;
    background: var(--bg-light);
    padding: 2rem;
    border-radius: 8px;
}

/* Estilo de fuentes y elementos */
.intro-contact {
    margin-bottom: 2rem;
    color: #666;
}

.datos-principales p {
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--primary-color);
}

.depto-row {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding: 0.5rem 0;
    font-size: 0.9rem;
}

    .depto-row span {
        font-weight: 700;
        color: var(--primary-color);
    }

/* Inputs Modernos */
.input-modern {
    width: 100%;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    outline: none;
}

.btn-send {
    background: var(--primary-color);
    color: white;
    padding: 1rem 2rem;
    border: none;
    width: 100%;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}

    .btn-send:hover {
        background: var(--secondary-color);
    }



/* --- ESTILOS DEL CARRUSEL DINÁMICO EN HERO --- */
.hero-carousel-container {
    position: relative;
    min-height: 80px; /* Evita que el resto del diseño se mueva si un texto es más largo */
    margin-top: 1.5rem;
}

.carousel-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
}

    /* Estado activo con transición fluida */
    .carousel-item.active {
        position: relative;
        opacity: 1;
        visibility: visible;
    }

.hero-text-reveal .carousel-item p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #cbd5e1;
    font-weight: 300;
    margin: 0;
}

    .hero-text-reveal .carousel-item p strong {
        color: var(--secondary-color, #d4af37);
        font-weight: 600;
    }

/* Puntos indicadores inferiores del carrusel */
.carousel-dots {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.5rem;
    opacity: 0;
    animation: heroFadeInReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
}

.dot {
    width: 6px;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: var(--transition, 0.3s);
}

    .dot.active {
        background-color: var(--secondary-color, #d4af37);
        width: 18px;
        border-radius: 3px;
    }
/* ================================================================= */
/* ESTILOS DEL MODAL DE SEGURIDAD (CORREGIDO PARA MÓVIL)            */
/* ================================================================= */
.modal-security-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 42, 74, 0.6);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    padding: 1rem; /* Evita que la tarjeta toque los bordes de la pantalla */
}

    .modal-security-overlay.show {
        opacity: 1;
        visibility: visible;
    }

.modal-security-card {
    background-color: var(--white, #ffffff);
    max-width: 600px;
    width: 100%;
    padding: 2.2rem 2.2rem 1.8rem 2.2rem;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    border: 1px solid #e2e8f0;
    position: relative;
    display: flex;
    flex-direction: column;
    /* Controla la altura máxima en celulares para que NUNCA se desborde */
    max-height: calc(100vh - 40px);
    transform: translateY(-30px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-security-overlay.show .modal-security-card {
    transform: translateY(0);
}

/* Botón de equis (X) en la esquina superior */
.btn-modal-close-x {
    position: absolute;
    top: 1rem;
    right: 1.2rem;
    background: none;
    border: none;
    font-size: 1.8rem;
    color: #94a3b8;
    cursor: pointer;
    line-height: 1;
    padding: 0.2rem;
    transition: color 0.2s ease;
}

    .btn-modal-close-x:hover {
        color: #e53e3e;
    }

.modal-security-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.2rem;
    border-bottom: 2px solid #f7fafc;
    padding-bottom: 0.8rem;
    padding-right: 1.5rem; /* Espacio para que no choque con la X */
}

    .modal-security-header i {
        font-size: 1.8rem;
        color: #e53e3e;
        flex-shrink: 0;
    }

    .modal-security-header h3 {
        font-size: 1.3rem;
        color: var(--primary-color, #0f2a4a);
        font-weight: 700;
        margin: 0;
    }

/* ZONA CRÍTICA: Permite scroll interno si el texto supera la pantalla del celular */
.modal-security-scroll-area {
    overflow-y: auto;
    flex-grow: 1;
    padding-right: 0.5rem;
    margin-bottom: 1.2rem;
    /* Scroll suave en iOS */
    -webkit-overflow-scrolling: touch;
}

    /* Estilos de barra de scroll sutiles para navegadores modernos */
    .modal-security-scroll-area::-webkit-scrollbar {
        width: 4px;
    }

    .modal-security-scroll-area::-webkit-scrollbar-thumb {
        background-color: #cbd5e1;
        border-radius: 4px;
    }

.modal-security-body {
    font-size: 0.95rem;
    color: #4a5568;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.modal-highlight-box {
    background-color: rgba(212, 175, 55, 0.1);
    border-left: 4px solid var(--secondary-color, #d4af37);
    padding: 0.9rem;
    border-radius: 4px;
    font-weight: 500;
}

    .modal-highlight-box a {
        color: var(--primary-color, #0f2a4a);
        font-weight: 700;
        text-decoration: underline;
    }

.modal-footer-text {
    font-size: 0.85rem;
    font-style: italic;
    color: #718096;
    border-top: 1px dashed #e2e8f0;
    padding-top: 0.8rem;
}

.modal-security-actions {
    flex-shrink: 0;
}

.btn-modal-close {
    background-color: var(--primary-color, #0f2a4a);
    color: #ffffff;
    padding: 0.8rem 2rem;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    text-align: center;
}

    .btn-modal-close:hover {
        background-color: var(--secondary-color, #d4af37);
        color: var(--primary-color, #0f2a4a);
    }

/* Ajustes específicos para pantallas muy pequeñas (celulares compactos) */
@media (max-width: 480px) {
    .modal-security-card {
        padding: 1.8rem 1.2rem 1.2rem 1.2rem;
    }

    .modal-security-header h3 {
        font-size: 1.15rem;
    }

    .modal-security-body {
        font-size: 0.88rem;
    }
}

/* ================================================================= */
/* FOOTER PREMIUM UNIFICADO                                          */
/* ================================================================= */
.footer-unified {
    background-color: var(--primary-color, #0f2a4a); /* Mismo azul profundo del Header */
    color: #ffffff;
    padding: 4rem 0 0 0;
    font-family: inherit;
    border-top: 3px solid var(--secondary-color, #d4af37); /* Sutil línea dorada de transición */
}

.footer-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1.3fr 0.8fr 0.8fr 1.1fr;
    gap: 3rem;
}

.footer-column h4 {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 0.5rem;
}

    /* Línea decorativa inferior atenuada para los títulos del footer */
    .footer-column h4::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 35px;
        height: 2px;
        background-color: var(--secondary-color, #d4af37);
    }

/* Columna de Marca */
.footer-logo {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #ffffff;
    margin-bottom: 1rem;
}

.footer-brand-desc {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #a0aec0;
    margin-bottom: 1.5rem;
}

.footer-socials {
    display: flex;
    gap: 0.8rem;
}

    .footer-socials a {
        width: 36px;
        height: 36px;
        background-color: rgba(255, 255, 255, 0.05);
        color: #ffffff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        font-size: 0.9rem;
    }

        .footer-socials a:hover {
            background-color: var(--secondary-color, #d4af37);
            color: var(--primary-color, #0f2a4a);
            transform: translateY(-2px);
        }

/* Listas de Enlaces Dinámicos */
.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .footer-column ul li {
        margin-bottom: 0.75rem;
    }

    .footer-column ul a {
        color: #cbd5e1;
        text-decoration: none;
        font-size: 0.88rem;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
    }

        .footer-column ul a i {
            font-size: 0.7rem;
            color: transparent; /* Oculto por defecto */
            transition: all 0.3s ease;
        }

        /* Hover interactivo pero fino */
        .footer-column ul a:hover {
            color: var(--secondary-color, #d4af37);
            padding-left: 4px;
        }

            .footer-column ul a:hover i {
                color: var(--secondary-color, #d4af37);
            }

/* Columna de Información de Contacto */
.contact-column p {
    font-size: 0.88rem;
    color: #cbd5e1;
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

    .contact-column p i {
        color: var(--secondary-color, #d4af37);
        width: 16px;
    }

    .contact-column p a {
        color: #cbd5e1;
        text-decoration: none;
        transition: color 0.3s ease;
    }

        .contact-column p a:hover {
            color: var(--secondary-color, #d4af37);
        }

/* Barra de Créditos Inferior */
.footer-bottom {
    background-color: rgba(0, 0, 0, 0.2); /* Oscurece levemente la base */
    margin-top: 3.5rem;
    padding: 1.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-bottom-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: #718096;
}

.footer-legal-links {
    display: flex;
    gap: 1rem;
}

    .footer-legal-links a {
        color: #718096;
        text-decoration: none;
        transition: color 0.3s ease;
    }

        .footer-legal-links a:hover {
            color: var(--secondary-color, #d4af37);
        }

/* Adaptación a dispositivos móviles */
@media (max-width: 868px) {
    .footer-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-bottom-container {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

/* ================================================================= */
/* CONTACT SPLIT PREMIUM STYLES                                      */
/* ================================================================= */
.premium-contact-section {
    padding: 6rem 0;
    background-color: #f8fafc; /* Gris ultra claro que resalta las tarjetas blancas */
}

.contact-wrapper {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 2rem;
}

.contact-header-minimal {
    text-align: center;
    margin-bottom: 4rem;
}

.contact-sub {
    display: inline-block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--secondary-color, #d4af37);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.contact-header-minimal h2 {
    font-size: 2.2rem;
    color: var(--primary-color, #0f2a4a);
    font-weight: 400;
    margin: 0 0 1rem 0;
}

.contact-header-minimal p {
    color: #64748b;
    font-size: 1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* Rejilla Principal */
.contact-split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
    margin-bottom: 4rem;
}

/* Tarjetas de Información */
.info-card-premium {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 1.5rem;
    border-radius: 8px;
    display: flex;
    gap: 1.2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
}

    .info-card-premium.mini {
        margin-bottom: 0;
        flex: 1;
        align-items: center;
    }

.quick-data-row {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.card-icon-box i, .info-card-premium.mini i {
    font-size: 1.3rem;
    color: var(--secondary-color, #d4af37);
}

.card-text-box h4, .info-card-premium h4 {
    margin: 0 0 0.4rem 0;
    font-size: 1rem;
    color: var(--primary-color, #0f2a4a);
    font-weight: 600;
}

.card-text-box p, .info-card-premium span {
    margin: 0;
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.5;
}

/* Sistema de Pestañas (Tabs) */
.channels-tab-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.8rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

    .channels-tab-box h4 {
        margin: 0 0 1.2rem 0;
        font-size: 1rem;
        color: var(--primary-color, #0f2a4a);
    }

.tab-buttons {
    display: flex;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.tab-btn {
    background: none;
    border: none;
    padding: 0.6rem 0;
    font-size: 0.9rem;
    color: #94a3b8;
    cursor: pointer;
    position: relative;
    font-weight: 500;
    transition: color 0.3s ease;
}

    .tab-btn.active {
        color: var(--primary-color, #0f2a4a);
        font-weight: 600;
    }

        .tab-btn.active::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: var(--secondary-color, #d4af37);
        }

.tab-pane {
    display: none;
}

    .tab-pane.active {
        display: block;
        animation: fadeInTab 0.4s ease forwards;
    }

.directory-line {
    display: flex;
    justify-content: space-between;
    font-size: 0.88rem;
    padding: 0.6rem 0;
    border-bottom: 1px dashed #f1f5f9;
}

    .directory-line span {
        color: #64748b;
        font-weight: 500;
    }

    .directory-line a {
        color: var(--primary-color, #0f2a4a);
        text-decoration: none;
        font-weight: 500;
        transition: color 0.3s;
    }

        .directory-line a:hover {
            color: var(--secondary-color, #d4af37);
            text-decoration: underline;
        }

/* Formulario Flotante */
.form-premium-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 3rem;
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
}

    .form-premium-card h3 {
        margin: 0 0 0.5rem 0;
        font-size: 1.4rem;
        color: var(--primary-color, #0f2a4a);
    }

    .form-premium-card p {
        color: #64748b;
        font-size: 0.9rem;
        margin-bottom: 2.5rem;
    }

/* Inputs Modernos con etiquetas animadas */
.modern-field {
    position: relative;
    margin-bottom: 2rem;
}

    .modern-field input, .modern-field textarea {
        width: 100%;
        padding: 0.6rem 0;
        border: none;
        border-bottom: 1px solid #cbd5e1;
        background: transparent;
        font-size: 0.95rem;
        color: var(--primary-color, #0f2a4a);
        outline: none;
        transition: border-color 0.3s;
    }

    .modern-field textarea {
        resize: none;
    }

    .modern-field label {
        position: absolute;
        left: 0;
        top: 0.6rem;
        color: #94a3b8;
        font-size: 0.95rem;
        pointer-events: none;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Animación del Label al enfocar o rellenar */
    .modern-field input:focus ~ label,
    .modern-field input:not(:placeholder-shown) ~ label,
    .modern-field textarea:focus ~ label,
    .modern-field textarea:not(:placeholder-shown) ~ label {
        top: -1.2rem;
        font-size: 0.8rem;
        color: var(--secondary-color, #d4af37);
        font-weight: 600;
    }

    .modern-field input:focus, .modern-field textarea:focus {
        border-color: var(--primary-color, #0f2a4a);
    }

    /* ================================================================= */
    /* AJUSTE PARA EL COMBO DE DEPARTAMENTOS                             */
    /* ================================================================= */
    .modern-field select {
        width: 100%;
        outline: none;
        background: transparent;
        border: 1px solid #cbd5e1; /* Ajusta al color de tu borde original */
        padding: 0.8rem;
        border-radius: 6px;
        font-size: 1rem;
        color: #334155;
        appearance: none; /* Quita la flecha default del navegador */
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 1rem;
    }

        /* Efecto de Flotado para el Select usando la validación de CSS */
        .modern-field select:focus ~ label,
        .modern-field select:valid ~ label {
            top: 0;
            font-size: 0.75rem;
            background: #ffffff; /* Asegura el fondo blanco para tapar la línea del borde */
            padding: 0 0.25rem;
            color: var(--primary-color, #0f2a4a);
        }

/* Botón de Envío Corporativo */
.btn-premium-send {
    width: 100%;
    background-color: var(--primary-color, #0f2a4a);
    color: #ffffff;
    border: none;
    padding: 1rem;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    transition: all 0.3s;
}

    .btn-premium-send:hover {
        background-color: var(--secondary-color, #d4af37);
        color: var(--primary-color, #0f2a4a);
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
    }

/* ================================================================= */
/* CONFIGURACIÓN REFINADA DE LA TARJETA DEL MAPA                    */
/* ================================================================= */
.premium-map-box {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    margin-top: 2rem;
    z-index: 1;
}

/* 1. MENTALIDAD DESKTOP-FIRST: Oculta la tarjeta en pantallas grandes */
.map-floating-address {
    display: none;
}

/* ================================================================= */
/* 2. RESPONSIVO: Se activa y se compacta solo en pantallas móviles   */
/* ================================================================= */
@media (max-width: 768px) {
    .map-floating-address {
        display: flex; /* Se muestra únicamente en móviles */
        position: absolute;
        bottom: 12px; /* Un poco más pegada al borde inferior */
        left: 12px;
        right: 12px;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        border: 1px solid rgba(226, 232, 240, 0.9);
        /* Reducción de tamaño general */
        padding: 0.6rem 0.8rem;
        border-radius: 6px;
        gap: 0.6rem;
        z-index: 2;
        pointer-events: none;
        box-shadow: 0 4px 15px rgba(15, 42, 74, 0.12);
    }
    /* Icono de ubicación más pequeño */
    .map-address-icon i {
        font-size: 0.95rem;
        color: var(--secondary-color, #d4af37);
        margin-top: 0.1rem;
    }
    /* Título más compacto */
    .map-address-text h4 {
        margin: 0 0 0.1rem 0;
        font-size: 0.85rem;
        color: var(--primary-color, #0f2a4a);
        font-weight: 700;
    }
    /* Dirección con letra más chica y espaciado compacto */
    .map-address-text p {
        margin: 0;
        font-size: 0.72rem;
        color: #475569;
        line-height: 1.3;
    }
}

@keyframes fadeInTab {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

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

/* Vista de Tablet y Móvil */
@media (max-width: 968px) {
    .contact-split-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .form-premium-card {
        padding: 2rem;
    }
}

@media (max-width: 550px) {
    .quick-data-row {
        flex-direction: column;
        gap: 1.5rem;
    }
}

/* --- Resaltado del link en el Footer --- */
.link-privacy-highlight {
    color: #ffffff !important; /* Color dorado/destacado */
    font-weight: 700;
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(212, 175, 55, 0.1); /* Fondo sutil */
    transition: all 0.3s ease;
}

    .link-privacy-highlight:hover {
        background: rgba(212, 175, 55, 0.2);
        box-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
    }

/* --- Estilos Generales del Modal Legal --- */
.modal-privacy-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 42, 74, 0.7);
    backdrop-filter: blur(4px);
    z-index: 100000; /* Por encima de todo */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: 1.5rem;
}

    .modal-privacy-overlay.show {
        opacity: 1;
        visibility: visible;
    }

.modal-privacy-card {
    background: #fff;
    width: 100%;
    max-width: 1000px; /* Más ancho para las dos columnas */
    height: 80vh;
    border-radius: 12px;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.btn-privacy-close-x {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: none;
    border: none;
    font-size: 2rem;
    color: #94a3b8;
    cursor: pointer;
    z-index: 10;
}

    .btn-privacy-close-x:hover {
        color: #e53e3e;
    }

.modal-privacy-header {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

    .modal-privacy-header i {
        font-size: 1.6rem;
        color: #0f2a4a;
    }

    .modal-privacy-header h3 {
        margin: 0;
        font-size: 1.4rem;
        color: #0f2a4a;
        font-weight: 700;
    }

/* Layout de dos columnas */
.modal-privacy-layout {
    display: flex;
    flex-grow: 1;
    overflow: hidden; /* Evita scroll en la tarjeta principal */
}

/* Menú Izquierdo */
.privacy-sidebar {
    width: 30%;
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
    overflow-y: auto;
    padding: 1rem 0;
}

.privacy-tab-btn {
    width: 100%;
    padding: 0.8rem 1.5rem;
    border: none;
    background: none;
    text-align: left;
    font-size: 0.9rem;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 4px solid transparent;
}

    .privacy-tab-btn:hover {
        background: #f1f5f9;
        color: #0f2a4a;
    }

    .privacy-tab-btn.active {
        background: #ffffff;
        color: #0f2a4a;
        font-weight: 700;
        border-left-color: #0f2a4a;
    }

/* Contenido Derecho */
.privacy-content-area {
    width: 70%;
    padding: 2rem;
    overflow-y: auto;
    background: #ffffff;
}

.privacy-tab-content {
    display: none;
}

    .privacy-tab-content.active {
        display: block;
        animation: fadeIn 0.3s ease;
    }

.privacy-content-area h4 {
    color: #0f2a4a;
    margin-top: 0;
    font-weight: 700;
    font-size: 1.2rem;
}

.privacy-content-area p {
    color: #334155;
    line-height: 1.7;
    font-size: 0.95rem;
}

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

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

/* ================================================================= */
/* RESPONSIVO PARA MÓVILES                                           */
/* ================================================================= */
@media (max-width: 768px) {
    .modal-privacy-layout {
        flex-direction: column;
    }

    .privacy-sidebar {
        width: 100%;
        height: 25%;
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }

    .privacy-content-area {
        width: 100%;
        height: 75%;
        padding: 1.2rem;
    }

    .privacy-tab-btn {
        padding: 0.6rem 1.2rem;
    }
}

/* Texto instructivo inicial */
.privacy-instruction {
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 1.5rem;
}

/* Contenedor principal de la lista */
.privacy-pdf-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* Separación balanceada entre renglones */
}

/* Tarjeta / Enlace individual de cada archivo */
.privacy-pdf-item {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.9rem 1.2rem;
    text-decoration: none !important; /* Evita el subrayado feo de los enlaces */
    transition: all 0.25s ease;
}

    /* Efecto visual Hover corporativo */
    .privacy-pdf-item:hover {
        background: #f0f4f8;
        border-color: #cbd5e1;
        transform: translateX(4px); /* Pequeño desplazamiento interactivo */
        box-shadow: 0 4px 6px -1px rgba(15, 42, 74, 0.05);
    }

/* Diseño del contenedor del ícono */
.pdf-item-icon {
    width: 40px;
    height: 40px;
    background: rgba(239, 68, 68, 0.1); /* Fondo rojo muy sutil */
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1.2rem;
    flex-shrink: 0; /* Evita que el contenedor del icono se deforme si el texto es muy largo */
}

    .pdf-item-icon i {
        color: #ef4444; /* Color rojo PDF clásico */
        font-size: 1.3rem;
    }

/* Estructura de textos a la derecha */
.pdf-item-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 1rem;
}

/* Nombre del aviso */
.pdf-item-title {
    font-size: 0.95rem;
    color: #1e293b;
    font-weight: 550;
    line-height: 1.4;
    text-align: left;
}

/* Etiqueta de acción (Abrir documento) */
.pdf-item-action {
    font-size: 0.78rem;
    color: var(--primary-color, #0f2a4a);
    font-weight: 600;
    white-space: nowrap; /* Evita que la acción se parta en dos líneas */
    display: flex;
    align-items: center;
    gap: 0.4rem;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.privacy-pdf-item:hover .pdf-item-action {
    opacity: 1;
}

/* Adaptación fluida para dispositivos móviles */
@media (max-width: 600px) {
    .privacy-pdf-item {
        padding: 0.8rem;
    }

    .pdf-item-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
    }

    .pdf-item-title {
        font-size: 0.88rem;
    }

    .pdf-item-action {
        margin-top: 0.2rem;
    }
}

/* ================================================================= */
/* ESTILOS BASE DEL BOTÓN MÓVIL (ESCRITORIO: OCULTO)                 */
/* ================================================================= */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1001; /* Siempre por encima del fondo de la cortina */
    padding: 0;
}

    .mobile-menu-toggle .bar {
        width: 100%;
        height: 2.5px;
        background-color: #0f2a4a; /* Color azul Zéndere */
        transition: all 0.3s ease;
        border-radius: 2px;
    }

/* ================================================================= */
/* CONFIGURACIÓN CRÍTICA PARA CELULARES Y TABLETS                    */
/* ================================================================= */
@media (max-width: 768px) {
    /* Mostramos la hamburguesa */
    .mobile-menu-toggle {
        display: flex;
    }
    /* Convertimos la lista original en un menú lateral fluido */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%; /* Totalmente oculto al inicio */
        width: 70%; /* Ancho de la cortina */
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: -10px 0 30px rgba(15, 42, 74, 0.15);
        /* Cambiamos a disposición vertical */
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 90px 2rem 2rem 2rem; /* Margen superior para no encimar con el header */
        gap: 1.5rem;
        margin: 0;
        list-style: none;
        /* Transición suave para el deslizamiento */
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1000;
    }
        /* Clase activa que inyectará JS para deslizar el menú */
        .nav-menu.active {
            right: 0;
        }
        /* Ajustamos los elementos de la lista en móvil */
        .nav-menu li {
            width: 100%;
        }

        .nav-menu .nav-item {
            display: block;
            width: 100%;
            font-size: 1.1rem;
            padding: 0.6rem 0;
            color: #0f2a4a;
            text-decoration: none;
            font-weight: 600;
            border-bottom: 1px solid #f1f5f9; /* Línea divisoria sutil */
        }
    /* ------------------------------------------------------------- */
    /* ANIMACIÓN: DE HAMBURGUESA A "X" EN ACCIÓN                     */
    /* ------------------------------------------------------------- */
    .mobile-menu-toggle.open .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .mobile-menu-toggle.open .bar:nth-child(2) {
        opacity: 0; /* Desaparece la barra central */
    }

    .mobile-menu-toggle.open .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}

@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex !important; /* Asegura que el botón sea visible */
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: -10px 0 30px rgba(15, 42, 74, 0.15);
        /* Forzamos el comportamiento vertical en móvil */
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 90px 2rem 2rem 2rem;
        gap: 1.5rem;
        margin: 0;
        list-style: none;
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1000;
    }
        /* Cuando se le añade la clase active, se desplaza a la posición visible */
        .nav-menu.active {
            right: 0 !important;
        }
}

/* ================================================================= */
/* CONFIGURACIÓN BASE DEL MODAL (FLEX / SCROLL)                      */
/* ================================================================= */
.modal-zen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 42, 74, 0.55);
    backdrop-filter: blur(4px);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: 1.5rem;
}

    .modal-zen-overlay.show {
        opacity: 1;
        visibility: visible;
    }

.modal-zen-card.setup-fixed-layout {
    background: #ffffff;
    max-width: 900px; /* Un poco más ancho para albergar cómodamente las 4 columnas */
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 50px);
    overflow: hidden;
}

/* Encabezado Azul */
.modal-zen-header.bg-navy-azul {
    background-color: #0f2a4a;
    color: #ffffff;
    padding: 1.2rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-title-wrapper {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

    .header-title-wrapper i {
        font-size: 1.3rem;
        color: #d4af37;
    }

    .header-title-wrapper h3 {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: #ffffff;
    }

.btn-zen-close-x {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 1.8rem;
    cursor: pointer;
    line-height: 1;
    opacity: 0.8;
}

    .btn-zen-close-x:hover {
        opacity: 1;
        color: #d4af37;
    }

.modal-zen-body {
    padding: 1.5rem;
    flex-grow: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-intro-text {
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* ================================================================= */
/* TABLA CON ENCABEZADOS FIJOS Y ESTRUCTURA DE CELDAS                */
/* ================================================================= */
.zen-table-responsive {
    overflow-y: auto;
    overflow-x: visible;
    flex-grow: 1;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

.zen-despachos-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

    .zen-despachos-table thead th {
        position: sticky;
        top: 0;
        background-color: #0f2a4a !important;
        color: #ffffff !important;
        z-index: 10;
        padding: 0.9rem;
        font-size: 0.88rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        box-shadow: inset 0 -1px 0 #2c4e75;
    }

    .zen-despachos-table tbody td {
        padding: 1rem 0.9rem;
        font-size: 0.92rem;
        color: #334155;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: top;
    }

/* ================================================================= */
/* MANEJO DE MULTIPLES DATOS (TELEFONOS Y CORREOS)                  */
/* ================================================================= */
.multi-data-stack {
    display: flex;
    flex-direction: column;
    gap: 0.4rem; /* Apila los elementos ordenadamente */
}

/* Micro-Etiquetas Estilizadas */
.badge-contact {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
    width: fit-content;
}

    /* Teléfonos (Gris neutro y limpio) */
    .badge-contact.phone {
        background-color: #f1f5f9;
        color: #475569;
        border: 1px solid #e2e8f0;
    }

    /* Correos (Tono azulado interactivo) */
    .badge-contact.email {
        background-color: #e0f2fe;
        color: #0369a1;
        border: 1px solid #bae6fd;
    }

        .badge-contact.email:hover {
            background-color: #0369a1;
            color: #ffffff;
            transform: translateY(-1px);
        }

.modal-zen-footer {
    padding: 1rem 1.5rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    text-align: right;
}

.btn-zen-close-secondary {
    background: #e2e8f0;
    border: none;
    color: #475569;
    padding: 0.6rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

    .btn-zen-close-secondary:hover {
        background: #cbd5e1;
    }

/* Estilo ejecutivo para la columna de múltiples responsables */
.badge-contact.responsible {
    background-color: #f8fafc;
    color: #0f2a4a;
    border: 1px solid #cbd5e1;
    font-weight: 600;
}

/* ================================================================= */
/* CONFIGURACIÓN RESPONSIVE PARA MÓVILES (TABLETS Y CELULARES)       */
/* ================================================================= */
@media (max-width: 768px) {
    /* 1. Reducimos el padding general del modal para ganar espacio */
    .modal-zen-overlay {
        padding: 0.5rem;
    }

    .modal-zen-body {
        padding: 1rem 0.75rem;
    }
    /* 2. Convertimos la tabla en un contenedor de bloques libres */
    .zen-despachos-table,
    .zen-despachos-table thead,
    .zen-despachos-table tbody,
    .zen-despachos-table tr,
    .zen-despachos-table td {
        display: block;
        width: 100% !important;
    }
        /* 3. Escondemos el encabezado de la tabla porque consume espacio innecesario en móvil */
        .zen-despachos-table thead {
            display: none;
        }
        /* 4. Convertimos cada fila (tr) en una tarjeta independiente */
        .zen-despachos-table tbody tr {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 1rem;
            margin-bottom: 1rem;
            box-shadow: 0 2px 5px rgba(0,0,0,0.02);
        }
        /* 5. Ajustamos las celdas (td) para que actúen como renglones dentro de la tarjeta */
        .zen-despachos-table tbody td {
            padding: 0.4rem 0 !important;
            border-bottom: none;
            font-size: 0.9rem;
        }
            /* 6. Añadimos etiquetas simuladas antes de los datos para saber qué es cada cosa */
            /* Usamos selectores posicionales basándonos en el orden de tus columnas */
            /* Agencia (Columna 1) */
            .zen-despachos-table tbody td:nth-child(1) {
                font-size: 1.1rem;
                border-bottom: 1px solid #f1f5f9;
                padding-bottom: 0.6rem !important;
                margin-bottom: 0.4rem;
            }
            /* Teléfonos (Columna 2) */
            .zen-despachos-table tbody td:nth-child(2)::before {
                content: "Teléfonos oficiales:";
                display: block;
                font-size: 0.75rem;
                text-transform: uppercase;
                color: #94a3b8;
                font-weight: 700;
                margin-bottom: 0.2rem;
            }
            /* Responsable (Columna 3) */
            .zen-despachos-table tbody td:nth-child(3)::before {
                content: "Responsable a cargo:";
                display: block;
                font-size: 0.75rem;
                text-transform: uppercase;
                color: #94a3b8;
                font-weight: 700;
                margin-bottom: 0.2rem;
            }
            /* Correos (Columna 4) */
            .zen-despachos-table tbody td:nth-child(4)::before {
                content: "Correos de atención:";
                display: block;
                font-size: 0.75rem;
                text-transform: uppercase;
                color: #94a3b8;
                font-weight: 700;
                margin-bottom: 0.2rem;
            }
    /* 7. Hacemos que los badges ocupen todo el ancho disponible para que sea más fácil darles clic con el dedo */
    .multi-data-stack {
        width: 100%;
    }

    .badge-contact {
        width: 100% !important;
        display: flex !important;
        justify-content: flex-start;
    }
}

/* Contenedor del select estático */
.modern-field.select-field.static-layout {
    display: flex;
    flex-direction: column;
    gap: 0.4rem; /* Espacio controlado entre el título y el combo */
    position: relative;
    border: none; /* Quitamos bordes del contenedor si los tuviera */
    padding: 0;
}

    /* Título Fijo: Mantiene su tamaño y color en todo momento */
    .modern-field.select-field.static-layout .select-static-label {
        font-size: 0.95rem;
        font-weight: 500;
        color: #475569; /* Un tono gris corporativo elegante */
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        background: transparent;
        padding: 0;
        margin-bottom: 2px;
    }

    /* El cuerpo del Select */
    .modern-field.select-field.static-layout select {
        width: 100%;
        outline: none;
        background: #ffffff;
        border: 1px solid #cbd5e1;
        padding: 0.8rem;
        border-radius: 6px;
        font-size: 1rem;
        color: #334155;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        /* Flecha estilizada */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 1rem;
        transition: border-color 0.2s;
    }

        /* Cambio sutil al dar foco al combo */
        .modern-field.select-field.static-layout select:focus {
            border-color: var(--primary-color, #0f2a4a);
        }


.premium-popup {
    font-family: "Segoe UI", Helvetica, Arial, sans-serif !important;
    border-radius: 12px !important;
}

.modern-field input,
.modern-field select,
.modern-field textarea {
    font-family: "Segoe UI", Helvetica, Arial, sans-serif; /* O la fuente principal de tu portal */
    font-size: 15px; /* Ajusta al tamaño visual que estés usando */
}

/* 1. Contenedor principal: Aseguramos que sea el eje de coordenadas y corte lo que sobresalga */
.map-premium-container {
    position: relative !important;
    width: 100%;
    height: 400px;
    overflow: hidden !important;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* 2. Envoltura del Iframe: Incrementamos el empuje hacia arriba para ocultar por completo la caja de Google */
.map-iframe-wrapper {
    position: absolute !important;
    top: -70px; /* Si aún se veía una orilla de la caja gris, subir a -70px o -80px lo soluciona */
    left: 0;
    width: 100%;
    height: 470px; /* Aumentamos el alto para que no quede una franja blanca abajo al subirlo */
}

    .map-iframe-wrapper iframe {
        width: 100%;
        height: 100%;
    }

/* 3. Tarjeta personalizada: Forzamos que se posicione fija arriba a la izquierda del contenedor */
.map-address-card {
    position: absolute !important;
    z-index: 999 !important; /* Forzamos que se dibuje por encima del mapa obligatoriamente */
    background: rgba(255, 255, 255, 0.98) !important;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(15, 42, 74, 0.2);
    border-left: 4px solid #ffffff;
    max-width: 300px;
    font-family: "Segoe UI", Helvetica, Arial, sans-serif;
    pointer-events: auto; /* Permite interactuar con el texto o links dentro de tu tarjeta */
}

    .map-address-card h4 {
        margin: 0 0 8px 0;
        color: #0f2a4a;
        font-size: 15px;
        font-weight: 600;
    }

    .map-address-card p {
        margin: 0;
        color: #4a5568;
        font-size: 13px;
        line-height: 1.5;
    }

/* Contenedor Base */
.map-premium-container {
    position: relative !important;
    width: 100%;
    height: 450px;
    overflow: hidden !important;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    background: #e5e3df; /* Color de fondo grisáceo clásico de mapas mientras carga */
}

/* El mapa ocupa todo el contenedor de fondo de forma limpia */
.map-iframe-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}

/* 🛡️ LA MÁSCARA: Tapa el cuadro flotante original de Google Maps */
.map-native-mask {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 380px; /* Ancho suficiente para cubrir el cuadro nativo completo */
    height: 100px; /* Alto suficiente para bloquear la sección superior */
    background: #f5f3f0 !important; /* Mismo color de fondo beige/grisáceo de las calles de Google Maps */
    z-index: 2 !important; /* Por encima del mapa, por debajo de tu tarjeta */
    pointer-events: none; /* Crucial: permite que los clics pasen a través del mapa si es necesario */
}

/* Tu Tarjeta Corporativa Impecable */
.map-address-card {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important; /* En móviles abraza todo el ancho superior actuando como bloque */
    background: #ffffff !important;
    padding: 16px 20px !important;
    border-left: 4px solid #d4af37;
    box-sizing: border-box !important;
    z-index: 3 !important; /* Hasta arriba de todo */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

    .map-address-card h4 {
        margin: 0 0 4px 0 !important;
        color: #0f2a4a;
        font-size: 14px;
        font-weight: 600;
    }

    .map-address-card p {
        margin: 0 !important;
        color: #4a5568;
        font-size: 12.5px;
        line-height: 1.4;
    }

/* ==========================================
   AJUSTES RENDERIZADO ESCRITORIO (Pantallas medianas/grandes)
   ========================================== */
@media (min-width: 768px) {
    .map-premium-container {
        height: 400px;
    }

    /* En escritorio la máscara se vuelve blanca y se funde con tu tarjeta flotante */
    .map-native-mask {
        width: 360px;
        height: 160px;
        background: #ffffff !important;
        border-radius: 0 0 12px 0; /* Suaviza el borde inferior */
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    }

    /* Tu tarjeta flota elegantemente en la esquina */
    .map-address-card {
        top: 20px !important;
        left: 20px !important;
        width: 310px !important;
        border-radius: 8px;
        box-shadow: 0 4px 20px rgba(15, 42, 74, 0.18);
    }
}

/* Estilo del botón de redirección a Maps */
.btn-maps-redirect {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 14px;
    background-color: #0f2a4a; /* Azul institucional profundo */
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 6px rgba(15, 42, 74, 0.2);
}

    /* Efecto Hover elegante */
    .btn-maps-redirect:hover {
        background-color: #14355c;
        color: #d4af37 !important; /* Texto o icono cambia a dorado al pasar el cursor */
        box-shadow: 0 4px 10px rgba(15, 42, 74, 0.3);
        transform: translateY(-1px);
    }

    .btn-maps-redirect i {
        font-size: 11px;
        /* Un ligero giro para que la flecha apunte hacia arriba a la derecha, simulando navegación */
        transform: rotate(45deg);
    }

/* Ajuste fino para la separación en móvil */
@media (max-width: 767px) {
    .btn-maps-redirect {
        margin-top: 10px;
        width: 100%; /* En móviles se estira para que sea más fácil de presionar con el pulgar */
        justify-content: center;
    }
}

/* ==========================================
   MANTENEMOS LOS ESTILOS GENERALES DE MÓVIL
   ========================================== */
.map-premium-container {
    position: relative !important;
    width: 100%;
    height: 520px;
    overflow: hidden !important;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff;
}

.map-iframe-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}

.map-native-mask {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 380px;
    height: 130px;
    background: #f5f3f0 !important;
    z-index: 2 !important;
    pointer-events: none;
}

.map-address-card {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: #ffffff !important;
    padding: 36px 20px !important;
    border-left: 4px solid #d4af37;
    box-sizing: border-box !important;
    z-index: 3 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

    .map-address-card h4 {
        margin: 0 0 4px 0 !important;
        color: #0f2a4a;
        font-size: 14px;
        font-weight: 600;
    }

    .map-address-card p {
        margin: 0 !important;
        color: #4a5568;
        font-size: 12.5px;
        line-height: 1.4;
    }

.btn-maps-redirect {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 14px;
    background-color: #0f2a4a;
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 6px rgba(15, 42, 74, 0.2);
}

    .btn-maps-redirect:hover {
        background-color: #14355c;
        color: #d4af37 !important;
        box-shadow: 0 4px 10px rgba(15, 42, 74, 0.3);
        transform: translateY(-1px);
    }

    .btn-maps-redirect i {
        font-size: 11px;
        transform: rotate(45deg);
    }

@media (max-width: 767px) {
    .btn-maps-redirect {
        margin-top: 10px;
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================
   ✨ AJUSTES MODIFICADOS PARA ESCRITORIO (AL RAS)
   ========================================== */
@media (min-width: 768px) {
    .map-premium-container {
        height: 400px;
    }

    /* La máscara se ajusta al tamaño exacto de la tarjeta pegada al ras */
    .map-native-mask {
        width: 10px;
        height: 10px;
        background: #ffffff !important;
        border-radius: 0 0 12px 0; /* Mantiene redondeado solo el borde inferior derecho */
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    }

    /* Tarjeta totalmente orientada al ras en la esquina superior izquierda */
    .map-address-card {
        top: 0 !important; /* 📍 Al ras del borde superior */
        left: 0 !important; /* 📍 Al ras del borde izquierdo */
        width: 340px !important;
        /* Quitamos el redondeado superior izquierdo para que encaje perfecto con el contenedor */
        border-radius: 0 0 12px 0;
        padding: 22px !important; /* Un poco más de aire interno para que luzca ejecutiva */
        box-shadow: 0 4px 20px rgba(15, 42, 74, 0.15);
    }
}

.privacy-sidebar-legend {
    margin-top: 15px;
    padding: 10px;
    font-size: 12px;
    color: #718096; /* Color gris muted */
    line-height: 1.4;
    font-weight: 500;
    background-color: #edf2f7; /* Un fondo sutil para contrastar */
    border-radius: 6px;
    display: none; /* Oculto por defecto al cargar el modal */
}

    .privacy-sidebar-legend.show {
        opacity: 1;
    }