/* =====================================================================
   EL TALLER · apertura con video (Fase 3, ajuste)
   Solo afecta la sección inicial de taller.html.
   El video se muestra completo (16:9, sin recorte), sin filtros ni
   capas encima. El espacio está reservado antes de cargar: sin saltos.
   ===================================================================== */

/* Retícula de 12 columnas (la misma del sitio). En escritorio, video,
   control y texto ocupan de la columna 2 a la 11: unos 83 % del
   contenedor, centrados, con márgenes iguales a ambos lados. */
.taller-open{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1rem,2.4vw,2.5rem);
  padding-top:clamp(1.25rem,3vw,2.5rem)
}
.taller-open > *{grid-column:2 / span 10;min-width:0}

/* Video: 16:9 reservado antes de cargar (sin saltos), completo, sin recorte */
.taller-open__media{aspect-ratio:16 / 9;background:var(--blood)}
.taller-open__video,.taller-open__video img{display:block;width:100%;height:100%;object-fit:contain}

/* Control: debajo del video, alineado a su borde derecho, nunca encima */
.taller-open__bar{min-height:2.75rem;display:flex;justify-content:flex-end;align-items:center;margin-top:.25rem}
.taller-open__toggle,.taller-open__alt{
  display:inline-flex;align-items:center;gap:.6rem;min-height:44px;padding:0 .1rem;
  background:none;border:0;cursor:pointer;
  font:500 .9rem/1 var(--font-body);color:var(--marfil);text-decoration:none
}
.taller-open__toggle[hidden],.taller-open__alt[hidden]{display:none}
.taller-open__toggle span,.taller-open__alt{border-bottom:1px solid var(--rosa);padding-bottom:.2em}
.taller-open__toggle:hover span,.taller-open__alt:hover{color:var(--rosa)}
.taller-open__toggle:focus-visible,.taller-open__alt:focus-visible{outline:2px solid var(--rosa);outline-offset:4px}
/* Ícono: dos barras (pausar) o triángulo (reproducir), dibujado con CSS */
.taller-open__toggle i{position:relative;width:.7rem;height:.8rem;flex:none}
.taller-open__toggle[data-state="playing"] i{border-left:3px solid currentColor;border-right:3px solid currentColor;width:.6rem}
.taller-open__toggle[data-state="paused"] i{width:0;height:0;border-style:solid;border-width:.42rem 0 .42rem .7rem;border-color:transparent transparent transparent currentColor}

/* Titular y descripción debajo del video */
.taller-open__text{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(2rem,5vw,5rem);
  align-items:end;margin-top:clamp(1rem,2.6vw,2.5rem)
}
.taller-open h1{
  margin:0;font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(2.5rem,5.6vw,6rem);line-height:.96;color:var(--marfil)
}
.taller-open h1::after{content:none}
.taller-open__text p{margin:0;max-width:40ch;font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.6;color:rgba(255,240,227,.85)}

/* Tableta: el video toma todo el ancho del contenedor */
@media(max-width:1000px){
  .taller-open > *{grid-column:1 / -1}
  .taller-open__text{grid-template-columns:1fr;row-gap:1.25rem}
}

/* Móvil: video a todo el ancho de la pantalla, completo, sin recorte */
@media(max-width:640px){
  .taller-open__media{margin-inline:calc(var(--gutter) * -1)}
  .taller-open h1{font-size:clamp(2.3rem,11vw,3.3rem)}
}