/* ==========================================================================
   1. RESET BÁSICO Y VARIABLES GLOBALES
   ========================================================================== */
:root {
    --amarillo-subsco: #febc07;
    --negro: #000000;
    --gris-fondo: #f8f9fa;
    --texto-oscuro: #1e293b;
    --texto-mutado: #64748b;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: #000000; 
    color: #ffffff;
    line-height: 1.6;
    overflow-x: hidden;
}

/* ==========================================================================
   2. CONTROL TIPOGRÁFICO GLOBAL (MONTSERRAT INDESTRUCTIBLE)
   ========================================================================== */
html, body, div, span, p, a, li, strong, b, em, button, input, select, textarea, .btn, [class*="btn-"] {
    font-family: 'Montserrat', sans-serif !important;
}

/* Fuerza Montserrat en todos los encabezados del sitio */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif !important;
}

/* 🎯 UNIFICACIÓN DE TODOS LOS TÍTULOS DEL SITIO (Idénticos a image_d33c7b.png) */
.brochure-intro h1,
.resumen-texto h2,
#valores-corporativos .valores-titulo,
.cobertura-intro h1,
.hero-overlay-content h1,
.servicios-header .titulo {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important; /* Peso extra-bold uniforme */
    letter-spacing: -0.5px;
    line-height: 1.2;
}

strong, b {
    font-weight: 700;
}

/* ==========================================================================
   3. BARRA DE NAVEGACIÓN (NAVBAR)
   ========================================================================== */
.navbar {
    background-color: #161616; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 1.5rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.nav-logo img {
    height: 70px;       
    width: auto;        
    display: block;     
    transition: transform 0.3s ease;
}

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

.nav-links {
    list-style: none; 
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav-links a {
    text-decoration: none; 
    color: #ffffff;
    font-weight: 500;
    font-size: 1.05rem;
    padding: 0.5rem 0;
    position: relative; 
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: var(--amarillo-subsco); 
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--amarillo-subsco);
    transform: scaleX(0);
    transform-origin: bottom left;
    transition: transform 0.3s ease-in-out;
}

.nav-links a:hover::after {
    transform: scaleX(1);
}

.menu-toggle {
    display: none;
}

.nav-links li a.active-page {
    color: var(--amarillo-subsco) !important;
    font-weight: 700 !important;
}

.nav-links li a.active-page::after {
    transform: scaleX(1) !important; 
}

/* ── DROPDOWN SERVICIOS ── */
.nav-dropdown {
    position: relative;
}

.dropdown-toggle {
    cursor: pointer;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: #ffffff;
    min-width: 260px;
    list-style: none;
    padding: 8px 0;
    margin: 0;
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
    z-index: 999;
    overflow: hidden;
}

.dropdown-menu li a {
    display: block;
    padding: 13px 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #111111;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.dropdown-menu li a:hover {
    background: #febc07;
    color: #111111;
}

/* Solo aplica el hover en dispositivos que SÍ tienen mouse real (desktop) */
@media (hover: hover) and (pointer: fine) {
    .nav-dropdown:hover .dropdown-menu {
        display: block;
        animation: fadeDown 0.18s ease;
    }
}

/* En cualquier dispositivo (móvil o desktop), .active siempre manda */
.nav-dropdown.active .dropdown-menu {
    display: block;
    animation: fadeDown 0.18s ease;
}

@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Opcional: en móvil que se vea como acordeón en vez de flotante */
@media (max-width: 768px) {
    .dropdown-menu {
        position: static;
        box-shadow: none;
        border-radius: 0;
        min-width: 100%;
        padding-left: 12px;
    }
}
/* Responsive Navbar */
@media (max-width: 768px) {
    .navbar {
        padding: 0.9rem 1rem;
    }

    .nav-logo img {
        height: 56px;
    }

    .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 25px;
        height: 18px;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 101;
    }

    .menu-toggle span {
        display: block;
        width: 100%;
        height: 3px;
        background-color: var(--amarillo-subsco); 
        border-radius: 3px;
        transition: all 0.3s ease;
    }

    .nav-links {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%; 
        left: 0;
        width: 100%;
        background-color: #2c2c2c; 
        padding: 1.2rem 0 1.4rem;
        gap: 0.7rem;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-10px);
        transition: all 0.4s ease;
    }

    .nav-links.active {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .nav-links li {
        text-align: center;
        width: 100%;
    }

    .nav-dropdown {
        width: 100%;
    }

    .dropdown-menu {
        display: none;
        position: static;
        box-shadow: none;
        border-radius: 0;
        border-left: 3px solid #febc07;
        margin: 0.3rem auto 0;
        min-width: unset;
        width: calc(100% - 1.3rem);
        background: rgba(255,255,255,0.08);
    }

    .dropdown-menu li a {
        color: #ffffff;
        font-size: 0.92rem;
        padding: 0.7rem 1rem;
        text-align: left;
    }

    .nav-dropdown.active .dropdown-menu {
        display: block;
    }

    .menu-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
    .menu-toggle.open span:nth-child(2) { opacity: 0; }
    .menu-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
}

/* ==========================================================================
   4. PÁGINA DE INICIO (HERO VIDEO, MISIÓN/VISIÓN Y RESUMEN)
   ========================================================================== */
/* ==========================================================================
   4. PÁGINA DE INICIO (HERO VIDEO, MISIÓN/VISIÓN Y RESUMEN)
   ========================================================================== */
.hero-video-container {
    position: relative;
    width: 100%;
    min-height: 85vh; 
    padding: 10px 0; 
    background-color: #000000; 
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%; /* ajusta el % para mostrar más arriba o abajo */
    z-index: 1;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65); 
    z-index: 2;
}

.hero-content {
    position: relative; 
    z-index: 10;        
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero-logo-img {
    max-width: 200px;  
    width: 100%;       
    height: auto;      
    margin-bottom: 1.5rem;
    filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.8)); 
}

.hero-subtitle {
    font-size: 1.3rem;
    color: var(--amarillo-subsco); 
    font-weight: 500;
    margin-bottom: 2.5rem; 
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.hero-btn {
    display: inline-block;
    text-decoration: none;
    background-color: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
    padding: 0.8rem 2.2rem;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 4px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px; 
}

.hero-btn:hover {
    background-color: var(--amarillo-subsco);
    color: #000000;
    border-color: var(--amarillo-subsco);
    transform: translateY(-2px); 
    box-shadow: 0 4px 15px rgba(247, 243, 56, 0.3); 
}

/* ==========================================================================
   ANIMACIONES DE APARICIÓN (scroll reveal)
   Requieren una línea de JS para activar la clase ".in-view" cuando el
   elemento entra en pantalla. Ver snippet al final de este archivo.
   Si no se agrega el JS, los elementos igual se ven (opacity:1 por defecto
   gracias al fallback @supports/no-js de abajo), simplemente sin animar.
   ========================================================================== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Slide "grande" (desktop): fotos y textos entran desde bien afuera */
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-120px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(120px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Slide "chico" (mobile): mismo efecto, menor distancia para no generar
   scroll horizontal en pantallas angostas */
@keyframes slideInLeftSm {
    from { opacity: 0; transform: translateX(-45px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRightSm {
    from { opacity: 0; transform: translateX(45px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Estado inicial (oculto) — se anima al recibir .in-view vía JS.
   Ahora las FOTOS (.mv-caja-foto) también entran animadas desde los lados,
   igual que los bloques de texto. */
.bloque-mv,
.mv-caja-foto,
.valor-card,
.tarjeta-servicio {
    opacity: 0;
}

/* Duraciones más lentas (antes 0.6–0.7s, ahora ~1.1–1.3s) para que la
   aparición se sienta más suave y pausada, tanto en mobile como en desktop */
.bloque-mv.in-view:nth-child(1),
.mv-caja-foto.in-view:nth-child(1) { animation: slideInLeft 1.2s ease forwards; }
.bloque-mv.in-view:nth-child(2),
.mv-caja-foto.in-view:nth-child(2) { animation: slideInRight 1.2s ease forwards; }

/* Las fotos entran un pelín después que el texto para dar sensación de
   secuencia en vez de que todo se mueva a la vez */
.mv-caja-foto.in-view { animation-delay: 0.15s; }

.valor-card.in-view { animation: fadeInUp 3.75s ease forwards; }
.valor-card:nth-child(1).in-view { animation-delay: 0.26s; }
.valor-card:nth-child(2).in-view { animation-delay: 0.32s; }
.valor-card:nth-child(3).in-view { animation-delay: 0.54s; }
.valor-card:nth-child(4).in-view { animation-delay: 0.66s; }
.valor-card:nth-child(5).in-view { animation-delay: 0.88s; }
.valor-card:nth-child(6).in-view { animation-delay: 1.1s; }

.tarjeta-servicio.in-view { animation: fadeInUp 1s ease forwards; }

/* Si JS no llega a correr por algún motivo, no dejamos el contenido invisible
   para siempre: después de 3s se muestra igual (red de seguridad) */
.bloque-mv, .mv-caja-foto, .valor-card, .tarjeta-servicio {
    animation: fadeIn 0.01s 3s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
    .bloque-mv, .mv-caja-foto, .valor-card, .tarjeta-servicio {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }
}

/* Misión y Visión */
.seccion-mision-vision {
    background-color: var(--amarillo-subsco);
    padding: 60px 20px;
    overflow-x: hidden;
}

.contenedor-mv {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column; 
    gap: 40px;
}

.mv-fila-imagenes {
    display: flex;
    flex-direction: row;
    gap: 20px;
    width: 100%;
}

.mv-caja-foto {
    flex: 1 1 0;
    min-width: 0;
}
.mv-caja-foto img {
    width: 100%;
    height: 280px;      
    object-fit: cover;
    border-radius: 0 !important; 
    display: block;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

.mv-fila-textos {
    display: flex;
    flex-direction: row; 
    gap: 50px;
    flex-wrap: nowrap;
}

.bloque-mv {
    flex: 1 1 0;
    min-width: 0;
}
.bloque-mv h3 {
    font-size: 1.4rem;
    color: var(--negro);
    margin-top: 0;
    margin-bottom: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.bloque-mv p {
    color: #2d3748;
    line-height: 1.6;
    font-size: 1rem;
}

/* Resumen Intermedio */
.seccion-resumen {
    background-color: #ffffff;
    padding: 90px 20px;
}

.contenedor-resumen {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: nowrap;
}

.resumen-texto {
    flex: 1 1 0;
    min-width: 0;
}
.subtitulo-amarillo {
    color: var(--amarillo-subsco);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.85rem;
    display: block;
    margin-bottom: 10px;
}

.resumen-texto p {
    color: var(--texto-mutado);
    line-height: 1.7;
    font-size: 1rem;
    margin-bottom: 30px;
}

.btn-negro {
    display: inline-block;
    background-color: var(--negro);
    color: #ffffff;
    padding: 12px 28px;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    border-radius: 0 !important; 
    transition: background-color 0.3s;
}

.resumen-foto-marco {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    padding-left: 20px;
    padding-bottom: 20px;
}

.resumen-foto-marco::before {
    content: '';
    position: absolute;
    width: 90%;
    height: 90%;
    background-color: var(--amarillo-subsco);
    left: 0;
    bottom: 0;
    z-index: 1;
    border-radius: 0 !important; 
}

.resumen-foto {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
    display: block;
    border-radius: 0 !important; 
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* Breakpoint intermedio (tablet, 769px–1024px): antes no existía y
   provocaba que las filas se apretaran y el texto pareciera "caerse"
   respecto a la imagen. Ahora bajamos gaps y dejamos que respire. */
@media (max-width: 1024px) and (min-width: 769px) {
    .contenedor-mv { gap: 30px; }
    .mv-fila-textos { gap: 30px; }
    .contenedor-resumen { gap: 36px; }
}

@media (max-width: 768px) {
    .hero-video-container { min-height: 72svh; padding: 40px 0; }
    .hero-content { padding: 0 1rem; }
    .hero-logo-img { max-width: 240px; margin-bottom: 1rem; }
    .hero-subtitle { font-size: 0.95rem; margin-bottom: 1.35rem; }
    .hero-btn { width: 100%; max-width: 320px; padding: 0.8rem 1rem; }
    .seccion-mision-vision { padding: 48px 18px; }
    .seccion-resumen { padding: 56px 18px; }
    .mv-fila-textos, .mv-fila-imagenes, .contenedor-resumen { flex-direction: column; gap: 24px; }
    .resumen-foto-marco { padding-left: 0; padding-bottom: 0; }
    .resumen-foto-marco::before { width: 100%; height: 100%; }
    /* En mobile se mantiene la MISMA animación de lados que en desktop,
       solo se reduce la distancia de desplazamiento para que no fuerce
       scroll horizontal en pantallas angostas. */
    .bloque-mv.in-view:nth-child(1),
    .mv-caja-foto.in-view:nth-child(1) { animation-name: slideInLeftSm; }
    .bloque-mv.in-view:nth-child(2),
    .mv-caja-foto.in-view:nth-child(2) { animation-name: slideInRightSm; }
    #valores-corporativos { padding: 56px 18px 72px; gap: 28px; }
    .aliados { padding: 48px 18px 64px; }
    .aliados-slide img { height: 72px; width: 120px; }
    .main-contacto, .main-servicios { padding: 56px 18px; }
    .servicios-header { margin-bottom: 32px; }
    .servicios-header .titulo { font-size: 2.1rem; }
    .tarjeta-servicio { min-height: 250px; padding: 24px 20px; }
    .contenido-tarjeta { padding-right: 0; }
    .servicios-icon-box { width: 140px; height: 136px; bottom: -18px; right: -24px; }
    .footer-corporativo { padding: 18px 18px 12px; }
}

@media (max-width: 380px) {
    .hero-logo-img { max-width: 190px; }
    .hero-subtitle { font-size: 0.85rem; }
    .valores-titulo { font-size: 1.6rem; }
    .aliados-titulo { font-size: 1.4rem; }
}

/* ==========================================================================
   5. SECCIÓN DE VALORES EMPRESARIALES (DONA INTERACTIVA)
   ========================================================================== */
#valores-corporativos {
    min-height: 100vh;
    padding: 80px 40px 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
    background: #ffffff;
}

.valores-encabezado { text-align: center; max-width: 560px; order: -1; }
.valores-escena { order: 2; }
.valores-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--amarillo-subsco);
    margin-bottom: 16px;
}

.valores-titulo {
    color: #000000;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    width: 100%;
}
.valores-subtitulo { font-size: 15px; line-height: 1.7; color: #000000; }

.valores-escena {
    position: relative;
    width: 100%;
    max-width: 860px;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.valor-info {
    position: absolute;
    width: 175px;
    font-size: 13px;
    line-height: 1.65;
    color: #000000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.valor-info.activo { opacity: 1; pointer-events: auto; }
.valor-info strong {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--amarillo-subsco);
    margin-bottom: 6px;
}

#info-1 { top: 30px;    right: 0; text-align: left;  }
#info-2 { top: 50%;     right: 0; transform: translateY(-50%); text-align: left;  }
#info-3 { bottom: 30px; right: 0; text-align: left;  }
#info-4 { bottom: 30px; left: 0;  text-align: right; }
#info-5 { top: 50%;     left: 0;  transform: translateY(-50%); text-align: right; }
#info-6 { top: 30px;    left: 0;  text-align: right; }

.circulo-svg-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 480px;
    height: 480px;
}

.circulo-svg-wrap svg { width: 100%; height: 100%; overflow: visible; }
.rebanada { cursor: pointer; transition: filter 0.2s ease; transform-box: fill-box; transform-origin: center; }
.rebanada:hover { filter: brightness(1.18); }

.label-rebanada {
    pointer-events: none;
    font-size: 11px;
    font-weight: 700;
    fill: rgba(255,255,255,0.97);
    letter-spacing: 0.4px;
    text-anchor: middle;
    dominant-baseline: middle;
}

.icono-rebanada {
    pointer-events: none;
    stroke: rgba(255,255,255,0.92);
    stroke-width: 1.5;
    fill: none;
}

.circulo-centro-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 148px;
    height: 148px;
    background: #F7F6F2;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 24px rgba(0,0,0,0.13);
    z-index: 20;
    pointer-events: none;
}

.centro-numero { font-size: 46px; font-weight: 900; color: #1C1C1C; line-height: 1; }
.centro-label { font-size: 10px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: #888; margin-top: 2px; }
.centro-empresa { font-size: 8px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #c49002; margin-top: 4px; }

.valores-mobile { display: none; order: 2; }
.valor-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}

.valor-card-texto strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #111;
    margin-bottom: 4px;
}

.valor-card-texto p { font-size: 13px; line-height: 1.6; color: #555; }

@media (max-width: 900px) and (min-width: 769px) {
    .valores-escena { height: 420px; }
    .circulo-svg-wrap { width: 380px; height: 380px; }
    .circulo-centro-wrap { width: 110px; height: 110px; }
    .valor-info { width: 140px; font-size: 12px; }
}

@media (max-width: 768px) {
    #valores-corporativos { padding: 60px 24px 80px; gap: 40px; }
    .circulo-svg-wrap,
    .circulo-centro-wrap,
    .valor-info,
    .label-rebanada,
    .icono-rebanada,
    .rebanada,
    .centro-numero,
    .centro-label,
    .centro-empresa {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    .valores-mobile { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 420px; }
    .valores-escena {
        height: auto;
        min-height: 0;
        display: block;
    }
    .aliados { padding: 78px 18px 60px; }
    .aliados-titulo {
        margin: 0 0 28px;
        line-height: 1.08;
        font-size: clamp(1.45rem, 6.2vw, 1.9rem);
        padding-top: 8px;
    }
}

/* ==========================================================================
   SECCIÓN ALIADOS — carrusel infinito fondo blanco
   ========================================================================== */

.aliados {
    background-color: #ffffff;
    padding: 60px 50px 80px;
    overflow: hidden;
    width: 100%;
    /* Se fuerza flex + order para que el título SIEMPRE quede primero
       (arriba de las tarjetas), sin importar el orden en que aparezca
       en el HTML. Este es el arreglo del bug "título debajo de las tarjetas". */
    display: flex;
    flex-direction: column;
}
 
/* Título sección aliados */
.aliados-titulo {
    order: -1;
    text-align: center;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: clamp(1.6rem, 2.5vw, 2.4rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #111111;
    margin: 40px 0 48px;
}

.aliados-titulo span {
    color: #febc07;
}

/* Máscara que difumina los bordes izquierdo y derecho
   para que no se note el corte del bucle */
.aliados-track-wrap {
    order: 2;
    width: 100%;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #ffffff 12%,
        #ffffff 88%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        #ffffff 12%,
        #ffffff 88%,
        transparent 100%
    );
}

/* Track que se mueve solo con CSS puro — sin JS */
.aliados-track {
    display: flex;
    align-items: center;
    gap: 32px;
    width: max-content;
    animation: aliados-scroll 35s linear infinite;
}

/* Pausa al pasar el mouse */
.aliados-track:hover {
    animation-play-state: paused;
}

@keyframes aliados-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* -50% porque el track está duplicado */
}

/* Cada logo */
.aliados-slide {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border-radius: 6px;
    padding: 12px 16px;
    transition: background 0.3s ease;
}

.aliados-slide:hover {
    background: #eeeeee;
}

.aliados-slide img {
    height: 90px;
    width: 150px;
    object-fit: contain;
    display: block;
     opacity: 0.75;
    transition: filter 0.3s ease, opacity 0.3s ease;
}
@media (max-width: 768px) {

    /* Logos de clientes: caja más grande y forzamos que se vean completos */
    .aliados-slide {
        width: 130px;
        height: 92px;
        padding: 10px 14px;
    }

    .aliados-slide img {
        width: 100%;
        height: 100%;
        object-fit: contain !important;
    }

    /* Tarjetas de valores: que se vean como tarjeta real, no texto suelto */
    .valor-card {
        border-radius: 10px;
        margin: 0 4px;
    }
}

.aliados-slide img:hover {
    filter: grayscale(0%) brightness(1) contrast(1);
    opacity: 1;
}

/* ==========================================================================
   JS OPCIONAL PARA ACTIVAR LAS ANIMACIONES AL HACER SCROLL
   Pega esto antes de </body>, en un <script> o archivo .js aparte:

   const revealEls = document.querySelectorAll('.bloque-mv, .mv-caja-foto, .valor-card, .tarjeta-servicio');
   const observer = new IntersectionObserver((entries) => {
     entries.forEach(entry => {
       if (entry.isIntersecting) {
         entry.target.classList.add('in-view');
         observer.unobserve(entry.target);
       }
     });
   }, { threshold: 0.2 });
   revealEls.forEach(el => observer.observe(el));

   Sin este JS, el contenido igual aparece (por la red de seguridad de
   arriba), solo que sin la animación de entrada al hacer scroll.
   ========================================================================== */
/* ==========================================================================
   6. SUBPÁGINA: COBERTURA (MAPA INTERACTIVO)
   ========================================================================== */
/* ==========================================================================
   SECCIÓN COBERTURA
   ========================================================================== */

.seccion-cobertura {
    background-color: #000000;
    padding: 80px 4% 100px;
    font-family: 'Montserrat', Arial, sans-serif;
    color: #ffffff;
    width: 100%;
    box-sizing: border-box;
}

.cobertura-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 70px;
}

/* ==========================================================================
   FILA SUPERIOR: CARRUSEL — texto izquierda + foto cuadrada derecha
   Reaprovechamos .carrusel-wrapper para esto
   ========================================================================== */

.carrusel-wrapper {
    width: 100%;
    position: static;
    left: auto;
    transform: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    padding-bottom: 0;
    margin-top: 40px;   /* 👈 aquí, en la regla original de arriba */
}

/* Texto izquierdo */
.carrusel-titulo {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.1;
    color: #ffffff;
    margin: 0 0 16px;
    text-align: left;
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 55%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Subtexto debajo del título del carrusel */
.carrusel-subtexto {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.75;
    margin: 0;
    font-weight: 400;
    max-width: 400px;
}

/* Lista de puntos debajo del subtexto */
.carrusel-lista {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.carrusel-lista li {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
    padding-left: 18px;
    position: relative;
    line-height: 1.5;
}

.carrusel-lista li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 7px;
    height: 7px;
    background: #febc07;
    border-radius: 50%;
}

/* Columna izquierda del carrusel (título + texto) */
.carrusel-col-texto {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Foto cuadrada derecha — recorte exacto */
.carrusel-stage {
    width: 100%;
    aspect-ratio: 1 / 1;        /* cuadrado perfecto */
    overflow: hidden;
    border-radius: 0;
    position: relative;
    height: auto;
    display: block;
    background-color: #febc07;   /* fondo amarillo visible entre transiciones */
}

.carrusel-track-3d {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: max-content;
    will-change: transform;
    transition: transform 0.9s cubic-bezier(0.77, 0, 0.175, 1);
    height: 100%;
}

.slide-3d {
    flex: 0 0 100%;           /* cada slide ocupa exactamente el cuadrado */
    width: 100%;
    height: 100%;
    border-radius: 0;
    overflow: hidden;
    cursor: default;
    box-shadow: none;
    min-width: 0;
}

/* Hack: como el track usa width:max-content los slides necesitan
   un ancho concreto — se lo damos via JS, pero el aspect-ratio
   lo maneja el stage. Aquí forzamos imagen a llenar el slide */
.slide-3d img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    pointer-events: none;
    transform: scale(0.82);
    transform-origin: center center;
    transition: transform 0.9s ease;
}

.slide-3d.activo img {
    transform: scale(0.86);
}

/* Ocultar flechas y dots — auto-scroll sin controles */
.carrusel-nav {
    display: none !important;
}

/* ==========================================================================
   FILA INFERIOR: MAPA IZQUIERDA — INFO DERECHA
   ========================================================================== */

.cobertura-top {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items: center;
}

.mapa-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    order: 1;
}

.mapa-container svg {
    width: 100%;
    height: auto;
    max-height: 560px;
    display: block;
    filter: drop-shadow(0 10px 36px rgba(240, 188, 80, 0.10));
}

.mapa-container svg path {
    cursor: pointer;
    fill: #252525;
    stroke: #111111;
    stroke-width: 0.7px;
    transition: fill 0.18s ease, filter 0.18s ease, stroke 0.18s ease;
}

.amarillo-1 { fill: #E8A020 !important; }
.amarillo-2 { fill: #C8780A !important; }
.amarillo-3 { fill: #F0BC50 !important; }
.amarillo-4 { fill: #D4900C !important; }

.activo-hover {
    filter: brightness(1.4) !important;
    stroke: #ffffff !important;
    stroke-width: 1.8px !important;
}

#tooltip-mapa { display: none !important; }

/* ==========================================================================
   COLUMNA DERECHA: TÍTULO + STATS + CARD DEP
   ========================================================================== */

.cobertura-info {
    display: flex;
    flex-direction: column;
    gap: 28px;
    order: 2;
}

.cobertura-info h2 {
    font-size: clamp(1.8rem, 2.8vw, 2.6rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.1;
    margin: 0;
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 55%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cobertura-info > p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.75;
    margin: -12px 0 0;
    font-weight: 400;
}

/* ==========================================================================
   ESTADÍSTICAS — fila horizontal, números sueltos con divisor vertical
   Exactamente como en la imagen: 25+ / 77 / 38K sin cajas
   ========================================================================== */

.cobertura-stats {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-top: 4px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0 28px 0 0;
    margin-right: 28px;
    border-right: 1.5px solid rgba(255, 255, 255, 0.15);
}

.stat-item:last-child {
    border-right: none;
    padding-right: 0;
    margin-right: 0;
}

.stat-numero {
    font-size: 2.4rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.02em;
    line-height: 1;
}

.stat-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.3;
    text-transform: none;
    letter-spacing: 0;
}

/* ==========================================================================
   CARD DEPARTAMENTO ACTIVO
   ========================================================================== */

#info-departamento { width: 100%; }

.departamentos-panel {
    padding: 14px 0;
}

.departamentos-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.departamentos-panel-header h3 {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #f0bc50;
    margin: 0;
}

.departamentos-panel-header span {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.58);
}

.departamentos-lista {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 12px;
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

.departamento-item {
    width: 100%;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: #ffffff;
    text-align: left;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}

.departamento-item:hover,
.departamento-item.activo {
    color: #f0bc50;
    transform: translateX(2px);
}

.departamento-nombre {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {

    /* --- Contenedor general: menos aire arriba/abajo, todo más compacto --- */
    .seccion-cobertura {
        padding: 48px 5% 64px;
    }

    .cobertura-container {
        gap: 40px;
    }

    /* --- Carrusel: apilado, imagen primero, texto después --- */
    .carrusel-wrapper {
        width: 100%;
        position: static;
        left: auto;
        transform: none;
        display: grid;
        grid-template-columns: 1fr;   /* 👈 antes era 1fr 1fr, así se apila */
        gap: 32px;                     /* 👈 antes 56px, más compacto en móvil */
        align-items: center;
        padding-bottom: 0;
        margin-top: 40px;
    }

    .carrusel-col-texto {
        order: 2;
        text-align: center;
        align-items: center;
    }

    .carrusel-stage {
        order: 1;
        aspect-ratio: 16 / 11;
        border-radius: 18px;
        box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
    }

    .carrusel-titulo,
    .carrusel-subtexto {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .carrusel-lista {
        align-items: flex-start;
        text-align: left;
        margin: 20px auto 0;
        max-width: 320px;
    }

    /* --- Fila mapa + info: el mapa manda, todo lo demás debajo --- */
    .cobertura-top {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Mapa más grande, simple, sin luces ni fondos raros */
    .mapa-container {
        order: 1;
        width: 100%;
        max-width: 560px;
        margin: 0 auto 32px;
        height: 340px;          /* ← nuevo: le da un alto fijo al contenedor */
        overflow: hidden; 
    }

    .mapa-container svg {
        max-height: none;        /* ← quita el max-height anterior */
        height: 100%;
        width: 100%;
        transform: scale(1.6);   /* ← el zoom real que agranda el mapa */
        transform-origin: center center;
    }

    .cobertura-info {
        order: 2;
        align-items: center;
        text-align: center;
        gap: 26px;
    }

    /* --- Estadísticas: misma idea del original (números + rayita), solo centradas --- */
    .cobertura-stats {
        justify-content: center;
        flex-wrap: nowrap;
        width: 100%;
        gap: 0;
    }

    .stat-item {
        flex: 1 1 0;
        align-items: center;
        padding: 0 18px;
        margin: 0;
    }

    .stat-numero {
        font-size: 1.9rem;
    }

    .stat-label {
        text-align: center;
        font-size: 0.7rem;
    }

    /* --- Municipios: tabla real, con líneas de fila y columna --- */
    #info-departamento {
        text-align: left;
        width: 100%;
    }

    .departamentos-panel-header {
        padding-bottom: 8px;
        border-bottom: 2px solid rgba(240, 188, 80, 0.4);
    }

    .departamentos-lista {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 4px;
        max-height: 340px;
        overflow-y: auto;
    }

    .departamento-item {
        padding: 10px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        border-right: 1px solid rgba(255, 255, 255, 0.12);
    }

    /* quita el borde derecho de la última columna de cada fila */
    .departamento-item:nth-child(2n) {
        border-right: none;
    }

    .departamento-item:nth-child(4n+1),
    .departamento-item:nth-child(4n+2) {
        background: rgba(255, 255, 255, 0.03);
    }

    .departamento-item:hover,
    .departamento-item.activo {
        background: rgba(240, 188, 80, 0.12);
        transform: none;
    }

    .departamento-nombre {
        font-size: 0.85rem;
    }
}

@media (max-width: 600px) {

    .seccion-cobertura {
        padding: 40px 5% 56px;
    }

    .carrusel-stage {
        aspect-ratio: 4 / 3;
        border-radius: 14px;
    }

    .mapa-container svg {
        max-height: 380px;
    }

    /* Tabla de municipios pasa a una sola columna en pantallas chicas */
    .departamentos-lista {
        grid-template-columns: 1fr;
        max-height: 300px;
    }

    .departamento-item {
        border-right: none;
    }

    .departamento-item:nth-child(4n+1),
    .departamento-item:nth-child(4n+2) {
        background: transparent;
    }

    .departamento-item:nth-child(even) {
        background: rgba(255, 255, 255, 0.03);
    }

    .cobertura-stats {
        gap: 0;
    }

    .stat-item {
        padding: 0 10px;
    }

    .stat-numero {
        font-size: 1.6rem;
    }
}
/* ==========================================================================
   7. SUBPÁGINA: BROCHURE CORPORATIVO
   ========================================================================== */
/* ==========================================================================
   7. SUBPÁGINA: BROCHURE CORPORATIVO (RESPONSIVE)
   ========================================================================== */
.brochure-container {
    max-width: 1300px;
    margin: 60px auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1.1fr 1.9fr; 
    gap: 60px;
    align-items: center;
    background-color: #000000;
}

.brochure-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.brochure-tag {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--amarillo-subsco);
    font-weight: 700;
    margin-bottom: 12px;
}

.brochure-desc {
    font-size: 1rem;
    color: #a6a6a6;
    line-height: 1.6;
    margin-bottom: 40px;
}

.brochure-desc strong { 
    color: var(--amarillo-subsco); 
}

.brochure-index {
    width: 100%;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.index-item {
    border-left: 2px solid var(--amarillo-subsco); 
    padding-left: 16px;
}

.index-item strong {
    display: block;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.index-item p { 
    color: #888888; 
    font-size: 0.85rem; 
}

.btn-download {
    display: inline-block;
    background-color: var(--amarillo-subsco);
    color: #000000;
    text-decoration: none;
    padding: 14px 36px;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    border-radius: 0; 
}

.btn-download:hover {
    background-color: #ffffff;
    color: #000000;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(254, 188, 7, 0.15);
}

.pdf-viewer-container { 
    width: 100%; 
}

.pdf-frame-wrapper {
    background: #141414;
    padding: 12px;
    border-radius: 0; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,0.05);
}

.pdf-embed { 
    width: 100%; 
    height: 650px; 
    display: block; 
    border: none; 
}

/* ==========================================================================
   BROCHURE MOBILE ADAPTATION
   ========================================================================== */
@media (max-width: 1024px) {
    .brochure-container { 
        grid-template-columns: 1fr; /* Colapsa las dos columnas a una sola */
        gap: 40px; 
        padding: 0 24px; 
    }
    
    .brochure-intro {
        align-items: center; /* Centra el contenido en móviles */
        text-align: center;
    }
    
    .index-item {
        border-left: none;
        border-bottom: 1px solid rgba(254, 188, 7, 0.2); /* Cambia línea lateral por borde inferior en celulares */
        padding-left: 0;
        padding-bottom: 12px;
    }
    
    .btn-download {
        width: 100%;
        max-width: 320px; /* Botón ancho y cómodo para celulares */
        text-align: center;
    }

    .pdf-embed { 
        height: 500px; 
    }
}

@media (max-width: 480px) {
    .pdf-embed { 
        height: 400px; 
    }
}
/* ==========================================================================
   8. SUBPÁGINA: CONTACTO (HERO UNIFICADO CON LOS OTROS TÍTULOS)
   ========================================================================== */
/* ==========================================================================
   11. SUBPÁGINA: CONTACTO (CARDS FIJAS - SIN BORDER RADIUS)
   ========================================================================== */
.main-contacto {
    padding: 60px 4%;
    background-color: #000000; 
    box-sizing: border-box;
}

.contacto-header {
    text-align: center;
    margin-bottom: 50px;
}

.contacto-header .contacto-subtitulo {
    color: #ffcc00; 
    font-size: 0.85rem;
    letter-spacing: 2px;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}

.contacto-header .contacto-titulo {
    color: #ffffff;
    font-size: clamp(2rem, 3.5vw, 3.2rem);
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.08;
    margin: 0;
}

/* Rejilla Fija para las Tarjetas Superiores */
.contacto-cards-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas fijas en escritorio */
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 60px auto;
}

.contacto-info-card {
    background-color: #dddada;
    border: 1px solid #464141;
    padding: 40px 30px;
    text-align: center;
    border-radius: 0 !important; /* Esquinas 100% rectas, sin radius */
}


.contacto-icon {
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Estilo específico para el icono vectorial */
.contacto-icon i {
    font-size: 2.5rem;          /* Tamaño del icono */
    color: #ffcc00;             /* Tu amarillo de marca */
    transition: color 0.3s ease; /* Transición suave por si quieres que cambie al hacer hover */
}

/* Opcional: Si quieres que el icono brille o cambie a blanco cuando pasas el cursor sobre la tarjeta entera */
.contacto-info-card:hover .contacto-icon i {
    color: #ffffff;
}

.contacto-info-card h3 {
    color: #000000;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contacto-info-card p {
    color: #000000;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

/* Contenedor Inferior Fijo de Dos Columnas */
.contacto-detalles-grid {
    display: grid;
    grid-template-columns: 1.2fr 1.8fr; 
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}

/* Contenedor del Mapa Fijo y Recto */
.contacto-mapa-wrapper {
    width: 100%;
    background: #1a1a1a;
    padding: 12px;
    border: 1px solid #2c2c2c;
    border-radius: 0 !important; /* Sin radius */
    box-sizing: border-box;
}

.contacto-mapa {
    width: 100%;
    height: 450px;
    border: none;
    border-radius: 0 !important; /* Sin radius */
    display: block;
    filter: grayscale(1) invert(0.9) contrast(1.2); 
}

/* Lado Derecho: Información de Atención */
.contacto-atencion-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.atencion-tag {
    color: #ffcc00;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    margin-bottom: 10px;
}

.contacto-atencion-info h2 {
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 20px 0;
}

.atencion-desc {
    color: #a6a6a6;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 35px 0;
}

.atencion-horarios {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.horario-item {
    border-left: 2px solid #ffcc00; 
    padding-left: 16px;
}

.horario-item strong {
    display: block;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.horario-item p {
    color: #888888;
    font-size: 0.9rem;
    margin: 4px 0;
}

/* ==========================================================================
   ADAPTACIÓN RESPONSIVA SE SEGURIDAD (MÓVILES Y TABLETS)
   ========================================================================== */
@media (max-width: 1024px) {
    .contacto-cards-container {
        grid-template-columns: 1fr; /* Pasa a 1 columna apilada fija sólo si es móvil */
        gap: 20px;
    }
    
    .contacto-detalles-grid {
        grid-template-columns: 1fr; 
        gap: 40px;
    }
    
    .contacto-atencion-info {
        align-items: center;
        text-align: center;
    }
    
    .contacto-header .contacto-titulo {
        font-size: 2.2rem;
    }
    
    .contacto-atencion-info h2 {
        font-size: 2rem;
    }
    
    .contacto-mapa-wrapper {
        position: relative;
        overflow: hidden;
    }

    .contacto-mapa {
        height: 350px; 
        pointer-events: auto;
        touch-action: manipulation;
    }
}

@media (max-width: 640px) {
    .contacto-mapa {
        height: 290px;
    }

    .contacto-map-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-top: 10px;
        padding: 10px 14px;
        background: #ffcc00;
        color: #000000;
        text-decoration: none;
        font-size: 0.9rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .contacto-info-card {
        padding: 24px 18px;
    }
}
/* Botón Flotante WhatsApp */
.whatsapp-flotante {
    position: fixed; bottom: 25px; right: 25px; background-color: #25D366; color: white; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); z-index: 9999; transition: transform 0.3s ease, background-color 0.3s ease;
}
.whatsapp-flotante:hover { background-color: #059605; transform: scale(1.1); }
.whatsapp-flotante i {
    font-size: 32px;
    color: #ffffff;
}
.whatsapp-flotante svg {
    display: block;
}

.whatsapp-flotante::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
    animation: whatsapp-pulso 2s infinite;
}

@keyframes whatsapp-pulso {
    0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); }
    70%  { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

@media (max-width: 768px) {
    .whatsapp-flotante {
        width: 52px;
        height: 52px;
        bottom: 18px;
        right: 18px;
    }
    .whatsapp-flotante svg {
        width: 28px;
        height: 28px;
    }
}

/* ==========================================================================
   10. FOOTER CORPORATIVO GLOBAL
   ========================================================================== */
.footer-corporativo {
    background-color: #000000; color: #ffffff; padding: 15px 40px 10px 40px; width: 100%;
}

.footer-contenido {
    max-width: 1200px; margin: 0 auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 15px; padding-bottom: 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.footer-columna:nth-child(1) { flex: 1.5; min-width: 280px; display: flex; flex-direction: column; align-items: flex-start; }
.footer-logo-img { max-width: 110px; margin-bottom: 8px; height: auto; display: block; }
.footer-descripcion { font-size: 0.95rem; line-height: 1.6; color: #94a3b8; max-width: 340px; }

.footer-columna:nth-child(2), .footer-columna:nth-child(3) { flex: 1; min-width: 160px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.footer-columna:nth-child(4) { flex: 1; min-width: 200px; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }

.footer-columna h3 { font-weight: 700; font-size: 0.85rem; margin-bottom: 8px; color: var(--amarillo-subsco); text-transform: uppercase; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 4px; }
.footer-links a { color: #cbd5e1; text-decoration: none; font-size: 0.95rem; transition: all 0.3s ease; }
.footer-links a:hover { color: #ffffff; transform: translateY(-2px); }

.footer-redes-columna { display: flex; flex-direction: column; gap: 6px; width: fit-content; }
.red-item { display: flex; align-items: center; justify-content: flex-end; gap: 12px; color: #cbd5e1; text-decoration: none; font-size: 0.95rem; transition: all 0.3s ease; }
.red-item:hover { color: var(--amarillo-subsco); transform: translateX(-5px); }

.footer-inferior { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding-top: 20px; 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-between; 
    align-items: center; 
    font-size: 0.85rem; 
    color: #64748b; 
}

.credito-dev a { 
    color: #94a3b8; 
    text-decoration: none; 
    font-weight: 600; 
}
.credito-dev a:hover { 
    color: var(--amarillo-subsco); 
}

@media (max-width: 768px) {
    .footer-contenido { flex-direction: column; text-align: center; }
    .footer-columna:nth-child(1), .footer-columna:nth-child(2), .footer-columna:nth-child(3), .footer-columna:nth-child(4) { align-items: center; text-align: center; }
    .red-item { justify-content: center; }
  }





























/*obras*/

/*obras*/

/* ============================================================
   OVINCO — Página Obras
   Paleta: grafito profundo + señal cian (fibra/telecom) + ámbar
   No incluye estilos de .navbar / .nav-* ni .footer-*
   ============================================================ */

:root{
  --ov-bg:            #000000;
  --ov-bg-panel:      #ffcc00;
  --ov-bg-panel-soft: #ffcc00;
  --ov-signal:        #ffcc00;
  --ov-signal-soft:   #ffcc00;
  --ov-amber:         #F2A93B;
  --ov-text:          #EAF3F4;
  --ov-text-muted:    #A6A6A6;
  --ov-line:          rgba(0, 0, 0, 0.08);
  --ov-radius-md:     18px;
  --ov-ease:          cubic-bezier(.22,1,.36,1);
}

/* ---------- Base de la sección ---------- */
.seccion-obras{
  background:
    radial-gradient(120% 60% at 50% 0%, #131414 0%, var(--ov-bg) 55%),
    var(--ov-bg);
  font-family: 'Montserrat', sans-serif;
  color: var(--ov-text);
  padding: 72px 6vw 100px;
  min-height: 100vh;
  overflow-x: hidden; /* red de seguridad: las animaciones laterales no deben generar scroll horizontal */
}

.obras-intro{
  max-width: 760px;
  margin: 0 auto 22px;
  text-align: center;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--ov-text-muted);
}

/* ============================================================
   ANIMACIONES DE APARICIÓN
   El panel de obra y la galería usan animación al montarse/cambiar
   (igual que ya tenía .obra-panel con ov-fade-up), solo que ahora:
   - la foto entra desde la izquierda
   - el texto/specs entra desde la derecha
   - la galería aparece en cascada, un poco más lenta
   Como el contenido se reemplaza por JS al cambiar de filtro, la
   animación se dispara sola cada vez que el navegador vuelve a
   insertar/pintar estos elementos — no hace falta scroll ni JS extra.
   ============================================================ */
@keyframes ov-slide-left{
  from{ opacity: 0; transform: translateX(-90px); }
  to{ opacity: 1; transform: translateX(0); }
}
@keyframes ov-slide-right{
  from{ opacity: 0; transform: translateX(90px); }
  to{ opacity: 1; transform: translateX(0); }
}
@keyframes ov-slide-left-sm{
  from{ opacity: 0; transform: translateX(-36px); }
  to{ opacity: 1; transform: translateX(0); }
}
@keyframes ov-slide-right-sm{
  from{ opacity: 0; transform: translateX(36px); }
  to{ opacity: 1; transform: translateX(0); }
}
@keyframes ov-fade-up{
  from{ opacity: 0; transform: translateY(24px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* ---------- Barra flotante tipo "buscador" ---------- */
.obras-filter-nav{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  max-width: 92%;
  margin: 10px auto 42px;
  padding: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.45);
}

.filter-item{
  position: relative;
  padding: 12px 26px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ov-text-muted);
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: color .3s var(--ov-ease), background .3s var(--ov-ease);
}

.filter-item:hover{
  color: var(--ov-text);
}

.filter-item.is-active{
  color: var(--ov-bg);
  background: var(--ov-signal);

}

/* ---------- Panel de información de la obra activa ---------- */
.obra-panel{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto 56px;
}

.obra-hero-img{
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ov-bg-panel);
  animation: ov-slide-left 1.2s var(--ov-ease);
}

.obra-hero-img img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.02);
}

.obra-panel-info{
  text-align: left;
  animation: ov-slide-right 1.2s var(--ov-ease);
}

.obra-panel-tag{
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ov-signal);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.obra-panel-title{
  margin: 0 0 16px;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.obra-panel-desc{
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ov-text-muted);
  margin: 0 0 26px;
  max-width: 46ch;
}

.obra-panel-specs{
  list-style: none;
  margin: 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--ov-line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.obra-panel-specs li{
  position: relative;
  padding-left: 20px;
  font-size: 0.88rem;
  color: var(--ov-text);
  line-height: 1.4;
}

.obra-panel-specs li::before{
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--ov-amber);
}

/* ---------- Galería: solo dos imágenes bien centradas ---------- */
.obra-gallery{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  max-width: 1180px; /* antes 860px: con 3 imágenes no alcanzaba y la 3ra se caía a otra fila */
  margin: 0 auto;
}

.gallery-item{
  display: block;
  flex: 1 1 280px;   /* permite que las 3 quepan en una fila y se repartan el espacio */
  max-width: 360px;  /* pero nunca crecen más de esto en pantallas grandes */
  overflow: hidden;
  background: var(--ov-bg-panel);
  border-radius: 14px;
  animation: ov-fade-up 1.2s var(--ov-ease) both;
}


.gallery-item:nth-child(1){ animation-delay: 0.15s; }
.gallery-item:nth-child(2){ animation-delay: 0.35s; }
.gallery-item:nth-child(3){ animation-delay: 0.55s; }
.gallery-item:nth-child(4){ animation-delay: 0.75s; }

.gallery-item img{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ==========================================================================
   OBRASFLOW — Carrusel horizontal infinito (namespaced, no choca con nada)
   ========================================================================== */

.obrasflow-titulo {
    margin: 48px 0 0; /* baja la sección de proyectos respecto al carrusel/panel anterior */
    padding: 0;
    color: #ffffff;
    text-align: left;
    font-size: 3rem; /* antes 2.3rem, título más grande */
    font-weight: 800;
    line-height: 1.2;
}
.obrasflow-destacado {
    margin: 0 0 24px;
    padding: 0;
    color: #F0BC50;
    text-align: left;
    font-size: 0.60rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.obrasflow-wrapper {
    all: revert;
    background-color: #000000;
    border-radius: 8px;
    padding: 80px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow: hidden; /* red de seguridad extra contra scroll horizontal del contenedor padre */
}

.obrasflow-wrapper * {
    box-sizing: border-box;
}

.obrasflow-stage {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;

    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}

.obrasflow-track {
    display: flex;
    gap: 16px;
    width: max-content;
    will-change: transform;
    margin: 0;
    padding: 0;
    list-style: none;
}

.obrasflow-slide {
    flex: 0 0 auto;
    width: 320px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
    margin: 0;
    padding: 0;
}

.obrasflow-slide img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    pointer-events: none;
    margin: 0;
    max-width: none;
}

/* ---------- Accesibilidad / movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  .obra-panel,
  .obra-hero-img,
  .obra-panel-info,
  .gallery-item,
  .gallery-item img,
  .filter-item{
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   RESPONSIVE — cascada única de breakpoints para toda la sección
   980px  → tablet grande / panel pasa a una sola columna
   768px  → tablet chica / carrusel obrasflow reduce padding y slide
   640px  → móvil / filtros pasan a carrusel con scroll
   380px  → móvil chico / ajustes finos para que nada desborde
   ============================================================ */

@media (max-width: 980px){
  .obra-panel{
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: center;
  }
  .obra-panel-info{ text-align: center; }
  .obra-panel-desc{ margin-left: auto; margin-right: auto; }
  .obra-panel-specs{ align-items: center; }
  .obra-panel-specs li{ padding-left: 0; }
  .obra-panel-specs li::before{ display: none; }
  /* En una sola columna, el slide lateral se ve raro con recorridos tan
     largos: se mantiene el mismo efecto de lados pero con una distancia
     más corta, para que no choque contra el borde de la pantalla */
  .obra-hero-img{ animation-name: ov-slide-left-sm; }
  .obra-panel-info{ animation-name: ov-slide-right-sm; }

  .obrasflow-wrapper{ padding: 56px 40px; }
}

@media (max-width: 768px){
  .obrasflow-titulo{ font-size: 2.3rem; }
  .obrasflow-wrapper{ padding: 40px 28px; gap: 20px; }
  .obrasflow-slide{ width: 280px; }
  .obrasflow-slide img{ height: 190px; }
}

@media (max-width: 640px){
  .seccion-obras{ padding: 54px 5vw 80px; }
  .obras-intro{ font-size: 0.92rem; margin-bottom: 16px; }

  /* ---------- FIX mini-navbar de filtros en mobile ----------
     Antes usaba flex-wrap + calc(50% - 8px), lo que en cuanto había
     más de 2-3 filtros o textos de distinto largo, generaba filas
     desparejas y la píldora se veía rota/desordenada.
     Ahora se convierte en un carrusel horizontal con scroll (como
     los tabs de apps mobile), manteniendo la forma de píldora,
     sin wrap, y con un degradado en los bordes que insinúa que se
     puede deslizar. */
  .obras-filter-nav{
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;         /* Firefox */
    -ms-overflow-style: none;      /* IE/Edge viejo */
    padding: 7px 14px;
    border-radius: 999px;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      #000 8%,
      #000 92%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      #000 8%,
      #000 92%,
      transparent 100%
    );
  }
  .obras-filter-nav::-webkit-scrollbar{ display: none; } /* Chrome/Safari */

  .filter-item{
    flex: 0 0 auto;               /* ya no se encoge ni se reparte en columnas */
    padding: 10px 18px;
    font-size: 0.7rem;
    scroll-snap-align: center;
  }

  .obra-panel{ margin-bottom: 32px; }
  .obra-gallery{
    gap: 12px;
  }
  .gallery-item{ border-radius: 10px; flex: 1 1 100%; max-width: 320px; }

  .obrasflow-titulo{ font-size: 1.8rem; }
  .obrasflow-wrapper{ padding: 24px; gap: 16px; }
  .obrasflow-track{ gap: 10px; }
  .obrasflow-slide{ width: 240px; }
  .obrasflow-slide img{ height: 160px; }
}

@media (max-width: 380px){
  .seccion-obras{ padding: 44px 4vw 64px; }

  .obra-panel-title{ font-size: 1.6rem; }
  .obra-panel-desc{ font-size: 0.92rem; max-width: 100%; }

  .filter-item{ padding: 9px 14px; font-size: 0.66rem; }

  .obrasflow-wrapper{ padding: 18px; }
  .obrasflow-titulo{ font-size: 1.5rem; }
  .obrasflow-destacado{ margin-bottom: 16px; }
  .obrasflow-slide{ width: 200px; }
  .obrasflow-slide img{ height: 135px; }
}