/* Accesibilidad: se carga después de los estilos de cada página.
   Contraste AA o mejor, texto mínimo de 16px, objetivos táctiles de 48px y foco visible. */
:root{ --muted:#3f3f46; --line:#cfccc5; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --muted:#d4d4d8; --line:#3a3a42; }
}
@media (prefers-contrast: more){
  :root{ --muted:#18181b; --line:#18181b; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --muted:#fff; --line:#fff; }
}

/* Texto grande (botón Aa) */
html[data-texto="grande"]{font-size:118.75%}
body{font-size:1.125rem}

/* Nada de texto chico ni gris tenue */
.big small,.num small,.group small,.tile small,.card .hint,.step .why,.bank .nm small,
.field>span,.note,.say,.sos small,header h1 small,.zona{font-size:1rem}
.big small,.num small,.group small,.bank .nm small{color:var(--muted);line-height:1.35}
.bank .nm small{white-space:normal;overflow:visible}
h2.sec,.stepnum{font-size:.95rem;color:var(--muted)}
footer{font-size:.95rem;color:var(--muted)}
.big b,.group b{font-size:1.15rem}
.num b{font-size:1.3rem;letter-spacing:.01em}

/* Foco visible para teclado y lectores */
:focus-visible{outline:3px solid var(--link);outline-offset:3px;border-radius:8px}
header :focus-visible{outline-color:#fff}

/* Objetivos táctiles */
header .back,header .home,.a11y-btn{min-width:48px;min-height:48px}
.dots button{height:10px}

/* Solo para lectores de pantalla */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Controles de la cabecera: Escuchar y Aa */
.a11y-btn{flex:none;border:0;cursor:pointer;color:var(--red-ink);display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.16);font-weight:800;font-size:1.05rem;padding:0 8px}
.a11y-btn[aria-pressed="true"]{background:var(--red-ink);color:var(--red)}
.a11y-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Filas de llamada: dibujo del servicio + botón verde de llamar + bocina */
.callrow{display:flex;align-items:stretch;gap:8px;margin:0 0 10px}
.callrow>a{flex:1;margin:0 !important;min-width:0}
.voz{flex:none;width:56px;border:2px solid var(--line);border-radius:var(--r);background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
.voz svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.voz[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.llamar{margin-left:auto;flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--go);color:var(--go-ink)}
.llamar svg{width:24px;height:24px}
.big.call .ic.svc,.num .svc{background:var(--svc-bg);color:var(--svc)}
.svc-medico{--svc:#c0261b;--svc-bg:#fdecea}
.svc-fuego{--svc:#b54708;--svc-bg:#fef0c7}
.svc-policia{--svc:#1849a9;--svc-bg:#e0eaff}
.svc-chat{--svc:#147a48;--svc-bg:#e3f4ea}
.svc-tel{--svc:#147a48;--svc-bg:#e3f4ea}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .svc-medico{--svc:#ffb4ab;--svc-bg:#3a1714}
  :root:not([data-theme="light"]) .svc-fuego{--svc:#fdb022;--svc-bg:#3a2a0b}
  :root:not([data-theme="light"]) .svc-policia{--svc:#a4bcfd;--svc-bg:#18233f}
  :root:not([data-theme="light"]) .svc-chat,:root:not([data-theme="light"]) .svc-tel{--svc:#4fd08f;--svc-bg:#14301f}
}
.num{position:relative;padding-right:56px}
.num .svc{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-bottom:6px}
.num .svc svg{width:24px;height:24px}
.num .llamar{position:absolute;top:10px;right:10px;width:40px;height:40px}
.nums .callrow{margin:0;flex-direction:column;gap:6px}
.nums .callrow .voz{width:100%;height:44px}

/* Botón Escuchar en cada paso de la guía */
.voz-paso{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:10px 16px;font-weight:700;cursor:pointer;margin:0 0 14px;min-height:48px}
.voz-paso svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.voz-paso[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}
.svc svg,.llamar svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.callrow .big{padding:12px;gap:10px;min-height:76px}
.callrow .big b{white-space:nowrap}
.callrow .big .ic{width:42px;height:42px}
.callrow .llamar{width:44px;height:44px}
.callrow .voz{width:52px}
header h1{min-width:0}
header h1 .zona{max-width:100%}
header .wrap{gap:8px}
.nums{grid-template-columns:repeat(2,minmax(0,1fr))}
.nums .callrow{min-width:0}
.num{padding-right:14px;min-width:0}
.nums .num b{font-size:1.15rem}
.bank{flex-wrap:wrap;row-gap:10px;padding:12px}
.bank .nm{flex:1 1 calc(100% - 56px)}
.bank .tel{flex:1;display:flex;justify-content:center;min-height:48px;font-size:1.05rem}
.bank .tick{width:48px;height:48px}

/* Confirmación antes de llamar */
.confirmar-bg{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center}
.confirmar{width:100%;max-width:520px;background:var(--card);color:var(--ink);border-radius:24px 24px 0 0;padding:24px 20px calc(20px + env(safe-area-inset-bottom));text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.confirmar .ic{width:72px;height:72px;border-radius:20px;display:grid;place-items:center}
.confirmar .ic svg{width:40px;height:40px}
.confirmar h2{margin:4px 0 0;font-size:1.4rem;line-height:1.25;outline-offset:4px}
.confirmar .conf-num{margin:0;font-size:2rem;font-weight:800;letter-spacing:.02em}
.conf-si,.conf-no{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:64px;border-radius:18px;font:inherit;font-size:1.25rem;font-weight:800;text-decoration:none;cursor:pointer}
.conf-si{background:var(--go);color:var(--go-ink);border:0;margin-top:6px}
.conf-no{background:var(--bg);color:var(--ink);border:2px solid var(--line)}
.conf-si svg,.conf-no svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.confirmar .svc svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Interruptor de modo de voz */
.switch{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;text-align:left;border:2px solid var(--line);background:var(--bg);color:var(--ink);border-radius:14px;padding:12px 14px;cursor:pointer}
.switch b{display:block;font-size:1.1rem}
.switch small{display:block;color:var(--muted);font-size:1rem}
.switch .pista{margin-left:auto;flex:none;width:56px;height:32px;border-radius:999px;background:var(--line);position:relative}
.switch .pista::after{content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch[aria-checked="true"]{border-color:var(--go);background:var(--go-soft)}
.switch[aria-checked="true"] .pista{background:var(--go)}
.switch[aria-checked="true"] .pista::after{left:28px}
.confirmar .svc{background:var(--svc-bg);color:var(--svc)}