/* ==========================================
   1. VARIABLES GLOBALES
   ========================================== */
:root {
    --color-primario: #004f71;     /* Azul oscuro corporativo */
    --color-secundario: #f4a81d;   /* Amarillo/Mostaza para destacar */
    --color-primario-claro: #006f9e; 

    --color-fondo: #ecf3fa;        
    --color-blanco: #ffffff;       
    --color-texto-oscuro: #1c1c1b; 
    --color-texto-medio: #4a4a4a;  
    --color-texto-claro: #878787;  
    
    --fuente-principal: 'Poppins', Arial, Helvetica, sans-serif;
    
    --sombra-suave: 0 2px 8px rgba(0, 0, 0, 0.04);
    --sombra-fuerte: 0 8px 24px rgba(0, 0, 0, 0.08);
    --sombra-hover: 0 12px 32px rgba(0, 0, 0, 0.12);
    --radio-borde: 8px; 
}

/* ==========================================
   2. BASE Y BODY (Compartido)
   ========================================== */
body {
    margin: 0;
    font-family: var(--fuente-principal);
    background: var(--color-fondo);  
    color: var(--color-texto-medio);
}

.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page-wrapper > footer {
    margin-top: auto;
}

h2 {
    text-align: center;
    font-size: 2rem;
    color: var(--color-texto-oscuro);
    margin-bottom: 25px;
}

/* ==========================================
   3. HEADER Y NAVEGACIÓN
   ========================================== */
header {
    background: var(--color-blanco);
    padding: 15px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05); 
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    max-width: 1100px;
    margin: auto;
    padding: 0 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.logo {
    height: 55px; 
    transition: transform 0.3s ease;
}

.logo:hover {
    transform: scale(1.02);
}

.header-center {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.header-center p {
    display: none;
}

nav {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 25px; 
}

nav a {
    color: var(--color-texto-oscuro) !important; /* Forzamos el color oscuro para que no desaparezca */
    text-decoration: none;
    font-weight: 500;  
    font-size: 0.95rem;
    padding: 5px 0;
    position: relative;
    transition: color 0.3s;
}

nav a:hover,
nav a.activo {
    color: var(--color-primario) !important; 
}

nav a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: var(--color-secundario); 
    transition: width 0.3s ease;
}

nav a:hover::after,
nav a.activo::after {
    width: 100%;
}

/* ==========================================
   3.1 APAÑO BOTÓN CAMPUS EN ALGUNAS PÁGINAS
   ========================================== */

   .btn-campus {
    display: inline-block;
    background-color: #004b6e;
    color: #ffffff !important;
    padding: 8px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600; /* Para que la letra tenga un poco más de grosor */
    transition: background-color 0.3s ease;
}

.btn-campus:hover {
    background-color: #003853;
    color: #ffffff !important;
}

/* ==========================================
   4. FOOTER PROFESIONAL
   ========================================== */
.footer-profesional {
    background-color: var(--color-texto-oscuro); /* Un gris carbón/negro elegante */
    color: var(--color-fondo);
    padding: 60px 20px 20px 20px;
    margin-top: 60px;
    font-size: 0.95rem;
}

/* --- Parte Superior: Columnas --- */
.footer-container {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    /* Crea las 3 columnas y en móvil se pone automáticamente 1 debajo de otra */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 50px;
}

.footer-col h4 {
    color: var(--color-secundario); /* Títulos en amarillo mostaza del logo */
    font-size: 1.2rem;
    margin-top: 0;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

/* Detalle: Pequeña línea amarilla debajo de los títulos del footer */
.footer-col h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background-color: var(--color-secundario);
}

.footer-col p {
    color: #d1d1d1;
    line-height: 1.6;
    margin: 0;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul li a {
    color: #d1d1d1;
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease;
}

/* Efecto al pasar el ratón: se pone amarillo y se mueve un poco a la derecha */
.footer-col ul li a:hover {
    color: var(--color-secundario);
    padding-left: 5px; 
}

.footer-contacto li {
    color: #d1d1d1;
}

/* Botones de Redes Sociales */
.footer-socials {
    display: flex;
    gap: 10px;
    margin-top: 25px;
    flex-wrap: wrap;
}

.footer-socials a {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.08); /* Fondo gris translúcido */
    color: var(--color-blanco);
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.footer-socials a:hover {
    background-color: var(--color-secundario);
    color: var(--color-texto-oscuro);
    transform: translateY(-3px);
}

/* --- Parte Inferior: Logos y Copyright --- */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Línea separadora muy sutil */
    padding-top: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.footer-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-logos img {
    max-height: 70px;
    width: auto;
    object-fit: contain;
}


.footer-bottom p {
    color: #a1a1a1; /* Letra un poco más oscura para que no moleste a la vista */
    font-size: 0.9rem;
    margin: 0;
    text-align: center;
    flex: 1 1 300px;
}

.logo-group-side {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* ¡CLAVE! Si los logos no caben a lo ancho, los baja a la siguiente línea en lugar de salirse */
    height: auto;
    max-width: 100%; /* Le prohíbe terminantemente ser más ancho que su padre */
    gap: 20px; /* Lo bajamos un pelín para que no estire tanto la caja */
    margin: 15px 0; /* Solo damos margen arriba y abajo (15px), y CERO a los lados (0) para que no desborde */
}

/* Y por si acaso, le recordamos a las imágenes de dentro que sean obedientes */
.logo-group-side img {
    max-width: 100%; /* Las imágenes nunca podrán ser más grandes que la caja */
    object-fit: contain;
}
/* Para teléfonos móviles: los logos se apilan y el texto va abajo */
@media (max-width: 768px) {
    .footer-logos {
        flex-direction: column;
        justify-content: center;
    }
    .footer-bottom p {
        order: 3; 
        margin-top: 20px;
    }
}
/* ==========================================
   SELLOS ISO (Añadido en la Columna 1)
   ========================================== */
.certificaciones-iso {
    display: flex;
    gap: 15px; /* Separación entre los sellos */
    margin-top: 25px; /* Separación con el texto de arriba */
    flex-wrap: wrap; /* Por si en móviles necesitan bajar a la siguiente línea */
}

.certificaciones-iso img {
    height: 75px; 
    width: auto;
    object-fit: contain;
    filter: grayscale(20%); /* Opcional: los apaga un pelín para que integren mejor con el fondo oscuro, quítalo si los quieres 100% a color */
    transition: transform 0.3s ease;
}

.certificaciones-iso img:hover {
    transform: scale(1.05); /* Pequeño efecto al pasar el ratón */
}

/* ==========================================
   5. ESTILOS ESPECÍFICOS: INDEX.HTML
   ========================================== */

/* Hero Dinámico */
.hero-dinamico {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    max-width: 1100px;
    margin: 50px auto;
    padding: 0 20px;
    flex-wrap: wrap;
}

.hero-contenido { flex: 1 1 500px; }

.hero-contenido h1 {
    font-size: 2.8rem;
    color: var(--color-texto-oscuro);
    line-height: 1.2;
    margin-bottom: 20px;
    margin-top: 0;
}

.hero-contenido h1 .destacado {
    color: var(--color-primario);
    display: block;
}

.hero-contenido p {
    font-size: 1.1rem;
    margin-bottom: 30px;
    line-height: 1.6;
}

.hero-botones { display: flex; gap: 15px; flex-wrap: wrap; }

.btn-principal, .btn-secundario, .btn-blanco {
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-principal {
    background: var(--color-primario);
    color: var(--color-blanco) !important;
    border: 2px solid var(--color-primario);
}

.btn-principal:hover {
    background: var(--color-primario-claro);
    border-color: var(--color-primario-claro);
    transform: translateY(-2px);
    box-shadow: var(--sombra-fuerte);
}


.btn-secundario {
    background: transparent;
    color: var(--color-primario);
    border: 2px solid var(--color-primario);
}

.btn-secundario:hover {
    background: var(--color-primario-claro); 
    color: var(--color-blanco) !important;
    border-color: var(--color-primario-claro);
    transform: translateY(-2px);
    box-shadow: var(--sombra-fuerte);
}

.hero-imagen-wrapper { flex: 1 1 400px; }
.hero-img { width: 100%; border-radius: 20px; box-shadow: var(--sombra-fuerte); display: block;}

/* Grid de Ventajas (4 tarjetas) */
.seccion-ventajas {
    max-width: 1100px;
    margin: 60px auto;
    padding: 0 20px;
}

.grid-ventajas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.ventaja-card {
    background: var(--color-blanco);
    padding: 25px;
    border-radius: var(--radio-borde);
    box-shadow: var(--sombra-suave);
    border-top: 4px solid var(--color-primario);
    transition: transform 0.3s ease;
}

.ventaja-card:hover { transform: translateY(-5px); box-shadow: var(--sombra-fuerte); }
.ventaja-card h3 { color: var(--color-primario); font-size: 1.1rem; margin-top: 0; margin-bottom: 10px; }
.ventaja-card p { font-size: 0.95rem; line-height: 1.5; color: var(--color-texto-oscuro); margin: 0; }

/* Contenedor forzado a 3 tarjetas en línea */
.cursos-relevantes { padding: 40px 20px; }
.cursos-en-linea {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 25px;
    max-width: 1000px;
    margin: 0 auto;
}

.card {
    background-color: var(--color-secundario);
    border-radius: var(--radio-borde);
    padding: 15px;
    box-shadow: var(--sombra-suave);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover { transform: translateY(-5px); box-shadow: var(--sombra-hover); }
.course-img { width: 100%; height: 160px; object-fit: cover; border-radius: 5px; margin-bottom: 15px; }
.card h3 { font-size: 1.2rem; color: var(--color-primario); margin-bottom: 10px; margin-top: 0; }
.card p { font-size: 0.95rem; color: var(--color-texto-oscuro); margin-bottom: 0; line-height: 1.5;}

@media (max-width: 768px) {
    .cursos-en-linea { grid-template-columns: 1fr; }
}

/* Banner de Cierre */
.banner-cta {
    background: var(--color-primario);
    color: var(--color-blanco);
    padding: 60px 20px;
    text-align: center;
    margin-top: 60px;
}

.banner-contenido { 
    max-width: 800px; 
    margin: 0 auto; 
}

.banner-contenido h2 { 
    color: var(--color-blanco);
    margin-bottom: 20px; 
    margin-top: 0;
}

.banner-contenido p { 
    color: var(--color-secundario); 
    font-size: 1.1rem; margin-bottom: 30px; 
    line-height: 1.6;
}

.btn-blanco { 
    background: 
    var(--color-blanco); 
    color: var(--color-primario); 
}

.btn-blanco:hover { 
    background: 
    var(--color-secundario); 
    color: var(--color-primario-oscuro); 
    transform: translateY(-2px); 
}

.cta-modalidades {
    text-align: center;
    margin-top: 50px;
}

.cta-modalidades p {
    font-size: 1.1rem;
    color: var(--color-texto-medio);
    margin: 0 auto 25px auto; 
    max-width: 650px; 
    line-height: 1.6;
}

/* ==========================================
   SECCIÓN "DÓNDE ESTAMOS" (5 Mapas)
   ========================================== */

.donde-estamos-resumen {
    /* Aquí pones el nombre de la imagen de fondo que quieras usar */
    background: url('images/imagenMalaga.jpg') no-repeat center center;
    background-size: cover;
    padding: 100px 20px; 
    position: relative;
}

/* Capa oscura semitransparente general de la foto */
.donde-estamos-resumen::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 79, 113, 0.2); /* Azul muy suave para no tapar mucho */
    z-index: 1;
}

.donde-estamos-contenido {
    /* Esta es la tarjeta blanca que flota encima del fondo */
    position: relative;
    z-index: 2; 
    
    /* EFECTO CRISTAL / SEMITRANSPARENTE */
    background: rgba(255, 255, 255, 0.65); 
    backdrop-filter: blur(8px); /* Hace que el fondo se vea borrosito por detrás, muy premium */
    
    text-align: center;
    padding: 40px 20px 32px 32px;
    margin: 0px 0px 32px 32px;
    max-width: 1200px; /* ¡AMPLIADO! Para que quepan los 5 mapas en línea */
    border-radius: var(--radio-borde);
    box-shadow: var(--sombra-fuerte);
    border-top: 5px solid var(--color-secundario);
}

.donde-estamos-contenido h2 {
    color: var(--color-primario);
    margin-top: 0;
    margin-bottom: 20px;
}

.donde-estamos-contenido p {
    color: var(--color-texto-oscuro);
    font-size: 1.05rem;
    margin-bottom: 30px;
    line-height: 1.6;
    font-weight: 600; /* Un poco más de peso para que se lea perfecto sobre el fondo transparente */
}

/* --- GRID DE MAPAS EN 1 SOLA LÍNEA --- */
.mapas-grid {
    display: flex;
    flex-wrap: nowrap; /* Fuerza a que no salten a la línea de abajo */
    gap: 15px; /* Separación entre mapas */
    justify-content: space-between; 
    padding: 20px 0;
}

/* Estilo de cada bloque de mapa */
.map-item {
    flex: 1 1 0; /* Todos se reparten el espacio exactamente igual */
    min-width: 0; /* Fundamental para que no rompan el contenedor */
    background: rgba(255, 255, 255, 0.95); /* Fondo casi sólido para que el texto del mapa se lea bien */
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    text-align: center;
    
    /* Preparamos la animación del Hover */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative; /* Para el z-index */
}

/* EFECTO HOVER: Se amplía al pasar el ratón */
.map-item:hover {
    transform: scale(1.15); /* Crece un 15% */
    box-shadow: 0 15px 30px rgba(0,0,0,0.3); /* Sombra más intensa al elevarse */
    z-index: 10; /* Se pone por encima de sus hermanos para no quedar tapado */
}

.map-container {
    width: 100%;
    height: 160px; /* Mapas más bajitos para que queden proporcionales al estar los 5 juntos */
    overflow: hidden;
    border-radius: 4px;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.map-item h3 {
    font-size: 0.85rem; /* Texto más pequeño y fino */
    margin-bottom: 10px;
    color: #333;
    min-height: 35px; /* Alinea los títulos si alguno ocupa dos líneas */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- ADAPTACIÓN PARA MÓVILES --- */
/* En el móvil es imposible meter 5 mapas en línea sin que midan 2 milímetros, así que le ponemos scroll horizontal (como Instagram o Netflix) */
@media (max-width: 992px) {
    .mapas-grid {
        overflow-x: auto; 
        padding-bottom: 15px; 
        justify-content: flex-start;
        scroll-snap-type: x mandatory; /* Suaviza el scroll con el dedo */
    }
    .map-item {
        flex: 0 0 250px; /* Tamaño fijo en móvil para que el usuario deslice */
        scroll-snap-align: center;
    }
    .map-item:hover {
        transform: none; /* Desactivamos el zoom en móviles, allí el hover no existe y da problemas táctiles */
    }
}
/* ==========================================
   6. CABECERA PÁGINAS INTERNAS
   ========================================== */

.cabecera-pagina {
    background: linear-gradient(135deg, var(--color-primario), #00334e);
    color: var(--color-blanco);
    text-align: center;
    padding: 60px 20px;
    margin-bottom: 50px;
}

.cabecera-pagina h1 {
    font-size: 2.5rem;
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--color-blanco) !important;
}

.cabecera-pagina p {
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto;
    color: var(--color-secundario) !important; /* El amarillo mostaza resalta sobre el azul */
    line-height: 1.6;
}

/* ==========================================
   7. ESTILOS ESPECÍFICOS: CURSOS.HTML
   ========================================== */
.contenedor-cursos {
    max-width: 1100px;
    margin: 0 auto 60px auto;
    padding: 0 20px;
}

.grid-familias {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.card-familia {
    background: var(--color-blanco);
    border-radius: var(--radio-borde);
    overflow: hidden;
    box-shadow: var(--sombra-suave);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.card-familia:hover {
    transform: translateY(-8px);
    box-shadow: var(--sombra-fuerte);
}

.imagen-familia img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.contenido-familia {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.contenido-familia h3 {
    color: var(--color-primario);
    font-size: 1.4rem;
    margin-top: 0;
    margin-bottom: 15px;
}

.contenido-familia p {
    color: var(--color-texto-oscuro);
    margin-bottom: 25px;
    line-height: 1.5;
    flex: 1;
}

.contenido-familia .btn-principal {
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

/* ==========================================
   8. ESTILOS ESPECÍFICOS: BENEFICIOS.HTML
   ========================================== */
.seccion-beneficios {
    max-width: 1100px;
    margin: 40px auto 80px auto;
    padding: 0 20px;
}

.grid-beneficios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.beneficio-card {
    background: var(--color-blanco);
    padding: 30px 25px;
    border-radius: var(--radio-borde);
    box-shadow: var(--sombra-suave);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-bottom: 4px solid transparent;
}

.beneficio-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--sombra-fuerte);
    border-bottom-color: var(--color-primario);
}

.icono-beneficio {
    font-size: 3rem;
    margin-bottom: 15px;
    display: inline-block;
    background: var(--color-fondo);
    width: 80px;
    height: 80px;
    line-height: 80px;
    border-radius: 50%;
    color: var(--color-primario);
}

.beneficio-card h3 {
    color: var(--color-primario);
    font-size: 1.2rem;
    margin-top: 0;
    margin-bottom: 15px;
}

.beneficio-card p {
    color: var(--color-texto-oscuro);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* ==========================================
   9. ESTILOS ESPECÍFICOS: CONTACTO.HTML
   ========================================== */
.contenedor-contacto {
    max-width: 1100px;
    margin: 0 auto 50px auto;
    padding: 0 20px;
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.info-block, .form-block {
    flex: 1 1 400px;
    background: var(--color-blanco);
    padding: 35px;
    border-radius: var(--radio-borde);
    box-shadow: var(--sombra-suave);
}

.info-block h3, .form-block h3,  h3 {
    color: var(--color-primario);
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 1.5rem;
}

.info-item {
    background: var(--color-fondo);
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 15px;
    color: var(--color-texto-oscuro);
    font-size: 1.05rem;
}

.mt-4 {
    margin-top: 40px;
}

/* Formulario */
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-family: var(--fuente-principal);
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.3s, box-shadow 0.3s;
    background-color: #fdfdfd;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px rgba(0, 74, 173, 0.1); /* Efecto de brillo azul al hacer click */
}

.contact-form textarea {
    min-height: 160px;
    resize: vertical;
}

.contact-form button {
    width: 100%;
    font-size: 1.1rem;
    cursor: pointer;
    border: none;
}

/* Redes sociales */
.social-links {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.social-links a {
    flex: 1;
    min-width: 100px;
    text-align: center;
    background: var(--color-fondo);
    color: var(--color-primario);
    font-weight: 600;
    text-decoration: none;
    padding: 12px 10px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.social-links a:hover {
    background: var(--color-primario);
    color: var(--color-blanco);
    transform: translateY(-2px);
}

/* ==========================================
   10. ESTILOS ESPECÍFICOS: SOBRE-NOSOTROS.HTML
   ========================================== */
.historia-seccion, .filosofia-valores-seccion {
    max-width: 1100px;
    margin: 0 auto 60px auto;
    padding: 0 20px;
}

.historia-container, .filosofia-container {
    display: flex;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
    background: var(--color-blanco);
    padding: 40px;
    border-radius: var(--radio-borde);
    box-shadow: var(--sombra-suave);
}

/* Invertir el orden en móvil para Filosofía (para que la imagen vaya arriba) */
.filosofia-container {
    flex-direction: row-reverse;
}

.historia-imagen, .filo-imagen {
    flex: 1 1 400px;
}

.historia-img, .filo-img {
    width: 100%;
    border-radius: var(--radio-borde);
    box-shadow: var(--sombra-fuerte);
    display: block;
}

.historia-texto, .filo-texto {
    flex: 1 1 400px;
}

.historia-texto h2, .filo-texto h2 {
    text-align: left;
    margin-top: 0;
}

.lista-valores {
    list-style: none;
    padding-left: 0;
    margin-top: 15px;
}

.lista-valores li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    color: var(--color-texto-oscuro);
    line-height: 1.5;
}

/* Checkmark personalizado para la lista de valores */
.lista-valores li::before {
    content: '✔';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-primario);
    font-weight: bold;
    font-size: 1.2rem;
}

@media (max-width: 768px) {
    .historia-container, .filosofia-container {
        padding: 25px;
        gap: 30px;
    }
    .historia-texto h2, .filo-texto h2 {
        text-align: center;
    }
}

/* ==========================================
   11. ESTILOS ESPECÍFICOS: CATEGORÍAS DE CURSOS (Comercio, etc.)
   ========================================== */
.contenedor-cursos-detalle {
    max-width: 1100px;
    margin: 0 auto 60px auto;
    padding: 0 20px;
}

.volver-container {
    margin-bottom: 30px;
}

.grid-cursos-detalle {
    display: grid;
    /* Ajuste automático de columnas, mínimo 300px */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.card-curso-detalle {
    background: var(--color-blanco);
    border-radius: var(--radio-borde);
    box-shadow: var(--sombra-suave);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0,0,0,0.03);
}

.card-curso-detalle:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra-fuerte);
}

.img-curso-detalle {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-bottom: 3px solid var(--color-secundario); /* Línea mostaza decorativa */
}

.info-curso-detalle {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.info-curso-detalle h3 {
    color: var(--color-primario);
    font-size: 1.15rem;
    margin-top: 0;
    margin-bottom: 15px;
    line-height: 1.4;
}

.horas-badge {
    display: inline-block;
    background: var(--color-fondo);
    color: var(--color-texto-oscuro);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 25px;
    align-self: flex-start; /* Evita que el badge ocupe todo el ancho */
    border: 1px solid rgba(0,0,0,0.06);
}

.info-curso-detalle .btn-principal {
    margin-top: auto; /* Empuja siempre el botón al fondo de la tarjeta */
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}


/* Ajustes del Header Center para alinear Nav y Buscador */
.header-center {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Separa el nav del buscador */
    flex-grow: 1;
    margin-left: 40px; /* Empuja el nav más a la izquierda, cerca del logo */
}

.nav-principal {
    margin-right: auto; /* Fuerza al buscador a quedarse a la derecha */
}

/* Estilos del Buscador */
form.search-container {
    display: flex;
    align-items: center;
    background: #f4f4f4;
    border-radius: 20px;
    padding: 5px 15px;
    border: 1px solid #ddd;
    transition: all 0.3s ease;
}

.search-container:focus-within {
    background: #fff;
    border-color: var(--color-principal); /* El azul de tu logo */
    box-shadow: 0 0 8px rgba(0, 51, 102, 0.1);
}

#busqueda-cursos {
    border: none;
    background: transparent;
    outline: none;
    padding: 5px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    width: 180px; /* Tamaño ideal para no apretar el menú */
}

.btn-search {
    background: none;
    border: none;
    color: var(--color-principal);
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0;
}

.btn-search:hover {
    color: var(--color-secundario); /* El amarillo mostaza al pasar el ratón */
}

/* Ajuste responsive para móviles */
@media (max-width: 768px) {
    .header-center {
        flex-direction: column;
        margin-left: 0;
    }
    .search-container {
        margin-top: 10px;
        width: 100%;
    }
}

/* Contenedor de las familias */
.grid-familias {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Adaptación para Tablets (2 arriba y 2 abajo) --- */
@media (max-width: 1024px) {
    .grid-familias {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Adaptación para Móviles (1 debajo de otra) --- */
@media (max-width: 768px) {
    .grid-familias {
        grid-template-columns: 1fr;
    }
}

/* La tarjeta (familia-card es la que usa el JS) */
.familia-card {
    background: var(--color-blanco);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--sombra-suave);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    display: flex;
    flex-direction: column;
    height: 100%; /* 🔥 CLAVE */
    border: 1px solid #eee;
}

.familia-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--sombra-fuerte);
}

.familia-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* CONTENIDO */
.familia-contenido {
    padding: 20px;
    text-align: center;

    display: flex;
    flex-direction: column;
    flex: 1; /* 🔥 CLAVE */
}

.familia-contenido h3 {
    color: var(--color-primario);
    margin-bottom: 10px;
    font-size: 1.4rem;
    font-weight: bold;

}

.familia-contenido p {
    color: #666;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.familia-contenido .btn-principal {
    margin-top: auto; /* 🔥 ESTO ALINEA TODOS LOS BOTONES */
}

.header-center {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.nav-principal {
    margin-left: 50px; /* Esto mueve el menú más a la izquierda */
}

form.search-container {
    margin-left: auto; /* Esto empuja el buscador totalmente a la derecha */
}


/* ==========================================
   12. ESTILOS DE LA FICHA DE CURSO (FP)
   ========================================== */

.seccion-ficha-curso {
    max-width: 1100px;
    margin: 40px auto 80px auto;
    padding: 0 20px;
}

/* Breadcrumbs / Volver */
.breadcrumb-container {
    margin-bottom: 30px;
}

.btn-volver {
    text-decoration: none;
    color: var(--color-texto-claro);
    font-weight: 500;
    transition: color 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-volver:hover {
    color: var(--color-primario);
}

/* Grid Principal */
.ficha-curso-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 50px;
    align-items: start;
}

/* Columna Imagen */
.ficha-imagen-container {
    position: sticky;
    top: 20px;
}

.wrapper-img {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--sombra-fuerte);
}

.img-fluida {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.wrapper-img:hover .img-fluida {
    transform: scale(1.05);
}

.badge-flotante {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--color-secundario);
    color: var(--color-texto-oscuro);
    padding: 8px 15px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.info-extra-curso {
    display: flex;
    gap: 20px;
    margin-top: 25px;
}

.dato-clave {
    flex: 1;
    background: var(--color-blanco);
    padding: 15px;
    border-radius: 12px;
    text-align: center;
    box-shadow: var(--sombra-suave);
    border: 1px solid rgba(0,0,0,0.05);
}

.dato-clave i {
    display: block;
    color: var(--color-primario);
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.dato-clave span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-texto-oscuro);
}

/* Columna Información */
.meta-info {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
}

.horas-tag, .categoria-tag {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 6px;
}

.horas-tag { background: #e0f2fe; color: #0369a1; }
.categoria-tag { background: #fef3c7; color: #92400e; }

.titulo-curso {
    font-size: 2.2rem;
    color: var(--color-primario);
    line-height: 1.2;
    margin-bottom: 25px;
    text-align: left; /* Sobrescribimos el h2/h1 centrado general */
}

.cuerpo-descripcion h3 {
    color: var(--color-texto-oscuro);
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.cuerpo-descripcion p {
    line-height: 1.7;
    margin-bottom: 20px;
    color: var(--color-texto-medio);
}

.puntos-clave-box {
    background: #f8fafc;
    padding: 25px;
    border-radius: 15px;
    border-left: 5px solid var(--color-secundario);
    margin: 30px 0;
}

.puntos-clave-box h4 {
    margin-top: 0;
    color: var(--color-primario);
    margin-bottom: 15px;
}

.puntos-clave-box ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.puntos-clave-box li {
    position: relative;
    padding-left: 25px;
    font-size: 0.95rem;
}

.puntos-clave-box li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--color-secundario);
}

/* Acciones Finales */
.ficha-acciones-pago {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #e2e8f0;
}

.btn-lg {
    padding: 18px 40px;
    font-size: 1.1rem;
    width: 100%;
    text-align: center;
}

.nota-ayuda {
    margin-top: 15px;
    font-size: 0.85rem;
    color: var(--color-texto-claro);
    text-align: center;
}

/* Responsive */
@media (max-width: 900px) {
    .ficha-curso-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .ficha-imagen-container {
        position: relative;
        top: 0;
    }
    .titulo-curso {
        font-size: 1.8rem;
    }
    .puntos-clave-box ul {
        grid-template-columns: 1fr;
    }
}

/* --- CONTENEDOR DE LA SECCIÓN --- */
.seccion-modulos {
    margin: 30px 0;
}

.seccion-modulos h4 {
    color: var(--oscuro);
    margin-bottom: 15px;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --- TABLA ELEGANTE --- */
.tabla-contenedor {
    overflow-x: auto; /* Para que sea responsive en móviles */
    border-radius: 8px;
    border: 1px solid var(--borde);
}

.tabla-modulos {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    background-color: var(--blanco);
}

.tabla-modulos thead {
    background-color: var(--primario);
    color: var(--blanco);
    text-align: left;
}

.tabla-modulos th, 
.tabla-modulos td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--borde);
}

/* Estilo Zebra (Filas alternas) */
.tabla-modulos tbody tr:nth-of-type(even) {
    background-color: #fcfcfc;
}

.tabla-modulos tbody tr:hover {
    background-color: #f0f7ff; /* Color de realce al pasar el ratón */
}

/* Columna de Códigos (más estrecha y negrita) */
.tabla-modulos td:first-child {
    font-weight: bold;
    color: var(--primario);
    width: 80px;
}

/* Fila de Prácticas destacada */
.fila-destacada {
    background-color: #eafaf1 !important; /* Verde suave */
    font-weight: bold;
}

.fila-destacada td:first-child {
    color: var(--secundario);
}

/* --- RESPONSIVE --- */
@media (max-width: 480px) {
    .tabla-modulos {
        font-size: 0.85rem;
    }
    .tabla-modulos th:nth-child(3), 
    .tabla-modulos td:nth-child(3) {
        display: none; /* Oculta las horas en móviles muy pequeños para legibilidad */
    }
}

/* Contenedor principal con alineación arriba para activar el sticky */
.ficha-curso-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 40px;
    align-items: start; /* Obligatorio para que la sidebar pueda 'flotar' */
}

/* La columna que se queda estática */
.ficha-sidebar {
    position: -webkit-sticky; /* Soporte Safari */
    position: sticky;
    top: 20px; /* Margen superior cuando empieza el scroll */
    height: fit-content; /* Se ajusta a su contenido para no bloquear el scroll del padre */
}

/* Responsive: Desactivar efecto en móviles */
@media (max-width: 992px) {
    .ficha-curso-grid {
        grid-template-columns: 1fr;
    }
    .ficha-sidebar {
        position: static;
        margin-bottom: 30px;
    }
}

/* --- SIDEBAR STICKY --- */
.ficha-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 10px; /* Pegado más arriba para ganar espacio */
    height: fit-content;
    padding-right: 15px; /* Separación con la columna derecha */
}

/* --- GRID DE ESTADÍSTICAS (Iconos rediseñados) --- */
.stats-grid-sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #ffffff; /* Fondo blanco limpio */
    padding: 12px 15px;
    border-radius: 10px;
    border: 1px solid #eef2f6;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Sombra muy sutil */
}

.stat-card i {
    font-size: 1.4rem;
    color: #0056b3; /* Tu color primario */
    width: 30px;
    text-align: center;
}

.stat-text {
    display: flex;
    flex-direction: column;
}

.stat-text strong {
    font-size: 1rem;
    color: #333;
    line-height: 1.2;
}

.stat-text span {
    font-size: 0.8rem;
    color: #666;
}

/* --- TEXTO DE PARTNERS --- */
.partners-sidebar {
    margin-top: 20px;
    padding: 0 5px;
}

.partners-sidebar h5 {
    font-size: 0.85rem;
    color: #444;
    margin-bottom: 5px;
    font-weight: 600;
}

.partners-sidebar p {
    font-size: 0.8rem;
    color: #777;
    line-height: 1.4;
}

/* --- AJUSTE DE LA IMAGEN --- */
.wrapper-img {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    margin-bottom: 5px;
}

.badge-flotante {
    background: #ffb703; /* Amarillo como en tu imagen */
    color: #000;
    font-weight: bold;
    padding: 4px 12px;
    font-size: 0.75rem;
    border-radius: 5px;
}