/* --- Globales --- */
:root {
    --azul-inem: #607d8b; /* Cambiado a verde según tu código base */
    --amarillo-inem: #ffc107;
    --verde-inem: #607d8b;
    --azul-institucional: #130f40; /* Color para botones y fondos oscuros */
}

body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    margin: 0; 
    color: #333; 
    line-height: 1.6;
}

.container { 
    max-width: 1100px; 
    margin: 0 auto; 
    padding: 0 20px; 
}

/* --- Ajuste Global de Secciones --- */
section {
    padding: 25px 0 !important;
    margin: 0 !important;
}

/* --- Títulos Superiores --- */
.modality-intro {
    text-align: center;
    padding-top: 20px !important;
    padding-bottom: 5px !important;
}

.subtitle-modalidad { 
    text-align: center;
    font-weight: 700;         /* Negrita marcada */
        letter-spacing: 1.5px;    /* Espaciado entre letras para mejor legibilidad */
        display: block;           /* Asegura que ocupe su propia línea arriba del título */
        margin-top: 10px;       /* Espacio respecto al título que sigue */
        font-family: 'Segoe UI', Roboto, sans-serif;
        text-align: center;
    color: var(--azul-inem); 
    font-weight: bold; 
    text-transform: uppercase; 
    letter-spacing: 1.5px;
    font-size: 1.1rem;
}

.main-title {
    color: var(--azul-inem);
    font-size: 2.8rem;
    margin: 5px 0;
    font-weight: 800;
    text-align: center;
}

.main-subtitle {
    text-align: center;
    color: #666;
    font-size: 1.1rem;
    margin: 0;
    font-style: italic;
}

/* --- Slider --- */
.slider-container {
    position: relative;
    max-width: 1000px;
    height: 450px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    background-color: #eee;
}

.slide {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.slide.active { display: block; }
.slide img { width: 100%; height: 100%; object-fit: cover; }

.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(10, 42, 102, 0.6);
    color: white;
    width: 45px;
    height: 45px;
    border: none;
    cursor: pointer;
    font-size: 20px;
    z-index: 10;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin: 0 15px;
}

.prev:hover, .next:hover { 
    background: var(--amarillo-inem); 
    color: var(--azul-institucional);
    transform: translateY(-50%) scale(1.1);
}

.next { right: 0; }
.prev { left: 0; }

/* --- Descripción --- */
.modality-info { 
    text-align: center; 
    background: #fdfdfd; 
    padding-top: 20px !important;
}

.modality-info h2 { color: var(--azul-inem); font-size: 2rem; margin-bottom: 15px; }
.modality-info p { font-size: 1.05rem; max-width: 850px; margin: 0 auto; color: #555; }

/* --- Objetivos --- */
.modality-objectives { background: #f4f7fb; }
.section-title { text-align: center; color: var(--azul-inem); margin-bottom: 30px; }
.objectives-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }

.obj-card {
    background: white; 
    padding: 25px; 
    border-radius: 15px; 
    text-align: center;
    border-bottom: 5px solid var(--azul-institucional);
    box-shadow: 0 8px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s;
}
.obj-card:hover { transform: translateY(-8px); }
.obj-card i { font-size: 2.2rem; color: var(--azul-inem); margin-bottom: 15px; }
.obj-card h3 { color: var(--azul-inem); font-size: 1.3rem; margin-bottom: 10px; }

/* --- PERFIL OCUPACIONAL (AJUSTADO 50/50) --- */
.profile-box { 
    display: flex; 
    align-items: center; 
    justify-content: center;
    gap: 20px; 
    
    /* 1. Color de fondo (Gris Acero Industrial) */
    background-color: #607d8b; 
    
    /* 2. Patrón de Engranajes y Nodos (Ajustado) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-opacity='0.15'%3E%3Ccircle cx='40' cy='40' r='12'/%3E%3Cpath d='M40 20 L40 10 M40 70 L40 60 M20 40 L10 40 M70 40 L60 40 M26 26 L18 18 M62 62 L54 54 M26 54 L18 62 M62 26 L54 18'/%3E%3Ccircle cx='10' cy='10' r='3'/%3E%3Ccircle cx='70' cy='10' r='3'/%3E%3Ccircle cx='10' cy='70' r='3'/%3E%3Ccircle cx='70' cy='70' r='3'/%3E%3C/g%3E%3C/svg%3E");
    
    background-size: 130px 130px;
    background-blend-mode: soft-light; 
    
    color: white; 
    border-radius: 10px; /* Bordes más rectos, más industriales */
    padding: 50px;
    min-height: 300px;
    position: relative;
    overflow: hidden;
    
    /* Efecto de placa de metal */
    border: 2px solid #90a4ae;
    box-shadow: inset 0 0 100px rgba(0,0,0,0.2), 0 10px 30px rgba(0,0,0,0.3);
    transition: all 0.5s ease;
}

/* --- 1. BRILLO DE FUNDICIÓN (Efecto de metal caliente) --- */
.profile-box::before {
    content: "";
    position: absolute;
    bottom: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 111, 0, 0.2) 0%, transparent 70%);
    filter: blur(20px);
    transition: 0.6s;
    pointer-events: none;
}

/* --- 2. EFECTO DE PULIDO (Reflejo metálico móvil) --- */
.profile-box::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent,
        rgba(255, 255, 255, 0.15),
        transparent
    );
    transform: skewX(-20deg);
    transition: 0.8s;
}

/* --- 3. HOVER: REACCIÓN TÉRMICA E INDUSTRIAL --- */
.profile-box:hover {
    transform: translateY(-5px);
    background-color: #455a64; /* El metal se "templa" a un tono más oscuro */
    border-color: #ff6f00; /* El borde se ilumina como si estuviera caliente */
    box-shadow: 0 0 25px rgba(255, 111, 0, 0.3), inset 0 0 50px rgba(0,0,0,0.4);
}

.profile-box:hover::after {
    left: 150%; /* El reflejo cruza como cuando limpias acero */
}

.profile-box:hover::before {
    bottom: -20%;
    right: -20%;
    background: radial-gradient(circle, rgba(255, 111, 0, 0.4) 0%, transparent 70%);
}

/* Ajuste de Texto */
.profile-text h2 {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    /* Efecto de texto grabado */
    text-shadow: 1px 1px 0px #37474f, 2px 2px 5px rgba(0,0,0,0.5);
}

.profile-text li i {
    color: #dff9fb; /* Azul Cian muy claro (Opción de resalte) para simular el brillo del acero */
}

.profile-text { 
    flex: 1; /* Ocupa la mitad izquierda */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el bloque de texto en su mitad */
    text-align: center;
}

.profile-text h2 { color: var(--azul-institucional); font-size: 2.2rem; margin-bottom: 15px; }

.profile-text ul { list-style: none; padding: 0; text-align: left; }

.profile-text li { 
    margin-bottom: 12px; 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    font-size: 1.1rem;
}

.profile-text li i { color: var(--azul-institucional); }

.profile-img { 
    flex: 1; /* Ocupa la mitad derecha */
    display: flex;
    justify-content: center; /* Centra la imagen en su mitad */
    align-items: center;
}

.profile-img img { 
    width: 80%; /* Tamaño relativo a su mitad */
    max-width: 200px;
    height: auto; 
    object-fit: cover; 
    border-radius: 15px;
    border: 2px solid white; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .profile-box { flex-direction: column; padding: 25px; }
    .profile-img { width: 100%; }
    .profile-img img { width: 100%; }
    .main-title { font-size: 2.2rem; }
    .slider-container { height: 300px; }
}