/* Quiz de recomendacion de cursos ([novuskills_quiz]). Estilo portado del prototipo standalone
   (Novuskills_WordPress_Quiz_Handoff), sin logo/header, viviendo dentro de un <dialog> nativo en vez
   de una pagina completa (mismo approach que .nvs-cart-modal: showModal() garantiza que quede en la
   "top layer" del navegador, por encima de cualquier otro popup/lightbox del sitio). */

/* Mismo diseno del boton "Check out our courses" de al lado (Elementor,
   .elementor-element-ad7f1ef .elementor-button + .btn-buy .elementor-button-text): fondo blanco,
   8px de radio, texto en degrade azul->cian recortado al texto (background-clip:text). */
/* !important en todo lo visual: el boton generico del tema/Elementor (button, .elementor-button,
   etc.) le gana por especificidad y lo pintaba azul solido sin bordes redondeados. */
.nvs-quiz-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 28px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background-color: #FFFFFF !important;
    background-image: none !important;
    cursor: pointer;
    box-shadow: 0 15px 35px rgba(10, 13, 49, 0.14) !important;
    transition: transform 160ms ease, box-shadow 160ms ease;
}
.nvs-quiz-trigger:hover {
    transform: translateY(-2px);
    background-color: #164DF5 !important;
    box-shadow: 0 18px 42px rgba(10, 13, 49, 0.2) !important;
}
.nvs-quiz-trigger-text {
    font-family: "PlusJakartaSans", "Plus Jakarta Sans", Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    color: #164DF5 !important;
    background: -webkit-linear-gradient(90deg, #0022ff 0%, #00d2d9 100%) !important;
    background: linear-gradient(90deg, #0022ff 0%, #00d2d9 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
/* Al hover, mismo azul solido que "Check out our courses": el texto pasa de degrade recortado a
   blanco solido (con fondo azul, el degrade quedaria ilegible). */
.nvs-quiz-trigger:hover .nvs-quiz-trigger-text {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #fff !important;
    color: #fff !important;
}

/* Dialog nativo: igual que .nvs-cart-modal, no se toca 'display' en el estado base/cerrado para no
   pisar el default de UA dialog:not([open]){display:none}.
   El fondo oscuro se pinta DIRECTO sobre el propio <dialog> (no en un div hijo separado): un hijo
   position:fixed/absolute dentro de un <dialog> mostrado con showModal() puede no cubrir todo el
   viewport en algunos navegadores (quedaba un borde sin cubrir, dejando ver la pagina de atras).
   Pintar el fondo en el dialog mismo no depende de ese comportamiento: el dialog YA es la caja de
   100vw x 100vh, así que su propio background siempre la cubre entera. */
.nvs-quiz-modal {
    position: fixed;
    inset: 0;
    /* Un <dialog> por defecto (UA stylesheet) es width/height:fit-content -- sin width y height
       explicitos ademas de inset:0, se encoge a su contenido en vez de cubrir toda la pantalla.
       100% (no 100vw/100vh) evita que en mobile el ancho no coincida exactamente con el visible real
       (100vw a veces incluye el ancho de la scrollbar), lo que corria el modal hacia un lado. */
    width: 100%;
    height: 100%;
    z-index: 2147483647;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 22px;
    border: 0;
    background: rgba(6, 8, 30, 0.86);
    opacity: 0;
    pointer-events: none;
    transition: opacity .26s ease;
}
.nvs-quiz-modal[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}
.nvs-quiz-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}
.nvs-quiz-modal::backdrop {
    background: transparent;
}
.nvs-quiz-modal-panel {
    position: relative;
    width: min(1180px, 100%);
    max-height: 92vh;
    border-radius: 24px;
    background: radial-gradient(circle at 8% 8%, rgba(0, 43, 255, 0.1), transparent 27rem), radial-gradient(circle at 92% 92%, rgba(184, 255, 216, 0.32), transparent 25rem), #f7f8ff;
    box-shadow: 0 30px 90px rgba(10, 13, 49, 0.35);
    /* El scroll vive en .nvs-quiz-modal-scroll (adentro), no aca: si el que scrollea es el mismo
       elemento con border-radius, la scrollbar nativa corta la esquina redondeada en linea recta.
       Con overflow:hidden aca, el borde redondeado siempre recorta prolijo lo que hay adentro
       (incluida la scrollbar del hijo). */
    overflow: hidden;
}
.nvs-quiz-modal-scroll {
    max-height: 92vh;
    overflow-y: auto;
}
/* position:absolute simple contra el panel (que ya es position:relative), en vez del hack anterior
   de position:sticky + left:100% + margen negativo que lo cortaba mal justo en la esquina.
   !important en las propiedades visuales porque el boton generico del tema (button[type="button"])
   le estaba ganando por especificidad y lo mostraba como rectangulo azul en vez de circulo blanco. */
.nvs-quiz-modal-close {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    width: 40px !important;
    height: 40px !important;
    min-height: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.92) !important;
    color: #0a0d31 !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    padding: 0 !important;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 8px 20px rgba(6, 8, 30, 0.3) !important;
}
.nvs-quiz-modal-close:hover {
    background: #fff !important;
    color: #0a0d31 !important;
}

/* Escapado a .nvs-quiz-modal (no [hidden] global): un selector sin scope pisa CUALQUIER elemento
   de la pagina con el atributo hidden -- incluidos, por ejemplo, videos/iframes que Elementor
   pudiera ocultar temporalmente con ese mismo atributo mientras hacen su propio lazy-load, dejandolos
   escondidos para siempre. Acotado asi solo afecta los pasos/pantallas del quiz. */
.nvs-quiz-modal [hidden] {
    display: none !important;
}

/* Modo "pantalla completa sin poder cerrar" (learn-the-skills con ?quiz-test-open en la URL, ver
   maybeOpenLockedFullscreenQuiz() en novuskills-quiz.js): mismo criterio que el media query de mobile
   de mas abajo (padding:0, panel a 100vh sin border-radius) pero sin depender del ancho de pantalla,
   y ademas sin la X para cerrar (el JS ya ignora clicks/Escape en este modo, pero sacarla del DOM
   evita que quede un boton que visualmente promete algo que no hace). */
.nvs-quiz-modal.nvs-quiz-locked {
    padding: 0;
}
.nvs-quiz-modal.nvs-quiz-locked .nvs-quiz-modal-panel {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
}
.nvs-quiz-modal.nvs-quiz-locked .nvs-quiz-modal-scroll {
    max-height: 100%;
    height: 100%;
}
.nvs-quiz-modal.nvs-quiz-locked .nvs-quiz-modal-close {
    display: none !important;
}

/* ---- Portado de novuskills-quiz.css (prototipo standalone), sin header/logo ---- */

.novus-quiz {
    --novus-blue: #002bff;
    --novus-blue-dark: #010ed0;
    --novus-ink: #0a0d31;
    --novus-text: #1d2347;
    --novus-muted: #66709a;
    --novus-line: #dfe4ff;
    --novus-soft: #f3f5ff;
    --novus-lime: #dfff5f;
    display: block;
    width: 100%;
    color: var(--novus-ink);
    font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    isolation: isolate;
    border-radius: 24px;
}

.novus-quiz *, .novus-quiz *::before, .novus-quiz *::after { box-sizing: border-box; }
.novus-quiz button, .novus-quiz input { font: inherit; }
.novus-quiz button { cursor: pointer; }
.novus-quiz button:disabled, .novus-quiz input:disabled { cursor: wait; opacity: 0.72; }
.novus-quiz h1, .novus-quiz h2, .novus-quiz p, .novus-quiz blockquote { padding: 0; }
.novus-quiz .novus-focus-target:focus { outline: none; }

.novus-quiz .novus-landing { width: min(1180px, calc(100% - 36px)); margin: 0 auto; padding: 60px 0 44px; display: grid; grid-template-columns: 1fr; column-gap: 70px; align-items: center; text-align: center; }
.novus-quiz .novus-hero-copy { max-width: 720px; margin: 0 auto; }
.novus-quiz .novus-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(0, 43, 255, 0.08); color: var(--novus-blue); font-size: 13px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.055em; }
.novus-quiz .novus-landing h1, .novus-quiz .novus-result-intro h1 { margin: 22px 0 18px; color: var(--novus-ink); font-family: "Special Gothic Expanded One", "Plus Jakarta Sans", Arial, sans-serif; line-height: 1.1; letter-spacing: -0.03em; font-weight: 700; }
.novus-quiz .novus-landing h1 { font-size: clamp(26px, 4vw, 40px); }
.novus-quiz .novus-lead { max-width: 610px; margin: 0 auto 30px; color: var(--novus-muted); font-size: 20px; line-height: 1.6; }
.novus-quiz .novus-primary { min-height: 56px; border: 0; border-radius: 14px; background: linear-gradient(135deg, var(--novus-blue), var(--novus-blue-dark)); color: #fff; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 11px; font-weight: 760; font-size: 16px; line-height: 1.2; text-decoration: none; box-shadow: 0 15px 35px rgba(0, 43, 255, 0.24); transition: transform 160ms ease, box-shadow 160ms ease; }
.novus-quiz .novus-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 18px 42px rgba(0, 43, 255, 0.31); }
.novus-quiz .novus-primary:focus-visible, .novus-quiz button:focus-visible, .novus-quiz input:focus-visible { outline: 3px solid rgba(0, 43, 255, 0.35); outline-offset: 3px; }
.novus-quiz .novus-trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 22px; color: var(--novus-muted); font-size: 14px; font-weight: 650; }

.novus-quiz .novus-quiz-wrap { width: min(720px, calc(100% - 32px)); margin: 32px auto 60px; }
.novus-quiz .novus-progress-meta { display: flex; justify-content: space-between; align-items: center; color: var(--novus-muted); font-size: 13px; font-weight: 700; }
.novus-quiz .novus-back { border: 0; background: transparent; color: var(--novus-text); display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; font-weight: 700; }
.novus-quiz .novus-progress { height: 5px; margin: 8px 0 34px; background: #e5e8f8; border-radius: 99px; overflow: hidden; }
.novus-quiz .novus-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--novus-blue), #7685ff); transition: width 300ms ease; }
.novus-quiz .novus-quiz-card { min-height: 460px; padding: clamp(24px, 5vw, 48px); border-radius: 28px; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(255, 255, 255, 0.94); box-shadow: 0 28px 80px rgba(20, 28, 88, 0.11); }
.novus-quiz .novus-eyebrow { margin: 0 0 14px; color: var(--novus-blue); text-transform: uppercase; letter-spacing: 0.105em; font-weight: 800; font-size: 12px; }
.novus-quiz .novus-quiz-card h2, .novus-quiz .novus-calculating h2, .novus-quiz .novus-result-card h2 { margin: 0; color: inherit; font-family: "Special Gothic Expanded One", "Plus Jakarta Sans", Arial, sans-serif; font-size: clamp(26px, 4.4vw, 38px); line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; }
/* Titulo de las preguntas (no insight/review/calculating/result) reducido a escala h3. */
.novus-quiz .novus-quiz-card.question h2 { font-size: clamp(19px, 2.6vw, 24px); font-weight: 400; }
.novus-quiz .novus-helper { margin: 14px 0 0; color: var(--novus-muted); line-height: 1.55; }
.novus-quiz .novus-options { display: grid; gap: 11px; margin-top: 26px; }
.novus-quiz .novus-options button { width: 100%; min-height: 66px; border: 1px solid var(--novus-line); border-radius: 15px; background: #fafbff; color: var(--novus-text); padding: 14px 16px 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; transition: border-color 150ms ease, background 150ms ease, transform 150ms ease; }
.novus-quiz .novus-options button:hover { border-color: rgba(0, 43, 255, 0.48); background: #fff; transform: translateX(3px); }
.novus-quiz .novus-options button.selected { border-color: var(--novus-blue); background: rgba(0, 43, 255, 0.055); }
.novus-quiz .novus-option-copy { display: flex; flex-direction: column; gap: 4px; }
.novus-quiz .novus-option-copy strong { font-size: 15px; line-height: 1.3; font-weight: 600; }
.novus-quiz .novus-option-copy small { color: var(--novus-muted); line-height: 1.35; font-size: 13px; }
.novus-quiz .novus-option-check { width: 25px; height: 25px; flex: 0 0 auto; border: 1px solid #cfd5ee; border-radius: 50%; display: grid; place-items: center; color: transparent; font-size: 13px; }
.novus-quiz .selected .novus-option-check { background: var(--novus-blue); border-color: var(--novus-blue); color: #fff; }
.novus-quiz .novus-quiz-card.insight, .novus-quiz .novus-quiz-card.review, .novus-quiz .novus-quiz-card.email { display: flex; flex-direction: column; justify-content: center; }
.novus-quiz .novus-insight-body { color: var(--novus-muted); font-size: 18px; line-height: 1.65; margin: 20px 0; }
.novus-quiz .novus-insight-accent { padding: 18px 20px; border-left: 3px solid var(--novus-blue); border-radius: 0 12px 12px 0; background: var(--novus-soft); color: var(--novus-text); line-height: 1.55; margin: 0 0 28px; font-weight: 650; }
.novus-quiz .novus-quiz-card .novus-primary { align-self: flex-start; }
.novus-quiz .novus-stars { color: #ffad0d; letter-spacing: 0.13em; margin-bottom: 22px; }
.novus-quiz .novus-quiz-card blockquote { margin: 22px 0 14px; color: var(--novus-text); font-family: Georgia, serif; font-size: 23px; line-height: 1.5; font-style: italic; border: 0; }
.novus-quiz .novus-review-author { margin: 0 0 30px; color: var(--novus-muted); font-weight: 750; }
.novus-quiz .novus-email-label { display: block; color: var(--novus-text); font-size: 13px; font-weight: 750; margin: 2px 0 8px; }
.novus-quiz .novus-email { width: 100%; min-height: 58px; border: 1px solid var(--novus-line); border-radius: 14px; background: #fafbff; color: var(--novus-ink); padding: 0 16px; font-size: 16px; outline: none; margin: 0 0 13px; box-shadow: none; }
.novus-quiz .novus-email:focus { border-color: var(--novus-blue); box-shadow: 0 0 0 4px rgba(0, 43, 255, 0.08); }
.novus-quiz .novus-error { color: #b42318; margin: -2px 0 13px; font-size: 13px; font-weight: 650; }
.novus-quiz .novus-privacy { color: var(--novus-muted); margin: 14px 0 0; font-size: 12px; }

.novus-quiz .novus-calculating { width: min(620px, calc(100% - 32px)); margin: 60px auto; text-align: center; padding: 58px 40px; border-radius: 30px; background: #fff; box-shadow: 0 28px 80px rgba(20, 28, 88, 0.11); }
.novus-quiz .novus-analysis-list { display: grid; gap: 12px; margin: 30px auto 0; max-width: 390px; text-align: left; }
.novus-quiz .novus-analysis-list span { display: flex; align-items: center; gap: 10px; color: var(--novus-muted); }
.novus-quiz .novus-mini-loader { width: 16px; height: 16px; border: 2px solid #cfd5f4; border-top-color: var(--novus-blue); border-radius: 50%; animation: novus-quiz-spin 0.8s linear infinite; }
@keyframes novus-quiz-spin { to { transform: rotate(360deg); } }

.novus-quiz .novus-result { width: min(850px, calc(100% - 32px)); margin: 32px auto 60px; text-align: center; }
.novus-quiz .novus-result-intro { max-width: 720px; margin: 0 auto 32px; }
.novus-quiz .novus-result-intro h1 { font-size: clamp(32px, 6vw, 48px); }
.novus-quiz .novus-result-intro h1 span { color: var(--novus-blue); }
.novus-quiz .novus-result-intro > p:last-child { color: var(--novus-muted); font-size: 18px; line-height: 1.65; }
.novus-quiz .novus-result-card { position: relative; text-align: left; padding: clamp(28px, 6vw, 50px); border-radius: 28px; background: linear-gradient(150deg, var(--novus-ink), #111b68); color: #fff; box-shadow: 0 30px 70px rgba(10, 13, 49, 0.25); overflow: hidden; }
.novus-quiz .novus-result-card::after { content: ""; position: absolute; width: 330px; height: 330px; right: -170px; top: -160px; border-radius: 50%; background: rgba(116, 132, 255, 0.22); }
.novus-quiz .novus-match-label { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; background: var(--novus-lime); color: var(--novus-ink); padding: 8px 11px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; font-weight: 850; }
.novus-quiz .novus-course-topline { position: relative; z-index: 1; margin: 32px 0 12px; display: flex; justify-content: space-between; gap: 18px; color: #bdc5ff; font-size: 13px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 750; }
.novus-quiz .novus-result-card h2 { position: relative; z-index: 1; font-size: clamp(32px, 6vw, 46px); }
.novus-quiz .novus-course-promise { position: relative; z-index: 1; color: #dce0ff; font-size: 20px; margin: 12px 0 28px; }
.novus-quiz .novus-practice-list { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 34px; }
.novus-quiz .novus-practice-list span { display: inline-flex; align-items: center; gap: 8px; color: #e8eaff; font-size: 14px; }
.novus-quiz .novus-price-row { position: relative; z-index: 1; padding-top: 25px; border-top: 1px solid rgba(255, 255, 255, 0.18); display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; }
.novus-quiz .novus-price-row > div { display: flex; flex-direction: column; }
.novus-quiz .novus-price-row strong { font-size: 34px; font-weight: 800; }
.novus-quiz .novus-price-row strong sup { font-size: 13px; font-weight: 700; margin-left: 4px; vertical-align: super; }
.novus-quiz .novus-price-row > div span { color: #bbc3ec; font-size: 12px; }
.novus-quiz .novus-guarantee { display: inline-flex; align-items: center; gap: 7px; }
.novus-quiz .novus-result-card .result-cta { position: relative; z-index: 1; width: 100%; margin-top: 22px; background: var(--novus-lime); color: var(--novus-ink); box-shadow: none; }
.novus-quiz .novus-result-card .result-cta:hover { color: var(--novus-ink); }
.novus-quiz .novus-secondary,
.novus-quiz .nvs-quiz-result-secondary { margin-top: 34px; text-align: left; }
.novus-quiz .nvs-quiz-result-secondary > p { color: var(--novus-muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; font-weight: 800; margin: 0 0 14px; }
.novus-quiz .nvs-quiz-result-secondary-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.novus-quiz .nvs-quiz-result-secondary-item article { display: flex; flex-direction: column; gap: 6px; background: rgba(255, 255, 255, 0.85); border: 1px solid var(--novus-line); border-radius: 16px; padding: 20px; }
.novus-quiz .nvs-quiz-result-secondary-item article span { color: var(--novus-blue); text-transform: uppercase; letter-spacing: 0.07em; font-size: 10px; font-weight: 800; }
.novus-quiz .nvs-quiz-result-secondary-item article strong { font-size: 18px; }
.novus-quiz .nvs-quiz-result-secondary-item article small { color: var(--novus-muted); line-height: 1.4; font-size: 13px; }
.novus-quiz .novus-reset { margin: 28px auto 0; border: 0; background: transparent; color: var(--novus-muted); display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }
.novus-quiz .nvs-quiz-result-empty { max-width: 480px; margin: 0 auto; }
.novus-quiz .nvs-quiz-result-empty p { color: var(--novus-muted); margin: 0 0 20px; }

@media (max-width: 820px) {
    .novus-quiz .novus-landing { padding-top: 36px; }
    .novus-quiz .novus-trust-row { justify-content: center; }
}

@media (max-width: 560px) {
    .nvs-quiz-modal { padding: 0; }
    .nvs-quiz-modal-panel { max-height: 100vh; height: 100vh; border-radius: 0; }
    .nvs-quiz-modal-scroll { max-height: 100vh; height: 100%; }
    .novus-quiz .novus-landing { padding-top: 28px; }
    .novus-quiz .novus-landing h1 { font-size: 32px; }
    .novus-quiz .novus-primary { width: 100%; }
    .novus-quiz .novus-trust-row { display: grid; gap: 9px; }
    .novus-quiz .novus-quiz-wrap { margin-top: 20px; }
    .novus-quiz .novus-quiz-card { min-height: 0; padding: 26px 20px; border-radius: 22px; }
    .novus-quiz .novus-quiz-card h2 { font-size: 27px; }
    .novus-quiz .novus-options button { min-height: 62px; }
    .novus-quiz .novus-quiz-card blockquote { font-size: 19px; }
    .novus-quiz .novus-calculating { margin-top: 32px; padding: 38px 22px; }
    .novus-quiz .novus-result { margin-top: 28px; }
    .novus-quiz .novus-course-topline, .novus-quiz .novus-price-row { align-items: flex-start; flex-direction: column; }
    .novus-quiz .novus-result-card h2 { font-size: 34px; }
    .novus-quiz .nvs-quiz-result-secondary-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .novus-quiz *, .novus-quiz *::before, .novus-quiz *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}