/* =============================================================
   FESTIVAL MES DEL CIRCO — estilos propios
   -------------------------------------------------------------
   Esta hoja SOLO la carga la portada del festival (index.html),
   y se carga DESPUÉS de estilos.css.

   El festival tiene su propia gráfica, distinta de la
   institucional: carmín en vez del rojo Quetralmahue, más oliva
   y azules. Los valores salen de los píxeles de las láminas que
   entregó la diseñadora (carpeta "festival mes del circo").

   Para no pisar nunca la marca institucional, todas las
   variables de aquí llevan el prefijo --f-.

   ⚠️ REGLA DE CONTRASTE (medida, no estimada):
   el oliva NO sirve como texto: da 2.6:1 sobre el carmín y
   2.1:1 sobre el claro. Va solo como RELLENO de formas o de
   fondo con texto oscuro encima. Es el mismo problema que el
   ámbar institucional (ver D20 en docs/decisiones.md).
   ============================================================= */

:root{
  --f-carmin:     #A21C42;   /* fondo dominante de las láminas */
  --f-carmin-osc: #7E1433;   /* profundidad, horas, hover */
  --f-claro:      #DED6D8;   /* greige de la gráfica: textos sobre carmín */
  --f-hueso:      #F4F0F1;   /* fondo claro de sección */
  --f-oliva:      #A1991E;   /* SOLO relleno. Jamás texto */
  --f-oliva-osc:  #6E6914;   /* el oliva que sí sirve de texto */

  /* ⚠️ EL VERDE DE LAS INSCRIPCIONES NO ES UN COLOR DE LA MARCA.
     Es un préstamo, y a sabiendas: el cliente lo pidió vivo el
     31/08/2026 —"no importa que desentone, dura solo hasta que se
     llenen los cupos"— justamente para que grite entre tanto carmín.
     Cuando se cierren las inscripciones, este par de líneas se borra
     con el resto del aviso y la paleta vuelve a ser la de siempre.

     ⚠️ LLEVA TEXTO OSCURO, NO CLARO, y no es una preferencia:
       tinta #241813 sobre el verde ....... 7,49:1  ✓
       hueso #F4F0F1 sobre el verde ....... 2,98:1  ✗
     Un verde lo bastante vivo para destacar es demasiado claro para
     sostener texto blanco. No cambiar el texto a claro. */
  --f-verde:      #12C463;
  --f-verde-osc:  #0FAE58;   /* el mismo, un paso más abajo: para el hover */
  --f-azul:       #1D577F;   /* azul medio del brazo */
  --f-petroleo:   #0D3048;   /* azul noche del brazo */
  --f-rosa:       #E21B59;   /* solo decorativo */
}

/* =============================================================
   1. HERO DEL FESTIVAL
   La ilustración de las manos viene recortada de la lámina, con
   su fondo carmín plano: por eso calza sin costura con el fondo
   de la sección. Si se reemplaza la imagen, el fondo del nuevo
   recorte debe seguir siendo #A21C42.
   ============================================================= */
.fest-hero{
  position:relative; overflow:hidden;
  background:var(--f-carmin); color:var(--f-hueso);
  padding:0 0 clamp(2.5rem,7vw,4rem);
}

/* --- FONDO FOTOGRÁFICO EN PRUEBA -------------------------------
   Tres capas: foto difuminada, velo carmín encima, y el contenido.
   El color de fondo de la sección sigue siendo el carmín de siempre,
   así que si se borran las dos capas de abajo todo queda como antes.

   El velo va al 88%: medido contra el píxel más claro de la foto, el
   texto claro conserva 5,4:1, sobre el mínimo AA de 4,5:1. Subirlo
   deja ver menos foto; BAJARLO DE 0.82 rompe el contraste.

   inset:-30px evita que el desenfoque deje los bordes translúcidos.
   --------------------------------------------------------------- */
.fest-hero__fondo{
  position:absolute; inset:-30px; z-index:0;
  background:url("../img/festival/fondo-hero.jpg") center 30% / cover no-repeat;
  filter:blur(14px);
}
.fest-hero__velo{
  position:absolute; inset:0; z-index:0;
  background:rgba(162,28,66,.88);
}
.fest-hero picture{ display:block; }
/* En celular la proporción de la imagen y la de la franja son la
   misma (1200/766), así que no se recorta nada del agarre. */
.fest-hero__brazo{
  position:relative; z-index:1;
  width:100%; height:auto; aspect-ratio:1200/766;
  object-fit:cover; object-position:center;
}
.fest-hero__texto{ position:relative; z-index:2; padding-top:clamp(1.8rem,5vw,2.6rem); }

.fest-hero__kicker{
  display:inline-block; margin:0 0 1.1rem;
  background:var(--f-hueso); color:var(--f-carmin);
  font-weight:800; font-size:.8rem; letter-spacing:.09em; text-transform:uppercase;
  padding:.42rem 1.05rem; border-radius:var(--radio-cap);
}
/* --- TITULAR ------------------------------------------------------
   Jerarquía invertida el 20/08/2026, a pedido del cliente: el
   concepto de la campaña ("Ser comunidad") es lo más grande del hero
   y el nombre del festival va encima, en cuerpo menor.

   Los dos son <span> dentro de un mismo <h1>; los tamaños se fijan
   aquí en cada uno, no se heredan del h1.
   ------------------------------------------------------------------ */
.fest-hero__titulo{ margin:0 0 1.15rem; }

/* El nombre del festival: chico, espaciado y en versalitas. Pierde
   tamaño pero no legibilidad: va en hueso, que sobre el hero da
   5,36:1. La jerarquía la hace el tamaño, no el color. */
.fest-hero__nombre{
  display:block;
  font-size:clamp(1rem,2.3vw,1.35rem);
  font-weight:800; letter-spacing:.15em; text-transform:uppercase;
  color:var(--f-hueso);
  margin-bottom:.55rem;
}

/* El concepto de la campaña: el elemento dominante de la página.
   letter-spacing negativo y line-height bajo para que las dos
   palabras se lean como un bloque compacto, no como dos frases.
   El hueso sobre el velo carmín da 5,4:1 (ver D35). */
.fest-hero__lema{
  display:block;
  font-size:clamp(3.1rem,11vw,6.4rem);
  line-height:.94;
  font-weight:900; letter-spacing:-.025em;
  text-transform:uppercase;
  color:var(--f-hueso);
  text-wrap:balance;
}
.fest-hero__lema::after{
  content:""; display:block;
  width:clamp(90px,17vw,170px); height:7px; margin-top:.3em;
  background:var(--f-oliva); border-radius:4px;   /* oliva como relleno: aquí no es texto */
}
/* La frase que completa el concepto de la campaña (D45).
   Queda entre el titular y los datos prácticos: primero qué significa
   ser comunidad, después cuándo y dónde. Por eso es más grande que la
   bajada, que pasó a ser el renglón secundario.

   max-width en ch y no en rem: el límite que importa es la cantidad
   de caracteres por línea (unos 55), que es lo que hace cómoda la
   lectura, y así no depende del cuerpo elegido. */
.fest-hero__concepto{
  max-width:52ch;
  margin:0 0 1.35rem;
  font-size:clamp(1.15rem,2.5vw,1.45rem);
  line-height:1.45;
  color:var(--f-hueso);
}

/* ⚠️ El color va en hueso, NO en greige (--f-claro).
   Medido sobre el hero: el greige da 4,25:1 contra el píxel más claro
   de la fotografía bajo el velo, por debajo del mínimo AA de 4,5:1.
   El hueso da 5,36:1. El greige sí sirve sobre el carmín plano de
   otras secciones, donde no hay foto detrás; aquí no. */
.fest-hero__bajada{
  max-width:34rem; font-size:1rem; color:var(--f-hueso); margin:0 0 1.4rem;
  /* Sin opacity a propósito: bajarla al 92% dejaba el contraste en
     4,78:1, que cumple pero con poco margen. La jerarquía frente a la
     frase del concepto ya la hace el cuerpo (16px contra 23px). */
}
.fest-hero__acciones{ display:flex; flex-wrap:wrap; gap:.85rem; }

/* En pantalla ancha el brazo pasa a columna que sangra por la derecha */
@media (min-width:900px){
  .fest-hero{ padding:0; }
  /* display:contents hace que la imagen se posicione respecto del
     hero y no del <picture>, que desaparece del flujo. */
  .fest-hero picture{ display:contents; }
  .fest-hero__brazo{
    position:absolute; top:0; right:0; bottom:0; z-index:1;
    width:clamp(250px,29vw,400px); height:100%; aspect-ratio:auto;
    object-position:center top;
  }
  /* La columna de texto reserva el ancho de la ilustración con
     PADDING, no con max-width.

     ⚠️ Antes usaba max-width y eso provocaba una colisión: el
     .contenedor lleva margin-inline:auto, así que al angostarlo el
     bloque quedaba CENTRADO en el hero y su borde derecho se metía
     debajo del dibujo. Se veía entre 900 y 1150 px, donde la última
     letra de COMUNIDAD caía sobre la mano.

     Con padding el bloque conserva su ancho y su centrado normales,
     de modo que el borde izquierdo del texto sigue alineado con el
     de las secciones de abajo.

     La cuenta: la ilustración se ancla al borde de la ventana, y el
     contenedor termina antes, a media calle de distancia. Por eso se
     resta esa media calle —20px mientras el contenedor no llega a su
     ancho máximo, (100vw - 1140px)/2 después—. El 2rem que queda es
     el aire entre el texto y el dibujo, constante en todo el rango. */
  .fest-hero__texto{
    position:relative; z-index:1;
    padding-block:clamp(3.5rem,7vw,5.5rem);
    padding-right:calc(
      clamp(250px,29vw,400px) + 2rem - max(20px, (100vw - 1140px) / 2)
    );
  }
}

/* =============================================================
   2. BOTONES DEL FESTIVAL
   ============================================================= */
.boton--f{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:48px; padding:.85rem 1.6rem;      /* 48px: área táctil mínima */
  border-radius:var(--radio-cap); border:3px solid transparent;
  font-weight:800; font-size:1rem; text-decoration:none; cursor:pointer;
  transition:background .18s, color .18s;
}
.boton--f-solido{ background:var(--f-hueso); color:var(--f-carmin-osc); }
.boton--f-solido:hover{ background:var(--blanco); }
.boton--f-linea{ border-color:var(--f-claro); color:var(--f-hueso); }
.boton--f-linea:hover{ background:var(--f-carmin-osc); }
.fest-hero a:focus-visible{ outline:3px solid var(--f-hueso); outline-offset:3px; }

.boton--f-carmin{ background:var(--f-carmin); color:var(--f-hueso); }
.boton--f-carmin:hover{ background:var(--f-carmin-osc); }

/* =============================================================
   3. FRANJA DE DATOS
   ============================================================= */
.fest-datos{ background:var(--f-petroleo); color:var(--blanco); padding:0; }
.fest-datos__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:rgba(255,255,255,.18);
}
.fest-datos__celda{
  background:var(--f-petroleo); padding:1.5rem clamp(.75rem,2vw,1.5rem); text-align:center;
}
.fest-datos__rotulo{
  display:block; font-size:.74rem; letter-spacing:.11em; text-transform:uppercase;
  opacity:.8; margin-bottom:.3rem;
}
.fest-datos__valor{ display:block; font-weight:800; font-size:clamp(1rem,2.4vw,1.3rem); }
@media (max-width:600px){
  .fest-datos__grid{ grid-template-columns:1fr; }
}

/* =============================================================
   4. SPOT (video)
   El reproductor de YouTube NO se carga hasta que la persona
   hace clic: la portada es una imagen propia. Así la página no
   pesa 1 MB de más ni deja cookies de YouTube sin permiso.
   ============================================================= */
.fest-spot{ background:var(--f-hueso); }
/* EL ANCHO (cliente, 22/08/2026: "que abarque más espacio").
   Pasó de 900px a 1440, y para eso el marco tuvo que SALIR de
   .contenedor en el HTML: dentro, el tope habría sido 1140.

   Tres topes, gana el menor de los tres:

     1440px ................. deja de crecer en pantallas muy anchas;
                              más allá el video se ve pixelado, porque
                              el original es de 1280 de ancho.
     100% - 2.5rem .......... el mismo margen lateral que el resto del
                              sitio. En celular es el único que manda.
     (100svh - 5rem)*16/9 ... QUE EL REPRODUCTOR ENTERO QUEPA EN LA
                              PANTALLA. Sin este tope, a 1440 de ancho
                              mide 810 de alto y en un portátil de 800
                              hay que hacer scroll para ver el final
                              del video. Las 5rem son el aire que queda
                              arriba y abajo; medido, con 8rem el marco
                              se quedaba 86px más angosto de lo que
                              cabía en una pantalla de 720.

   ⚠️ Los tres van dentro de min(): si se borra uno, el marco crece de
   más en algún tamaño de pantalla y no se nota hasta abrirlo ahí. */
.fest-spot__marco{
  position:relative;
  width:min(1440px, 100% - 2.5rem, (100svh - 5rem) * 16 / 9);
  margin-inline:auto;
  aspect-ratio:16/9; background:var(--f-carmin);
  border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra-alt);
}
.fest-spot__marco iframe{ width:100%; height:100%; border:0; display:block; }

.fest-spot__boton{
  position:absolute; inset:0; width:100%; height:100%;
  padding:0; border:0; cursor:pointer; background:none;
  display:block; color:var(--f-hueso); text-align:center;
}
.fest-spot__boton img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.fest-spot__velo{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(126,20,51,.15), rgba(126,20,51,.78));
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:.5rem; padding:1.5rem;
}
/* Crece con el marco. Con el marco a 1440 un círculo de 74px fijos
   quedaba de alfiler. El mínimo son los mismos 74px de antes, que es
   más que el área táctil de 48. */
.fest-spot__play{
  width:clamp(74px, 6.4vw, 104px); aspect-ratio:1; height:auto;
  border-radius:50%;
  background:var(--f-hueso); color:var(--f-carmin);
  display:grid; place-items:center; margin-bottom:.4rem;
  box-shadow:0 6px 20px rgba(0,0,0,.3);
  transition:transform .18s;
}
.fest-spot__boton:hover .fest-spot__play{ transform:scale(1.08); }
.fest-spot__play svg{ width:40%; height:40%; margin-left:5%; }
.fest-spot__rotulo{ font-weight:800; font-size:1.15rem; }
.fest-spot__nota{ font-size:.86rem; opacity:.92; }
.fest-spot__boton:focus-visible{ outline:4px solid var(--f-carmin); outline-offset:4px; }

/* =============================================================
   5. PROGRAMACIÓN
   Cada día es un <article class="dia"> con una lista de actos.
   Está pensado para ir creciendo: ver el comentario del HTML.
   ============================================================= */
.fest-prog__aviso{
  display:flex; gap:.8rem; align-items:flex-start;
  background:var(--f-hueso); border-left:6px solid var(--f-oliva);
  border-radius:0 var(--radio) var(--radio) 0;
  padding:1rem 1.2rem; margin-bottom:2.5rem; max-width:46rem;
}
.fest-prog__aviso p{ margin:0; font-size:.98rem; color:var(--tinta-suave); }

.dias{ display:grid; gap:1.1rem; }

.dia{
  display:grid; grid-template-columns:112px 1fr; gap:clamp(1rem,3vw,2rem);
  background:var(--blanco); border:2px solid var(--borde);
  border-radius:var(--radio); padding:clamp(1.1rem,3vw,1.6rem);
}
.dia__fecha{ text-align:center; border-right:2px dashed var(--borde); padding-right:1rem; }
.dia__semana{
  display:block; font-weight:800; font-size:.85rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--f-carmin-osc);
}
.dia__numero{
  display:block; font-weight:800; font-size:3.1rem; line-height:1;
  color:var(--f-carmin); letter-spacing:-.04em;
}
.dia__mes{
  display:block; font-size:.8rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--tinta-suave);
}

.dia__actos{ list-style:none; margin:0; padding:0; display:grid; gap:1.4rem; }
.dia__actos > li + li{ border-top:2px solid var(--borde); padding-top:1.4rem; }

.acto__cabeza{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-bottom:.35rem; }
.acto__hora{
  margin:0; font-weight:800; font-size:1.05rem; color:var(--f-carmin-osc);
  font-variant-numeric:tabular-nums;
}
.acto__tipo{
  font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:.24rem .7rem; border-radius:var(--radio-cap); white-space:nowrap;
}
/* Cada tipo con su color. Todos verificados sobre su propio fondo. */
.acto__tipo--espectaculo{ background:var(--f-carmin);   color:var(--f-hueso); }  /* 6.7:1 */
.acto__tipo--variete{     background:var(--f-petroleo);  color:var(--blanco);  }  /* 13.7:1 */
.acto__tipo--taller{      background:var(--f-oliva);     color:var(--tinta);   }  /* 5.8:1 */
.acto__tipo--pasacalle{   background:var(--f-azul);      color:var(--blanco);  }  /* 7.7:1 */
.acto__tipo--encuentro{   background:var(--f-carmin-osc);color:var(--blanco);  }  /* 10.3:1 */

.acto__titulo{ margin:0 0 .3rem; font-size:1.16rem; }
.acto__cia{ margin:0 0 .3rem; color:var(--tinta-suave); font-size:.97rem; }
.acto__lugar{ margin:0; font-size:.97rem; font-weight:700; color:var(--f-azul); }
.acto__lugar svg{
  width:15px; height:15px; vertical-align:-2px; margin-right:.3rem; fill:currentColor;
}

/* Actividad que no es abierta al público */
.acto__cerrado{
  font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:.2rem .66rem; border-radius:var(--radio-cap); white-space:nowrap;
  border:2px solid var(--tinta-suave); color:var(--tinta-suave);
}
.acto__nota{
  margin:.45rem 0 0; font-size:.9rem; color:var(--tinta-suave);
}
/* Dato que todavía no está: se avisa, no se inventa */
.acto__nota--pronto{
  display:inline-block; margin-top:.5rem;
  background:var(--f-hueso); color:var(--f-oliva-osc);   /* 5,0:1 */
  font-weight:800; font-size:.82rem;
  padding:.28rem .8rem; border-radius:var(--radio-cap);
}

/* Aviso del tramo sin actividades */
.dias__hueco{
  display:flex; align-items:center; gap:.7rem;
  margin:0; padding:1rem 1.2rem;
  border:2px dashed var(--borde); border-radius:var(--radio);
  color:var(--tinta-suave); font-size:.96rem; font-weight:700;
}

@media (max-width:560px){
  .dia{ grid-template-columns:1fr; gap:1rem; }
  .dia__fecha{
    display:flex; align-items:baseline; gap:.5rem; text-align:left;
    border-right:0; border-bottom:2px dashed var(--borde);
    padding:0 0 .7rem;
  }
  .dia__numero{ font-size:2.3rem; }
}

/* =============================================================
   6. LUGARES
   ============================================================= */
.fest-lugares{ background:var(--f-hueso); }
.lugares{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.lugar{
  background:var(--blanco); border:2px solid var(--borde);
  border-radius:var(--radio); padding:1.2rem 1.3rem;
  /* Columna estirada: así el botón "Cómo llegar" queda a la misma
     altura en todas las tarjetas de una fila, aunque unas tengan
     dirección y otras no. */
  display:flex; flex-direction:column; align-items:flex-start;
}
.lugar__nombre{ margin:0 0 .3rem; font-size:1.05rem; }
.lugar__detalle{ margin:0; font-size:.93rem; color:var(--tinta-suave); }
.lugar__cuenta{
  display:inline-block; margin:auto 0 0; padding-top:.6rem;
  font-size:.78rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--f-oliva-osc);                     /* 5.0:1 sobre blanco */
}

/* "Cómo llegar": objetivo táctil de 48 px, como pide el proyecto */
.lugar__mapa{
  display:inline-flex; align-items:center; gap:.4rem;
  margin-top:.9rem; min-height:48px; padding:.55rem .95rem;
  border:2px solid var(--f-carmin); border-radius:var(--radio-cap);
  color:var(--f-carmin); text-decoration:none;
  font-weight:800; font-size:.9rem;
}
.lugar__mapa svg{ width:15px; height:15px; fill:currentColor; }
.lugar__mapa:hover,.lugar__mapa:focus-visible{
  background:var(--f-carmin); color:var(--f-hueso);
}


/* =============================================================
   7. FRANJA "SER COMUNIDAD"
   ============================================================= */
.fest-comunidad__grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(1.5rem,4vw,3rem); align-items:center;
}
.fest-comunidad__figura{ margin:0; }
.fest-comunidad__figura img{
  border-radius:var(--radio); box-shadow:var(--sombra);
  width:100%; max-width:340px; height:auto; margin-inline:auto;
}
.fest-cita{
  margin:1.6rem 0 0; padding:.2rem 0 .2rem 1.3rem;
  border-left:6px solid var(--f-oliva);
}
.fest-cita p{
  margin:0; font-size:1.12rem; font-weight:700; line-height:1.5;
  color:var(--f-carmin-osc);
}
@media (max-width:820px){
  .fest-comunidad__grid{ grid-template-columns:1fr; }
}

/* =============================================================
   7b. EDICIONES ANTERIORES
   Los afiches vienen en proporciones distintas (unos cuadrados de
   Instagram, otros verticales de historia). Van con object-fit:
   contain sobre fondo carmín: se ven completos, sin recortar, y las
   tarjetas quedan todas iguales.
   ============================================================= */
.fest-historia{ background:var(--f-hueso); }

/* -------------------------------------------------------------
   EL CARRUSEL  (cliente, 22/08/2026)
   Antes era una retícula que bajaba en dos, tres o cuatro filas
   según el ancho. Ahora es UNA fila que se recorre a lo ancho.

   SE MUEVE CON BOTONES Y NO SOLO, y es una decisión, no una falta:
   cada tarjeta tiene texto que se lee (edición, lema, fechas). Una
   fila que avanza sola obliga a leer persiguiendo, y además exige
   por norma un control para detenerla (WCAG 2.2.2), o sea un botón
   igual pero encima de algo en movimiento. Con flechas manda quien
   mira. Las pone js/festival.js, tercer bloque.

   El desplazamiento es scroll NATIVO del navegador con scroll-snap.
   Eso es lo que hace que funcione con el dedo, con la rueda del
   ratón, con las flechas del teclado y con los botones sin que el
   JS reimplemente nada. La pista lleva tabindex="0" en el HTML
   porque un contenedor que se desplaza tiene que poder recibir el
   foco: si no, con teclado no hay manera de recorrerlo.
   ------------------------------------------------------------- */
.carrusel{ position:relative; }

.carrusel__pista{
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  /* El aire de arriba y los costados es para que el giro de medio
     grado de las tarjetas (sección 10) y su anillo de foco no
     queden cortados por el propio recorte del scroll. El de abajo
     es para la barra de desplazamiento. */
  padding:6px 6px 1rem;
  margin:-6px -6px 0;
  scrollbar-width:thin;
  scrollbar-color:var(--f-carmin) rgba(36,24,19,.14);
}
.carrusel__pista:focus-visible{
  outline:4px solid var(--f-carmin); outline-offset:2px;
}

.historia{
  list-style:none; margin:0; padding:0;
  display:flex; gap:1.2rem;
}

/* LAS FLECHAS. Círculo hueso con la flecha en carmín: 6.7:1
   medidos, y no dependen del afiche que tengan detrás, que puede ser
   claro u oscuro. 48px es el área táctil mínima del proyecto, no un tamaño
   elegido por estética.
   Hasta 1320px van por dentro de la fila, encima del afiche; desde
   ahí sobra sitio en los márgenes y salen a los lados, que estorba
   menos. No se sacan antes porque asomarían fuera de la ventana y
   aparecería barra horizontal en toda la página. */
.carrusel__flecha{
  position:absolute; top:calc(50% - 34px);
  width:48px; height:48px; border-radius:50%;
  border:2px solid var(--f-carmin);
  background:var(--f-hueso); color:var(--f-carmin);
  display:grid; place-items:center; cursor:pointer; padding:0;
  box-shadow:0 6px 18px rgba(36,24,19,.3);
  transition:transform .16s, background-color .16s;
  z-index:2;
}
.carrusel__flecha svg{ width:24px; height:24px; fill:currentColor; }
.carrusel__flecha--izq{ left:.4rem; }
.carrusel__flecha--der{ right:.4rem; }
/* La flecha de la izquierda es la misma girada: un icono menos. */
.carrusel__flecha--izq svg{ transform:rotate(180deg); }
.carrusel__flecha:hover{ background:var(--blanco); transform:scale(1.07); }
.carrusel__flecha:focus-visible{
  outline:0;
  /* Anillo de dos tonos: el interior contra el botón (hueso sobre
     tinta, 15,3:1) y el exterior contra lo que haya detrás. Un solo
     color no sirve aquí, porque detrás puede haber cualquier cosa. */
  box-shadow:0 0 0 4px var(--f-hueso), 0 0 0 8px var(--tinta);
}
/* En los extremos se apaga. Un control desactivado está fuera del
   requisito de contraste, pero se deja en .45 y no en .3 para que
   siga viéndose que existe. */
.carrusel__flecha[disabled]{
  opacity:.45; cursor:default; box-shadow:none; transform:none;
}
@media (min-width:1320px){
  .carrusel__flecha--izq{ left:-26px; }
  .carrusel__flecha--der{ right:-26px; }
}

.edicion{
  background:var(--blanco); border:2px solid var(--borde);
  border-radius:var(--radio); overflow:hidden;
  display:flex; flex-direction:column;
  /* ANCHO FIJO: es lo que convierte la retícula en fila. Con
     flex:0 0 las tarjetas no se reparten el sitio ni se encogen, y
     la que queda a medio ver en el borde es justamente la señal de
     que hay más. */
  flex:0 0 clamp(190px, 62vw, 245px);
  scroll-snap-align:start;
  scroll-margin-inline:6px;
}
/* El anillo de foco va en la TARJETA y no en el enlace: la tarjeta
   recorta lo que sobresale (overflow:hidden, sección 10) y un
   contorno puesto en el enlace saldría cortado por los cuatro
   lados. :focus-within y no :focus-visible porque el que recibe el
   foco es el enlace de dentro. */
.edicion:focus-within{ outline:4px solid var(--tinta); outline-offset:3px; }

/* EL AFICHE ES EL BOTÓN. Ocupa toda la parte de arriba de la
   tarjeta, así que de área táctil va sobrado. */
.edicion__lupa{
  position:relative; display:block; text-decoration:none;
}
.edicion__lupa img{
  width:100%; height:290px; object-fit:contain;
  background:var(--f-carmin);
}
/* La lupa avisa de que se puede abrir. Va en una esquina y no
   encima del afiche para no taparlo. */
/* La misma lupa de los afiches sirve en las fotos de las fichas: se
   suma el selector en vez de duplicar la regla.
   ⚠️ Solo va en la foto grande. En las chicas, de 94px en un celular,
   un círculo de 38 taparía un tercio de la foto. */
.edicion__lupa-icono,
.ficha__lupa-icono{
  position:absolute; right:.5rem; bottom:.5rem;
  width:38px; height:38px; border-radius:50%;
  background:var(--f-hueso); color:var(--f-carmin);
  display:grid; place-items:center;
  box-shadow:0 4px 12px rgba(36,24,19,.4);
  transition:transform .16s;
}
.edicion__lupa-icono svg,
.ficha__lupa-icono svg{ width:20px; height:20px; fill:currentColor; }
.edicion__lupa:hover .edicion__lupa-icono,
.ficha__foto-lupa:hover .ficha__lupa-icono{ transform:scale(1.15); }
.edicion__pie{ padding:.9rem 1rem 1.1rem; }
.edicion__num{
  margin:0 0 .25rem; font-weight:800; font-size:1rem; color:var(--f-carmin);
}
.edicion__num span{
  color:var(--tinta-suave); font-weight:700;
}
.edicion__tema{ margin:0 0 .2rem; font-size:.95rem; font-weight:700; }
.edicion__fecha{ margin:0; font-size:.86rem; color:var(--tinta-suave); }

/* La edición en curso: sin afiche, porque es toda esta página */
.edicion--actual{
  background:var(--f-carmin); border-color:var(--f-carmin);
  color:var(--f-hueso);
}
.edicion--actual .edicion__lupa img{ background:var(--f-carmin-osc); }
.edicion--actual .edicion__num{ color:var(--f-hueso); }
.edicion--actual .edicion__num span{ color:var(--f-claro); }
.edicion--actual .edicion__tema{ color:var(--f-claro); }
.edicion--actual .edicion__fecha{ color:var(--f-claro); }
.edicion__aqui{
  margin:.9rem 0 0; font-size:.78rem; font-weight:800;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--f-carmin-osc); background:var(--f-hueso);
  align-self:flex-start; padding:.3rem .8rem; border-radius:var(--radio-cap);
}

/* En celular la fila se recorre igual con el dedo. Las tarjetas se
   estrechan por la línea clamp() de arriba, no aquí: lo único que
   cambia es el alto del afiche y el cuerpo de los textos. */
@media (max-width: 620px){
  .historia{ gap:.8rem; }
  .edicion__lupa img{ height:170px; }
  .edicion__lupa-icono,
  .ficha__lupa-icono{ width:34px; height:34px; }
  .edicion__pie{ padding:.7rem .75rem .9rem; }
  .edicion__num{ font-size:.9rem; }
  .edicion__tema{ font-size:.85rem; }
  .edicion__fecha{ font-size:.78rem; }
  .edicion__aqui{ font-size:.68rem; margin-top:.7rem; }
}

/* =============================================================
   8. FINANCIAMIENTO
   ============================================================= */
.fest-financia{ background:var(--f-petroleo); color:var(--blanco); }
.fest-financia h2{ color:var(--blanco); }
.fest-financia__rotulo{
  font-size:.78rem; letter-spacing:.11em; text-transform:uppercase;
  opacity:.82; margin:0 0 1.4rem;
}
/* LOS DOS logotipos traen el texto en blanco: solo se leen sobre
   este fondo oscuro. No pasar esta franja a fondo claro sin pedir
   antes a cada institución su versión en color oscuro. */
.fest-financia__logos{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(1.5rem,4vw,3rem); align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.fest-financia__logos li{ display:flex; flex-direction:column; gap:.9rem; }
.fest-financia__logos img{
  width:100%; max-width:340px; height:auto;
}
.fest-financia__logos span{
  font-size:.88rem; line-height:1.45; opacity:.88; max-width:26rem;
}

/* =============================================================
   9. ASTERISCO DE MARCA
   La gráfica usa una cruz/asterisco a mano como remate. Se
   reproduce en SVG para usarla como viñeta y separador.
   ============================================================= */
.aster{ width:20px; height:20px; flex:0 0 auto; fill:var(--f-oliva); }
.aster--claro{ fill:var(--f-claro); }
.aster--carmin{ fill:var(--f-carmin); }

.titulo-f{ display:flex; align-items:center; gap:.7rem; }


/* =============================================================
   10. PORTADA DEL FESTIVAL — REDISEÑO "LA MANO DE LA CAMPAÑA"
   =============================================================
   Publicado el 21 de agosto de 2026, después de evaluarse en
   experimentos/festival-b/ (ver su README.md, que conserva todas
   las mediciones y el porqué de cada decisión).

   QUÉ HACE DISTINTO A LO ANTERIOR
   1. Usa el LETTERING REAL de la diseñadora, en PNG transparente:
      img/festival/lema.png, nombre.png, onda.png, aspa.png.
      No es una imitación con tipografía del sistema.
   2. El hero dejó de ser afiche y ficha técnica a la vez. Ahora es
      un TELÓN a pantalla completa (.e-telon) y los textos de
      campaña con los botones bajaron a su propia sección
      (.e-invita). Eso resolvió de raíz que el botón se cayera del
      primer pantallazo en celular (D46).
   3. Marco greige alrededor de los bloques de color y grano de
      papel generado con un filtro SVG: no pesa ni un byte.
   4. La programación se ordena como el carrusel de las láminas.
   5. El spot corre de fondo en el telón, silenciado y con botón
      para detenerlo (ver js/festival.js, segundo bloque).

   ⚠️ LAS CLASES .fest-hero__* DE LA SECCIÓN 1 QUEDARON SIN USO.
   No se borraron para no tocar código probado en el mismo cambio
   que publica el rediseño. Se pueden limpiar más adelante, en un
   cambio aparte: ningún HTML del sitio las usa ya.

   ⚠️ Los contrastes están anotados regla por regla. Varios están
   al límite y las cuentas explican por qué: no cambiar opacidades
   ni degradados de esta sección sin volver a medir.
   ============================================================= */

:root{
  /* Ancho del marco greige. Es el mismo recurso de las láminas. */
  --e-marco: clamp(8px, 1.4vw, 15px);

  /* Grano de papel. Es un SVG escrito aquí mismo: el navegador lo
     genera con feTurbulence, así que no hay archivo de imagen que
     descargar. Se usa siempre con mix-blend-mode y opacidad baja. */
  --e-grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Utilidad: grano sobre cualquier fondo de color. Se aplica con un
   ::after para no ocupar un elemento del HTML. */
.e-grano{ position:relative; overflow:hidden; }
.e-grano::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--e-grano); background-size:180px 180px;
  opacity:.13; mix-blend-mode:overlay;
}

/* =============================================================
   1. TELÓN  (lo que antes era el hero)
   -------------------------------------------------------------
   Ocupa lo que queda de pantalla bajo la cabecera y no intenta
   contar nada más que el nombre, el lema y los tres datos que
   cualquier afiche tiene que dar: cuándo, dónde, cuánto.

   CAPAS, de atrás hacia adelante:
     0  __fondo / __video   la fotografía difuminada o el spot
     1  __velo              el carmín que garantiza el contraste
     2  __brazo             la ilustración, que va nítida
     3  __centro / __baja   el texto
   ============================================================= */
.e-telon{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; grid-template-rows:1fr;
  min-height:min(760px, calc(100svh - 96px));
  padding:0;
  background:var(--f-carmin);
  border:var(--e-marco) solid var(--f-claro);
  /* borde inferior curvo: rompe la línea recta entre secciones */
  border-bottom-left-radius:50% clamp(14px,2.6vw,30px);
  border-bottom-right-radius:50% clamp(14px,2.6vw,30px);
}

.e-telon__fondo{
  position:absolute; inset:0; z-index:0;
  background:url("../img/festival/fondo-hero.jpg") center/cover no-repeat;
  filter:blur(7px) saturate(.8);
  transform:scale(1.08);   /* el blur come los bordes: se compensa */
}

/* Contenedor del spot de fondo. Vacío hasta que js/festival.js
   decida que corresponde cargarlo. */
.e-telon__video{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.e-telon__video iframe{
  position:absolute; top:50%; left:50%;
  /* el video es 16:9 y la sección no: se agranda hasta cubrir por
     el lado que falte, y el resto se sale por fuera */
  width:max(100%, 177.8vh); height:max(100%, 56.25vw);
  transform:translate(-50%,-50%) scale(1.06);
  border:0; pointer-events:none;
  /* ⚠️ AQUÍ YA NO VA EL DESENFOQUE. Estaba como filter sobre este
     mismo iframe, y filtrar un iframe de otro dominio obliga al
     navegador a componerlo aparte: es la causa más probable de los
     rectángulos blancos que apareció el 21/08/2026 en la pantalla
     del cliente y que no se reprodujo aquí en 900, 1280, 1440, 1920
     ni en celular.
     El desenfoque se hace ahora desde el velo, con backdrop-filter,
     que no toca el iframe. El resultado visual es el mismo. */
}

/* EL VELO — aquí vive el contraste, así que los números importan.

   ADELGAZADO TRES VECES el 21/08/2026, a pedido del cliente:
   0.84 -> 0.70 -> 0.55 -> 0.325, cada paso "un 50% más transparente".
   El 0.325 es la mitad de opaco que el original.

   Las cuentas van sobre el peor caso posible: que justo detrás de una
   letra caiga un pixel blanco del video o de la fotografía.

   Y LLEGÓ HASTA AQUÍ porque se separó el problema en tres, en vez de
   pedirle una sola capa que lo resolviera todo:

     1. EL VELO PLANO, al 0.325. Es lo único que cubre la zona
        abierta, o sea el lado donde de verdad se ve el video. Ahí no
        hay ni texto ni lettering, así que no tiene nada que sostener.
        Medido: si hubiera lettering, daría 1.27:1.

     2. EL DEGRADADO HORIZONTAL, al 0.76, que cubre solo la franja del
        lettering. El lettering es texto GRANDE —letras de 150px— así
        que su mínimo es 3:1, no 4.5:1.
          velo .325 + degradado .76 -> rgb(150,59,85)
          lettering greige ...... 4.84:1  ✓ (mínimo 3:1)

     3. LA FRANJA INFERIOR, al 0.78, para la línea de fechas y el
        "Sigue", que ahora van centrados abajo. Esos SÍ son texto
        chico y necesitan 4.5:1. Peor caso, el extremo derecho de la
        línea, donde el degradado horizontal ya se desvaneció:
          velo .325 + franja .78 -> rgb(148,55,82)
          hueso ................. 6.34:1  ✓

   ⚠️ NO SUBIR LA TRANSPARENCIA DE LAS CAPAS 2 Y 3. La 1 es la que da
   la sensación de video destapado; las otras dos son las que sostienen
   la legibilidad y ya no tienen margen que regalar. Con el degradado
   al 0.50 el lettering cae a 2.97:1 y deja de cumplir.

   ⚠️ EL DEGRADADO ES LO QUE SOSTIENE EL CONTRASTE, no el velo.
   Cubre solo el lado donde va el texto, y por eso el video se ve al
   otro lado. Sin él, con el velo a 0.70 el texto chico daría 3.8:1 y
   no cumpliría. No borrarlo ni correr su borde más a la izquierda.

   El corte opaco llega al 58% porque la palabra "Sigue" está centrada
   en el 50% del ancho: con el 52% de antes quedaba a dos puntos del
   borde del degradado. */
.e-telon__velo{
  position:absolute; inset:0; z-index:1;
  background:rgba(162,28,66,.325);
  /* El desenfoque del fondo se aplica desde aquí y no sobre el
     iframe. El spot no es metraje ambiente: es un montaje con
     rótulos y cortes rápidos, y nítido detrás del velo sus letras
     compiten con el lema. Desenfocado deja de ser contenido y pasa
     a ser textura en movimiento, que es lo único que un fondo debe
     aportar.
     No cambia ninguna cuenta de contraste: desenfocar promedia, así
     que el peor pixel posible sigue siendo el blanco. */
  -webkit-backdrop-filter:blur(5px) saturate(.85);
          backdrop-filter:blur(5px) saturate(.85);
}
.e-telon__velo::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,
    rgba(126,20,51,.76) 0%,
    rgba(126,20,51,.76) 58%,
    rgba(126,20,51,0)   88%);
}
.e-telon__velo::after{
  content:""; position:absolute; inset:0;
  background-image:var(--e-grano); background-size:180px 180px;
  /* ⚠️ SIN mix-blend-mode, a diferencia del resto de los granos.
     Este es el único que cae sobre el video, y una capa con mezcla
     encima de un iframe compuesto aparte es la segunda causa
     probable de los rectángulos blancos. Con opacidad a secas se ve
     prácticamente igual. */
  opacity:.09;
}

/* LAS MANOS, al lado del lema.

   El ENVOLTORIO es el que ocupa sitio en la fila, y su ancho se
   calcula: la imagen mide el alto completo del telón y su proporción
   es 500/1509 = 0.3314, así que ese es el ancho que va a necesitar.
   Reservarlo exacto evita que la imagen, al ser absoluta, se monte
   sobre el logo.

   La IMAGEN va absoluta dentro del envoltorio y con el alto completo
   del telón, así que sangra por arriba y por abajo y el telón la
   recorta. Si ocupara sitio ella misma, su alto arrastraría a la fila
   entera y estiraría el telón. */
.e-telon__manos{
  position:relative; align-self:stretch;
  /* El ancho reservado tiene que ser el que la imagen ocupa DE
     VERDAD, excedente incluido: (alto del telón + 8rem) x 0.3314.
     Reservando solo el alto del telón, a 1440px la imagen se metía
     12px en la zona del logo. */
  flex:0 0 calc((min(100svh - 96px, 760px) + 8rem) * .3314);
}
.e-telon picture{ display:block; }
.e-telon__brazo{
  /* ⚠️ z-index NEGATIVO. El contenedor del texto ya está por encima
     del velo, así que dentro de él las manos tienen que quedar por
     DEBAJO del texto. Con z-index:2 —que era lo que había— tapaban
     la línea de fechas: "Entrada liberada" salía cortada. Un valor
     positivo, o incluso 0, sigue pintándose sobre el contenido
     estático; hace falta que sea negativo. */
  position:absolute; z-index:-1; left:0; top:50%;
  transform:translateY(-50%);
  /* +8rem sobre el alto del telón: centrada en la fila, el centro de
     la fila queda por encima del centro del telón, así que con el
     alto justo sangraba arriba pero dejaba 58px de hueco abajo y el
     dibujo se cortaba en seco. El excedente reparte la sangría a
     los dos lados. El envoltorio NO crece con esto: la imagen es
     absoluta y sobresale unos 43px hacia el hueco de la derecha,
     que está vacío. */
  height:calc(min(100svh - 96px, 760px) + 8rem);
  width:auto; max-width:none;
  pointer-events:none;
}

/* EL LOGO INSTITUCIONAL EN BLANCO.
   Va en el hueco entre el lema y las manos, que es donde lo pidió el
   cliente. Se ancla al borde derecho con un margen que depende del
   ancho de la ventana, porque la ilustración también está anclada
   ahí: así los dos se separan igual en cualquier pantalla.
   Comprobado sin choques a 900, 1280 y 1600px de ancho.

   Lleva una sombra apenas marcada porque, con el velo ya al 0.55, el
   video se ve bastante y un logo blanco plano se perdería sobre los
   fotogramas claros. Un logotipo no tiene mínimo de contraste
   exigible (WCAG 1.4.11 exceptúa las marcas), pero tiene que leerse. */
.e-telon__logo{
  /* CENTRADO EN EL HUECO entre las manos y el marco, a pedido del
     cliente (21/08/2026). El margen automático a LOS DOS lados es lo
     que lo centra: en un elemento de una fila flexible, los márgenes
     automáticos se reparten el espacio libre. Con margin-left:auto
     solo —que era lo de antes— quedaba pegado al borde.

     flex:0 1 para que pueda encogerse: en una ventana ancha pero baja
     la fila se aprieta, y antes que desbordar —y provocar barra
     horizontal— es mejor que el logo ceda unos pixeles. */
  margin-inline:auto; flex:0 1 auto; min-width:88px;
  position:relative; z-index:1;

  /* Un 30% más chico que el tamaño anterior, a pedido del cliente.

     ⚠️ La fórmula no es un vw a secas, y tiene razón de ser. Antes
     del cambio el logo NO medía lo mismo en proporción al ancho: en
     pantalla angosta lo topaba el sitio disponible (128px a 900) y en
     pantalla ancha lo topaba su propio valor (312px a 1280). Un
     clamp con un solo vw no puede quitarle un 30% a los dos: con
     16.5vw quedaba en 211 a 1280 —correcto— pero subía a 149 a 900,
     que es MÁS grande que antes.

     Esta es una recta que pasa por los dos puntos que hacen falta:
       900px de ancho  -> 91px   (antes 128, -29%)
       1280px de ancho -> 219px  (antes 312, -30%)
     y de 1440 en adelante la topa el máximo de 220px. */
  width:clamp(88px, calc(33.5vw - 210px), 220px); height:auto;
  pointer-events:none;

  /* ⚠️ SIN SOMBRA NI VELO DETRÁS, por decisión del cliente.
     Conviene saber qué se pierde: el velo general está al 0.325, así
     que sobre un fotograma claro del video el logo blanco cae a
     1.8:1 y casi desaparece. No incumple ninguna norma —WCAG 1.4.11
     exceptúa expresamente los logotipos—, pero sobre metraje claro no
     se va a leer. Si algún día se quiere recuperar algo de apoyo sin
     que parezca una sombra, lo más discreto es un velo radial muy
     suave, sin desenfoque ni desplazamiento:
       background:radial-gradient(ellipse at 50% 50%,
         rgba(94,12,36,.45) 0%, rgba(94,12,36,0) 78%); */
}


/* Aspas dibujadas, sueltas. Son decoración: van con alt vacío. */
.e-aspa{
  position:absolute; z-index:2; pointer-events:none;
  opacity:.5;
}
.e-aspa--1{ top:12%;  left:56%;  width:clamp(26px,3.4vw,44px); transform:rotate(-14deg); }
.e-aspa--2{ bottom:6%; left:auto; right:44%; width:clamp(20px,2.6vw,32px); transform:rotate(21deg); }

.e-telon__centro{
  position:relative; z-index:3; align-self:center;
  width:min(1140px, 100% - 2.5rem); margin-inline:auto;
  /* ⚠️ EL SEGUNDO VALOR ES LA RESERVA DEL BOTÓN "Ver programación",
     que va en posición absoluta y por lo tanto no ocupa sitio: si la
     reserva se queda corta, el contenido se le sube encima.
     El botón mide 68px y se separa 19px del borde: hacen falta 87.
     Con los 4,2rem de antes (67px) faltaban veinte, y por eso la
     píldora de inscripciones se montaba encima. Medido a 375px. */
  padding-block:clamp(.9rem,3.6vw,2.6rem) clamp(5.5rem,9vw,6rem);
}

/* LA FILA: nombre y lema · las manos · y el logo al borde derecho.
   Todo en el flujo, así que no hay que reservarle sitio a nada: la
   fila reparte y nada puede montarse encima de nada. */
.e-telon__fila{
  display:flex; align-items:center;
  /* ⚠️ SIN gap, y el espacio va como margen del título.
     El gap de una fila flexible NO lo reparten los márgenes
     automáticos: se suma antes. Con gap, el logo quedaba 17px
     descentrado —95px a la izquierda contra 78 a la derecha—.
     Poniendo la separación como margen del primer elemento, lo que
     queda libre entre las manos y el marco se reparte exacto. */
  gap:0;
  /* LA FILA SE ESTIRA HASTA EL MARCO, siempre a 5px de él.

     Sin esto, "centrar el logo entre las manos y el borde" lo
     centraría contra el borde invisible del bloque de contenido, que
     está topado en 1140px y centrado. La distancia entre ese borde y
     el marco es el margen del contenedor, y vale:
       max(20px, (ancho de ventana - 30px de marco - 1140px) / 2)
     Se le restan 5px para no pegarlo al marco.

     Medido antes de esta corrección: el logo quedaba 20px corrido
     hacia la izquierda en una ventana de 900px, y 5px en una de
     1280. Ahora son 5px en las dos. */
  margin-right:calc(-1 * (max(1.25rem, (100vw - 30px - 1140px) / 2) - 5px));
}

/* Los dos letterings van uno AL LADO del otro, como en la lámina:
   el nombre a la izquierda, el lema a la derecha. Apilados no caben:
   el lema solo ya ocupa 460px de alto, y sumarle el nombre encima
   devolvía el telón fuera de la primera pantalla. */
.e-telon__titulo{
  margin:0;
  display:grid; grid-template-columns:auto auto;
  align-items:center; justify-content:start;
  gap:clamp(.8rem,1.7vw,1.5rem);
  /* la separación con las manos, que ya no la da el gap de la fila */
  margin-right:clamp(.8rem,1.7vw,1.5rem);
  flex:0 0 auto;
}
/* El nombre del festival, con el lettering de marcador del cliente.
   El archivo ya trae la sombra impresa: no hay que agregarle
   drop-shadow o quedaría doble. */
.e-telon__nombre{
  display:block; height:auto;
  /* Cedió ancho para que creciera el logo: 16vw -> 13vw, unos 39px
     en una ventana de 1280. Es lo único que se estrechó; el lema y
     las manos quedaron intactos. */
  width:clamp(110px, 13vw, 190px);
}
/* EL LEMA, calado de la lámina original.
   Lleva alt="Ser comunidad": para un lector de pantalla el <h1>
   completo se lee "11° Festival Mes del Circo Ser comunidad", que
   es el título real de la página. Si la imagen no cargara, el
   texto alternativo aparece con este mismo tamaño. */
.e-telon__lema{
  /* ⚠️ SE DIMENSIONA POR ALTO, NO POR ANCHO. Son tres líneas
     apiladas: es más alto que ancho (614x844). Dándole un ancho, el
     alto queda a merced de la proporción y en una pantalla baja se
     desborda. Atado al alto de la ventana con svh, se ajusta solo. */
  display:block; width:auto;
  /* El alto manda, pero topado también por el ANCHO de la ventana.
     Solo con svh, en una pantalla de escritorio angosta y alta
     (900x760) el lema se llevaba 310 de los 636px útiles y dejaba al
     logo en 117px con 20px de aire: no chocaba, pero se veía
     apretado. El 38vw solo entra en juego por debajo de ~1180px de
     ancho; más arriba manda el alto, como antes. */
  height:clamp(200px, min(56svh, 38vw), 490px);
  /* La proporción declarada NO es redundante: sin ella una retícula no
     sabe deducir el ancho de una imagen cuyo alto está en svh, le
     asigna una columna más angosta de la que necesita y la imagen se
     desborda sobre la de al lado. Medido: 123px de superposición. */
  aspect-ratio:614/844;
  /* Este archivo viene plano. Una sombra apenas marcada lo despega
     del video, que ahora se ve más. */
  filter:drop-shadow(4px 5px 0 rgba(20,4,10,.20));
}

/* Los tres datos que un afiche no puede no decir. */
.e-telon__ficha{
  display:flex; align-items:center; flex-wrap:wrap;
  justify-content:center; text-align:center;
  gap:clamp(.45rem,1.3vw,.9rem);
  /* centrada a pedido del cliente (21/08/2026) */
  margin:clamp(.85rem,2.8vw,1.9rem) auto 0;
  /* PLACA PROPIA, y no es decorativa.
     Centrada, esta línea cruza por delante de la ilustración, y el
     contorno greige del dibujo es casi del mismo color que el texto:
     ahí daría 1.1:1. Con la placa el fondo pasa a ser conocido y
     deja de depender de lo que haya detrás.
       placa .86 sobre el contorno del dibujo -> rgb(140,49,76)  6.9:1
       placa .86 sobre el peor fotograma      -> rgb(140,43,71)  7.3:1
     ⚠️ No bajarla de 0.80. */
  background:rgba(126,20,51,.86);
  border-radius:999px;
  padding:.5rem 1.2rem;
  /* sin esto la caja se estira los 1140px del contenedor y su
     borde derecho se mete bajo la ilustración */
  width:fit-content; max-width:min(100%, 720px);
  font-weight:800; text-transform:uppercase; letter-spacing:.1em;
  font-size:clamp(.76rem,1.6vw,.95rem);
  color:var(--f-hueso);
}
/* ⚠️ El trazo del cliente tiene otra proporción que el que
   teníamos: 412x125 en vez de 323x57. Va con height:auto para que
   la respete; fijándole un alto saldría aplastado. */
.e-onda{ width:clamp(30px,4vw,52px); height:auto; opacity:.85; }

/* El llamado a la acción del telón. Desde el 22/08/2026 dice "Ver
   programación" y salta directo a esa sección (cliente); antes decía
   "Sigue" y bajaba a la invitación. */
.e-telon__baja{
  /* absoluta a propósito: si ocupara una fila de la retícula, su
     alto se sumaría al del lema y volvería a empujar el telón
     fuera de la pantalla */
  position:absolute; z-index:3; left:50%; bottom:clamp(.7rem,1.8vw,1.3rem);
  transform:translateX(-50%);
  /* ⚠️ EL nowrap NO ES COSMÉTICO. Un elemento absoluto colocado con
     left:50% solo puede medir, como mucho, la mitad del contenedor:
     en un celular de 375 eso son 187px, y "Ver programación" se
     partía en dos líneas. El botón crecía 19px de alto y se subía
     encima de la línea de fechas —medido: 11px de solape—. Con
     nowrap el texto va en una línea, el botón se pasa de ese medio
     ancho y el translateX(-50%) lo vuelve a centrar.
     Con la palabra "Sigue" no pasaba porque cabía. */
  white-space:nowrap;
  display:inline-flex; flex-direction:column; align-items:center; gap:.3rem;
  padding:.7rem 1.4rem; min-height:48px;   /* área táctil */
  color:var(--f-hueso); text-decoration:none;
  font-size:.72rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  border-radius:999px;
  /* misma razón que la placa de la ficha: también queda por delante
     de la ilustración */
  background:rgba(126,20,51,.86);
}
.e-telon__baja:hover{ background:rgba(126,20,51,.96); }
.e-telon__baja svg{ animation:e-latido 2.6s ease-in-out infinite; }
@keyframes e-latido{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(7px); } }

/* Botón para detener el spot de fondo. Lo crea js/festival.js solo
   si el video llegó a cargarse. Existe porque un fondo en
   movimiento que dura más de cinco segundos tiene que poder
   pararse (WCAG 2.2.2). */
.e-telon__pausa{
  position:absolute; z-index:4; right:clamp(.8rem,2vw,1.4rem); top:clamp(.8rem,2vw,1.4rem);
  min-width:48px; min-height:48px;
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.5rem .9rem;
  background:rgba(20,4,10,.5); color:var(--f-hueso);
  border:2px solid rgba(222,214,216,.55); border-radius:999px;
  font:800 .7rem/1 system-ui, sans-serif; letter-spacing:.12em; text-transform:uppercase;
  cursor:pointer;
}
.e-telon__pausa:hover{ background:rgba(20,4,10,.78); }

.e-telon a:focus-visible,
.e-telon button:focus-visible{ outline:3px solid var(--f-hueso); outline-offset:3px; }

/* --- El telón en celular ---------------------------------------
   La ilustración pasa a ser un fondo tenue en la esquina para que
   el lettering, que aquí es lo único que importa, se lea limpio. */
@media (max-width:899px){
  /* 92px es el alto real de la cabecera en celular, medido: 88px
     más los 2px de su borde inferior y un pixel de holgura. Con 84
     el telón se pasaba 4px y aparecía una tira de la sección
     siguiente asomando por abajo. */
  .e-telon{ min-height:calc(100svh - 92px); }
  /* ⚠️ Hay que DESHACER el height:100% del escritorio, no solo dar
     un ancho. En celular la imagen es el recorte horizontal
     (1200x766); con el alto atado al 100% y el ancho topado al
     40%, la proporción se rompe y el dibujo sale estirado en
     vertical: se veía una mancha de 150x744 donde debía haber un
     abrazo. Medido, no supuesto. */
  .e-telon__brazo{
    /* ⚠️ Hay que DESHACER también el anclaje del escritorio, no solo
       el alto: allí va con left:0 y top:50% con un transform que la
       centra. Sin resetear eso, el right/bottom de aquí abajo no
       tienen efecto —con width y left puestos, el right se ignora— y
       el dibujo aparecía al centro-izquierda, detrás de "SER", en vez
       de en la esquina inferior derecha. */
    left:auto; top:auto; transform:none;
    height:auto; max-width:none;
    right:-14%; bottom:-4%; width:74%;
    /* ⚠️ NO SUBIR ESTA OPACIDAD. En celular el dibujo pasa por
       detrás de la línea de fechas, y su contorno greige es el
       punto más claro de todo el telón. Cuentas sobre el peor
       pixel posible:
         al 0.42 ... hueso #F4F0F1 sobre rgb(169,104,123) = 3.75:1  ✗
         al 0.26 ... hueso #F4F0F1 sobre rgb(156, 77,100) = 5.08:1  ✓
       Es el mismo tipo de error que el ámbar sobre el rojo del
       hero institucional: se ve bien y no cumple. */
    opacity:.26;
  }
  /* ⚠️ MAS ESPESO QUE EN ESCRITORIO, y a propósito.
     Aquí abajo la ficha de fechas cae encima de la ilustración, cuyo
     contorno greige es el punto más claro del telón. Al adelgazar el
     velo base de 0.84 a 0.70 esa línea quedó en 4.55:1: cumple por
     cinco centésimas, que no es margen. Con estos valores da 5.2:1.

     Adelgazarlo aquí no aportaría nada: en celular el video no se
     carga, así que lo único que se destaparía es la fotografía fija. */
  .e-telon__velo::before{
    background:linear-gradient(180deg,
      rgba(126,20,51,.95) 0%,
      rgba(126,20,51,.94) 60%,
      rgba(126,20,51,.92) 100%);
  }
  /* En celular no cabe nada al costado: la fila deja de ser fila y
     el título ocupa todo el ancho. */
  .e-telon__fila{ display:block; position:relative; }

  /* La ilustración vuelve a ser una marca de agua detrás de todo, así
     que su envoltorio no debe ocupar sitio: se saca del flujo y se
     le quita el ancho reservado del escritorio. */
  .e-telon__manos{
    position:absolute; inset:0;
    flex:none; align-self:auto;
    pointer-events:none;
  }

  /* el aspa estaba justo donde ahora va el logo */
  .e-aspa--1{ left:auto; right:6%; top:auto; bottom:38%; }

  /* En 390px de ancho los dos letterings no caben lado a lado, así
     que se apilan. Pero el logo SÍ cabe al lado del nombre, que es
     angosto: fila de arriba [nombre | logo], y el lema abajo
     ocupando las dos columnas.

     ⚠️ Todo en el flujo, con celdas asignadas a mano. Con el logo en
     posición absoluta —que fue el primer intento— su caja se montaba
     18px sobre la del lema: no se notaba porque esa esquina del PNG
     es transparente, pero era cuestión de cambiar una medida para
     que sí se notara. */
  .e-telon__titulo{
    grid-template-columns:1fr;
    justify-items:start; gap:.7rem;
  }
  /* cede ancho para que crezca el logo, igual que en escritorio */
  .e-telon__nombre{ width:min(160px, 41vw); }
  .e-telon__lema{ height:44svh; }

  /* El logo va a la esquina superior derecha de la fila, que es el
     hueco que deja el nombre del festival. No puede solaparse con
     nada: el nombre mide 190px de ancho y 145 de alto, y el logo
     entra en 118x69 a partir del pixel 232. Medido. */
  /* ⚠️ AQUÍ NO CABE EL DOBLE, y conviene saber por qué.
     El logo comparte renglón con el nombre del festival, y entre los
     dos disponen de 334px. Con el nombre en 160 y los espacios, el
     techo del logo son unos 150px: se pasó de 118 a 148, un 25% más,
     no el doble.
     Para duplicarlo aquí habría que bajarlo debajo del lema, y el
     telón ya entra en la pantalla con 4px de sobra: no hay alto
     disponible. Además, la cabecera está tres dedos más arriba con
     el mismo logo a buen tamaño. */
  /* En celular sigue en la esquina, junto al nombre del festival:
     ahí no hay "hueco entre las manos y el borde" que repartir. Un
     30% más chico y sin sombra, igual que en escritorio. */
  .e-telon__logo{
    position:absolute; top:0; right:0;
    margin:0; width:min(104px, 27vw);
  }

  /* caía justo encima de la palabra "Sigue" */
  .e-aspa--2{ right:8%; bottom:24%; }
}

/* =============================================================
   2. INVITACIÓN
   -------------------------------------------------------------
   Todo lo que antes se apretaba dentro del hero: la píldora, la
   frase del concepto, la invitación y los dos botones. Aquí tiene
   aire y ya no hay ningún pixel en disputa.

   Fondo carmín oscuro #7E1433. Contrastes medidos:
     greige #DED6D8 sobre #7E1433 ....... 7.2:1  ✓ AA
     hueso  #F4F0F1 sobre #7E1433 ....... 8.2:1  ✓ AA
   ============================================================= */
/* LA FOTOGRAFÍA DE FONDO (cliente, 21/08/2026).

   El carmín oscuro se queda como color de base: si la foto no
   cargara, la sección sigue funcionando igual que antes.

   El velo va en DEGRADADO, no plano, por la misma razón que en el
   telón: tapa donde hay texto y destapa donde no. Cuentas sobre el
   peor caso, un pixel blanco de los focos de la carpa:

     velo .95 -> rgb(132,32,61)   greige 6.5:1
     velo .90 -> rgb(139,43,71)   greige 5.8:1   <- el del texto
     velo .80 -> rgb(152,67,92)   greige 4.5:1   <- ya no cumple

   El texto termina en el 48% del ancho y el degradado se mantiene
   en 0.90 hasta el 54%, así que toda la zona escrita está cubierta.
   ⚠️ La bajada va en greige, que es el color más exigente de los
   dos: si se cambia a hueso hay más margen, no menos. */
.e-invita{
  background:var(--f-carmin-osc); color:var(--f-hueso);
  padding-block:clamp(2.6rem,7vw,4.6rem);
  border-bottom-left-radius:50% clamp(14px,2.6vw,30px);
  border-bottom-right-radius:50% clamp(14px,2.6vw,30px);
}
/* ⚠️ El ancho máximo NO va aquí. .e-invita__caja también es
   .contenedor, y .contenedor centra con margin-inline:auto: al
   estrecharla, lo que se centra es el bloque entero y el texto se
   despega del borde izquierdo con el que se alinea toda la página
   —medido: empezaba en x=368 en vez de x=70—. Es exactamente el
   mismo efecto que provocó la colisión de D44.
   El ancho de lectura se limita en cada párrafo. */
.e-invita__foto{
  position:absolute; inset:0; z-index:0;
  /* encuadre en 42% de alto: deja arriba los focos y centra la
     gente, que es lo que hay que ver */
  background:url("../img/festival/comunidad.jpg") center 42%/cover no-repeat;
}
.e-invita__velo{
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(95deg,
    rgba(126,20,51,.95) 0%,
    rgba(126,20,51,.90) 54%,
    rgba(126,20,51,.58) 100%);
}
/* ⚠️ Este bloque va DESPUÉS de la regla de arriba, no dentro del
   @media del telón. Las dos reglas tienen la misma especificidad, así
   que decide el orden de aparición: puesto antes, no se aplicaba
   nunca. Comprobado midiendo el estilo calculado en un celular. */
@media (max-width:899px){
  /* En vertical el texto ocupa todo el ancho, así que el velo no
     puede destapar ningún costado: va parejo y nunca bajo 0.87. */
  .e-invita__velo{
    background:linear-gradient(180deg,
      rgba(126,20,51,.94) 0%,
      rgba(126,20,51,.90) 62%,
      rgba(126,20,51,.87) 100%);
  }
}
.e-invita__caja{ position:relative; z-index:2; }

.e-invita__kicker{
  display:inline-block; margin:0 0 1.2rem;
  padding:.42rem 1rem;
  border:2px solid var(--f-claro); border-radius:999px;
  font-size:.74rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--f-hueso);
}
.e-invita__concepto{
  margin:0 0 1.1rem;
  max-width:34ch;
  font-size:clamp(1.3rem,3.2vw,2rem); line-height:1.22; font-weight:800;
  letter-spacing:-.01em; text-wrap:balance;
  color:var(--f-hueso);
}
.e-invita__bajada{
  margin:0 0 1.8rem; max-width:52ch;
  font-size:clamp(1rem,1.9vw,1.1rem); line-height:1.6;
  color:var(--f-claro);
}
.e-invita__acciones{ display:flex; flex-wrap:wrap; gap:.85rem; }
/* El hover de línea usaba carmín oscuro, que aquí es el fondo:
   sobre este fondo no se notaría. */
.e-invita .boton--f-linea:hover{ background:var(--f-carmin); }
.e-invita a:focus-visible{ outline:3px solid var(--f-hueso); outline-offset:3px; }

/* Un aspa grande y muy tenue como marca de agua. */
.e-invita__marca{
  position:absolute; z-index:0; right:-2%; bottom:-12%;
  width:clamp(120px,20vw,240px); opacity:.1; pointer-events:none;
  transform:rotate(-12deg);
}

/* =============================================================
   3. TÍTULOS DE SECCIÓN
   -------------------------------------------------------------
   El asterisco vectorial que había se reemplaza por el aspa
   dibujada de la gráfica, y cada título lleva debajo el trazo de
   pincel de la lámina.

   Las dos van como MÁSCARA, no como imagen: así el mismo archivo
   se tiñe del color que haga falta y sirve tanto sobre fondo
   claro como sobre fondo oscuro. El PNG es greige y sobre el
   hueso de las secciones claras sería invisible.
   ============================================================= */
.titulo-f{
  flex-direction:column; align-items:flex-start; gap:.45rem;
  font-size:clamp(1.85rem,4.8vw,2.9rem); line-height:.96;
  font-weight:900; text-transform:uppercase; letter-spacing:-.022em;
}
.titulo-f .aster{ display:none; }   /* el asterisco viejo */

.titulo-f::before{
  content:""; display:block; width:26px; aspect-ratio:195/170; height:auto;
  background-color:var(--f-oliva-osc);
  -webkit-mask:url("../img/festival/aspa.png") left center/contain no-repeat;
          mask:url("../img/festival/aspa.png") left center/contain no-repeat;
}
/* aspect-ratio y no un alto fijo: la máscara va con "contain", así
   que con una proporción equivocada el trazo se encoge dentro de su
   caja en vez de llenarla. */
.titulo-f::after{
  content:""; display:block;
  width:clamp(90px,15vw,155px); aspect-ratio:412/125; height:auto;
  margin-top:.15rem;
  background-color:var(--f-carmin);
  -webkit-mask:url("../img/festival/onda.png") left center/contain no-repeat;
          mask:url("../img/festival/onda.png") left center/contain no-repeat;
}
/* Sobre los fondos oscuros el trazo y el aspa se aclaran. */
.fest-financia .titulo-f::before{ background-color:var(--f-claro); }
.fest-financia .titulo-f::after{  background-color:var(--f-claro); }
/* El título centrado del spot: hay un justify-content en línea en
   el HTML que con flex en columna alinearía mal. */
.seccion__intro--centro .titulo-f{ align-items:center; }
.seccion__intro--centro .titulo-f::before,
.seccion__intro--centro .titulo-f::after{ margin-inline:auto; }

/* =============================================================
   4. PROGRAMACIÓN, COMO EL CARRUSEL
   -------------------------------------------------------------
   Las láminas 3 y 4 ordenan cada jornada así: el día enorme a la
   izquierda, una llave, y las actividades a la derecha. Se replica
   con una retícula de dos columnas y la llave dibujada con bordes,
   sin ninguna imagen.

   Las tarjetas con marco y sombra desaparecen: la lámina no tiene
   cajas, tiene aire y una línea de separación.
   ============================================================= */
.dias{ gap:0; }
.dia{
  display:grid; grid-template-columns:minmax(84px,120px) 1fr;
  gap:clamp(.9rem,2.4vw,1.8rem); align-items:start;
  background:transparent; border:0; box-shadow:none; border-radius:0;
  padding:clamp(1.3rem,3vw,2rem) 0;
}
.dia + .dia{ border-top:2px solid rgba(36,24,19,.13); }

.dia__fecha{
  text-align:left; border:0; padding:0; margin:0;
  line-height:.84;
  /* La letra de pincel de la lámina va inclinada. No tenemos esa
     tipografía, pero una inclinación leve recoge el gesto. */
  transform:skewX(-8deg); transform-origin:left bottom;
}
.dia__semana{
  display:block; font-size:clamp(.95rem,2.2vw,1.25rem);
  font-weight:900; text-transform:uppercase; letter-spacing:.01em;
  color:var(--f-carmin);
}
.dia__numero{
  display:block; font-size:clamp(2.8rem,7.2vw,4.4rem);
  font-weight:900; letter-spacing:-.05em; color:var(--f-carmin);
}
.dia__mes{
  display:block; font-size:.62rem; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--tinta-suave); margin-top:.35rem;
}

/* La llave. Es un borde con las esquinas redondeadas, no una
   imagen: escala con el bloque y no pesa nada.
   Va en oliva #A1991E, que es color de relleno y jamás de texto. */
.dia__actos{
  position:relative; gap:1.5rem;
  padding-left:clamp(1rem,2.2vw,1.6rem);
}
.dia__actos::before{
  content:""; position:absolute; left:0; top:.35rem; bottom:.35rem;
  width:11px;
  border:3px solid var(--f-oliva); border-right:0;
  border-radius:13px 0 0 13px;
}
.dia__actos > li + li{
  border-top:2px dotted rgba(36,24,19,.2); padding-top:1.5rem;
}
.acto__titulo{
  font-size:clamp(1.1rem,2.4vw,1.32rem); font-weight:900;
  letter-spacing:-.01em; text-transform:uppercase; line-height:1.1;
}
.acto__hora{ font-variant-numeric:tabular-nums; }
/* Las etiquetas de tipo dejan de ser rectángulos. */
.acto__tipo{ border-radius:999px; }

@media (max-width:560px){
  .dia{ grid-template-columns:1fr; gap:.9rem; }
  .dia__fecha{ display:flex; align-items:baseline; gap:.6rem; }
  .dia__numero{ font-size:2.6rem; }
  .dia__mes{ margin-top:0; }
}

/* =============================================================
   5. QUE NADA SEA UN RECTÁNGULO
   -------------------------------------------------------------
   Esquinas desparejas y un giro de medio grado. Es poco a
   propósito: lo justo para que la página no parezca una planilla.
   El giro es estático, no una animación, así que no molesta a
   quien pidió menos movimiento.
   ============================================================= */
.lugar{
  border-radius:26px 8px 24px 10px;
  transition:transform .18s ease;
}
.lugares > .lugar:nth-child(odd){  transform:rotate(-.55deg); }
.lugares > .lugar:nth-child(even){ transform:rotate(.6deg); }
.lugar:hover{ transform:rotate(0deg) translateY(-3px); }

/* -------------------------------------------------------------
   LA FOTOGRAFÍA DE UN LUGAR
   -------------------------------------------------------------
   Hoy solo la tiene el Teatro Municipal. Las otras cinco tarjetas se
   ven exactamente como antes: la foto es opcional y su ausencia no
   deja hueco, igual que pasa con las fichas de la parrilla.

   Va a sangre —de ahí los márgenes negativos, que son el padding de
   la tarjeta al revés— porque es la foto DEL SITIO, no una
   ilustración dentro de una tarjeta. Una foto con marco blanco
   alrededor se lee como un adjunto; a sangre, como el lugar.

   ⚠️ EL REDONDEO DE ARRIBA COPIA EL DE LA TARJETA menos el grosor
   del borde: 26-2 y 8-2. Con los mismos valores asomaría una uña
   blanca en las esquinas.

   ⚠️ La proporción NO recorta nada: el archivo ya viene a 3:2 desde
   sips. Se declara para que el hueco esté reservado antes de que la
   foto llegue y la tarjeta no dé un salto. */
.lugar__foto{
  display:block; align-self:stretch;
  margin:-1.2rem -1.3rem 1rem;
  border-radius:24px 6px 0 0;
  overflow:hidden;
  cursor:zoom-in;
}
.lugar__foto img{
  display:block; width:100%; height:auto;
  aspect-ratio:3/2; object-fit:cover;
  background:var(--f-claro);
}
.lugar__foto:focus-visible{ outline:4px solid var(--tinta); outline-offset:2px; }

.edicion{ border-radius:22px 9px 22px 8px; overflow:hidden; }
.historia > .edicion:nth-child(3n+2){ transform:rotate(.7deg); }
.historia > .edicion:nth-child(3n){   transform:rotate(-.5deg); }

.fest-prog__aviso{ border-radius:24px 8px 22px 10px; }
.fest-spot__marco{ border-radius:26px 10px 26px 10px; overflow:hidden; }
.fest-comunidad__figura img{ border-radius:24px 8px 24px 10px; }

/* Bordes curvos entre franjas de color, para que el corte no sea
   una línea recta de regla. */
.fest-datos{
  position:relative; overflow:hidden;
  border-bottom-left-radius:50% clamp(12px,2.2vw,24px);
  border-bottom-right-radius:50% clamp(12px,2.2vw,24px);
}
.fest-datos::after,
.fest-financia::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--e-grano); background-size:180px 180px;
  opacity:.13; mix-blend-mode:overlay;
}
.fest-financia{ position:relative; overflow:hidden; }
.fest-datos__valor{ text-transform:uppercase; letter-spacing:.02em; }

/* =============================================================
   5b. FINANCIAN Y COLABORAN
   -------------------------------------------------------------
   Dos grupos con su propio rótulo, uno al lado del otro. La
   Municipalidad de Rengo colabora, no financia: por eso no está
   dentro de la misma lista (cliente, 21/08/2026).
   ============================================================= */
.e-apoyos{
  display:flex; flex-wrap:wrap; align-items:flex-start;
  gap:clamp(2rem,5vw,4.5rem);
}
.e-apoyos__grupo{ flex:1 1 380px; min-width:0; }
/* El grupo de la Municipalidad no se estira: es un solo logotipo y
   con flex:1 quedaría del mismo ancho que los dos financiadores
   juntos, dándole un peso que no le corresponde. */
.e-apoyos__grupo--colabora,
.e-apoyos__grupo--produce{ flex:0 1 auto; }
.e-apoyos__grupo--colabora .fest-financia__logos,
.e-apoyos__grupo--produce  .fest-financia__logos{
  grid-template-columns:auto;
}
.e-apoyos__grupo--colabora .fest-financia__logos img{
  width:auto; max-width:none; height:clamp(58px,7.2vw,88px);
}
/* El del circo va algo mayor que el de la Municipalidad: produce el
   festival, no colabora con él. */
.e-apoyos__grupo--produce .fest-financia__logos img{
  width:auto; max-width:none; height:clamp(62px,7.8vw,96px);
}
/* -------------------------------------------------------------
   TODOS DEL MISMO PORTE CUANDO VAN APILADOS  (cliente, 26/08/2026:
   "unos se ven más grandes que otros" en el celular)

   De dónde venía la diferencia: los dos logotipos del
   financiamiento se dimensionaban POR ANCHO —width:100%— y los de
   Produce y Colabora POR ALTO. Apilados en una columna, los
   primeros se estiraban a los 335px de ancho de la pantalla y los
   segundos se quedaban en su alto fijo. Medido en un celular de
   375: 145 y 124 px de alto contra 62 y 58. Más del doble.

   Aquí se igualan los cuatro por ALTO, que es como se alinean los
   logotipos de porte distinto.

   ⚠️ VA CON max-height Y NO CON height. Con un alto fijo, el
   logotipo más apaisado —Puntos de Cultura, 2,7 de proporción— se
   pasaría del ancho de la pantalla, el max-width lo cortaría por el
   otro lado y saldría aplastado. Con los dos máximos, el navegador
   respeta la proporción y encaja dentro de los dos.

   El tope de 122px sale de esa misma proporción: 122 x 2,7 = 330,
   justo dentro de los 335 que mide la columna.

   Esto es SOLO para la columna apilada. En escritorio, donde los
   tres grupos van uno al lado de otro, se mantiene lo aprobado en
   su momento: el del circo algo mayor que el de la Municipalidad
   porque produce el festival, no colabora con él.
   ------------------------------------------------------------- */
@media (max-width:880px){
  /* Los dos del financiamiento van uno DEBAJO del otro, no uno al
     lado del otro. Su retícula es auto-fit desde 240px, así que en
     una tablet el grupo era lo bastante ancho para ponerlos en dos
     columnas: ahí los ataba el ancho de la columna y volvían a
     quedar de altos distintos —medido a 880px: 120 y 102—. En una
     sola columna manda el alto, que es lo que se quería igualar. */
  .e-apoyos__grupo .fest-financia__logos{
    grid-template-columns:auto; justify-items:start;
    gap:clamp(1.4rem,4vw,2.2rem);
  }
  .e-apoyos__grupo .fest-financia__logos img,
  .e-apoyos__grupo--produce  .fest-financia__logos img,
  .e-apoyos__grupo--colabora .fest-financia__logos img{
    width:auto; height:auto;
    max-height:clamp(84px, 30vw, 122px);
    max-width:100%;
    /* ⚠️ align-self ES IMPRESCINDIBLE, no un detalle de alineación.
       Cada logotipo vive en un <li> que es flex en columna, y esos
       estiran a sus hijos a lo ancho. Mientras el alto venía fijo no
       se notaba —con una medida definida el navegador no estira—,
       pero al pasar las dos a auto empezó a estirar: medido, el
       logotipo del Ministerio salía a 335x113 cuando le tocaban
       260x113. Aplastado. */
    align-self:flex-start;
  }
}

/* SIN PLACA DETRÁS, por decisión del cliente (21/08/2026): va con su
   transparencia, igual que los otros tres logotipos de la franja.

   Lo que cuesta, para que quede constancia: el logo en colores está
   diseñado para fondo claro y sobre el azul petróleo de esta franja
   el rojo de "Quetralmahue" queda en 2.48:1 —contra 5.52:1 sobre
   blanco—, así que se ve apagado. El ámbar de "CIRCO SOCIAL" sí gana
   sobre el azul (6.59:1).

   Un logotipo no tiene mínimo de contraste exigible: WCAG 1.4.11
   exceptúa expresamente las marcas. Y si algún día se quiere que
   resalte en esta franja, la respuesta no es retocar el rojo a mano
   —eso nunca— sino usar la versión blanca, que ya existe en
   img/logo-blanco.png y da 13.7:1. */

/* =============================================================
   6. FIRMA DE CIERRE
   -------------------------------------------------------------
   El lettering de marcador, grande, cerrando la página igual que
   cierra el afiche: nombre del festival y, justo debajo, quién lo
   financia. Es decoración pura —el nombre ya está en el <h1>—, así
   que va con aria-hidden y sin texto alternativo.
   ============================================================= */
.e-firma{
  position:relative; overflow:hidden; text-align:center;
  background:var(--f-carmin);
  padding-block:clamp(2.2rem,6vw,4rem);
  border-top:var(--e-marco) solid var(--f-claro);
  border-bottom:var(--e-marco) solid var(--f-claro);
}
/* margin-inline:auto y no text-align:center: estilos.css declara
   img{display:block} para todo el sitio, así que la imagen no es
   inline y el centrado por texto no la mueve. */
.e-firma img{
  /* Deliberadamente MODESTA: el mismo lettering ya es el titular del
     telón, así que aquí funciona como remate y no como segundo
     titular. De paso resuelve la nitidez: el archivo mide 640px de
     ancho, y mostrándolo a 430 queda a 1,5x, que en pantalla retina
     se ve limpio. Agrandarla obligaría a un segundo archivo. */
  width:min(430px, 64%); height:auto; margin-inline:auto;
  position:relative; z-index:1;
}
.e-firma::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--e-grano); background-size:180px 180px;
  opacity:.15; mix-blend-mode:overlay;
}

/* La línea de datos duros bajo el texto de la programación: más
   chica y en mayúsculas, para que se lea como ficha y no compita
   con el párrafo de la organización que va encima. */
/* ⚠️ El selector lleva el contenedor delante a propósito.
   estilos.css declara .seccion__intro p, que con una clase y un
   elemento gana a una clase sola: sin esto la regla no se aplicaba
   —medido: seguía en 17.28px y en tinta suave—. */
.seccion__intro .seccion__intro-datos{
  margin:.6rem 0 0;
  font-size:.82rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--f-carmin);
}

/* =============================================================
   7. MENOS MOVIMIENTO
   -------------------------------------------------------------
   Quien lo pide en su sistema no ve ninguna animación. El spot de
   fondo tampoco se carga: eso lo decide js/festival.js antes de
   pedir el archivo, así que no se gasta ni un byte.
   ============================================================= */
@media (prefers-reduced-motion:reduce){
  .e-telon__baja svg{ animation:none; }
  .lugar{ transition:none; }
}


/* =============================================================
   11. EL VISOR DE AFICHES
   =============================================================
   Cliente, 22/08/2026: al tocar un afiche del carrusel se abre
   encima, grande y completo.

   Es el <dialog> del navegador. Lo que se estiliza aquí es solo la
   presentación: el comportamiento —Escape, foco atrapado dentro,
   resto de la página fuera del tabulador, foco de vuelta al
   cerrar— lo trae el elemento hecho, no está escrito en ninguna
   parte. Ver el comentario del HTML, al final del archivo.

   CÓMO SE CIERRA TOCANDO EL AIRE, que es el único truco de esta
   sección: .visor__caja cubre toda la ventana pero con
   pointer-events:none, y solo el afiche y su pie lo recuperan.
   Así un clic en cualquier parte vacía llega al <dialog> mismo, y
   el JS cierra cuando el clic viene del <dialog>. Sin eso habría
   que medir coordenadas a mano.
   ============================================================= */
.visor{
  width:100%; height:100%; max-width:100vw; max-height:100vh;
  padding:0; border:0; background:transparent; overflow:hidden;
}
/* El fondo. Azul noche de la gráfica y no negro: es el color que ya
   usan las franjas oscuras del festival. */
.visor::backdrop{
  background:rgba(13,48,72,.92);
  -webkit-backdrop-filter:blur(3px);
          backdrop-filter:blur(3px);
}

.visor__caja{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:clamp(.8rem,2vw,1.2rem);
  padding:clamp(1rem,4vw,2.5rem);
  pointer-events:none;          /* ver la nota de arriba */
}
.visor__afiche, .visor__pie{ pointer-events:auto; }

.visor__afiche{
  /* SE ENCOGE HASTA LO QUE SOBRE, y no hasta un alto inventado.
     La caja es una columna de alto fijo —toda la ventana— con el
     afiche y su pie dentro. Con flex-shrink y min-height:0 el
     afiche cede exactamente el alto que necesita el pie, y ni un
     píxel más: en una pantalla de 900 se ve a 740 de alto en vez
     de los 684 que daba un 76svh fijo. La proporción la mantiene
     el navegador, porque el ancho va en auto.
     ⚠️ min-height:0 no es adorno: sin él un elemento flex no baja
     de su tamaño natural —1400px de alto— y el pie desaparece
     fuera de la ventana. */
  flex:0 1 auto; min-height:0;
  max-width:min(100%, 1000px); max-height:100%;
  width:auto; height:auto; object-fit:contain;
  border-radius:12px; box-shadow:0 24px 60px rgba(0,0,0,.55);
  background:var(--f-carmin);
}

/* El pie repite lo que dice la tarjeta: no hay texto nuevo aquí, lo
   arma el JS leyendo la propia tarjeta. Así no hay dos sitios que
   puedan contradecirse.
   Hueso sobre el azul noche: 12,1:1. La píldora existe porque el
   pie puede quedar sobre un borde claro del afiche. */
.visor__pie{
  margin:0; text-align:center; color:var(--f-hueso);
  font-weight:700; font-size:clamp(.9rem,2vw,1.05rem);
  background:rgba(13,48,72,.75); padding:.5rem 1.1rem;
  border-radius:var(--radio-cap);
  max-width:min(100%, 620px);
}

/* LOS TRES BOTONES. Mismo círculo que las flechas del carrusel, por
   lo mismo: el contraste no puede depender del afiche que haya
   debajo, que puede ser claro u oscuro. */
.visor__boton{
  position:absolute; z-index:2;
  width:48px; height:48px; border-radius:50%; padding:0;
  border:2px solid var(--f-carmin);
  background:var(--f-hueso); color:var(--f-carmin);
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  transition:transform .16s, background-color .16s;
}
.visor__boton svg{ width:24px; height:24px; fill:currentColor; }
.visor__boton:hover{ background:var(--blanco); transform:scale(1.07); }
.visor__boton:focus-visible{
  outline:0;
  box-shadow:0 0 0 4px var(--f-hueso), 0 0 0 8px var(--tinta);
}
.visor__boton--cerrar{ top:clamp(.6rem,2vw,1.4rem); right:clamp(.6rem,2vw,1.4rem); }
.visor__boton--antes{ left:clamp(.6rem,2.5vw,2rem); top:calc(50% - 24px); }
.visor__boton--despues{ right:clamp(.6rem,2.5vw,2rem); top:calc(50% - 24px); }
.visor__boton--antes svg{ transform:rotate(180deg); }

/* En celular las flechas bajan: a los lados taparían el afiche, que
   ahí ocupa casi todo el ancho. Por eso el afiche cede alto. */
@media (max-width:620px){
  .visor__boton--antes,
  .visor__boton--despues{
    top:auto; bottom:calc(.9rem + env(safe-area-inset-bottom, 0px));
  }
  .visor__boton--antes{ left:1.5rem; }
  .visor__boton--despues{ right:1.5rem; }
  .visor__caja{ padding-bottom:5rem; }
}

@media (prefers-reduced-motion:reduce){
  .visor__boton, .carrusel__flecha,
  .edicion__lupa-icono, .ficha__lupa-icono{ transition:none; }
  .visor__boton:hover, .carrusel__flecha:hover,
  .edicion__lupa:hover .edicion__lupa-icono,
  .ficha__foto-lupa:hover .ficha__lupa-icono{ transform:none; }
}


/* =============================================================
   12. FICHA DE ESPECTÁCULO
   =============================================================
   Cliente, 26 de agosto de 2026: los detalles de los espectáculos
   van llegando de a poco y hay que poder mostrarlos.

   ES UN <details> DEL NAVEGADOR, sin una línea de JavaScript.
   Abrir y cerrar, el foco, el teclado y el anuncio del estado
   ("contraído" / "expandido") vienen hechos. Además el texto está
   en la página aunque no se vea, así que lo lee Google y lo
   encuentra la búsqueda del navegador (⌘F).

   POR QUÉ CERRADA Y NO ABIERTA. La parrilla son 9 actividades en 6
   días y se mira de un vistazo para decidir a cuál ir. Con las
   sinopsis desplegadas, cada día ocuparía tres pantallas y esa
   lectura rápida se pierde. La ficha está para quien ya eligió.

   Una actividad sin ficha se ve igual que antes: este bloque no
   deja hueco ni botón donde no hay <details>.
   ============================================================= */
.ficha{ margin-top:.9rem; }

/* EL BOTÓN. El triángulo que pone el navegador se quita y se
   reemplaza por la flecha de la gráfica, que gira al abrir. */
.ficha__abrir{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1.1rem; min-height:48px;    /* área táctil */
  border:2px solid var(--f-carmin); border-radius:var(--radio-cap);
  color:var(--f-carmin); background:transparent;
  font-size:.78rem; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase;
  cursor:pointer; list-style:none;
  transition:background-color .16s, color .16s;
}
.ficha__abrir::-webkit-details-marker{ display:none; }
.ficha__abrir::marker{ content:""; }
/* Carmín sobre hueso da 6.9:1; invertido, hueso sobre carmín, 6.7:1.
   Los dos pasan AA de sobra, así que el hover puede invertirse sin
   mirar nada más. */
.ficha__abrir:hover{ background:var(--f-carmin); color:var(--f-hueso); }
.ficha__abrir:focus-visible{ outline:3px solid var(--tinta); outline-offset:3px; }

.ficha__flecha{
  width:16px; height:16px; fill:currentColor; flex:0 0 auto;
  transform:rotate(90deg);            /* cerrada: apunta hacia abajo */
  transition:transform .18s;
}
.ficha[open] .ficha__flecha{ transform:rotate(-90deg); }

/* EL CUERPO. Dos columnas desde 760px: las fotos a la izquierda y
   el texto a la derecha. El borde de la izquierda lo ata visualmente
   a la actividad de la que cuelga, igual que la llave oliva ata las
   actividades a su día. */
.ficha__cuerpo{
  margin-top:1rem; padding:1.2rem 0 .4rem 1.2rem;
  border-left:3px solid var(--f-oliva);
  display:grid; gap:clamp(1rem,2.5vw,1.8rem);
}
@media (min-width:760px){
  .ficha__cuerpo{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); }
}

/* LAS FOTOS. La primera ocupa las dos columnas; las demás van
   debajo, una al lado de otra. Todas con las esquinas desparejas de
   la sección 5, para que no sean rectángulos.
   Se recortan con object-fit y con un alto propio: llegan en
   proporciones distintas (3:2 y cuadradas) y sin esto la fila de
   abajo quedaría descuadrada. */
/* Tres columnas: la grande se pone encima ocupando las tres y las
   otras tres quedan debajo llenando la fila justa. Con dos columnas
   la cuarta foto dejaba media fila vacía. */
.ficha__fotos{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:.6rem;
  align-content:start;
}
/* TRES COLUMNAS ES LO NORMAL, porque lo normal es una foto grande y
   tres chicas. Cuando no son tres, la fila se ajusta al número: con
   dos chicas en una retícula de tres quedaba una celda vacía a la
   derecha, y con cuatro quedaba una sola colgando en la fila de
   abajo. Las dos se veían como un error de maquetación.
   La grande no se entera: ocupa de 1 a -1, sean las que sean. */
.ficha__fotos--dos{    grid-template-columns:repeat(2, 1fr); }
.ficha__fotos--cuatro{ grid-template-columns:repeat(4, 1fr); }

/* En celular, cuatro columnas dejan miniaturas de 68 px: demasiado
   chicas para saber qué hay dentro. Pasan a dos filas de dos. */
@media (max-width:560px){
  .ficha__fotos--cuatro{ grid-template-columns:repeat(2, 1fr); }
}
/* CADA FOTO SE ABRE GRANDE (cliente, 26/08/2026). El enlace es la
   celda de la retícula, no la imagen: por eso el modificador
   --grande está repetido en los dos, uno para ocupar las tres
   columnas y otro para la proporción y las esquinas.
   Lo abre el mismo visor de los afiches: js/festival.js, cuarto
   bloque. El grupo se marca con data-visor en el HTML. */
.ficha__foto-lupa{
  display:block; position:relative; cursor:zoom-in;
  border-radius:18px 7px 18px 7px; /* para que el foco siga la forma */
}
.ficha__foto-lupa--grande{ grid-column:1 / -1; border-radius:24px 9px 24px 9px; }
.ficha__foto-lupa:focus-visible{ outline:4px solid var(--tinta); outline-offset:3px; }


/* ⚠️ LAS FOTOS PUEDEN VENIR EN CUALQUIER ORIENTACIÓN y esto es lo
   que hace que da igual. Las de "Todo con Cuerda" llegaron
   horizontales; las de la Banda La Inquieta, verticales de estudio.

   LA GRANDE NO LLEVA PROPORCIÓN FIJA: solo ancho, y el alto lo
   saca el navegador de los atributos width y height del <img>. Con
   un aspect-ratio de 3/2 impuesto, una foto vertical de cuerpo
   entero se recortaba por la cabeza o por los pies. Por eso esos
   dos atributos tienen que ser los reales.

   LAS CHICAS VAN CUADRADAS. Necesitan una forma fija para alinearse
   en fila, y el cuadrado es el recorte que menos daño hace en las
   dos orientaciones: a una horizontal 3:2 le quita un tercio del
   ancho, a una vertical 4:5 un quinto del alto. Y son miniaturas:
   su trabajo es avisar de que hay otra foto, no contarla.

   ⚠️ Y LA GRANDE NO LLEVA NINGUNA REGLA DE PROPORCIÓN, ni siquiera
   una que la anule. El navegador reserva el hueco de una foto que
   todavía no bajó usando sus atributos width y height, pero solo
   mientras nadie le escriba un aspect-ratio propio: con
   "aspect-ratio:auto" el hueco quedaba en cero y la página daba un
   salto al terminar de cargar. Por eso el cuadrado se le pone a las
   chicas y no se le quita a la grande. */
.ficha__foto{
  width:100%; height:auto;
  border-radius:18px 7px 18px 7px; background:var(--f-carmin);
}
.ficha__foto:not(.ficha__foto--grande){
  aspect-ratio:1; object-fit:cover;
}
.ficha__foto--grande{
  border-radius:24px 9px 24px 9px;
}

/* EL CRÉDITO DE LAS FOTOGRAFÍAS. Va debajo de la fila, en cuerpo
   chico: es una atribución, no un texto de lectura. Aparece solo
   cuando el cliente dice de quién son las fotos. */
.ficha__credito-foto{
  margin:.7rem 0 0; font-size:.78rem; color:var(--tinta-suave);
}
.ficha__credito-foto a{ color:var(--f-carmin); font-weight:700; }

.ficha__texto p{ margin:0 0 .8rem; font-size:1rem; }
.ficha__texto p:last-child{ margin-bottom:0; }

/* Los rótulos de dentro de la ficha. No son títulos de verdad —no
   llevan <h4>— porque son etiquetas de dos palabras dentro de una
   ficha, y meterlos en el índice de encabezados de la página no
   ayudaría a nadie a navegarla. */
/* ⚠️ EL SELECTOR LLEVA EL CONTENEDOR DELANTE A PROPÓSITO, y no es
   manía: la regla de arriba es .ficha__texto p, que con una clase y
   un elemento gana a una clase sola. Sin el contenedor, el rótulo se
   quedaba en 16px —medido— en vez de los 11,5 que le tocan. Es la
   misma trampa que ya había pasado con .seccion__intro-datos. */
.ficha__texto .ficha__rotulo{
  margin:1.2rem 0 .5rem;
  font-size:.72rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase;
  /* 5,7:1 sobre blanco: es el oliva que sí sirve de texto. El otro,
     el #A1991E de relleno, daría 2,6:1 y aquí no se puede usar. */
  color:var(--f-oliva-osc);
}

/* Las disciplinas, en píldoras. Es una lista de verdad: son seis
   cosas distintas y así se anuncian como seis. */
.ficha__tecnicas{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.4rem;
}
.ficha__tecnicas li{
  padding:.28rem .8rem; border-radius:var(--radio-cap);
  background:var(--f-claro); color:var(--tinta);
  font-size:.82rem; font-weight:700;
}

.ficha__texto .ficha__elenco{ font-size:.95rem; color:var(--tinta-suave); }

/* LAS CUENTAS DE LAS INTEGRANTES. En píldoras y no en un párrafo
   con puntos medios: son cuatro enlaces distintos y así cada uno
   tiene su propia área para el dedo, sin que haya que apuntar entre
   dos separadores. */
.ficha__cuentas{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.4rem;
}
.ficha__cuentas a{
  display:inline-flex; align-items:center; min-height:38px;
  padding:.25rem .8rem; border-radius:var(--radio-cap);
  background:var(--f-claro); color:var(--f-carmin);
  font-size:.82rem; font-weight:700; text-decoration:none;
}
/* Carmín sobre el greige de la gráfica: 5,3:1. Pasa AA, y al pasar
   por encima se subraya, que es lo que dice que es un enlace sin
   depender del color. */
.ficha__cuentas a:hover{ text-decoration:underline; }
.ficha__cuentas a:focus-visible{ outline:3px solid var(--tinta); outline-offset:2px; }

.ficha__redes a{
  display:inline-flex; align-items:center; gap:.45rem;
  min-height:44px; font-weight:800; color:var(--f-carmin);
}
/* ⚠️ SIN fill AQUÍ. El icono de Instagram está dibujado con trazo, y
   sus atributos viven en el <symbol> del HTML; una declaración de
   fill en el CSS ganaría a esos atributos y rellenaría el cuadrado
   entero. El tamaño sí se pone aquí, que no compite con nada. */
.ficha__redes a svg{ width:20px; height:20px; flex:0 0 auto; }

/* En celular las fotos chicas se quedan en dos columnas: a una sola
   ocuparían media pantalla cada una para ser ilustraciones. */
@media (max-width:560px){
  .ficha__cuerpo{ padding-left:.9rem; }
  .ficha__abrir{ font-size:.72rem; padding:.6rem .9rem; }
  .ficha__texto p{ font-size:.98rem; }
}

@media (prefers-reduced-motion:reduce){
  .ficha__flecha, .ficha__abrir{ transition:none; }
}


/* =============================================================
   13. COMPARTIR
   =============================================================
   Dos botones iguales: el del espectáculo, dentro de su ficha, y el
   de la página entera, al final de la parrilla.

   Los pone visibles js/festival.js —vienen con hidden desde el
   HTML—, así que este CSS solo describe cómo se ven cuando el
   navegador sabe compartir o copiar.

   Mismo aspecto que el botón "Ver la ficha": píldora de contorno
   carmín sobre fondo claro. Es la forma que ya tiene la página para
   las acciones secundarias, y esta lo es.
   ============================================================= */
.compartir{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem 1.05rem; min-height:44px;
  border:2px solid var(--f-carmin); border-radius:var(--radio-cap);
  background:transparent; color:var(--f-carmin);
  font-family:inherit;               /* los <button> no la heredan solos */
  font-size:.78rem; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase;
  cursor:pointer;
  transition:background-color .16s, color .16s;
}
.compartir svg{ width:17px; height:17px; fill:currentColor; flex:0 0 auto; }
/* Carmín sobre blanco 7,6:1; invertido, hueso sobre carmín 6,7:1.
   Los dos pasan de sobra, así que el hover puede darse la vuelta. */
.compartir:hover{ background:var(--f-carmin); color:var(--f-hueso); }
.compartir:focus-visible{ outline:3px solid var(--tinta); outline-offset:3px; }

/* El de la página va algo mayor: es el único de su sección y no
   cuelga de nada, mientras que el del espectáculo acompaña al
   enlace de Instagram. */
.compartir--grande{
  min-height:48px; padding:.75rem 1.5rem; font-size:.84rem;
}
.compartir--grande svg{ width:19px; height:19px; }

.compartir-fila{
  display:flex; flex-wrap:wrap; align-items:center; gap:.8rem;
  margin:clamp(2rem,5vw,3rem) 0 0;
  padding-top:clamp(1.4rem,3vw,2rem);
  border-top:2px solid rgba(36,24,19,.13);   /* la misma línea que separa los días */
}

/* El aviso de "enlace copiado". Lo crea el JS pegado a su botón.
   ⚠️ NO ES SOLO COLOR: dice lo que pasó con palabras, y va en
   role="status" para que lo anuncien también los lectores de
   pantalla. Oliva oscuro sobre blanco, 5,7:1. */
.compartir__aviso{
  font-size:.8rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--f-oliva-osc);
}
.compartir__aviso:empty{ display:none; }

/* Dentro de la ficha, el enlace de Instagram y el botón comparten
   fila y se bajan uno debajo del otro cuando no caben. */
.ficha__redes{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.6rem 1.2rem;
}

@media (prefers-reduced-motion:reduce){
  .compartir{ transition:none; }
}


/* =============================================================
   14. VARIETÉ: LA LISTA DE NÚMEROS
   =============================================================
   Una varieté no es un espectáculo: son varios artistas con su
   propio número que se juntan en una función. Su ficha no lleva
   UNA sinopsis sino una lista, y cada número trae lo suyo: nombre,
   quién lo hace, sinopsis, foto y redes.

   Es el segundo modelo de ficha, con el mismo <details> y el mismo
   botón que el de un montaje solo. Solo cambia lo de dentro.

   ⚠️ VA EN <ol> Y NO EN <ul>, y la numeración la pone el navegador
   con un contador de CSS. Dos razones: el orden importa —es el
   orden de la función— y así nadie tiene que renumerar a mano
   cuando llegue un número nuevo o cambie el orden.
   ============================================================= */

/* La ficha de varieté no tiene columna de fotos: el cuerpo va a un
   ancho, no a dos. */
.ficha__cuerpo--lista{ grid-template-columns:minmax(0,1fr); }
@media (min-width:760px){
  .ficha__cuerpo--lista{ grid-template-columns:minmax(0,1fr); }
}

.numeros{
  list-style:none; margin:1.4rem 0 0; padding:0;
  counter-reset:numero;
  display:grid; gap:1.6rem;
}
.numero{
  counter-increment:numero;
  display:grid; gap:.9rem 1.2rem; align-items:start;
}
/* Los números se separan con la misma línea de puntos que separa
   las actividades de un día: es la misma idea, cosas de la misma
   clase una detrás de otra. */
.numero + .numero{
  border-top:2px dotted rgba(36,24,19,.2); padding-top:1.6rem;
}
@media (min-width:620px){
  .numero{ grid-template-columns:minmax(0,200px) minmax(0,1fr); }
}

/* La foto, con las esquinas desparejas de la sección 5 y abriendo
   en el visor como todas las demás. */
.numero__foto{
  display:block; position:relative; cursor:zoom-in;
  border-radius:20px 8px 20px 8px;
}
/* ⚠️ LA FOTO DEL NÚMERO TAMPOCO LLEVA PROPORCIÓN FIJA, por lo mismo
   que la grande de la ficha de montaje: el alto lo saca el navegador
   de los atributos width y height del <img>, que por eso tienen que
   ser los reales. La de Sucucho llegó horizontal y la de Urbana
   vertical de cuerpo entero, colgada del pelo: con un 3/2 impuesto
   se recortaba justo por donde está el número.
   Aquí no hace falta recortar ninguna: cada número es una fila
   aparte de la retícula, así que una foto más alta solo hace su
   propia fila más alta y no descoloca a las demás. */
.numero__foto img{
  width:100%; height:auto;
  border-radius:20px 8px 20px 8px; background:var(--f-carmin);
}
.numero__foto:focus-visible{ outline:4px solid var(--tinta); outline-offset:3px; }

/* EL NÚMERO DE ORDEN. Va inclinado como los números de día de la
   parrilla, que es de donde viene el gesto: la letra de la lámina
   está dibujada en diagonal. En carmín, 7,6:1 sobre blanco. */
.numero__titulo{
  display:flex; align-items:baseline; gap:.6rem;
  margin:0 0 .15rem;
  font-size:clamp(1rem,2.2vw,1.15rem); font-weight:900;
  text-transform:uppercase; letter-spacing:-.01em; line-height:1.15;
  color:var(--tinta);
}
.numero__titulo::before{
  content:counter(numero);
  flex:0 0 auto;
  font-size:1.5em; font-weight:900; line-height:1;
  color:var(--f-carmin);
  transform:skewX(-8deg); transform-origin:left bottom;
}

/* ⚠️ LOS TRES SELECTORES LLEVAN CONTENEDORES DELANTE, y no es
   manía: .ficha__texto p es una clase y un elemento, y le gana a
   cualquier clase suelta. Sin esto la sinopsis del número salía con
   el cuerpo de los párrafos de la ficha y el nombre del artista con
   el margen equivocado. Tres clases ganan a dos clases más un
   elemento, que es lo que hace falta aquí. */
.numero .numero__texto p{ margin:0 0 .6rem; font-size:.98rem; }
.numero .numero__texto p:last-child{ margin-bottom:0; }
.numero .numero__texto .numero__artista{
  margin:0 0 .5rem;
  font-size:.9rem; font-weight:700; color:var(--tinta-suave);
}

/* En celular la foto va arriba y el texto debajo. Se le pone un tope
   de alto para que no se coma media pantalla antes de llegar al
   texto, y ahí el ancho pasa a ser automático: si se dejara en 100 %
   con un tope de alto, una foto vertical saldría achatada. Con los
   dos automáticos el navegador la encoge respetando su proporción,
   así que una apaisada sigue ocupando el ancho completo y una
   vertical queda más angosta y centrada. */
@media (max-width:619px){
  .numero__foto img{
    width:auto; max-width:100%; max-height:280px;
    margin-inline:auto; /* la imagen es de bloque: no la centra text-align */
  }
}


/* =============================================================
   15. INSCRIPCIÓN AL TALLER DE CLOWN   (31 de agosto de 2026)
   =============================================================
   Cliente: hay que poder inscribirse al taller del viernes 25, y el
   aviso tiene que verse. Son tres piezas: los dos avisos —uno en el
   telón, otro en la parrilla— y el formulario.

   No se reaprovecharon los estilos del formulario viejo que duermen
   en css/estilos.css, sección 8: aquellos son de la paleta
   institucional, con el rojo y el ámbar, y esta página vive en la
   del festival. Lo que sí se copió es su estructura, que estaba bien
   resuelta: el rótulo encima, la ayuda dentro del <label>, el error
   debajo del campo y el resumen arriba del todo.
   ============================================================= */

/* -------------------------------------------------------------
   EL AVISO DEL TELÓN
   -------------------------------------------------------------
   ⚠️ CONTRASTE MEDIDO. El hueso #F4F0F1 sobre el carmín #A21C42 da
   7,1:1, de sobra para AA. No se usa --f-claro aquí por lo mismo
   que en el resto del telón: detrás hay una fotografía y un video,
   y el claro se queda en 4,25:1 contra el fotograma más claro.

   La píldora lleva fondo carmín OPACO, no translúcido, justo por
   eso: es lo único de este bloque que no depende de lo que haya
   detrás. */
.e-telon__aviso{
  margin:clamp(.45rem,1.6vw,.8rem) 0 0;
  display:flex; justify-content:center;
}
/* ⚠️ AQUÍ SE MIDE EN PÍXELES, NO EN PALABRAS.
   Con el texto largo que pidió el cliente el 31/08/2026 la píldora
   mide 344px: cabe en una línea hasta los 375 de un celular normal,
   y por debajo de eso se parte en dos.
   Se deja que se parta, y no se fuerza una línea, porque el telón
   tiene overflow oculto: forzada, en un celular de 320 el texto se
   cortaría por la mitad y no habría manera de leerlo. Partido en dos
   crece 20px, y en esas pantallas el botón de abajo ya quedaba fuera
   del primer pantallazo de todos modos. */
/* ⚠️ VERDE VIVO, DE PRESTADO Y CON FECHA DE CADUCIDAD. Ver el
   comentario de --f-verde, arriba: no es un color de la marca y se
   va con el aviso cuando se llenen los cupos.
   El texto va OSCURO —7,49:1—; en claro daría 2,98:1.
   El borde hueso es lo que lo separa del carmín del telón, del que
   solo le distinguen 3,3:1. */
.e-telon__aviso a{
  display:inline-flex; align-items:center; gap:.5rem;
  min-height:44px; padding:.35rem 1.05rem;
  border-radius:var(--radio-cap);
  background:var(--f-verde); color:var(--tinta);
  border:2px solid var(--f-hueso);
  font-size:clamp(.72rem,1.9vw,.9rem); font-weight:900;
  letter-spacing:.02em; text-transform:uppercase; text-decoration:none;
  text-align:center; line-height:1.25;
}
/* Un punto más oscuro al pasar por encima: 7,12:1 con el hueso.
   No hay token para esta sombra porque no es un color de marca,
   es el mismo oliva un paso más abajo. */
.e-telon__aviso a:hover{ background:var(--f-verde-osc); }
.e-telon__aviso a:focus-visible{
  outline:4px solid var(--f-hueso); outline-offset:3px;
}

/* El puntito que late. Es lo único que se mueve en el telón además
   del video, y por eso late despacio: un parpadeo rápido en la
   primera pantalla es una molestia, no un aviso. */
.e-telon__aviso-pulso{
  width:9px; height:9px; flex:0 0 auto;
  border-radius:50%; background:var(--tinta);
  animation:pulso-inscripcion 2.4s ease-in-out infinite;
}
@keyframes pulso-inscripcion{
  0%,100%{ opacity:1;   transform:scale(1); }
  50%    { opacity:.45; transform:scale(.72); }
}
/* Quien pidió menos movimiento no lo pide a medias: el punto se
   queda quieto y sigue viéndose igual, porque nunca fue el
   movimiento lo que lo hacía legible. */
@media (prefers-reduced-motion:reduce){
  .e-telon__aviso-pulso{ animation:none; }
}


/* -------------------------------------------------------------
   EL AVISO DENTRO DE LA PARRILLA
   -------------------------------------------------------------
   Ocupa el sitio donde antes decía "Pronto más información", y se
   parece a propósito: misma altura, mismo redondeo. Lo que cambia
   es que este se puede pulsar, así que lleva subrayado —el color
   por sí solo no puede ser la única señal— y área de 44 px. */
.acto__inscribirse{ margin:.7rem 0 0; }
/* El mismo verde que el aviso del telón: son el mismo aviso dicho
   dos veces, y si fueran de colores distintos parecerían dos cosas. */
.acto__inscribirse a{
  display:inline-flex; align-items:center; gap:.5rem;
  min-height:44px; padding:.4rem 1rem;
  border-radius:var(--radio-cap);
  background:var(--f-verde); color:var(--tinta);
  font-size:.85rem; font-weight:800;
  text-decoration:underline; text-underline-offset:3px;
}
.acto__inscribirse a:hover{ background:var(--f-verde-osc); }
.acto__inscribirse a:focus-visible{
  outline:3px solid var(--tinta); outline-offset:2px;
}
.acto__inscribirse svg{
  width:15px; height:15px; flex:0 0 auto; fill:currentColor;
}


/* -------------------------------------------------------------
   LA SECCIÓN Y LA TARJETA
   ------------------------------------------------------------- */
.fest-inscribir{
  position:relative; isolation:isolate;
  background:var(--f-hueso);
}

/* LA FOTOGRAFÍA DE FONDO. El porqué de que sea un elemento aparte y
   no el background de la sección está escrito en el HTML, encima del
   div; aquí van los números.

   ⚠️ 14 % DE OPACIDAD, Y ESTÁ MEDIDO. En las zonas casi negras de la
   foto —el techo de la sala— el fondo efectivo baja a #D3D0D1, y
   sobre él:
     tinta #241813 ......... 11,29:1  ✓
     tinta suave #5C4A40 .... 5,47:1  ✓
     carmín #A21C42 ......... 4,93:1  ✓
   Al 20 % el carmín de los títulos ya cae a 4,27:1 y deja de pasar.
   El margen es de seis puntos de opacidad, no más: si se cambia la
   fotografía por otra más oscura, hay que volver a medir.

   El desenfoque no es adorno: nítida al 14 % la foto se lee como
   suciedad en la pantalla; desenfocada se lee como textura. */
.fest-inscribir__fondo{
  position:absolute; inset:0; z-index:-1;
  background:url("../img/festival/inscripcion-fondo.jpg") center/cover no-repeat;
  opacity:.14;
  filter:blur(3px);
  /* El desenfoque saca color por los bordes: se recorta. */
  clip-path:inset(0);
}

/* -------------------------------------------------------------
   UN BLOQUE POR TALLER
   -------------------------------------------------------------
   Una columna hasta que hay sitio de sobra. No se ponen los dos
   talleres en paralelo desde el principio porque no son
   comparables: uno tiene un formulario de seis campos y el otro
   una línea que dice "pronto". Lado a lado, el segundo parecería
   un error de maquetación. */
.talleres-ins{
  display:grid; gap:1.6rem;
  max-width:780px; margin-inline:auto;
}

.taller-ins__nombre{
  margin:0 0 .15rem;
  font-size:clamp(1.25rem,3.2vw,1.6rem); line-height:1.1;
  font-weight:900; text-transform:uppercase; letter-spacing:-.015em;
  color:var(--f-carmin);
}
.taller-ins__cia{
  margin:0 0 .7rem; font-size:.98rem; color:var(--tinta-suave);
}

/* Los datos en píldoras y no en una frase: son cuatro datos sueltos
   —día, hora, lugar, edad— y en una frase hay que leerla entera para
   encontrar el que se busca. */
.taller-ins__datos{
  list-style:none; margin:0 0 1.1rem; padding:0;
  display:flex; flex-wrap:wrap; gap:.4rem;
}
.taller-ins__datos li{
  padding:.3rem .85rem; border-radius:var(--radio-cap);
  background:var(--blanco); border:1px solid var(--f-claro);
  font-size:.85rem; font-weight:700; color:var(--tinta);
}

/* El taller que todavía no tiene formulario. Se ve que está y se ve
   que no se puede hacer nada aún: por eso el fondo es más apagado y
   el aviso no parece un botón. */
.taller-ins--pronto{
  padding:1.3rem 1.4rem;
  background:rgba(255,255,255,.72);
  border:2px dashed var(--f-claro);
  border-radius:26px 10px 26px 10px;
}
.taller-ins__aviso{
  display:inline-flex; align-items:center; gap:.5rem;
  margin:0; font-size:.92rem; font-weight:800;
  color:var(--f-oliva-osc);
}
.taller-ins__aviso svg{ width:16px; height:16px; flex:0 0 auto; fill:currentColor; }

/* -------------------------------------------------------------
   QUIÉNES DICTAN EL TALLER
   -------------------------------------------------------------
   Los dos instructores del Taller de Circo, sin fotografía todavía:
   nombre y cuenta, nada más. Cuando lleguen los retratos esto se
   reemplaza por .ficha__equipo, que es el molde con foto.

   Contraste medido sobre el fondo de esta tarjeta —blanco al 72 %
   encima de la sección, que en su punto peor da #F3F2F2—:
     · el carmín de la cuenta ......... 6,8:1  ✔ AA
     · la tinta del nombre ........... 15,6:1  ✔
   Si se sube la opacidad de la foto de fondo hay que rehacer estas
   dos cuentas, igual que en el resto de la sección. */
/* -------------------------------------------------------------
   EL SEGUNDO DÍA DE UN ENCUENTRO
   -------------------------------------------------------------
   El Encuentro de Arpillera es el mismo el viernes 11 y el sábado
   12. La ficha vive en el viernes; el sábado lleva este enlace al
   ancla. Área táctil de 48px y subrayado al pasar: tiene que
   distinguirse de .acto__nota, que no se puede pulsar. */
.acto__mismo{ margin:.6rem 0 0; }
.acto__mismo a{
  display:inline-flex; align-items:center; gap:.45rem;
  min-height:48px; padding:.2rem 0;
  /* 7,6:1 sobre el blanco de la tarjeta. */
  color:var(--f-carmin);
  font-size:.88rem; font-weight:800; text-decoration:none;
}
.acto__mismo a:hover{ text-decoration:underline; }
.acto__mismo a:focus-visible{ outline:3px solid var(--tinta); outline-offset:2px; }
/* La flecha del icono apunta hacia arriba; aquí lleva hacia abajo,
   al ancla del viernes, que en la página está MÁS ARRIBA. Se deja
   apuntando hacia arriba a propósito. */
.acto__mismo svg{ width:14px; height:14px; flex:0 0 auto; fill:currentColor; }

.taller-ins__rotulo{
  margin:0 0 .55rem;
  font-size:.72rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase;
  /* El mismo oliva oscuro de los rótulos de las fichas. El #A1991E
     de relleno aquí daría 2,6:1 y no se puede usar como texto. */
  color:var(--f-oliva-osc);
}

.taller-ins__dictan{
  list-style:none; margin:0 0 1.1rem; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem .9rem;
}
/* Cada instructor en su columna: el nombre y debajo la cuenta. En
   una sola línea el @ se pega al apellido y se lee como parte de
   él. */
.taller-ins__dictan li{
  display:flex; flex-direction:column; gap:.1rem;
  min-width:11rem; flex:1 1 11rem;
}
.dictan__nombre{
  font-size:.92rem; font-weight:800; line-height:1.25; color:var(--tinta);
}
/* Área táctil de 44px de alto aunque el texto sea chico: es un
   enlace que se pulsa con el dedo. */
.dictan__cuenta a{
  display:inline-flex; align-items:center; gap:.35rem;
  min-height:44px;
  font-size:.8rem; font-weight:800; color:var(--f-carmin);
  text-decoration:none; word-break:break-all;
}
.dictan__cuenta a:hover{ text-decoration:underline; }
.dictan__cuenta a:focus-visible{ outline:3px solid var(--tinta); outline-offset:2px; }
.dictan__cuenta svg{ width:16px; height:16px; flex:0 0 auto; fill:currentColor; }

/* -------------------------------------------------------------
   LA FILA DE FOTOS DEL TALLER
   -------------------------------------------------------------
   Tres, del mismo alto, encima del formulario. Van antes y no
   después porque son lo que convence de rellenarlo. */
.ins__fotos{
  list-style:none; margin:0 0 1.2rem; padding:0;
  display:grid; gap:.6rem;
  grid-template-columns:repeat(3,1fr);
}
/* Cuatro fotos en vez de tres. En una sola fila, dentro de una
   tarjeta de ~550px, cada una quedaría en 128px: demasiado chica para
   ver de qué se trata. Dos por fila, dos filas. */
.ins__fotos--dos{    grid-template-columns:repeat(2, 1fr); }
.ins__fotos--cuatro{ grid-template-columns:repeat(2, 1fr); }
@media (min-width:1000px){
  .ins__fotos--cuatro{ grid-template-columns:repeat(4, 1fr); }
}
.ins__fotos a{
  display:block; position:relative; cursor:zoom-in;
  border-radius:18px 7px 18px 7px;
}
.ins__fotos img{
  width:100%; height:auto; aspect-ratio:3/2; object-fit:cover;
  display:block; border-radius:18px 7px 18px 7px;
  background:var(--f-claro);
}
.ins__fotos a:focus-visible{ outline:4px solid var(--tinta); outline-offset:3px; }

/* La lupa, más chica que la de las fichas porque estas fotos también
   lo son. Se esconde en celular: a 100px de ancho, tapa la foto. */
.ins__lupa{
  position:absolute; right:.4rem; bottom:.4rem;
  width:32px; height:32px; border-radius:50%;
  background:var(--f-hueso); color:var(--f-carmin);
  display:grid; place-items:center;
  box-shadow:0 3px 10px rgba(36,24,19,.35);
  transition:transform .16s;
}
.ins__lupa svg{ width:17px; height:17px; fill:currentColor; }
.ins__fotos a:hover .ins__lupa{ transform:scale(1.15); }
@media (max-width:560px){
  .ins__lupa{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .ins__lupa{ transition:none; }
}

.tarjeta-inscribir{
  max-width:780px; margin-inline:auto;
  background:var(--blanco);
  border:2px solid var(--f-claro);
  border-radius:26px 10px 26px 10px;
  padding:clamp(1.3rem,4vw,2.4rem);
}


/* -------------------------------------------------------------
   LOS CAMPOS
   -------------------------------------------------------------
   Dos columnas en pantalla ancha y una en celular. Los dos campos
   largos —nombre y motivación— cruzan las dos columnas: partir un
   nombre completo a media caja obliga a escribir mirando de reojo. */
.ins__campos{
  display:grid; gap:1.15rem;
  grid-template-columns:repeat(2,1fr);
}
.campo--ancho{ grid-column:1 / -1; }
@media (max-width:620px){
  .ins__campos{ grid-template-columns:1fr; }
}

.campo label{
  display:block; font-weight:800; margin-bottom:.35rem;
  font-size:.95rem; color:var(--tinta);
}
.campo .obligatorio{ color:var(--f-carmin); }
.campo .ayuda{
  display:block; font-weight:400; font-size:.84rem;
  color:var(--tinta-suave);
}

/* ⚠️ 50 px DE ALTO, NO 48. La norma pide 48 para lo que se toca con
   el dedo; en un campo de texto conviene un poco más, porque el
   dedo apunta a una línea de una letra y no a un botón entero.
   El fondo es hueso y no blanco: sobre la tarjeta blanca, un campo
   blanco con borde fino se lee como un renglón y no como una caja
   donde escribir. */
.campo input,
.campo select,
.campo textarea{
  width:100%; font:inherit; font-size:1rem; color:var(--tinta);
  padding:.8rem .9rem; min-height:50px;
  background:var(--f-hueso);
  border:2px solid var(--f-claro); border-radius:12px;
}
.campo textarea{ resize:vertical; min-height:110px; line-height:1.5; }

.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible{
  outline:3px solid var(--tinta); outline-offset:2px;
  border-color:var(--f-carmin);
}

/* La flecha del desplegable, dibujada con dos degradados. No es
   adorno: al quitarle el aspecto del sistema con appearance:none
   también se le quita la flecha, y un desplegable sin flecha no se
   distingue de un campo de texto. */
.campo select{
  appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--tinta) 50%),
                   linear-gradient(135deg,var(--tinta) 50%,transparent 50%);
  background-position:calc(100% - 20px) 23px, calc(100% - 14px) 23px;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

/* ⚠️ EL ERROR NO SE SEÑALA SOLO CON EL BORDE ROJO. Lleva además el
   texto de abajo, con su símbolo. Quien no distingue el rojo del
   gris tiene que poder arreglar su formulario igual.
   El carmín oscuro sobre el rosa pálido da 8,9:1. */
.campo input[aria-invalid="true"],
.campo select[aria-invalid="true"],
.campo textarea[aria-invalid="true"]{
  border-color:var(--f-carmin);
  background:#FBEEF1;
}

.error{
  display:none; margin:.35rem 0 0;
  color:var(--f-carmin-osc); font-size:.88rem; font-weight:700;
}
.error::before{ content:"⚠ "; }
.error.visible{ display:block; }

.resumen-errores{
  display:none; margin-bottom:1.4rem; padding:1rem 1.2rem;
  background:#FBEEF1; border:2px solid var(--f-carmin);
  border-radius:14px; color:var(--f-carmin-osc);
}
.resumen-errores.visible{ display:block; }
.resumen-errores:focus-visible{ outline:3px solid var(--tinta); outline-offset:3px; }
.resumen-errores h3{ font-size:1.02rem; margin:0 0 .3rem; }
.resumen-errores ul{ margin:0; padding-left:1.2rem; }
.resumen-errores a{ color:var(--f-carmin-osc); font-weight:800; }


/* -------------------------------------------------------------
   LA TRAMPA PARA ROBOTS
   -------------------------------------------------------------
   ⚠️ NO USAR display:none NI hidden. Los robots que rellenan
   formularios saltan los campos escondidos de esas dos maneras,
   porque son las dos que usa todo el mundo. Este se saca de la
   pantalla con posición absoluta: para el robot está ahí y es
   rellenable; para la persona no existe. El aria-hidden del HTML lo
   quita además de los lectores de pantalla. */
.ins__trampa{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

/* LA CASILLA DEL CONSENTIMIENTO
   -------------------------------------------------------------
   ⚠️ 24px Y NO LOS 13px DEL SISTEMA. Una casilla del tamaño de
   fábrica es de las cosas más difíciles de pulsar con el dedo que
   hay en un formulario. Aquí el área que responde es la casilla más
   su rótulo entero —para eso está el <label for>—, así que se puede
   marcar tocando el texto, que es lo que la gente intenta.

   La casilla no se encoge: flex:none. Sin eso, en un rótulo de tres
   líneas el navegador la aplasta a un rectángulo. */
.campo--check{
  display:flex; align-items:flex-start; gap:.75rem;
  padding:.9rem 1rem;
  background:var(--f-hueso);
  border:2px solid var(--f-claro); border-radius:14px;
}
.campo--check input{
  width:24px; height:24px; min-height:0; flex:none;
  margin:.1rem 0 0; padding:0;
  accent-color:var(--f-carmin);
  cursor:pointer;
}
.campo--check input:focus-visible{ outline:3px solid var(--tinta); outline-offset:3px; }
/* Gana al .campo label de arriba, que pone el rótulo en negrita y
   con margen: este es una frase, no un título de campo. */
.campo--check label{
  margin:0; font-weight:500; font-size:.92rem; line-height:1.5;
  color:var(--tinta); cursor:pointer;
}

.ins__legal{
  margin:1.3rem 0 0;
  font-size:.86rem; line-height:1.55; color:var(--tinta-suave);
}

.ins__pie{
  margin-top:1.4rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.2rem;
}
.ins__estado{ margin:0; font-size:.92rem; font-weight:700; color:var(--tinta-suave); }
.ins__estado--mal{ color:var(--f-carmin-osc); }

/* El botón mientras se envía. Se queda igual de legible: lo único
   que cambia es que ya no responde y lo dice el propio texto. */
.ins button[disabled]{ opacity:.6; cursor:progress; }


/* -------------------------------------------------------------
   LO QUE SE VE DESPUÉS
   ------------------------------------------------------------- */
.ins__gracias,
.ins__cerrado{
  padding:1.4rem 1.5rem;
  background:var(--f-hueso);
  border:2px solid var(--f-claro);
  border-radius:20px 8px 20px 8px;
}
.ins__gracias p,
.ins__cerrado p{ margin:0 0 .6rem; line-height:1.6; }
.ins__gracias p:last-child,
.ins__cerrado p:last-child{ margin-bottom:0; }

.ins__gracias-titulo{
  display:flex; align-items:center; gap:.6rem;
  font-size:1.15rem; font-weight:900; color:var(--f-carmin);
  text-transform:uppercase; letter-spacing:-.01em;
}
.ins__gracias-titulo svg{ width:20px; height:20px; flex:0 0 auto; fill:currentColor; }

.ins__cerrado a{ color:var(--f-carmin); font-weight:800; }

/* El marco al que se envía el formulario. No se ve nunca, pero no
   se esconde con display:none: un marco así no siempre carga, y
   entonces el envío se pierde. Se saca de la pantalla, que es lo
   mismo a la vista y no cambia cómo se comporta. */
.ins__marco{
  position:absolute; left:-9999px; top:0;
  width:1px; height:1px; border:0;
}


/* -------------------------------------------------------------
   LOS INSTRUCTORES DEL TALLER   (31 de agosto de 2026)
   -------------------------------------------------------------
   Tres personas con su retrato, su nombre de payaso y su cuenta.
   Nació para el Taller de Clown, pero no tiene nada suyo: sirve
   igual para el elenco de un montaje del que haya retratos.

   Es una retícula que se ajusta sola y no tres columnas fijas: con
   dos personas quedarían dos columnas, con cuatro, dos filas de dos,
   y no hay que tocar nada. El mínimo de 132 px es el ancho con el
   que un retrato cuadrado todavía deja ver una cara.

   ⚠️ LOS RETRATOS VAN CUADRADOS a propósito, aunque uno de los tres
   llegara cuadrado y los otros dos apaisados. Puestos en fila, tres
   proporciones distintas se leen como tres cosas distintas; en
   cuadrado se leen como tres personas del mismo equipo. */
.ficha__equipo{
  list-style:none; margin:.2rem 0 0; padding:0;
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fit, minmax(132px, 1fr));
}
.equipo__uno{ min-width:0; }

.equipo__retrato{
  display:block; position:relative; cursor:zoom-in;
  margin-bottom:.55rem;
  border-radius:18px 7px 18px 7px;
}
.equipo__retrato img{
  width:100%; height:auto; aspect-ratio:1; object-fit:cover;
  border-radius:18px 7px 18px 7px; background:var(--f-carmin);
}
.equipo__retrato:focus-visible{ outline:4px solid var(--tinta); outline-offset:3px; }

.ficha__texto .equipo__nombre{
  margin:0; font-size:.92rem; font-weight:800; line-height:1.25;
  color:var(--tinta);
}
/* El nombre de payaso en el oliva oscuro: 6,3:1 sobre blanco. El
   oliva de la gráfica, el claro, no se usa nunca como texto. */
.ficha__texto .equipo__tony{
  margin:.1rem 0 .35rem;
  font-size:.8rem; font-weight:700; line-height:1.3;
  color:var(--f-oliva-osc);
}
.ficha__texto .equipo__cuenta{ margin:0; }
.equipo__cuenta a{
  display:inline-flex; align-items:center; gap:.35rem;
  min-height:38px;
  font-size:.8rem; font-weight:800; color:var(--f-carmin);
  text-decoration:none; word-break:break-all;
}
.equipo__cuenta a:hover{ text-decoration:underline; }
.equipo__cuenta a:focus-visible{ outline:3px solid var(--tinta); outline-offset:2px; }
.equipo__cuenta svg{ width:16px; height:16px; flex:0 0 auto; }