/* ========================================================= */
/* ================= VARIABLES GLOBALES ==================== */
/* ========================================================= */
:root {
    --bg-oscuro: #111111; 
    --bg-tarjetas: #1a1a1a;
    --bg-seccion-alt: #161616;
    --verde-fsg: #128c4b; 
    --verde-brillo: #1ab05f;
    --texto-blanco: #ffffff;
    --texto-gris: #aaaaaa;
    --borde-sutil: #333333;
}

/* ================= MODO CLARO (LIGHT MODE) ================= */
body.light-mode {
    --bg-oscuro: #f4f7f6;
    --bg-tarjetas: #ffffff;
    --bg-seccion-alt: #e9ecef;
    --texto-blanco: #222222;
    --texto-gris: #555555;
    --borde-sutil: #d1d1d1;
}

/* 1. MAGIA DEL SCROLL EN MODO CLARO */
body.light-mode header.scrolled {
    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-bottom: none;
}
body.light-mode footer {
    background: #ffffff; 
    border-top: 3px solid var(--verde-fsg);
}

/* 2. Quitar el degradado oscuro del hero en modo claro */
body.light-mode .hero-overlay {
    background: transparent !important;
}

body.light-mode .hero-contenido h1, 
body.light-mode .hero-contenido p {
    color: #ffffff !important;
    text-shadow: 2px 4px 15px rgba(0, 0, 0, 0.9) !important;
}

body.light-mode .cifra-item,
body.light-mode .cifra-item h3,
body.light-mode .cifra-item p {
    color: #ffffff !important;
}

/* 4. LOGOS Y MENÚ EN MODO CLARO */
body.light-mode header.scrolled .nav-logo img,
body.light-mode .footer-logo,
body.light-mode .logo-supertransporte {
    filter: brightness(0); 
}

body.light-mode header.scrolled nav a {
    color: #222222;
    font-weight: 700;
}
body.light-mode header.scrolled .btn-tema {
    color: #222222;
    border-color: #d1d1d1;
}

/* Arreglo contraste del menú arriba en modo claro */
body.light-mode header:not(.scrolled) nav a {
    color: #ffffff !important;
}
body.light-mode header:not(.scrolled) .btn-tema {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

body.light-mode .slide img {
    background: transparent;
    mix-blend-mode: multiply; 
}

/* ================= ESTILO DEL BOTÓN DE TEMA ================= */
.btn-tema {
    background: transparent;
    color: var(--texto-blanco);
    border: 1px solid var(--borde-sutil);
    font-size: 1.2rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-tema:hover {
    color: var(--verde-fsg);
    border-color: var(--verde-fsg);
    transform: rotate(30deg);
}

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

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--bg-oscuro);
    color: var(--texto-blanco);
    line-height: 1.6;
}

h1, h2, h3 { font-weight: 900; text-transform: uppercase; }

/* ========================================================= */
/* ================= 1. HEADER Y NAVEGACIÓN ================ */
/* ========================================================= */
header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 5%; 
    background: transparent; 
    position: fixed; width: 100%; top: 0; z-index: 100;
    border-bottom: 1px solid transparent;
    transition: all 0.4s ease;
}

header.scrolled {
    background: rgba(17, 17, 17, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--borde-sutil);
    padding: 15px 5%; 
}

.nav-logo { display: flex; align-items: center; }
.nav-logo img { height: 70px; width: auto; transition: 0.3s ease; }
.nav-logo img:hover { transform: scale(1.05); }

nav ul { display: flex; gap: 30px; list-style: none; }
nav a { 
    color: var(--texto-blanco); 
    text-decoration: none; 
    font-size: 15px; /* 🔥 Tamaño más grande (antes 13px) */
    font-weight: 600; /* 🔥 Letra un poquito más gruesa para que resalte */
    text-transform: uppercase; 
    letter-spacing: 1px; 
    transition: 0.3s; 
}
nav a:hover { color: var(--verde-brillo); }

.btn-solido {
    background: var(--verde-fsg); color: var(--texto-blanco); border: none;
    padding: 14px 28px; text-decoration: none; font-weight: 700; cursor: pointer;
    text-transform: uppercase; font-size: 13px; letter-spacing: 1px;
    border-radius: 4px; transition: 0.3s; display: inline-block;
}
.btn-solido:hover { background: var(--verde-brillo); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(18, 140, 75, 0.3); }
.w-100 { width: 100%; }

/* ========================================================= */
/* ================= 2. HERO Y CIFRAS ====================== */
/* ========================================================= */
.hero-automotriz {
    height: 100vh; position: relative; display: flex;
    align-items: center; padding: 0 10%; overflow: hidden;
}
.hero-img-fondo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to right, rgba(17,17,17,1) 0%, rgba(17,17,17,0.5) 70%, rgba(17,17,17,0.2) 100%);
    z-index: -1;
}
.hero-contenido { max-width: 700px; z-index: 1; }
.badge-verde {
    background: rgba(18, 140, 75, 0.15); color: var(--verde-brillo);
    padding: 8px 18px; border-radius: 30px; font-size: 12px;
    font-weight: 700; text-transform: uppercase; letter-spacing: 2px;
    border: 1px solid rgba(18, 140, 75, 0.5); margin-bottom: 25px; display: inline-block;
}
.hero-contenido h1 { font-size: 4.5rem; line-height: 1.1; margin-bottom: 20px; }
.hero-contenido h1 span { color: var(--verde-fsg); }
.hero-contenido p { font-size: 1.1rem; color: var(--texto-gris); margin-bottom: 40px; font-weight: 400; max-width: 600px; }

.barra-cifras {
    display: flex; justify-content: space-around; align-items: center;
    background: var(--verde-fsg); padding: 40px 5%; flex-wrap: wrap; gap: 20px;
}
.cifra-item { text-align: center; color: var(--texto-blanco); }
.cifra-item h3 { font-size: 2.8rem; font-weight: 900; margin-bottom: 0; line-height: 1; }
.cifra-item p { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 500; margin-top: 5px; }

/* ========================================================= */
/* ================= 3. FLOTA Y SERVICIOS ================== */
/* ========================================================= */
.seccion-flota { padding: 100px 5%; background: var(--bg-oscuro); }
.titulo-centrado { text-align: center; margin-bottom: 60px; }
.titulo-centrado h2 { font-size: 3rem; }
.titulo-centrado span { color: var(--verde-fsg); }
.titulo-centrado p { color: var(--texto-gris); margin-top: 10px; font-size: 1.1rem; }

.grid-vehiculos {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; 
    max-width: 1100px; margin: 0 auto;
}
.tarjeta-vehiculo {
    background: var(--bg-tarjetas); border-radius: 8px; border: 1px solid var(--borde-sutil);
    overflow: hidden; transition: 0.3s; border-bottom: 4px solid transparent;
    text-decoration: none; display: block; color: var(--texto-blanco); 
}
.tarjeta-vehiculo:hover {
    transform: translateY(-10px); border-bottom: 4px solid var(--verde-fsg);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4); border-color: var(--borde-sutil);
}
.imagen-contenedor { width: 100%; height: 280px; overflow: hidden; background: #222; }
.imagen-contenedor img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.tarjeta-vehiculo:hover .imagen-contenedor img { transform: scale(1.05); }
.info-vehiculo { padding: 30px; }
.info-vehiculo h3 { font-size: 1.3rem; margin-bottom: 10px; letter-spacing: 1px; color: var(--texto-blanco); }
.info-vehiculo p { color: var(--texto-gris); font-size: 0.95rem; }
.btn-ver-mas { display: inline-block; margin-top: 15px; color: var(--verde-brillo); font-size: 0.9rem; font-weight: 700; }

/* ========================================================= */
/* ================= 4. TECNOLOGÍA / MAPA / CLIENTES ======= */
/* ========================================================= */
.seccion-tecnologia { padding: 100px 5%; background: var(--bg-seccion-alt); }
.tec-contenedor { display: flex; gap: 50px; max-width: 1200px; margin: 0 auto; align-items: center; }
.tec-texto { flex: 1; }
.tec-texto h2 { font-size: 3rem; margin-bottom: 20px; line-height: 1.1;}
.tec-texto span { color: var(--verde-fsg); }
.tec-texto p { color: var(--texto-gris); font-size: 1.1rem; margin-bottom: 30px; }
.lista-tec { list-style: none; }
.lista-tec li { margin-bottom: 15px; display: flex; align-items: flex-start; gap: 15px; color: var(--texto-gris); }
.lista-tec i { color: var(--verde-brillo); font-size: 1.2rem; margin-top: 4px; }
.lista-tec strong { color: var(--texto-blanco); }
.tec-imagen { flex: 1; border-radius: 8px; overflow: hidden; position: relative; border: 1px solid var(--borde-sutil); }
.tec-imagen img { width: 100%; height: auto; display: block; object-fit: cover; }

/* Mapa y Sedes */
.seccion-cobertura { padding: 80px 5%; background: var(--bg-oscuro); }
.mapa-contenedor-principal {
    display: flex; max-width: 1200px; margin: 0 auto; height: 500px;
    border-radius: 8px; overflow: hidden; border: 1px solid var(--borde-sutil);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.sidebar-sedes { width: 350px; background: var(--bg-tarjetas); overflow-y: auto; border-right: 1px solid var(--borde-sutil); }
.sede-card { padding: 20px; border-bottom: 1px solid var(--borde-sutil); cursor: pointer; transition: all 0.3s ease; }
.sede-card:hover { background: var(--bg-seccion-alt); }
.sede-card.active { border-left: 4px solid var(--verde-fsg); background: rgba(18, 140, 75, 0.1); }
.sede-card h4 { color: var(--verde-brillo); font-size: 1.1rem; margin-bottom: 8px; }
.sede-card p { color: var(--texto-gris); font-size: 0.85rem; margin-bottom: 5px; display: flex; align-items: center; gap: 8px; }
#mapa-colombia { flex: 1; height: 100%; z-index: 1; }

/* Carrusel Clientes */
.seccion-clientes { padding: 80px 0; background: var(--bg-seccion-alt); border-top: 1px solid var(--borde-sutil); }
.slider-clientes { width: 100%; margin: 0 auto; position: relative; overflow: hidden; padding: 20px 0; }
.slider-clientes::before, .slider-clientes::after { content: ''; position: absolute; top: 0; width: 150px; height: 100%; z-index: 2; }
.slider-clientes::before { left: 0; background: linear-gradient(to right, var(--bg-seccion-alt) 0%, transparent 100%); }
.slider-clientes::after { right: 0; background: linear-gradient(to left, var(--bg-seccion-alt) 0%, transparent 100%); }
.slide-track { display: flex; width: calc(250px * 30); animation: scroll-infinito 40s linear infinite; align-items: center; }
.slider-clientes:hover .slide-track { animation-play-state: paused; }
.slide { width: 250px; padding: 0 15px; display: flex; justify-content: center; align-items: center; }
.slide img { width: 100%; max-width: 180px; height: 100px; object-fit: contain; background: #ffffff; padding: 15px; border-radius: 8px; filter: grayscale(100%); opacity: 0.7; transition: all 0.4s ease; }
.slide img:hover { filter: grayscale(0%); opacity: 1; transform: scale(1.05); box-shadow: 0 5px 15px rgba(18, 140, 75, 0.3); }

/* ========================================================= */
/* ================= 5. CONTACTO Y COTIZACIONES ============ */
/* ========================================================= */
.seccion-contacto-cotizacion {
    padding: 100px 5%;
    background: var(--bg-oscuro);
}

.contacto-contenedor {
    display: flex;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: stretch; /* Asegura que ambas columnas queden del mismo alto */
}

/* Columna de la foto con texto sobrepuesto */
.contacto-info-coti {
    flex: 1;
    background: linear-gradient(to top, rgba(17,17,17,0.95) 0%, rgba(17,17,17,0.3) 60%, rgba(17,17,17,0.1) 100%), url('img/foto-contacto.jpg');
    background-size: cover;
    background-position: center top; 
    padding: 50px 40px;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 580px;
}

.contacto-info-coti h2 {
    font-size: 3.5rem;
    color: #ffffff !important;
    text-transform: none;
    margin-bottom: 15px;
    line-height: 1.1;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
}

.contacto-info-coti h2 span {
    color: var(--verde-fsg);
}

.contacto-info-coti p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1.1rem;
    line-height: 1.6;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.8);
}

/* Formulario Blanco de Cotización */
.contacto-form-blanco {
    flex: 1;
    background: #ffffff;
    padding: 45px 40px;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}

.contacto-form-blanco h3 {
    text-align: center;
    color: #111111;
    font-size: 1.8rem;
    margin-bottom: 25px;
    text-transform: none;
}

.input-fila {
    display: flex;
    gap: 20px;
}

.grupo-radios {
    margin-bottom: 20px;
}

.label-titulo {
    display: block;
    color: #333333;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 10px;
}

.opciones-radio {
    display: flex;
    gap: 20px;
    color: #555555;
    font-size: 0.95rem;
}

.opciones-radio label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* Ajustes Modo Claro Contacto */
body.light-mode .seccion-contacto-cotizacion { background: var(--bg-seccion-alt); }

/* ========================================================= */
/* ================= 6. TRABAJE CON NOSOTROS =============== */
/* ========================================================= */
.hero-trabaje {
    height: 50vh;
    background: linear-gradient(to right, rgba(17,17,17,0.9) 0%, rgba(17,17,17,0.6) 100%), url('img/foto-equipo.jpg') center/cover fixed;
    display: flex; justify-content: center; align-items: center; text-align: center; padding: 0 5%;
}
.breadcrumbs { color: #cccccc; margin-top: 15px; font-size: 0.95rem; }
.breadcrumbs a { color: #cccccc; text-decoration: none; transition: 0.3s; }
.breadcrumbs a:hover { color: var(--verde-fsg); }
.breadcrumbs i { font-size: 0.8rem; margin: 0 10px; }
.breadcrumbs span { color: var(--verde-fsg); font-weight: 700; }

.info-trabaje-seccion { padding: 80px 5%; background: var(--bg-oscuro); }
.grid-trabaje { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; }

.trabaje-img-wrapper { border-radius: 12px; overflow: hidden; border: 1px solid var(--borde-sutil); box-shadow: 0 15px 30px rgba(0,0,0,0.3); }
.img-trabaje-real { width: 100%; height: 100%; min-height: 400px; object-fit: cover; display: block; transition: transform 0.5s ease; }
.trabaje-img-wrapper:hover .img-trabaje-real { transform: scale(1.05); }

.subtitulo-verde { color: var(--verde-fsg); font-size: 1rem; text-transform: uppercase; margin-bottom: 15px; font-weight: 700; letter-spacing: 1px; }
.trabaje-texto-wrapper h2 { font-size: 3rem; color: var(--texto-blanco); margin-bottom: 10px; line-height: 1.1; }
.trabaje-texto-wrapper h2 span { color: var(--verde-fsg); }
.cargo-texto { font-size: 1.4rem; color: var(--texto-gris); margin-bottom: 25px; text-transform: none; font-weight: 500; }
.desc-texto { color: var(--texto-gris); margin-bottom: 15px; font-size: 1.05rem; }

.seccion-trabaje { padding: 100px 5%; background: var(--bg-seccion-alt); display: flex; justify-content: center; border-top: 1px solid var(--borde-sutil); }
.tarjeta-blanca-form { background: #ffffff; color: #333333; max-width: 700px; width: 100%; padding: 50px; border-radius: 12px; box-shadow: 0 15px 40px rgba(0,0,0,0.6); text-align: center; }
.tarjeta-blanca-form h2 { color: #111111; font-size: 2.4rem; margin-bottom: 10px; }
.subtitulo-form { color: #666666; font-size: 0.95rem; margin-bottom: 35px; }
.form-cv { text-align: left; }
.input-claro { width: 100%; background: #f9f9f9; border: 1px solid #dddddd; color: #333333; padding: 15px; margin-bottom: 20px; border-radius: 6px; font-family: inherit; font-size: 0.95rem; transition: 0.3s; outline: none; }
.input-claro:focus { border-color: var(--verde-fsg); box-shadow: 0 0 0 3px rgba(18, 140, 75, 0.15); }
.caja-archivo { border: 2px dashed #cccccc; padding: 20px; border-radius: 6px; margin-bottom: 25px; background: #fafafa; transition: 0.3s; }
.caja-archivo:hover { border-color: var(--verde-fsg); background: #f0fff6; }
.caja-archivo label { display: block; font-weight: 700; margin-bottom: 10px; color: var(--verde-fsg); font-size: 0.9rem; }
.caja-archivo input[type="file"] { width: 100%; font-size: 0.9rem; color: #666666; cursor: pointer; }

/* Ajustes Modo Claro Trabaje */
body.light-mode .info-trabaje-seccion { background: var(--bg-tarjetas); }
body.light-mode .trabaje-texto-wrapper h2 { color: #111111; }
body.light-mode .cargo-texto, body.light-mode .desc-texto { color: #555555; }
/* ========================================================= */
/* ================= 7. MEGA FOOTER (ESTILO AS) ============ */
/* ========================================================= */
.footer-estilo-as {
    background-color: #0a0a0a; /* Fondo oscuro original FSG */
    border-top: 3px solid var(--verde-fsg);
    padding: 60px 5% 20px;
    font-family: 'Montserrat', sans-serif;
    color: var(--texto-blanco);
    margin-top: 50px;
}

.footer-as-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-as-col {
    flex: 1;
    min-width: 220px;
}

.footer-as-col img.logo-fsg {
    max-width: 180px; /* Un poquito más grande para que resalte */
    margin-bottom: 20px;
}

.footer-as-col h4 {
    color: var(--verde-brillo); /* Títulos en verde corporativo */
    font-size: 1.05rem;
    margin-bottom: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-as-col h4.titulo-verde {
    color: var(--verde-brillo);
}

.info-contacto p {
    font-size: 0.9rem;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--texto-gris);
}

.info-contacto p i {
    color: var(--verde-fsg); 
    font-size: 1.1rem;
    min-width: 20px;
}

.redes-as {
    display: flex;
    gap: 12px;
    margin-top: 25px;
}

.redes-as a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background-color: var(--bg-tarjetas);
    color: var(--texto-blanco);
    border-radius: 50%;
    text-decoration: none;
    transition: transform 0.3s, background-color 0.3s;
    font-size: 1rem;
    border: 1px solid var(--borde-sutil);
}

.redes-as a:hover {
    transform: translateY(-3px);
    background-color: var(--verde-fsg);
    border-color: var(--verde-fsg);
}

.enlaces-as {
    list-style: none;
    padding: 0;
    margin: 0;
}

.enlaces-as li {
    margin-bottom: 15px;
}

.enlaces-as a {
    text-decoration: none;
    color: var(--texto-gris);
    font-size: 0.9rem;
    transition: 0.3s;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.4;
}

.enlaces-as a:hover {
    color: var(--verde-brillo);
    transform: translateX(5px);
}

.enlaces-as a i {
    color: var(--verde-fsg);
    font-size: 1.2rem;
    margin-top: 2px;
}

.img-certificados {
    width: 100%;
    max-width: 320px;
    background: #ffffff; /* Fondo blanco obligatorio para los certificados */
    padding: 10px;
    border-radius: 8px;
    height: auto;
    margin-top: 20px;
    display: block;
}

.col-vigilado {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.col-vigilado h4 {
    color: var(--verde-brillo);
    font-size: 1rem;
    margin-bottom: 15px;
    text-transform: uppercase;
}

/* 🔥 AQUÍ QUEDÓ EL LOGO DE SUPERTRANSPORTE CUADRADO CON SOMBRITA */
.col-vigilado img {
    max-width: 180px;
    background: #ffffff; 
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15); /* Sombra para que se vea el cuadro en fondo blanco */
    border: 1px solid #eaeaea; 
    transition: 0.3s;
}

.col-vigilado img:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(18, 140, 75, 0.2);
}

.footer-as-bottom {
    text-align: center;
    padding: 20px;
    margin-top: 40px;
    font-size: 0.85rem;
    color: #777;
    border-top: 1px solid var(--borde-sutil);
}

/* Modo Responsive Celulares para el Footer */
@media (max-width: 768px) {
    .footer-as-container {
        flex-direction: column;
        text-align: center;
    }
    .info-contacto p, .enlaces-as a {
        justify-content: center;
    }
    .redes-as {
        justify-content: center;
    }
    .col-vigilado {
        align-items: center;
    }
    .enlaces-as a:hover {
        transform: none;
    }
}
/* Recuperar el hover verde en los enlaces del footer en modo claro */
body.light-mode .footer-estilo-as .enlaces-as a:hover {
    color: var(--verde-fsg) !important;
    transform: translateX(5px);
}
/* ========================================================= */
/* 🔥 ADAPTACIÓN MODO CLARO (LIGHT MODE) PARA EL FOOTER 🔥   */
/* ========================================================= */
body.light-mode .footer-estilo-as {
    background-color: #ffffff;
    border-top: 3px solid var(--verde-fsg);
}

/* 🔥 EL TRUCO PARA QUE EL LOGO DE FSG APAREZCA EN MODO DÍA */
body.light-mode .footer-estilo-as .logo-fsg {
    filter: brightness(0); /* Lo convierte en negro automático */
}

body.light-mode .footer-estilo-as h4 {
    color: #111111;
}
body.light-mode .footer-estilo-as .info-contacto p,
body.light-mode .footer-estilo-as .enlaces-as a {
    color: #555555;
}
body.light-mode .footer-estilo-as .redes-as a {
    background-color: #f4f7f6;
    color: #222222;
    border-color: #d1d1d1;
}
body.light-mode .footer-estilo-as .redes-as a:hover {
    background-color: var(--verde-fsg);
    color: #ffffff;
    border-color: var(--verde-fsg);
}
body.light-mode .footer-as-bottom {
    border-top: 1px solid #e9ecef;
}
/* ========================================================= */
/* ================= PÁGINA SEDES (PREMIUM BENTO UI) ======= */
/* ========================================================= */

.hero-premium-sedes {
    height: 65vh;
    background: linear-gradient(to bottom, rgba(17,17,17,0.4) 0%, var(--bg-oscuro) 100%), url('img/foto-equipo.jpg') center/cover fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 5%;
}

.hero-contenido-centro {
    max-width: 800px;
    margin-top: 50px;
}

.hero-contenido-centro h1 {
    font-size: 4.5rem;
    color: var(--texto-blanco);
    line-height: 1.1;
    margin-bottom: 20px;
    text-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

.hero-contenido-centro h1 span {
    color: var(--verde-fsg);
}

.hero-contenido-centro p {
    font-size: 1.2rem;
    color: #e0e0e0;
}

.contenedor-bento {
    max-width: 1200px;
    margin: -80px auto 100px auto; 
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 30px;
    padding: 0 5%;
    position: relative;
    z-index: 10;
}

.bento-col-izq {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.bento-card {
    background: var(--bg-tarjetas);
    border: 1px solid var(--borde-sutil);
    border-radius: 16px; 
    padding: 35px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.4);
    transition: 0.3s;
}

.bento-card:hover {
    border-color: var(--verde-fsg);
    transform: translateY(-5px);
    box-shadow: 0 30px 60px rgba(18,140,75,0.15);
}

.bento-titulo {
    color: var(--verde-brillo);
    font-size: 1.3rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bento-texto {
    color: var(--texto-blanco);
    font-size: 1.05rem;
    margin-bottom: 8px;
}

.bento-texto i {
    color: var(--verde-fsg);
    margin-right: 8px;
}

.bento-linea {
    border: none;
    border-top: 1px solid var(--borde-sutil);
    margin: 20px 0;
}

.bento-desc {
    color: var(--texto-gris);
    font-size: 0.95rem;
    line-height: 1.6;
}

.bento-lista {
    list-style: none;
}

.bento-lista li {
    margin-bottom: 12px;
    color: var(--texto-gris);
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 12px;
}

.bento-lista li i {
    color: var(--verde-fsg);
    font-size: 1.2rem;
    width: 25px;
    text-align: center;
}

.bento-mapa {
    padding: 0;
    overflow: hidden;
    height: 100%;
    min-height: 500px;
}

#mapa-colombia {
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Ajustes celulares exclusivos para Sedes */
@media (max-width: 768px) {
    .hero-premium-sedes { height: auto; padding: 150px 5% 100px 5%; background-attachment: scroll; }
    .hero-contenido-centro h1 { font-size: 2.8rem; }
    .contenedor-bento { grid-template-columns: 1fr; margin-top: -50px; }
    .bento-mapa { height: 400px; min-height: 400px; }
}

/* ========================================================= */
/* ================= 8. EXTRAS Y ANIMACIONES =============== */
/* ========================================================= */
.btn-whatsapp { position: fixed; bottom: 30px; left: 30px; background-color: #25d366; color: #FFF; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4); z-index: 1000; transition: 0.3s; text-decoration: none; }
.btn-whatsapp:hover { transform: scale(1.1); background-color: #20ba5a; }

@keyframes subirFade { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
.hero-contenido h1 { animation: subirFade 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.hero-contenido p { animation: subirFade 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s forwards; opacity: 0; }
.hero-contenido .btn-solido { animation: subirFade 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s forwards; opacity: 0; }
.badge-verde { animation: subirFade 1s ease forwards; }

@keyframes latido-wa { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } }
.btn-whatsapp { animation: latido-wa 2s infinite; }

.elemento-invisible { opacity: 0; transform: translateY(50px); transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.animar-entrada { opacity: 1; transform: translateY(0); }
@keyframes scroll-infinito { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-250px * 15)); } }

/* ========================================================= */
/* ================= 9. RESPONSIVE (CELULARES) ============= */
/* ========================================================= */
@media (max-width: 992px) {
    .tec-contenedor, .contacto-contenedor { flex-direction: column; }
    .hero-contenido h1 { font-size: 3.2rem; }
    .grid-vehiculos { gap: 20px; }
    .contacto-form-blanco { width: 100%; padding: 30px 20px; }
    .contacto-info-coti { min-height: 400px; padding: 40px 20px; }
    .contacto-info-coti h2 { font-size: 2.5rem; text-align: center; }
    .contacto-info-coti p { text-align: center; }
}

@media (max-width: 768px) {
    header { padding: 15px 5%; }
    .nav-logo img { height: 40px; }
    nav ul { display: none; }
    .btn-solido { padding: 10px 15px; font-size: 11px; }

    .hero-automotriz { padding: 0 5%; justify-content: center; text-align: center; }
    .hero-contenido h1 { font-size: 2.2rem; margin-bottom: 15px; }
    .hero-contenido p { font-size: 1rem; }
    .badge-verde { margin-top: 60px; }

    .barra-cifras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 15px; padding: 40px 5%; }
    .cifra-item h3 { font-size: 2rem; }
    .cifra-item p { font-size: 0.8rem; }

    .grid-vehiculos { grid-template-columns: 1fr; }
    .tarjeta-vehiculo .imagen-contenedor { height: 240px; }

    .titulo-centrado h2, .tec-texto h2 { font-size: 2.2rem; }

    .input-fila { flex-direction: column; gap: 0; }
    
    .mapa-contenedor-principal { flex-direction: column-reverse; height: 600px; }
    .sidebar-sedes { width: 100%; height: 250px; }
    #mapa-colombia { height: 350px; }

    .btn-whatsapp { width: 50px; height: 50px; font-size: 28px; bottom: 20px; right: 20px; }
    .tarjeta-blanca-form { padding: 35px 20px; }
    .tarjeta-blanca-form h2 { font-size: 1.8rem; }
    .grid-trabaje { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    .hero-trabaje { height: 40vh; }
    .trabaje-texto-wrapper h2 { font-size: 2.3rem; }
}
/* Arreglo contraste del menú arriba en modo claro */
/* 1. Arriba (sin scroll): Blanco con sombra fuerte para que resalte sobre cualquier foto */
body.light-mode header:not(.scrolled) nav a,
body.light-mode header:not(.scrolled) .btn-tema {
    color: #ffffff !important;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.95), 0px 0px 5px rgba(0, 0, 0, 0.8) !important;
    border-color: #ffffff !important;
}
body.light-mode header:not(.scrolled) .nav-logo img {
    filter: brightness(0) invert(1) drop-shadow(2px 4px 6px rgba(0,0,0,0.8)) !important;
}

/* 2. Al bajar (scrolled): Negro puro sobre el menú que se vuelve blanco */
body.light-mode header.scrolled nav a,
body.light-mode header.scrolled .btn-tema {
    color: #222222 !important;
    text-shadow: none !important;
    border-color: #d1d1d1 !important;
}
body.light-mode header.scrolled .nav-logo img {
    filter: brightness(0) !important;
}
/* ========================================================= */
/* ================= 10. PÁGINA PQRS ======================= */
/* ========================================================= */
.seccion-pqrs {
    padding: 80px 5%;
    background: var(--bg-oscuro);
    min-height: 60vh;
}

.pqrs-contenedor {
    max-width: 900px;
    margin: 0 auto;
    background: var(--bg-tarjetas);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
    border: 1px solid var(--borde-sutil);
}

/* Caja de información (Explicación P, Q, R, S) */
.pqrs-info-caja {
    background: rgba(18, 140, 75, 0.05);
    border-left: 4px solid var(--verde-fsg);
    padding: 20px 25px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 30px;
}
.pqrs-info-caja h3 {
    font-size: 1.1rem;
    color: var(--verde-brillo);
    margin-bottom: 10px;
    text-transform: none;
}
.pqrs-info-caja ul {
    list-style: none;
    margin-bottom: 15px;
}
.pqrs-info-caja li {
    margin-bottom: 8px;
    font-size: 0.95rem;
    color: var(--texto-gris);
}
.pqrs-info-caja li strong {
    color: var(--texto-blanco);
}
.nota-req {
    font-size: 0.85rem;
    color: #888;
}

/* Sistema de Pestañas */
.pqrs-tabs {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    border-bottom: 2px solid var(--borde-sutil);
    padding-bottom: 15px;
}
.btn-tab {
    background: transparent;
    color: var(--texto-gris);
    border: 2px solid var(--borde-sutil);
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 10px;
}
.btn-tab:hover {
    color: var(--texto-blanco);
    border-color: #555;
}
.btn-tab.active {
    background: var(--verde-fsg);
    color: #fff;
    border-color: var(--verde-fsg);
    box-shadow: 0 5px 15px rgba(18, 140, 75, 0.3);
}

/* Formularios internos */
.titulo-seccion-form {
    color: var(--verde-fsg);
    margin: 25px 0 15px 0;
    font-size: 1.1rem;
    border-bottom: 1px solid var(--borde-sutil);
    padding-bottom: 5px;
}
.grid-2-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.input-grupo {
    margin-bottom: 15px;
}
.input-grupo label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--texto-blanco);
}
.pqrs-form-container .input-claro {
    margin-bottom: 0; /* Para no chocar con el gap del grid */
}

/* Modo Claro PQRS */
body.light-mode .pqrs-contenedor { background: #ffffff; }
body.light-mode .pqrs-info-caja li strong { color: #111; }
body.light-mode .input-grupo label { color: #333; }
body.light-mode .btn-tab { border-color: #ddd; color: #555; }
body.light-mode .btn-tab:hover { border-color: #999; color: #111; }
body.light-mode .btn-tab.active { border-color: var(--verde-fsg); color: #fff; }

/* Responsive Celulares */
@media (max-width: 768px) {
    .pqrs-contenedor { padding: 25px 15px; }
    .pqrs-tabs { flex-direction: column; gap: 10px; }
    .btn-tab { width: 100%; justify-content: center; }
    .grid-2-col { grid-template-columns: 1fr; gap: 0; }
}
/* ========================================================= */
/* ====== FONDOS CLAROS PARA PQRS Y TRABAJE (MODO DÍA) ===== */
/* ========================================================= */

/* 1. Diseño base (oscuro) para la foto de PQRS */
.hero-pqrs {
    height: 40vh;
    /* 🔥 AQUÍ PUSIMOS SU FOTO pqr.jpg */
    background: linear-gradient(to right, rgba(17,17,17,0.95) 0%, rgba(17,17,17,0.7) 100%), url('img/pqr.jpg') center/cover fixed;
    display: flex; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    padding: 0 5%;
}

/* 2. Quitar el negro cuando se activa el solecito (Modo Claro) */
body.light-mode .hero-empleo {
    background: url('img/foto-equipo.jpg') center/cover fixed !important;
}
body.light-mode .hero-pqrs {
    background: url('img/pqr.jpg') center/cover fixed !important;
}

/* 3. Sombra fuerte para que el texto siga resaltando a todo color */
body.light-mode .hero-trabaje h2,
body.light-mode .hero-pqrs h2,
body.light-mode .hero-trabaje .breadcrumbs,
body.light-mode .hero-pqrs .breadcrumbs,
body.light-mode .hero-trabaje .breadcrumbs a,
body.light-mode .hero-pqrs .breadcrumbs a,
body.light-mode .subtitulo-verde {
    color: #ffffff !important;
    text-shadow: 2px 4px 15px rgba(0, 0, 0, 0.9) !important;
}
/* ================= AJUSTE FOTOS DE SERVICIOS ================= */
.tec-imagen {
    display: flex;
    height: 100%;
}

.tec-imagen img {
    width: 100%;
    height: 100%;
    min-height: 400px;
    object-fit: cover;
    object-position: bottom; /* 🔥 ESTO OBLIGA A LA FOTO A MOSTRAR LA PARTE DE ABAJO */
    border-radius: 8px;
}
/* ========================================================= */
/* ======= SALVAVIDAS: ARREGLO DEFINITIVO MODO CLARO ======= */
/* ========================================================= */

/* 2. ARREGLO VIP Y DEMÁS: Quita el negro en el solecito SIN que usted toque el HTML */
body.light-mode .hero-trabaje[style*="foto-vip.jpg"] { background: url('img/foto-vip.jpg') center/cover no-repeat !important; }
body.light-mode .hero-trabaje[style*="foto-carga.jpg"] { background: url('img/foto-carga.jpg') center/cover no-repeat !important; }
body.light-mode .hero-trabaje[style*="vehiculo-empresarial.jpg"] { background: url('img/vehiculo-empresarial.jpg') center/cover no-repeat !important; }
body.light-mode .hero-trabaje[style*="foto-expres.jpg"] { background: url('img/foto-expres.jpg') center/cover no-repeat !important; }
body.light-mode .hero-trabaje[style*="foto-fluvial.jpg"] { background: url('img/foto-fluvial.jpg') center/cover no-repeat !important; }
body.light-mode .hero-trabaje[style*="foto-adicionales.jpg"] { background: url('img/foto-adicionales.jpg') center/cover no-repeat !important; }
body.light-mode .hero-trabaje[style*="foto-clasicos.jpg"] { background: url('img/foto-clasicos.jpg') center/cover no-repeat !important; }
body.light-mode .hero-trabaje[style*="vehiculo-turismo.jpg"] { background: url('img/vehiculo-turismo.jpg') center/cover no-repeat !important; }

/* 3. Aseguramos que el texto brille y se lea perfecto */
body.light-mode .hero-servicio h2,
body.light-mode .hero-servicio .breadcrumbs,
body.light-mode .hero-servicio .breadcrumbs a,
body.light-mode .hero-servicio .subtitulo-verde {
    color: #ffffff !important;
    text-shadow: 2px 4px 15px rgba(0, 0, 0, 0.9) !important;
}
/* ========================================================= */
/* ================= MENU DESPLEGABLE (DROPDOWN) =========== */
/* ========================================================= */
nav ul li.dropdown {
    position: relative;
}

nav ul li.dropdown .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-tarjetas);
    min-width: 250px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.6);
    border-radius: 8px;
    padding: 10px 0;
    z-index: 200;
    border: 1px solid var(--borde-sutil);
    list-style: none;
    flex-direction: column;
    gap: 0;
}

nav ul li.dropdown:hover .dropdown-menu {
    display: flex;
    animation: subirFade 0.3s ease forwards;
}

nav ul li.dropdown .dropdown-menu li {
    width: 100%;
    margin: 0;
}

nav ul li.dropdown .dropdown-menu a {
    display: block;
    padding: 12px 25px;
    color: var(--texto-blanco) !important;
    text-transform: none;
    font-size: 0.95rem;
    font-weight: 500;
    border-bottom: 1px solid var(--borde-sutil);
    transition: 0.3s;
}

nav ul li.dropdown .dropdown-menu li:last-child a {
    border-bottom: none;
}

nav ul li.dropdown .dropdown-menu a:hover {
    background: rgba(18, 140, 75, 0.1);
    color: var(--verde-brillo) !important;
    padding-left: 30px;
}

/* ================= Ajustes Modo Claro para el Dropdown ================= */
body.light-mode nav ul li.dropdown .dropdown-menu {
    background: #ffffff;
    border-color: #e9ecef;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

body.light-mode nav ul li.dropdown .dropdown-menu a {
    color: #333333 !important;
    border-bottom-color: #f0f0f0;
    text-shadow: none !important; /* Para que las letras no se manchen */
}

body.light-mode nav ul li.dropdown .dropdown-menu a:hover {
    background: #f8f9fa;
    color: var(--verde-fsg) !important;
}
/* ========================================================= */
/* ============= BANNER EXCLUSIVO PÁGINA EMPRESA =========== */
/* ========================================================= */
.hero-corporativo {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 80px;
    background: linear-gradient(to right, rgba(17,17,17,0.9) 0%, rgba(17,17,17,0.5) 100%), url('img/foto-equipo.jpg') center/cover no-repeat !important;
}

body.light-mode .hero-corporativo {
    background: url('img/foto-equipo.jpg') center/cover no-repeat !important;
}

body.light-mode .hero-corporativo h2,
body.light-mode .hero-corporativo .breadcrumbs,
body.light-mode .hero-corporativo .breadcrumbs a,
body.light-mode .hero-corporativo .subtitulo-verde {
    color: #ffffff !important;
    text-shadow: 2px 4px 15px rgba(0, 0, 0, 0.9) !important;
}
/* ========================================================= */
/* ================= PÁGINA ECO (FLOTA ELÉCTRICA) ========== */
/* ========================================================= */

/* 🔥 CERO DIFUMINADOS: La foto 100% limpia y nítida en todos los modos */
.hero-eco {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 80px;
    background: url('img/eco.jpg') center/cover fixed !important;
}

/* Sombra fuerte para asegurar que el texto blanco se lea perfecto sobre cualquier foto */
.hero-eco h1, 
.hero-eco p { 
    color: #ffffff !important; 
    text-shadow: 2px 4px 15px rgba(0,0,0,0.95), 0px 0px 10px rgba(0,0,0,0.8) !important; 
}

.seccion-beneficios-eco {
    padding: 80px 5%;
    background: var(--bg-oscuro);
    border-bottom: 1px solid var(--borde-sutil);
}

.beneficio-tarjeta {
    background: var(--bg-tarjetas);
    padding: 40px 30px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid var(--borde-sutil);
    transition: 0.3s;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.beneficio-tarjeta:hover {
    border-color: var(--verde-fsg);
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(26, 176, 95, 0.15);
}

.beneficio-tarjeta i {
    font-size: 3rem;
    color: var(--verde-brillo);
    margin-bottom: 20px;
}

.beneficio-tarjeta h3 {
    color: var(--texto-blanco);
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.beneficio-tarjeta p {
    color: var(--texto-gris);
    font-size: 0.95rem;
    line-height: 1.6;
}
/* --- AJUSTE LOGOS CLIENTES (MÁS GRANDES Y A COLOR) --- */
.slider-clientes .slide img {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    max-width: 180px !important; /* Si los quieren más grandes, suba este 180 a 200 o más */
    height: auto !important;
    transform: scale(1.1) !important;
}
/* ================= HEADER CORREGIDO DEFINITIVO ================= */

/* --- NAVEGACIÓN PC (Separación igual y exacta) --- */
.nav-links {
    display: flex;
    gap: 30px; /* Medida igual de separación para todos */
    align-items: center;
}

/* --- BLOQUE DERECHO --- */
.header-derecha {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* --- REDES SOCIALES CIRCULARES Y VERDES --- */
.redes-header {
    display: flex;
    gap: 8px;
}
.redes-header a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #1ab05f; 
    color: #ffffff !important; 
    text-decoration: none;
    transition: transform 0.3s;
    font-size: 0.9rem;
}
.redes-header a:hover {
    transform: scale(1.1);
}

/* --- BOTONES --- */
.btn-trabaje {
    background-color: #1ab05f;
    color: #ffffff !important;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
}

/* 🔥 BOTÓN HAMBURGUESA (Con fondo verde para que no se pierda) */
.btn-menu-movil {
    display: none;
    background-color: #1ab05f;
    color: #ffffff;
    border: none;
    font-size: 1.5rem;
    padding: 6px 12px;
    border-radius: 5px;
    cursor: pointer;
}

/* --- ESTILOS MÓVILES (Celulares) --- */
@media (max-width: 1050px) {
    .header-derecha {
        gap: 10px; /* Ajuste para que todo quepa arriba */
    }
    
    .btn-menu-movil {
        display: block; /* Muestra las 3 rayitas */
    }
    
    .btn-trabaje {
        display: none !important; /* Oculta botón grande en PC */
    }
    
    .btn-trabaje-movil {
        display: block !important;
        background-color: #1ab05f;
        color: #ffffff !important;
        padding: 12px;
        border-radius: 5px;
        margin-top: 10px;
    }

    .nav-links {
        display: none !important;
        flex-direction: column !important;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #ffffff;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        padding: 20px;
        text-align: center;
        gap: 15px;
        z-index: 999;
    }

    .nav-links.activo {
        display: flex !important; /* Se abre con JS */
    }
    
    .nav-links a {
        color: #000000 !important;
        font-weight: bold;
    }
}
/* ================= ARREGLO URGENTE MENÚ MÓVIL ================= */
@media (max-width: 1050px) {
    .nav-links ul {
        flex-direction: column !important; /* Fuerza a que bajen en columna */
        gap: 20px !important;
        width: 100%;
    }
    
    .nav-links li {
        width: 100%;
    }

    /* Arreglo para que el menú de EMPRESA se vea bien en celular */
    .dropdown-menu {
        position: static !important; /* Deja de flotar y empuja lo de abajo */
        box-shadow: none !important;
        background-color: #f9f9f9 !important; /* Fondo un poco más gris para diferenciar */
        width: 100% !important;
        margin-top: 10px !important;
        text-align: center;
    }
}
/* ================= HERO COBERTURA (SEDES) ================= */
.hero-cobertura {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.img-hero-cob {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.filtro-dinamico {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: rgba(0,0,0,0.7); /* Oscuro en modo noche */
    transition: background 0.4s ease;
}

body.light-mode .filtro-dinamico {
    background: rgba(0,0,0,0.15); /* Transparente en modo claro */
}

.contenido-hero-cob {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 20px;
}

.contenido-hero-cob h1 {
    color: #ffffff;
    font-size: 3.5rem;
    margin-top: 20px;
    font-weight: 900;
}

.contenido-hero-cob h1 span {
    color: #1ab05f;
}

.contenido-hero-cob p {
    color: #ffffff;
    font-size: 1.2rem;
    max-width: 600px;
    margin: 15px auto 0;
}

/* Sombra al texto en modo claro para que no se pierda con la foto */
body.light-mode .contenido-hero-cob h1,
body.light-mode .contenido-hero-cob p {
    text-shadow: 1px 1px 8px rgba(0,0,0,0.6);
}

/* ================= AJUSTES MENÚ MÓVIL ================= */
@media (max-width: 1050px) {
    .nav-links ul { 
        flex-direction: column !important; 
        gap: 20px !important; 
        width: 100%; 
    }
    
    .nav-links li { 
        width: 100%; 
        text-align: center; 
        display: block; 
    }
    
    .dropdown > a { 
        display: inline-flex; 
        justify-content: center; 
        align-items: center; 
        width: 100%; 
    }
    
    .dropdown-menu { 
        display: none; 
        position: static !important; 
        box-shadow: none !important; 
        background-color: #f5f5f5 !important; 
        width: 100% !important; 
        margin-top: 10px !important; 
        padding: 15px 0 !important;
    }
    
    .dropdown-menu.mostrar-movil {
        display: flex !important; 
        flex-direction: column;
        gap: 15px;
    }
    
    .contenido-hero-cob { 
        width: 90%; 
    }
}
/* ================= ACORDEÓN DE POLÍTICAS Y REGLAMENTOS ================= */
.contenedor-dos-columnas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
    padding: 0 5%;
}

.acordeon-item {
    margin-bottom: 15px;
    background: var(--bg-tarjetas);
    border: 1px solid var(--borde-sutil);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
}

.acordeon-item:hover {
    box-shadow: 0 6px 15px rgba(0,0,0,0.08);
}

.acordeon-item summary {
    padding: 18px 20px;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--texto-ppal);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none; /* Oculta la flecha fea por defecto */
}

/* Ocultar flecha nativa en Safari/Chrome viejo */
.acordeon-item summary::-webkit-details-marker {
    display: none;
}

/* Flecha personalizada con Font Awesome */
.acordeon-item summary::after {
    content: '\f107'; /* fa-angle-down */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--verde-fsg);
    transition: transform 0.3s ease;
}

/* Cuando el acordeón está abierto */
.acordeon-item[open] summary {
    color: var(--verde-fsg);
    border-bottom: 1px solid var(--borde-sutil);
}

.acordeon-item[open] summary::after {
    transform: rotate(180deg); /* Gira la flecha hacia arriba */
}

.acordeon-contenido {
    padding: 20px;
    color: var(--texto-gris);
    line-height: 1.6;
    font-size: 0.95rem;
}

.acordeon-contenido p {
    margin-bottom: 15px;
}

/* Botón para descargar el PDF */
.btn-descarga-pdf {
    display: inline-block;
    background: rgba(26, 176, 95, 0.1);
    color: var(--verde-fsg);
    padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.btn-descarga-pdf:hover {
    background: var(--verde-fsg);
    color: #ffffff;
}

/* Ajustes para celulares */
@media (max-width: 991px) {
    .contenedor-dos-columnas {
        grid-template-columns: 1fr;
    }
    
    .columna-imagen {
        height: 300px;
        order: -1; /* Pone la imagen arriba en celular */
        margin-bottom: 20px;
        position: static !important; /* Le quito el pegajoso en celular */
    }
    
    .invertido-movil .columna-imagen {
        order: -1;
    }
}
/* ================= POLÍTICAS Y REGLAMENTOS (ESTILO CLÁSICO-MODERNO AS) ================= */
.contenedor-politicas {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
    display: flex;
    flex-direction: column;
    gap: 80px; /* Separación grande entre cada política */
}

.bloque-politica {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

/* Invierte el orden para que quede imagen izquierda, texto derecha */
.bloque-politica.invertido {
    flex-direction: row-reverse;
}

/* --- Lado del Texto --- */
.politica-texto {
    flex: 1;
    max-width: 550px;
}

.politica-texto h3 {
    font-size: 2rem;
    color: var(--verde-fsg);
    margin-bottom: 20px;
    line-height: 1.2;
}

.politica-texto p {
    color: var(--texto-gris);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 25px;
    text-align: justify;
}

.btn-descarga-clasico {
    display: inline-block;
    background: var(--verde-fsg);
    color: #ffffff !important;
    padding: 12px 25px;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(26, 176, 95, 0.3);
}

.btn-descarga-clasico:hover {
    background: #148f4b;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(26, 176, 95, 0.4);
}

.btn-descarga-clasico i {
    margin-right: 8px;
}

/* --- Lado de las Imágenes (Estilo Collage AS) --- */
.politica-collage {
    flex: 1;
    display: flex;
    gap: 15px;
    height: 400px;
}

.politica-collage .img-principal {
    width: 60%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.collage-secundarias {
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.collage-secundarias img {
    width: 100%;
    height: calc(50% - 7.5px); /* Mitad de altura menos la mitad del gap */
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* --- Ajustes Móviles --- */
@media (max-width: 991px) {
    .bloque-politica,
    .bloque-politica.invertido {
        flex-direction: column; /* Todo en columna */
        gap: 30px;
    }
    
    .politica-texto {
        max-width: 100%;
        text-align: center;
    }
    
    .politica-texto p {
        text-align: center; /* En celular se ve mejor centrado o justificado */
    }
    
    .politica-collage {
        width: 100%;
        height: 300px; /* Un poco más bajito en celular */
    }
}
/* ================= ARREGLO DE ESPACIO EN HEADER PARA CELULARES ================= */
@media (max-width: 850px) {
    /* Esconde las bolitas de redes sociales solo en celular para que no estorben */
    .redes-header {
        display: none !important; 
    }
    
    /* Junta un poquito la luna y el botón del menú */
    .header-derecha {
        gap: 15px !important; 
        display: flex;
        align-items: center;
    }
    
    /* Le da un margen a los lados para que nada quede pegado a la orilla */
    .header-container {
        padding: 10px 20px !important; 
    }
}