/* ============================================================
   CENTRO CAMALEÓN — Ajustes propios del proyecto
   ------------------------------------------------------------
   Se apoya en site.css y centro.css (sistema de Actores S.C.G) y
   solo cambia lo que este proyecto necesita:
   · barra superior reducida (marca + acceso de socios)
   · hero más corto, para que la cartelera aparezca de inmediato
   · afiches reales de cada actividad
   ============================================================ */

/* ---------- Barra superior ----------
   La barra es la misma de site.css (#nav, .brand, .navmenu, .socios) y sus
   estilos viven allá, incluido el bloque del socio conectado: desde que la
   portada institucional es parte del proyecto, esa barra sale también en
   páginas que no cargan esta hoja, y aquí se quedaban sin aplicar.

   Aquí solo queda su ALTO, que sí es un dato del Centro: lo usa .car para
   saber cuánto aire dejarle por encima al bloque de cartelera.
   65px = 14px + botón (36.75px) + 14px. */
:root { --nav-h: 65px; }

/* La O blanca de site.css funciona sin tocar nada: las dos vistas de este
   layout arrancan en naranja (la portada con .car, la ficha con .phero). */

/* ============================================================
   UN SOLO CARRIL
   ------------------------------------------------------------
   Todo lo de la página —la barra superior, el bloque del carrusel,
   la ruta, la cartelera, los espacios, la visita y el pie— arranca
   y termina en la misma línea, en cualquier ancho de pantalla.

   El carril es más generoso que el .wrap de site.css (1220px, hecho
   para el sitio institucional) porque aquí manda la pieza de
   cartelera. Reserva --gut a los lados: ese hueco es donde viven
   las flechas grandes del carrusel, y cuando ya no caben (bajo
   1180px, donde las flechas se repliegan al pie del panel) se
   encoge al margen normal de 30px por lado.
   ============================================================ */
:root {
  --carril: 1400px;
  --gut: 160px; /* 80px por lado: el hueco de las flechas del hero */
}

@media (max-width: 1180px) {
  :root { --gut: 60px; }
}

.wrap,
.chero .wrap,
/* El hero de la ficha de una actividad va en la lista aunque no lo parezca:
   site.css le da a `.phero > .wrap` un `width:100%` que, sin márgenes que lo
   frenen —aquí el carril los quita—, dejaba el titular y la ruta pegados al
   canto de la pantalla. Es el mismo selector, así que gana el que va después,
   y este va después. */
.phero > .wrap,
.car-escena {
  width: min(var(--carril), 100% - var(--gut));
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}

/* La marca queda a plomo con el bloque del carrusel y con el título de
   cada sección, en vez de a 30px fijos del borde. */
#nav {
  padding-inline: calc((100% - min(var(--carril), 100% - var(--gut))) / 2);
}

/* ============================================================
   PORTADA — Carrusel de piezas de cartelera
   ------------------------------------------------------------
   Estructura tomada de actores_web/referencias/referencia_her_4:
   un bloque partido —columna de texto clara a la izquierda, arte
   a la derecha— con las flechas grandes flanqueándolo por fuera,
   dos tarjetas de atajo flotando sobre el borde superior y, bajo
   el bloque, una barra blanca con el resto de la cartelera.

   Lo que cambia respecto de la versión anterior: el texto ya no
   es una frase institucional fija, es el de cada pieza (su
   antetítulo, su título, su ficha corta y su enlace). Así la
   izquierda acompaña a la derecha en vez de repetir siempre lo
   mismo, que es lo que hace la referencia.

   Las piezas van sin velo ni textos encima: traen su propia
   composición dentro del arte. Se muestran a 1584x672; cuando el
   texto del panel estira el bloque más que esa proporción, la
   pieza llena la celda y el sobrante se recorta a los lados por
   igual, en vez de dejar franjas de fondo arriba y abajo.
   ============================================================ */
/* `section.car` y no `.car` a secas: el desplegable del menú de site.css pinta
   su cursor como `<span class="car">▼</span>`, y este bloque le estaba dando
   143px de relleno vertical. La barra pasaba de 62 a 268px de alto —con el ▼
   colgando muy por debajo de su botón— en TODA página que cargue esta hoja: el
   Centro, la ficha de una actividad y, mientras la cargó, el área del socio.
   El carrusel siempre es una `<section>`; el cursor, nunca. */
section.car {
  position: relative;
  background: linear-gradient(150deg, #FF7A47 0%, var(--orange) 42%, var(--orange-700) 100%);
  color: var(--ink);
  overflow: hidden;
  /* El aire de arriba no es decorativo: por ahí asoman las tarjetas de
     atajo y la espiral, que cuelgan por encima del bloque. El de abajo es el
     que deja al bloque apoyado sobre el naranja en vez de pegado al canto de
     la cartelera. */
  padding: calc(var(--nav-h) + 78px) 0 clamp(52px, 5vw, 84px);
}

/* La trama de puntos que evita que el naranja quede plano ya no se dibuja
   aquí: la sección la pide con `trama trama-blanca` y la receta vive en
   site.css, compartida con el resto de la página. */

/* El titular de la página. El bloque partido ya no lleva una frase fija
   —manda el texto de cada pieza—, pero la portada necesita su h1. */
.car-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Las tres espirales llevan clase propia y nunca se seleccionan por `.spiral`
   a secas: si no, cualquier regla que apunte al conjunto (y los breakpoints
   apuntan) le impone a la chica el tamaño de la grande.

   El reparto no es libre: el bloque es opaco y con sombra, así que de una
   espiral solo se ve lo que cae FUERA de él —la banda de arriba, la de abajo
   y los dos costados del carril—. Lo que queda detrás desaparece, y eso está
   bien: la forma se lee como cortada por el bloque, que es el gesto de los
   afiches del manual.

   Por eso van una en cada esquina opuesta, en diagonal, y no las dos abajo
   como estaban: así cada una tiene su banda para asomar y entre las dos
   enmarcan el bloque en vez de apelotonarse bajo él. */

/* 1 · La grande, anclada abajo a la izquierda y cortada por los dos bordes.
   Asoma por el costado izquierdo del carril y por la banda de abajo, que es
   el aire que quedó al apoyar el bloque sobre el naranja.
   site.js la hace girar con el scroll vía --spin. */
.car-espiral {
  left: -230px;
  bottom: -250px;
  width: 640px;
  height: 640px;
  opacity: .17;
}

.car-espiral path { stroke: #fff; }

/* 2 · La contraria: arriba a la derecha, más chica y más tenue. Cae detrás de
   las tarjetas de atajo y les da fondo en vez de dejarlas flotando sobre el
   naranja pelado. */
.car-fondo {
  right: -205px;
  top: -245px;
  bottom: auto;
  width: 520px;
  height: 520px;
  opacity: .13;
}

.car-fondo path { stroke: #fff; }

/* 3 · Chica y en tinta, colgada de la esquina superior izquierda del bloque,
   como sello. Va sobre el panel claro y el naranja a la vez; nunca sobre el
   arte, que no admite nada encima. */
.car-remate {
  top: -44px;
  left: -20px;
  width: 88px;
  height: 88px;
  opacity: .9;
  z-index: 3;
}

.car-remate path { stroke: var(--ink); }

/* El ancho lo pone el carril (arriba), no este contenedor: aquí solo se
   levanta el contenido por encima de las espirales del fondo. */
.car-hero {
  position: relative;
  z-index: 2;
  width: 100%;
}

.car-escena { position: relative; }

/* ---------- El bloque partido ---------- */
/* La proporción la manda el arte: es 2.36:1, así que se le da la columna
   ancha y el alto del bloque sale de ella. El panel claro se estira hasta
   ese alto; si el texto pide más, ahora es el arte el que se estira con él
   (antes se quedaba centrado y dejaba franjas de fondo arriba y abajo).

   El reparto de las columnas no es estético, es lo que acota el recorte del
   arte. Una pieza de 2.36:1 puesta al lado de un panel es MUY baja: cuanto
   más estrecha su columna, más baja queda y más tiene que estirarse (o sea,
   recortarse a los lados) para alcanzar el alto del texto. Con 1.42fr contra
   .82fr el arte se lleva el 63% del bloque, que es el punto donde la pieza
   llega casi al alto del panel sin dejar la columna de texto sin sitio.
   Cambiar este reparto cambia el recorte: no se toca a ojo. */
.car-bloque {
  display: grid;
  grid-template-columns: minmax(320px, .82fr) 1.42fr;
  border-radius: 26px;
  overflow: hidden;
  background: var(--paper);
  /* Solo la sombra. El aro blanco de 1px que llevaba antes servía para
     despegar el papel del naranja, pero desde que el bloque cierra con el pie
     en tinta ese mismo aro le pintaba un filo blanco alrededor del negro, que
     es justo donde peor se ve. La sombra ya separa de sobra. */
  box-shadow: 0 60px 100px -42px rgba(14, 14, 12, .66);
}

.car-panel {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.6vw, 44px);
}

/* Los textos de todas las piezas se apilan en la misma celda de grid: así el
   panel mide lo que el más alto y no salta al cambiar de diapositiva. */
.car-textos {
  flex: 1 1 auto;
  display: grid;
  align-content: center;
}

.car-txt {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden; /* también lo saca del tabulador y del lector */
  transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
}

.car-txt.activo {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Eyebrow al estilo del resto del sitio (.lab): rayita de acento y versalitas */
.car-lab {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange-700);
}

.car-lab::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent);
  flex: 0 0 auto;
}

/* El título va tope de dos líneas. No es un capricho tipográfico: el alto del
   panel es lo que decide cuánto se recorta el arte, y sin tope una tercera
   línea la mete un título largo sin que nadie lo note al cargarlo. Con el
   tope, el peor caso del panel es una cuenta cerrada. */
.car-tit {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 2.4vw, 42px);
  line-height: 1.03;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.car-sub {
  margin: 15px 0 0;
  font-size: 16.5px;
  line-height: 1.55;
  color: #4c4c46;
  max-width: 46ch;
  /* Dos líneas por lo mismo que el título: cada línea de más son 26px de
     panel, y esos 26px salen del ancho de la pieza. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.car-cta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.car-video {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
}

.car-video:hover { opacity: .7; }
.car-video span { font-size: 10px; }

/* ---------- Pie del panel: contador y pausa ---------- */
.car-mando {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  color: var(--ink);
}

/* Contador editorial de diapositiva: 01 / 06 */
.car-cuenta {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 0 auto 0 0;
  font-family: var(--font-display);
  line-height: 1;
  color: var(--ink);
}

.car-cuenta b { font-size: 24px; font-weight: 700; }
.car-cuenta span { font-size: 14px; font-weight: 500; opacity: .55; }

/* Las flechas chicas del pie solo existen cuando no caben las grandes */
.car-mini-flechas { display: none; gap: 8px; }

/* Puntos de posición: sustituyen a la tira de miniaturas, que repetía la
   cartelera de más abajo. El activo se llena con el tiempo que falta para
   pasar a la siguiente pieza. */
.car-puntos {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-right: 4px;
}

.car-punto {
  position: relative;
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: rgba(14, 14, 12, .22);
  cursor: pointer;
  overflow: hidden;
  transition: width .4s var(--ease), background .3s;
}

.car-punto:hover { background: rgba(14, 14, 12, .45); }
.car-punto:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.car-punto.activo { width: 40px; background: rgba(14, 14, 12, .22); }

.car-punto i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: 0;
  background: var(--ink);
}

.car-punto.activo i { width: 100%; transition: width var(--espera, 6s) linear; }

/* ---------- El arte ---------- */
/* La columna del arte tiene que hacer dos cosas a la vez: darle al bloque su
   alto natural (la proporción de la pieza, 2.36:1) y llenar la celda entera
   cuando el texto del panel pide más alto que eso.

   No sirve ponerle `aspect-ratio` a la columna: la proporción le fija el alto
   y entonces deja de estirarse hasta el borde de la fila, así que asoma el
   fondo claro del bloque por debajo. Se separan los dos papeles: un
   espaciador en el flujo aporta la proporción —y de paso reserva el sitio
   antes de que cargue el arte, para que la página no salte—, y el marco va
   posicionado sobre la celda, que sí se estira. */
.car-art {
  position: relative;
  background: var(--ink);
  min-width: 0;
}

.car-art::before {
  content: "";
  display: block;
  aspect-ratio: 1584 / 672;
}

.car-marco {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.car-pista {
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform .7s var(--ease);
}

.car-slide {
  flex: 0 0 100%;
  height: 100%;
  min-width: 0;
}

.car-pieza { display: block; height: 100%; }

/* La pieza llena el marco. Si el panel estiró la celda por encima de la
   proporción, lo que sobra se recorta a los lados y por igual en los dos
   (object-position por defecto), nunca de un solo lado. */
.car-pieza img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Diapositiva sin arte todavía: al menos se lee de qué se trata */
.car-sinarte {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 0 clamp(24px, 4vw, 60px);
  background: linear-gradient(120deg, var(--ink), #26241d);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2.6vw, 40px);
  line-height: 1.06;
}

.car-sinarte small {
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

/* ---------- Flechas grandes, flanqueando el bloque ---------- */
.car-flecha {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-top: -30px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  padding-bottom: 4px;
  cursor: pointer;
  box-shadow: 0 20px 36px -20px rgba(14, 14, 12, .8);
  transition: background .25s, color .25s, transform .3s var(--ease);
}

.car-izq { left: -70px; }
.car-der { right: -70px; }

.car-flecha:hover {
  background: #fff;
  color: var(--ink);
  transform: scale(1.08);
}

.car-flecha:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* Pausa: discreta, en el pie del panel */
.car-pausa {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(14, 14, 12, .22);
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: background .25s, border-color .25s, color .25s;
}

.car-pausa:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.car-pausa:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Pausa (dos barras) que pasa a reproducir (triángulo) al pararse */
.car-pausa .ic {
  width: 11px;
  height: 12px;
  border-left: 3.5px solid currentColor;
  border-right: 3.5px solid currentColor;
}

.car-pausa.parado .ic {
  width: 0;
  height: 0;
  border-left: 11px solid currentColor;
  border-right: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  margin-left: 2px;
}

/* ---------- Tarjetas de atajo, flotando sobre el borde superior ----------
   Como en la referencia, cruzan el borde del bloque. El solape es de 14px
   y va por la esquina derecha: lo justo para que la sombra caiga sobre el
   arte y se lean como flotantes, sin comerse la composición de la pieza. */
.car-atajos {
  position: absolute;
  z-index: 5;
  right: 26px;
  bottom: 100%;
  margin-bottom: -14px;
  display: flex;
  gap: 14px;
}

.car-atajo {
  display: flex;
  align-items: center;
  gap: 13px;
  max-width: 268px;
  padding: 15px 18px;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  box-shadow: 0 26px 50px -26px rgba(14, 14, 12, .7);
  transition: transform .3s var(--ease), box-shadow .3s;
}

.car-atajo:hover {
  transform: translateY(-3px);
  box-shadow: 0 32px 56px -26px rgba(14, 14, 12, .8);
}

.car-atajo svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.car-atajo .fl {
  flex: 0 0 auto;
  margin-left: 4px;
  font-size: 16px;
  opacity: .5;
  transition: transform .3s var(--ease);
}

.car-atajo:hover .fl { transform: translateX(4px); opacity: 1; }

/* ---------- La ruta: cómo se participa, en tres pasos ----------
   Es el PIE del bloque del hero: la tercera fila de la tarjeta, cruzando las
   dos columnas. No es una franja a sangre bajo la portada, y esa es la
   decisión de fondo: por bien resuelto que esté el canto, un plano de tinta
   de borde a borde siempre se lee como sección nueva y siempre deja un corte
   que disimular. Como base de la tarjeta no hay canto que resolver —se lleva
   el radio y la sombra del bloque— y el naranja sigue corriendo por debajo
   hasta la cartelera, igual que antes de que la ruta existiera.

   Es además un recurso del manual de marca (actores_web/data/actores.pdf):
   en la p. 60 los afiches van montados sobre una franja negra que los remata
   por abajo y lleva las marcas.

   Y en tinta, no sobre el papel del panel, porque así el pie se distingue de
   la ficha de la pieza —que es lo que manda arriba— sin meter ningún color
   nuevo: naranja, negro, blanco y grises, nada más.

   Los recursos de dentro también son del manual:
   · la cifra en una ficha de filete fino, rematada arriba por los dos
     puntitos de la ficha de fecha de la pieza de Asamblea (p. 49);
   · el título en la display, en mayúsculas y muy apretado, como los
     titulares de los afiches ("NO VIVIMOS SOLO DE APLAUSOS");
   · la voluta del isotipo entrando grande y cortada por el borde. */
.car-franja {
  grid-column: 1 / -1; /* cruza el panel y el arte */
  position: relative;
  padding: 26px clamp(26px, 2.6vw, 44px) 28px; /* a plomo con el panel */
  color: #fff;
  overflow: hidden;
  /* Tinta plana. Llevaba un degradado radial naranja entrando por la
     izquierda y en una franja de este alto no se leía como luz, se leía como
     una mancha sucia. El manual monta planos de color macizos, no
     degradados: el relieve lo pone la voluta, no un halo. */
  background: var(--ink);
}

/* La voluta, grande y cortada por el borde derecho: es el recurso que el
   manual usa en las piezas, no una marca de agua tímida. */
.car-franja-voluta {
  right: -150px;
  bottom: -190px;
  width: 400px;
  height: 400px;
  opacity: .11;
  z-index: 0;
}

.car-franja-voluta path { stroke: #fff; }

/* ---------- El titular del pie ----------
   Va en una sola línea y con el filete comiéndose lo que sobra —el gesto del
   eyebrow (.lab) a escala de titular—, así da sentido a los tres bloques sin
   convertir el pie en una sección con cabecera. Pregunta y respuesta en la
   misma línea, en segunda persona, como pide el manual de tono. */
.car-franja-tit {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 10px;
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 1.55vw, 23px);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: #fff;
}

.car-franja-tit em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}

.car-franja-tit::after {
  content: "";
  flex: 1 1 60px;
  height: 1px;
  min-width: 40px;
  margin-left: 6px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
  transform: translateY(-.3em);
}

/* ---------- Los tres actos, en una fila ---------- */

.car-ruta {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0;
  list-style: none;
}

/* Filete entre columnas. El primero no lo lleva: la ruta tiene que arrancar
   a plomo con el bloque del hero. */
.car-paso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 clamp(14px, 1.3vw, 20px);
  align-items: start;
  padding-inline: clamp(16px, 1.9vw, 32px);
  border-left: 1px solid rgba(255, 255, 255, .16);
}

.car-paso:first-child { padding-left: 0; border-left: 0; }
.car-paso:last-child { padding-right: 0; }

/* El llamado: el ordinal grande en la display y debajo la palabra en
   versalitas, para que se lea "1er llamado", que es como se canta. Nada de
   cifra dentro de una cajita: el 01·02·03 encuadrado es el gesto de
   cualquier landing y no aparece en ninguna pieza del manual.

   El ancho es fijo para que los tres textos arranquen a la misma línea. */
.car-paso-n {
  width: 72px;
  margin: 0;
  padding-top: 1px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 2.6vw, 40px);
  line-height: .86;
  letter-spacing: -.01em;
  color: var(--accent);
  transition: color .3s;
}

.car-paso-n span {
  display: block;
  margin-top: 6px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  transition: color .3s;
}

.car-paso:hover .car-paso-n span { color: rgba(255, 255, 255, .8); }

/* El título, en la display y en versalitas altas: es el gesto de los afiches
   del manual. Apretado de interlínea para que quepa en dos líneas. */
.car-paso b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.05;
  letter-spacing: .015em;
  text-transform: uppercase;
  margin-bottom: 7px;
  color: #fff;
}

.car-paso p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .62); /* el gris claro del manual sobre tinta */
  max-width: 42ch;
}

/* El enlace del paso: blanco con el filo en naranja, como los enlaces del
   pie. Nada de botones aquí: el botón del hero es el de la pieza. */
.car-paso a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 11px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  border-bottom: 1.5px solid var(--accent);
  padding-bottom: 3px;
  transition: color .25s;
}

.car-paso a .fl {
  display: inline-block;
  transition: transform .3s var(--ease);
}

.car-paso a:hover { color: var(--accent); }
.car-paso a:hover .fl { transform: translateX(4px); }
.car-paso a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ---------- Adaptaciones ---------- */

/* La ficha corta se retira en la franja intermedia (de apilarse hasta
   1379px). Es el único sitio donde no cabe: el bloque ya se estrechó —y con
   él la pieza, que al ser 2.36:1 pierde alto muy rápido— pero el panel sigue
   al lado y sus piezas fijas (eyebrow, título, botón y mando) no encogen. En
   1200px, por ejemplo, la pieza mide 306px de alto y esas piezas fijas ya
   piden 290: los 66px de la ficha solo pueden salir del ancho del arte, a
   razón de un 7% de recorte por lado.

   Lo que se pierde es texto de apoyo; el antetítulo, el título y el botón
   siguen ahí, y la ficha completa está a un clic en la página del evento.
   Por debajo de 980px el bloque se apila, la pieza recupera todo su ancho y
   la ficha vuelve, ya sin competir por el alto. */
@media (min-width: 981px) and (max-width: 1379px) {
  .car-sub { display: none; }
}

/* Sin sitio para las flechas por fuera: se recupera el ancho y las flechas
   bajan al pie del panel. */
@media (max-width: 1180px) {
  .car-izq, .car-der { display: none; }
  .car-mini-flechas { display: flex; }
  .car-mini-flechas .car-flecha {
    position: static;
    width: 36px;
    height: 36px;
    margin: 0;
    font-size: 21px;
    padding-bottom: 3px;
    box-shadow: none;
    background: none;
    border: 1px solid rgba(14, 14, 12, .22);
    color: var(--ink);
  }
  .car-mini-flechas .car-flecha:hover { background: var(--ink); color: #fff; transform: none; }
}

/* Apilado: primero la pieza (que es la que trae el título dentro del arte)
   y debajo su texto. */
@media (max-width: 980px) {
  section.car { padding: calc(var(--nav-h) + 64px) 0 clamp(44px, 6vw, 64px); }
  .car-bloque { grid-template-columns: 1fr; }
  .car-art { order: -1; }
  /* Mismos anclajes en diagonal, a escala: el carril se estrecha y una
     espiral de 640px se comería la mitad del ancho. */
  .car-espiral { width: 440px; height: 440px; left: -165px; bottom: -175px; }
  .car-fondo { width: 360px; height: 360px; right: -145px; top: -170px; }
  .car-remate { width: 70px; height: 70px; top: -36px; }
  .car-sub { -webkit-line-clamp: 4; }

  /* Los atajos dejan de flotar: pasan a fila propia bajo el bloque */
  .car-atajos {
    position: static;
    margin: 16px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .car-atajo { max-width: none; }

  /* Las tres columnas siguen cabiendo; se aprieta el aire y el llamado */
  .car-paso { padding-inline: 16px; gap: 0 12px; }
  .car-paso-n { width: 62px; font-size: 27px; }
  .car-paso-n span { font-size: 8.5px; letter-spacing: .14em; }
}

/* El pie apila antes que el resto del hero: tres columnas de ~200px no dan
   para un título en versalitas y dos líneas de texto, se rompen en sopa. */
@media (max-width: 860px) {
  .car-franja { padding: 22px clamp(18px, 4vw, 26px) 24px; }

  /* El filete del titular sobra cuando el texto ya ocupa dos líneas */
  .car-franja-tit { margin-bottom: 16px; gap: 0 8px; }
  .car-franja-tit::after { display: none; }

  .car-ruta { grid-template-columns: 1fr; }

  /* El filete pasa de vertical a horizontal */
  .car-paso {
    display: block;
    padding: 16px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .16);
  }

  .car-paso:first-child { padding-top: 0; border-top: 0; }

  /* Y el llamado se pone EN LÍNEA —ordinal y versalita en la misma fila— en
     vez de en columna aparte: apilado, esa columna dejaba un hueco vacío a la
     izquierda de cada paso, que es lo que se veía mal. */
  .car-paso-n {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: auto;
    padding-top: 0;
    margin-bottom: 7px;
    font-size: 23px;
    line-height: 1;
  }

  .car-paso-n span { margin-top: 0; font-size: 9.5px; letter-spacing: .2em; }
  .car-paso p { max-width: none; }
}

@media (max-width: 720px) {
  section.car { padding: calc(var(--nav-h) + 52px) 0 clamp(40px, 8vw, 56px); }
  .car-bloque { border-radius: 18px; }
  .car-atajos { grid-template-columns: 1fr; gap: 10px; }
  .car-sub { font-size: 15.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .car-pista, .car-txt { transition: none; }
  .car-punto.activo i { transition: none; }
  .car-paso a .fl { transition: none; }
}

/* ---------- Ficha de una actividad ---------- */
.act-detalle {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 46px;
  align-items: start;
}

@media (max-width: 860px) {
  .act-detalle { grid-template-columns: 1fr; gap: 32px; }
}

.act-poster {
  height: 320px;
  border-radius: 18px;
  margin-bottom: 30px;
}

.act-desc {
  font-size: 17px;
  line-height: 1.7;
  color: #2b2b28;
  max-width: 62ch;
  margin: 0 0 40px;
}

.act-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  margin: 0 0 20px;
}

.act-sesiones { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }

.act-sesiones li { display: flex; gap: 16px; align-items: flex-start; }
.act-sesiones li.pasada { opacity: .45; }

.act-sesiones .dia {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--orange-50);
  border: 1px solid rgba(255, 81, 21, .2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.act-sesiones .dia small { font-size: 10px; text-transform: uppercase; color: var(--g2); }
.act-sesiones .dia b { font-family: var(--font-display); font-size: 20px; color: var(--ink); }
.act-sesiones .tit { margin: 4px 0 2px; font-weight: 600; font-size: 15px; }
.act-sesiones .meta { margin: 0; font-size: 14px; color: var(--g2); }

.act-caja {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  position: sticky;
  top: 92px;
  background: #fff;
}

.act-lab { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--g2); margin: 0 0 4px; }
.act-cupo { font-family: var(--font-display); font-size: 34px; font-weight: 700; margin: 0 0 12px; }
.act-cupo small { font-family: var(--font-ui); font-size: 15px; font-weight: 400; color: var(--g2); }

.act-barra { height: 8px; border-radius: 20px; background: #f0f0ec; overflow: hidden; margin-bottom: 22px; }
.act-barra i { display: block; height: 100%; background: var(--accent); border-radius: 20px; }

.act-estado {
  margin: 0 0 12px;
  padding: 13px;
  text-align: center;
  border-radius: 40px;
  font-weight: 600;
  font-size: 14px;
  background: var(--orange-50);
  color: var(--orange-700);
  border: 1px solid rgba(255, 81, 21, .25);
}

.act-estado.neutro { background: #f3f3f0; color: var(--g2); border-color: var(--line); }

/* ---------- El pase de entrada ----------
   El QR de la inscripción, en la propia ficha de la actividad. Va encuadrado
   en papel y con filete, como un boleto: lo que se enseña en la puerta.

   El código escrito debajo no es decoración: es el plan B cuando la cámara de
   la puerta no lee —mala luz, pantalla rayada, permiso denegado— y toca
   teclearlo. Por eso va en monoespaciada y con las letras separadas, que es
   lo que hace que alguien pueda leerlo en voz alta sin equivocarse. */
.act-pase {
  margin: 0 0 14px;
  padding: 16px 14px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  text-align: center;
}

.act-pase-qr {
  width: 150px;
  height: 150px;
  margin: 0 auto;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.act-pase-qr svg { width: 100%; height: 100%; display: block; }

.act-pase-cod {
  margin: 10px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink);
}

.act-pase-pie {
  margin: 3px 0 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--g2);
}

/* Entrada de hoy ya registrada. El QR no se tacha ni se apaga: el mismo código
   sigue sirviendo para las demás sesiones, y esconderlo haría creer que se
   gastó. Lo que cambia es el pie, y un visto que se ve de lejos. */
.act-pase.usado {
  background: var(--s-green-50, #F1FAF1);
  border-color: rgba(10, 138, 60, .3);
}

.act-pase-pie.hecho {
  color: var(--s-green, #0a8a3c);
  letter-spacing: .06em;
}

.act-pase-pie.hecho::before {
  content: "✓ ";
  font-weight: 700;
}

.act-cancelar {
  width: 100%;
  background: none;
  border: 0;
  color: var(--g2);
  font-size: 13.5px;
  cursor: pointer;
  text-decoration: underline;
  padding: 4px;
}

.act-cancelar:hover { color: #c00; }
.act-nota { font-size: 12.5px; color: var(--g2); text-align: center; margin: 10px 0 0; }

/* El plazo para postularse: las dos puntas de la ventana, una debajo de otra.
   Se leen comparándolas, así que van alineadas en dos columnas —etiqueta a la
   izquierda, momento a la derecha— y no como frases sueltas. */
.act-plazo { margin: 4px 0 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #F6F4EF; }
.act-plazo .act-lab { margin: 0 0 8px; }
.act-plazo-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; margin: 0 0 4px; }
.act-plazo-fila:last-child { margin-bottom: 0; }
.act-plazo-fila span { color: var(--g2); flex: 0 0 auto; }
.act-plazo-fila b { font-weight: 600; text-align: right; }

.act-reglas {
  list-style: none;
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 9px;
  font-size: 13px;
  color: var(--g2);
}

.act-reglas .ojo { color: var(--orange-700); }

.act-volver { display: block; margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--g2); }
.act-volver:hover { color: var(--accent); }

/* ---------- Afiche real de cada actividad ---------- */
.film .poster {
  background-size: cover;
  background-position: center;
}

.film .poster.sin-afiche {
  background: linear-gradient(160deg, #1a1a17, #0e0e0c);
  display: flex;
  align-items: center;
  justify-content: center;
}

.film .poster.sin-afiche .ini {
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: 700;
  color: rgba(255, 255, 255, .16);
  line-height: 1;
}

/* ---------- Pie de la tarjeta de cartelera ----------
   Un solo bloque al fondo del cuerpo: la línea de estado y el botón. Antes
   cada tarjeta terminaba en un elemento distinto —un formulario, un enlace o
   una etiqueta de estado— y solo el enlace llevaba `margin-top:auto`, así que
   los botones quedaban a alturas distintas dentro de la misma fila. Ahora lo
   que empuja es el pie, y dentro de él el orden es siempre el mismo.
   ----------------------------------------------------------------- */
.film .ffoot {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Estado de la actividad: informa, no es un botón. Por eso va sin fondo ni
   borde, con un punto de color que hace de semáforo. */
.film .festado {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--g2);
  line-height: 1.25;
}

.film .festado::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.film .festado b {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

/* Hay cupo y la puerta está abierta */
.film .festado.free { color: var(--s-green, #0a8a3c); }

/* Quedan pocos: es la única que apremia */
.film .festado.last { color: var(--orange-700); }
.film .festado.last b { color: var(--orange-700); }

/* Ya no se puede entrar como uno más: pasó, está lleno o no te corresponde */
.film .festado.off { color: var(--g2); }

/* Lo tuyo ya está resuelto */
.film .festado.ok { color: var(--accent); }

/* El botón lleva a la ficha y lleva siempre: incluso lleno o empezado se
   entra a mirar, y si hay lista de espera se pide desde allí. */
.film .fbtn { width: 100%; text-align: center; }