/* VARIABLES CORPORATIVAS */
:root {
    --color-blue: #1D71B8;
    --color-red: #E41B1A;
    --color-gray: #706F6F;
    --color-white: #FFFFFF;
    --font-titles: 'Roboto Condensed', sans-serif;
    --font-text: 'Roboto', sans-serif;
}

/* RESET BÁSICO */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-text);
    color: var(--color-gray);
    line-height: 1.6;
}

h1, h2, h3, h4 {
    font-family: var(--font-titles);
    color: var(--color-blue);
}

a { text-decoration: none; color: inherit; }

/* HEADER & NAVBAR */
.top-bar {
    background-color: var(--color-blue);
    color: var(--color-white);
    padding: 5px 50px;
    display: flex;
    justify-content: flex-start;
    gap: 30px;
    font-size: 0.9rem;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 50px;
    background-color: var(--color-white);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: relative;
    z-index: 100;
}

.brand-logo { width: 100%; max-width: 250px; height: auto; display: block; }

.nav-links {
    list-style: none;
    display: flex;
    gap: 25px;
    font-weight: bold;
    font-family: var(--font-titles);
    letter-spacing: 0.5px;
}

.nav-links a { transition: 0.3s; }
.nav-links a:hover { color: var(--color-blue); }

/* MENÚ HAMBURGUESA OCULTO EN ESCRITORIO */
.hamburger { display: none; cursor: pointer; }
.bar { display: block; width: 25px; height: 3px; margin: 5px auto; background-color: var(--color-blue); transition: all 0.3s ease-in-out; }

/* HERO SECTION (PORTADA CON IMAGEN) */
.hero {
    background-image: linear-gradient(rgba(29, 113, 184, 0.8), rgba(29, 113, 184, 0.8)), url('img/4433.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--color-white);
    text-align: center;
    padding: 120px 20px;
    position: relative;
}

.hero-content { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; }
.hero h2 { color: var(--color-white); font-size: 3.5rem; margin-bottom: 15px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
.hero h3 { color: var(--color-white); font-size: 2.2rem; margin-bottom: 25px; font-weight: normal; }
.hero p { font-size: 1.2rem; margin-bottom: 40px; }

.btn {
    border: 2px solid var(--color-white);
    padding: 12px 35px;
    border-radius: 25px;
    font-weight: bold;
    transition: 0.3s;
    display: inline-block;
}
.btn:hover { background-color: var(--color-white); color: var(--color-blue); }

/* NOSOTROS */
.about { padding: 60px 50px; background-color: #f9f9f9; }
.about-container { display: flex; gap: 40px; max-width: 1200px; margin: 0 auto; }
.about-text { flex: 1; }
.about-text h2 { font-size: 2.2rem; margin-bottom: 20px; }
.mission-vision { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.card { background: var(--color-white); padding: 22px; border-left: 5px solid var(--color-blue); box-shadow: 0 4px 6px rgba(0,0,0,0.05); }

/* SERVICIOS */
.services { padding: 60px 50px; text-align: center; }
.services h2 { margin-bottom: 40px; font-size: 2.5rem; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto; }
.service-card { background: #f4f4f4; padding: 30px 20px; border-radius: 8px; transition: 0.3s; }
.service-card h3 { font-size: 1.3rem; margin-bottom: 15px; }
.service-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }

/* ICONOS SERVICIOS */
.service-icon { font-size: 2.5rem; color: var(--color-blue); margin-bottom: 15px; display: inline-block; transition: transform 0.3s ease; }
.service-card:hover .service-icon { transform: scale(1.1); }

/* STAFF */
.staff { padding: 60px 50px; background-color: #f9f9f9; text-align: center; }
.staff h2 { font-size: 2.5rem; }
.staff p { max-width: 800px; margin: 10px auto 40px auto; }
.staff-grid { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; }
.staff-member { background: var(--color-white); width: 290px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); border-radius: 4px; overflow: hidden; }
.staff-member img { width: 100%; height: 340px; object-fit: cover; display: block; }
.staff-info { background-color: var(--color-blue); color: var(--color-white); padding: 15px; }
.staff-info h4 { color: var(--color-white); margin-bottom: 5px; font-size: 1.2rem; }
.staff-info p { font-size: 0.85rem; margin: 0; }

/* FOOTER */
.footer { background-color: #333333; color: var(--color-white); padding: 50px 50px 20px 50px; }
.footer-content { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; border-bottom: 1px solid #555555; padding-bottom: 30px; }
/* Control del logo en el pie de página */
.footer-brand-logo { 
    width: 100%; 
    max-width: 200px; 
    height: auto; 
    /* Se eliminó el filter para que use los colores originales de tu PNG transparente */
    display: block; 
}
.footer-contact p { margin-bottom: 8px; font-size: 0.95rem; }
.footer-bottom { text-align: center; padding-top: 20px; font-size: 0.85rem; color: #aaaaaa; }

/* BOTÓN VOLVER ARRIBA */
#btnScrollTop {
    position: fixed; bottom: 30px; right: 30px;
    background-color: #B3B3B3; /* Gris claro aplicado aquí */
    color: var(--color-white);
    border: none; border-radius: 50%; width: 50px; height: 50px;
    font-size: 1.5rem; cursor: pointer; display: none; z-index: 1000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: background-color 0.3s, transform 0.3s;
}
#btnScrollTop:hover { 
    background-color: var(--color-blue); /* Mantiene el toque corporativo azul al pasar el mouse */
    transform: translateY(-5px); 
}

/* MEDIA QUERIES (VERSIÓN MÓVIL) */
@media screen and (max-width: 768px) {
    .top-bar { flex-direction: column; text-align: center; padding: 10px; }
    .navbar { flex-direction: row; justify-content: space-between; padding: 15px 20px; position: relative; }
    .brand-logo { max-width: 200px; }
    .hamburger { display: block; }
    .nav-links {
        position: absolute; top: 100%; left: -100%; flex-direction: column;
        background-color: var(--color-white); width: 100%; text-align: center;
        transition: 0.4s ease-in-out; padding: 0; z-index: 999;
    }
    .nav-links.active { left: 0; box-shadow: 0 10px 10px rgba(0,0,0,0.1); }
    .nav-links li { margin: 20px 0; }
    .hamburger.active .bar:nth-child(2) { opacity: 0; }
    .hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
    
    .hero { padding: 60px 20px; }
    .hero h2 { font-size: 2rem; }
    .hero h3 { font-size: 1.5rem; }
    .about-container { flex-direction: column; }
    .services, .staff, .about { padding: 40px 20px; }
    .footer-content { flex-direction: column; text-align: center; gap: 30px; }
    
    #btnScrollTop { bottom: 20px; right: 20px; width: 45px; height: 45px; font-size: 1.2rem; }
}