/* Páginas interiores (talleres). Usa el mismo marco, tipografía y colores del inicio. */

/* ---------- Ficha del taller ---------- */
.taller {
  position: relative;
  display: grid;
  grid-template-columns: 34% 1fr;
  gap: 5vw;
  align-items: start;
  padding: 9vh 2vw 10vh 20px;
}
/* Marcas de esquina ┐ ┘: se quitaron de las páginas interiores (en todos los tamaños de pantalla).
   El inicio las conserva. Para volver a mostrarlas, borra esta regla. */
.taller .marca { display: none; }

/* El afiche acompaña la lectura mientras se baja por el texto */
.taller__afiche {
  position: sticky;
  top: calc(var(--marco) + 4vh);
  margin: 0;
}
.taller__afiche img { width: 100%; height: auto; }

.taller__info { max-width: 46em; }

.taller__volver {
  display: inline-block;
  margin-bottom: 5vh;
  font-size: clamp(.65rem, .75vw, .9rem);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.taller__volver:hover { text-decoration: line-through; text-decoration-thickness: .08em; }

.taller__titulo {
  margin: 0;
  font-size: clamp(2rem, 4.6vw, 6rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--texto-suave);
}

.taller__tipo {
  margin: 1.6vh 0 5vh;
  font-size: clamp(1rem, 1.9vw, 2.4rem);
  font-weight: 500;
  line-height: 1.2;
}

.taller__cuerpo p {
  font-size: clamp(.95rem, 1.2vw, 1.5rem);
  line-height: 1.5;
  color: var(--texto-suave);
}
.taller__cuerpo p + p { margin-top: 1.1em; }
.taller__cuerpo ul {
  margin: 1.1em 0 0;
  padding-left: 1.2em;
  font-size: clamp(.95rem, 1.2vw, 1.5rem);
  line-height: 1.5;
  color: var(--texto-suave);
}
.taller__cuerpo li + li { margin-top: .4em; }
.taller__cuerpo .destacado { font-weight: 600; color: var(--negro); }

/* ---------- Sobre los docentes ---------- */
.docentes {
  background: var(--gris-fondo);
  padding: 8vh 2vw 10vh 20px;
}
.docentes__titulo {
  margin: 0 0 6vh;
  font-size: clamp(1.1rem, 2vw, 2.6rem);
  font-weight: 500;
}

.docente {
  display: grid;
  grid-template-columns: 17% 1fr;
  gap: 3vw;
  align-items: start;
  max-width: 62em;
}
.docente + .docente { margin-top: 7vh; }

.docente__foto { margin: 0; }
.docente__foto img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

.docente__nombre {
  margin: 0 0 1.2vh;
  font-size: clamp(1rem, 1.5vw, 1.9rem);
  font-weight: 600;
}
.docente__bio p {
  font-size: clamp(.9rem, 1.1vw, 1.4rem);
  line-height: 1.5;
  color: var(--texto-suave);
}
.docente__bio p + p { margin-top: 1em; }

/* ---------- Galería de fotos ---------- */
/* Llega hasta el marco lateral derecho (padding-right: 0). Para dejar margen, súbelo. */
.galeria { padding: 0 0 10vh 20px; }

.galeria__lista { display: flex; flex-direction: column; gap: 1.3vw; }

/* Cada fila reparte su ancho según la proporción (--ar) de cada foto:
   así todas las fotos de una fila quedan de igual altura, sin recortes. */
.galeria__fila { display: flex; gap: 1.3vw; }
.galeria__fila figure { flex: var(--ar, 1) 1 0; margin: 0; min-width: 0; }
.galeria__lista img { width: 100%; height: auto; }

/* Botón de descarga del dossier (bajo el texto del taller) */
.taller__botones { display: flex; flex-wrap: wrap; gap: 1.2em; margin-top: 4vh; }
.taller__dossier,
.taller__inscripcion {
  display: inline-block;
  padding: .75em 1.6em;
  border: 1.5px solid var(--negro);
  font-size: clamp(.65rem, .8vw, 1rem);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.taller__dossier:hover,
.taller__inscripcion:hover { text-decoration: line-through; text-decoration-thickness: .08em; }

/* Créditos de las fotos, bajo una galería */
.galeria__creditos {
  max-width: 62em;
  margin: 3vh 0 0;
  font-size: clamp(.8rem, .95vw, 1.15rem);
  line-height: 1.5;
  color: var(--texto-suave);
}

/* Nombre y foto de cada docente enlazan a su página de equipo */
.docente__foto a { display: block; line-height: 0; }
.docente__nombre a:hover { text-decoration: line-through; text-decoration-thickness: .08em; }

/* Cita inicial del texto de un taller */
.taller__cuerpo .taller__cita {
  margin: 0 0 2.4em;
  font-style: italic;
  font-size: clamp(.95rem, 1.2vw, 1.5rem);
  line-height: 1.5;
  color: var(--texto-suave);
}
.taller__cuerpo .taller__cita p { text-align: left; }
.taller__cuerpo .taller__cita cite { display: block; margin-top: 1.2em; text-align: right; font-style: italic; }

/* Video (Vimeo) bajo las galerías. El tamaño es relativo a su caja: --ancho-video (100% = caja completa). */
/* El video queda centrado respecto de la pantalla completa (no solo de la parte blanca): la barra lateral de la derecha
   ocupa un ancho "marco", y el cálculo del margen izquierdo lo compensa. */
.video {
  display: grid;
  grid-template-columns: 1fr;
  padding: 0 0 10vh;
}
.video__marco {
  grid-column: 1;
  width: min(44em, calc(100% - var(--marco)));
  margin: 0 0 0 calc((100% + var(--marco) - min(44em, 100% - var(--marco))) / 2);
  line-height: 0;
}
.video__proporcion {
  width: var(--ancho-video, 100%);
  aspect-ratio: 16 / 9;
  position: relative;
}
.video__proporcion iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* =====================================================================
   RESPONSIVO · TALLER (tablet y móvil, hasta 1100 px)
   Galerías en carrusel y video centrado en la pantalla.
   ===================================================================== */
@media (max-width: 1100px) {
  /* Galerías en carrusel: todas las fotos en una fila que se desliza con el dedo; la siguiente asoma a la derecha.
     "display: contents" hace que las filas del mosaico desaparezcan y las fotos queden sueltas en la fila. */
  .galeria__lista {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .galeria__lista::-webkit-scrollbar { display: none; }
  .galeria__fila { display: contents; }
  .galeria__fila figure { flex: 0 0 62%; scroll-snap-align: start; }
  .galeria__creditos { padding-right: 20px; }   /* el texto no llega hasta la barra lateral */
}

/* =====================================================================
   RESPONSIVO · TALLER (móvil, hasta 767 px)
   En escritorio y tablet nada cambia. Estas reglas también alcanzan a las páginas de equipo,
   que reutilizan esta ficha.
   ===================================================================== */
@media (max-width: 767px) {
  .taller {
    grid-template-columns: 1fr;          /* una sola columna: afiche arriba, texto abajo */
    gap: 4vh;
    padding: 12vh 20px 6vh 20px;
  }
  .taller__afiche { position: static; }  /* deja de acompañar la lectura */
  .taller__info { max-width: none; }
  .taller__volver { margin-bottom: calc(3vh - .7em); font-size: .75rem; }
  .taller__tipo { margin: 1vh 0 3vh; }
  .taller__botones { gap: .8em; }
  .taller__dossier,
  .taller__inscripcion { flex: 1 1 100%; text-align: center; font-size: .75rem; }

  /* Video centrado respecto de la pantalla completa: la barra lateral de la derecha ocupa un ancho "marco",
     así que se deja ese mismo ancho como margen a la izquierda. */
  .video { padding: 0 0 6vh; }
  .video__marco { width: calc(100% - var(--marco)); max-width: none; margin: 0 0 0 var(--marco); }
  .galeria { padding: 0 0 6vh 20px; }
  .galeria__fila figure { flex-basis: 82%; }

  .docentes { padding: 6vh 20px 8vh; }
  .docente { grid-template-columns: 1fr; gap: 2.5vh; }
  .docente__foto { width: 45%; }
  .docente + .docente { margin-top: 6vh; }
}

/* Revisión general (tablet y móvil): letra mínima de 12 px en enlaces y botones, y zonas de toque más grandes. */
@media (max-width: 1100px) {
  .taller__volver { font-size: .75rem; padding: .7em 0; margin-top: -.7em; margin-bottom: calc(5vh - .7em); }
  .taller__dossier,
  .taller__inscripcion { font-size: .75rem; }
}
@media (max-width: 767px) {
  .taller__volver { margin-bottom: calc(3vh - .7em); }
}