/* --- General Styles --- */
/*
    NOTA IMPORTANTE: Los siguientes estilos para 'body' han sido comentados
    porque un plugin de WordPress no debería modificar estilos globales
    de todo el sitio web. Si necesitas un fondo oscuro o un centrado
    específico para el quiz, aplícalo a '.quiz-container-wrapper'
    o a '.quiz-container' directamente.
*/
/*
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #000000;
    margin: 0;
    padding: 20px;
    color: #e0e0e0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    box-sizing: border-box;
}
*/

/* Wrapper opcional para el quiz si necesitas aislar estilos de fondo o centrado */
.quiz-container-wrapper {
    /* Ejemplo: si quieres que el quiz tenga su propio fondo oscuro y esté centrado
    background-color: #000000;
    padding: 40px 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start; // o center si quieres centrarlo verticalmente también
    */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Aplica la fuente base solo al quiz */
    color: #e0e0e0; /* Color de texto base para el quiz */
    box-sizing: border-box;
}

.quiz-container {
    background-color: #1a1a1a;
    padding: 30px 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(63, 236, 255, 0.1);
    max-width: 700px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
    position: relative; /* Needed for modal overlay context */
    margin-left: auto; /* Para centrar si el wrapper no es flex */
    margin-right: auto; /* Para centrar si el wrapper no es flex */
}

.quiz-container h1,
.quiz-container h2 { /* Asegúrate de que los selectores sean específicos para el quiz */
    color: #3fecff;
    margin-bottom: 20px;
}

.quiz-container h3 {
    color: #cccccc;
    margin-top: 30px;
    margin-bottom: 15px;
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
}

.quiz-container p {
    line-height: 1.6;
    margin-bottom: 15px;
    color: #bdbdbd;
}

.quiz-container button {
    background-color: #3fecff;
    color: #000000;
    border: none;
    padding: 12px 25px;
    border-radius: 25px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    margin: 5px;
    font-weight: bold;
}

.quiz-container button:hover {
    background-color: #1ac8d8;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(63, 236, 255, 0.3);
}

.quiz-container button:disabled {
    background-color: #555;
    color: #999;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* --- Start Screen --- */
#start-screen h1 { font-size: 2em; }
#start-screen p { font-size: 1.1em; color: #bdbdbd; margin-bottom: 30px; }

/* --- Quiz Screen --- */
#quiz-screen { text-align: left; }
.progress-bar-container { width: 100%; background-color: #333; border-radius: 10px; margin-bottom: 30px; height: 15px; overflow: hidden; }
.progress-bar { width: 0%; height: 100%; background-color: #3fecff; border-radius: 10px; transition: width 0.5s ease-in-out; }
#question-area { min-height: 150px; margin-bottom: 20px; }
#question-text { font-size: 1.4em; font-weight: bold; margin-bottom: 25px; color: #ffffff; }
#answer-options button { display: block; width: 100%; margin-bottom: 10px; text-align: left; padding: 15px 20px; background-color: #2a2a2a; color: #e0e0e0; border: 1px solid #444; border-radius: 8px; font-weight: normal; }
#answer-options button:hover { background-color: #383838; border-color: #555; transform: none; box-shadow: none; color: #ffffff; }

/* --- Results Screen --- */
#results-screen { display: none; animation: fadeIn 0.8s ease-out; text-align: left; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.results-header { text-align: center; margin-bottom: 30px; }
#score-display { margin: 20px auto; width: 180px; height: 180px; border-radius: 50%; background: linear-gradient(135deg, #3fecff, #1ac8d8); display: flex; flex-direction: column; justify-content: center; align-items: center; color: #000000; box-shadow: 0 5px 15px rgba(63, 236, 255, 0.3); animation: pulse 2s infinite ease-in-out; text-align: center; }
@keyframes pulse { 0% { transform: scale(1); box-shadow: 0 5px 15px rgba(63, 236, 255, 0.3); } 50% { transform: scale(1.03); box-shadow: 0 7px 20px rgba(63, 236, 255, 0.5); } 100% { transform: scale(1); box-shadow: 0 5px 15px rgba(63, 236, 255, 0.3); } }
#score-percentage { font-size: 3.5em; font-weight: bold; line-height: 1; margin-bottom: 5px; }
#score-text { font-size: 0.9em; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; }
#interpretation { font-size: 1.1em; margin-top: 15px; margin-bottom: 25px; text-align: center; padding: 0 15px; color: #bdbdbd; }
#interpretation strong { display: block; margin-bottom: 8px; font-size: 1.2em; color: #3fecff; }

/* --- Category Scores Visualization --- */
#category-scores { margin-top: 20px; margin-bottom: 30px; }
.category-score-item { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.category-name { flex-basis: 200px; font-weight: bold; font-size: 0.95em; color: #cccccc; text-align: right; margin-right: 15px; }
.category-bar-container { flex-grow: 1; height: 20px; background-color: #333; border-radius: 10px; overflow: hidden; position: relative; }
.category-bar { height: 100%; background-color: #3fecff; border-radius: 10px; transition: width 0.8s ease-out; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; box-sizing: border-box; color: #000000; font-size: 0.8em; font-weight: bold; white-space: nowrap; }
.category-bar.low { background-color: #dc3545; color: white; }
.category-bar.medium { background-color: #ffc107; color: black; }
.category-bar.high { background-color: #28a745; color: white; }

#weakest-area-info { font-size: 1.05em; margin-top: 20px; background-color: #3a2d0d; padding: 15px; border-radius: 8px; border: 1px solid #856404; color: #ffecb3; text-align: center; }
#weakest-area-info strong { color: #ffda6a; display: block; margin-bottom: 5px; }

/* --- Formulario de Captura EN RESULTADOS (Opcional/alternativo) --- */
#lead-form-section { margin-top: 30px; padding-top: 25px; border-top: 1px solid #444; }
#lead-form-section p { text-align: center; margin-bottom: 20px; font-size: 1.05em; color: #bdbdbd; }
#lead-form { padding: 20px; background-color: #222; border-radius: 8px; border: 1px solid #444; }
#lead-form label { display: block; margin-bottom: 8px; font-weight: bold; text-align: left; color: #3fecff; }
#lead-form input[type="text"], #lead-form input[type="email"] { width: calc(100% - 22px); padding: 10px; margin-bottom: 15px; border: 1px solid #555; border-radius: 5px; font-size: 16px; background-color: #333; color: #e0e0e0; box-sizing: border-box; }
#lead-form input[type="text"]:focus, #lead-form input[type="email"]:focus { outline: none; border-color: #3fecff; box-shadow: 0 0 5px rgba(63, 236, 255, 0.5); }
#lead-form button { width: 100%; background-color: #28a745; color: white; padding: 15px; font-size: 1.1em; font-weight: bold; }
#lead-form button:hover { background-color: #218838; box-shadow: 0 4px 10px rgba(40, 167, 69, 0.3); }
#confirmation-message { margin-top: 20px; padding: 15px; background-color: #1c4a2a; border: 1px solid #28a745; color: #d4edda; border-radius: 5px; font-weight: bold; animation: fadeIn 0.5s ease-in; text-align: center; }

/* --- Estilos del MODAL (Pop-up) --- */
.modal-overlay {
    display: none; /* Oculto por defecto */
    position: fixed; /* Cubre toda la pantalla */
    z-index: 1000; /* Encima de todo */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Permite scroll si el contenido es largo */
    background-color: rgba(0, 0, 0, 0.8); /* Fondo oscuro semitransparente */
    /* display: flex; // Se aplica via JS para activar */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
    animation: fadeInOverlay 0.3s ease-out;
}

@keyframes fadeInOverlay {
    from { background-color: rgba(0, 0, 0, 0); }
    to { background-color: rgba(0, 0, 0, 0.8); }
}

.modal-content {
    background-color: #1f1f1f; /* Fondo del modal un poco más claro que el contenedor */
    margin: auto; /* Necesario para centrar con flex */
    padding: 30px 40px;
    border: 1px solid #444;
    border-radius: 10px;
    width: 80%;
    max-width: 500px; /* Ancho máximo del modal */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    text-align: center;
    animation: slideInModal 0.4s ease-out;
    box-sizing: border-box;
}

 @keyframes slideInModal {
     from { transform: translateY(-30px); opacity: 0; }
     to { transform: translateY(0); opacity: 1; }
 }

.modal-content h2 {
    color: #3fecff; /* Color acento */
    margin-top: 0;
    margin-bottom: 15px;
}

.modal-content p {
    color: #bdbdbd;
    margin-bottom: 25px;
    font-size: 1.1em;
}

/* Estilos para el formulario DENTRO del modal */
#modal-lead-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    text-align: left;
    color: #3fecff; /* Color acento */
    font-size: 0.95em;
}

#modal-lead-form input[type="text"],
#modal-lead-form input[type="email"],
#modal-lead-form input[type="url"] {
    width: calc(100% - 22px); /* Ajuste para padding y borde */
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #555;
    border-radius: 5px;
    font-size: 16px;
    background-color: #333;
    color: #e0e0e0;
    box-sizing: border-box;
}
#modal-lead-form input[type="text"]:focus,
#modal-lead-form input[type="email"]:focus,
#modal-lead-form input[type="url"]:focus {
    outline: none;
    border-color: #3fecff;
    box-shadow: 0 0 5px rgba(63, 236, 255, 0.5);
}

#modal-lead-form button {
    width: 100%;
    background-color: #28a745; /* Verde para la acción final */
    color: white;
    padding: 15px;
    font-size: 1.1em;
    border-radius: 8px; /* Ligeramente menos redondeado */
    margin-top: 10px;
}
 #modal-lead-form button:hover {
    background-color: #218838;
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.3);
    transform: none; /* Sobrescribir hover general */
 }


/* --- Responsive Adjustments --- */
@media (max-width: 600px) {
    .quiz-container { padding: 20px 15px; } /* Ajuste para que no sea tan pegado */
    #start-screen h1 { font-size: 1.6em; }
    #question-text { font-size: 1.15em; }
    #answer-options button { padding: 12px 15px; }
    #score-display { width: 150px; height: 150px; }
    #score-percentage { font-size: 3em; }
    .category-name { flex-basis: 100px; font-size: 0.85em; margin-right: 10px; text-align: left; } /* Ajuste para mejor lectura */
    .category-bar { font-size: 0.75em; padding-right: 5px; }
    #lead-form input[type="text"], #lead-form input[type="email"], #modal-lead-form input[type="url"] { width: calc(100% - 20px); padding:10px; } /* Ajuste para consistencia */
    #lead-form button { font-size: 1em; }
    #lead-form-section p { font-size: 1em; }

    /* Ajustes Responsive para el Modal */
    .modal-content {
        width: 90%;
        padding: 25px 20px; /* Más padding vertical */
    }
    .modal-content h2 { font-size: 1.4em; } /* Un poco más pequeño */
    .modal-content p { font-size: 1em; }
    #modal-lead-form input[type="text"],
    #modal-lead-form input[type="email"] {
        padding: 10px;
        width: calc(100% - 20px); /* Consistencia */
    }
    #modal-lead-form button { font-size: 1em; padding: 12px; }
}

/* =================================================== */
/* --- ESTILOS PARA EL FORMULARIO CALIFICADOR DE CONTACTO --- */
/* =================================================== */

/* Contenedor principal del formulario de contacto */


.contact-form-container {
    background-color: #1a1a1a;
    padding: 30px 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(63, 236, 255, 0.1);
    max-width: 600px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
    position: relative;
    margin-left: auto;  /* Para centrar si el wrapper no es flex */
    margin-right: auto; /* Para centrar si el wrapper no es flex */
    color: #e0e0e0; /* Asegurar color de texto base */
}

.contact-form-container h2 {
    color: #3fecff;
    margin-top: 0; /* Reset para el primer h2 dentro del contenedor */
    margin-bottom: 20px;
    font-size: 1.8em;
}

.contact-form-container h3 { /* Título de cada paso */
    color: #cccccc;
    margin-top: 0; /* Reset para el primer h3 dentro de un form-step */
    margin-bottom: 20px;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
    font-size: 1.3em;
    text-align: left; /* Alinear títulos de paso a la izquierda */
}

.contact-form-container p.step-description {
    color: #bdbdbd;
    margin-bottom: 25px;
    font-size: 1.05em;
    line-height: 1.6;
    text-align: center; /* Descripción general centrada */
}

/* Pasos del formulario */
.contact-form-container .form-step {
    display: none; 
    text-align: left;
    animation: fadeInStepCF 0.5s ease-out; /* Renombrar animación para evitar conflictos si es diferente */
    margin-bottom: 20px;
}
.contact-form-container .form-step.active {
    display: block;
}
@keyframes fadeInStepCF { /* Renombrar animación */
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Etiquetas y campos dentro de los pasos del formulario de contacto */
.contact-form-container .form-step label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #3fecff;
    font-size: 0.95em;
}

.contact-form-container .form-step input[type="text"],
.contact-form-container .form-step input[type="email"],
.contact-form-container .form-step input[type="url"], /* Aunque sea text, si usas url para algo más */
.contact-form-container .form-step textarea,
.contact-form-container .form-step select {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #555;
    border-radius: 5px;
    font-size: 16px;
    background-color: #333;
    color: #e0e0e0;
    box-sizing: border-box;
}

.contact-form-container .form-step input[type="text"]:focus,
.contact-form-container .form-step input[type="email"]:focus,
.contact-form-container .form-step input[type="url"]:focus,
.contact-form-container .form-step textarea:focus,
.contact-form-container .form-step select:focus {
    outline: none;
    border-color: #3fecff;
    box-shadow: 0 0 5px rgba(63, 236, 255, 0.5);
}

.contact-form-container .form-step textarea {
    min-height: 80px;
    resize: vertical;
}

.contact-form-container .form-step select {
    appearance: none;
    -webkit-appearance: none; /* Para Safari/Chrome */
    -moz-appearance: none;    /* Para Firefox */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%233fecff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px auto;
    padding-right: 35px; /* Más espacio para el icono del select */
}
/* Para asegurar que las opciones del select también tengan el fondo oscuro en algunos navegadores */
.contact-form-container .form-step select option {
    background-color: #333; /* O un gris más oscuro si #333 es muy claro para el texto de la opción */
    color: #e0e0e0;
}


/* Navegación del formulario de contacto */
.contact-form-container .form-navigation {
    margin-top: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contact-form-container .form-navigation button {
    background-color: #3fecff;
    color: #000000;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 15px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    margin: 0 5px;
    font-weight: bold;
    min-width: 100px;
}
.contact-form-container .form-navigation button:hover:not(:disabled) { /* Añadido :not(:disabled) */
    background-color: #1ac8d8;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(63, 236, 255, 0.3);
}

.contact-form-container .form-navigation button.prev-btn {
    background-color: #555;
    color: #fff;
}
.contact-form-container .form-navigation button.prev-btn:hover:not(:disabled) {
    background-color: #666;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(100, 100, 100, 0.3);
}

.contact-form-container .form-navigation button#submit-contact-form {
    background-color: #28a745;
    color: white;
}
.contact-form-container .form-navigation button#submit-contact-form:hover:not(:disabled) {
    background-color: #218838;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.3);
}

.contact-form-container .form-navigation button:disabled {
    background-color: #444 !important;
    color: #888 !important;
    cursor: not-allowed;
    opacity: 0.7;
    transform: none !important;
    box-shadow: none !important;
}

/* Barra de progreso para el formulario de contacto */
.contact-form-container .progress-bar-container.contact-progress {
    width: 100%; background-color: #333; border-radius: 10px; margin-bottom: 30px; height: 10px; overflow: hidden;
}
.contact-form-container .progress-bar.contact-progress-bar {
    width: 0%; height: 100%; background-color: #3fecff; border-radius: 10px; transition: width 0.3s ease-in-out;
}

/* Mensaje de confirmación del formulario de contacto */
.contact-form-container #contact-form-confirmation {
    display: none;
    padding: 20px;
    background-color: #1c4a2a;
    border: 1px solid #28a745;
    color: #d4edda;
    border-radius: 8px;
    text-align: center;
    margin-top: 20px;
    font-size: 1.1em;
}


/* --- Ajustes Responsivos Específicos para el Formulario de Contacto --- */
@media (max-width: 600px) {
    .contact-form-container {
        padding: 20px 25px; /* Menos padding horizontal en móviles */
        margin-top: 20px; /* Menos margen superior */
    }
    .contact-form-container h2 {
        font-size: 1.6em;
    }
    .contact-form-container h3 {
        font-size: 1.15em;
    }
    .contact-form-container .form-step input[type="text"],
    .contact-form-container .form-step input[type="email"],
    .contact-form-container .form-step input[type="url"],
    .contact-form-container .form-step textarea,
    .contact-form-container .form-step select {
        padding: 10px;
        font-size: 15px;
    }
    .contact-form-container .form-navigation button {
        font-size: 14px;
        padding: 8px 15px;
        min-width: 80px; /* Reducir ancho mínimo de botones */
    }
    .contact-form-container .form-navigation {
        flex-direction: column-reverse; /* Apilar botones en móvil */
    }
    .contact-form-container .form-navigation button {
        width: 100%; /* Botones ocupan todo el ancho */
        margin-bottom: 10px; /* Espacio entre botones apilados */
    }
    .contact-form-container .form-navigation button:last-child {
        margin-bottom: 0; /* Sin margen inferior para el último botón */
    }
    .contact-form-container .form-navigation button.prev-btn {
         /* El botón 'anterior' irá arriba en el orden de apilamiento por column-reverse */
    }
}

/* --- Estilos para el Botón de Acción en Resultados del Quiz --- */
#results-action-button-container {
    text-align: center; /* Centrar el botón/enlace */
    margin-top: 30px;   /* Espacio arriba */
    /* display: none; ya no es necesario aquí, JS lo controla */
}

a.results-action-button {
    display: inline-block;
    background-color: #28a745; /* Color verde principal */
    color: white !important; /* Asegurar color de texto blanco, !important por si el tema interfiere con enlaces */
    text-decoration: none !important; /* Quitar subrayado, !important por si el tema interfiere */
    padding: 15px 30px;
    border-radius: 30px; /* Más redondeado para un CTA destacado */
    font-size: 1.1em;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.2);
    border: none; /* Por si el tema añade bordes a los 'a' */
}

a.results-action-button:hover,
a.results-action-button:focus { /* Añadido :focus para accesibilidad */
    background-color: #218838; /* Verde más oscuro al hacer hover/focus */
    color: white !important; /* Mantener color de texto blanco */
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.3);
    text-decoration: none !important; /* Mantener sin subrayado */
}

/* Opcional: Si quieres que ocupe todo el ancho en móviles */
@media (max-width: 600px) {
    a.results-action-button {
        display: block; 
        width: 90%;    
        margin-left: auto;
        margin-right: auto;
        font-size: 1em;
        padding: 12px 20px;
    }
}