:root{
  --tinta:#16202b;
  --tinta-suave:#5a6a7a;
  --papel:#f7f5f0;
  --papel-2:#ffffff;
  --linea:#dfd9cf;
  --acento:#b4471f;
  --acento-suave:#f2e3dc;
  --radio:10px;
  --ancho:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font:16px/1.6 Georgia,"Iowan Old Style","Times New Roman",serif;
  -webkit-text-size-adjust:100%;
}
a{color:var(--acento)}

/* portada */
.portada{
  max-width:var(--ancho);
  margin:0 auto;
  padding:64px 24px 32px;
  border-bottom:1px solid var(--linea);
}
.portada h1{
  margin:0 0 12px;
  font-size:clamp(30px,5vw,46px);
  line-height:1.15;
  letter-spacing:-.01em;
}
.portada p{
  margin:0;
  max-width:60ch;
  color:var(--tinta-suave);
  font-size:17px;
}

/* indice */
.indice{
  position:sticky;
  top:0;
  z-index:5;
  background:rgba(247,245,240,.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--linea);
  padding:10px 24px;
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  justify-content:center;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:13.5px;
}
.indice a{
  color:var(--tinta-suave);
  text-decoration:none;
  padding:3px 2px;
  border-bottom:2px solid transparent;
}
.indice a:hover{color:var(--tinta);border-bottom-color:var(--acento)}
.indice a.destacado{
  color:var(--acento);
  background:var(--acento-suave);
  border-radius:999px;
  padding:3px 12px;
}

main{max-width:var(--ancho);margin:0 auto;padding:0 24px}

/* bloques */
.bloque{padding:56px 0;border-bottom:1px solid var(--linea)}
.bloque h2{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin:0 0 10px;
  font-size:clamp(22px,3.2vw,30px);
  letter-spacing:-.01em;
}
.bloque h2 .n{
  font-family:system-ui,sans-serif;
  font-size:14px;
  font-weight:700;
  color:var(--acento);
  background:var(--acento-suave);
  border-radius:6px;
  padding:4px 9px;
  line-height:1;
}
.resumen{
  margin:0 0 28px;
  max-width:68ch;
  color:var(--tinta-suave);
}
.subtitulo{
  margin:44px 0 18px;
  font-size:15px;
  font-family:system-ui,sans-serif;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--tinta-suave);
}

/* grillas */
.grilla{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:22px;
}
.tarjeta{
  background:var(--papel-2);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.tarjeta video,
.tarjeta img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  background:#11161c;
}
.grilla.laminas .tarjeta img{aspect-ratio:4/3;object-fit:contain;background:#fff}
.tarjeta .texto{padding:14px 16px 16px}
.tarjeta h3{margin:0 0 6px;font-size:17px}
.tarjeta p{margin:0;font-size:14.5px;color:var(--tinta-suave)}
.descargas{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-family:system-ui,sans-serif;
  font-size:12.5px;
}
.descargas a{
  text-decoration:none;
  border:1px solid var(--linea);
  border-radius:999px;
  padding:4px 11px;
  color:var(--tinta-suave);
}
.descargas a:hover{border-color:var(--acento);color:var(--acento)}

/* pendientes */
.tarjeta.pendiente{border-style:dashed;background:transparent}
.tarjeta.pendiente .marco{
  aspect-ratio:16/9;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--tinta-suave);
  font-family:system-ui,sans-serif;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  background:repeating-linear-gradient(45deg,#f0ece5,#f0ece5 10px,#f6f3ee 10px,#f6f3ee 20px);
}

/* presentaciones */
.presentaciones{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:18px;
}
.pres{
  background:var(--papel-2);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:16px 18px;
}
.pres .orden{
  display:inline-block;
  font-family:system-ui,sans-serif;
  font-size:11.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--tinta-suave);
  margin-bottom:6px;
}
.pres h3{margin:0 0 10px;font-size:17px;line-height:1.3}
.pres p{margin:0;font-size:14.5px;color:var(--tinta-suave)}
.pres .titulo{
  display:block;
  font-size:18px;
  font-weight:700;
  margin-bottom:8px;
  text-decoration:none;
}
.pres.recurso{border-left:3px solid var(--acento)}
.idiomas{display:flex;flex-wrap:wrap;gap:8px;font-family:system-ui,sans-serif;font-size:13px}
.idiomas a{
  text-decoration:none;
  border:1px solid var(--linea);
  border-radius:999px;
  padding:4px 12px;
  color:var(--tinta-suave);
}
.idiomas a:hover{border-color:var(--acento);color:var(--acento)}

footer{
  max-width:var(--ancho);
  margin:0 auto;
  padding:36px 24px 72px;
  color:var(--tinta-suave);
  font-size:14px;
}
footer .otros{margin:0 0 10px}
footer p{max-width:60ch}

@media (max-width:600px){
  .portada{padding:40px 20px 24px}
  .bloque{padding:40px 0}
}