/* --- CONTENEDOR PRINCIPAL --- */
.cordillera-footer-v3 {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0; 
}

/* FONDO IMAGEN */
.bg-wrapper {
    position: relative;
    width: 100%;
    z-index: 1;
}
.bg-img-full {
    width: 100%;
    height: auto; /
    display: block;
}

/* --- CAPA DE CONTENIDO --- */
.content-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10;
    display: flex; flex-direction: column;
    justify-content: flex-end; 
    font-family: 'Montserrat', sans-serif;
    color: white;
    line-height: 1.5; 
}

/* 1. SLOGAN */
.slogan-box {
    text-align: center; width: 100%;
    position: absolute;
    bottom: 12%; 
}
.slogan-box p {
    font-size: 1.3vw; font-weight: 700; letter-spacing: 0.1em;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); margin: 0;
}

/*  BARRA INFERIOR */
/* ANTES: width: 110% — SIEMPRE DESBORDA */
.bottom-bar-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;           /* ← cambiar 110% → 100% */
  padding: 0 5%;         /* usar padding en vez de width extra */
  margin: 0 auto 9% auto;
  box-sizing: border-box;
}


/* Columnas Laterales */
.side-col { flex: 1; }
.left-col span { font-size: 0.9vw; opacity: 0.9; }
.right-col { display: flex; justify-content: flex-end; gap: 1.5vw; }
.right-col img { height: 2.5vw; width: auto; filter: brightness(0) invert(1); }

/* Columna Central (Links + Iconos) */
.center-col {
    flex: 2; display: flex; justify-content: center; align-items: center; gap: 3vw;
}

/* Links */
.nav-links { display: flex; gap: 2vw; }
.nav-links a {
    color: white; text-decoration: none; font-weight: 600; font-size: 1.5vw;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* Iconos */
.icons-row { display: flex; gap: 1vw; align-items: center; }
.icons-row img {
    width: 2.0vw; height: auto;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6));
    transition: transform 0.2s;
}
.icons-row a:hover img { transform: translateY(-3px); }

/* --- RESPONSIVE MÓVIL --- */
@media (max-width: 768px) {
    .bg-img-full { min-height: 500px; object-fit: cover; } 
    
    .slogan-box { bottom: auto; top: 55%; }
    .slogan-box p { font-size: 14px; }

    .bottom-bar-flex {
        flex-direction: column; gap: 25px; margin-bottom: 30px;
    }
    .center-col { flex-direction: column; gap: 15px; }
    .icons-row img { width: 30px; }
    .right-col img { height: 35px; }
    .nav-links a { font-size: 14px; }
}