/* ============================================================ envía · Accesibilidad (v2) — acotado: Color + Orientación Cargado solo en Home. No toca tipografías globales. Filtros aplicados por bloque (no sobre ) → header fijo intacto. ============================================================ */ :root{ --a11y-ink:#142a33; --a11y-on:#ba0020; /* activo — rojo de marca */ --a11y-on-soft:#fbeef0; --a11y-on-ring:rgba(186,0,32,.30); --a11y-red:#ba0020; --a11y-red-dark:#8a0018; --a11y-line:#e8e7e4; --a11y-paper:#f6f6f4; } /* ---------------- FAB ---------------- */ .a11y-fab{ position:fixed; left:22px; bottom:150px; z-index:9000; width:58px; height:58px; border-radius:50%; padding:7px; display:grid; place-items:center; cursor:pointer; background:#fff; color:var(--a11y-red); border:0; box-shadow:0 10px 26px -8px rgba(8,20,25,.42), 0 2px 6px rgba(8,20,25,.2); transition:transform .26s cubic-bezier(.34,1.56,.64,1), box-shadow .26s, background .2s; -webkit-tap-highlight-color:transparent; } .a11y-fab:hover{ transform:scale(1.07); } .a11y-fab:active{ transform:scale(.97); } .a11y-fab:focus-visible{ outline:3px solid var(--a11y-on); outline-offset:3px; } .a11y-fab .a11y-glyph{ width:100%; height:100%; display:block; } /* anillo verde + check cuando hay algo activo */ .a11y-fab::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:3px solid var(--a11y-on); opacity:0; transform:scale(.8); transition:opacity .25s, transform .25s; } .a11y-fab.is-on::after{ opacity:1; transform:scale(1); } .a11y-fab .a11y-fab-badge{ position:absolute; right:-3px; top:-3px; width:20px; height:20px; border-radius:50%; background:var(--a11y-on); border:2.5px solid #fff; display:grid; place-items:center; transform:scale(0); transition:transform .28s cubic-bezier(.34,1.56,.64,1); } .a11y-fab.is-on .a11y-fab-badge{ transform:scale(1); } .a11y-fab .a11y-fab-badge svg{ width:11px; height:11px; } @media (max-width:760px){ .a11y-fab{ width:50px; height:50px; left:14px; bottom:88px; padding:6px; } } @media (max-width:430px){ .a11y-fab{ width:46px; height:46px; left:12px; bottom:80px; } } /* ---------------- Overlay + panel ---------------- */ .a11y-ov{ position:fixed; inset:0; z-index:9001; background:rgba(10,22,28,.42); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); opacity:0; visibility:hidden; display:none; pointer-events:none; } .a11y-ov.is-ready{ display:block; transition:opacity .3s, visibility .3s; } .a11y-ov.open{ opacity:1; visibility:visible; pointer-events:auto; } .a11y-panel{ position:fixed; left:0; top:0; z-index:9002; height:100%; width:min(380px,92vw); display:none; flex-direction:column; background:#fbfbfa; color:var(--a11y-ink); font-family:"Asap",system-ui,sans-serif; box-shadow:30px 0 90px -34px rgba(8,20,25,.55); transform:translateX(-102%); opacity:0; visibility:hidden; overflow-y:auto; overscroll-behavior:contain; pointer-events:none; } .a11y-panel.is-ready{ display:flex; transition:transform .38s cubic-bezier(.5,0,.15,1), opacity .3s, visibility .3s; } .a11y-panel.open{ transform:none; opacity:1; visibility:visible; pointer-events:auto; } .a11y-hd{ position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:13px; padding:20px 20px 18px; background:var(--a11y-red); color:#fff; } .a11y-hd .ic{ width:40px; height:40px; border-radius:12px; flex:none; display:grid; place-items:center; background:rgba(255,255,255,.13); } .a11y-hd .ic svg{ width:24px; height:24px; } .a11y-hd h2{ margin:0; font-size:18px; font-weight:700; letter-spacing:-.01em; line-height:1.05; color:#fff; } .a11y-hd p{ margin:2px 0 0; font-size:12px; color:rgba(255,255,255,.78); line-height:1.2; } .a11y-close{ margin-left:auto; width:38px; height:38px; flex:none; border-radius:11px; border:0; background:rgba(255,255,255,.12); color:#fff; cursor:pointer; display:grid; place-items:center; transition:.18s; } .a11y-close:hover{ background:rgba(255,255,255,.24); } .a11y-close svg{ width:19px; height:19px; } .a11y-body{ padding:18px; } .a11y-sec{ margin-bottom:14px; } .a11y-sec > h3{ margin:0 0 12px; font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--a11y-ink); display:flex; align-items:center; gap:8px; } .a11y-sec > h3 .bar{ width:4px; height:15px; border-radius:2px; background:var(--a11y-red); } .a11y-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .a11y-grid.two{ grid-template-columns:repeat(2,1fr); } .a11y-card{ display:flex; flex-direction:column; align-items:center; gap:9px; padding:16px 8px 13px; border-radius:15px; cursor:pointer; text-align:center; border:1.5px solid var(--a11y-line); background:#fff; color:var(--a11y-ink); font-family:inherit; font-size:12.5px; font-weight:600; line-height:1.2; transition:.16s; } .a11y-card:hover{ border-color:#cdccc8; background:#fcfcfb; transform:translateY(-1px); } .a11y-card:focus-visible{ outline:3px solid var(--a11y-on); outline-offset:2px; } .a11y-card .ico{ width:42px; height:42px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--a11y-paper); color:var(--a11y-ink); transition:.16s; } .a11y-card .ico svg{ width:21px; height:21px; } /* estado activo → verde */ .a11y-card.on{ border-color:var(--a11y-on); background:var(--a11y-on-soft); box-shadow:0 0 0 3px var(--a11y-on-ring); } .a11y-card.on .ico{ background:var(--a11y-on); color:#fff; } .a11y-card.on .lbl{ color:var(--a11y-red-dark); } .a11y-reset{ margin-top:6px; width:100%; padding:14px; border-radius:14px; cursor:pointer; border:0; background:var(--a11y-red); color:#fff; font-family:inherit; font-size:14px; font-weight:700; letter-spacing:.01em; display:flex; align-items:center; justify-content:center; gap:9px; transition:.16s; } .a11y-reset:hover{ filter:brightness(1.08); } .a11y-reset:disabled{ background:#d9d8d4; color:#fff; cursor:not-allowed; filter:none; } .a11y-reset svg{ width:18px; height:18px; } .a11y-foot{ margin-top:12px; font-size:11px; color:#9a9a96; text-align:center; line-height:1.45; } /* ============================================================ MODOS APLICADOS (clases en ) — UI excluida vía .a11y-ui Filtros por bloque hijo de body → no afectan al header fijo. ============================================================ */ /* — Color: Monocromo — */ body.a11y-cm-mono > *:not(.a11y-ui){ filter:grayscale(1) !important; } /* — Color: Alto contraste — */ body.a11y-cm-high > *:not(.a11y-ui){ filter:contrast(1.32) saturate(1.18) !important; } /* — Color: Contraste suave (claro) — */ body.a11y-cm-light > *:not(.a11y-ui){ filter:brightness(1.07) contrast(.9) !important; } /* — Parar animaciones + video — */ /* — Parar animaciones + video — Enfoque reduced-motion: duración instantánea en vez de pausar. Así las animaciones de ENTRADA (reveal al hacer scroll) saltan a su estado final VISIBLE en lugar de quedarse en el frame inicial oculto; las infinitas corren una sola vez y se detienen. */ body.a11y-noanim *:not(.a11y-ui):not(.a11y-ui *), body.a11y-noanim *:not(.a11y-ui):not(.a11y-ui *)::before, body.a11y-noanim *:not(.a11y-ui):not(.a11y-ui *)::after{ animation-duration:1ms !important; animation-delay:0ms !important; animation-iteration-count:1 !important; transition-duration:1ms !important; transition-delay:0ms !important; } body.a11y-noanim{ scroll-behavior:auto !important; } /* Forzar el estado FINAL visible de las animaciones de entrada — replica el comportamiento prefers-reduced-motion del sitio, para que el contenido que "aparece al hacer scroll" se muestre igual aunque el movimiento esté detenido. (clases compartidas en home-v3.css → cubre todas las páginas del shell) */ body.a11y-noanim .reveal, body.a11y-noanim .anim-ready .reveal, body.a11y-noanim .vt, body.a11y-noanim .vmosaic .vt, body.a11y-noanim .words .w > span{ opacity:1 !important; transform:none !important; filter:none !important; } /* — Resaltar enlaces — */ body.a11y-hl a:not(.btn):not(.a11y-ui):not(.a11y-ui *){ text-decoration:underline !important; text-decoration-thickness:2px !important; text-underline-offset:3px !important; outline:2px solid var(--a11y-on) !important; outline-offset:2px !important; border-radius:3px; background:rgba(30,165,77,.12) !important; } body.a11y-hl a:not(.btn):not(.a11y-ui):not(.a11y-ui *):hover{ background:rgba(30,165,77,.22) !important; }