/* =========================================
   css/equipo.css - ESTILO MODERNO PARA EQUIPO
   ========================================= */

/* CABECERA */
.team-header {
    text-align: center;
    padding: 3rem 0;
}
.team-header h1 { color: var(--ea-blue); font-size: 2.5rem; margin-bottom: 0.5rem; }
.team-header p { color: #666; font-size: 1.1rem; }

/* SECCIONES */
.team-section { margin-bottom: 5rem; }

/* ETIQUETAS DE CATEGORÍA */
.section-badge {
    display: inline-block;
    background-color: var(--ea-blue); /* Azul por defecto (Pilotos) */
    color: white;
    padding: 0.5rem 1.5rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 4px;
    margin-bottom: 2rem;
    letter-spacing: 1px;
}

/* Colores específicos por rol */
.badge-green { background-color: #4b6cb7; /* Un tono diferente para distinguir, o verde oliva si prefieres #556B2F */ }
.badge-gray { background-color: #6c757d; }

/* FOTO DE GRUPO (Destacada) */
.mechanics-group-photo {
    margin-bottom: 2rem;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.mechanics-group-photo img {
    width: 100%;
    height: auto;
    display: block;
}
.photo-caption {
    background: #f4f6f8;
    padding: 0.8rem;
    text-align: center;
    font-size: 0.9rem;
    color: #555;
    font-style: italic;
}

/* GRID */
.team-grid {
    display: grid;
    /* Responsive: mínimo 280px por tarjeta */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

/* TARJETA (CARD) */
.team-card {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: transform 0.3s ease;
    background-color: #000; /* Fondo negro por si carga mal la imagen */
    position: relative;
}

.team-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}

/* CONTENEDOR DE IMAGEN (Ratio Vertical) */
.card-image-wrapper {
    position: relative;
    width: 100%;
    /* Truco CSS para mantener ratio de aspecto vertical (4:5 aprox) */
    padding-top: 125%; 
}

.card-image-wrapper img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover; /* Recorta la imagen para llenar el hueco sin deformar */
}

/* TEXTO SOBREIMPRESO (Overlay) */
.card-overlay {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    /* Degradado para que el texto blanco se lea siempre */
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 70%, transparent 100%);
    padding: 80px 20px 20px 20px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.card-overlay h3 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ea-yellow); /* Amarillo Ejército */
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.card-overlay .role {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    color: #ddd;
    opacity: 0.9;
}

.card-overlay .bio {
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
    font-style: italic;
    opacity: 0.85;
}

/* PLACEHOLDER PARA AUXILIARES */
.aux-placeholder {
    background-color: var(--bg-gray);
    padding: 3rem;
    text-align: center;
    border-radius: 8px;
    border: 2px dashed #ccc;
    color: #666;
}

/* =========================================
   NUEVOS TÍTULOS H2 (ESTILO ELEGANTE)
   ========================================= */

.section-title {
    font-size: 2.2rem;          /* Tamaño grande y legible */
    color: var(--ea-blue);      /* Azul corporativo */
    text-align: center;         /* Centrado */
    font-weight: 700;
    text-transform: uppercase;  /* Mayúsculas */
    letter-spacing: 2px;        /* Aire entre letras */
    position: relative;
    
    /* ESPACIADO RESPONSIVE */
    margin-top: 0;
    margin-bottom: 4rem;        /* Mucho aire debajo antes de las fotos */
    padding-bottom: 0.5rem;
    border: none;               /* Aseguramos que no haya bordes laterales */
}

/* La pequeña línea de color debajo del texto */
.section-title::after {
    content: '';
    display: block;
    width: 60px;                /* Línea corta */
    height: 4px;                /* Grosor elegante */
    margin: 15px auto 0;        /* Centrado automático debajo del texto */
    background-color: var(--ea-blue);
    border-radius: 2px;
}

/* COLORES DE LA LÍNEA (Según el grupo) */
/* Usa estas clases en el HTML junto a .section-title */

.title-blue::after { 
    background-color: var(--ea-red); /* Rojo para Oficiales */
}

.title-green::after { 
    background-color: #556B2F;       /* Verde Oliva para Mecánicos */
}

.title-navy::after { 
    background-color: #0f243e;       /* Azul Oscuro para Auxiliares */
}

/* AJUSTE PARA MÓVIL (Para que no ocupe tanto) */
@media (max-width: 768px) {
    .section-title {
        font-size: 1.75rem;
        margin-bottom: 2.5rem;
    }
}