/* ══════════════════════════════════════════════════════════════════
   Panel de preferencias de accesibilidad.
   Hoja independiente para que funcione igual en la portada, que lleva
   estilos en línea, y en las páginas interiores, que usan site.css.

   Qué NO hace y por qué: no invierte colores ni aplica escala de grises.
   Esas transformaciones pelean contra los estilos en línea de la portada
   y darían un resultado distinto en cada página. El sistema operativo y
   el navegador lo hacen mejor y en todos los sitios a la vez; el aviso de
   accesibilidad explica cómo activarlo.
   ══════════════════════════════════════════════════════════════════ */

.a11y-caja{position:relative;flex:none}
.a11y-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:42px;min-width:42px;padding:9px 12px;background:transparent;color:#7D1935;
  border:2px solid #7D1935;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer}
.a11y-btn:hover{background:#7D1935;color:#FFFFFF}
.a11y-btn[aria-expanded="true"]{background:#7D1935;color:#FFFFFF}
.a11y-btn svg{width:19px;height:19px;flex:none}
.a11y-btn .a11y-txt{display:none}
@media (min-width:1100px){.a11y-btn .a11y-txt{display:inline}}

.a11y-panel{position:absolute;right:0;top:calc(100% + 8px);width:290px;background:#FFFFFF;
  border:1px solid #DDD9D2;box-shadow:0 14px 36px rgba(0,0,0,.18);z-index:1200;padding:18px 18px 14px;
  color:#17191B;font-size:14px;text-align:left}
.a11y-panel[hidden]{display:none}
.a11y-panel h2{margin:0 0 4px;font-size:15px;font-weight:700;color:#17191B}
.a11y-panel .a11y-intro{margin:0 0 14px;font-size:12.5px;line-height:1.5;color:#4A4E52}
.a11y-grupo{margin-bottom:14px}
.a11y-grupo > span{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;color:#4A4E52;margin-bottom:7px}
.a11y-tallas{display:flex;gap:6px}
.a11y-tallas button{flex:1;min-height:38px;background:#FFFFFF;border:2px solid #DDD9D2;color:#17191B;
  font-family:inherit;font-weight:700;cursor:pointer;line-height:1}
.a11y-tallas button:hover{border-color:#7D1935}
.a11y-tallas button[aria-pressed="true"]{background:#7D1935;border-color:#7D1935;color:#FFFFFF}
.a11y-tallas button:nth-child(1){font-size:13px}
.a11y-tallas button:nth-child(2){font-size:16px}
.a11y-tallas button:nth-child(3){font-size:19px}
.a11y-check{display:flex;align-items:flex-start;gap:10px;min-height:38px;cursor:pointer;
  font-size:14px;line-height:1.45;padding:4px 0}
.a11y-check input{width:24px;height:24px;flex:none;accent-color:#00714A;margin:0}
.a11y-pie{margin:12px 0 0;padding-top:12px;border-top:1px solid #E6E3DC;font-size:12.5px;line-height:1.5;color:#4A4E52}
.a11y-pie a{color:#7D1935}
.a11y-reset{background:none;border:0;padding:6px 0;min-height:26px;color:#7D1935;font-family:inherit;
  font-size:13px;font-weight:700;cursor:pointer;text-decoration:underline}

/* ── Efectos de las preferencias ────────────────────────────────── */
/* El tamaño se aplica con zoom porque casi todas las medidas del sitio
   están en píxeles y no responderían a un cambio de font-size raíz.    */
html[data-a11y-texto="grande"] body{zoom:1.15}
html[data-a11y-texto="mayor"] body{zoom:1.30}

html[data-a11y-enlaces="si"] main a,
html[data-a11y-enlaces="si"] footer a{text-decoration:underline !important;text-underline-offset:2px}

html[data-a11y-animacion="no"] *,
html[data-a11y-animacion="no"] *::before,
html[data-a11y-animacion="no"] *::after{
  animation-duration:.001ms !important;animation-iteration-count:1 !important;
  transition-duration:.001ms !important;scroll-behavior:auto !important}

@media (max-width:600px){
  .a11y-panel{position:fixed;left:12px;right:12px;top:auto;bottom:12px;width:auto;max-height:76vh;overflow-y:auto}
}
@media print{.a11y-caja{display:none}}