/* PORTADA-LEARN-CARRUSEL-1 · en #aprender, un carrusel minimalista con las tres ilustraciones de los libros que ya están en /learn (learn-1.svg … learn-3.svg, 468 × 236, 2:1,
   sin imágenes nuevas). Cada diapositiva es un enlace al libro. Sin JS (o antes de que cargue) se ve la diapositiva 1 y su enlace: las otras llevan `hidden` y los controles
   también (`portada-anim.js` los muestra). Ningún color escrito a mano: sólo `var(--sf-*)`.

   Movimiento: un fundido de 400 ms entre diapositivas (nada se desliza), SÓLO con `.pc-anima` en la raíz, que el script pone cuando el interruptor «Animations» del pie está
   encendido (`animaciones.js`). Apagado, o con `prefers-reduced-motion` sin elegir encender, el cambio es instantáneo (`transition: none`). */

.pc-carr{display:flex;flex-direction:column;gap:12px;width:100%;max-width:400px;margin:0 auto}
/* el mismo lugar que tenía el SVG de los tres libros (`.v7-aprender-img`): a la izquierda del texto desde 900 px, debajo de él en el teléfono */
@media (min-width:900px){.pc-carr{order:-1;max-width:420px;justify-self:center}}

/* las diapositivas se apilan en una sola celda: el fundido cruza la que sale con la que entra */
.pc-slides{display:grid}
.pc-slide{grid-area:1/1;min-width:0;opacity:1}
.pc-slide[hidden]{display:none}
.pc-carr.pc-anima .pc-slide{transition:opacity .4s ease}
.pc-slide.pc-entra,.pc-slide.pc-sale{opacity:0}

.pc-enlace{display:block;color:inherit;text-decoration:none;border-radius:var(--sf-r-l)}
.pc-enlace:focus-visible{outline:2px solid var(--sf-brand);outline-offset:3px}
.pc-marco.sf-card{padding:0;overflow:hidden;line-height:0}
.pc-marco img{display:block;width:100%;height:auto;aspect-ratio:2/1;margin:0!important;object-fit:contain}
.pc-leyenda{display:block;margin-top:10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--sf-fs-13);line-height:1.4;color:var(--sf-mut)}
.pc-enlace:hover .pc-leyenda{color:var(--sf-ink);text-decoration:underline;text-underline-offset:3px}

/* los controles, debajo de todo (en el DOM van antes que las diapositivas: así el orden del teclado es el de la hoja) */
.pc-controles{order:2;display:flex;align-items:center;justify-content:center;gap:0;min-height:44px}
.pc-controles[hidden]{display:none}
.pc-controles button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:44px;height:44px;margin:0;padding:0;border:0;background:none;color:var(--sf-ink);font:inherit;cursor:pointer;border-radius:50%}
.pc-controles button:focus-visible{outline:2px solid var(--sf-brand);outline-offset:-2px}
.pc-flecha svg,.pc-pausa svg{display:block;width:24px;height:24px;pointer-events:none}
/* los puntos: el botón es de 44 × 44 px y el punto de 8 px va adentro */
.pc-punto::before{content:"";display:block;width:8px;height:8px;border-radius:50%;background:var(--sf-line);box-shadow:inset 0 0 0 1px var(--sf-mut)}
.pc-punto[aria-current="true"]::before{background:var(--sf-brand);box-shadow:none}
.pc-pausa{margin-inline-start:8px!important;border:1px solid var(--sf-line)!important;background:var(--sf-paper)!important}
.pc-pausa[aria-pressed=true] .pc-ico-pausa,.pc-pausa[aria-pressed=false] .pc-ico-play{display:none}
.pc-slides{order:1}

/* ── sin movimiento: el cambio es instantáneo ──
   Lo apaga el interruptor del pie (`data-animaciones="off"` en <html>) o lo pide el sistema (`prefers-reduced-motion`) sin que se haya elegido encender. */
html[data-animaciones="off"] .pc-carr .pc-slide{transition:none!important}
@media (prefers-reduced-motion:reduce){
  html:not([data-animaciones="on"]) .pc-carr .pc-slide{transition:none!important}
}