/* --- Regla Universal para el Modelo de Caja --- */
* {
  box-sizing: border-box;
}

body {
    background-color: #404040; /* Un tono de gris oscuro. ¡Puedes ajustarlo! */
    color: #FFFFFF; /* Texto principal de color blanco */
    font-family: Arial, sans-serif; /* Una fuente estándar y limpia para empezar */
    margin: 0; /* Elimina los márgenes por defecto del navegador */
    padding: 0; /* Elimina los rellenos por defecto */
}

header {
    background-color: #daa520;
    padding: 10px 0; /* Damos padding solo vertical */
}



/* --- Estilos de Navegación --- */

nav {
    background-color: #333; /* Un gris un poco más oscuro para diferenciarlo */
    border-top: 2px solid #daa520; /* Borde dorado superior */
    border-bottom: 2px solid #daa520; /* Borde dorado inferior */
}

nav ul {
    list-style: none; /* Quita las viñetas (los puntos) */
    margin: 0;
    padding: 0;
    display: flex; /* ¡La magia! Pone los elementos en una fila horizontal */
    justify-content: center; /* Centra los elementos del menú en el espacio disponible */
}

nav li {
    /* Podemos añadir estilos específicos a los items si es necesario más adelante */
}

nav a {
    display: block; /* Hace que toda el área del botón sea clickeable, no solo el texto */
    color: #FFFFFF; /* Color del texto blanco */
    text-decoration: none; /* Quita el subrayado de los enlaces */
    padding: 15px 25px; /* Espacio interno (15px arriba/abajo, 25px a los lados) */
    font-weight: bold; /* Texto en negrita */
}

nav a:hover {
    background-color: #daa520; /* Fondo dorado al pasar el ratón */
    color: #000000; /* Texto negro al pasar el ratón para que contraste */
}


/* --- Estilos de la Sección Hero --- */

.hero {
    background-image: url('../images/Fondo.png');
    background-size: cover;
    background-position: center;
    min-height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* ¡Añade esta línea! */
    padding: 20px;
}

.hero-content {
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 30px;
    border-radius: 10px;
    border: 2px solid #daa520;
    width: 90%; /* Se ajusta en pantallas pequeñas */
    max-width: 900px; /* ¡Añade esta línea! */
	line-height: 1.6;
    font-size: 0.85em;
}

.hero h1 {
    font-size: 2.5em; /* Tamaño de fuente grande para el título */
    margin-bottom: 15px;
}

.hero p {
    font-size: 1.2em; /* Tamaño de fuente para el párrafo */
    margin-bottom: 25px;
}

.cta-button {
    background-color: #daa520; /* Fondo dorado */
    color: #000000; /* Texto negro */
    padding: 12px 25px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s ease; /* Transición suave para el hover */
}

.cta-button:hover {
    background-color: #ffd700; /* Un dorado más brillante al pasar el ratón */
}

/* --- Estilos de Secciones de Contenido --- */

.content-section {
    padding: 60px 20px; /* Espacio interno amplio (60px arriba/abajo, 20px a los lados) */
    background-color: #f4f4f4; /* Un gris muy claro para contrastar con el body */
    color: #333333; /* Texto oscuro para máxima legibilidad sobre fondo claro */
}

.container {
    max-width: 1100px; /* Ancho máximo del contenido */
    margin: 0 auto; /* Truco para centrar el contenedor horizontalmente */
	line-height: 1.5;


    /* Estilos del texto actualizados */
    font-size: 1.1em;
    font-weight: normal; /* Cambiado de 'bold' a 'normal' para quitar la negrita */
    color: #000000; /* Color negro como lo ajustaste */
    text-align: center; /* Centra el texto dentro del contenedor */
}

.container-neg {
    max-width: 1100px; /* Ancho máximo del contenido */
    margin: 0 auto; /* Truco para centrar el contenedor horizontalmente */
	line-height: 1.0;


    /* Estilos del texto actualizados */
    font-size: 1.1em;
    font-weight: normal; /* Cambiado de 'bold' a 'normal' para quitar la negrita */
    color: #FFFFFF; /* Color negro como lo ajustaste */
    text-align: center; /* Centra el texto dentro del contenedor */
}

.desarrollo {
    max-width: 1100px; /* Ancho máximo del contenido */
    margin: 0 auto; /* Truco para centrar el contenedor horizontalmente */
	line-height: 4.0;


    /* Estilos del texto actualizados */
    font-size: 0.7em;
    font-weight: normal; /* Cambiado de 'bold' a 'normal' para quitar la negrita */
    color: #756F6F; /* Color negro como lo ajustaste */
    text-align: center; /* Centra el texto dentro del contenedor */
}


.content-section h2 {
    font-size: 2.2em;
    margin-bottom: 20px;
    color: #000000; /* Título en negro para que destaque */
}

.content-section p {
    font-size: 1.1em;
    line-height: 1.6; /* Altura de línea para que el párrafo se lea cómodamente */
}


/* --- Estilos de la Sección de Servicios --- */

.services-section {
    padding: 60px 20px;
}

.services-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
}

.service-item {
    background-color: #ffffff;
    color: #333333;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    flex-basis: 300px;
    text-align: center;
	line-height: 1.5;
	font-size: 0.9em;
}

.service-item h3 {
    color: #daa520;
    margin-top: 0;
}


/* --- Estilos Responsivos para Servicios --- */

@media (max-width: 990px) {
	
	   nav ul {
        flex-direction: column; /* Apila los elementos del menú verticalmente */
        align-items: center;
    }

    nav a {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #555;
    }

    nav li:last-child a {
        border-bottom: none;
    }
	
    .services-grid {
        flex-direction: column; /* Apila las columnas verticalmente a propósito */
        align-items: center; /* Centra las cajas ahora que están apiladas */
    }

    .service-item {
        flex-basis: 90%; /* En pantallas pequeñas, cada caja ocupa casi todo el ancho */
        margin-bottom: 20px; /* Añade espacio entre las cajas apiladas */
    }
}


/* --- Estilos del Pie de Página --- */

footer {
    background-color: #333333; /* Mismo gris oscuro que la navegación */
    color: #AAAAAA; /* Un gris claro para el texto, fácil de leer */
    padding: 30px 20px;
    text-align: center;
    border-top: 5px solid #daa520; /* Un borde dorado para rematar la página */
}

footer p {
    margin: 0; /* Quita cualquier margen extra del párrafo */
    font-size: 0.9em; /* Un poco más pequeño que el texto normal */
}


/* --- Estilos de la Imagen Hero Pirámide --- */

.hero-pyramid {
    display: block; /* La convierte en un bloque para poder centrarla */
    margin: 50px auto 0 auto; /* 50px de espacio arriba, centrada horizontalmente, 0 abajo */
    max-width: 450px; /* Un tamaño máximo más visible */
    width: 90%; /* Se ajusta en pantallas pequeñas */
    border-radius: 10px; /* Suaviza las esquinas */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Una sombra para darle profundidad */
}


/* --- Estilos de la Galería de Imágenes --- */

.gallery-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* ¡Añade esta línea para centrar! */
    gap: 30px;
    margin-top: 40px;
}

.gallery-item {
    width: calc(50% - 15px);
    max-width: 450px;
    flex-shrink: 0; /* ¡Añade esta línea para prohibir que se encoja! */
    background-color: #191919;
    color: #333333;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    text-align: center;
}

.gallery-item img {
    width: 100%; /* La imagen ocupa todo el ancho de su tarjeta */
    height: auto; /* La altura se ajusta para no deformar la imagen */
    display: block;
}

.gallery-caption {
    padding: 20px;
    /* --- Estilos copiados y adaptados de .hero-content --- */
    background-color: #191919; /* Fondo negro semi-transparente */
    color: #FFFFFF; /* Texto blanco para que sea legible */
    /*border: 2px solid #daa520; /* Borde dorado */
    /*border-top: none; /* Quitamos el borde superior para que se una a la imagen */
	font-size: 1.1em;
    /* Esto asegura que el redondeo coincida con la tarjeta contenedora */
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.gallery-section {
    padding: 60px 20px;
	
}


.gallery-caption h4 {
    margin-top: 0;
    color: #daa520; /* Título en dorado para consistencia */
	font-size: 1.1em;
}

.gallery-caption h5 {
    margin-top: 0;
    color: #FFFFFF; /* Título en dorado para consistencia */
	font-size: 0.9em;
}

.gallery-wrapper {
    max-width: 900px; /* ¡El mismo ancho que .hero-content! */
    margin: 0 auto; /* Lo centramos */
}




    /* --- Estilos para Texto Lateral Fijo (Versión Horizontal) --- */

.sidebar-text {
    position: fixed;
    top: 280px;
    width: 240px;
    z-index: 1000;
	line-height: 1.5;
	text-align: normal;

    /* Estilos del texto actualizados */
    font-size: 1.1em;
    font-weight: normal; /* Cambiado de 'bold' a 'normal' para quitar la negrita */
    color: #000000; /* Color negro como lo ajustaste */
    /* La línea text-shadow ha sido eliminada */
}
    
.sidebar-text.left {
    /* Posiciona el borde DERECHO de la caja a la izquierda del contenido principal */
    right: calc(50% + 550px + 30px); /* Centro + Mitad del Contenedor + Espacio */
}

.sidebar-text.right {
    /* Posiciona el borde IZQUIERDO de la caja a la derecha del contenido principal */
    left: calc(50% + 550px + 30px); /* Centro + Mitad del Contenedor + Espacio */
}
    
    .sidebar-text .highlight-red {
        color: #d90429;
    }
    
/* --- ESTILOS PARA LA NUEVA SECCIÓN DE INFO EN MÓVIL --- */
.mobile-info-section {
    padding: 40px 20px;
 
}
.info-box {
    background-color: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}
.info-box h4 {
    margin-top: 0;
    color: #daa520;
}

/* --- ================================== --- */
/* --- LÓGICA RESPONSIVA PARA TEXTO LATERAL --- */
/* --- ================================== --- */

/* 1. ESTADO POR DEFECTO (MÓVIL Y TABLET) */
/* Aquí, los textos se comportan como contenido normal */

.sidebar-content-flow {
    padding: 40px 20px;
    background-color: #f4f4f4;
}

.sidebar-text {
    background-color: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    color: #333;
    margin-bottom: 20px;
}

.sidebar-text h4 { /* Asumiendo que usarás h4 para los títulos */
    margin-top: 0;
    color: #daa520;
}

/* 2. ESTADO PARA ESCRITORIO (PANTALLAS GRANDES) */
/* Aquí, los textos se convierten en barras laterales fijas */

@media (min-width: 1501px) {
    .sidebar-content-flow {
        display: none; /* Ocultamos la sección contenedora */
    }

    .sidebar-text {
        /* Restablecemos y aplicamos los estilos fijos */
        display: block;
        position: fixed;
        top: 280px;
        width: 240px;
        line-height: 1.5;
        text-align: center;
        font-size: 1.1em;
        font-weight: normal;
        color: #000000;
        background-color: transparent; /* Quitamos el fondo de tarjeta */
        box-shadow: none; /* Quitamos la sombra */
        border: none; /* Quitamos el borde */
        margin-bottom: 0;
    }
    
    .sidebar-text.left {
        right: calc(50% + 580px);
    }
    
    .sidebar-text.right {
        left: calc(50% + 580px);
    }
}


/* --- Estilos de la Página de Contacto --- */
.contact-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    text-align: left;
}

.contact-info, .contact-form {
    flex: 1; /* Hace que cada columna intente ocupar el mismo espacio */
    min-width: 300px; /* Ancho mínimo antes de que se apilen */
}

.contact-form form {
    display: flex;
    flex-direction: column;
}

.contact-form label {
    margin-top: 15px;
    margin-bottom: 5px;
    font-weight: bold;
}

.contact-form input, .contact-form textarea, .contact-form select {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    width: 100%;
}

.contact-form button {
    margin-top: 20px;
    border: none;
    cursor: pointer;
    align-self: flex-start; /* Alinea el botón a la izquierda */
}

/* --- ================================== --- */
/* --- ESTILOS ESPECÍFICOS PARA SMARTPHONES --- */
/* --- ================================== --- */

@media (max-width: 768px) {

    /* --- Reducir el tamaño de los títulos --- */
    h1, .hero h1 {
        font-size: 1.8em; /* Hacemos los títulos principales más pequeños */
    }

    h2 {
        font-size: 1.5em; /* Hacemos los subtítulos más pequeños */
    }

    /* --- Ajustar la galería 2x2 para que sea 1 columna --- */
    .gallery-item {
        /* Forzamos cada item a ocupar casi todo el ancho para que se apilen */
        width: 90%;
    }

    /* --- Ajustar la sección Hero --- */
    .hero {
        min-height: auto; /* Dejamos que la altura se ajuste al contenido */
        padding: 40px 20px;
    }

    /* --- Ajustar el formulario de contacto --- */
    .contact-wrapper {
        flex-direction: column; /* Apila la información y el formulario */
    }

}

/* --- REGLA DEFINITIVA PARA EL FONDO DE LA GALERÍA --- */

.gallery-section {
    background-color: transparent !important; /* ¡Forzamos el fondo a ser transparente! */
    color: #FFFFFF !important; /* ¡Forzamos el texto a ser blanco! */
}


/* --- Estilos para Página de Capacitaciones --- */

.course-details {
    background-color: #333;
    padding: 20px 0;
    border-top: 2px solid #daa520;
    border-bottom: 2px solid #daa520;
}

.course-details .container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
    text-align: center;
}

.detail-item {
    color: #FFFFFF;
    font-size: 1.1em;
}

.two-columns {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.column {
    flex: 1; /* Cada columna ocupa la mitad del espacio */
    min-width: 300px; /* Ancho mínimo antes de apilarse */
    text-align: left;
}

.column ul {
    list-style-type: '✓ '; /* Añade un check a cada item */
    padding-left: 20px;
}

.temario-section {
    padding: 60px 20px;
    background-color: #f4f4f4;
    color: #333;
    text-align: center;
}

.temario-list {
    list-style: none;
    padding: 0;
    margin-top: 30px;
    font-size: 1.2em;
}

.temario-list li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.temario-list li:last-child {
    border-bottom: none;
}