/* ═══════════════════════════════════════════════════════════════════════
   css/ayuda.css — «Cómo buscar»: página de texto largo (SPEC §3.6).
   Jerarquía, ejemplos destacados, código en línea; prosa en Newsreader a
   ancho de lectura, títulos en Archivo. Sin copetes, sin cajas de adorno.
   Vía `views/_chrome.php` + `css/base.css`. Acá sólo lo propio de la ayuda.
   ═══════════════════════════════════════════════════════════════════════ */

.ayuda-cab { padding: clamp(2rem, 4vw, 3.5rem) var(--margen) 0; }
.ayuda-cab h1 { font-size: clamp(2.6rem, 5.5vw, 5.5rem); }
.ayuda-cab .bajada { margin-top: .8rem; font-size: 1.2rem; color: var(--tinta-2); max-width: 68ch; }

.ayuda-cuerpo { padding: 1.5rem var(--margen) clamp(3rem, 5vw, 5rem); max-width: 1100px; }
.ayuda-seccion { margin-top: 2.5rem; }
.ayuda-seccion:first-child { margin-top: 0; }
.ayuda-seccion h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); padding-bottom: .6rem; border-bottom: 2px solid var(--tinta); margin-bottom: 1rem; scroll-margin-top: calc(var(--cab) + 1rem); }
.ayuda-seccion p { font-family: var(--f-texto); font-size: 1.15rem; line-height: 1.55; color: var(--tinta); max-width: 68ch; }
.ayuda-seccion p + p { margin-top: .9rem; }
.ayuda-seccion code { font-family: var(--f-titulo); font-weight: 600; font-size: .88em; background: var(--gris); padding: .08em .3em; border-radius: var(--r); }
.ayuda-seccion a.ejemplo code { background: none; padding: 0; border-bottom: 1.5px solid var(--gris-3); border-radius: 0; transition: border-color .15s ease, color .15s ease; }
.ayuda-seccion a.ejemplo:hover { color: var(--rojo); }
.ayuda-seccion a.ejemplo:hover code { border-bottom-color: var(--rojo); }

/* Limitaciones: la honestidad con su propio filete */
.ayuda-limitaciones { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0; border-top: 2px solid var(--tinta); max-width: 68ch; }
.ayuda-limitaciones li { font-family: var(--f-texto); font-size: 1.12rem; line-height: 1.5; padding: .9rem 0 .9rem 1.1rem; border-bottom: 1px solid var(--gris-2); border-left: 3px solid var(--gris-3); }
.ayuda-limitaciones li strong { font-family: var(--f-titulo); font-size: .98rem; }
.ayuda-limitaciones li code { font-family: var(--f-titulo); font-weight: 600; font-size: .88em; }

/* Nota al pie de sección: mismo registro que los avisos del buscador */
.aviso-nota { margin-top: 1rem; background: var(--gris); border-left: 3px solid var(--tinta); border-radius: 0 var(--r) var(--r) 0; padding: .9rem 1.1rem; max-width: 68ch; }

/* Tabla-chuleta final */
.chuleta { width: 100%; border-collapse: collapse; border-top: 2px solid var(--tinta); margin-top: 1rem; }
.chuleta th { font: 600 .78rem/1.4 var(--f-titulo); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); text-align: left; padding: .8rem .75rem .8rem 0; border-bottom: 1px solid var(--gris-2); }
.chuleta td { padding: .7rem .75rem .7rem 0; border-bottom: 1px solid var(--gris-2); font-family: var(--f-texto); font-size: 1.08rem; vertical-align: baseline; }
.chuleta tr:last-child td { border-bottom: 0; }
.chuleta td code, .chuleta td a code { font-family: var(--f-titulo); font-weight: 600; font-size: .88em; }
.chuleta td a:hover { color: var(--rojo); }
.badge-rep { display: inline-block; padding: .2rem .5rem; background: var(--tinta); color: var(--blanco); font: 600 .72rem/1.4 var(--f-titulo); letter-spacing: .1em; border-radius: var(--r); white-space: nowrap; }