/** * Diagnóstico Legal KNR — estilos del modal y del CTA. * * Componente autocontenido (no depende de Webflow IX2). Usa los tokens de marca * definidos en :root de style.css, con fallback en hex por robustez. * * @package KNR */ /* ------------------------------------------------------------------ * * Bloqueo de scroll cuando el modal está abierto (clase en ). * ------------------------------------------------------------------ */ html.knr-diag-is-open, html.knr-diag-is-open body { overflow: hidden; } /* Reset de box-sizing acotado al modal (no depende del reset global del tema). */ .knr-diag-overlay, .knr-diag-overlay *, .knr-diag-overlay *::before, .knr-diag-overlay *::after { box-sizing: border-box; } /* ------------------------------------------------------------------ * * Overlay + tarjeta * ------------------------------------------------------------------ */ .knr-diag-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; background-color: rgba(31, 31, 31, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity 0.3s ease; font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; } .knr-diag-overlay.is-open { opacity: 1; } /* El atributo hidden debe ganar siempre, incluso sobre display:flex/grid de .knr-diag-foot, .knr-diag-progress, botones, paneles de resultado, etc. */ .knr-diag-overlay[hidden], .knr-diag-overlay [hidden] { display: none !important; } .knr-diag-modal { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 680px; max-height: 90vh; background-color: var(--warm-white, #fcfbf8); border-radius: 24px; box-shadow: 0 30px 80px rgba(13, 13, 13, 0.35); overflow: hidden; transform: translateY(14px) scale(0.985); transition: transform 0.4s cubic-bezier(0.16, 0.84, 0.44, 1); } .knr-diag-overlay.is-open .knr-diag-modal { transform: none; } /* ------------------------------------------------------------------ * * Header + progreso * ------------------------------------------------------------------ */ .knr-diag-head { flex: 0 0 auto; padding: 22px 28px 0; background-color: var(--warm-white, #fcfbf8); } .knr-diag-head-top { display: flex; align-items: center; justify-content: space-between; } .knr-diag-eyebrow { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--secondary-orange, #f18a00); } .knr-diag-close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: -8px -8px 0 0; padding: 0; border: none; border-radius: 100%; background-color: transparent; color: var(--primary-black, #1f1f1f); cursor: pointer; transition: background-color 0.2s ease; } .knr-diag-close:hover { background-color: var(--soft-gray, #eaeaea); } .knr-diag-progress { margin-top: 18px; } .knr-diag-progress-track { width: 100%; height: 5px; border-radius: 999px; background-color: var(--soft-gray, #eaeaea); overflow: hidden; } .knr-diag-progress-fill { display: block; height: 100%; width: 0; border-radius: 999px; background-color: var(--secondary-orange, #f18a00); transition: width 0.4s cubic-bezier(0.16, 0.84, 0.44, 1); } .knr-diag-progress-text { margin: 8px 0 0; font-size: 12px; letter-spacing: 0.3px; color: var(--iron-gray, #626262); } /* ------------------------------------------------------------------ * * Cuerpo + pasos * ------------------------------------------------------------------ */ .knr-diag-body { flex: 1 1 auto; overflow-y: auto; padding: 24px 28px 8px; -webkit-overflow-scrolling: touch; } .knr-diag-step { margin: 0; padding: 0; border: none; min-width: 0; } .knr-diag-step:not(.is-active) { display: none; } .knr-diag-step.is-active { display: block; animation: knrDiagStepIn 0.35s ease both; } @keyframes knrDiagStepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* Títulos / textos compartidos */ .knr-diag-title { margin: 0 0 12px; font-family: Anton, "Helvetica Neue", sans-serif; font-weight: 400; font-size: 32px; line-height: 1.08; letter-spacing: -0.4px; text-transform: none; /* anula la regla global de h2 */ color: var(--primary-black, #1f1f1f); } .knr-diag-slogan { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--secondary-orange, #f18a00); } .knr-diag-lead { margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: var(--iron-gray, #626262); } .knr-diag-valueprops { margin: 0; padding: 0; list-style: none; } .knr-diag-valueprops li { position: relative; padding: 10px 0 10px 22px; font-size: 15px; line-height: 1.55; color: var(--primary-black, #1f1f1f); border-top: 1px solid var(--soft-gray, #eaeaea); } .knr-diag-valueprops li:first-child { border-top: none; } .knr-diag-valueprops li::before { content: ""; position: absolute; left: 0; top: 18px; width: 8px; height: 8px; border-radius: 100%; background-color: var(--secondary-orange, #f18a00); } /* Pregunta */ .knr-diag-question { display: block; float: none; width: 100%; margin: 0 0 6px; padding: 0; font-family: Inter, "Helvetica Neue", sans-serif; font-size: 23px; font-weight: 600; line-height: 1.25; letter-spacing: -0.4px; color: var(--primary-black, #1f1f1f); } .knr-diag-hint { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--iron-gray, #626262); } /* Opciones */ .knr-diag-options { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; } .knr-diag-option { display: flex; align-items: center; gap: 13px; padding: 14px 18px; border: 1.5px solid var(--soft-gray, #eaeaea); border-radius: 14px; background-color: var(--white, #fffffc); cursor: pointer; transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease; } .knr-diag-option:hover { border-color: var(--grey, #acacac); } .knr-diag-option input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--secondary-orange, #f18a00); cursor: pointer; } .knr-diag-option-label { flex: 1 1 auto; min-width: 0; font-size: 15.5px; line-height: 1.4; color: var(--primary-black, #1f1f1f); overflow-wrap: anywhere; } /* Estado seleccionado (vía :has nativo y vía clase JS de respaldo) */ .knr-diag-option:has(input:checked), .knr-diag-option.is-selected { border-color: var(--secondary-orange, #f18a00); background-color: rgba(241, 138, 0, 0.07); box-shadow: inset 0 0 0 1px var(--secondary-orange, #f18a00); } /* Opción deshabilitada (tope de selección alcanzado) */ .knr-diag-option.is-disabled { opacity: 0.45; pointer-events: none; } /* Campo "Otro" + textarea */ .knr-diag-other-input, .knr-diag-textarea, .knr-diag-input { width: 100%; margin-top: 0; padding: 13px 16px; font-family: inherit; font-size: 15.5px; color: var(--primary-black, #1f1f1f); background-color: var(--white, #fffffc); border: 1.5px solid var(--soft-gray, #eaeaea); border-radius: 12px; box-sizing: border-box; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .knr-diag-other-input { margin-top: 10px; } .knr-diag-textarea { resize: vertical; min-height: 110px; line-height: 1.5; } .knr-diag-other-input:focus, .knr-diag-textarea:focus, .knr-diag-input:focus { outline: none; border-color: var(--secondary-orange, #f18a00); box-shadow: 0 0 0 3px rgba(241, 138, 0, 0.18); } .knr-diag-other-input[hidden] { display: none; } /* Campos de contacto */ .knr-diag-field { margin-bottom: 14px; } .knr-diag-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.2px; color: var(--iron-gray, #626262); } /* Consentimiento */ .knr-diag-consent { display: flex; align-items: flex-start; gap: 11px; margin-top: 18px; font-size: 13.5px; line-height: 1.55; color: var(--iron-gray, #626262); cursor: pointer; } .knr-diag-consent input { flex: 0 0 auto; width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--secondary-orange, #f18a00); cursor: pointer; } .knr-diag-consent a { color: var(--primary-black, #1f1f1f); text-decoration: underline; } .knr-diag-consent a:hover { color: var(--secondary-orange, #f18a00); } .knr-diag-turnstile { margin-top: 18px; } /* Error por paso */ .knr-diag-step-error { margin: 14px 0 0; padding: 10px 14px; font-size: 13.5px; color: #b3261e; background-color: rgba(179, 38, 30, 0.07); border-radius: 10px; } .knr-diag-step-error[hidden] { display: none; } /* ------------------------------------------------------------------ * * Repaso * ------------------------------------------------------------------ */ .knr-diag-review { margin-top: 10px; } .knr-diag-review-item { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-top: 1px solid var(--soft-gray, #eaeaea); } .knr-diag-review-item:first-child { border-top: none; } .knr-diag-review-main { flex: 1 1 auto; min-width: 0; } .knr-diag-review-q { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: var(--secondary-orange, #f18a00); margin-bottom: 3px; } .knr-diag-review-a { font-size: 15px; line-height: 1.45; color: var(--primary-black, #1f1f1f); word-wrap: break-word; } .knr-diag-review-edit { flex: 0 0 auto; border: none; background: none; padding: 2px 4px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--iron-gray, #626262); text-decoration: underline; cursor: pointer; } .knr-diag-review-edit:hover { color: var(--secondary-orange, #f18a00); } /* ------------------------------------------------------------------ * * Footer + botones * ------------------------------------------------------------------ */ .knr-diag-foot { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 16px 28px 22px; background-color: var(--warm-white, #fcfbf8); border-top: 1px solid var(--soft-gray, #eaeaea); } .knr-diag-foot-spacer { flex: 1 1 auto; } .knr-diag-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 32px; font-family: Inter, "Helvetica Neue", sans-serif; font-size: 16px; font-weight: 500; letter-spacing: -0.3px; border: 1.5px solid transparent; border-radius: 64px; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, opacity 0.2s ease; } .knr-diag-next, .knr-diag-submit { background-color: var(--secondary-orange, #f18a00); color: var(--primary-black, #1f1f1f); } .knr-diag-next:hover, .knr-diag-submit:hover { background-color: var(--primary-black, #1f1f1f); color: var(--white, #fffffc); } .knr-diag-back { background-color: transparent; color: var(--iron-gray, #626262); border-color: var(--soft-gray, #eaeaea); padding-left: 24px; padding-right: 24px; } .knr-diag-back:hover { border-color: var(--primary-black, #1f1f1f); color: var(--primary-black, #1f1f1f); } .knr-diag-btn[hidden] { display: none; } .knr-diag-btn:disabled { opacity: 0.6; cursor: default; } /* ------------------------------------------------------------------ * * Paneles de resultado * ------------------------------------------------------------------ */ .knr-diag-result { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 340px; padding: 48px 36px; text-align: center; background-color: var(--warm-white, #fcfbf8); animation: knrDiagStepIn 0.35s ease both; } .knr-diag-result[hidden] { display: none; } .knr-diag-result-icon { margin-bottom: 8px; } .knr-diag-result .knr-diag-title { max-width: 26ch; } .knr-diag-result .knr-diag-lead { max-width: 46ch; margin-bottom: 24px; } .knr-diag-error .knr-diag-title { color: #b3261e; } /* Honeypot: oculto a humanos, presente para bots */ .knr-diag-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* ------------------------------------------------------------------ * * Foco visible (coherente con el tema) * ------------------------------------------------------------------ */ .knr-diag-overlay :focus-visible { outline: 2px solid var(--secondary-orange, #f18a00); outline-offset: 3px; } /* Contenedores que reciben foco por JS (anuncio a lectores de pantalla) no deben mostrar contorno: el foco es programático, no de teclado. */ .knr-diag-step:focus, .knr-diag-step:focus-visible, .knr-diag-result:focus, .knr-diag-result:focus-visible, .knr-diag-modal:focus, .knr-diag-modal:focus-visible { outline: none; } .knr-diag-option:focus-within { border-color: var(--secondary-orange, #f18a00); } /* ------------------------------------------------------------------ * * Móvil: pantalla completa * ------------------------------------------------------------------ */ @media (max-width: 600px) { .knr-diag-overlay { padding: 0; } .knr-diag-modal { max-width: 100%; width: 100%; height: 100%; max-height: 100%; border-radius: 0; } .knr-diag-head { padding: 18px 20px 0; } .knr-diag-body { padding: 20px 20px 8px; } .knr-diag-foot { padding: 14px 20px 18px; } .knr-diag-title { font-size: 27px; } .knr-diag-question { font-size: 21px; } .knr-diag-btn { padding: 14px 24px; font-size: 15px; } } /* ------------------------------------------------------------------ * * Movimiento reducido * ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .knr-diag-overlay, .knr-diag-modal, .knr-diag-step.is-active, .knr-diag-result, .knr-diag-progress-fill { transition: none !important; animation: none !important; } } /* ================================================================== * * CTA (banda + botón inline) * ================================================================== */ .knr-diag-cta-band { padding: 72px 0; background-color: var(--soft-gray, #eaeaea); } .knr-diag-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .knr-diag-cta-copy { flex: 1 1 420px; min-width: 0; } .knr-diag-cta-eyebrow { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--secondary-orange, #f18a00); } .knr-diag-cta-title { margin: 0 0 14px; font-family: Anton, "Helvetica Neue", sans-serif; font-weight: 400; font-size: 44px; line-height: 1.02; letter-spacing: -0.5px; text-transform: uppercase; color: var(--primary-black, #1f1f1f); } .knr-diag-cta-text { margin: 0; max-width: 52ch; font-size: 17px; line-height: 1.55; color: var(--iron-gray, #626262); } .knr-diag-cta-action { flex: 0 0 auto; } .knr-diag-cta-btn { display: inline-flex; align-items: center; gap: 14px; padding: 19px 32px; font-family: Inter, "Helvetica Neue", sans-serif; font-size: 18px; font-weight: 500; letter-spacing: -0.4px; color: var(--primary-black, #1f1f1f); background-color: var(--secondary-orange, #f18a00); border: none; border-radius: 64px; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; } .knr-diag-cta-btn:hover { background-color: var(--primary-black, #1f1f1f); color: var(--white, #fffffc); } .knr-diag-cta-arrow { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 100%; background-color: var(--primary-black, #1f1f1f); color: var(--white, #fffffc); transition: background-color 0.3s ease, color 0.3s ease; } .knr-diag-cta-btn:hover .knr-diag-cta-arrow { background-color: var(--white, #fffffc); color: var(--primary-black, #1f1f1f); } .knr-diag-cta-btn:focus-visible { outline: 2px solid var(--primary-black, #1f1f1f); outline-offset: 4px; } @media (max-width: 767px) { .knr-diag-cta-band { padding: 48px 0; } .knr-diag-cta-title { font-size: 34px; } .knr-diag-cta-inner { gap: 28px; } }