/* Talleres de acompañamiento.
   Va pegado a "Cómo participar" (.pasos) para que ambos se lean como una sola
   sección: por eso padding-block: 0 y el .pasos sin padding inferior. */
.talleres { padding-block: 0; }

/* El hero conserva la proporción del arte de fondo (2116x1191) y actúa como
   contenedor de consulta, de modo que todo lo que va encima se dimensiona en
   cqw y escala exactamente igual que la imagen. */
.talleres__hero {
  position: relative;
  container-type: inline-size;
  width: 100%;
  /* Altura explícita en vez de aspect-ratio + max-height: esa combinación hace
     que el bloque encoja de ANCHO al toparse con el tope de alto (820 * 1.777 =
     1457px), dejando una franja blanca a la derecha en pantallas más anchas.
     56.3vw = 1191/2116, la proporción del arte; el tope recorta vía cover. */
  height: min(56.3vw, 820px);
  overflow: hidden;
}
.talleres__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.talleres__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  /* El padding en % se resuelve contra el ANCHO. Como el alto del hero es
     ancho / 1.777, una fracción S del alto equivale a S / 1.777 del ancho:
     8% del alto = 4.5% del ancho arriba, 5% del alto = 2.8% abajo. */
  padding: 4.5% 2% 2.8%;
}

.talleres__heading-img { width: clamp(220px, 55cqw, 1060px); height: auto; }

.talleres__fechas {
  grid-row: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2cqw;
  width: 100%;
}
.talleres__fechas-img { width: clamp(160px, 29cqw, 545px); height: auto; }

.fechas-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.3cqw;
  width: 100%;
}

.fecha-card {
  flex: 0 0 clamp(58px, 10.6cqw, 155px);
  height: clamp(54px, 10.1cqw, 148px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15em;
  background: #ffffff;
  color: var(--color-navy-900);
  border-radius: clamp(8px, 1.4cqw, 20px);
  box-shadow: 0 0.4cqw 1.2cqw rgba(4, 20, 60, 0.22);
}
.fecha-card__dia {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.2rem, 4.35cqw, 3.5rem);
  line-height: 1;
}
.fecha-card__mes {
  font-size: clamp(0.55rem, 1.3cqw, 1.1rem);
  line-height: 1.2;
}

/* Estados que aplica talleres.js según la fecha de hoy.
   Próximo taller: azul oscuro y un poco más alto, para que destaque. */
.fecha-card--proxima {
  background: var(--color-navy-800);
  color: var(--color-text-light);
  height: clamp(61px, 11.1cqw, 163px);
  box-shadow: 0 0.4cqw 1.4cqw rgba(4, 20, 60, 0.38);
}

/* Taller que ya pasó: sigue blanco pero casi transparente.
   No se usa opacity porque la animación de entrada ya anima esa propiedad. */
.fecha-card--pasada {
  background: rgba(255, 255, 255, 0.4);
  color: rgba(11, 23, 47, 0.45);
  box-shadow: none;
}

/* Entrada escalonada; --stagger lo calcula scrollReveal.js por índice. */
.fecha-card {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: var(--stagger, 0ms);
}
.fecha-reveal--visible { opacity: 1; transform: none; }

/* Franja inferior: degradado muestreado del diseño (azul abajo-izquierda hacia
   celeste claro a la derecha). */
.talleres__criterios {
  background: linear-gradient(105deg, #0a52bd 0%, #0f86fc 25%, #7fcdf8 62%, #cbf1fd 100%);
  padding-block: clamp(1rem, 2.2vw, 2.25rem);
}
.talleres__criterios-img {
  width: min(54%, 700px);
  min-width: 240px;
  height: auto;
  margin-inline: auto;
}

@media (max-width: 767.98px) {
  /* En móvil la proporción 16:9 no alcanza para las 6 fechas: el hero crece
     con el contenido y el arte de fondo se recorta con object-fit: cover. */
  .talleres__hero { height: auto; }
  .talleres__inner {
    grid-template-rows: auto auto;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-2);
  }
  .talleres__fechas { grid-row: auto; gap: var(--space-2); }
  .talleres__heading-img { width: min(88cqw, 420px); }
  .talleres__fechas-img { width: min(64cqw, 300px); }
  .fechas-row { flex-wrap: wrap; gap: 0.5rem; }
  .fecha-card,
  .fecha-card--proxima {
    flex: 0 0 calc(33.333% - 0.34rem);
    height: auto;
    padding-block: 0.7rem;
    border-radius: 0.75rem;
    box-shadow: 0 2px 10px rgba(4, 20, 60, 0.22);
  }
  .fecha-card__dia { font-size: 1.8rem; }
  .fecha-card__mes { font-size: 0.7rem; }
  .talleres__criterios-img { width: min(86%, 420px); }
}

@media (prefers-reduced-motion: reduce) {
  .fecha-card { opacity: 1; transform: none; transition: none; }
}