/* Contenedor principal */
.hero-static-section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Imagen hero */
.hero-static-img {
    width: 100%;
    height: auto; /* respeta proporción de la imagen */
    display: block;
}

/* Contenedor del contenido */
.hero-item-content {
    position: relative;
}

/* Texto centrado */
.hero-static-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    text-align: center;
    max-width: 900px;
    width: 90%;
    color: white;
}

/* Título */
.hero-static-caption h2 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

/* Bajada */
.hero-static-text {
    font-size: 1.5rem;
    color: #EC1C23;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .hero-static-caption h2 { font-size: 2.5rem; }
    .hero-static-text { font-size: 1.2rem; }
    .hero-item-content {
    margin-top:77px;
   }
}

@media (max-width: 768px) {
    .hero-static-caption h2 { font-size: 1.8rem; }
    .hero-static-text { font-size: 1rem; }
    .hero-item-content {
    margin-top:77px;
   }
}

@media (max-width: 480px) {
    .hero-static-caption h2 { font-size:2.3rem; }
    .hero-static-text { font-size: 1.5rem; }
     .hero-item-content {
    margin-top:77px;
   }
}

.hero-static-caption h2,
.hero-static-caption .hero-static-bajada {
  opacity: 0;
  transform: translateY(20px); /* opcional: efecto de desplazamiento */
  animation: fadeInUp 1s forwards;
  animation-delay: 0.3s; /* retraso para que no aparezca inmediatamente */
}

.hero-static-caption .hero-static-bajada {
  animation-delay: 1s; /* aparece después del título */
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.main-container {
    display: flex;
    width: 100%;
    min-height: 80vh;
    align-items: center;
    gap: 40px;
    padding: 40px 20px;
    box-sizing: border-box;
}

/* ----------------------------- */
/* TITULAR IZQUIERDO             */
/* ----------------------------- */
.left-content {
    width: 40%;
    padding-left: 80px;
    box-sizing: border-box;
}

.left-content h1 {
    font-size: 60px;
    line-height: 1.1;
    font-weight: bold;
    color: #000;
}

.red-text {
    color: #e50021;
}

/* ----------------------------- */
/* CAJA DERECHA                  */
/* ----------------------------- */
.right-box {
    background-color: #212121;
    color: white;
    padding: 60px 60px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);

    width: 60%;
    border-radius: 40px 0 0 10px;
}

.right-box p {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.6;
}

/* ----------------------------- */
/* 📱 RESPONSIVE                 */
/* ----------------------------- */
@media (max-width: 992px) {
    .main-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .left-content {
        width: 100%;
        padding-left: 0;
    }

    .left-content h1 {
        font-size: 48px;
    }

    .right-box {
        width: 90%;
        border-radius: 20px;
        padding: 40px;
        margin-top: 20px;
    }
}

@media (max-width: 600px) {
    .left-content h1 {
        font-size: 2.7rem;
    }

    .right-box {
        padding: 30px 20px;
    }

    .right-box p {
        font-size: 1.3rem;
    }
}




/* 1. Estilos para la cabecera con Títulos */
.header-titles {
    display: flex;
    width: 100%;
    background-color: white; 
    padding-top: 40px; 
    padding-bottom: 20px; 
}

.title-column {
    flex: 1; 
    text-align: center;
}

.title-green-new, .title-blue-new {
    font-size: 45px;
    font-weight: normal; 
    margin: 0;
    color: #444; /* Color gris/negro para "Industrial" */
}

/* Se reemplaza la variable por el valor directo */
.text-green-new {
    color: #3a8a3a; /* Verde oscuro para el texto */
    font-weight: bold;
}

/* Se reemplaza la variable por el valor directo */
.text-blue-new {
    color: #113c6b; /* Azul oscuro para el texto */
    font-weight: bold;
}

/* 2. Estilos para el Contenido (Cajas de color) */
.content-container {
    display: flex;
    width: 100%;
    min-height: 60vh;
}

.column {
    flex: 1; 
    padding: 50px 20px;
    display: flex;
    justify-content: center; 
    align-items: flex-start; 
}

/* Colores de fondo */
/* Se reemplaza la variable por el valor directo */
.green-column-new {
    background-color: #5cb85c; /* Verde de fondo */
}

/* Se reemplaza la variable por el valor directo */
.blue-column-new {
    background-color: #113c6b; /* Azul de fondo */
    align-items: center; 
}

/* --- Recuadros de Cursos --- */
.box-container {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
}

.course-box {
    background-color: white; 
    color: black;
    text-align: center;
    padding: 15px 20px;
    margin-bottom: 15px; 
    border-radius: 5px;
    width: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
    font-weight: bold; 
    font-size: 16px;
    /* Estilo de los recuadros verdes */
    
    color: #3a8a3a; /* Verde oscuro para el texto */
}

/* Ajustes para los recuadros en la caja AZUL */
.blue-column-new .course-box {
    /* El borde y el color del texto siguen usando el mismo azul del título/fondo */
    border: 1px solid white; 
    color: #113c6b;
    padding: 30px 20px;
}

 /* ----------------------------------------------------------------- */
        /* --- ESTILOS CSS UNIFICADOS (MOBILE FIRST) --- */
        /* ----------------------------------------------------------------- */
        /* 1. TÍTULO Y SECCIÓN (Móvil) */
        .methodology-section {
            padding: 20px 0; 
            text-align: center;
            width: 100%; 
            box-sizing: border-box;
            margin-top: 70px;
        }

        .main-title {
            font-size: 2.7rem; 
            font-weight: normal;
            margin-bottom: 20px;
            margin-left: auto;
            margin-right: auto; 
            padding: 0 20px;
            text-align: center;
        }

        .red-text {
            color: #E53935;
            font-weight: bold;
        }

        /* 2. CONTENEDOR DE TARJETAS (Móvil: Apiladas Verticalmente) */
        .cards-container {
            display: flex;
            flex-direction: column; /* APILAMIENTO VERTICAL POR DEFECTO (MÓVIL) */
            gap: 20px; 
            width: 100%; 
            max-width: 1200px; 
            margin: 0 auto;
            padding: 0 20px; 
            box-sizing: border-box;
        }

        /* 3. TARJETAS (Móvil) */
        .methodology-card {
            width: 100%; /* Asegura que la tarjeta ocupe todo el ancho disponible */
            flex-shrink: 0; /* Evita que el navegador colapse el ancho */
            
            position: relative;
            height: 350px; 
            border-radius: 0; 
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
        }

        .card-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }

        /* 4. CONTENIDO ROJO (Móvil) */
        .content-wrapper {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 20px; 
            box-sizing: border-box;
            color: white;
            background-color: rgba(229, 57, 53, 0.7);
            z-index: 2;
            text-align: left;
        }

        .module-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
            margin-top: 0;
        }

        .module-text {
            font-size: 16px;
            line-height: 1.4;
            margin-bottom: 0;
        }

        /* 5. HOVER OVERLAY NEGRO (Móvil) */
        .hover-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
            box-sizing: border-box;
            opacity: 0; 
            transition: opacity 0.3s ease; 
            z-index: 3;
            text-align: center;
        }

        .methodology-card:hover .hover-overlay {
            opacity: 1;
        }

        .hover-title {
            font-size: 1.5em; 
            font-weight: bold;
            margin-bottom: 10px;
        }

        .hover-description {
            font-size: 1em; 
            line-height: 1.4;
        }
        
        /* ----------------------------------------------------------------- */
        /* --- ESTILOS DE ESCRITORIO (A PARTIR DE 769px) --- */
        /* ----------------------------------------------------------------- */

        @media (min-width: 769px) {
            
            /* 1. TÍTULO Y SECCIÓN */
            .methodology-section {
                padding: 40px 0; 
            }

            .main-title {
                font-size: 2.7rem; 
                margin-bottom: 40px;
            }
            
            /* 2. CONTENEDOR DE TARJETAS (Escritorio: Fila Horizontal) */
            .cards-container {
                flex-direction: row; /* Vuelve a ser una fila horizontal */
                gap: 0; 
                padding: 0;
            }

            /* 3. TARJETAS */
            .methodology-card {
                flex: 1; /* Ocupa 1/3 del espacio */
                width: auto; /* Ancho automático para Flexbox */
                height: 500px; /* Altura original para escritorio */
            }

            /* 4. CONTENIDO */
            .content-wrapper {
                padding: 40px;
            }
            
            .module-title {
                font-size: 28px;
            }

            .module-text {
                font-size: 18px;
            }
            
            /* 5. HOVER OVERLAY NEGRO */
            .hover-title {
                font-size: 2em; 
            }

            .hover-description {
                font-size: 1.2em;
            }
        }






        /* Contenedor Principal de la Sección */
    .safety-section {
        width: 100%;
        overflow: hidden;
        padding-top: 50px; 
    }

    /* Títulos Superiores */
    .safety-titles-wrapper {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }

    .title-part {
        font-size: 36px;
        font-weight: 700;
        line-height: 1.1;
        flex: 1; 
        text-align: center;
    }
    
    .title-part span {
        font-weight: 400; 
        color: #333; /* Color Dark */
        margin-left: 5px;
    }

    .title-safety {
        color: #66BB6A; /* Color Light Green */
    }

    .title-emergency {
        color: #0D47A1; /* Color Blue */
    }

    /* --- Contenedor de las dos Columnas --- */
    .columns-wrapper {
        display: flex;
        flex-direction: column; /* APILAMIENTO VERTICAL POR DEFECTO (MÓVIL) */
        width: 100%;
    }
    
    /* Columna de Seguridad (Verde) */
    .safety-column {
        flex: 1;
        background-color: #4CAF50; /* Color Green */
        padding: 40px 20px;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    /* Columna de Emergencia (Azul) */
    .emergency-column {
        flex: 1;
        background-color: #0D47A1; /* Color Blue */
        padding: 40px 20px;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    /* Contenedores de Listas */
    .list-container {
        max-width: 400px; 
        width: 100%;
        padding: 0 20px;
    }
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.course-box {
  background-color: #fff;
  color: #333;
  padding: 15px 20px;
  margin-bottom: 15px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);

  opacity: 0;
  animation: fadeUp 0.8s ease forwards;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Hover que siempre funciona */
.course-box:hover {
  transform: translate3d(0, -12px, 0);
  box-shadow: 0 15px 30px rgba(0,0,0,0.25);
 
}
/* Delay en la entrada */
.course-box:nth-child(1) { animation-delay: 0.1s; }
.course-box:nth-child(2) { animation-delay: 0.2s; }
.course-box:nth-child(3) { animation-delay: 0.3s; }
.course-box:nth-child(4) { animation-delay: 0.4s; }
.course-box:nth-child(5) { animation-delay: 0.5s; }

    /* Sobreescribir el color de texto para las cajas de EMERGENCIA */
    .emergency-column .course-box {
        color: #0D47A1; /* Texto azul en fondo blanco (Emergencia) */
    }
    
    /* Sobreescribir el color de texto para las cajas de SEGURIDAD */
    .safety-column .course-box {
         color: #4CAF50; /* Texto verde en fondo blanco (Seguridad) */
    }


    /* ----------------------------------------------------------------- */
    /* --- DISEÑO DE ESCRITORIO (min-width: 769px) --- */
    /* ----------------------------------------------------------------- */

    @media (min-width: 769px) {
        
        .safety-titles-wrapper {
            justify-content: center;
            gap: 5%;
        }
        
        .title-part {
            font-size: 48px;
        }

        .columns-wrapper {
            flex-direction: row;
        }
        
        .safety-column,
        .emergency-column {
            padding: 80px 40px;
        }
        
        .title-safety {
            text-align: right; 
        }
        .title-emergency {
            text-align: left;
        }
    }


    
        /* Contenedor principal con la imagen de fondo */
       
        /* Capa Roja Semitransparente (Overlay) */
        .red-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            
            z-index: 1;
        }

        /* Contenido (Título, Subtítulo, Botón) */
        .hero-content {
            position: relative;
            z-index: 2; 
            color: #FFFFFF; /* Color White */
            
            /* Ajuste para que el texto no se estire demasiado en pantallas gigantes */
            max-width: 1000px; 
            
            padding: 0 40px; /* Más padding horizontal para que el contenido respire */
            margin: 0 auto; 
        }

        .hero-title {
            font-size:3rem;
            font-weight: bold;
            line-height: 1.1;
            margin-bottom: 20px;
        }

        .hero-subtitle {
            font-size: 20px;
            line-height: 1.5;
            margin-bottom: 40px;
            font-weight: normal;
        }

        /* Estilo del Botón */
        .hero-button {
            display: inline-block;
            padding: 15px 40px;
            background-color: #FFFFFF; /* Color White */
            color: #D01F29; /* Color Red Deep */
            text-decoration: none;
            font-size: 18px;
            font-weight: bold;
            border-radius: 5px;
            border: 1px solid #777777; /* Color Button Border */
            transition: background-color 0.3s, color 0.3s;
        }

        .hero-button:hover {
            background-color: #D01F29; /* Color Red Deep */
            color: #FFFFFF; /* Color White */
        }

        /* ----------------------------------------------------------------- */
        /* --- DISEÑO RESPONSIVE (MÓVIL) --- */
        /* ----------------------------------------------------------------- */

        @media (max-width: 768px) {
            .hero-banner {
                height: 400px; 
            }

            .hero-content {
                padding: 0 20px; /* Menos padding en móvil */
            }
            
            .hero-title {
                font-size: 3rem; 
                margin-bottom: 15px;
            }

            .hero-subtitle {
                font-size: 1.4rem;
                margin-bottom: 30px;
            }

            .hero-button {
                padding: 12px 30px;
                font-size: 16px;
            }
        }