/* ────────────────────────────────────────────────────────────────────────
   CENTRO DE AYUDA PÚBLICO DE EDUCREIA  ·  capa 3 (pantalla)
   educreia.com/centro-de-ayuda — lo arma app/ayuda-publica.js en el servidor.
   Va ENCIMA de blog.css: reusa la cabecera (.blog-top), el artículo (.art,
   .art-head, .art-body), el CTA (.art-cta) y, para la prosa, `.rt-doc`.
   Acá solo lo propio: el índice por categorías, las capturas del Markdown
   (figure.ay-fig, el mismo markup que dibuja ayuda-md.js en el panel) y la
   lista de relacionados. Todo sale de variables.
   ──────────────────────────────────────────────────────────────────────── */
:root{
  --ayp-col-min:  18rem;    /* ancho mínimo de una columna de categorías (igual que .blog-grid) */
  --ayp-fig-max-h: 32.5rem; /* alto máximo de una captura dentro del artículo */
  --ayp-video-ratio: 16 / 9;
  --ayp-play:      5rem;    /* diámetro del botón de play sobre la miniatura */
  --ayp-play-ico:  2rem;
  --ayp-play-hov:  1.08;    /* cuánto crece el botón al pasar el mouse */
  --ayp-velo:      color-mix(in srgb, var(--navy-900) 38%, transparent);   /* oscurece la miniatura */
  --ayp-velo-hov:  color-mix(in srgb, var(--navy-900) 20%, transparent);
}

/* ── Índice ────────────────────────────────────────────────────────────── */
.ayp-wrap{
  max-width:var(--blog-wide);
  margin:0 auto;
  padding:0 var(--sp-5) var(--sp-7);
}
.ayp-chips{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--sp-2);
  margin-bottom:var(--sp-6);
}
.ayp-chip{
  display:inline-flex;
  align-items:center;
  padding:var(--sp-1) var(--sp-3);
  border:var(--ctl-bd);
  border-radius:var(--r-pill);
  background:var(--bg-1);
  font-size:var(--fs-13);
  font-weight:700;
  color:var(--pame-ink-2);
  text-decoration:none;
}
.ayp-chip:hover{ border-color:var(--pame-teal); color:var(--pame-teal-700); }

.ayp-cats{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(var(--ayp-col-min), 1fr));
  gap:var(--sp-5);
  align-items:start;
}
.ayp-cat{
  background:var(--bg-1);
  border:var(--ctl-bd);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  padding:var(--sp-5);
  scroll-margin-top:var(--sp-9);
}
.ayp-cat h2{
  font-family:var(--font-display);
  font-size:var(--fs-20);
  line-height:1.2;
  color:var(--pame-ink);
  margin:0 0 var(--sp-3);
}

/* Lista de links a artículos: la del índice y la de "Más sobre…" */
.ayp-lista{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
}
.ayp-lista a{
  font-size:var(--fs-14);
  line-height:1.35;
  color:var(--pame-ink-2);
  text-decoration:none;
}
.ayp-lista a:hover{ color:var(--pame-teal-700); text-decoration:underline; }

/* ── Artículo ──────────────────────────────────────────────────────────── */
.ayp-kicker{ text-decoration:none; }
.ayp-kicker:hover{ text-decoration:underline; }

/* El Markdown de la ayuda usa "##" (h2), que `.rt-doc` no estila: mismo peso que su h3 */
.ayp-md h2{
  font-family:var(--font-sans);
  font-weight:700;
  font-size:var(--fs-24);
  letter-spacing:-0.01em;
  color:var(--fg-1);
  margin:var(--sp-7) 0 var(--sp-3);
}
.ayp-md > h2:first-child{ margin-top:0; }

/* Capturas: ![texto](/assets/ayuda/…) → figure.ay-fig (clic abre la imagen en grande) */
.ayp-md .ay-fig{ margin:var(--sp-3) 0 var(--sp-5); }
.ayp-md .ay-fig a{ display:inline-block; max-width:100%; }
.ayp-md .ay-fig img{
  display:block;
  max-width:100%;
  max-height:var(--ayp-fig-max-h);
  width:auto;
  height:auto;
  border:var(--ctl-bd);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
}
.ayp-md .ay-fig figcaption{
  margin-top:var(--sp-2);
  font-size:var(--fs-13);
  color:var(--fg-3);
}

/* Video de YouTube (lo arma ayuda-publica.js en lugar de la línea «Video paso a paso»): la
   miniatura con un play; ayuda-video.js la cambia por el reproductor (.ayp-video-frame) al tocarla. */
.ayp-md .ayp-video{ margin:var(--sp-2) 0 var(--sp-6); }
.ayp-md .ayp-video-btn,
.ayp-md .ayp-video-frame{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:var(--ayp-video-ratio);
  border:0;
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--navy-900);
  box-shadow:var(--shadow-md);
}
.ayp-md .ayp-video-btn img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;   /* sddefault viene 4:3 con franjas negras: se recortan */
  border-radius:0;
}
.ayp-md .ayp-video-btn::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--ayp-velo);
  transition:background var(--t-base) var(--ease-out);
}
.ayp-md .ayp-video-play{
  position:absolute;
  inset:0;
  z-index:1;
  margin:auto;
  width:var(--ayp-play);
  height:var(--ayp-play);
  display:grid;
  place-items:center;
  border-radius:var(--r-pill);
  background:var(--fg-on-brand);   /* blanco: no se confunde con los botones teal de las capturas */
  color:var(--pame-teal-700);
  box-shadow:var(--shadow-lg);
  transition:transform var(--t-base) var(--ease-out), background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.ayp-md .ayp-video-play svg{ width:var(--ayp-play-ico); height:var(--ayp-play-ico); fill:currentColor; }
.ayp-md .ayp-video-btn:hover::after,
.ayp-md .ayp-video-btn:focus-visible::after{ background:var(--ayp-velo-hov); }
.ayp-md .ayp-video-btn:hover .ayp-video-play,
.ayp-md .ayp-video-btn:focus-visible .ayp-video-play{
  transform:scale(var(--ayp-play-hov));
  background:var(--pame-teal);
  color:var(--fg-on-brand);
}
.ayp-md .ayp-video-btn:focus-visible{ outline:none; box-shadow:var(--focus-ring), var(--shadow-md); }
.ayp-md .ayp-video figcaption{
  margin-top:var(--sp-2);
  font-size:var(--fs-13);
  color:var(--fg-3);
}
@media (prefers-reduced-motion: reduce){
  .ayp-md .ayp-video-play,
  .ayp-md .ayp-video-btn::after{ transition:none; }
}

/* Relacionados al pie del artículo */
.ayp-rel{
  margin-top:var(--sp-7);
  padding-top:var(--sp-5);
  border-top:var(--ctl-bd);
}
.ayp-rel h2{
  font-family:var(--font-display);
  font-size:var(--fs-20);
  color:var(--pame-ink);
  margin:0 0 var(--sp-3);
}
.ayp-rel .art-back{ margin:var(--sp-4) 0 0; }

/* ── Móvil ─────────────────────────────────────────────────────────────── */
@media (max-width:720px){
  :root{ --ayp-play:4rem; --ayp-play-ico:1.625rem; }
  .ayp-wrap{ padding:0 var(--sp-4) var(--sp-6); }
  .ayp-md h2{ font-size:var(--fs-20); margin-top:var(--sp-6); }
}