/* Carrusel de «Proyectos» de la portada (lo inserta clon-estatico/proyectos.py). Sin estilos inline. */

.il-proyectos{--rojo:#da4453;--tinta:#2f2f2f;--suave:#6b6b6b;--linea:#e6e6e6;
  max-width:1170px;margin:0 auto;padding:32px 0 40px;box-sizing:border-box;
  font-family:Roboto,system-ui,-apple-system,"Segoe UI",sans-serif}
/* Sin relleno lateral: el contenedor del tema ya da el margen, así alinea con el resto de la portada. */
.il-proyectos *{box-sizing:border-box}
.il-proyectos__cabeza{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.il-proyectos h2{margin:0;font:700 26px/1.2 "Roboto Slab",Georgia,serif;letter-spacing:.02em;text-transform:uppercase;color:var(--tinta)}
.il-proyectos__mandos{display:flex;align-items:center;gap:8px}
.il-proyectos__mandos[hidden]{display:none}
.il-proyectos__cuenta{font-size:13px;color:var(--suave);margin-right:6px;font-variant-numeric:tabular-nums}
.il-proyectos__flecha{width:40px;height:40px;border-radius:50%;border:1px solid var(--linea);background:#fff;color:var(--tinta);
  font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0 0 3px}
.il-proyectos__flecha:hover:not(:disabled){border-color:var(--rojo);color:var(--rojo)}
.il-proyectos__flecha:disabled{opacity:.35;cursor:default}
.il-proyectos__flecha:focus-visible,.il-proyectos__pista:focus-visible,.il-proyecto:focus-visible{outline:2px solid var(--rojo);outline-offset:2px}

/* Pista: cuántas tarjetas caben depende del ancho. Sin JS se desplaza igual con el dedo o la rueda. */
.il-proyectos__pista{--n:4;--gap:16px;list-style:none;margin:0;padding:2px 2px 10px;
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - var(--gap) * (var(--n) - 1)) / var(--n));gap:var(--gap);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:thin}
.il-proyectos__pista>li{scroll-snap-align:start;display:flex}
@media (max-width:1000px){.il-proyectos__pista{--n:3}}
@media (max-width:760px){.il-proyectos__pista{--n:2}}
/* Teléfono: una tarjeta y se asoma la siguiente, para que se note que hay más. */
@media (max-width:520px){.il-proyectos__pista{--n:1.25;--gap:12px}.il-proyectos h2{font-size:22px}}
@media (prefers-reduced-motion:reduce){.il-proyectos__pista{scroll-behavior:auto}}

.il-proyecto{flex:1;display:grid;grid-template-columns:48px 1fr;align-content:start;column-gap:12px;row-gap:6px;
  padding:16px;border:1px solid var(--linea);border-radius:6px;text-decoration:none;color:inherit;background:#fff;
  transition:border-color .15s,box-shadow .15s}
.il-proyecto:hover{border-color:var(--rojo);box-shadow:0 4px 14px rgba(0,0,0,.06)}
.il-proyecto img{width:48px;height:48px;border-radius:6px;object-fit:cover;background:#f4f4f4;margin-bottom:4px}
.il-proyecto__tema{align-self:center;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--suave)}
.il-proyecto__nombre{grid-column:1 / -1;font-weight:700;font-size:16px;line-height:1.25;color:var(--tinta);overflow-wrap:anywhere}
.il-proyecto__nombre em{font-style:normal;color:var(--rojo)}
.il-proyecto__texto{grid-column:1 / -1;font-size:13.5px;line-height:1.45;color:var(--suave)}
/* Tarjeta sin enlace (#RevoluciónCR-MUNIS): sin efecto al pasar el puntero. */
div.il-proyecto:hover{border-color:var(--linea);box-shadow:none}