/* ══════════════════════════════════════════════════════════════════════════ Un Corazón Contigo · capa de accesibilidad Nada de aquí se aplica hasta que la persona lo activa desde el panel. El núcleo (js/accesibilidad.js) pinta atributos data-a11y-* en . ══════════════════════════════════════════════════════════════════════════ */ /* ── Botón flotante y panel ─────────────────────────────────────────────── */ .a11y { position: fixed; right: 90px; bottom: 20px; z-index: 300; font-family: 'Nunito', system-ui, sans-serif; } .a11y [hidden] { display: none !important; } .a11y__boton { position: relative; width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer; background: linear-gradient(180deg, #3E6CA6 0%, #16375E 55%, #071C36 100%); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 26px rgba(13, 43, 78, .34); transition: transform .14s ease, box-shadow .14s ease; } .a11y__boton:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(13, 43, 78, .42); } .a11y__boton:focus-visible { outline: 3px solid var(--esperanza, #FFCB57); outline-offset: 3px; } .a11y__boton.is-activa::after { content: ''; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--bienestar, #6CCBAE); border: 2px solid #fff; } .a11y__panel { position: absolute; right: -70px; bottom: 72px; width: 400px; max-width: calc(100vw - 32px); max-height: calc(100vh / var(--a11y-zoom, 1) / 1.1 - 110px); background: #fff; border: 1px solid var(--linea, #EAE2DC); border-radius: 18px; box-shadow: 0 22px 60px rgba(13, 43, 78, .22); display: flex; flex-direction: column; overflow: hidden; color: var(--tinta, #12253F); } .a11y__panel:focus { outline: none; } .a11y__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 16px 18px; background: linear-gradient(180deg, #16375E, #0D2B4E); color: #fff; } .a11y__cab strong { display: block; font-size: 1.02rem; line-height: 1.3; } .a11y__cab span { display: block; font-size: .84rem; opacity: .88; margin-top: 3px; } .a11y__x { background: rgba(255,255,255,.16); border: none; color: #fff; cursor: pointer; flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; } .a11y__x:hover { background: rgba(255,255,255,.28); } .a11y__x:focus-visible { outline: 3px solid var(--esperanza, #FFCB57); outline-offset: 2px; } .a11y__cuerpo { flex: 1 1 auto; overflow-y: auto; padding: 16px 18px; display: grid; gap: 16px; background: var(--nube, #F6F8FC); } .a11y__acciones { display: grid; gap: 8px; } .a11y__accion { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 10px 16px; border-radius: 999px; border: none; cursor: pointer; font: inherit; font-weight: 800; background: var(--corazon-fuerte, #CE4141); color: #fff; box-shadow: 0 8px 20px rgba(206, 65, 65, .28); } .a11y__accion:hover { filter: brightness(1.06); } .a11y__accion:focus-visible { outline: 3px solid var(--confianza, #0D2B4E); outline-offset: 3px; } .a11y__accion.is-leyendo { background: var(--confianza, #0D2B4E); box-shadow: 0 8px 20px rgba(13, 43, 78, .28); } .a11y__grupo { border: none; margin: 0; padding: 0; min-width: 0; } .a11y__grupo legend { font-weight: 800; font-size: .92rem; padding: 0; margin-bottom: 6px; } .a11y__ayuda { margin: -2px 0 8px; font-size: .82rem; color: var(--tinta-2, #5A6B84); } .a11y__seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; background: #fff; border: 1px solid var(--linea, #EAE2DC); border-radius: 999px; } .a11y__seg [role="radio"] { min-height: 40px; border: none; border-radius: 999px; background: transparent; cursor: pointer; font: inherit; font-weight: 700; font-size: .9rem; color: var(--tinta, #12253F); padding: 0 6px; } .a11y__seg [role="radio"]:hover { background: var(--confianza-tenue, #E7EDF5); } .a11y__seg [role="radio"][aria-checked="true"] { background: var(--confianza, #0D2B4E); color: #fff; } .a11y__seg [role="radio"]:focus-visible { outline: 3px solid var(--confianza, #0D2B4E); outline-offset: 2px; } [data-grupo="texto"] [role="radio"]:nth-child(2) { font-size: 1rem; } [data-grupo="texto"] [role="radio"]:nth-child(3) { font-size: 1.08rem; } [data-grupo="texto"] [role="radio"]:nth-child(4) { font-size: 1.16rem; } .a11y__switches { display: grid; gap: 4px; background: #fff; border: 1px solid var(--linea, #EAE2DC); border-radius: 14px; padding: 6px 12px; } .a11y__switch { display: flex; align-items: center; gap: 12px; min-height: 52px; cursor: pointer; padding: 6px 0; position: relative; } .a11y__switch + .a11y__switch { border-top: 1px solid var(--linea, #EAE2DC); } .a11y__switch input { position: absolute; opacity: 0; width: 0; height: 0; } .a11y__track { flex: none; width: 46px; height: 26px; border-radius: 999px; background: #C9D1DC; position: relative; transition: background .16s ease; } .a11y__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .16s ease; } .a11y__switch input:checked + .a11y__track { background: var(--bienestar, #6CCBAE); } .a11y__switch input:checked + .a11y__track::after { transform: translateX(20px); } .a11y__switch input:focus-visible + .a11y__track { outline: 3px solid var(--confianza, #0D2B4E); outline-offset: 3px; } .a11y__switch-texto { display: grid; gap: 1px; } .a11y__switch-texto strong { font-size: .92rem; } .a11y__switch-texto small { font-size: .8rem; color: var(--tinta-2, #5A6B84); } .a11y__pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 18px; border-top: 1px solid var(--linea, #EAE2DC); background: #fff; font-size: .78rem; color: var(--tinta-2, #5A6B84); } .a11y__pie kbd { font: inherit; font-size: .72rem; padding: 1px 5px; border: 1px solid var(--linea, #EAE2DC); border-bottom-width: 2px; border-radius: 5px; background: #fff; } .a11y__restablecer { background: none; border: none; cursor: pointer; font: inherit; font-weight: 800; font-size: .84rem; color: var(--confianza, #0D2B4E); text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; } .a11y__restablecer:focus-visible { outline: 3px solid var(--confianza, #0D2B4E); outline-offset: 2px; border-radius: 4px; } @media (max-width: 480px) { .a11y { right: 84px; bottom: 14px; } .a11y__panel { right: -64px; width: calc(100vw - 28px); max-height: min(80vh, 640px); } } /* Al cambiar de página el foco va al

para los lectores de pantalla; el marco visual solo se muestra si la persona pidió «Resaltar el foco». */ h1[tabindex="-1"]:focus, #vista[tabindex="-1"]:focus { outline: none; box-shadow: none; } html[data-a11y-foco] h1[tabindex="-1"]:focus { outline: 4px solid #000; outline-offset: 8px; box-shadow: 0 0 0 12px var(--esperanza, #FFCB57); } /* La lectura en voz alta resalta el bloque que se está leyendo. */ .a11y-leyendo { outline: 3px solid var(--esperanza, #FFCB57) !important; outline-offset: 4px; border-radius: 6px; background-color: rgba(255, 203, 87, .18) !important; box-decoration-break: clone; } /* ── Tamaño del texto ───────────────────────────────────────────────────── */ /* `zoom` escala la interfaz completa y respeta la maqueta; el navegador recalcula el layout como si la ventana fuera más pequeña. */ html { --a11y-zoom: 1; } html[data-a11y-texto="1"] { --a11y-zoom: 1.15; } html[data-a11y-texto="2"] { --a11y-zoom: 1.3; } html[data-a11y-texto="3"] { --a11y-zoom: 1.5; } html[data-a11y-texto] body { zoom: var(--a11y-zoom); } /* Los flotantes crecen menos que el resto para que el panel siga cabiendo. */ html[data-a11y-texto] .a11y, html[data-a11y-texto] .soporte { zoom: calc(1 / var(--a11y-zoom) * 1.1); } /* ── Espaciado (WCAG 1.4.12) ────────────────────────────────────────────── */ html[data-a11y-espaciado="amplio"] body { line-height: 1.7; letter-spacing: .04em; word-spacing: .1em; } html[data-a11y-espaciado="amplio"] p, html[data-a11y-espaciado="amplio"] li { margin-block: .9em; } html[data-a11y-espaciado="muy-amplio"] body { line-height: 1.9; letter-spacing: .12em; word-spacing: .16em; } html[data-a11y-espaciado="muy-amplio"] p, html[data-a11y-espaciado="muy-amplio"] li { margin-block: 1.4em; line-height: 1.9; } html[data-a11y-espaciado] h1, html[data-a11y-espaciado] h2, html[data-a11y-espaciado] h3 { letter-spacing: .02em; line-height: 1.35; } /* ── Cursor ─────────────────────────────────────────────────────────────── */ html[data-a11y-cursor="grande"], html[data-a11y-cursor="grande"] * { cursor: url("data:image/svg+xml;utf8,") 6 3, auto; } html[data-a11y-cursor="grande"] a, html[data-a11y-cursor="grande"] button, html[data-a11y-cursor="grande"] [role="button"], html[data-a11y-cursor="grande"] label, html[data-a11y-cursor="grande"] summary, html[data-a11y-cursor="grande"] select { cursor: url("data:image/svg+xml;utf8,") 12 4, pointer; } html[data-a11y-cursor="gigante"], html[data-a11y-cursor="gigante"] * { cursor: url("data:image/svg+xml;utf8,") 10 5, auto; } html[data-a11y-cursor="gigante"] a, html[data-a11y-cursor="gigante"] button, html[data-a11y-cursor="gigante"] [role="button"], html[data-a11y-cursor="gigante"] label, html[data-a11y-cursor="gigante"] summary, html[data-a11y-cursor="gigante"] select { cursor: url("data:image/svg+xml;utf8,") 19 6, pointer; } /* ── Reducir movimiento (desde el panel, sin depender del sistema) ─────── */ html[data-a11y-movimiento] { scroll-behavior: auto !important; } html[data-a11y-movimiento] *, html[data-a11y-movimiento] *::before, html[data-a11y-movimiento] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } html[data-a11y-movimiento] .btn::after { animation: none !important; opacity: 0; } html[data-a11y-movimiento] .revela { opacity: 1 !important; transform: none !important; transition: none !important; } html[data-a11y-movimiento] .hero__burbujas { display: none !important; } html[data-a11y-movimiento] .hero__arte svg .arte-destello { animation: none !important; } html[data-a11y-movimiento] .banda--crema, html[data-a11y-movimiento] .banda--nube, html[data-a11y-movimiento] .banda--calidez, html[data-a11y-movimiento] .oficina__contenido { animation: none !important; } /* ── Foco reforzado ─────────────────────────────────────────────────────── */ html[data-a11y-foco] :focus-visible, html[data-a11y-foco] .switch input:focus-visible + .switch__track, html[data-a11y-foco] .a11y__switch input:focus-visible + .a11y__track { outline: 4px solid #000 !important; outline-offset: 3px !important; box-shadow: 0 0 0 8px var(--esperanza, #FFCB57) !important; border-radius: 6px; } html[data-a11y-foco] h1:focus-visible { outline-offset: 8px !important; } /* ── Contraste alto ─────────────────────────────────────────────────────── */ /* Los mismos tokens, con valores más firmes. Las tarjetas y botones dejan los degradados y ganan bordes visibles; los enlaces se subrayan siempre. */ html[data-a11y-contraste="alto"] { --tinta: #000000; --tinta-2: #2B3646; --linea: #7A8595; --linea-fria: #7A8595; --fondo: #FFFFFF; --crema: #FFFFFF; --nube: #F3F5F8; --blanco: #FFFFFF; --confianza: #0A2140; --corazon-fuerte: #A61B1B; --bienestar: #1E7A5D; --calidez: #4A4F8F; --confianza-tenue: #DCE4EE; --corazon-tenue: #FFE1E1; --esperanza-tenue: #FFF0C2; --bienestar-tenue: #D6F1E6; --sombra: none; --sombra-alta: 0 0 0 2px #0A2140; } html[data-a11y-contraste="alto"] body { background: #fff; color: #000; } html[data-a11y-contraste="alto"] body[data-modo="publico"]::before { display: none; } html[data-a11y-contraste="alto"] .card, html[data-a11y-contraste="alto"] .card--plano, html[data-a11y-contraste="alto"] .soporte__panel, html[data-a11y-contraste="alto"] .a11y__panel { background: #fff !important; border: 2px solid #0A2140 !important; box-shadow: none !important; } html[data-a11y-contraste="alto"] .muted, html[data-a11y-contraste="alto"] .small { color: #2B3646 !important; } html[data-a11y-contraste="alto"] a:not(.btn) { text-decoration: underline; text-decoration-thickness: 2px; } html[data-a11y-contraste="alto"] .btn { background: #0A2140 !important; color: #fff !important; border: 2px solid #0A2140 !important; box-shadow: none !important; text-shadow: none !important; } html[data-a11y-contraste="alto"] .btn::after, html[data-a11y-contraste="alto"] .btn::before { display: none !important; } html[data-a11y-contraste="alto"] .btn--linea { background: #fff !important; color: #0A2140 !important; } html[data-a11y-contraste="alto"] .btn--coral, html[data-a11y-contraste="alto"] .btn--accion { background: #A61B1B !important; border-color: #A61B1B !important; } html[data-a11y-contraste="alto"] .input, html[data-a11y-contraste="alto"] select, html[data-a11y-contraste="alto"] textarea { border: 2px solid #0A2140 !important; background: #fff !important; color: #000 !important; } html[data-a11y-contraste="alto"] .input::placeholder { color: #4A5568 !important; } html[data-a11y-contraste="alto"] .nav, html[data-a11y-contraste="alto"] .footer { background: #fff !important; border-color: #0A2140 !important; } html[data-a11y-contraste="alto"] .mancha, html[data-a11y-contraste="alto"] .mancha--der, html[data-a11y-contraste="alto"] .corazon-suelto, html[data-a11y-contraste="alto"] .hero__burbujas { display: none !important; } /* ── Contraste máximo: blanco y negro, sin decoración ───────────────────── */ html[data-a11y-contraste="maximo"] { --tinta: #000000; --tinta-2: #000000; --linea: #000000; --linea-fria: #000000; --fondo: #FFFFFF; --crema: #FFFFFF; --nube: #FFFFFF; --blanco: #FFFFFF; --confianza: #000000; --confianza-hondo: #000000; --corazon: #000000; --corazon-fuerte: #000000; --esperanza: #FFD400; --bienestar: #000000; --calidez: #000000; --confianza-tenue: #EDEDED; --corazon-tenue: #EDEDED; --esperanza-tenue: #EDEDED; --bienestar-tenue: #EDEDED; --calidez-tenue: #EDEDED; --sombra: none; --sombra-alta: none; } html[data-a11y-contraste="maximo"] body { background: #fff !important; color: #000 !important; } html[data-a11y-contraste="maximo"] body[data-modo="publico"]::before { display: none; } html[data-a11y-contraste="maximo"] *:not(svg):not(path):not(circle):not(rect):not(line):not(polyline):not(g) { color: #000 !important; text-shadow: none !important; box-shadow: none !important; background-image: none !important; } html[data-a11y-contraste="maximo"] .card, html[data-a11y-contraste="maximo"] .card--plano, html[data-a11y-contraste="maximo"] section, html[data-a11y-contraste="maximo"] .banda, html[data-a11y-contraste="maximo"] .banda--crema, html[data-a11y-contraste="maximo"] .banda--nube, html[data-a11y-contraste="maximo"] .banda--calidez, html[data-a11y-contraste="maximo"] .nav, html[data-a11y-contraste="maximo"] .footer, html[data-a11y-contraste="maximo"] .soporte__panel, html[data-a11y-contraste="maximo"] .a11y__panel, html[data-a11y-contraste="maximo"] .a11y__cuerpo { background: #fff !important; } html[data-a11y-contraste="maximo"] .card, html[data-a11y-contraste="maximo"] .card--plano, html[data-a11y-contraste="maximo"] .input, html[data-a11y-contraste="maximo"] select, html[data-a11y-contraste="maximo"] textarea, html[data-a11y-contraste="maximo"] .soporte__panel, html[data-a11y-contraste="maximo"] .a11y__panel { border: 3px solid #000 !important; } html[data-a11y-contraste="maximo"] a:not(.btn) { text-decoration: underline !important; text-decoration-thickness: 3px !important; } html[data-a11y-contraste="maximo"] .btn, html[data-a11y-contraste="maximo"] .a11y__accion, html[data-a11y-contraste="maximo"] .soporte__burbuja, html[data-a11y-contraste="maximo"] .a11y__boton, html[data-a11y-contraste="maximo"] .a11y__cab, html[data-a11y-contraste="maximo"] .soporte__cab, html[data-a11y-contraste="maximo"] .a11y__seg [role="radio"][aria-checked="true"], html[data-a11y-contraste="maximo"] .soporte__msg--yo { background: #000 !important; color: #fff !important; border: 3px solid #000 !important; } html[data-a11y-contraste="maximo"] .btn *, html[data-a11y-contraste="maximo"] .a11y__accion *, html[data-a11y-contraste="maximo"] .a11y__cab *, html[data-a11y-contraste="maximo"] .soporte__cab *, html[data-a11y-contraste="maximo"] .a11y__seg [role="radio"][aria-checked="true"], html[data-a11y-contraste="maximo"] .soporte__msg--yo, html[data-a11y-contraste="maximo"] .a11y__boton svg, html[data-a11y-contraste="maximo"] .soporte__burbuja svg { color: #fff !important; } html[data-a11y-contraste="maximo"] .btn::after, html[data-a11y-contraste="maximo"] .btn::before { display: none !important; } html[data-a11y-contraste="maximo"] .btn--linea { background: #fff !important; color: #000 !important; } html[data-a11y-contraste="maximo"] .btn--linea * { color: #000 !important; } html[data-a11y-contraste="maximo"] .a11y__switch input:checked + .a11y__track, html[data-a11y-contraste="maximo"] .switch input:checked + .switch__track { background: #000 !important; } html[data-a11y-contraste="maximo"] .a11y__track, html[data-a11y-contraste="maximo"] .switch__track { border: 2px solid #000; background: #fff; } html[data-a11y-contraste="maximo"] .mancha, html[data-a11y-contraste="maximo"] .mancha--der, html[data-a11y-contraste="maximo"] .corazon-suelto, html[data-a11y-contraste="maximo"] .hero__burbujas, html[data-a11y-contraste="maximo"] .hero__arte { display: none !important; } html[data-a11y-contraste="maximo"] img { filter: grayscale(1) contrast(1.2); } html[data-a11y-contraste="maximo"] :focus-visible { outline: 4px solid #000 !important; outline-offset: 3px !important; box-shadow: 0 0 0 8px #FFD400 !important; } html[data-a11y-contraste="maximo"] .a11y-leyendo { background-color: #FFD400 !important; outline-color: #000 !important; } html[data-a11y-contraste="maximo"]:not([data-a11y-foco]) h1[tabindex="-1"]:focus { outline: none !important; box-shadow: none !important; } /* La oficina con barra lateral navy: en contraste alto o máximo se vuelve blanca con borde. */ html[data-a11y-contraste] .oficina__side { background: #fff !important; border-right: 3px solid #000; } html[data-a11y-contraste] .oficina__side *, html[data-a11y-contraste] .oficina__side a { color: #000 !important; } html[data-a11y-contraste] .oficina__side .menu-item.is-active { background: #000 !important; color: #fff !important; } html[data-a11y-contraste] .oficina__side .menu-item.is-active * { color: #fff !important; } html[data-a11y-contraste] .oficina__side .menu-item.is-active::before { background: #FFD400 !important; } /* ── Modo simple ────────────────────────────────────────────────────────── */ .simple { max-width: 760px; margin: 0 auto; padding: clamp(28px, 6vw, 64px) 20px 48px; display: grid; gap: 28px; } .simple__cab { text-align: center; display: grid; gap: 8px; } .simple__hola { margin: 0; color: var(--tinta-2); font-weight: 700; } .simple__cab h1 { margin: 0; font-size: clamp(2rem, 5vw, 2.8rem); } .simple__sub { margin: 0; color: var(--tinta-2); font-size: 1.05rem; } .simple__grid { display: grid; gap: 14px; } .simple__camino { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; min-height: 92px; padding: 18px 22px; border-radius: 22px; text-decoration: none; text-align: left; background: #fff; border: 2px solid var(--linea); color: var(--tinta); font: inherit; cursor: pointer; box-shadow: var(--sombra); transition: transform var(--t) var(--ease), border-color var(--t) var(--ease); } .simple__camino:hover { transform: translateY(-2px); border-color: var(--confianza); color: var(--tinta); } .simple__camino:focus-visible { outline: 4px solid var(--confianza); outline-offset: 3px; } .simple__ico { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; } .simple__camino--corazon .simple__ico { background: var(--corazon-tenue); color: var(--corazon-fuerte); } .simple__camino--confianza .simple__ico { background: var(--confianza-tenue); color: var(--confianza); } .simple__camino--bienestar .simple__ico { background: var(--bienestar-tenue); color: #1E7A5D; } .simple__camino--esperanza .simple__ico { background: var(--esperanza-tenue); color: #8A5A00; } .simple__camino--calidez .simple__ico { background: var(--calidez-tenue); color: #4A4F8F; } .simple__texto { display: grid; gap: 3px; } .simple__texto strong { font-size: 1.28rem; } .simple__texto span { color: var(--tinta-2); font-size: 1rem; } .simple__flecha { color: var(--confianza); } .simple__pie { text-align: center; color: var(--tinta-2); margin: 8px 0 0; } .simple__salir { background: none; border: none; font: inherit; font-weight: 800; color: var(--confianza); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px; } /* Con el modo simple activo, el resto del sitio pierde decoración y gana tamaño. */ html[data-a11y-simple] .mancha, html[data-a11y-simple] .mancha--der, html[data-a11y-simple] .corazon-suelto, html[data-a11y-simple] .hero__burbujas, html[data-a11y-simple] .hero__arte { display: none !important; } html[data-a11y-simple] body[data-modo="publico"]::before { display: none; } html[data-a11y-simple] .footer__cols { display: none !important; } html[data-a11y-simple] .btn { min-height: 56px; font-size: 1.05rem; } html[data-a11y-simple] .input, html[data-a11y-simple] select, html[data-a11y-simple] textarea { font-size: 1.08rem; min-height: 52px; } html[data-a11y-simple] .card { background: #fff; } .a11y__switches--modos { border-color: var(--confianza-tenue); background: #fff; } /* ── Control con la mirada ──────────────────────────────────────────────── */ .mirada__overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(7, 28, 54, .78); display: grid; place-items: center; padding: 20px; font-family: 'Nunito', system-ui, sans-serif; } .mirada__caja { background: #fff; border-radius: 22px; padding: 30px 32px; max-width: 520px; width: 100%; display: grid; gap: 12px; color: var(--tinta, #12253F); box-shadow: 0 30px 80px rgba(0,0,0,.35); } .mirada__caja h2 { margin: 0; font-size: 1.5rem; } .mirada__caja p, .mirada__caja li { margin: 0; line-height: 1.55; } .mirada__caja ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; } .mirada__ojo { font-size: 40px; line-height: 1; } .mirada__consejo { font-size: .9rem; color: var(--tinta-2, #5A6B84); } .mirada__botones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; } .mirada__calib { position: absolute; inset: 0; background: #fff; } .mirada__calib-texto { position: absolute; left: 50%; top: 22%; transform: translate(-50%, -50%); text-align: center; color: var(--tinta, #12253F); max-width: 520px; padding: 0 20px; } .mirada__calib-texto h2 { margin: 0 0 6px; font-size: 1.5rem; } .mirada__calib-texto p { margin: 0; color: var(--tinta-2, #5A6B84); } .mirada__calib-texto [data-progreso] { display: block; margin-top: 8px; font-weight: 800; color: var(--confianza, #0D2B4E); font-size: 1.1rem; } .mirada__cancelar { position: absolute; right: 20px; bottom: 20px; background: #fff; border: 2px solid var(--linea, #EAE2DC); border-radius: 999px; padding: 10px 18px; font: inherit; font-weight: 800; cursor: pointer; } .mirada__punto { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--corazon-fuerte, #CE4141) calc(var(--p, 0) * 1turn), #E7EDF5 0); transition: left .5s ease, top .5s ease; } .mirada__punto span { width: 18px; height: 18px; border-radius: 50%; background: var(--confianza, #0D2B4E); box-shadow: 0 0 0 5px #fff; } .mirada__punto.is-llenando { animation: mirada-llenar 2.4s linear forwards; } @keyframes mirada-llenar { from { --p: 0; } to { --p: 1; } } @property --p { syntax: ""; inherits: false; initial-value: 0; } .mirada { position: fixed; inset: 0; z-index: 900; pointer-events: none; font-family: 'Nunito', system-ui, sans-serif; } .mirada.is-oculta { display: none; } .mirada__cursor { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; will-change: transform; background: conic-gradient(var(--corazon-fuerte, #CE4141) calc(var(--p, 0) * 1turn), rgba(13, 43, 78, .18) 0); display: grid; place-items: center; box-shadow: 0 0 0 2px #fff, 0 4px 14px rgba(0,0,0,.25); } .mirada__cursor i { width: 12px; height: 12px; border-radius: 50%; background: var(--confianza, #0D2B4E); box-shadow: 0 0 0 3px #fff; } .mirada__cursor.is-clic i { animation: mirada-clic .35s ease; } @keyframes mirada-clic { 0% { transform: scale(1); } 40% { transform: scale(2); } 100% { transform: scale(1); } } .mirada.is-pausada .mirada__cursor { opacity: .35; } .mirada__objetivo { outline: 4px solid var(--esperanza, #FFCB57) !important; outline-offset: 3px; } .mirada__zona { position: absolute; left: 0; right: 0; height: 10vh; display: grid; place-items: center; font-weight: 800; font-size: .85rem; color: var(--confianza, #0D2B4E); opacity: .55; } .mirada__zona--arriba { top: 0; background: linear-gradient(rgba(255, 203, 87, .35), transparent); } .mirada__zona--abajo { bottom: 0; background: linear-gradient(transparent, rgba(255, 203, 87, .35)); } .mirada__barra { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); pointer-events: auto; display: flex; gap: 6px; align-items: center; background: #fff; border: 1px solid var(--linea, #EAE2DC); border-radius: 999px; padding: 6px 8px 6px 14px; box-shadow: 0 10px 30px rgba(13, 43, 78, .18); } .mirada__estado { font-weight: 800; font-size: .88rem; color: var(--confianza, #0D2B4E); margin-right: 6px; white-space: nowrap; } .mirada__barra button { min-height: 44px; min-width: 44px; padding: 8px 14px; border-radius: 999px; border: none; background: var(--confianza-tenue, #E7EDF5); color: var(--confianza, #0D2B4E); font: inherit; font-weight: 800; font-size: .88rem; cursor: pointer; } .mirada__barra button:hover, .mirada__barra button.mirada__objetivo { background: var(--confianza, #0D2B4E); color: #fff; } .mirada__barra [data-apagar] { background: var(--corazon-tenue, #FFEDEC); color: var(--corazon-fuerte, #CE4141); } /* Con la mirada activa, los objetivos crecen un poco: más fácil de acertar. */ html[data-a11y-mirada] .btn, html[data-a11y-mirada] .nav a, html[data-a11y-mirada] .menu-item { min-height: 52px; } html[data-a11y-mirada] #webgazerVideoContainer { z-index: 1001 !important; border-radius: 14px; overflow: hidden; } /* ── Control por voz ────────────────────────────────────────────────────── */ .voz { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 950; display: flex; align-items: center; gap: 10px; background: #fff; color: var(--tinta, #12253F); border: 1px solid var(--linea, #EAE2DC); border-radius: 999px; padding: 8px 8px 8px 16px; box-shadow: 0 12px 34px rgba(13, 43, 78, .2); font: 700 .95rem 'Nunito', system-ui, sans-serif; max-width: min(92vw, 560px); } .voz__mic { animation: voz-late 1.4s ease-in-out infinite; } @keyframes voz-late { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } .voz--ok { border-color: var(--bienestar, #6CCBAE); } .voz--dudo { border-color: var(--corazon-fuerte, #CE4141); } .voz--confirmar { border-color: var(--esperanza, #FFCB57); background: var(--esperanza-tenue, #FFF6E0); } .voz [data-txt] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .voz__x, .voz__ayuda { flex: none; width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer; font: inherit; font-weight: 800; display: grid; place-items: center; } .voz__ayuda { background: var(--confianza-tenue, #E7EDF5); color: var(--confianza, #0D2B4E); } .voz__x { background: var(--corazon-tenue, #FFEDEC); color: var(--corazon-fuerte, #CE4141); font-size: 1.2rem; } .voz__lista { padding-left: 20px; display: grid; gap: 8px; line-height: 1.5; } html[data-a11y-movimiento] .voz__mic { animation: none; }