/* --- ESTILOS CSS --- (Mantenidos del código anterior, solo se ajusta el estilo de error) */

        html{
            background:#000;
            padding:0;
            margin:0;
        }
        body {

            background-color: black;
             background-image: url('../img/background.jpg');
            background-position: top center;
            background-repeat: no-repeat;
            background-size: 100% 70vh; /* 100% ancho, alto proporcional */
            /* background-attachment: fixed; */
            width: 100%;
            min-height: 100vh;
            margin: 0;
             font-family: "Gantari", sans-serif;
            font-optical-sizing: auto;
            font-weight: auto;
            font-style: normal;
        }


        .head-content{
            color:#fff;
            padding-top:60px;
        }

        .head-content span{
            font-weight:800;
            margin-bottom:0px;
            display:block;
        }

        .head-content h1{
            font-weight:100;
             font-family: "Gantari", sans-serif;
            font-optical-sizing: auto;
            text-transform: uppercase;
            position:relative;
            font-size: 3rem;
        }

         .head-content h1:before{
            content:"";
            width:60%;
            height: 2px;
            background:#ef9454;
            display:block;
            bottom:-15px;
            position:absolute;
         }

        .head-content h1 strong{font-weight: 800;}
small{
    color:#858585;
    border-top:1px solid #858585;
    padding-top:20px;
    margin-top:20px;
    display: block;
}


        #contenido .left{
            color:#fff;
            margin-top:200px;
        }

         @media (max-width: 991.98px) {
              #contenido .left{
            color:#fff;
            margin-top:50px;
        }
         }

        #contenido h2{
            font-size: 1.4rem;
            margin-bottom:20px;
        }

         #contenido .parrafos p{
            font-weight: 200;
         }

        .form-container {
            background: #ffffff;
            padding: 30px 50px;

            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            max-width: 33vw;
            width: 100%;
            position:absolute;
            top:0;right:0;
            padding-bottom:0px;
        }

        @media (max-width: 991.98px) {
           .form-container {
            position:relative;
            max-width:100vw;
            margin-top:50px;
        }

         }


        /* Título */
        .title-section h1 {
            font-size: 24px;
            font-weight: 700;
            color: #333;
            line-height: 1.3;
            margin-bottom: 5px;
        }

        .title-section hr {
            border: none;
            height: 3px;
            width: 60%;
             background:#ef9454;
            margin-top: 10px;
            margin-bottom: 25px;
            opacity:1;
        }

        /* Preguntas de Opción Múltiple/Radio */
        .question-group {
            margin-bottom: 20px;
            padding-bottom: 15px;

        }

        .question-group:last-of-type {
            border-bottom: none;
            margin-bottom: 30px;
        }

        .question-label {
            font-size: 14px;
            font-weight: 500;
            color: #333;
            margin-bottom: 20px;
            display: block;
        }

        .options-container {
            display: flex;
            gap: 20px;
            align-items: center;

        }

        .radio-option label {
            display: inline-flex;
            align-items: center;
            cursor: pointer;
            font-size: 14px;
            color: #555;
        }

        /* Estilo para Radio Button (Círculos) */
        .radio-option input[type="radio"] {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            border: 2px solid #ccc;
            border-radius: 50%;
            margin-right: 8px;
            outline: none;
            transition: border-color 0.2s, background-color 0.2s;
            position: relative;
        }

        .radio-option input[type="radio"]:checked {
            border-color: #000;
            background-color: #000;
        }

        .radio-option input[type="radio"]:checked::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 8px;
            height: 8px;
            background-color: #fff;
            border-radius: 50%;
            transform: translate(-50%, -50%);
        }

        /* Sección de Campos de Texto */
        .personal-info-section {
            padding-top: 20px;
            background:#f4f7f7;
            margin-left:-50px;
            margin-right:-50px;
            padding:50px;
            padding-bottom:10px;
        }

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

        .form-field label {
            font-size: 15px;
            font-weight: 800;
            color: #333;
            margin-bottom: 5px;
            display: block;
        }

        .form-field input[type="text"],
        .form-field input[type="email"] {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 16px;
            color: #333;
        }

        .form-field input::placeholder {
            color: #aaa;
            font-weight: 400;
            font-style: italic;
        }

        /* Botón Enviar */
        .submit-button-container {

            text-align: center;
            background:#f4f7f7;
            margin-left:-50px;
            margin-right:-50px;
            padding:0 50px;
            padding-bottom:50px;
        }

        .submit-button {
            background-color: #000;
            color: #ffffff;
            padding: 12px 25px;
            border: none;
            border-radius: 4px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            width: 100%;
            transition: background-color 0.3s;
        }

        .submit-button:hover {
            background-color: #333;
        }

        /* ESTILO CLAVE PARA EL REQUERIMIENTO: Mensajes de error */
        .error-message {
            color: #d9534f; /* Rojo de error */
            font-size: 14px;
            margin-top: 5px;
            display: none; /* Oculto por defecto, JS lo mostrará */
            font-weight: 500;
        }