/* Estilos generales */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

.text-25{
    font-size: 25px !important;
}

.text-30{
    font-size: 30px !important;
}

/* Estilos para el logo */
.logo {
    text-align: center;
    border-bottom: 1px solid rgb(170, 170, 170);
    padding: 10px 0;
    background-color: #fff; /* Fondo blanco para separar el logo del resto */
}

.logo img {
    width: 100px;
}

/* Estilos generales para la imagen de fondo */
.container picture img {
    width: 100%;
    height: 100%;
    display: block;
}

/* Estilos generales para el formulario */
.formulario {
    width: 80%;
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.9); /* Fondo blanco con opacidad */
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Asegura que la imagen de fondo quede detrás del formulario */
.container picture {
    position: relative;
    z-index: 1;
}

h1 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus {
    border-color: #3d9c55;
    outline: none;
}

/* Estilos para el botón del formulario */
button, .llamado-final a {
    width: 100%;
    padding: 12px;
    background-color: #000; /* Fondo negro */
    color: white; /* Texto blanco */
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover, .llamado-final a:hover {
    background-color: #333; /* Fondo negro más oscuro en hover */
}

.llamado-final a{
    text-decoration: none;
}

/* Estilos para el título del curso */
.course-title {
    position: absolute;
    top: 95%;
    left: 5%;
    transform: translateY(-50%);
    background-color: rgba(51, 51, 51, 0.8); /* Fondo gris oscuro con transparencia */
    color: white; /* Texto blanco */
    padding: 20px;
    z-index: 10; /* Asegura que esté delante de la imagen de fondo */
    border-radius: 8px;
    max-width: 500px;
}

.course-title h2 {
    margin: 0;
    font-size: 24px;
    font-weight: bold;
}

/* Estilos para la sección de detalles del curso */
.course-details {
    display: flex;
    background-color: #d32f2f; /* Fondo rojo */
    color: white; /* Texto blanco */
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    border: 1px solid #fff; /* Borde blanco alrededor de la sección */
}

.details-column {
    flex: 1;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    position: relative; /* Necesario para los bordes laterales */
}

/* Líneas blancas entre columnas */
.details-column:not(:last-child) {
    border-right: 1px solid #fff; /* Línea blanca a la derecha de cada columna excepto la última */
}

.details-column h3 {
    margin: 0;
    font-size: 18px;
}

.details-column p {
    font-size: 16px;
    margin: 5px 0;
}

/* Estilos para la sección de Matrícula anticipada */
.early-bird-section {
    background-color: #f5f5f5; /* Fondo gris claro */
    color: #333; /* Texto en gris oscuro */
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    text-align: center;
    position: relative;
}

.early-bird-section .row {
    margin-bottom: 10px;
}

.early-bird-section h3 {
    margin: 0;
    font-size: 20px;
    font-weight: bold;
    color: #d32f2f; /* Color rojo para resaltar el título */
}

.early-bird-section p {
    margin: 0;
    font-size: 16px;
}

.early-bird-section p del {
    color: #888; /* Color gris para el precio original */
}

.early-bird-section p strong {
    color: #d32f2f; /* Color rojo para el precio con descuento */
}

/* Estilos para resaltar el ahorro */
.savings-highlight {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #d32f2f; /* Fondo rojo para el ahorro */
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
}

/* Estilos para la sección de botón "Descargar folleto" */
.download-brochure-section {
    text-align: center;
    margin-top: 30px;
}

.download-brochure-section button {
    padding: 12px 20px;
    background-color: #000; /* Fondo negro */
    color: white; /* Texto blanco */
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 230px;
}

.download-brochure-section button:hover {
    background-color: #333; /* Fondo negro más oscuro en hover */
}

/* Estilos para la sección de Habilidades clave */
.key-skills-section {
    background-color: #ffffff; /* Fondo gris claro */
    color: #333; /* Texto gris oscuro */
    padding: 30px 20px;
    border-radius: none;
    margin-top: 30px;
    text-align: center;
}

.key-skills-section h3 {
    margin-bottom: 20px;
    font-size: 22px;
    font-weight: bold;
    color: #d32f2f; /* Color rojo para resaltar el título */
}

.key-skills-section p {
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 1.6;
}

/* Estilos para la sección de A quién va dirigido */
.target-audience-section {
    color: #333; /* Texto gris oscuro */
    padding: 30px 20px;
    border-radius: 8px;
    margin-top: 30px;
    text-align: center;
}

.target-audience-section h3 {
    margin-bottom: 20px;
    font-size: 22px;
    font-weight: bold;
    color: #d32f2f; /* Color rojo para resaltar el título */
}

.target-audience-section ul {
    list-style-type: disc; /* Viñetas para los elementos de la lista */
    padding-left: 20px; /* Espaciado a la izquierda */
}

.target-audience-section ul li {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.6;
}

/* Estilos para los mensajes de error */
.error-message {
    color: #d32f2f; /* Color rojo para los errores */
    font-size: 14px;
    margin-top: 5px;
    display: block; /* Para asegurar que el mensaje se muestre debajo del input */
}

/* Estilos para los campos con error */
.input-error {
    border-color: #d32f2f; /* Borde rojo para los inputs con error */
    background-color: #ffe6e6; /* Fondo ligeramente rosado para mayor visibilidad */
    outline: none; /* Elimina el borde de enfoque predeterminado */
}

.input-error:focus {
    border-color: #a72828; /* Color de borde más oscuro cuando se enfoca en un campo con error */
}

.img-small img{
    margin: 10px auto;
    max-width: 300px;
}


/* Estilos para la sección de A quién va dirigido */
.llamado-final {
    background-color: #d32f2f;
    color: #ffffff; /* Texto gris oscuro */
    padding: 30px 20px;
    margin-top: 30px;
    text-align: center;
}

/* Estilos para la caja de información */
.info-box {
    /* background-color: #f9f9f9; */
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: left; /* Alinea el texto a la izquierda */
    display: inline-block; /* Hace que la caja se ajuste al contenido */
    max-width: 800px; /* Limita el ancho máximo de la caja */
    margin: 20px auto; /* Centra la caja horizontalmente */
}

/* Estilos para las listas */
.info-box ul {
    list-style-type: disc;
    margin-left: 20px;
    padding-left: 0;
}

.info-box li {
    margin-bottom: 10px;
    line-height: 1.5;
}

/* Estilos para el texto en cursiva */
i {
    display: block;
    margin-top: 15px;
    font-style: italic;
    color: #666;
}

.list-style-on{
    list-style-type: disc;
}

.list-style-off{
    list-style-type: none !important;
}


/* Estilos para pantallas grandes (computadoras) */
@media (min-width: 1024px) {
    .formulario {
        position: absolute;
        top: 480px;
        right: 5%;
        transform: translateY(-50%);
        z-index: 10; /* Asegura que esté delante de la imagen de fondo */
    }

    .container picture {
        position: relative;
        z-index: 1;
    }
}

/* Estilos para pantallas medianas y pequeñas (tabletas y móviles) */
@media (max-width: 1340px) {
    .container {
        position: relative;
    }

    .course-title,
    .formulario {
        position: static;
        margin-top: 20px;
        transform: none;
        z-index: auto; /* Elimina el efecto de superposición */
    }
    .course-title{
        max-width: 100%;
        border-radius: 0;
    }
    .formulario{
        max-width: 90%;
    }

    .container picture img {
        display: block;
        width: 100%;
    }
}

/* Estilos responsivos */
@media (max-width: 768px) {

    .logo img {
        width: 80px;
    }

    button,
    .download-button {
        font-size: 14px;
    }

    .course-details {
        flex-direction: column;
    }
    .details-column {
        margin-bottom: 20px;
    }
    .details-column:not(:last-child) {
        border-right: none; /* Elimina el borde derecho en vista móvil */
        border-bottom: 1px solid #fff; /* Línea blanca debajo de cada columna en vista móvil */
    }
}