/* =============================================================
   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;   /* esta sí sirve de texto sobre fondo claro */
  --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. */
.edicion__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{ width:20px; height:20px; fill:currentColor; }
.edicion__lupa:hover .edicion__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{ 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;
  padding-block:clamp(1.6rem,3.6vw,2.6rem) clamp(4.2rem,8vw,5.4rem);
}

/* 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(1.2rem,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; }

/* Invitación a bajar. Es el único llamado a la acción del telón:
   los botones viven en la sección siguiente. */
.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%);
  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); }

.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);
}
/* 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{ transition:none; }
  .visor__boton:hover, .carrusel__flecha:hover,
  .edicion__lupa:hover .edicion__lupa-icono{ transform:none; }
}