/* Estilos para el encabezado del logo */
.tcdl-form-header {
    background-color: #0F1516; /* Color de fondo oscuro */
    padding: 20px;
    text-align: center;
    border-top-left-radius: 8px; /* Para que coincida con el formulario si lo pones justo encima */
    border-top-right-radius: 8px;
    max-width: 800px; /* Igual que el formulario para alineación */
    margin: 20px auto 0 auto; /* Arriba del formulario, sin margen inferior */
}

.tcdl-form-header img {
    max-width: 450px; /* Ajusta el tamaño del logo según lo necesites */
    width: 250px;
    height: auto;
    display: block; /* Para centrar la imagen */
    margin: 0 auto;
}


#congreso-inscripcion-form {
    max-width: 800px; /* Aumentado el ancho del formulario */
    margin: 0 auto 20px auto; /* Centrado y un poco de margen inferior */
    padding: 30px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    box-sizing: border-box; /* Asegura que el padding no aumente el ancho total*/
}

/* Reducir el tamaño de los títulos y destacarlos */
#congreso-inscripcion-form h2 {
    font-size: 1.8em; /* Un poco más grande para el título principal */
    color: #A67C00; /* Dorado/ámbar para destacar */
    font-weight: 700; /* Negrita */
    margin-bottom: 25px; /* Más espacio debajo del título principal */
    text-align: center;
    text-transform: uppercase; /* Opcional: para que resalte más */
}

#congreso-inscripcion-form h3 {
    font-size: 1.5em; /* Un poco más grande para subtítulos, pero menor que h2 */
    color: #6D3D00; /* Marrón oscuro para los subtítulos */
    font-weight: 700; /* Negrita */
    margin-top: 30px; /* Más espacio arriba de los subtítulos */
    margin-bottom: 15px;
    border-bottom: 2px solid #D4AF37; /* Línea inferior un poco más gruesa y en dorado más claro */
    padding-bottom: 8px; /* Más espacio entre el texto y la línea */
    /* text-align: center; */ /* Opcional: centrar los subtítulos también */
}

#congreso-inscripcion-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #555;
}
#congreso-inscripcion-form input[type="text"],
#congreso-inscripcion-form input[type="email"],
#congreso-inscripcion-form input[type="tel"] {
    width: calc(100% - 20px);
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Alineación de radios: Usamos flexbox para centrar verticalmente */
.radio-option {
    display: flex; /* Habilitar flexbox */
    align-items: baseline; /* Alinea los elementos a la base de su línea de texto */
    margin-bottom: 10px; /* Espacio entre opciones */
}

.radio-option input[type="radio"] {
    margin-right: 10px; /* Espacio entre el círculo y el texto */
    flex-shrink: 0; /* Evita que el radio se encoja */
    position: relative; /* Necesario para posibles ajustes finos */
    top: -1px; /* Pequeño ajuste vertical si es necesario */
}

.radio-option label {
    margin-bottom: 0; /* Elimina el margen inferior del label dentro de flexbox */
    font-weight: normal; /* El texto de la opción no necesita ser negrita */
    display: inline-block; /* Asegura que el label no ocupe todo el ancho */
}

#congreso-inscripcion-form button {
    background-color: #ff8c00; /* Un color anaranjado para un toque craft */
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 20px;
    width: auto; /* Ajustar el botón a su contenido */
    display: block; /* Para centrar el botón */
    margin-left: auto;
    margin-right: auto;
}
#congreso-inscripcion-form button:hover {
    background-color: #e67e00;
}
#seccion-homebrewer,
#seccion-profesional {
    border-left: 3px solid #ff8c00;
    padding-left: 15px;
    margin-top: 20px;
    padding-top: 10px;
    padding-bottom: 5px;
}
#tcdl-mensaje-exito {
    color: green;
    margin-top: 20px;
    text-align: center;
    font-weight: bold;
}
#tcdl-mensaje-error {
    color: red;
    margin-top: 20px;
    text-align: center;
    font-weight: bold;
}