/* ---- Round 29 (gap e, equipo-mapa) · the course as a path with seals, and its cover by `portada_tipo` (HECHOS M13).
   One file of the kit beside equipo.css (never edits to it): the seal inside a path's dot, the course drawn as its own map
   (.portada-mapa — the road that winds through the lessons, the gold dot at the end; README §2.4 lesson 9 «the bird on the map»),
   and the polaroid collage (.portada-collage). Tokens only; nothing moves. ---- */

/* the seal in a step's dot (.camino .paso[data-sello]): the kit mark or salas' illustration, in place of the number or the ✓ */
.paso[data-sello] .nodo .ico { width: 24px; height: 24px; }
.paso[data-sello] .nodo .ilustracion { display: grid; place-items: center; width: 34px; height: 34px; }
.paso[data-sello] .nodo .ilustracion :is(svg, img) { display: block; width: 100%; height: 100%; object-fit: contain; }
.paso[data-sello] .nodo.sigue :is(.ico, .ilustracion) { opacity: .55; }

/* ---- the map: one dot per lesson along a road, rows turning back; the cover of a `mapa` course ---- */
.portada-mapa { position: relative; display: block; width: 100%; height: calc(var(--filas, 1) * 78px); }
.portada-mapa > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.portada-mapa > svg path { fill: none; stroke: var(--oro-claro); stroke-width: 2.5; stroke-dasharray: 3 9; stroke-linecap: round; opacity: .8; }
.portada-mapa .punto { position: absolute; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--ciruela); color: var(--sobre-vino-oro); border: 2px dashed var(--sobre-vino-borde); }
.portada-mapa .punto .ico { width: 22px; height: 22px; }
.portada-mapa .punto .ilustracion { display: grid; place-items: center; width: 30px; height: 30px; }
.portada-mapa .punto .ilustracion :is(svg, img) { display: block; width: 100%; height: 100%; object-fit: contain; }
.portada-mapa .punto.hecho { background: var(--oro-vivo); color: var(--ciruela); border: 2px solid var(--oro-claro); }
.portada-mapa .punto.ahora { background: var(--crema); color: var(--ciruela); border: 2px solid var(--oro); box-shadow: 0 0 0 6px var(--sobre-vino-linea); }
.portada-mapa .punto.oro { width: 50px; height: 50px; background: var(--oro-vivo); color: var(--ciruela); border: 3px solid var(--oro-claro); }

/* on the course's head: the map on plum, as tall as its rows */
.cabeza-curso .portada.mapa { height: auto; padding: 14px 10px; background: var(--ciruela); }
/* on the card (84–96 px square): the same road, small dots, no marks */
.curso .portada.mapa { padding: 6px; background: var(--ciruela); }
.curso .portada-mapa { height: 100%; }
.curso .portada-mapa > svg path { stroke-width: 1.5; stroke-dasharray: 2 5; }
.curso .portada-mapa .punto { width: 12px; height: 12px; border-width: 1.5px; box-shadow: none; }
.curso .portada-mapa .punto.oro { width: 16px; height: 16px; border-width: 2px; }
.curso .portada-mapa .punto :is(.ico, .ilustracion) { display: none; }

/* ---- the collage: the photo and the lessons' seals as polaroids, each a little turned ---- */
.portada-collage { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
.portada-collage .polaroid { display: grid; place-items: center; flex: none; width: 96px; height: 116px; padding: 6px 6px 20px; margin: 0 -10px; border-radius: 4px; background: var(--hoja); color: var(--vino); box-shadow: var(--sombra-flota); transform: rotate(-6deg); }
.portada-collage .polaroid:nth-child(2) { transform: rotate(5deg) translateY(-6px); }
.portada-collage .polaroid:nth-child(3) { transform: rotate(-2deg) translateY(4px); }
.portada-collage .polaroid:nth-child(4) { transform: rotate(7deg); }
.portada-collage .polaroid img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.portada-collage .polaroid .ico { width: 44px; height: 44px; }
.portada-collage .polaroid .ilustracion { display: grid; place-items: center; width: 68px; height: 68px; }
.portada-collage .polaroid .ilustracion :is(svg, img) { display: block; width: 100%; height: 100%; object-fit: contain; }
.cabeza-curso .portada.collage { display: grid; place-items: center; background: var(--ciruela); }
.curso .portada.collage { background: var(--ciruela); }
.curso .portada-collage .polaroid { width: 58px; height: 66px; padding: 4px 4px 12px; margin: 0; }
.curso .portada-collage .polaroid:nth-child(n + 2) { display: none; }
.curso .portada-collage .polaroid .ico { width: 26px; height: 26px; }