/* Reset básico: elimina márgenes y paddings por defecto y usa box-sizing consistente */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Estilo general del body */
body {
    font-family: "Rubik", sans-serif;     /* Fuente principal del sitio */
    line-height: 1.6;                     /* Espaciado entre líneas de texto (lectura cómoda) */
    color: #2d2d2d;                       /* Color del texto principal (oscuro pero no negro puro) */
    background: #f8f5f2;                  /* Fondo claro y cálido (beige suave) */
}

/* Barra lateral fija a la izquierda */
.sidebar {
    position: fixed;                      /* Se queda fija al hacer scroll */
    top: 0;
    left: 0;
    width: 240px;                         /* Ancho de la barra lateral */
    height: 100vh;                        /* Ocupa toda la altura de la ventana */
    background: #2c2c2c;                  /* Fondo oscuro elegante */
    color: #e0e0e0;                       /* Color del texto dentro de la sidebar */
    padding: 1.5rem 1.5rem;                 /* Espacio interno */
    box-shadow: 4px 0 15px rgba(0,0,0,0.25); /* Sombra suave a la derecha */
    z-index: 1000;                        /* Siempre por encima de otros elementos */
}

/* Logo dentro de la sidebar */
.logo {
    width: 80%;
    max-width: 180px;                     /* No se estira demasiado */
    margin: 0 auto 2rem;                  /* Centrado y espacio abajo */
    display: block;
}

/* Menú de navegación de la sidebar */
.sidebar nav ul {
    list-style: none;                     /* Quita viñetas */
}

.sidebar nav li {
    margin-bottom: 0.5rem;                /* Espacio entre elementos del menú */
}

.sidebar nav a {
    color: #c9c4ff;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 500;
    transition: all 0.3s ease;            /* transición suave en Todo */
    display: block;                       /* importante para que ocupe todo el ancho */
    padding: 0.8rem 1rem;                 /* espacio interno para que se vea el fondo */
    border-radius: 8px;                   /* bordes redondeados */
}

.sidebar nav a:hover {
    transform: scale(1.04);
    background: linear-gradient(to right, rgba(94,77,255,0.1), rgba(162,155,254,0.1));
    box-shadow: inset 0 0 10px rgba(94, 77, 255, 0.3);
    text-shadow: 0 0 8px rgba(94, 77, 255, 0.6);
}


.sidebar nav a:focus {
    background: rgba(162,155,254,0.15);             /* Fondo lila muy suave y translúcido */
    color: #a29bfe;                                 /* Lila más vivo al pasar el ratón */
    padding-left: 1.2rem;                           /* Pequeño desplazamiento visual */
    box-shadow: 0 2px 8px rgba(94, 77, 255, 0.2);   /* sobra sutil al hover */
}

/* Encabezado principal */
header {
    background: transparent;          /* o un fondo muy sutil */
    padding: 1rem 2rem;
    margin-left: 240px;
    position: sticky;
    top: 0;
    z-index: 999;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: none;
}

/* Título dentro del header */
header h1 {
    font-size: 1.8rem;
    margin: 0;
    color: #5e4dff;
}

/* Menú horizontal del header */
header nav ul {
    list-style: none;
    display: flex;
    gap: 2rem;                            /* Espacio entre enlaces */
    margin-top: 1rem;
}

header nav a {
    color: #c9c4ff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

header nav a:hover {
    color: #a29bfe;
}

/* Contenedor principal del contenido */
main {
    margin-left: 240px;                   /* Igual que el header, deja espacio a la sidebar */
    padding: 2rem;
    max-width: 1200px;                    /* Limita el ancho máximo para lectura cómoda */
}

/* Estilo general de cada sección */
.section {
    margin-bottom: 1.2rem;
    padding: 2rem;
    background: #ffffff;                  /* Fondo blanco limpio */
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08); /* Sombra suave */
}

/* Sección Quiénes Somos - rejilla de perfiles */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* 220px mínimo → 3 caben mejor */
    gap: 1rem;                            /* Espacio reducido entre tarjetas para que quepan 3 */
}

/* Cada tarjeta de persona */
.team-member {
    background: linear-gradient(to right, #fff, #f8f8f8);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    text-align: center;
    transition: transform 0.2s ease;
}

.team-member:hover {
    transform: translateY(-5px);          /* Pequeño levantamiento al pasar el ratón */
}

/* Imagen de perfil */
.team-member img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
    border: 3px solid #e0e0e0;           /* Borde suave alrededor de la foto */
}

/* Links dentro del contenido principal */
main a {
    color: #6c5ce7;                       /* Morado característico */
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}

main a:hover {
    color: #a29bfe;
    text-decoration: underline;
}

/* Bordes inferiores en todos los h2 */
.section h2 {
    border-bottom: 2px solid #5e4dff; /* morado que venías usando */
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Estilo específico solo para la sección Misión */
.mission p {
    text-align: justify;
    font-size: 1.05rem;   
}

/* Estilo específico para la sección Inicio (hero) */
.hero p {
    text-align: justify;
    font-size: 1.1rem;
}

/* Footer */
footer {
    background: #2c2c2c;
    color: #c9c4ff;
    text-align: center;
    padding: 2rem;
    margin-left: 240px;
    border-top: 3px solid #5e4dff;
}

footer a {
    color: #a29bfe;
}

/* Media queries (responsive) */
@media (max-width: 1024px) {
    .sidebar {
        width: 220px;
    }
    main, header, footer {
        margin-left: 220px;
    }
}

@media (max-width: 768px) {
    .sidebar {
        position: static;                 /* Deja de ser fija en móviles */
        width: 100%;
        height: auto;
        padding: 1.5rem;
    }
    header, main, footer {
        margin-left: 0;
    }
    header nav ul {
        flex-direction: column;
        gap: 1rem;
    }
    .team-grid {
        grid-template-columns: 1fr;       /* En móvil, una columna */
    }
}