/* Nexo Plataforma - Integrated Stylesheet Final
   Versión: 3.0 (Full Integration: Header Socials + Decálogo 15 pts + Forms)
   Fecha: 19 de marzo de 2026, 02:25 PM
*/

/* 1. IMPORTACIÓN DE FUENTES */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Open+Sans:wght@400;600&display=swap');

/* 2. VARIABLES DEL SISTEMA */
:root {
    --nexo-azul: #0056b3;
    --nexo-azul-oscuro: #003366;
    --nexo-accent: #00AEEF;
    --nexo-gris-texto: #333333;
    --nexo-gris-suave: #888888;
    --nexo-bg-light: #F7F9FB;
    --nexo-blanco: #ffffff;
    --nexo-border: #eeeeee;
    --nexo-footer-bg: #1a1a1a;
    --nexo-font-primary: 'Montserrat', sans-serif;
    --nexo-font-body: 'Open Sans', sans-serif;
    --nexo-max-width: 1200px;
    --nexo-transition: 0.3s ease;
}

/* 3. RESET Y BASE */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    font-family: var(--nexo-font-body); 
    line-height: 1.6; 
    color: var(--nexo-gris-texto); 
    background-color: var(--nexo-blanco);
}
.nexo-container { max-width: var(--nexo-max-width); margin: 0 auto; padding: 0 20px; }
a { text-decoration: none; transition: var(--nexo-transition); }
img { max-width: 100%; height: auto; }

/* 4. CABECERA (STICKY + SOCIALS) */
.nexo-main-header { 
    background: var(--nexo-blanco); 
    border-bottom: 1px solid var(--nexo-border); 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.nexo-header-container {
    display: flex;
    align-items: center;
    height: 85px;
}

.nexo-logo img { height: 45px; width: auto; display: block; }

/* Redes Sociales en el Header */
.nexo-header-socials {
    display: flex;
    gap: 15px;
    margin-left: auto; /* Empuja el resto a la derecha */
    margin-right: 30px;
    padding: 0 10px;
}

.nexo-header-socials a {
    color: var(--nexo-azul);
    font-size: 1.1rem;
}

.nexo-header-socials a:hover { color: var(--nexo-azul-oscuro); transform: translateY(-2px); }

/* Navegación Desktop */
.nexo-main-nav ul { display: flex; list-style: none; gap: 20px; }
.nexo-main-nav ul li a {
    color: #444444; 
    font-family: var(--nexo-font-primary);
    font-weight: 600;
    font-size: 0.9rem;
    position: relative;
    padding-bottom: 5px;
}

.nexo-main-nav ul li a:hover, 
.nexo-main-nav ul li a.nexo-active { color: var(--nexo-azul) !important; }

.nexo-main-nav ul li a.nexo-active::after {
    content: ''; position: absolute; width: 100%; height: 2px;
    bottom: 0; left: 0; background-color: var(--nexo-azul);
}

.nexo-menu-toggle { display: none; background: none; border: none; font-size: 1.6rem; cursor: pointer; color: var(--nexo-azul-oscuro); }

/* 5. HERO / PAGE HEADER */
.nexo-page-header-image {
    height: 250px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    margin-bottom: 40px;
}

.nexo-title-h1 { font-size: 3rem; font-family: var(--nexo-font-primary); text-shadow: 0 2px 5px rgba(0,0,0,0.5); }
.nexo-lead-text { font-size: 1.2rem; font-weight: 400; }

/* 6. CONTENIDO FLEX (TEXTO + IMAGEN) */
.nexo-section { padding: 40px 0; }
.nexo-flex-row { display: flex; gap: 50px; align-items: flex-start; margin-bottom: 60px; }
.nexo-text-column { flex: 1.2; }
.nexo-image-column { flex: 0.8; }
.nexo-img-rounded { border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,0.1); }

.nexo-tag { 
    display: inline-block; background: var(--nexo-azul); color: white; 
    padding: 4px 12px; border-radius: 4px; font-size: 0.75rem; 
    font-weight: 700; text-transform: uppercase; margin-bottom: 15px; 
}

.nexo-title-h2 { font-size: 2.2rem; color: var(--nexo-azul-oscuro); margin-bottom: 20px; line-height: 1.2; }

.nexo-text-highlight { 
    font-size: 1.15rem; font-weight: 600; color: var(--nexo-azul); 
    border-left: 4px solid var(--nexo-azul); padding-left: 20px; margin: 25px 0; 
}

/* 7. DECÁLOGO (15 PUNTOS) */
.nexo-item-decalogo { display: flex; gap: 25px; margin-bottom: 40px; align-items: flex-start; }
.nexo-number-circle {
    background: var(--nexo-azul); color: white; width: 42px; height: 42px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-family: var(--nexo-font-primary); font-weight: 700; flex-shrink: 0;
}
.nexo-decalogo-content h3 { color: var(--nexo-azul-oscuro); margin-bottom: 10px; font-size: 1.3rem; }

/* 8. JUNTA DIRECTIVA & EQUIPO */
.nexo-team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-top: 40px; }
.nexo-image-wrapper { 
    width: 100%; aspect-ratio: 1/1; border-radius: 12px; overflow: hidden; 
    margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.nexo-image-wrapper img { width: 100%; height: 100%; object-fit: cover; }

/* 9. FORMULARIO CONTACTO */
.contact-page-wrapper { display: flex; flex-wrap: wrap; gap: 40px; }
.nexo-sidebar-info { flex: 1; background: #f9fbfc; padding: 30px; border-radius: 15px; }
.wpcf7-form input:not([type="submit"]), .wpcf7-form textarea {
    width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 8px; margin-bottom: 15px;
}
.wpcf7-submit {
    background: #437a94 !important; color: white !important; padding: 15px 30px !important;
    border-radius: 30px !important; border: none; font-weight: bold; width: 100%;
}

/* 10. FOOTER */
.nexo-main-footer { background: var(--nexo-footer-bg); color: white; padding: 80px 0 40px; margin-top: 80px; }
.nexo-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.nexo-logo-footer { font-family: var(--nexo-font-primary); font-size: 1.8rem; font-weight: 800; margin-bottom: 20px; }
.nexo-logo-footer span { color: var(--nexo-azul); }
.nexo-footer-column h4 { color: white; margin-bottom: 25px; font-size: 1.1rem; }
.nexo-footer-column ul { list-style: none; }
.nexo-footer-column a { color: #ccc; font-size: 0.95rem; }
.nexo-footer-column a:hover { color: white; }
.nexo-footer-bottom { border-top: 1px solid #333; padding-top: 30px; margin-top: 40px; display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--nexo-gris-suave); }

/* 11. RESPONSIVE */
@media (max-width: 1024px) {
    .nexo-menu-toggle { display: block; }
    .nexo-main-nav { 
        display: none; position: absolute; top: 85px; left: 0; width: 100%; 
        background: white; border-bottom: 2px solid var(--nexo-azul); padding: 20px; 
    }
    .nexo-main-nav.nexo-nav-open { display: block; }
    .nexo-main-nav ul { flex-direction: column; gap: 15px; }
    .nexo-header-socials { margin-right: 15px; }
}

@media (max-width: 768px) {
    .nexo-flex-row { flex-direction: column; }
    .nexo-image-column { order: -1; width: 100%; }
    .nexo-footer-grid { grid-template-columns: 1fr 1fr; }
    .nexo-header-container { height: 75px; }
}

@media (max-width: 480px) {
    .nexo-title-h1 { font-size: 2.2rem; }
    .nexo-header-socials { display: none; } /* Ocultar redes en móviles muy pequeños para dar espacio al logo */
    .nexo-footer-grid { grid-template-columns: 1fr; text-align: center; }
    .nexo-footer-bottom { flex-direction: column; text-align: center; gap: 15px; }
}


/* El contenedor que limita el contenido al ancho del banner */
.nexo-main-footer .nexo-container {
    max-width: 1200px; /* Ajusta a 1140px si ves que queda un pelín más ancho que el banner */
    margin: 0 auto;    /* CENTRA EL PIE DE PÁGINA */
    padding: 0 20px;   /* Margen para que no pegue a los bordes en móviles */
}

/* Disposición de las columnas */
.nexo-footer-grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
}