/* ============================================
   1. RESET CSS (unificado y optimizado)
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, h1, h2, h3, p, ul, ol, li, dl, dt, dd, blockquote {
    margin: 0;
    padding: 0;
}

body {
    line-height: 1.5;
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--bg-body, #f4f6f8);
}

a {
    text-decoration: none;
}

ul, ol {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
}

button, input {
    overflow: visible;
}

button, select {
    text-transform: none;
}

button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
    appearance: button;
}

input[type="search"] {
    -webkit-appearance: textfield;
    appearance: textfield;
    outline-offset: -2px;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

/* ============================================
   VARIABLES GLOBALES UNIFICADAS
   ============================================ */
:root {
    /* ===== 1. COLORES INSTITUCIONALES (BASE) ===== */
    --primary-dark: #00143C;
    --primary-color: #0A1A3A;
    --primary-light: #1E3A6F;
    --primary-soft: #1c3d6b;
    
    /* Dorado / Acentos */
    --accent-gold: #B8963A;
    --secondary-color: #B8963A;
    --secondary-light: #C6A85A;
    --cpl-dorado: #b8a26d;
    
    /* Azules adicionales */
    --cpl-azul: #0a1a2f;
    --cpl-azul-oscuro: #081526;
    --cpl-azul-claro: #0b223f;
    --accent-blue: #2563EB;
    --accent-blue-hover: #1D4ED8;
    --footer-accent: #4FA4F6;
    --footer-accent-dark: #1a7bb9;
    
    /* ===== 2. COLORES DE FONDO POR SECCIÓN ===== */
    --bg-body: #f4f6f8;
    --bg-section-light: #ffffff;
    --bg-soft-1: #EDF2F6;      /* Celeridad, Aliados, Alianza, Publicaciones, Clientes */
    --bg-soft-2: #E8ECF1;      /* Google Reviews, KPI, Ventajas, Áreas */
    --bg-light: #F8F9FC;
    --footer-bg: #042057;
    
    /* ===== 3. COLORES DE TEXTO ===== */
    --text-dark: #1e293b;
    --text-medium: #475569;
    --text-light: #5A6F8A;
    --text-color: #2C3E50;
    --text-inverse: #ffffff;
    --text-inverse-soft: #eef2f6;
    --text-inverse-muted: #cbd5e1;
    
    /* Footer texto */
    --footer-text: #ffffff;
    --footer-text-muted: rgba(255, 255, 255, 0.7);
    --footer-link-hover: #ffffff;
    --footer-gold: #FFC107;
    --footer-gold-dark: #e6ae08;
    --footer-border: rgba(255, 255, 255, 0.1);
    
    /* ===== 4. SUPERFICIES Y BORDES ===== */
    --menu-bg: #0A1A3A;
    --submenu-bg: #12264A;
    --border-color: #E5E9F0;
    --cpl-blanco: #ffffff;
    --cpl-overlay: rgba(0, 0, 0, 0.6);
    --white: #FFFFFF;
    --black: #1A1A1A;
    --gris-hover: #f1f5f9;
    --mobile-blue-border: #004CD3;
    
    /* ===== 5. SOMBRAS ===== */
    --shadow-soft: 0 6px 20px rgba(0, 20, 60, 0.05);
    --shadow-medium: 0 12px 30px rgba(0, 20, 60, 0.08);
    --menu-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    
    /* ===== 6. GRADIENTES ===== */
    --gradient-gold: linear-gradient(90deg, var(--primary-dark), var(--accent-gold));
    --accent-blue: linear-gradient(90deg, #2563eb, #60a5fa);
    
    /* ===== 7. LÍNEAS Y DIVISORES ===== */
    --section-divider: rgba(0, 20, 60, 0.08);
    
    /* ===== 8. TRANSICIONES ===== */
    --transition: all 0.3s ease;
    --transition-speed: 0.3s;
    --cpl-transition: 0.3s ease;
    
    /* ===== 9. Z-INDEX ===== */
    --overlay-zindex: 1000;
    --menu-zindex: 1001;
    --header-zindex: 100;
    
    /* ===== 10. LAYOUT HEADER ===== */
    --topheader-height: 40px;
    --main-header-height: 50px;
    
    /* ===== 11. VARIABLES ESPECÍFICAS DEL HOME ===== */
    --home-aliados-gap: 25px;
    --home-card-width: 180px;
    --home-card-radius: 12px;
    --home-logo-max-w: 140px;
    --home-logo-max-h: 80px;
    --home-scrollbar-color: var(--accent-gold);
    --home-scrollbar-bg: #d9e0e8;
    --home-contact-bg: rgba(0, 20, 60, 0.96);
    --home-whatsapp: #25D366;
    --home-envelope: #007BFF;
    --home-user: #FF9800;
    
    /* ===== 12. MOBILE BREAKPOINT ===== */
    --mobile-breakpoint: 768px;
}



html,
body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-body);
}

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

/* ==============================
   4. SEPARADOR ELEGANTE ENTRE SECCIONES
================================= */
.section-divider {
    position: relative;
}

.section-divider::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 1px;
    background: var(--section-divider);
    pointer-events: none;
}

/* ==============================
   5. SECCIÓN: HERO SLIDER - FONDO #00143C (SIN DIVISOR)
================================= */
.hero-slider {
    width: 100%;
    height: 85vh;
    min-height: 600px;
    position: relative;
    overflow: hidden;
    background-color: #00143C;
    /* Color específico */
    /* margin-top: 4rem; */
}

.hero-slider::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 20, 60, 0.35) 40%, rgba(0, 20, 60, 0.9) 90%, #00143C 100%);
    z-index: 15;
    pointer-events: none;
}

.hero-slider::before {
    content: '';
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    max-width: 900px;
    height: 60px;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 50%, transparent 80%);
    border-radius: 50%;
    filter: blur(12px);
    z-index: 14;
    pointer-events: none;
    opacity: 0.7;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper,
.swiper-wrapper,
.swiper-slide {
    height: 100%;
}

.slide-content {
    pointer-events: none;
}


.swiper-slide {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0 !important;
    transition: opacity 0.5s ease-in-out !important;
}

.swiper-slide-active {
    opacity: 1 !important;
}

.swiper-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0.35) 100%);
    pointer-events: none;
}

.slide-picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.slide-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    will-change: opacity, transform;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

.slide-content {
    position: relative;
    z-index: 10;
    width: 90%;
    max-width: 1200px;
    text-align: center;
    color: var(--text-inverse);
    padding: 0 20px;
    margin: 0 auto;
    pointer-events: none;
}

.slide-content>* {
    pointer-events: auto;
}

.swiper-slide-active .slide-content {
    animation: fadeIn 0.6s ease-out forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-accent {
    width: 56px;
    height: 3px;
    background: var(--accent-gold);
    /* Dorado */
    margin: 0 auto 20px auto;
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(184, 150, 58, 0.3);
}

.slide-title {
    font-size: clamp(2.2rem, 7vw, 4.2rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    margin-bottom: 1rem;
    color: var(--text-inverse);
}

.slide-subtitle {
    font-size: clamp(1rem, 3vw, 1.3rem);
    font-weight: 400;
    color: var(--text-inverse-soft);
    max-width: 700px;
    margin: 0 auto 2rem auto;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.btn {
    display: inline-block;
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: var(--transition);
    border: 1px solid transparent;
    box-shadow: var(--shadow-soft);
    letter-spacing: 0.3px;
    min-height: 44px;
}

.btn-primary {
    background-color: #00143C;
    /* Azul específico */
    color: var(--text-inverse);
    border-color: rgba(255, 255, 255, 0.1);
}

.btn-primary:hover {
    background-color: var(--accent-gold);
    /* Dorado al hover */
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.btn-secondary {
    background-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(4px);
    color: var(--text-inverse);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
    border-radius: 10px;
    transition: var(--transition);
    margin: 0 6px !important;
}

.swiper-pagination-bullet-active {
    background: var(--accent-gold);
    /* Dorado */
    width: 26px;
    border-radius: 12px;
    box-shadow: 0 0 15px var(--accent-gold);
}

.swiper-button-prev,
.swiper-button-next {
    color: var(--accent-gold);
    /* Dorado */
    background: rgba(0, 20, 60, 0.5);
    backdrop-filter: blur(4px);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(184, 150, 58, 0.3);
    transition: 0.2s;
}

.swiper-button-prev:after,
.swiper-button-next:after {
    font-size: 1.2rem;
    font-weight: bold;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    background: var(--accent-gold);
    /* Dorado */
    color: #00143C;
    /* Azul específico */
    border-color: var(--accent-gold);
}

.swiper-wrapper {
    transform: translateZ(0);
}

@media (max-width: 768px) {
    .hero-slider {
        min-height: auto;
        padding: 4rem 0 3rem 0;

        .hero-slider {
            margin-top: 0;
        }
    }

    .hero-slider::after {
        height: 50px;
        background: linear-gradient(to bottom, transparent 0%, rgba(0, 20, 60, 0.3) 30%, rgba(0, 20, 60, 0.8) 80%, #00143C 100%);
    }

    .hero-slider::before {
        bottom: 10px;
        width: 80%;
        height: 40px;
        background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 60%, transparent 85%);
        filter: blur(8px);
        opacity: 0.5;
    }

    .swiper-slide::after {
        backdrop-filter: blur(1px);
    }

    .slide-content {
        position: relative;
        width: 100%;
        padding: 16px;
        margin: 0;
    }

    .hero-accent {
        width: 40px;
        height: 2px;
        margin: 0 auto 6px auto;
    }

    .slide-title {
        font-size: clamp(1rem, 4vw, 1.4rem);
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: -0.01em;
        margin-bottom: 4px;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .slide-subtitle {
        font-size: clamp(0.7rem, 2.5vw, 0.85rem);
        font-weight: 400;
        margin: 0 auto 10px auto;
        max-width: 80%;
        line-height: 1.3;
        opacity: 0.9;
    }

    .cta-group {
        flex-direction: column;
        gap: 6px;
        margin-top: 4px;
    }

    .btn {
        padding: 6px 16px;
        font-size: 0.75rem;
        min-width: 120px;
        max-width: 150px;
        border-radius: 4px;
        box-shadow: var(--shadow-soft);
        margin: 0 auto;
    }

    .btn-primary:hover,
    .btn-secondary:hover {
        transform: none;
    }

    .swiper-button-prev,
    .swiper-button-next {
        display: none;
    }

    .swiper-pagination {
        bottom: 4px !important;
    }

    .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        margin: 0 3px !important;
    }

    .swiper-pagination-bullet-active {
        width: 16px;
    }
}

@media (max-width: 480px) {
    .hero-slider {
        min-height: 300px;
    }

    .slide-title {
        font-size: 1.1rem;
    }

    .slide-subtitle {
        font-size: 0.7rem;
        max-width: 220px;
    }

    .btn {
        padding: 4px 12px;
        font-size: 0.7rem;
        min-width: 110px;
    }
}

@media (min-width: 600px) and (max-width: 767px) {
    .slide-title {
        font-size: 1.6rem;
    }

    .slide-subtitle {
        font-size: 0.9rem;
        max-width: 400px;
    }

    .btn {
        padding: 8px 20px;
        min-width: 150px;
    }
}

@media (min-width: 768px) {
    .hero-slider {
        margin-top: 7rem;
    }

    .slide-title {
        font-size: 2.5rem;
    }

    .btn {
        padding: 14px 32px;
        font-size: 1rem;
        min-width: 180px;
    }

    .swiper-slide::after {
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0.30) 100%);
        backdrop-filter: blur(1px);
    }

    .hero-slider::before {
        width: 60%;
        height: 70px;
        background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 60%, transparent 85%);
        filter: blur(18px);
        opacity: 0.6;
    }
}

/* ==============================
   6. SECCIÓN: HERO CORE - FONDO #00143C (SIN DIVISOR)
================================= */
.hero-section-core {
    background: #00143C;
    /* Color específico */
    min-height: 80vh;
    display: flex;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
}

.hero-core-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    width: 100%;
}

.hero-core-left {
    color: var(--text-inverse);
    padding-right: 2rem;
}

.hero-core-subtitle {
    color: var(--accent-gold);
    /* Dorado */
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.hero-core-title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 1.5rem 0;
    color: var(--text-inverse);
}

.hero-core-description {
    font-size: 1.1rem;
    color: var(--text-inverse-soft);
    margin-bottom: 2rem;
    line-height: 1.7;
}

.hero-core-description strong {
    color: var(--accent-gold);
    /* Dorado */
    font-weight: 600;
}

.hero-core-button {
    display: inline-block;
    background: var(--accent-gold);
    /* Dorado */
    color: var(--text-inverse);
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.hero-core-button:hover {
    background: #a17a2e;
    /* Dorado más oscuro */
}

.hero-core-right {
    color: var(--text-inverse);
}

.hero-core-video-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-inverse);
}

.hero-core-video-subtitle {
    font-size: 1.1rem;
    color: var(--text-inverse-soft);
    margin-bottom: 1.5rem;
}

.hero-core-video-thumb {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-medium);
    cursor: pointer;
    aspect-ratio: 16/9;
}

.hero-core-video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-core-video-thumb::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 20, 60, 0.4);
    transition: background 0.3s;
}

.hero-core-video-thumb:hover::after {
    background: rgba(0, 20, 60, 0.6);
}

.hero-core-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s;
    font-size: 1.2rem;
    color: #00143C;
    /* Azul específico */
    z-index: 10;
}

.hero-core-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.hero-core-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.hero-core-modal-content {
    position: relative;
    width: 90%;
    max-width: 900px;
    background: #00143C;
    /* Azul específico */
    border-radius: 12px;
    padding: 20px;
}

.hero-core-close-btn {
    position: absolute;
    top: -40px;
    right: 0;
    color: var(--text-inverse);
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    background: none;
    border: none;
    z-index: 1001;
}

.hero-core-close-btn:hover {
    color: var(--accent-gold);
    /* Dorado */
}

.hero-core-video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 8px;
}

.hero-core-video-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

@media (max-width: 768px) {
    .hero-section-core {
        padding: 1.5rem;
    }

    .hero-core-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .hero-core-left {
        padding-right: 0;
        text-align: center;
    }

    .hero-core-title {
        font-size: 2.2rem;
    }

    .hero-core-description {
        font-size: 1rem;
    }

    .hero-core-video-title {
        font-size: 1.6rem;
        text-align: center;
    }

    .hero-core-video-subtitle {
        text-align: center;
    }

    .hero-core-button {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 480px) {
    .hero-core-title {
        font-size: 1.8rem;
    }

    .hero-core-video-subtitle {
        font-size: 1rem;
    }

    .hero-core-play-btn {
        width: 50px;
        height: 50px;
        font-size: 1rem;
    }
}

/* ==============================
   7. SECCIÓN: CELERIDAD Y EFICACIA PROCESAL - FONDO #EDF2F6
================================= */
.hz-ventajas-section {

    position: relative;
    background-color: #EDF2F6;
    /* Color específico */
}

.hz-ventajas-section.section-divider::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 1px;
    background: var(--section-divider);
    pointer-events: none;
}

.hz-ventajas-bg {
    position: relative;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.hz-ventajas-overlay {
    display: none;
}

.hz-ventajas-contenido {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    color: var(--text-dark);
}

.hz-ventajas-header {
    text-align: center;
    margin-bottom: 50px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

.hz-ventajas-titulo {
    color: #00143C;
    /* Azul específico */
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.hz-ventajas-titulo::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    opacity: 0.9;
    background: var(--accent-gold);
    /* Dorado */
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent-gold), #d4af37);
}

.hz-ventajas-intro {
    font-size: 1.05rem;
    color: var(--text-medium);
    line-height: 1.6;
    margin-top: 20px;
}

.hz-ventajas-intro .highlight {
    color: var(--accent-gold);
    /* Dorado */
    font-weight: 600;
    position: relative;
}

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

.hz-ventajas-item {
    background: #ffffff;
    border-radius: var(--home-card-radius);
    border: 1px solid rgba(0, 20, 60, 0.05);
    transition: var(--transition);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.hz-ventajas-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
    border-color: var(--accent-gold);
    background: #ffffff;
}

.hz-ventajas-item-content {
    padding: 35px 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.hz-ventajas-icono {
    filter: none;
    margin-bottom: 25px;
    width: 70px;
    height: 70px;
    transition: var(--transition);
    color: var(--accent-gold);
    /* Dorado para iconos */
}

.hz-ventajas-item:hover .hz-ventajas-icono {
    transform: scale(1.1);
}

.hz-ventajas-subtitulo {
    color: #00143C;
    /* Azul específico */
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 10px;
}

.hz-ventajas-subtitulo::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: var(--accent-gold);
    /* Dorado */
    transition: width 0.3s ease;
}

.hz-ventajas-item:hover .hz-ventajas-subtitulo::after {
    width: 60px;
}

.hz-ventajas-texto {
    color: var(--text-medium);
    line-height: 1.6;
    font-size: 1rem;
    margin-top: 10px;
    flex: 1;
}

#ventajas-principal {
    background-color: #E8ECF1;
}

#ventajas-principal .hz-ventajas-icono {
    filter: none;
    /* Quita el filtro blanco */
    /* O si necesitas un color específico: */
    filter: brightness(0) saturate(100%) invert(20%) sepia(80%) hue-rotate(180deg);
}

/* Para darles un color azul institucional: */
#ventajas-principal .hz-ventajas-icono {
    filter: brightness(0) saturate(100%) invert(20%) sepia(100%) hue-rotate(180deg);
}

@media (max-width: 1024px) {
    .hz-ventajas-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .hz-ventajas-item-content {
        padding: 30px 25px;
    }
}

@media (max-width: 768px) {
    .hz-ventajas-contenido {
        padding: 40px 15px;
    }

    .hz-ventajas-header {
        margin-bottom: 30px;
        padding: 0 10px;
    }

    .hz-ventajas-titulo {
        font-size: 1.8rem;
        margin-bottom: 10px;
    }

    .hz-ventajas-intro {
        font-size: 0.95rem;
        line-height: 1.5;
        margin-top: 15px;
    }

    .hz-ventajas-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        max-width: 100%;
    }

    .hz-ventajas-item-content {
        padding: 25px 20px;
    }

    .hz-ventajas-icono {
        width: 60px;
        height: 60px;
        margin-bottom: 20px;
    }

    .hz-ventajas-subtitulo {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }

    .hz-ventajas-texto {
        font-size: 0.95rem;
    }

    .hz-ventajas-item:hover {
        transform: translateY(-3px);
    }
}

@media (max-width: 480px) {
    .hz-ventajas-contenido {
        padding: 30px 10px;
    }

    .hz-ventajas-titulo {
        font-size: 1.6rem;
    }

    .hz-ventajas-intro {
        font-size: 0.9rem;
    }

    .hz-ventajas-item-content {
        padding: 20px 18px;
    }

    .hz-ventajas-icono {
        width: 50px;
        height: 50px;
        margin-bottom: 15px;
    }

    .hz-ventajas-subtitulo {
        font-size: 1.1rem;
    }

    .hz-ventajas-texto {
        font-size: 0.9rem;
    }
}

@media (max-width: 360px) {
    .hz-ventajas-item-content {
        padding: 18px 15px;
    }

    .hz-ventajas-icono {
        width: 45px;
        height: 45px;
    }

    .hz-ventajas-subtitulo {
        font-size: 1rem;
    }

    .hz-ventajas-texto {
        font-size: 0.85rem;
    }
}

/* ==============================
   8. SECCIÓN: NUESTROS ALIADOS - FONDO #EDF2F6
================================= */
.hz-aliados-section {
    background-color: #EDF2F6;
    color: var(--text-dark);
    display: flex;
    justify-content: center;
}

.hz-aliados-section.section-divider::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 1px;
    background: var(--section-divider);
    pointer-events: none;
}

.hz-aliados-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    box-sizing: border-box;
}

.hz-aliados-header {
    text-align: center;
    margin-bottom: 50px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

#aliados h2 {
    color: #00143C;
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

#aliados h2::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: var(--accent-gold);
    border-radius: 2px;
}

.hz-aliados-intro {
    font-size: 1.05rem;
    color: var(--text-medium);
    line-height: 1.6;
    margin-top: 20px;
}

.hz-aliados-intro .highlight {
    color: var(--accent-gold);
    font-weight: 600;
}

.hz-aliados-row {
    display: grid;
    grid-template-columns: repeat(6, 180px);
    /* ancho fijo real */
    justify-content: center;
    /* CENTRA EL BLOQUE COMPLETO */
    gap: 25px;
    width: 100%;
    margin: 0 auto;
}

.hz-aliados-row::-webkit-scrollbar {
    height: 6px;
}

.hz-aliados-row::-webkit-scrollbar-track {
    background: var(--home-scrollbar-bg);
    border-radius: 3px;
}

.hz-aliados-row::-webkit-scrollbar-thumb {
    background: var(--home-scrollbar-color);
    border-radius: 3px;
}

/* ===== TARJETAS - VERSIÓN CORREGIDA ===== */
.hz-aliados-item {
    width: 100%;
    max-width: none;
    background: #ffffff;
    border-radius: var(--home-card-radius);
    border: 1px solid rgba(0, 20, 60, 0.05);
    transition: var(--transition);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    position: relative;
    /* Asegurar contexto para overflow */
}

.hz-aliados-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
    border-color: var(--accent-gold);
}

/* ELIMINAR EL PADDING Y MÁRGENES QUE CREAN ESPACIO */
.hz-aliados-item-content {
    padding: 0;
    margin: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 100%;
}

/* ELIMINAR EL EFECTO DE AMPLIACIÓN */
.hz-aliados-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    width: 100%;
    margin: 0;
    padding: 0;
    /* Asegurar que no hay padding */
    background-color: #f8f8f8;
    min-height: 140px;
    overflow: hidden;
    transition: none;
    /* ELIMINAR transición */
}

/* ELIMINAR EL HOVER QUE AMPLÍA */
.hz-aliados-item:hover .hz-aliados-link {
    transform: none;
    /* ELIMINAR el scale */
}

/* IMAGEN - OCUPA TODO EL ANCHO SIN ESPACIOS */
.hz-aliados-logo {
    width: 100%;
    height: 140px;
    object-fit: contain;
    /* ← CAMBIA ESTO */
    background-color: #f8f8f8;
    /* Fondo para rellenar espacios vacíos */
    padding: 10px;
    /* Opcional: espacio alrededor del logo */
}

/* VERSIÓN CONTAIN PARA IMÁGENES ESPECÍFICAS */
.hz-aliados-logo-contain {
    object-fit: contain;
    background-color: #f8f8f8;
    padding: 10px;
}

/* ELIMINAR EFECTOS DE HOVER EN LA IMAGEN */
.hz-aliados-item:hover .hz-aliados-logo {
    filter: grayscale(0%);
    /* Solo cambio de color, sin scale */
    transform: none;
    /* Asegurar que no hay scale */
}

/* NOMBRE DE LA TARJETA */
.hz-aliados-nombre {
    color: #00143C;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    padding: 15px 10px;
    background: rgba(184, 150, 58, 0.08);
    border-radius: 0 0 var(--home-card-radius) var(--home-card-radius);
    width: 100%;
    transition: var(--transition);
    margin-top: auto;
    line-height: 1.3;
    box-sizing: border-box;
}

.hz-aliados-item:hover .hz-aliados-nombre {
    background: rgba(184, 150, 58, 0.15);
    color: #00143C;
}

@media (min-width: 1400px) {
    .hz-aliados-row {
        justify-content: space-around;
    }

    .hz-aliados-item {
        width: 200px;
    }

    .hz-aliados-item-content {
        padding: 30px 20px;
        min-height: 200px;
    }

    .hz-aliados-logo {
        max-width: 160px;
        max-height: 90px;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .hz-aliados-row {
        justify-content: space-between;
    }
}

@media (max-width: 1024px) {
    .hz-aliados-row {
        gap: 20px;
        justify-content: flex-start;
        padding-left: 10px;
        padding-right: 10px;
    }

    .hz-aliados-item {
        width: 160px;
    }

    .hz-aliados-item-content {
        padding: 20px 12px;
        min-height: 170px;
    }

    .hz-aliados-logo {
        max-width: 120px;
        max-height: 70px;
    }

    .hz-aliados-nombre {
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .hz-aliados-row {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 20px;
        padding-bottom: 15px;
    }

    .hz-aliados-container {
        padding: 40px 15px;
    }

    .hz-aliados-header {
        margin-bottom: 30px;
        padding: 0 10px;
    }

    #aliados h2 {
        font-size: 1.8rem;
        margin-bottom: 10px;
    }

    .hz-aliados-intro {
        font-size: 0.95rem;
        line-height: 1.5;
        margin-top: 15px;
    }

    .hz-aliados-row {
        gap: 15px;
    }

    .hz-aliados-item {
        width: 150px;
    }

    .hz-aliados-item-content {
        padding: 18px 10px;
        min-height: 160px;
    }

    .hz-aliados-logo {
        max-width: 110px;
        max-height: 65px;
    }

    .hz-aliados-nombre {
        font-size: 0.85rem;
        padding: 6px 4px;
    }

    .hz-aliados-item:hover {
        transform: translateY(-3px);
    }
}

@media (max-width: 480px) {
    .hz-aliados-container {
        padding: 30px 10px;
    }

    #aliados h2 {
        font-size: 1.6rem;
    }

    .hz-aliados-intro {
        font-size: 0.9rem;
    }

    .hz-aliados-item {
        width: 130px;
    }

    .hz-aliados-item-content {
        padding: 15px 8px;
        min-height: 140px;
    }

    .hz-aliados-logo {
        max-width: 100px;
        max-height: 55px;
    }

    .hz-aliados-nombre {
        font-size: 0.8rem;
        padding: 5px 3px;
    }
}

/* ==============================
   9. SECCIÓN: ALIANZA LEGAL DEL PACÍFICO - FONDO #EDF2F6
================================= */
.pi-section-white {
    background-color: #EDF2F6 !important;
    /* Color específico */
    color: var(--text-dark);
    position: relative;
}

.pi-section-white.section-divider::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 1px;
    background: var(--section-divider);
    pointer-events: none;
}

.Hz-Alianza-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    box-sizing: border-box;
}

.Hz-Alianza-header {
    text-align: center;
    margin-bottom: 50px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

#alianza-title {
    color: #00143C;
    /* Azul específico */
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

#alianza-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: var(--accent-gold);
    /* Dorado */
    border-radius: 2px;
}

.Hz-Alianza-intro {
    font-size: 1.05rem;
    color: var(--text-medium);
    line-height: 1.6;
    margin-top: 20px;
}

.Hz-Alianza-intro .highlight {
    color: var(--accent-gold);
    /* Dorado */
    font-weight: 600;
}

.Hz-Alianza-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap: var(--home-aliados-gap);
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: auto;
    padding: 10px 0 30px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--home-scrollbar-color) var(--home-scrollbar-bg);
}

.Hz-Alianza-row::-webkit-scrollbar {
    height: 6px;
}

.Hz-Alianza-row::-webkit-scrollbar-track {
    background: var(--home-scrollbar-bg);
    border-radius: 3px;
}

.Hz-Alianza-row::-webkit-scrollbar-thumb {
    background: var(--home-scrollbar-color);
    border-radius: 3px;
}

.Hz-Alianza-item {
    flex: 0 0 auto;
    width: 200px;
    background: #ffffff;
    border-radius: var(--home-card-radius);
    border: 1px solid rgba(0, 20, 60, 0.05);
    transition: var(--transition);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.Hz-Alianza-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
    border-color: var(--accent-gold);
}

.Hz-Alianza-item-content {
    padding: 25px 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-height: 200px;
}

.Hz-Alianza-pais {
    color: #00143C;
    /* Azul específico */
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 10px;
    flex-shrink: 0;
}

.Hz-Alianza-pais::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 2px;
    background: var(--accent-gold);
    /* Dorado */
    transition: width 0.3s ease;
}

.Hz-Alianza-item:hover .Hz-Alianza-pais::after {
    width: 50px;
}

.Hz-Alianza-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease;
    width: 100%;
    flex: 1;
}

.Hz-Alianza-item:hover .Hz-Alianza-link {
    transform: scale(1.05);
}

.Hz-Alianza-logo {
    max-width: var(--home-logo-max-w);
    max-height: var(--home-logo-max-h);
    width: auto;
    height: auto;
    border-radius: 6px;
    transition: var(--transition);
    filter: grayscale(20%);
    object-fit: contain;
}

.Hz-Alianza-item:hover .Hz-Alianza-logo {
    filter: grayscale(0%);
    box-shadow: 0 6px 16px rgba(0, 20, 60, 0.1);
}

@media (min-width: 1400px) {
    .Hz-Alianza-row {
        justify-content: space-around;
    }

    .Hz-Alianza-item {
        width: 220px;
    }

    .Hz-Alianza-item-content {
        min-height: 220px;
    }

    .Hz-Alianza-logo {
        max-width: 160px;
        max-height: 90px;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .Hz-Alianza-row {
        justify-content: space-between;
    }
}

@media (max-width: 1024px) {
    .Hz-Alianza-row {
        gap: 20px;
        justify-content: flex-start;
        padding-left: 10px;
        padding-right: 10px;
    }

    .Hz-Alianza-item {
        width: 180px;
    }

    .Hz-Alianza-item-content {
        min-height: 180px;
    }

    .Hz-Alianza-logo {
        max-width: 120px;
        max-height: 70px;
    }
}

@media (max-width: 768px) {
    .Hz-Alianza-container {
        padding: 40px 15px;
    }

    .Hz-Alianza-header {
        margin-bottom: 30px;
        padding: 0 10px;
    }

    #alianza-title {
        font-size: 1.8rem;
        margin-bottom: 10px;
    }

    .Hz-Alianza-intro {
        font-size: 0.95rem;
        line-height: 1.5;
        margin-top: 15px;
    }

    .Hz-Alianza-row {
        gap: 15px;
    }

    .Hz-Alianza-item {
        width: 160px;
    }

    .Hz-Alianza-item-content {
        min-height: 160px;
    }

    .Hz-Alianza-logo {
        max-width: 110px;
        max-height: 65px;
    }

    .Hz-Alianza-item:hover {
        transform: translateY(-3px);
    }

    .Hz-Alianza-pais {
        font-size: 0.9rem;
        margin-bottom: 15px;
    }

    .Hz-Alianza-logo {
        max-width: 100px;
        max-height: 60px;
    }
}

@media (max-width: 480px) {
    .Hz-Alianza-container {
        padding: 30px 10px;
    }

    #alianza-title {
        font-size: 1.6rem;
    }

    .Hz-Alianza-intro {
        font-size: 0.9rem;
    }

    .Hz-Alianza-item {
        width: 140px;
    }

    .Hz-Alianza-item-content {
        min-height: 140px;
    }

    .Hz-Alianza-pais {
        font-size: 0.85rem;
    }

    .Hz-Alianza-logo {
        max-width: 90px;
        max-height: 50px;
    }
}

/* ==============================
   10. SECCIÓN: ÁREA DE PRÁCTICA - FONDO #E8ECF1
================================= */
.hz-areas {
    background-color: #E8ECF1;
    /* Color específico */
    padding: 60px 20px;
    position: relative;
    z-index: 1;
}

.hz-areas.section-divider::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 1px;
    background: var(--section-divider);
    pointer-events: none;
}

.hz-areas-header {
    text-align: center;
    margin-bottom: 40px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

.hz-areas h2 {
    color: #00143C;
    /* Azul específico */
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.hz-areas h2::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: var(--accent-gold);
    /* Dorado */
    border-radius: 2px;
}

.hz-areas-intro {
    font-size: 1.05rem;
    color: var(--text-medium);
    line-height: 1.6;
    margin-top: 20px;
}

.hz-areas-intro .highlight {
    color: var(--accent-gold);
    /* Dorado */
    font-weight: 600;
    position: relative;
}

.hz-areas-lista {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 1200px;
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.hz-areas-item {
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid rgba(0, 20, 60, 0.05);
    transition: var(--transition);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.hz-areas-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
    border-color: var(--accent-gold);
    background: #ffffff;
}

.hz-areas-link {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #00143C;
    /* Azul específico */
    font-size: 1rem;
    text-decoration: none;
    padding: 18px 20px;
    position: relative;
    transition: var(--transition);
}

.hz-areas-link:focus {
    outline: 2px solid rgba(184, 150, 58, 0.5);
    /* Dorado */
    outline-offset: 2px;
    border-radius: 8px;
}

.hz-areas-icono {
    font-size: 1.3rem;
    color: var(--accent-gold);
    /* Dorado */
    min-width: 24px;
    text-align: center;
    transition: var(--transition);
}

.hz-areas-item:hover .hz-areas-icono {
    color: #a17a2e;
    /* Dorado más oscuro */
    transform: scale(1.1);
}

.hz-areas-texto {
    flex: 1;
    font-weight: 500;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.hz-areas-item:hover .hz-areas-texto {
    color: #00143C;
}

.hz-areas-flecha {
    font-size: 1.6rem;
    color: var(--accent-gold);
    /* Dorado */
    opacity: 0;
    transform: translateX(-10px);
    transition: var(--transition);
    font-weight: 300;
    min-width: 20px;
    text-align: center;
}

.hz-areas-item:hover .hz-areas-flecha {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 1024px) {
    .hz-areas-lista {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .hz-areas-link {
        padding: 16px 18px;
    }
}

@media (max-width: 768px) {
    .hz-areas {
        padding: 40px 15px;
    }

    .hz-areas-header {
        margin-bottom: 30px;
        padding: 0 10px;
    }

    .hz-areas h2 {
        font-size: 1.8rem;
        margin-bottom: 10px;
    }

    .hz-areas-intro {
        font-size: 0.95rem;
        line-height: 1.5;
        margin-top: 15px;
    }

    .hz-areas-lista {
        grid-template-columns: 1fr;
        gap: 10px;
        max-width: 100%;
    }

    .hz-areas-link {
        padding: 14px 16px;
        gap: 12px;
    }

    .hz-areas-icono {
        font-size: 1.1rem;
        min-width: 20px;
    }

    .hz-areas-texto {
        font-size: 0.92rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hz-areas-flecha {
        opacity: 0.5;
        font-size: 1.4rem;
        transform: translateX(0);
        min-width: 16px;
        flex-shrink: 0;
    }

    .hz-areas-item:hover .hz-areas-flecha {
        opacity: 1;
    }

    .hz-areas-item:hover {
        transform: translateY(-2px);
    }
}

@media (max-width: 480px) {
    .hz-areas {
        padding: 30px 10px;
    }

    .hz-areas h2 {
        font-size: 1.6rem;
    }

    .hz-areas-intro {
        font-size: 0.9rem;
    }

    .hz-areas-link {
        padding: 12px 14px;
        gap: 10px;
    }

    .hz-areas-icono {
        font-size: 1rem;
    }

    .hz-areas-texto {
        font-size: 0.88rem;
    }

    .hz-areas-flecha {
        font-size: 1.3rem;
    }
}

@media (max-width: 360px) {
    .hz-areas-link {
        padding: 10px 12px;
    }

    .hz-areas-icono {
        font-size: 0.95rem;
    }

    .hz-areas-texto {
        font-size: 0.85rem;
    }

    .hz-areas-flecha {
        font-size: 1.2rem;
    }
}

/* ==============================
   11. SECCIÓN: NUESTROS CLIENTES - FONDO #EDF2F6
================================= */
.hz-clientes-scroll {
    padding: 60px 20px;
    background: #EDF2F6;
    /* Color específico */
    position: relative;
}

.hz-clientes-scroll.section-divider::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 1px;
    background: var(--section-divider);
    pointer-events: none;
}

.hz-clientes-header {
    text-align: center;
    margin-bottom: 50px;
    max-width: 800px;
    margin-inline: auto;
}

.hz-clientes-titulo {
    font-size: 2.5rem;
    font-weight: 700;
    color: #00143C;
    /* Azul específico */
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

.hz-clientes-titulo::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--accent-gold);
    /* Dorado */
    border-radius: 2px;
}

.hz-clientes-titulo .highlight {
    color: var(--accent-gold);
    /* Dorado */
}

.hz-clientes-descripcion {
    font-size: 1.05rem;
    color: var(--text-medium);
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}

.hz-clientes-grid-desktop {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 25px;
    max-width: 1100px;
    margin: 0 auto;
}

.hz-cliente-card {
    display: block;
    text-decoration: none;
    opacity: 0;
    transform: translateY(20px);
    animation: cardAppear 0.5s ease forwards;
}

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

.hz-cliente-card:nth-child(1) {
    animation-delay: 0.1s;
}

.hz-cliente-card:nth-child(2) {
    animation-delay: 0.2s;
}

.hz-cliente-card:nth-child(3) {
    animation-delay: 0.3s;
}

.hz-cliente-card:nth-child(4) {
    animation-delay: 0.4s;
}

.hz-cliente-card:nth-child(5) {
    animation-delay: 0.5s;
}

.hz-cliente-card:nth-child(6) {
    animation-delay: 0.6s;
}

.hz-cliente-img-container {
    position: relative;
    background: #ffffff;
    border-radius: var(--home-card-radius);
    padding: 25px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(0, 20, 60, 0.05);
    overflow: hidden;
}

.hz-cliente-img-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent-gold);
    /* Dorado */
    border-radius: var(--home-card-radius) var(--home-card-radius) 0 0;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.hz-cliente-card:hover .hz-cliente-img-container {
    transform: translateY(-8px);
    box-shadow: var(--shadow-medium);
    border-color: var(--accent-gold);
}

.hz-cliente-card:hover .hz-cliente-img-container::before {
    transform: scaleX(1);
}

.hz-cliente-logo {
    max-width: 100%;
    height: auto;
    max-height: 65px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.8;
    transition: var(--transition);
}

.hz-cliente-card:hover .hz-cliente-logo {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.08);
}

.hz-cliente-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 20, 60, 0.9));
    padding: 15px 10px 10px;
    border-radius: 0 0 var(--home-card-radius) var(--home-card-radius);
    transform: translateY(100%);
    transition: transform 0.3s ease;
    text-align: center;
}

.hz-cliente-card:hover .hz-cliente-overlay {
    transform: translateY(0);
}

.hz-cliente-nombre {
    display: block;
    color: var(--text-inverse);
    font-weight: 600;
    font-size: 0.85rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.hz-clientes-scroll-mobile {
    display: none;
}

.scroll-container {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 20px 0 40px 0;
    margin: 0 15px;
    scroll-behavior: smooth;
}

.scroll-container::-webkit-scrollbar {
    display: none;
}

.scroll-content {
    display: flex;
    gap: 15px;
    padding: 0 20px 10px 20px;
}

.scroll-item {
    flex: 0 0 auto;
    width: 150px;
    background: #ffffff;
    border-radius: var(--home-card-radius);
    border: 1px solid rgba(0, 20, 60, 0.05);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
    position: relative;
}

.scroll-item.in-viewport {
    opacity: 1 !important;
    transform: scale(1.02);
    box-shadow: var(--shadow-medium);
    border-color: rgba(184, 150, 58, 0.4);
    /* Dorado */
}

.scroll-item-link {
    display: block;
    text-decoration: none;
    height: 100%;
}

.scroll-img-container {
    padding: 25px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
}

.scroll-logo {
    max-width: 120px;
    max-height: 70px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: var(--transition);
}

.scroll-item:not(.in-viewport) .scroll-logo {
    filter: grayscale(30%) brightness(0.9);
    opacity: 0.7;
}

.scroll-item.in-viewport .scroll-logo {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
    transform: scale(1.05);
}

.scroll-item:hover .scroll-logo {
    transform: scale(1.03);
}



@keyframes bounceHorizontal {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(5px);
    }
}

.indicator-arrows:active {
    transform: scale(0.95);
    opacity: 0.9;
}

@media (max-width: 768px) {
    .hz-clientes-scroll {
        padding: 40px 0;
    }

    .hz-clientes-grid-desktop {
        display: none;
    }

    .hz-clientes-scroll-mobile {
        display: block;
    }

    .hz-clientes-titulo {
        font-size: 1.8rem;
    }

    .scroll-item {
        width: calc(50vw - 40px);
        min-width: 140px;
    }

    .scroll-img-container {
        padding: 20px 10px;
        height: 110px;
    }

    .scroll-logo {
        max-width: 100px;
        max-height: 60px;
    }

    .scroll-indicator {
        margin-top: 20px;
        padding: 10px 15px;
    }

    .indicator-arrows {
        font-size: 1.2rem;
        padding: 6px 16px;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .hz-clientes-scroll {
        padding: 30px 0;
    }

    .hz-clientes-titulo {
        font-size: 1.6rem;
    }

    .scroll-item {
        width: calc(50vw - 30px);
        min-width: 130px;
    }

    .scroll-img-container {
        padding: 15px 8px;
        height: 100px;
    }

    .scroll-logo {
        max-width: 90px;
        max-height: 50px;
    }

    .indicator-arrows {
        font-size: 1rem;
        padding: 5px 14px;
        gap: 10px;
    }
}

/* ==============================
   12. SECCIÓN: GOOGLE REVIEWS - FONDO #E8ECF1
================================= */
#googler {
    background-color: #E8ECF1;
    /* Color específico */
    width: 100%;
    overflow: hidden;
    position: relative;
}

#googler.section-divider::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 1px;
    background: var(--section-divider);
    pointer-events: none;
}

.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 2rem 1rem;
    position: relative;
}

.google-logo {
    width: 250px;
    height: 126px;
    object-fit: contain;
    display: block;
    margin: 0 auto 2rem auto;
    transition: transform 0.3s ease;
}

.google-logo:hover {
    transform: scale(1.05);
}

.google-review-carousel {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 0 3rem;
    overflow: hidden;
}

.carousel-container {
    display: flex;
    transition: transform 0.3s ease;
    gap: 1.5rem;
    padding: 0 1rem;
    cursor: grab;
    user-select: none;
}

.carousel-container:active {
    cursor: grabbing;
}

.google-review-card {
    flex: 0 0 calc(33.333% - 1rem);
    min-width: 0;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    padding: 1.5rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
    border: 1px solid rgba(0, 20, 60, 0.05);
}

.google-review-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
    border-color: var(--accent-gold);
}

.review-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.review-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 12px;
    border: 2px solid #f0f0f0;
}

.review-meta {
    flex-grow: 1;
}

.reviewer-name {
    font-weight: 600;
    font-size: 1rem;
    color: #00143C;
    /* Azul específico */
    margin-bottom: 0.25rem;
}

.review-date {
    font-size: 0.85rem;
    color: var(--text-light);
}

.google-icon {
    width: 20px;
    height: 20px;
}

.review-rating {
    margin: 0.5rem 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stars {
    display: flex;
    gap: 2px;
}

.stars img {
    width: 18px;
    height: 18px;
}

.review-text {
    font-size: 0.95rem;
    color: var(--text-dark);
    line-height: 1.6;
    flex-grow: 1;
    margin-bottom: 1rem;
}

.toggle-more {
    background-color: transparent;
    border: none;
    color: var(--accent-gold);
    /* Dorado */
    cursor: pointer;
    padding: 4px 0;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    transition: color 0.2s;
    align-self: flex-start;
}

.toggle-more:hover {
    color: #a17a2e;
    /* Dorado más oscuro */
    text-decoration: underline;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: #ffffff;
    border: none;
    border-radius: 50%;
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: var(--transition);
}

.prev-btn {
    left: 10px;
}

.next-btn {
    right: 10px;
}

.carousel-btn:hover {
    background: #f8f8f8;
    box-shadow: var(--shadow-medium);
    transform: translateY(-50%) scale(1.05);
}

.carousel-btn svg {
    width: 24px;
    height: 24px;
    stroke: #00143C;
    /* Azul específico */
}

.carousel-indicators {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

.indicator {
    width: 40px;
    height: 4px;
    background: #ddd;
    border-radius: 2px;
    cursor: pointer;
    transition: var(--transition);
    display: none;
}

.indicator.active {
    background: var(--accent-gold);
    /* Dorado */
    width: 50px;
}

.desktop-indicator {
    display: none;
}

.mobile-indicator {
    display: none;
}

.tooltip-wrapper {
    position: relative;
    display: inline-block;
    margin-left: 0.5rem;
}

.tooltip-wrapper .tooltip-text {
    visibility: hidden;
    opacity: 0;
    width: 180px;
    background-color: rgba(51, 51, 51, 0.95);
    color: #fff;
    text-align: left;
    border-radius: 8px;
    padding: 12px;
    position: absolute;
    z-index: 1000;
    top: 50%;
    left: 125%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    line-height: 1.4;
    transition: opacity 0.2s ease-in-out;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.tooltip-wrapper:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

@media (max-width: 1200px) {
    .google-review-card {
        flex: 0 0 calc(50% - 1rem);
    }
}

@media (max-width: 768px) {
    .carousel-btn {
        display: none;
    }

    .mobile-indicator {
        display: block;
    }

    .desktop-indicator {
        display: none !important;
    }

    .mobile-indicator:nth-child(n+13) {
        display: none;
    }

    .google-review-carousel {
        padding: 2rem 0 3rem;
        touch-action: pan-y;
    }

    .carousel-container {
        padding: 0 1rem;
    }

    .google-review-card {
        flex: 0 0 100%;
        scroll-snap-align: start;
    }

    .container {
        padding: 1.5rem 0.5rem;
    }

    .google-logo {
        width: 200px;
        height: 100px;
    }
}

@media (max-width: 480px) {
    .google-review-card {
        padding: 1.25rem;
    }

    .review-text {
        font-size: 0.9rem;
    }

    .container {
        padding: 1rem 0.25rem;
    }
}

@media (min-width: 768px) {
    .desktop-indicator {
        display: block;
    }

    .mobile-indicator {
        display: none !important;
    }

    .desktop-indicator:nth-child(n+5) {
        display: none;
    }
}

/* ==============================
   13. SECCIÓN: KPI - FONDO #E8ECF1
================================= */
.hz-kpi {
    background: #E8ECF1;
    /* Color específico */
    padding: 80px 20px;
    position: relative;
}

.hz-kpi.section-divider::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 1px;
    background: var(--section-divider);
    pointer-events: none;
}

.container-kpi {
    max-width: 1200px;
    padding: 60px 20px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
}

.kpi-card {
    flex: 1 1 220px;
    max-width: 260px;
    min-height: 200px;
    background: #ffffff;
    border-radius: var(--home-card-radius);
    padding: 35px 20px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(22, 83, 205, 0.05);
    box-shadow: var(--shadow-soft);
}

.kpi-card.featured {
    transform: scale(1.03);
    box-shadow: var(--shadow-medium);
}

.kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-gold);
    /* Dorado */
    border-radius: var(--home-card-radius) var(--home-card-radius) 0 0;
}

.kpi-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(184, 150, 58, 0.03), transparent);
    transition: left 0.5s ease;
}

.kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
    border-color: var(--accent-gold);
}

.card-inner {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.kpi-icon {
    font-size: 38px;
    margin-bottom: 15px;
    color: var(--accent-gold);
    /* Dorado */
    transition: transform 0.3s ease;
}

.kpi-card:hover .kpi-icon {
    transform: scale(1.1);
    color: #a17a2e;
   }

.kpi-number {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.2;
    margin: 10px 0;
    letter-spacing: 0.5px;
    color: #fdfdfd;
  
}

.kpi-number .counter {
    display: inline-block;
    min-width: 40px;
}

.kpi-label {
    font-size: 14px;
    letter-spacing: 0.8px;
    margin-top: 10px;
    color: var(--text-medium);
    padding: 0 10px;
    line-height: 1.4;
}

.counter-unit {
    font-size: 0.8em;
    color: var(--text-medium);
}

@media (min-width: 1400px) {
    .container-kpi {
        max-width: 1300px;
        gap: 35px;
    }

    .kpi-card {
        max-width: 280px;
        min-height: 220px;
        padding: 30px 20px;
    }

    .kpi-icon {
        font-size: 42px;
    }

    .kpi-number {
        font-size: 32px;
    }

    .kpi-label {
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .container-kpi {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 20px;
        max-width: 500px;
        padding: 0 15px;
    }

    .kpi-card {
        max-width: 100%;
        width: 100%;
        min-height: 180px;
        padding: 20px 10px;
    }

    .kpi-icon {
        font-size: 32px;
        margin-bottom: 12px;
    }

    .kpi-number {
        font-size: 36px;
        font-weight: 700;
        letter-spacing: -0.5px;
        margin: 8px 0;
    }

    .kpi-card[data-kpi-index="0"] .kpi-number {
        font-size: 22px;
    }

    .kpi-card[data-kpi-index="1"] .kpi-number,
    .kpi-card[data-kpi-index="2"] .kpi-number,
    .kpi-card[data-kpi-index="3"] .kpi-number {
        font-size: 24px;
    }

    .kpi-label {
        font-size: 13px;
        letter-spacing: 0.5px;
        padding: 0 5px;
    }

    .kpi-card:hover {
        transform: translateY(-3px);
    }
}

@media (max-width: 480px) {
    .container-kpi {
        gap: 15px;
        padding: 0 10px;
    }

    .kpi-card {
        min-height: 160px;
        padding: 15px 8px;
        border-radius: 10px;
    }

    .kpi-number {
        font-size: 22px;
    }

    .kpi-card[data-kpi-index="0"] .kpi-number {
        font-size: 20px;
    }

    .kpi-icon {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .kpi-label {
        font-size: 12px;
        margin-top: 8px;
    }
}

/* ==============================
   14. SECCIÓN: PUBLICACIONES - FONDO #EDF2F6
================================= */
.pindex-noticias-section {
    background-color: #EDF2F6;
    /* Color específico */
    padding: 5rem 1.5rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    position: relative;
}

.pindex-noticias-section.section-divider::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 1px;
    background: var(--section-divider);
    pointer-events: none;
}

.pindex-noticias-container {
    max-width: 1400px;
    margin: 0 auto;
}

.pindex-noticias-header {
    text-align: center;
    margin-bottom: 3rem;
}

.pindex-noticias-header h3 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #00143C;
    /* Azul específico */
    margin: 0 0 0.5rem 0;
    position: relative;
    display: inline-block;
}

.pindex-noticias-header h3::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--accent-gold);
    /* Dorado */
    border-radius: 2px;
}

.pindex-noticias-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
}

.pindex-noticia-item {
    background: #ffffff;
    border-radius: var(--home-card-radius);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 20, 60, 0.05);
}

.pindex-noticia-item:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-medium);
    border-color: var(--accent-gold);
}

.pindex-noticia-item figure {
    margin: 0;
    height: 200px;
    overflow: hidden;
}

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

.pindex-noticia-item:hover img {
    transform: scale(1.05);
}

.pindex-noticia-item>div {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.pindex-noticia-item h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.4;
    margin: 0 0 1rem 0;
    flex-grow: 1;
}

.pindex-noticia-item h4 a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s;
}

.pindex-noticia-item h4 a:hover {
    color: var(--accent-gold);
    /* Dorado */
}

.pindex-noticia-item ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-medium);
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 20, 60, 0.05);
}

.pindex-noticia-item ul li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pindex-noticia-item ul li i {
    color: var(--accent-gold);
    /* Dorado */
    font-size: 0.85rem;
}

.pindex-noticias-container>p {
    text-align: center;
    margin-top: 2rem;
}

.pindex-noticias-section button {
    background: var(--accent-gold);
    /* Dorado */
    color: var(--text-inverse);
    border: none;
    padding: 1rem 2.5rem;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.pindex-noticias-section button:hover {
    background: #a17a2e;
    /* Dorado más oscuro */
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.pindex-noticias-section button::after {
    content: '→';
    transition: transform 0.2s;
}

.pindex-noticias-section button:hover::after {
    transform: translateX(5px);
}

@media (max-width: 1024px) {
    .pindex-noticias-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .pindex-noticia-item figure {
        height: 180px;
    }
}

@media (max-width: 768px) {
    .pindex-noticias-section {
        padding: 3rem 1rem;
    }

    .pindex-noticias-header {
        margin-bottom: 30px;
        padding: 0 10px;
    }

    .pindex-noticias-header h3 {
        font-size: 1.8rem;
    }

    .pindex-noticias-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    .pindex-noticia-item:nth-child(3),
    .pindex-noticia-item:nth-child(4) {
        display: none !important;
    }

    .pindex-noticia-item figure {
        height: 200px;
    }

    .pindex-noticia-item h4 {
        font-size: 1.1rem;
    }

    .pindex-noticia-item ul {
        flex-direction: column;
        gap: 0.5rem;
    }

    .pindex-noticias-section button {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .pindex-noticias-header h3 {
        font-size: 1.6rem;
    }

    .pindex-noticias-grid {
        max-width: 300px;
        gap: 1rem;
    }

    .pindex-noticia-item figure {
        height: 180px;
    }

    .pindex-noticia-item>div {
        padding: 1.25rem;
    }
}

/* ==============================
   15. SECCIÓN: REPORTES - MANTENEMOS CONSISTENCIA
================================= */
.obs-section {
    background: var(--bg-section-soft);
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
    padding: 80px 20px;
    position: relative;
}

.obs-section.section-divider::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 1px;
    background: var(--section-divider);
    pointer-events: none;
}

.obs-container {
    max-width: 1400px;
    margin: 0 auto;
}

.obs-header {
    display: flex;
    align-items: center;
    gap: 3rem;
    margin-bottom: 4rem;
    flex-wrap: wrap;
    justify-content: center;
}

.obs-icon {
    flex-shrink: 0;
}

.obs-icon img {
    width: 100px;
    height: auto;
    display: block;
}

.obs-text-content {
    flex: 1;
}

.obs-eyebrow {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-gold);
    /* Dorado */
    margin-bottom: 0.5rem;
}

.obs-title {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1rem 0;
}

.obs-title-link {
    text-decoration: none;
    color: #00143C;
    /* Azul específico */
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.obs-title-link:hover {
    color: var(--accent-gold);
    /* Dorado */
}

.obs-title-arrow {
    font-size: 1.8rem;
    opacity: 0.7;
    transition: transform 0.2s, opacity 0.2s;
    color: var(--accent-gold);
    /* Dorado */
}

.obs-title-link:hover .obs-title-arrow {
    transform: translateX(5px);
    opacity: 1;
}

.obs-subtitle {
    font-size: 1.2rem;
    color: var(--text-medium);
    max-width: 600px;
    margin: 0;
}

.obs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
}

.obs-card {
    background: #ffffff;
    border-radius: var(--home-card-radius);
    overflow: hidden;
    transition: var(--transition);
    box-shadow: var(--shadow-soft);
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 20, 60, 0.05);
}

.obs-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-medium);
    border-color: var(--accent-gold);
}

.obs-card-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

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

.obs-card:hover .obs-card-image img {
    transform: scale(1.05);
}

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

.obs-card-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.4;
    margin: 0 0 1rem 0;
    flex-grow: 1;
}

.obs-card-title a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s;
}

.obs-card-title a:hover {
    color: var(--accent-gold);
    /* Dorado */
}

.obs-card-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--text-medium);
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 20, 60, 0.05);
}

.obs-card-meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.obs-card-meta-item i {
    color: var(--accent-gold);
    /* Dorado */
}

.obs-cta {
    text-align: center;
    margin-top: 3rem;
}

.obs-button {
    background: var(--accent-gold);
    /* Dorado */
    color: var(--text-inverse);
    border: none;
    padding: 1rem 2.5rem;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.obs-button:hover {
    background: #a17a2e;
    /* Dorado más oscuro */
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.obs-button-arrow {
    transition: transform 0.2s;
}

.obs-button:hover .obs-button-arrow {
    transform: translateX(5px);
}

@media (max-width: 1200px) {
    .obs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .obs-section {
        padding: 60px 15px;
    }

    .obs-container {
        padding: 40px 15px;
    }

    .obs-header {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }

    .obs-title-link {
        font-size: 2rem;
    }

    .obs-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    .obs-card:nth-child(3),
    .obs-card:nth-child(4) {
        display: none !important;
    }

    .obs-card-image {
        height: 180px;
    }

    .obs-card {
        min-height: 320px;
    }

    .obs-card-title {
        font-size: 1rem;
        line-height: 1.3;
    }

    .obs-card-meta {
        flex-wrap: wrap;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .obs-container {
        padding: 30px 10px;
    }

    .obs-title-link {
        font-size: 1.6rem;
    }

    .obs-subtitle {
        font-size: 1rem;
    }

    .obs-button {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

    .obs-card-title {
        font-size: 1.1rem;
    }

    .obs-grid {
        max-width: 300px;
        gap: 1rem;
    }

    .obs-card {
        min-height: auto;
    }

    .obs-card-image {
        height: 140px;
    }

    .obs-card-content {
        padding: 1.25rem;
    }

    .obs-card-meta {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
}

/* ==============================
   16. SECCIÓN: GALERÍA OFICINA - FONDO BLANCO
================================= */
.hz-galeria {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    margin: 0;
    padding: 0;
    background-color: var(--bg-section-light);
    position: relative;
}

.hz-galeria.section-divider::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 1px;
    background: var(--section-divider);
    pointer-events: none;
}

.hz-galeria-item {
    overflow: hidden;
    position: relative;
}

.hz-galeria-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.hz-galeria-item:hover img {
    transform: scale(1.1);
}

@media (min-width: 768px) {
    .hz-galeria {
        grid-template-columns: repeat(3, 1fr);
    }

    .hz-galeria-mobile-only {
        display: none;
    }
}

@media (max-width: 768px) {
    .hz-galeria-mobile-only {
        display: block;
    }
}

@media (max-width: 480px) {
    .hz-galeria {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

/* ==============================
   17. COMPONENTES: MODAL DE VIDEO (Index)
================================= */
.video-thumbnail {
    position: relative;
    cursor: pointer;
}

.video-thumbnail img {
    width: 100%;
    height: auto;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 20, 60, 0.5);
    color: var(--text-inverse);
    border: none;
    font-size: 2em;
    cursor: pointer;
}

.modal {
    display: none;
    position: fixed;
    z-index: 5000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
    padding: 1vh 0;
}

.modal-content {
    background-color: #fff;
    margin: auto;
    padding: 5px;
    border: 1px solid #888;
    width: 90%;
    max-width: 700px;
    position: relative;
    max-height: 95vh;
    overflow-y: auto;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.5em;
    cursor: pointer;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

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

@media (max-width: 768px) {
    .modal-content {
        width: 90%;
    }
}

@media (max-width: 480px) {
    .modal-content {
        width: 90%;
    }
}

/* ==============================
   18. COMPONENTES: MENÚ FLOTANTE DE CONTACTO
================================= */
.contact-floating-menu {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
}

.contact-floating-button {
    background-color: var(--home-contact-bg);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-soft);
    position: relative;
}

.contact-plus-icon {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background-color: var(--text-inverse);
    color: black;
    font-weight: bold;
    font-size: 16px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.contact-submenu {
    position: absolute;
    bottom: 65px;
    right: 0;
    padding: 5px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-floating-menu.active .contact-submenu {
    opacity: 1;
    visibility: visible;
}

.contact-submenu-item {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 30px;
    gap: 10px;
    position: relative;
    background-color: #f3f3f3;
    text-decoration: none;
    box-shadow: var(--shadow-soft);
}

.contact-tooltip {
    font-size: 14px;
    font-weight: bold;
    color: black;
    white-space: nowrap;
    position: absolute;
    right: 60px;
    opacity: 0;
    background-color: aliceblue;
    box-shadow: var(--shadow-soft);
    padding: 5px 10px;
    border-radius: 5px;
    transition: opacity 0.3s ease;
}

.contact-submenu-item:hover .contact-tooltip {
    opacity: 1;
}

.contact-floating-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: var(--transition);
}

.contact-floating-icon i {
    font-size: 24px;
}

.contact-whatsapp {
    color: var(--home-whatsapp);
}

.contact-envelope {
    color: var(--home-envelope);
}

.contact-user {
    color: var(--home-user);
}

.contact-phone {
    color: var(--text-inverse);
}

.contact-submenu-item:hover .contact-whatsapp {
    background-color: var(--home-whatsapp);
    color: var(--text-inverse);
}

.contact-submenu-item:hover .contact-envelope {
    background-color: var(--home-envelope);
    color: var(--text-inverse);
}

.contact-submenu-item:hover .contact-user {
    background-color: var(--home-user);
    color: var(--text-inverse);
}

.contact-floating-button:hover .contact-phone {
    background-color: #f5f5f5;
    color: #f70404;
}

@media (max-width: 768px) {
    .contact-tooltip {
        opacity: 1;
        position: static;
        background: none;
        box-shadow: none;
        color: white;
        padding: 0;
    }

    .contact-submenu-item {
        background-color: rgba(0, 20, 60, 0.7);
        color: white;
    }

    .contact-submenu-item:hover {
        background-color: rgba(0, 20, 60, 0.9);
    }

    .contact-submenu-item:hover .contact-tooltip {
        color: white;
    }
}

/* ==============================
   19. COMPONENTES: BOTÓN FLOTANTE (Scroll to Top)
================================= */
.scroll-top-btn {
    position: fixed;
    bottom: 40px;
    left: 40px;
    right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00143C;
    /* Azul específico */
    color: var(--text-inverse);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.15);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    z-index: 9999;
    transition: var(--transition);
    opacity: 0;
    visibility: hidden;
}

.scroll-top-btn.active,
.scroll-top-btn.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-top-btn.footer-near {
    bottom: 120px;
}

.scroll-top-btn:hover {
    background: var(--accent-gold);
    /* Dorado */
    transform: translateY(-5px) scale(1.05);
    box-shadow: var(--shadow-medium);
}

.icon-up {
    font-size: 24px;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.scroll-top-btn:hover .icon-up {
    transform: translateY(-3px);
}

@media (max-width: 768px) {
    .scroll-top-btn {
        bottom: 30px;
        left: 30px;
        right: auto;
        width: 52px;
        height: 52px;
    }

    .scroll-top-btn.footer-near {
        bottom: 100px;
    }

    .icon-up {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .scroll-top-btn {
        bottom: 25px;
        left: 25px;
        right: auto;
        width: 48px;
        height: 48px;
    }

    .scroll-top-btn.footer-near {
        bottom: 90px;
    }

    .icon-up {
        font-size: 18px;
    }
}

@media (min-height: 900px) {
    .scroll-top-btn.footer-near {
        bottom: 150px;
    }
}

/* ==============================
   20. PREFERENCIAS DE MOVIMIENTO REDUCIDO
================================= */
@media (prefers-reduced-motion: reduce) {

    .swiper-slide::after,
    .swiper-slide-active .slide-content,
    .hero-accent,
    .google-review-card:hover,
    .carousel-btn:hover,
    .google-logo:hover,
    .hero-core-button:hover,
    .hero-core-play-btn:hover,
    .hero-core-video-thumb::after,
    .pindex-noticia-item:hover,
    .pindex-noticia-item:hover img,
    .pindex-noticias-section button:hover,
    .pindex-noticias-section button:hover::after,
    .obs-card:hover,
    .obs-card:hover .obs-card-image img,
    .obs-button:hover,
    .obs-title-link:hover .obs-title-arrow,
    .obs-button:hover .obs-button-arrow {
        transform: none;
        transition: none;
        animation: none;
    }

    .swiper-slide::after {
        backdrop-filter: none !important;
    }
}

/* ============================= */
/* SECCIÓN ALIADOS - MEJORADA */
/* ============================= */
.hz-aliados-section {
    background-color: #f4f6f6;
    color: #333333;
}

.hz-aliados-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    box-sizing: border-box;
}

.hz-aliados-header {
    text-align: center;
    margin-bottom: 50px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

#aliados h2 {
    color: #003366;
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

/* Línea decorativa bajo el título */
#aliados h2::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
    border-radius: 2px;
}

.hz-aliados-intro {
    font-size: 1.05rem;
    color: #444444;
    line-height: 1.6;
    margin-top: 20px;
}

.hz-aliados-intro .highlight {
    color: #4FA4F6;
    font-weight: 600;
}

/* CONTENEDOR EN UNA SOLA LÍNEA */
.hz-aliados-row {
    display: flex;
    flex-wrap: nowrap;
    /* No permite que se rompa en varias líneas */
    justify-content: center;
    align-items: stretch;
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: auto;
    /* Permite scroll horizontal si no caben */
    padding: 10px 0 30px 0;
    scrollbar-width: thin;
    scrollbar-color: #4FA4F6 #f4f6f6;
}

/* Estilos para scrollbar */
.hz-aliados-row::-webkit-scrollbar {
    height: 6px;
}

.hz-aliados-row::-webkit-scrollbar-track {
    background: #f4f6f6;
    border-radius: 3px;
}

.hz-aliados-row::-webkit-scrollbar-thumb {
    background: #4FA4F6;
    border-radius: 3px;
}

.hz-aliados-item {
    flex: 0 0 auto;
    /* No crece, no se encoge, tamaño automático */
    width: 180px;
    /* Ancho fijo para todas */
    background: white;
    border-radius: 12px;
    border: 1px solid rgba(0, 51, 102, 0.1);
    transition: all 0.3s ease;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.hz-aliados-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
    border-color: rgba(79, 164, 246, 0.3);
}

.hz-aliados-item-content {
    padding: 25px 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-height: 180px;
}

.hz-aliados-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease;
    width: 100%;
    flex: 1;
    margin-bottom: 15px;
}

.hz-aliados-item:hover .hz-aliados-link {
    transform: scale(1.05);
}

.hz-aliados-logo {
    max-width: 140px;
    max-height: 80px;
    width: auto;
    height: auto;
    border-radius: 6px;
    transition: all 0.3s ease;
    filter: grayscale(20%);
    object-fit: contain;
}

.hz-aliados-item:hover .hz-aliados-logo {
    filter: grayscale(0%);
    box-shadow: 0 6px 16px rgba(0, 51, 102, 0.15);
}

.hz-aliados-nombre {
    color: #003366;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    padding: 8px 5px;
    background: rgba(79, 164, 246, 0.08);
    border-radius: 6px;
    width: 100%;
    transition: all 0.3s ease;
}

.hz-aliados-item:hover .hz-aliados-nombre {
    background: rgba(79, 164, 246, 0.15);
    color: #003366;
}

/* ======= DISEÑO RESPONSIVE ======= */
@media (max-width: 1024px) {
    .hz-aliados-row {
        gap: 20px;
        justify-content: flex-start;
        /* Alinear a la izquierda para scroll */
        padding-left: 10px;
        padding-right: 10px;
    }

    .hz-aliados-item {
        width: 160px;
    }

    .hz-aliados-item-content {
        padding: 20px 12px;
        min-height: 170px;
    }

    .hz-aliados-logo {
        max-width: 120px;
        max-height: 70px;
    }

    .hz-aliados-nombre {
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .hz-aliados-container {
        padding: 40px 15px;
    }

    .hz-aliados-header {
        margin-bottom: 30px;
        padding: 0 10px;
    }

    #aliados h2 {
        font-size: 1.8rem;
        margin-bottom: 10px;
    }

    .hz-aliados-intro {
        font-size: 0.95rem;
        line-height: 1.5;
        margin-top: 15px;
    }

    .hz-aliados-row {
        gap: 15px;
    }

    .hz-aliados-item {
        width: 150px;
    }

    .hz-aliados-item-content {
        padding: 18px 10px;
        min-height: 160px;
    }

    .hz-aliados-logo {
        max-width: 110px;
        max-height: 65px;
    }

    .hz-aliados-nombre {
        font-size: 0.85rem;
        padding: 6px 4px;
    }

    .hz-aliados-item:hover {
        transform: translateY(-3px);
    }
}

@media (max-width: 480px) {
    .hz-aliados-container {
        padding: 30px 10px;
    }

    #aliados h2 {
        font-size: 1.6rem;
    }

    .hz-aliados-intro {
        font-size: 0.9rem;
    }

    .hz-aliados-item {
        width: 130px;
    }

    .hz-aliados-item-content {
        padding: 15px 8px;
        min-height: 140px;
    }

    .hz-aliados-logo {
        max-width: 100px;
        max-height: 55px;
    }

    .hz-aliados-nombre {
        font-size: 0.8rem;
        padding: 5px 3px;
    }
}

@media (min-width: 1400px) {
    .hz-aliados-row {
        justify-content: space-around;
    }

    .hz-aliados-item {
        width: 200px;
    }

    .hz-aliados-item-content {
        padding: 30px 20px;
        min-height: 200px;
    }

    .hz-aliados-logo {
        max-width: 160px;
        max-height: 90px;
    }

    .hz-aliados-nombre {
        font-size: 1rem;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .hz-aliados-row {
        justify-content: space-between;
    }
}

/* ============================= */
/* SECCIÓN ALIANZA - UNA SOLA LÍNEA */
/* ============================= */
.pi-section-white {
    background-color: #f4f6f6 !important;
    color: #333333;
}

.Hz-Alianza-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    box-sizing: border-box;
}

.Hz-Alianza-header {
    text-align: center;
    margin-bottom: 50px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

#alianza-title {
    color: #003366;
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

/* Línea decorativa bajo el título */
#alianza-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
    border-radius: 2px;
}

.Hz-Alianza-intro {
    font-size: 1.05rem;
    color: #444444;
    line-height: 1.6;
    margin-top: 20px;
}

.Hz-Alianza-intro .highlight {
    color: #4FA4F6;
    font-weight: 600;
}

/* CONTENEDOR EN UNA SOLA LÍNEA */
.Hz-Alianza-row {
    display: flex;
    flex-wrap: nowrap;
    /* No permite que se rompa en varias líneas */
    justify-content: center;
    align-items: stretch;
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: auto;
    /* Permite scroll horizontal si no caben */
    padding: 10px 0 30px 0;
    scrollbar-width: thin;
    scrollbar-color: #4FA4F6 #f4f6f6;
}

/* Estilos para scrollbar */
.Hz-Alianza-row::-webkit-scrollbar {
    height: 6px;
}

.Hz-Alianza-row::-webkit-scrollbar-track {
    background: #f4f6f6;
    border-radius: 3px;
}

.Hz-Alianza-row::-webkit-scrollbar-thumb {
    background: #4FA4F6;
    border-radius: 3px;
}

.Hz-Alianza-item {
    flex: 0 0 auto;
    /* No crece, no se encoge, tamaño automático */
    width: 200px;
    /* Ancho fijo para todas */
    background: white;
    border-radius: 12px;
    border: 1px solid rgba(0, 51, 102, 0.1);
    transition: all 0.3s ease;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.Hz-Alianza-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
    border-color: rgba(79, 164, 246, 0.3);
}

.Hz-Alianza-item-content {
    padding: 25px 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-height: 200px;
}

.Hz-Alianza-pais {
    color: #003366;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 10px;
    flex-shrink: 0;
}

.Hz-Alianza-pais::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 2px;
    background: #4FA4F6;
    transition: width 0.3s ease;
}

.Hz-Alianza-item:hover .Hz-Alianza-pais::after {
    width: 50px;
}

.Hz-Alianza-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease;
    width: 100%;
    flex: 1;
}

.Hz-Alianza-item:hover .Hz-Alianza-link {
    transform: scale(1.05);
}

.Hz-Alianza-logo {
    max-width: 140px;
    max-height: 80px;
    width: auto;
    height: auto;
    border-radius: 6px;
    transition: all 0.3s ease;
    filter: grayscale(20%);
    object-fit: contain;
}

.Hz-Alianza-item:hover .Hz-Alianza-logo {
    filter: grayscale(0%);
    box-shadow: 0 6px 16px rgba(0, 51, 102, 0.15);
}

/* ======= DISEÑO RESPONSIVE ======= */
@media (max-width: 1024px) {
    .Hz-Alianza-row {
        gap: 20px;
        justify-content: flex-start;
        /* Alinear a la izquierda para scroll */
        padding-left: 10px;
        padding-right: 10px;
    }

    .Hz-Alianza-item {
        width: 180px;
    }

    .Hz-Alianza-item-content {
        padding: 20px 12px;
        min-height: 180px;
    }

    .Hz-Alianza-logo {
        max-width: 120px;
        max-height: 70px;
    }
}

@media (max-width: 768px) {
    .Hz-Alianza-container {
        padding: 40px 15px;
    }

    .Hz-Alianza-header {
        margin-bottom: 30px;
        padding: 0 10px;
    }

    #alianza-title {
        font-size: 1.8rem;
        margin-bottom: 10px;
    }

    .Hz-Alianza-intro {
        font-size: 0.95rem;
        line-height: 1.5;
        margin-top: 15px;
    }

    .Hz-Alianza-row {
        gap: 15px;
    }

    .Hz-Alianza-item {
        width: 160px;
    }

    .Hz-Alianza-item-content {
        padding: 18px 10px;
        min-height: 160px;
    }

    .Hz-Alianza-pais {
        font-size: 0.9rem;
        margin-bottom: 15px;
    }

    .Hz-Alianza-logo {
        max-width: 100px;
        max-height: 60px;
    }

    /* Efecto hover más sutil en móvil */
    .Hz-Alianza-item:hover {
        transform: translateY(-3px);
    }
}

@media (max-width: 480px) {
    .Hz-Alianza-container {
        padding: 30px 10px;
    }

    #alianza-title {
        font-size: 1.6rem;
    }

    .Hz-Alianza-intro {
        font-size: 0.9rem;
    }

    .Hz-Alianza-item {
        width: 140px;
    }

    .Hz-Alianza-item-content {
        padding: 15px 8px;
        min-height: 140px;
    }

    .Hz-Alianza-pais {
        font-size: 0.85rem;
    }

    .Hz-Alianza-logo {
        max-width: 90px;
        max-height: 50px;
    }
}

/* Para pantallas muy grandes */
@media (min-width: 1400px) {
    .Hz-Alianza-row {
        justify-content: space-around;
        /* Distribuir uniformemente */
    }

    .Hz-Alianza-item {
        width: 220px;
    }

    .Hz-Alianza-item-content {
        padding: 30px 20px;
        min-height: 220px;
    }

    .Hz-Alianza-logo {
        max-width: 160px;
        max-height: 90px;
    }
}

/********* LINK AREAS ********/

.hz-areas {
    background-color: #031f4b;
    background-repeat: repeat;
    background-size: contain;
    background-position: top center;
    padding: 60px 20px;
    position: relative;
    z-index: 1;
}

.hz-areas-header {
    text-align: center;
    margin-bottom: 40px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

.hz-areas h2 {
    color: #ffffff;
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.hz-areas h2::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
    border-radius: 2px;
}

.hz-areas-intro {
    font-size: 1.05rem;
    color: #dce6f2;
    line-height: 1.6;
    margin-top: 20px;
}

.hz-areas-intro .highlight {
    color: #4FA4F6;
    font-weight: 600;
    position: relative;
}

.hz-areas-lista {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 1200px;
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.hz-areas-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
    overflow: hidden;
}

.hz-areas-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
    border-color: rgba(184, 162, 109, 0.3);
    background: rgba(255, 255, 255, 0.08);
}

.hz-areas-link {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #ffffff;
    font-size: 1rem;
    text-decoration: none;
    padding: 18px 20px;
    position: relative;
    transition: all 0.3s ease;
}

.hz-areas-icono {
    font-size: 1.3rem;
    color: #4FA4F6;
    min-width: 24px;
    text-align: center;
    transition: all 0.3s ease;
}

.hz-areas-item:hover .hz-areas-icono {
    color: #4FA4F6;
    transform: scale(1.1);
}

.hz-areas-texto {
    flex: 1;
    font-weight: 500;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.hz-areas-item:hover .hz-areas-texto {
    color: #dce6f2;
}

.hz-areas-flecha {
    font-size: 1.6rem;
    color: #4FA4F6;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    font-weight: 300;
    min-width: 20px;
    text-align: center;
}

.hz-areas-item:hover .hz-areas-flecha {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 768px) {
    .hz-areas {
        padding: 40px 15px;
    }

    .hz-areas-header {
        margin-bottom: 30px;
        padding: 0 10px;
    }

    .hz-areas h2 {
        font-size: 1.8rem;
        margin-bottom: 10px;
    }

    .hz-areas-intro {
        font-size: 0.95rem;
        line-height: 1.5;
        margin-top: 15px;
    }

    .hz-areas-lista {
        grid-template-columns: 1fr;
        gap: 10px;
        max-width: 100%;
    }

    .hz-areas-link {
        padding: 14px 16px;
        gap: 12px;
    }

    .hz-areas-icono {
        font-size: 1.1rem;
        min-width: 20px;
    }

    .hz-areas-texto {
        font-size: 0.92rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hz-areas-flecha {
        opacity: 0.5;
        font-size: 1.4rem;
        transform: translateX(0);
        min-width: 16px;
        flex-shrink: 0;
    }

    .hz-areas-item:hover .hz-areas-flecha {
        opacity: 1;
    }

    .hz-areas-item:hover {
        transform: translateY(-2px);
    }
}

@media (max-width: 480px) {
    .hz-areas {
        padding: 30px 10px;
    }

    .hz-areas h2 {
        font-size: 1.6rem;
    }

    .hz-areas-intro {
        font-size: 0.9rem;
    }

    .hz-areas-link {
        padding: 12px 14px;
        gap: 10px;
    }

    .hz-areas-icono {
        font-size: 1rem;
    }

    .hz-areas-texto {
        font-size: 0.88rem;
    }

    .hz-areas-flecha {
        font-size: 1.3rem;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .hz-areas-lista {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .hz-areas-link {
        padding: 16px 18px;
    }
}

@media (max-width: 360px) {
    .hz-areas-link {
        padding: 10px 12px;
    }

    .hz-areas-icono {
        font-size: 0.95rem;
    }

    .hz-areas-texto {
        font-size: 0.85rem;
    }

    .hz-areas-flecha {
        font-size: 1.2rem;
    }
}

.hz-areas-link:focus {
    outline: 2px solid rgba(62, 160, 255, 0.5);
    outline-offset: 2px;
    border-radius: 8px;
}

/* ===========================
   SECCIÓN CLIENTES - LOGO WALL
   =========================== */

.hz-clientes-scroll {
    padding: 60px 20px;
    background: #f8fafc;
    position: relative;
}

.hz-clientes-header {
    text-align: center;
    margin-bottom: 50px;
    max-width: 800px;
    margin-inline: auto;
}

.hz-clientes-titulo {
    font-size: 2.5rem;
    font-weight: 700;
    color: #00143C;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

.hz-clientes-titulo::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
    border-radius: 2px;
}

.hz-clientes-titulo .highlight {
    color: #2563eb;
}

.hz-clientes-descripcion {
    font-size: 1.05rem;
    color: #475569;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}

/* ===== DESKTOP: GRID NORMAL (LOGO WALL) ===== */
.hz-clientes-grid-desktop {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 40px 30px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
}

/* Estilos para los logos (Desktop) */
.hz-cliente-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    opacity: 0;
    transform: translateY(20px);
    animation: cardAppear 0.5s ease forwards;
    transition: transform 0.3s ease;
    padding: 10px;
    min-height: 90px;
    /* Altura mínima para contener logos */
}

.hz-cliente-link:hover {
    transform: translateY(-3px);
}

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

/* Animaciones escalonadas */
.hz-cliente-link:nth-child(1) {
    animation-delay: 0.1s;
}

.hz-cliente-link:nth-child(2) {
    animation-delay: 0.2s;
}

.hz-cliente-link:nth-child(3) {
    animation-delay: 0.3s;
}

.hz-cliente-link:nth-child(4) {
    animation-delay: 0.4s;
}

.hz-cliente-link:nth-child(5) {
    animation-delay: 0.5s;
}

.hz-cliente-link:nth-child(6) {
    animation-delay: 0.6s;
}

.hz-cliente-link:nth-child(7) {
    animation-delay: 0.7s;
}

.hz-cliente-link:nth-child(8) {
    animation-delay: 0.8s;
}

.hz-cliente-link:nth-child(9) {
    animation-delay: 0.9s;
}

.hz-cliente-link:nth-child(10) {
    animation-delay: 1s;
}

.hz-cliente-link:nth-child(11) {
    animation-delay: 1.1s;
}

.hz-cliente-link:nth-child(12) {
    animation-delay: 1.2s;
}

.hz-cliente-link:nth-child(13) {
    animation-delay: 1.3s;
}

.hz-cliente-link:nth-child(14) {
    animation-delay: 1.4s;
}

.hz-cliente-link:nth-child(15) {
    animation-delay: 1.5s;
}

.hz-cliente-link:nth-child(16) {
    animation-delay: 1.6s;
}

.hz-cliente-logo {
    max-width: 100%;
    height: auto;
    max-height: 48px;
    /* Desktop: 40-48px */
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.8;
    transition: all 0.3s ease;
}

.hz-cliente-link:hover .hz-cliente-logo {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* ===== MOBILE STYLES ===== */
.hz-clientes-scroll-mobile {
    display: none;
}

.scroll-container {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 20px 0 40px 0;
    margin: 0 15px;
    scroll-behavior: smooth;
}

.scroll-container::-webkit-scrollbar {
    display: none;
}

.scroll-content {
    display: flex;
    gap: 25px;
    padding: 0 20px 10px 20px;
}

.scroll-item {
    flex: 0 0 auto;
    width: 160px;
    /* Base ancho para mobile */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 15px 0;
    min-height: 100px;
    /* Altura suficiente para el logo más grande */
}

/* Efecto para elementos en viewport */
.scroll-item.in-viewport {
    opacity: 1 !important;
    transform: scale(1.02);
}

.scroll-logo {
    max-width: 140px;
    max-height: 65px;
    /* Mobile: 50-65px */
    width: auto;
    height: auto;
    object-fit: contain;
    transition: all 0.3s ease;
}

/* Logos fuera de foco - más atenuados */
.scroll-item:not(.in-viewport) .scroll-logo {
    filter: grayscale(30%) brightness(0.9);
    opacity: 0.7;
}

/* Logo en foco - color completo */
.scroll-item.in-viewport .scroll-logo {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
    transform: scale(1.05);
}

/* Efecto hover */
.scroll-item:hover .scroll-logo {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1100px) {
    .hz-clientes-grid-desktop {
        grid-template-columns: repeat(5, 1fr);
        gap: 35px 25px;
        padding: 0 20px;
    }
}

@media (max-width: 900px) {
    .hz-clientes-grid-desktop {
        grid-template-columns: repeat(4, 1fr);
        gap: 30px 20px;
    }

    .hz-cliente-logo {
        max-height: 45px;
        /* Reducir ligeramente en tablets */
    }
}

@media (max-width: 768px) {
    .hz-clientes-scroll {
        padding: 40px 0;
    }

    .hz-clientes-grid-desktop {
        display: none;
    }

    .hz-clientes-scroll-mobile {
        display: block;
    }

    .hz-clientes-titulo {
        font-size: 1.8rem;
    }

    .hz-clientes-descripcion {
        font-size: 0.95rem;
        padding: 0 20px;
    }

    .scroll-item {
        width: calc(50vw - 30px);
        min-width: 140px;
        padding: 15px 0;
    }

    .scroll-logo {
        max-height: 60px;
        /* Ajuste fino para tablets pequeñas */
    }
}

@media (max-width: 480px) {
    .hz-clientes-scroll {
        padding: 30px 0;
    }

    .hz-clientes-titulo {
        font-size: 1.6rem;
    }

    .scroll-item {
        width: calc(50vw - 25px);
        min-width: 130px;
        padding: 15px 0;
    }

    .scroll-logo {
        max-height: 65px;
        /* Mobile pequeño: 65px (máximo recomendado) */
        max-width: 120px;
    }
}

/* Ajuste para pantallas muy pequeñas */
@media (max-width: 360px) {
    .scroll-item {
        width: calc(50vw - 20px);
        min-width: 120px;
    }

    .scroll-logo {
        max-height: 55px;
        /* Reducir para evitar desbordamiento */
        max-width: 100px;
    }
}

/* ===== ESTILOS PARA EL INDICADOR DE SCROLL ===== */
.scroll-indicator {
    text-align: center;
    margin-top: 15px;
    padding: 0 20px;
    position: relative;
}

.indicator-arrows {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    color: #4FA4F6;
    font-size: 1.4rem;
    font-weight: bold;
    opacity: 0.7;
    padding: 8px 20px;
  
}

.arrow-left,
.arrow-right {
    animation: bounceHorizontal 2s infinite;
    display: inline-block;
}

.arrow-right {
    animation-delay: 0.5s;
}

.arrow-left {
    opacity: 0.5;
}

@keyframes bounceHorizontal {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(5px);
    }
}

.indicator-arrows:active {
    transform: scale(0.95);
    opacity: 0.9;
}

@media (max-width: 768px) {
    .scroll-indicator {
        margin-top: 20px;
    }

    .indicator-arrows {
        font-size: 1.2rem;
        padding: 6px 16px;
    }
}

/* ============================= */
/*  GOOGLE REVIEWS - CARRUSEL */
/* ============================= */

#googler {
    background-color: #F4F6F9;
    width: 100%;
    overflow: hidden;
}

.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 2rem 1rem;
    position: relative;
}

/* LOGO DE GOOGLE */
.google-logo {
    width: 250px;
    height: 126px;
    object-fit: contain;
    display: block;
    margin: 0 auto 2rem auto;
    transition: transform 0.3s ease;
}

.google-logo:hover {
    transform: scale(1.05);
}

/* CONTENEDOR DEL CARRUSEL */
.google-review-carousel {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 0 3rem;
    overflow: hidden;
}

.carousel-container {
    display: flex;
    transition: transform 0.3s ease;
    gap: 1.5rem;
    padding: 0 1rem;
    cursor: grab;
    user-select: none;
}

.carousel-container:active {
    cursor: grabbing;
}

/* CARD DE REVIEW */
.google-review-card {
    flex: 0 0 calc(33.333% - 1rem);
    min-width: 0;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    padding: 1.5rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.google-review-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.review-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* HEADER DEL REVIEW */
.review-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 12px;
    border: 2px solid #f0f0f0;
}

.review-meta {
    flex-grow: 1;
}

.reviewer-name {
    font-weight: 600;
    font-size: 1rem;
    color: #1a1a1a;
    margin-bottom: 0.25rem;
}

.review-date {
    font-size: 0.85rem;
    color: #666;
}

.google-icon {
    width: 20px;
    height: 20px;
}

/* RATING Y ESTRELLAS */
.review-rating {
    margin: 0.5rem 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stars {
    display: flex;
    gap: 2px;
}

.stars img {
    width: 18px;
    height: 18px;
}

/* TEXTO DEL REVIEW */
.review-text {
    font-size: 0.95rem;
    color: #333;
    line-height: 1.6;
    flex-grow: 1;
    margin-bottom: 1rem;
}

/* BOTÓN VER MÁS */
.toggle-more {
    background-color: transparent;
    border: none;
    color: #4285F4;
    cursor: pointer;
    padding: 4px 0;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    transition: color 0.2s;
    align-self: flex-start;
}

.toggle-more:hover {
    color: #0d47a1;
    text-decoration: underline;
}

/* BOTONES DEL CARRUSEL */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: white;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.3s ease;
}

.prev-btn {
    left: 10px;
}

.next-btn {
    right: 10px;
}

.carousel-btn:hover {
    background: #f8f8f8;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    transform: translateY(-50%) scale(1.05);
}

.carousel-btn svg {
    width: 24px;
    height: 24px;
    stroke: #333;
}

/* INDICADORES */
.carousel-indicators {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

.indicator {
    width: 40px;
    height: 4px;
    background: #ddd;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: none;
}

.indicator.active {
    background: #4285F4;
    width: 50px;
}

/* Indicadores para desktop - solo 2 grupos (para 6 tarjetas) */
.desktop-indicator {
    display: none;
}

/* Indicadores para móvil - 6 individuales */
.mobile-indicator {
    display: none;
}

/* TOOLTIP */
.tooltip-wrapper {
    position: relative;
    display: inline-block;
    margin-left: 0.5rem;
}

.tooltip-wrapper .tooltip-text {
    visibility: hidden;
    opacity: 0;
    width: 180px;
    background-color: rgba(51, 51, 51, 0.95);
    color: #fff;
    text-align: left;
    border-radius: 8px;
    padding: 12px;
    position: absolute;
    z-index: 1000;
    top: 50%;
    left: 125%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    line-height: 1.4;
    transition: opacity 0.2s ease-in-out;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.tooltip-wrapper:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* ===================================== */
/* MEDIA QUERIES - VERSIÓN DESKTOP */
/* ===================================== */
@media (min-width: 769px) {

    /* Mostrar solo indicadores de desktop (2 grupos) */
    .desktop-indicator {
        display: block;
    }

    /* Ocultar indicadores de móvil */
    .mobile-indicator {
        display: none !important;
    }

    /* Solo mostrar 2 indicadores (0, 1) - para 6 tarjetas */
    .desktop-indicator:nth-child(n+5) {
        display: none;
    }

    /* Ajustar para pantallas medianas */
    @media (max-width: 1200px) {
        .google-review-card {
            flex: 0 0 calc(50% - 1rem);
        }
    }
}

/* ===================================== */
/* MEDIA QUERIES - VERSIÓN MÓVIL */
/* ===================================== */
@media (max-width: 768px) {

    /* OCULTAR BOTONES EN MÓVIL */
    .carousel-btn {
        display: none;
    }

    /* Mostrar solo indicadores de móvil (6 individuales) */
    .mobile-indicator {
        display: block;
    }

    /* Ocultar indicadores de desktop */
    .desktop-indicator {
        display: none !important;
    }

    /* Mostrar solo 6 indicadores (0, 1, 2, 3, 4, 5) */
    .mobile-indicator:nth-child(n+13) {
        display: none;
    }

    /* AJUSTAR PADDING PARA SWIPE */
    .google-review-carousel {
        padding: 2rem 0 3rem;
        touch-action: pan-y;
    }

    .carousel-container {
        padding: 0 1rem;
    }

    .google-review-card {
        flex: 0 0 100%;
        scroll-snap-align: start;
    }

    .container {
        padding: 1.5rem 0.5rem;
    }

    .google-logo {
        width: 200px;
        height: 100px;
    }
}

@media (max-width: 480px) {
    .google-review-card {
        padding: 1.25rem;
    }

    .review-text {
        font-size: 0.9rem;
    }

    .container {
        padding: 1rem 0.25rem;
    }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {

    .google-review-card:hover,
    .carousel-btn:hover,
    .google-logo:hover {
        transform: none;
        transition: none;
    }

    .carousel-container {
        transition: none;
    }
}

/***** HERO *****/

html,
body {
    margin: 0;
    padding: 0;
}

.hero-section-core * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.hero-section-core {
    background: #00143C;
    min-height: 80vh;
    display: flex;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
}

.hero-core-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    width: 100%;
}

.hero-core-left {
    color: white;
    padding-right: 2rem;
}

.hero-core-subtitle {
    color: #60A5FA;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.hero-core-title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 1.5rem 0;
    color: white;
}

.hero-core-description {
    font-size: 1.1rem;
    color: #CBD5E1;
    margin-bottom: 2rem;
    line-height: 1.7;
}

.hero-core-description strong {
    color: #60A5FA;
    font-weight: 600;
}

.hero-core-button {
    display: inline-block;
    background: #2563EB;
    color: white;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.hero-core-button:hover {
    background: #1D4ED8;
}

.hero-core-right {
    color: white;
}

.hero-core-video-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: white;
}

.hero-core-video-subtitle {
    font-size: 1.1rem;
    color: #CBD5E1;
    margin-bottom: 1.5rem;
}

.hero-core-video-thumb {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    aspect-ratio: 16/9;
}

.hero-core-video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-core-video-thumb::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 20, 60, 0.4);
    transition: background 0.3s;
}

.hero-core-video-thumb:hover::after {
    background: rgba(0, 20, 60, 0.6);
}

.hero-core-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s;
    font-size: 1.2rem;
    color: #00143C;
    z-index: 10;
}

.hero-core-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.hero-core-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.hero-core-modal-content {
    position: relative;
    width: 90%;
    max-width: 900px;
    background: #00143C;
    border-radius: 12px;
    padding: 20px;
}

.hero-core-close-btn {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    background: none;
    border: none;
    z-index: 1001;
}

.hero-core-close-btn:hover {
    color: #60A5FA;
}

.hero-core-video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 8px;
}

.hero-core-video-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

@media (max-width: 768px) {
    .hero-section-core {
        padding: 1.5rem;
    }

    .hero-core-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .hero-core-left {
        padding-right: 0;
        text-align: center;
    }

    .hero-core-title {
        font-size: 2.2rem;
    }

    .hero-core-description {
        font-size: 1rem;
    }

    .hero-core-video-title {
        font-size: 1.6rem;
        text-align: center;
    }

    .hero-core-video-subtitle {
        text-align: center;
    }

    .hero-core-button {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 480px) {
    .hero-core-title {
        font-size: 1.8rem;
    }

    .hero-core-video-subtitle {
        font-size: 1rem;
    }

    .hero-core-play-btn {
        width: 50px;
        height: 50px;
        font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .hero-core-button:hover,
    .hero-core-play-btn:hover,
    .hero-core-video-thumb::after {
        transition: none;
    }

    .hero-core-play-btn:hover {
        transform: translate(-50%, -50%);
    }
}


/******** KPI CONTADOR ********/
.hz-kpi {
    background-color: #001640;
    color: #fff;
    padding: 80px 20px;
    text-align: center;
    font-family: 'Segoe UI', sans-serif;
}

.container-kpi {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.kpi-card {
    flex: 1 1 220px;
    max-width: 260px;
    min-height: 200px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 25px 15px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    border-radius: 12px 12px 0 0;
}

.kpi-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.03), transparent);
    transition: left 0.5s ease;
}

.kpi-card:hover::after {
    left: 100%;
}

.card-inner {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.kpi-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
}

.kpi-icon {
    font-size: 38px;
    margin-bottom: 15px;
    color: #ffffff;
    transition: transform 0.3s ease;
}

.kpi-card:hover .kpi-icon {
    transform: scale(1.1);
    color: #4dabf7;
}

.kpi-number {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.2;
    margin: 10px 0;
    letter-spacing: 0.5px;
}

.kpi-number .counter {
    display: inline-block;
    min-width: 40px;
}

.kpi-label {
    font-size: 14px;
    letter-spacing: 0.8px;
    margin-top: 10px;
    color: #e0e0e0;
    padding: 0 10px;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .container-kpi {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 20px;
        max-width: 500px;
        padding: 0 15px;
    }

    .kpi-card {
        max-width: 100%;
        width: 100%;
        min-height: 180px;
        padding: 20px 10px;
    }

    .kpi-icon {
        font-size: 32px;
        margin-bottom: 12px;
    }

    .kpi-number {
        font-size: 24px;
        margin: 8px 0;
    }

    .kpi-card[data-kpi-index="0"] .kpi-number {
        font-size: 22px;
    }

    .kpi-card[data-kpi-index="1"] .kpi-number,
    .kpi-card[data-kpi-index="2"] .kpi-number,
    .kpi-card[data-kpi-index="3"] .kpi-number {
        font-size: 24px;
    }

    .kpi-label {
        font-size: 13px;
        letter-spacing: 0.5px;
        padding: 0 5px;
    }

    .kpi-card:hover {
        transform: translateY(-3px);
    }
}

@media (max-width: 480px) {
    .container-kpi {
        gap: 15px;
        padding: 0 10px;
    }

    .kpi-card {
        min-height: 160px;
        padding: 15px 8px;
        border-radius: 10px;
    }

    .kpi-number {
        font-size: 22px;
    }

    .kpi-card[data-kpi-index="0"] .kpi-number {
        font-size: 20px;
    }

    .kpi-icon {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .kpi-label {
        font-size: 12px;
        margin-top: 8px;
    }
}

@media (min-width: 1400px) {
    .container-kpi {
        max-width: 1300px;
        gap: 35px;
    }

    .kpi-card {
        max-width: 280px;
        min-height: 220px;
        padding: 30px 20px;
    }

    .kpi-icon {
        font-size: 42px;
    }

    .kpi-number {
        font-size: 32px;
    }

    .kpi-label {
        font-size: 15px;
    }
}

/* ===========================
   MENÚ FLOTANTE DE CONTACTO (Específico)
   =========================== */
.contact-floating-menu {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
    /* Un poco menos que el menú hamburguesa */
}

/* Botón principal del menú de contacto */
.contact-floating-button {
    background-color: rgba(7, 60, 168, 0.96);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    position: relative;
}

/* Ícono de "+" en el botón principal de contacto */
.contact-plus-icon {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background-color: #ffffff;
    color: black;
    font-weight: bold;
    font-size: 16px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Submenú de contacto */
.contact-submenu {
    position: absolute;
    bottom: 65px;
    right: 0;
    padding: 5px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Mostrar el submenú cuando tiene la clase active */
.contact-floating-menu.active .contact-submenu {
    opacity: 1;
    visibility: visible;
}

/* Elementos del submenú de contacto */
.contact-submenu-item {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 30px;
    gap: 10px;
    position: relative;
    background-color: #f3f3f3;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Texto de cada opción del submenú de contacto */
.contact-tooltip {
    font-size: 14px;
    font-weight: bold;
    color: black;
    white-space: nowrap;
    position: absolute;
    right: 60px;
    opacity: 0;
    background-color: aliceblue;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    padding: 5px 10px;
    border-radius: 5px;
    transition: opacity 0.3s ease;
}

/* Mostrar el texto cuando se pasa el mouse */
.contact-submenu-item:hover .contact-tooltip {
    opacity: 1;
}

/* Iconos del menú flotante de contacto */
.contact-floating-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.contact-floating-icon i {
    font-size: 24px;
}

/* Colores específicos para los iconos de contacto */
.contact-whatsapp {
    color: #25D366;
}

.contact-envelope {
    color: #007BFF;
}

.contact-user {
    color: #FF9800;
}

.contact-phone {
    color: white;
}

/* Efectos hover en iconos de contacto */
.contact-submenu-item:hover .contact-whatsapp {
    background-color: #25D366;
    color: #fff;
}

.contact-submenu-item:hover .contact-envelope {
    background-color: #007BFF;
    color: #fff;
}

.contact-submenu-item:hover .contact-user {
    background-color: #FF9800;
    color: #fff;
}

.contact-floating-button:hover .contact-phone {
    background-color: #f5f5f5;
    color: #f70404;
}

/* Adaptación a móviles */
@media (max-width: 768px) {
    .contact-tooltip {
        opacity: 1;
        position: static;
        background: none;
        box-shadow: none;
        color: white;
        padding: 0;
    }

    .contact-submenu-item {
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
    }

    .contact-submenu-item:hover {
        background-color: rgba(0, 0, 0, 0.9);
    }

    .contact-submenu-item:hover .contact-tooltip {
        color: white;
    }
}

/* PUBLICACIONES */


.pindex-noticias-section {
    background-color: #ffffff;
    padding: 5rem 1.5rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

.pindex-noticias-container {
    max-width: 1400px;
    margin: 0 auto;
}

.pindex-noticias-header {
    text-align: center;
    margin-bottom: 3rem;
}

.pindex-noticias-header h3 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin: 0 0 0.5rem 0;
    position: relative;
    display: inline-block;
}

.pindex-noticias-header h3::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--accent-blue);
    border-radius: 2px;
}

.pindex-noticias-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
}

.pindex-noticia-item {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
    transition: var(--transition);
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
}

.pindex-noticia-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border-color: #cbd5e1;
}

.pindex-noticia-item figure {
    margin: 0;
    height: 200px;
    overflow: hidden;
}

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

.pindex-noticia-item:hover img {
    transform: scale(1.05);
}

.pindex-noticia-item>div {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.pindex-noticia-item h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.4;
    margin: 0 0 1rem 0;
    flex-grow: 1;
}

.pindex-noticia-item h4 a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s;
}

.pindex-noticia-item h4 a:hover {
    color: var(--accent-blue);
}

.pindex-noticia-item ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    justify-content: flex-start;
}

.pindex-noticia-item ul li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pindex-noticia-item ul li i {
    color: var(--accent-blue);
    font-size: 0.85rem;
}

.pindex-noticias-container>p {
    text-align: center;
    margin-top: 2rem;
}

.pindex-noticias-section button {
    background: var(--accent-blue);
    color: white;
    border: none;
    padding: 1rem 2.5rem;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.pindex-noticias-section button:hover {
    background: #1D4ED8;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
}

.pindex-noticias-section button::after {
    content: '→';
    transition: transform 0.2s;
}

.pindex-noticias-section button:hover::after {
    transform: translateX(5px);
}

@media (max-width: 1024px) {
    .pindex-noticias-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .pindex-noticia-item figure {
        height: 180px;
    }
}

@media (max-width: 768px) {
    .pindex-noticias-section {
        padding: 3rem 1rem;
    }

    .pindex-noticias-header h3 {
        font-size: 1.8rem;
    }

    .pindex-noticias-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    .pindex-noticia-item:nth-child(3),
    .pindex-noticia-item:nth-child(4) {
        display: none !important;
    }

    .pindex-noticia-item figure {
        height: 200px;
    }

    .pindex-noticia-item h4 {
        font-size: 1.1rem;
    }

    /* CORREGIDO: autor y fecha en línea */
    .pindex-noticia-item ul {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
        justify-content: space-between;
    }

    .pindex-noticia-item ul li {
        font-size: 0.7rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 55%;
    }

    .pindex-noticia-item ul li:first-child {
        max-width: 55%;
    }

    .pindex-noticia-item ul li:last-child {
        max-width: 40%;
    }

    .pindex-noticias-section button {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .pindex-noticias-header h3 {
        font-size: 1.6rem;
    }

    .pindex-noticias-grid {
        max-width: 300px;
        gap: 1rem;
    }

    .pindex-noticia-item figure {
        height: 180px;
    }

    .pindex-noticia-item>div {
        padding: 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .pindex-noticia-item:hover,
    .pindex-noticia-item:hover img,
    .pindex-noticias-section button:hover,
    .pindex-noticias-section button:hover::after {
        transform: none;
        transition: none;
    }
}

/***** REPORTES - VERSIÓN OBSERVATORIO (REGISTRO TÉCNICO) *****/


.obs-section {
    background: #ffffff;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
    padding: 0;
}

.obs-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 5rem 2rem;
}

/* ===== HEADER (sin cambios) ===== */
.obs-header {
    display: flex;
    align-items: center;
    gap: 3rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 768px) {
    .obs-header {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }
}

.obs-icon {
    flex-shrink: 0;
}

.obs-icon img {
    width: 100px;
    height: auto;
    display: block;
}

.obs-text-content {
    flex: 1;
}

.obs-eyebrow {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-blue);
    margin-bottom: 0.5rem;
}

.obs-title {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1rem 0;
}

.obs-title-link {
    text-decoration: none;
    color: var(--primary-dark);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.obs-title-link:hover {
    color: var(--accent-blue);
}

.obs-title-arrow {
    font-size: 1.8rem;
    opacity: 0.7;
    transition: transform 0.2s, opacity 0.2s;
    color: var(--accent-blue);
}

.obs-title-link:hover .obs-title-arrow {
    transform: translateX(5px);
    opacity: 1;
}

.obs-subtitle {
    font-size: 1.1rem;
    color: var(--text-medium);
    max-width: 700px;
    margin: 0;
    line-height: 1.6;
}

/* ===== LISTA DE REPORTES (NUEVO ESTILO TÉCNICO) ===== */
.obs-lista-reportes {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 2.5rem 0 3rem;
}

.obs-reporte {
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.obs-reporte:hover {
    background-color: var(--gris-hover);
    border-color: var(--accent-blue);
    box-shadow: 0 4px 12px rgba(0, 20, 60, 0.08);
}

/* Zona izquierda - métrica */
.obs-reporte-metrica {
    min-width: 140px;
    padding-right: 2rem;
}

.obs-metrica-numero {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--primary-dark);
    display: block;
    line-height: 1.1;
}

.obs-metrica-concepto {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--accent-blue);
    font-weight: 600;
}

/* Zona central - información */
.obs-reporte-info {
    flex: 2;
    padding: 0 1rem;
}

.obs-reporte-titulo {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 0.35rem 0;
}

.obs-reporte-titulo a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s;
}

.obs-reporte-titulo a:hover {
    color: var(--accent-blue);
}

.obs-reporte-detalle {
    color: var(--text-medium);
    font-size: 0.95rem;
}

.obs-reporte-detalle i {
    color: var(--accent-blue);
    width: 18px;
    margin-right: 0.3rem;
}

/* Zona derecha - enlace "Ver reporte" */
.obs-reporte-accion {
    min-width: 140px;
    text-align: right;
}

.obs-reporte-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--primary-dark);
    font-weight: 500;
    font-size: 1rem;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 40px;
    transition: background-color 0.2s, color 0.2s;
    white-space: nowrap;
}

.obs-reporte-link i {
    font-size: 0.9rem;
    transition: transform 0.2s;
}

.obs-reporte-link:hover {
    background-color: rgba(37, 99, 235, 0.08);
    color: var(--accent-blue);
}

.obs-reporte-link:hover i {
    transform: translateX(5px);
}

/* ===== BOTÓN CTA (sin cambios estructurales) ===== */
.obs-cta {
    text-align: center;
    margin-top: 3rem;
}

.obs-button {
    background: var(--accent-blue);
    color: white;
    border: none;
    padding: 1rem 2.5rem;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.obs-button:hover {
    background: var(--accent-blue-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
}

.obs-button-arrow {
    transition: transform 0.2s;
}

.obs-button:hover .obs-button-arrow {
    transform: translateX(5px);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .obs-reporte {
        padding: 1.25rem 1.5rem;
    }

    .obs-reporte-metrica {
        min-width: 120px;
        padding-right: 1rem;
    }

    .obs-metrica-numero {
        font-size: 1.8rem;
    }

    .obs-reporte-titulo {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .obs-container {
        padding: 3rem 1.5rem;
    }

    .obs-title-link {
        font-size: 2rem;
    }

    .obs-subtitle {
        font-size: 1rem;
    }

    /* Ocultar reportes 3 y 4 en móvil */
    .obs-reporte-hidden-mobile {
        display: none !important;
    }

    /* Cada reporte en bloque vertical */
    .obs-reporte {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
        padding: 1.5rem;
    }

    .obs-reporte-metrica {
        min-width: auto;
        padding-right: 0;
        width: 100%;
        border-bottom: 1px dashed var(--border-color);
        padding-bottom: 1rem;
    }

    .obs-reporte-info {
        padding: 0;
        width: 100%;
    }

    .obs-reporte-detalle {
        margin-top: 0.25rem;
    }

    .obs-reporte-accion {
        width: 100%;
        text-align: left;
        min-width: auto;
    }

    .obs-reporte-link {
        width: 100%;
        justify-content: center;
        background-color: var(--gris-hover);
        padding: 0.8rem;
    }

    /* Scroll effect (mantenido de tu código) */
    .obs-reporte.obs-card-scroll-active {
        border: 0.5px solid var(--mobile-blue-border) !important;
        box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.1) !important;
    }
}

@media (max-width: 480px) {
    .obs-title-link {
        font-size: 1.6rem;
    }

    .obs-button {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

    .obs-metrica-numero {
        font-size: 1.6rem;
    }

    .obs-reporte-titulo {
        font-size: 1rem;
    }
}

/* ===== SCROLL EFFECT (tu JavaScript original adaptado) ===== */
@media (max-width: 768px) {
    .obs-reporte-scroll-active {
        border: 0.5px solid var(--mobile-blue-border) !important;
        box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.1), 0 8px 25px rgba(0, 0, 0, 0.08) !important;
        transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    .obs-reporte:hover,
    .obs-reporte-link:hover i,
    .obs-button:hover,
    .obs-title-link:hover .obs-title-arrow,
    .obs-button:hover .obs-button-arrow {
        transform: none;
        transition: none;
    }
}

/* ============================================
   HERO SLIDER NATIVO - CPL GRUPO CONSULTORES
   ============================================ */

/* === VARIABLES CORPORATIVAS === */


/* === HERO SLIDER BASE === */
.hero-slider-native {
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-top: 80px;
    background-color: var(--cpl-azul);
}

.slider-container {
    position: relative;
    width: 100%;
    height: 85vh;
    min-height: 600px;
    overflow: hidden;
}

.slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.slider-slide {
    flex: 0 0 100%;
    position: relative;
    height: 100%;
}

/* === IMÁGENES === */
.slide-picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.slide-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* === OVERLAY === */
.slider-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg,
            rgba(0, 0, 0, 0.78) 0%,
            rgba(0, 0, 0, 0.55) 50%,
            rgba(0, 0, 0, 0.30) 100%);
    pointer-events: none;
}

/* === CONTENIDO === */
.slide-content {
    position: absolute;
    bottom: 20%;
    left: 0;
    right: 0;
    z-index: 10;
    text-align: center;
    color: var(--cpl-blanco);
    padding: 0 20px;
    pointer-events: none;
}

.slide-content>* {
    pointer-events: auto;
}

/* === ACENTO DORADO === */
.hero-accent {
    width: 56px;
    height: 3px;
    background: var(--cpl-dorado);
    margin: 0 auto 20px auto;
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(184, 162, 109, 0.3);
}

/* === TÍTULOS === */
.slide-title {
    font-size: clamp(1.5rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    text-transform: uppercase;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.slide-subtitle {
    font-size: clamp(0.9rem, 2vw, 1.2rem);
    margin-bottom: 2rem;
    opacity: 0.9;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* === BOTONES === */
.cta-group {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

.btn {
    display: inline-block;
    padding: 12px 28px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: all var(--cpl-transition);
    cursor: pointer;
    border: 1px solid transparent;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    min-height: 44px;
}

.btn-primary {
    background-color: var(--cpl-azul);
    color: var(--cpl-blanco);
    border-color: rgba(255, 255, 255, 0.1);
}

.btn-primary:hover {
    background-color: var(--cpl-dorado);
    border-color: var(--cpl-dorado);
    color: var(--cpl-azul-oscuro);
    box-shadow: 0 12px 24px rgba(184, 162, 109, 0.3);
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(4px);
    color: var(--cpl-blanco);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

/* === NAVEGACIÓN (FLECHAS) === */
.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: rgba(10, 20, 30, 0.5);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(184, 162, 109, 0.3);
    border-radius: 50%;
    color: var(--cpl-dorado);
    font-size: 28px;
    cursor: pointer;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--cpl-transition);
}

.slider-nav:hover {
    background: var(--cpl-dorado);
    color: var(--cpl-azul);
    border-color: var(--cpl-dorado);
}

.slider-nav.prev {
    left: 20px;
}

.slider-nav.next {
    right: 20px;
}

/* === INDICADORES (DOTS) === */
.slider-dots {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    z-index: 20;
}

.dot {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--cpl-transition);
}

.dot.active {
    background: var(--cpl-dorado);
    width: 26px;
    border-radius: 10px;
    box-shadow: 0 0 15px var(--cpl-dorado);
}

/* === EFECTOS ADICIONALES === */
.hero-slider-native::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(to bottom,
            transparent 0%,
            rgba(0, 19, 58, 0.35) 40%,
            rgba(0, 19, 58, 0.9) 90%,
            #00133A 100%);
    z-index: 15;
    pointer-events: none;
}

.hero-slider-native::before {
    content: '';
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    max-width: 900px;
    height: 60px;
    background: radial-gradient(ellipse at center,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0.04) 50%,
            transparent 80%);
    border-radius: 50%;
    filter: blur(12px);
    z-index: 14;
    pointer-events: none;
    opacity: 0.7;
}

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */
@media (min-width: 768px) and (max-width: 1024px) {
    .hero-slider-native {
        margin-top: 80px;
    }

    .slider-container {
        height: 70vh;
        min-height: 500px;
    }

    .slide-title {
        font-size: 2rem;
    }

    .slide-subtitle {
        font-size: 1rem;
    }

    .btn {
        padding: 10px 24px;
        font-size: 0.9rem;
    }
}

/* ============================================
   RESPONSIVE - MÓVIL
   ============================================ */
@media (max-width: 767px) {
    .hero-slider-native {
        margin-top: 70px;
    }

    .hero-slider-native::before {
        bottom: 10px;
        width: 80%;
        height: 40px;
        background: radial-gradient(ellipse at center,
                rgba(255, 255, 255, 0.08) 0%,
                rgba(255, 255, 255, 0.02) 60%,
                transparent 85%);
        filter: blur(8px);
        opacity: 0.5;
    }

    .hero-slider-native::after {
        height: 50px;
        background: linear-gradient(to bottom,
                transparent 0%,
                rgba(0, 19, 58, 0.3) 30%,
                rgba(0, 19, 58, 0.8) 80%,
                #00133A 100%);
    }

    .slider-container {
        height: 380px;
        min-height: 350px;
        max-height: 420px;
    }

    /* SUBIR EL CONTENIDO - valores más agresivos */
    .slide-content {
        bottom: 45px;
        /* Antes: 20px */
        padding: 0 12px;
    }

    .hero-accent {
        width: 30px;
        height: 2px;
        margin: 0 auto 6px auto;
        /* Antes: 8px */
        box-shadow: none;
    }

    .slide-title {
        font-size: 0.9rem;
        /* Antes: 0.95rem */
        line-height: 1.25;
        margin-bottom: 4px;
        /* Antes: 5px */
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    }

    .slide-subtitle {
        font-size: 0.6rem;
        /* Antes: 0.65rem */
        margin-bottom: 8px;
        /* Antes: 10px */
        max-width: 250px;
        margin-left: auto;
        margin-right: auto;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    }

    /* Ocultar segundo botón en móvil */
    .cta-group .btn-secondary {
        display: none;
    }

    /* Botón principal más compacto */
    .btn-primary {
        padding: 4px 12px;
        font-size: 0.65rem;
        min-width: 100px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        /* === CENTRAR TEXTO === */
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1.2;
    }

    .btn-primary:hover {
        transform: none;
    }

    .cta-group {
        gap: 0;
        margin-top: 0;
        /* Antes: 5px */
    }

    /* Ocultar flechas en móvil */
    .slider-nav {
        display: none;
    }

    /* Dots más pequeños y separados */
    .slider-dots {
        bottom: 6px;
        gap: 6px;
    }

    .dot {
        width: 5px;
        height: 5px;
    }

    .dot.active {
        width: 14px;
    }
}

/* ============================================
   PANTALLAS MUY PEQUEÑAS
   ============================================ */
@media (max-width: 360px) {
    .slider-container {
        height: 320px;
        min-height: 300px;
    }

    .slide-title {
        font-size: 0.85rem;
        max-width: 240px;
    }

    .slide-subtitle {
        font-size: 0.6rem;
        max-width: 220px;
    }

    .btn-primary {
        padding: 4px 12px;
        font-size: 0.65rem;
        min-width: 100px;
    }

    .slide-content {
        bottom: 15px;
    }
}

/* ============================================
   OPTIMIZACIONES DE RENDIMIENTO
   ============================================ */
.slider-slide,
.slide-picture img {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Para usuarios que prefieren movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .slider-track {
        transition: none;
    }

    .btn {
        transition: none;
    }

    .hero-slider-native::before,
    .hero-slider-native::after {
        animation: none;
    }
}

/* Eliminar franja blanca en móvil */
@media (max-width: 767px) {
    .hero-slider-native {
        margin-top: 0;
        position: relative;
        top: 0;
    }

    .hero-slider-native::before,
    .hero-slider-native::after {
        display: none;
    }

    .slider-container {
        height: 380px;
        min-height: 350px;
        max-height: 420px;
        position: relative;
        top: 0;
    }
}

/***** VENTAJAS ******/



.hz-ventajas-bg {
    position: relative;
    background-color: #001540;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.hz-ventajas-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 21, 64, 0.91);
    z-index: 1;
}

.hz-ventajas-contenido {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    color: white;
}

.hz-ventajas-header {
    text-align: center;
    margin-bottom: 50px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

.hz-ventajas-titulo {
    color: #ffffff;
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.hz-ventajas-titulo::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
    border-radius: 2px;
}

.hz-ventajas-intro {
    font-size: 1.05rem;
    color: #dce6f2;
    line-height: 1.6;
    margin-top: 20px;
}

.hz-ventajas-intro .highlight {
    color: #4FA4F6;
    font-weight: 600;
    position: relative;
}

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

.hz-ventajas-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
    overflow: hidden;
}

.hz-ventajas-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
    border-color: rgba(184, 162, 109, 0.3);
    background: rgba(255, 255, 255, 0.08);
}

.hz-ventajas-item-content {
    padding: 35px 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.hz-ventajas-icono {
    filter: brightness(0) invert(1);
    margin-bottom: 25px;
    width: 70px;
    height: 70px;
    transition: all 0.3s ease;
}

.hz-ventajas-item:hover .hz-ventajas-icono {
    transform: scale(1.1);
    filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(79, 164, 246, 0.3));
}

.hz-ventajas-subtitulo {
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 10px;
}

.hz-ventajas-subtitulo::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: #4FA4F6;
    transition: width 0.3s ease;
}

.hz-ventajas-item:hover .hz-ventajas-subtitulo::after {
    width: 60px;
}

.hz-ventajas-texto {
    color: #dce6f2;
    line-height: 1.6;
    font-size: 1rem;
    margin-top: 10px;
    flex: 1;
}

@media (max-width: 768px) {
    .hz-ventajas-contenido {
        padding: 40px 15px;
    }

    .hz-ventajas-header {
        margin-bottom: 30px;
        padding: 0 10px;
    }

    .hz-ventajas-titulo {
        font-size: 1.8rem;
        margin-bottom: 10px;
    }

    .hz-ventajas-intro {
        font-size: 0.95rem;
        line-height: 1.5;
        margin-top: 15px;
    }

    .hz-ventajas-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 100%;
    }

    .hz-ventajas-item-content {
        padding: 25px 20px;
    }

    .hz-ventajas-icono {
        width: 60px;
        height: 60px;
        margin-bottom: 20px;
    }

    .hz-ventajas-subtitulo {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }

    .hz-ventajas-texto {
        font-size: 0.95rem;
    }

    .hz-ventajas-item:hover {
        transform: translateY(-3px);
    }
}

@media (max-width: 480px) {
    .hz-ventajas-contenido {
        padding: 30px 10px;
    }

    .hz-ventajas-titulo {
        font-size: 1.6rem;
    }

    .hz-ventajas-intro {
        font-size: 0.9rem;
    }

    .hz-ventajas-item-content {
        padding: 20px 18px;
    }

    .hz-ventajas-icono {
        width: 50px;
        height: 50px;
        margin-bottom: 15px;
    }

    .hz-ventajas-subtitulo {
        font-size: 1.1rem;
    }

    .hz-ventajas-texto {
        font-size: 0.9rem;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .hz-ventajas-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .hz-ventajas-item-content {
        padding: 30px 25px;
    }
}

@media (max-width: 360px) {
    .hz-ventajas-item-content {
        padding: 18px 15px;
    }

    .hz-ventajas-icono {
        width: 45px;
        height: 45px;
    }

    .hz-ventajas-subtitulo {
        font-size: 1rem;
    }

    .hz-ventajas-texto {
        font-size: 0.85rem;
    }
}

/* ============================= */
/* SECCION MODAL INDEX VIDEO*/
/* ============================= */

.video-thumbnail {
    position: relative;
    cursor: pointer;
}

.video-thumbnail img {
    width: 100%;
    height: auto;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(10, 1, 74, 0.5);
    color: #fff;
    border: none;
    font-size: 2em;
    cursor: pointer;
}

.modal {
    display: none;
    position: fixed;
    z-index: 5000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
    padding: 1vh 0;
}

.modal-content {
    background-color: #fff;
    margin: auto;
    padding: 5px;
    border: 1px solid #888;
    width: 90%;
    max-width: 700px;
    position: relative;
    max-height: 95vh;
    overflow-y: auto;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.5em;
    cursor: pointer;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

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

@media (max-width: 768px) {
    .modal-content {
        width: 90%;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .modal-content {
        width: 80%;
    }
}

.counter-unit {
    font-size: 0.8em;
    color: #fff;
}








/* MODAL VIDEO INDEX */
.video-thumbnail {
    position: relative;
    cursor: pointer;
}

.video-thumbnail img {
    width: 100%;
    height: auto;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(10, 1, 74, 0.5);
    color: #fff;
    border: none;
    font-size: 2em;
    cursor: pointer;
}

.modal {
    display: none;
    position: fixed;
    z-index: 888;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
    padding: 1vh 0;
}

.modal-content {
    background-color: #fff;
    margin: auto;
    padding: 5px;
    border: 1px solid #888;
    width: 90%;
    max-width: 700px;
    position: relative;
    max-height: 95vh;
    overflow-y: auto;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.5em;
    cursor: pointer;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

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

@media (max-width: 768px) {
    .modal-content {
        width: 90%;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .modal-content {
        width: 80%;
    }
}

.counter-unit {
    font-size: 0.8em;
    color: #fff;
}

/***** BOTON FLOTANTE VOLVER ARRIBA ****/

.scroll-top-btn {
    position: fixed;
    bottom: 40px;
    left: 40px;
    right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #00143C, #203ddd);
    color: #fff;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 6px 20px rgba(0, 20, 60, 0.25);
    cursor: pointer;
    z-index: 9999;
    transition: all 0.4s ease;
    opacity: 0;
    visibility: hidden;
}

.scroll-top-btn.active {
    opacity: 1;
    visibility: visible;
}

.scroll-top-btn.visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.scroll-top-btn.footer-near {
    bottom: 120px;
}

.scroll-top-btn:hover {
    background: linear-gradient(135deg, #203ddd, #00143C);
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 30px rgba(32, 61, 221, 0.4);
}

.icon-up {
    font-size: 24px;
    font-weight: bold;
}


.scroll-top-btn:hover .icon-up {
    transform: translateY(-3px);
}

@media (max-width: 768px) {
    .scroll-top-btn {
        bottom: 30px;
        left: 30px;
        right: auto;
        width: 52px;
        height: 52px;
    }

    .scroll-top-btn.footer-near {
        bottom: 100px;
        /* Menos espacio en móvil */
    }

    .icon-up {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .scroll-top-btn {
        bottom: 25px;
        left: 25px;
        right: auto;
        width: 48px;
        height: 48px;
    }

    .scroll-top-btn.footer-near {
        bottom: 90px;
    }

    .icon-up {
        font-size: 18px;
    }
}

@media (min-height: 900px) {
    .scroll-top-btn.footer-near {
        bottom: 150px;
    }
}


/* ========================================
   DESIGN TOKENS MASTER (CPL)
======================================== */


/*------  RESET Y ESTILOS BASE  ------*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.5;
  color: #333;
  overflow-x: hidden;
  position: relative;
  margin: 0;
  padding-top: 0;
}

/*------  ESTRUCTURA PRINCIPAL  ------*/
.main-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/*------  HEADER SUPERIOR (CONTACTO Y ENLACES)  ------*/
.top-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
   background-color: var(--primary-color);
  color: white;
  z-index: 1001;
  height: var(--topheader-height);
  transform: translateY(0);
  transition: transform 0.3s ease, opacity 0.3s ease;
  will-change: transform;
}

.top-header.hidden {
  transform: translateY(-100%);
}

.top-header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 20px;
  height: var(--topheader-height);
}

.top-header-contacts,
.top-header-links {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.top-header a {
  color: white;
  text-decoration: none;
  transition: opacity 0.2s;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.top-header a:hover {
    color: var(--secondary-color);
  opacity: 1;
}

/*------  HEADER PRINCIPAL (LOGO Y MENÚ)  ------*/
.main-header {
  position: fixed;
  top: var(--topheader-height);
  left: 0;
  right: 0;
  background-color: white;
  z-index: 1000;
  transition: top 0.3s ease, box-shadow 0.3s ease;
  width: 100%;
  box-shadow: none;
}

.main-header.collapsed {
  top: 0 !important;
  box-shadow: 0 4px 10px rgba(95, 95, 95, 0.394);
}

.top-header.hidden + .main-header,
.top-header.hidden ~ .main-header {
  top: 0;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  position: relative;
}

/*------  LOGO  ------*/
.logo-header-container {
 width: 220px;
  height: 74px;
  background: linear-gradient(to bottom, #000f2d 0%, #001c57 50%, #000f2d 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.75rem;
  margin-left: 0;
 transition: color .25s ease, transform .25s ease, opacity .25s ease;
}

.logo img {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/*------  CONTENIDO PRINCIPAL  ------*/
main {
  margin-top: calc(var(--topheader-height) + var(--main-header-height));
  transition: margin-top 0.3s ease;
  min-height: 50vh;
}

body.header-collapsed main {
  margin-top: var(--main-header-height);
}

/*------  MENÚ DESKTOP  ------*/
.desktop-menu {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
  position: relative;
}

.desktop-menu > li {
  position: static;
  list-style: none;
}

.desktop-menu > li > a {
  color: var(--primary-color);
  text-decoration: none;
    padding: 14px 10px;
      font-size: 0.95rem;
  letter-spacing: 0.3px;
  position: relative;
  display: block;
  white-space: nowrap;
  transition: color var(--transition-speed);
  font-weight: 500;
}

.desktop-menu > li > a::after {
  content: "";
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--secondary-color);
  transition: width .28s cubic-bezier(.4,0,.2,1);
}

.desktop-menu > li:hover > a::after,
.desktop-menu > li.active > a::after,
.desktop-menu > li.active-parent > a::after {
  width: 100%;
}

.desktop-menu > li > a:hover::after,
.desktop-menu > li.active > a::after {
  width: 100%;
}

.desktop-menu > li > a::before {
  content: "\e8c8";
  font-family: "Fontello";
  font-size: 14px;
  color: var(--text-color);
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform var(--transition-speed);
}

.desktop-menu > li > a:hover::before {
  transform: translateY(-50%) rotate(96deg);
}

/*------  SUBMENÚS DESKTOP  ------*/
.submenu-container {
  position: absolute;
  left: 0;
  right: 0;
  display: none;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-speed);
  z-index: var(--header-zindex);
}

.desktop-menu > li:hover .submenu-container {
  display: flex;
  opacity: 1;
}

.submenu-wrapper {
  position: relative;
  left: 45%;
  transform: translateX(-45%);
  min-width: 1085px;
  padding: 0;
  box-sizing: border-box;
}

.submenu-content {
  background-color: var(--bg-light);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
 border-top: 3px solid var(--secondary-color);
  padding: 20px;
  margin-top: 19px; /* separacion de submenu*/
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
   border-bottom-left-radius: 12px;  /* ← esquinba inferior izquierda*/
  border-bottom-right-radius: 12px; /* ← esquina inferior derecha */
}

.submenu-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.submenu-column li a {
    color: #1F2A37;
  font-weight: 400;
  letter-spacing: 0.2px;
  position: relative;
  text-decoration: none;
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition-speed);
  font-size: 0.9rem;
}

.submenu-column li a::before {
  content: "\e8c8";
  font-family: "fontello";
  font-size: 1em;
  display: inline-block;
color: var(--secondary-color);
  transition: transform var(--transition-speed);
}

.submenu-column li a:hover {
  color: var(--secondary-color);
   background-color: transparent;
 padding-left: 0;
}

.submenu-column li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 0;
  height: 1px;
  background: var(--secondary-color);
  transition: width .25s ease;
}

.submenu-column li a:hover::after {
  width: 100%;
}

.submenu-column li a:hover::before {
  transform: translateX(4px);
  color: var(--secondary-color);
}

/*------  BOTÓN MENÚ MÓVIL  ------*/
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #000000;
  padding: 5px 10px;
  transition: transform var(--transition-speed);
  z-index: calc(var(--menu-zindex) + 1);
}

.mobile-menu-btn:hover {
  transform: scale(1.1);
}

/*------  MENÚ MÓVIL - ESTRUCTURA  ------*/
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 80%;
  max-width: 300px;
  height: 100vh;
  background-color: var(--menu-bg);
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
  z-index: var(--menu-zindex);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
  visibility: hidden;
  will-change: transform;
}

.mobile-menu.active {
  transform: translateX(0);
  visibility: visible;
}

.mobile-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-menu > ul > li {
  position: relative;
}

/*------  ELEMENTOS DEL MENÚ MÓVIL  ------*/
.mobile-menu li a {
  display: block;
  padding: 15px 20px;
 color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 159, 76, 0.2);
  transition: background-color var(--transition-speed);
}

.mobile-menu li a:hover {
  background-color: var(--primary-light);
}

.mobile-menu .has-submenu > a::after {
  content: "+";
  position: absolute;
  right: 20px;
  font-size: 18px;
  transition: transform var(--transition-speed);
}

.mobile-menu .has-submenu.active > a::after {
  content: "-";
}

.mobile-menu .submenu {
  background-color: var(--submenu-bg);
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-speed) ease-out;
}

.mobile-menu > ul > li > a,
.mobile-menu > ul > li > .menu-toggle {
  color: #ffffff;
  font-weight: 500;
}

.mobile-menu .submenu li a {
 color: #E0E7FF;
  padding-left: 30px;
  font-size: 0.9rem;
}

.mobile-menu .submenu li a:hover {
  background-color: var(--secondary-color);
  color: var(--white);
}

.mobile-menu .submenu.active {
  max-height: 1200px;
}

/*------  SUBMENÚS MÓVILES (CONTROLES)  ------*/
.mobile-menu .has-submenu > .menu-toggle,
.mobile-menu .has-submenu > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  color: #fff;
  font-size: 16px;
  padding: 12px 16px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}

.mobile-menu .has-submenu > .menu-toggle::after,
.mobile-menu .has-submenu > a::after {
  content: '+';
  margin-left: auto;
  color: var(--secondary-color);
  font-weight: bold;
  font-size: 18px;
}

.mobile-menu .has-submenu.active > .menu-toggle::after,
.mobile-menu .has-submenu.active > a::after {
  content: '–';
}

.mobile-menu .submenu {
  display: none;
  padding-left: 5px;
  background-color: var(--submenu-bg);
}

.mobile-menu .submenu.active {
  display: block;
}

.mobile-menu .submenu li {
  padding: 0;
  margin: 0;
  font-size: 15px;
  color: #eee;
}

/*------  OPCIONES EXTRA DEL MENÚ MÓVIL  ------*/
.extra-options {
  border-top: 1px solid #445a85;
  margin-top: 2rem;
  padding-top: 1.5rem;
  text-align: center;
  color: #ccc;
  font-size: 1rem;
}

.extra-options p {
  margin-bottom: 1.5rem;
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 1px;
  color: #aaa;
}

.extra-options a {
  display: block;
  margin: 0.7rem 0;
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  font-size: 1rem;
}

.extra-options img {
  margin-right: 0.4rem;
  vertical-align: middle;
}

/*------  BOTONES ESPECIALES (PDF, BANDERA)  ------*/
.extra-hover-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.2rem;
  margin: 0.5rem auto;
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  border: 1px solid transparent;
  background-color: transparent;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
  width: fit-content;
  max-width: 100%;
}

.extra-hover-btn img {
  width: 20px;
  height: auto;
  margin-right: 8px;
  vertical-align: middle;
}

.extra-hover-btn span {
  display: inline-block;
}

.extra-hover-btn:hover {
    background-color: var(--secondary-color);
  color: var(--white);
  border-color: var(--secondary-color);
}

.extra-hover-btn:hover img {
  filter: brightness(0.8);
}

.hnz-icon-pdf {
   color: var(--secondary-color);
  font-size: 1.1rem;
  margin-right: 8px;
}
.extra-hover-btn:hover .hnz-icon-pdf {
  color: var(--white);
}
.centered-btn {
  display: flex;
  justify-content: center;
}

/*------  OVERLAY DEL MENÚ MÓVIL  ------*/
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(4px);
  background-color: rgba(10, 26, 58, 0.35);
  z-index: var(--overlay-zindex);
  opacity: 0;
  transition: opacity var(--transition-speed);
  pointer-events: none;
  backdrop-filter: blur(2px);
}

.menu-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/*------  ANIMACIONES  ------*/
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.top-header.animate {
  animation: fadeInDown 0.3s ease-out forwards;
}

/*------  ACCESIBILIDAD  ------*/
.desktop-menu > li > a,
.mobile-menu li a {
  outline: none;
}

.desktop-menu > li > a:focus-visible,
.submenu-column li a:focus-visible,
.mobile-menu li a:focus-visible {
  outline: 2px solid var(--secondary-color);
  outline-offset: 3px;
  border-radius: 2px;
}

:focus-visible {
  outline: 2px solid var(--secondary-color);
  outline-offset: 3px;
}

[aria-current="page"] {
   color: var(--secondary-color) !important;
  font-weight: 600;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
}

.mobile-menu[aria-hidden="true"] {
  display: none;
}

/*------  ESTADOS ACTIVOS PARA EL MENÚ  ------*/
.desktop-menu > li.active > a,
.desktop-menu > li.active-parent > a {
    color: var(--secondary-color) !important;
    font-weight: 600;
}

.desktop-menu > li.active > a::after,
.desktop-menu > li.active-parent > a::after {
    width: 100%;
    background-color: var(--secondary-color) !important;
}

.desktop-menu > li.active > a::before,
.desktop-menu > li.active-parent > a::before {
    color: var(--secondary-color) !important;
}

.submenu-column li a.active {
    color: var(--secondary-color) !important;
    background-color: rgba(200, 159, 76, 0.1);
    padding-left: 5px;
    border-radius: 4px;
}

.submenu-column li a.active::before {
    color: var(--secondary-color) !important;
    transform: translateX(4px);
}

.mobile-menu li a.active {
    color: var(--secondary-color) !important;
    background-color: rgba(200, 159, 76, 0.2);
    border-left: 4px solid var(--secondary-color);
}

.mobile-menu .has-submenu.active-parent > a,
.mobile-menu .has-submenu.active-parent > .menu-toggle {
    color: var(--secondary-color) !important;
}

.mobile-menu .submenu li a.active {
    color: var(--secondary-color) !important;
    background-color: rgba(200, 159, 76, 0.15);
}

.category-title {
  font-weight: 600;
  padding: 6px 0 10px 0;
  color: #0A1A3A;
  font-size: 0.95rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 6px;
}

/*------  MEDIA QUERIES - DISEÑO RESPONSIVO  ------*/

/* Punto de quiebre para menú móvil (≤1242px) */
@media (max-width: 1242px) {
  #mobileMenuBtn {
    display: block;
  }

  .desktop-menu {
    display: none;
  }
 
  #mobileMenu {
    position: fixed;
    top: 0;
    right: 0;
    width: 80%;
    height: 100vh;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1001;
  }

  #mobileMenu.active {
    transform: translateX(0);
  }

  #menuOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000;
  }

  #menuOverlay.active {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Tablet (≤994px) - Ocultar top-header */
@media (max-width: 994px) {
  .top-header {
    display: none;
    height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
  }
  
  body.has-top-header {
    padding-top: 0 !important;
  }
  
  .main-header {
    top: 0 !important;
  }
  
  .mobile-menu-btn {
    display: block;
  }
}

/* Móviles pequeños (≤768px) - Ajustar top-header */
@media (max-width: 768px) {
  .top-header-container {
    padding: 0.5rem 15px;
  }
  
  .top-header-contacts,
  .top-header-links {
    gap: 0.7rem;
  }
  
  .top-header a {
    font-size: 0.8rem;
  }
}

/*------  COMPATIBILIDAD CON OTROS COMPONENTES  ------*/
.mobile-menu {
  z-index: 1002;
}

.mobile-menu.active {
  transform: translateX(0);
}

.main-content {
  padding-top: calc(var(--header-height) + 20px);
}

/*------  AJUSTES ESPECÍFICOS PARA EL LOGO EN MÓVILES  ------*/

/* Ajustes solo para móviles - solución CSS-only */
@media (max-width: 992px) {
    .logo-header-container {
        width: 250px;
        height: 85px;
        padding: 0.4rem 0.9rem;
    }
    
    .logo img {
        max-width: 250px;
        max-height: 85px;
    }
}

@media (max-width: 768px) {
    .logo-header-container {
        width: 220px;
        height: 75px;
        padding: 0.3rem 0.8rem;
    }
    
    .logo img {
        max-width: 220px;
        max-height: 75px;
    }
    
    .header-content {
        padding: 5px 0;
    }
}

@media (max-width: 480px) {
    .logo-header-container {
        width: 180px;
        height: 65px;
        padding: 0.2rem 0.6rem;
    }
    
    .logo img {
        max-width: 180px;
        max-height: 65px;
    }
}

/* Asegurar que el logo siempre sea visible y no se superponga */
@media (max-width: 768px) {
    .header-content {
        justify-content: space-between;
        padding: 0 10px;
    }
    
    .mobile-menu-btn {
        margin-left: auto;
    }
}

/*------  CAMBIOS ESPECÍFICOS PARA MÓVIL - DEGRADADO Y BOTÓN BLANCO  ------*/

/* Desktop grande (≥1200px) - Medidas originales */
@media (min-width: 1200px) {
  .logo-header-container {
    width: 290px;
    height: 98px;
    padding: 0.5rem 1rem;
  }
  
  .logo img {
    max-width: 100%;
    max-height: 100%;
  }
}

/* En desktop (>992px) - mantener diseño original */
@media (min-width: 993px) {
    .main-header {
        background-color: white;
    }
    
    .logo-header-container {
       width: 260px;
    height: 88px;
    padding: 0.45rem 0.9rem;
        background: linear-gradient(to bottom, #000f2d 0%, #001c57 50%, #000f2d 100%);
    }
    
    .mobile-menu-btn {
        color: #000000;
    }
}

/* En móvil/tablet (≤992px) - aplicar cambios */
@media (max-width: 992px) {
    .main-header {
        background: linear-gradient(to bottom, #000f2d 0%, #001c57 50%, #000f2d 100%) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }
    
    .logo-header-container {
           width: 220px;
    height: 74px;
    padding: 0.4rem 0.75rem;
    background: transparent !important;
    }
    
    .mobile-menu-btn {
        color: white !important;
    }
    
    .mobile-menu-btn .menu-icon {
        color: white;
    }
    
    .logo img {
      max-width: 220px;
    max-height: 74px;
    }
}

/* Ajustes para móviles más pequeños */
@media (max-width: 768px) {
   .logo-header-container {
    width: 200px;
    height: 68px;
    padding: 0.35rem 0.7rem;
  }
  
  .logo img {
    max-width: 200px;
    max-height: 68px;
  }
}

/* Móviles grandes (≤576px) */
@media (max-width: 576px) {
  .logo-header-container {
    width: 180px;
    height: 61px;
    padding: 0.3rem 0.6rem;
  }
  
  .logo img {
    max-width: 180px;
    max-height: 61px;
  }
}

@media (max-width: 480px) {
  .logo-header-container {
    width: 160px;
    height: 54px;
    padding: 0.25rem 0.5rem;
  }
  
  .logo img {
    max-width: 160px;
    max-height: 54px;
  }
}

/*------  WPO HEADER STABILITY  ------*/
.main-header,
.top-header {
  contain: layout style;
}

.logo-header-container {
  contain: layout paint;
}

.submenu-content {
  will-change: opacity, transform;
}

/*======================= FOOOTER ================================*/





body {
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

/* --- FOOTER PRINCIPAL --- */
.mi-footer {
   background: var(--footer-bg) url('/assets/images/footer/mundi.webp') no-repeat  center;
  color: var(--footer-text);
  padding: 40px 20px 20px 20px;
  position: relative;
  overflow: hidden;
}

.mi-footer-contenedor {
  max-width: 1200px;
  margin: 0 auto 30px auto;
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1fr 1.6fr;
  gap: 30px;
  align-items: start;
}

/* --- BLOQUE DE IMAGEN/LOGO --- */
.mi-footer-imagen {
  position: relative;
  margin-bottom: 20px;
  display: none;
}

.mi-footer-imagen img {
  display: none;
}

.overlay-texto {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
  padding: 10px;
}

.overlay-texto img {
  display: block !important;
  max-width: 150px;
  margin-bottom: 8px;
}

.slogan-footer {
  font-size: 14px;
  font-weight: 600;
  color: #f0f0f0;
}

/* --- COLUMNAS GENERALES --- */
.mi-footer-columna,
.mi-footer-niubiz {
  padding: 0;
  min-width: 0;
}

.mi-footer-columna h3,
.mi-footer-niubiz h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 20px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--footer-border);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--footer-text);
}

/* --- ENLACES DE INTERÉS --- */
.mi-footer-enlaces {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mi-footer-enlaces li {
  margin: 0 0 12px 0;
}

.mi-footer-enlaces li a {
  color: var(--footer-text-muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color 0.2s ease;
  font-size: 0.95rem;
}

.mi-footer-enlaces li a i {
  width: 16px;
  text-align: center;
  color: var(--footer-accent);
}

.mi-footer-enlaces li a:hover {
  color: var(--footer-link-hover);
}

/* --- COLUMNA DE CONTACTO Y HORARIO --- */
.mi-footer-columna p {
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--footer-text-muted);
  font-size: 0.95rem;
}

.mi-footer-columna p i {
  width: 16px;
  text-align: center;
  color: var(--footer-accent);
}

.mi-footer-columna a {
  color: var(--footer-text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.mi-footer-columna a:hover {
  color: var(--footer-link-hover);
}

/* --- ICONOS DE REDES SOCIALES --- */
.mi-footer-iconos {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.mi-footer-iconos a {
  font-size: 1.2rem;
  color: var(--footer-text-muted);
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-flex;
  padding: 0;
}

.mi-footer-iconos a:hover {
  color: var(--footer-accent);
  transform: translateY(-2px);
}

/* --- SECCIÓN "FORMAS DE PAGO" --- */
.mi-footer-niubiz {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  padding: 24px 20px;
  margin: 10px 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.mi-footer-niubiz:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.mi-footer-niubiz h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #000000;
  margin-bottom: 18px;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  letter-spacing: 0.5px;
}

/* --- LOGOS DE PAGO - ESCRITORIO --- */
.payment-logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 20px 0;
  width: 100%;
}

.payment-logos img {
  width: 100%;
  height: auto;
  background-color: #ffffff;
  padding: 6px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
  aspect-ratio: 16/10;
  object-fit: contain;
  border: 1px solid rgba(0, 0, 0, 0.03);
  box-sizing: border-box;
}

.payment-logos img:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: rgba(4, 32, 87, 0.1);
}

/* --- BOTÓN DE PAGO --- */
.footer-button {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

.footer-button a {
  background: linear-gradient(135deg, #FFC107 0%, #FF9800 100%);
  color: #042057 !important;
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.25);
  border: none;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
  text-align: center;
}

.footer-button a:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(255, 193, 7, 0.35);
  background: linear-gradient(135deg, #FFB300 0%, #F57C00 100%);
  color: #021538 !important;
}

/* --- PIE DE PÁGINA INFERIOR --- */
.mi-footer-final {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 20px;
  border-top: 1px solid var(--footer-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  color: var(--footer-text-muted);
  font-size: 0.9rem;
}

.footer-text {
  margin: 0;
  color: var(--footer-text-muted);
  white-space: nowrap;
}

.mi-footer-legal {
  margin: 0;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.mi-footer-legal a {
  color: var(--footer-text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
  font-size: 0.85rem;
}

.mi-footer-legal a:hover {
  color: var(--footer-accent);
  text-decoration: underline;
}

.mi-footer-linea {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  width: 90%;
  margin: 0 auto 10px auto;
}

/* --- WHATSAPP FLOTANTE --- */
.whatsapp-fixed {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #25D366;
  color: white;
  padding: 12px;
  border-radius: 50%;
  font-size: 22px;
  z-index: 1000;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
  transition: background 0.3s;
}

.whatsapp-fixed:hover {
  background-color: #128C7E;
}

/* --- RESPONSIVE --- */
@media screen and (max-width: 900px) {
  .mi-footer-contenedor {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
}

@media screen and (max-width: 768px) {
  .mi-footer {
    padding: 30px 15px 15px 15px;
  }

  .mi-footer-contenedor {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .mi-footer-imagen {
    display: block;
    width: 100%;
    background-color: var(--footer-bg);
    min-height: 120px;
    border-radius: 8px;
    margin-bottom: 10px;
    position: relative; /* Asegurar posición para el overlay */
  }

    /* La imagen de la fachada DEBE mostrarse en móvil */
  .mi-footer-imagen img {
    display: block !important; /* Forzar que se muestre */
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    filter: brightness(0.6);
    border-radius: 8px;
  }
   .overlay-texto img {
    display: block !important;
    max-width: 180px;
    filter: brightness(1); /* El logo sin oscurecer */
  }

  .mi-footer-columna,
  .mi-footer-niubiz {
    text-align: center;
    width: 100%;
    padding: 0;
  }

  .mi-footer-columna h3,
  .mi-footer-niubiz h3 {
    text-align: center;
  }

  .mi-footer-enlaces li a,
  .mi-footer-columna p {
    justify-content: center;
  }

  .mi-footer-iconos {
    justify-content: center;
  }

  /* --- SECCIÓN DE PAGOS EN MÓVIL - IMÁGENES AL 50% --- */
  .mi-footer-niubiz {
    padding: 20px 15px;
    margin: 8px 0 25px 0;
    width: 100%;
    box-sizing: border-box;
  }
  
  .mi-footer-niubiz h3 {
    font-size: 1.2rem;
    color: #000000;
    margin-bottom: 15px;
    padding-bottom: 8px;
  }
  
  .payment-logos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin: 10px 0;
    width: 100%;
  }
  
  .payment-logos img {
    width: 50%;
    padding: 2px;
    aspect-ratio: 16/10;
    box-sizing: border-box;
    margin: 0 auto;
  }
  
  .footer-button {
    margin: 10px 0 5px 0;
    width: 100%;
  }
  
  .footer-button a {
    padding: 10px 15px;
    font-size: 0.9rem;
    max-width: 250px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .mi-footer-final {
    flex-direction: column;
    text-align: center;
    gap: 10px;
    margin-top: 20px;
  }
  
  .footer-text {
    white-space: normal;
  }
  
  .mi-footer-legal {
    justify-content: center;
    gap: 8px;
  }
  
  .mi-footer-legal a {
    white-space: normal;
    font-size: 0.8rem;
  }
}

@media screen and (max-width: 480px) {
  .payment-logos {
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    max-width: 250px;
    margin: 10px auto;
  }
  
  .payment-logos img {
    width: 50%;
    padding: 2px;
    aspect-ratio: 16/10;
    box-sizing: border-box;
    margin: 0 auto;
  }
  
  .mi-footer-niubiz h3 {
    font-size: 1.1rem;
    color: #000000;
  }
  
  .footer-button a {
    max-width: 220px;
    padding: 8px 12px;
    font-size: 0.85rem;
  }
  
  .overlay-texto img {
    max-width: 150px;
  }
  
  .mi-footer-legal {
    flex-direction: column;
    gap: 5px;
  }
  
  .mi-footer-legal a {
    font-size: 0.75rem;
  }
}

/*=========== WHASAP FLOTANTE===================*/
.float{position:fixed;width:60px;height:60px;bottom:30px;right:30px;background-color:#25d366;color:#000;border-radius:50px;text-align:center;font-size:40px;box-shadow:2px 2px 3px #999;z-index:100}.float:hover{text-decoration:none;color:#fff;background-color:#000}.my-float{margin-top:16px}




/* ============================================
   BANNER DE SERVICIOS (compartido)
   ============================================ */
.hz-banner-servicios {
  position: relative;
  background-color: #1663ac;
  overflow: hidden;
  text-align: center;
  padding: 60px 20px 40px;
}

.hz-banner-fondo {
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/hexagon-trama.webp');
  background-repeat: repeat;
  background-size: auto;
  opacity: 1;
  z-index: 1;
}

.hz-banner-contenido {
  position: relative;
  z-index: 2;
}

.hz-banner-texto {
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 500;
  margin: 0;
}