/* ============================================================
   SECCIÓN NUEVA — carrusel de experiencia del hero del curso.
   Ocupa el lugar que tenía el mini mapa: misma caja, mismo ancho.

   La foto arriba y el epígrafe en una barra propia abajo. La versión anterior
   ponía el texto encima de la imagen con un degradé: se comía hasta la mitad
   de la foto y, en pantallas chicas, el título caía sobre la cara de la
   persona, donde el contraste no daba. Separados, la foto se ve entera y el
   texto se lee siempre igual.
   ============================================================ */

.cr { max-width: 440px; margin-inline: auto }

.cr-marco {
  border-radius: 20px; overflow: hidden; box-shadow: var(--sh-md);
  background: #1B0F13;
  /* el hero es oscuro: un borde claro despega la tarjeta del fondo */
  outline: 1px solid rgba(255, 255, 255, .16); outline-offset: -1px;
}

/* ---------- las fotos, apiladas una sobre otra ----------
   El selector va como `.cr-fotos img.cr-foto` a propósito: site.css declara
   `.hero .art img{width:100%;height:auto;border-radius:18px}` y el carrusel
   vive justamente dentro de .hero .art. Con `.cr-foto` a secas esa regla ganaba
   por especificidad, la foto tomaba su alto natural (3:2) en una caja de 4:3 y
   quedaba una franja negra de 37 px contra la barra de abajo. */
.cr-fotos { position: relative; aspect-ratio: 4 / 3 }
.cr-fotos img.cr-foto {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0;
  object-fit: cover; display: block;
  opacity: 0; visibility: hidden;
  /* la que sale se oculta recién al terminar el fundido; la que entra, de una.
     Sin visibility quedaban las cuatro en el DOM para el mouse y para copiar
     y pegar: se seleccionaba el texto de todas juntas. */
  transition: opacity .7s ease, visibility 0s linear .7s;
}
.cr-fotos img.cr-foto.act { opacity: 1; visibility: visible; transition: opacity .7s ease, visibility 0s }

/* ---------- la barra de abajo: epígrafe y puntos ---------- */
.cr-pie {
  display: flex; align-items: center; gap: .9rem;
  padding: .85rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

/* los epígrafes también se apilan: el alto lo fija el más largo, así la
   tarjeta no cambia de tamaño al rotar */
.cr-textos { display: grid; flex: 1; min-width: 0 }
.cr-t {
  grid-area: 1 / 1; margin: 0; display: grid; gap: .1rem;
  opacity: 0; visibility: hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.cr-t.act { opacity: 1; visibility: visible; transition: opacity .45s ease, visibility 0s }
.cr-t b {
  font-size: .97rem; font-weight: 700; letter-spacing: -.018em; line-height: 1.25;
  color: #fff; text-wrap: balance;
}
.cr-t span { font-size: .8rem; line-height: 1.35; color: rgba(255, 255, 255, .72) }

.cr-dots { display: flex; align-items: center; gap: .3rem; flex: none }
.cr-dots button {
  min-height: 34px; padding: 0 .26rem; display: grid; place-items: center;
  line-height: 0; cursor: pointer;
}
.cr-dots span {
  display: block; width: 7px; height: 7px; border-radius: 99px;
  background: rgba(255, 255, 255, .3); transition: background .25s, width .25s;
}
.cr-dots button[aria-selected="true"] span { background: #fff; width: 20px }
.cr-dots button:hover span { background: rgba(255, 255, 255, .6) }
.cr-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; border-radius: 6px }

@media (prefers-reduced-motion: reduce) {
  .cr-foto, .cr-foto.act, .cr-t, .cr-t.act { transition: none }
}