/* ==========================================================================
   mut-reel — cover a pantalla completa, lista de títulos en bucle y créditos.
   La rueda mueve la lista; el título que cae en la línea de anclaje manda:
   cambia el cover y los créditos. Sin librerías.
   ========================================================================== */

.mut-reel{
  /* Cuánto sitio ocupa la cabecera del sitio en el flujo. NO lo mide el addon:
     lo publica el tema en `:root` como `--mut-head`, en línea y justo después
     de la navegación, o sea antes de que este bloque exista. Así el bloque nace
     ya en su sitio y no da el salto que daba cuando esto se medía al arrancar el
     JS, después del primer pintado.
     El 0 de reserva es el correcto para una página sin cabecera o con una
     cabecera fuera del flujo: ahí no hay nada que compensar. */
  --reel-head: var(--mut-head, 0px);
  --reel-paper: var(--paper, #efece4);
  --reel-ink:   var(--ink, #1a1814);
  --reel-mono:  var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
  --reel-row: 22px;              /* alto de cada línea de la lista */
  --reel-gutter: var(--gutter, 24px);
  --reel-fade: .34;              /* cuánto se apaga por cada línea de distancia */

  position: relative;
  /* El alto, en CSS y sólo en CSS: correcto desde el primer fotograma, sin
     esperar al JS y sin depender de cuándo se mida nada. `--reel-alto` es el
     número del campo (60–100) y lo pone la plantilla. */
  /* El alto, en CSS y sólo en CSS. Sin `+1px` ni margen negativo: se probaron
     contra la rayita y no eran el problema, sólo ruido encima. */
  height: calc(var(--reel-alto, 100) * 1vh);
  height: calc(var(--reel-alto, 100) * 1svh);
  min-height: 320px;
  scroll-margin-top: 0;
  overflow: hidden;
  background: var(--reel-ink);
  color: var(--reel-paper);
  isolation: isolate;
  /* La manita sólo cuando hay algo que arrastrar de lado: la pone
     `.has-track`, que el JS activa cuando el proyecto visible es una tira. En
     un cover suelto no hay nada que arrastrar y el cursor normal no miente. */
  cursor: default;
  user-select: none;
}
.mut-reel.has-track{ cursor: grab; }
.mut-reel.has-track .mut-reel-cover.is-track{ cursor: grab; }
.mut-reel.is-dragging,
.mut-reel.is-dragging .mut-reel-cover.is-track{ cursor: grabbing; }
/* los controles mandan sobre la manita */
.mut-reel-side, .mut-reel-dot, .mut-reel-next, .mut-reel-item{ cursor: pointer; }

/* ---------- cover ---------- */
/* El escenario cubre el bloque entero, sin excusas: si una hoja de estilos de
   fuera (el tema trae un css/mut-reel.css antiguo con estas mismas clases) le
   cambia el position, `inset` dejaría de anclarlo. Con alto y ancho explícitos
   sigue cubriendo. */
.mut-reel-stage{
  position: absolute !important;
  inset: 0;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  /* Sin `min-height`. Lo llevó un rato, en `svh`, como red por si el JS medía
     mal el alto del bloque. Ya no hay nada que medir —el alto del bloque es CSS
     puro— y ese suelo era una bomba de relojería: con el bloque al 60 % de
     pantalla, la escena seguía midiendo una pantalla entera y el encuadre del
     cover se iba hacia arriba. `inset: 0` es exacto por definición. */
  z-index: 0;
}
.mut-reel-cover{
  position: absolute; inset: 0; margin: 0;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity var(--reel-cross, .5s) cubic-bezier(.22,1,.36,1),
              transform var(--reel-cross, .5s) cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.mut-reel-cover.is-active{ opacity: 1; transform: none; }
/* El que sale se va un pelín más despacio, y NUNCA por debajo de escala 1:
   encogerlo dejaba asomar el fondo por los bordes —esa línea negra fina que se
   veía en cada cambio—. Entra en 1,03 y sale en 1,015: siempre cubriendo. */
.mut-reel-cover.is-leaving{
  opacity: 0;
  transform: scale(1.015);
  transition-duration: calc(var(--reel-cross, .5s) * 1.3);
}
.mut-reel-cover > img,
.mut-reel-cover > video{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  /* Sin esto el navegador arranca su propio arrastre de imagen en cuanto tiras
     de un cover, y ese arrastre cancela el gesto del slider. */
  -webkit-user-drag: none;
  user-select: none;
}

/* ---------- lista de títulos ---------- */
.mut-reel-list{
  position: absolute;
  color: var(--reel-fg, #fff);
  transition: color .3s ease;
  top: 50%;
  z-index: 2;
  height: 0;                      /* la línea de anclaje */
  font-family: var(--reel-mono);
  font-size: 13px;
  line-height: var(--reel-row);
  letter-spacing: .01em;
}
.mut-reel-list--left { left:  var(--reel-gutter); text-align: left; }
.mut-reel-list--right{ right: var(--reel-gutter); text-align: right; }

.mut-reel-item{
  position: absolute;
  top: 0;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  opacity: .18;
  transition: color .3s ease;
  will-change: transform, opacity;
}
.mut-reel-list--right .mut-reel-item{ right: 0; }
.mut-reel-list--left  .mut-reel-item{ left: 0; }
.mut-reel-item.is-active{ opacity: 1; }
.mut-reel-item:focus-visible{ outline: 1px solid currentColor; outline-offset: 3px; }

/* ---------- créditos ---------- */
/* Créditos: donde estaban —en el medio, en el lado que diga el campo— y en
   MAYÚSCULAS.
   Estuvieron abajo y con `mix-blend-mode: difference` durante una versión, y
   desaparecieron: sobre un cover de tonos medios —una foto de hierba, sin ir más
   lejos— el `difference` de blanco da otro tono medio y el texto se esfuma. Es
   exactamente el mismo fallo por el que las flechas no lo llevan (registro #12),
   y no debería haberlo repetido aquí.
   El color lo manda `--reel-fg`, que sale de medir el brillo del cover: tinta
   sobre claro, blanco sobre oscuro. Eso sí funciona en cualquier tono. */
.mut-reel-credits{
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  color: var(--reel-fg, #fff);
  font-family: var(--reel-mono);
  font-size: 11px;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: .07em;
  display: grid;
  gap: 2px;
  max-width: 34vw;
  opacity: 0;
  transition: opacity .4s ease, color .3s ease;
}
.mut-reel-credits.is-in{ opacity: 1; }
.mut-reel-credits--right{ right: var(--reel-gutter); text-align: right; }
.mut-reel-credits--left { left:  var(--reel-gutter); text-align: left; }
.mut-reel-credit{ display: flex; gap: 10px; }
.mut-reel-credits--right .mut-reel-credit{ justify-content: flex-end; }
.mut-reel-credits--left  .mut-reel-credit{ justify-content: flex-start; }
.mut-reel-credit span:first-child{ opacity: .45; }

/* ---------- pie: contador y filtros ---------- */
.mut-reel-foot{
  position: absolute;
  color: var(--reel-fg, #fff);
  transition: color .3s ease;
  z-index: 2;
  left: var(--reel-gutter);
  bottom: var(--reel-gutter);
  height: 22px;                 /* misma línea que los filtros y la flecha */
  display: flex;
  align-items: center;
  font-family: var(--reel-mono);
  font-size: 11px;
  opacity: .45;
}

@media (max-width: 768px){
  .mut-reel{ --reel-row: 20px; }
  .mut-reel-list{ font-size: 12px; }
  .mut-reel-credits{ bottom: calc(var(--reel-gutter) * 2.4); }
}

@media (prefers-reduced-motion: reduce){
  .mut-reel-cover{ transition-duration: .01ms; }
}

/* ---------- contraste ----------
   El JS mide el brillo de la zona del cover que queda debajo de cada texto y
   pone --reel-fg en claro u oscuro. Si no puede medir (medio de otro dominio,
   lienzo contaminado), cae en mix-blend-mode: difference, que también invierte.  */
.mut-reel.is-blend .mut-reel-list,
.mut-reel.is-blend .mut-reel-credits,
.mut-reel.is-blend .mut-reel-foot{
  mix-blend-mode: difference;
  color: #fff;
}


@media (max-width: 768px){
}

/* ---------- trabajos con recorrido horizontal ----------
   Un proyecto con más de una imagen se convierte en una tira: la rueda en
   horizontal (o el arrastre lateral) la recorre; la vertical sigue cambiando
   de proyecto.                                                              */
.mut-reel-cover.is-track{
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.mut-reel-cover.is-track::-webkit-scrollbar{ display: none; }
/* Cada imagen de la tira ocupa la pantalla entera, como el cover de siempre.
   Con `width:auto` una foto vertical no llegaba a los lados y se veía el fondo
   del bloque: esas bandas negras al estirar la ventana. Que hay más imágenes lo
   dicen los puntos y las flechas, no un trozo de la siguiente asomando. */
.mut-reel-cover.is-track > img,
.mut-reel-cover.is-track > video{
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  scroll-snap-align: start;
}
/* nada que forzar en la primera: todas miden lo mismo, una pantalla */
.mut-reel-cover.is-track > :first-child{ object-position: center; }

/* puntos: sólo cuando el proyecto activo es una tira. Abajo, en el centro, a
   la misma altura que el contador, con una flecha a cada lado. */
.mut-reel-dots{
  position: absolute;
  z-index: 3;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--reel-gutter);
  height: 22px;
  display: flex;
  align-items: center;
  gap: 7px;
  opacity: 0;
  pointer-events: none;
  color: var(--reel-fg, #fff);
  transition: opacity .25s ease, color .3s ease;
}
.mut-reel.has-track .mut-reel-dots{ opacity: 1; pointer-events: auto; }
.mut-reel-dot{
  width: 5px; height: 5px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  opacity: .45;
  transition: opacity .2s ease, background-color .2s ease;
}
.mut-reel-dot:hover{ opacity: .8; }
.mut-reel-dot.is-active{ opacity: 1; background: currentColor; }
.mut-reel-dot:focus-visible{ outline: 1px solid currentColor; outline-offset: 3px; }


/* ---------- a pantalla completa, fuera de la caja de la página ---------- */
/* A pantalla completa, fuera de la caja de la página.
   El ancho NO es `100vw`: `vw` incluye la barra de scroll vertical, así que en
   cualquier página con scroll el bloque salía entre 15 y 17 px más ancho que lo
   que se ve y asomaba por la derecha —el propio M3 lo canta en el aviso «la
   página se sale de lado»—. `--reel-vw` lo escribe el JS con el
   `clientWidth` del documento, que es el ancho real sin la barra. El `100vw` del
   fallback sólo actúa si el JS no ha corrido todavía. */
.mut-reel--bleed{
  width: var(--reel-vw, 100vw);
  max-width: var(--reel-vw, 100vw);
  margin-left: calc(50% - var(--reel-vw, 100vw) / 2);
  margin-right: calc(50% - var(--reel-vw, 100vw) / 2);
  margin-top: calc(var(--reel-head) * -1);   /* se mete bajo la cabecera fija */
}
/* Aqui NO va un `min-height: 100svh`. Se probo y es contraproducente: el suelo
   de la hoja gana al alto en linea que calcula el JS y el bloque se pasa de
   largo justo lo que mide la cabecera. El suelo ya lo pone la propia plantilla,
   que sale con `style="height: 100svh"` puesto: eso es lo que se ve mientras el
   JS no ha medido, y el JS solo lo afina. */

/* ---------- seguir bajando: circulo velado sobre la imagen ----------
   Minimal: un circulo de blanco translucido que se funde con el cover y una
   flecha blanca fina dentro. El velo lleva `backdrop-filter`, asi que toma el
   color de lo que tiene debajo en vez de taparlo: de ahi que se integre en la
   imagen en vez de posarse encima.
   NO lleva `mix-blend-mode`. Se probo y es justo el fallo que costo dos vueltas
   arreglar: con `difference` u `overlay` el boton desaparece del todo en los
   medios tonos. El borde finisimo es lo que lo mantiene legible sobre un cover
   claro sin necesidad de sombra.
   Va a la altura del contador y de los filtros. */
.mut-reel-next{
  position: absolute;
  z-index: 4;
  right: calc(var(--reel-gutter) - 8px);    /* el área de clic, no el circulo, se come el margen */
  bottom: calc(var(--reel-gutter) - 8px);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: #fff;                              /* la flecha, siempre blanca */
  cursor: pointer;
  opacity: .85;
  filter: none;
  transition: opacity .25s ease, background-color .25s ease, transform .25s ease;
}
.mut-reel-next:hover{
  opacity: 1;
  background: rgba(255, 255, 255, .24);
  transform: translateY(2px);
}
.mut-reel-next:focus-visible{ outline: 1px solid #fff; outline-offset: 3px; }

/* el asta de la flecha de seguir */
.mut-reel-next::before{
  content: "";
  grid-area: 1 / 1;
  width: 1px;
  height: 14px;
  background: currentColor;
  transform: translateY(-1px);
}
/* la punta */
.mut-reel-next::after{
  content: "";
  grid-area: 1 / 1;
  width: 7px; height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(3px) rotate(45deg);
}

/* ---------- las flechas, dibujadas por los propios botones ----------
   Antes el trazo vivia en un <i> vacio dentro del boton. Un <i> sin contenido
   es lo primero que se come cualquier saneador de HTML (el editor de Joomla lo
   hace al guardar): el boton llegaba vacio a produccion y no se veia NADA. Con
   pseudoelementos no hay nada que borrar. El <i>, si sobrevive, se esconde para
   no pintar dos veces. */
.mut-reel-next i,
.mut-reel-side i{ display: none; }

/* el asta de la flecha de seguir */
.mut-reel-next::before{
  content: "";
  grid-area: 1 / 1;
  width: 2px;
  height: 17px;
  background: currentColor;
  transform: translateY(-1px);
}
/* la punta */
.mut-reel-next::after{
  content: "";
  grid-area: 1 / 1;
  width: 9px; height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(3px) rotate(45deg);
}

/* las laterales siguen siendo galon fino, sin caja, con contorno propio */
.mut-reel-side::after{
  content: "";
  display: block;
  width: 16px; height: 16px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}
.mut-reel-side--prev::after{ transform: rotate(135deg) translate(-3px, -3px); }
.mut-reel-side--next::after{ transform: rotate(-45deg) translate(-3px, -3px); }

/* mientras el reel manda, la página no se mueve */
.mut-reel-page-locked{ overflow: hidden; }

/* mientras el reel manda, el dedo no arrastra la página */
.mut-reel.is-driving{ touch-action: none; }

/* ---------- flechas de la tira, a los lados de los puntos ----------
   Sólo aparecen cuando el proyecto que se ve es una tira. Van abajo, una a cada
   lado de los puntos y a la misma altura que el contador: anterior, puntos,
   siguiente, leído de izquierda a derecha como cualquiera espera.
   Se colocan una a una con `position: absolute` y NO con un div que las
   envuelva: M3 guarda el HTML del addon dentro del artículo, así que un cambio
   en la plantilla no llega a las páginas ya guardadas hasta que alguien las
   vuelve a abrir y guardar. Con la colocación en el CSS, el cambio entra solo.
   Los 78 px de separación dan de sobra: cinco imágenes son 53 px de puntos. */
.mut-reel-side{
  position: absolute;
  z-index: 4;
  bottom: calc(var(--reel-gutter) - 11px);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--reel-fg, #fff);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  filter: none;                 /* sin sombras en todo el addon */
  transition: opacity .25s ease, color .3s ease;
}
.mut-reel-side--prev{ left: calc(50% - 78px); }
.mut-reel-side--next{ left: calc(50% + 34px); }
.mut-reel.has-track .mut-reel-side{ opacity: .9; pointer-events: auto; }
.mut-reel.has-track .mut-reel-side[disabled]{ opacity: .18; pointer-events: none; }
.mut-reel-side:hover{ opacity: 1; }
.mut-reel-side:focus-visible{ outline: 1px solid currentColor; outline-offset: 4px; }
.mut-reel.is-blend .mut-reel-side{ color: #fff; }
/* Sin sombra, por decision de diseno: nada de sombras en el addon. Lo que
   mantiene legibles estas flechas es el color, que sigue a `--reel-fg` —tinta
   sobre cover claro, blanco sobre cover oscuro—, medido por el brillo. El unico
   caso en que no se puede medir es un medio servido desde otro dominio: ahi el
   lienzo queda contaminado y la flecha se queda blanca. Si eso pasa, la salida
   es servir el medio desde el propio dominio, no taparlo con una sombra. */
.mut-reel-side i{
  display: block;
  width: 16px; height: 16px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}
.mut-reel-side--next i{ transform: rotate(-45deg) translate(-3px, -3px); }
.mut-reel-side--prev i{ transform: rotate(135deg) translate(-3px, -3px); }

/* con tiras en el bloque, los textos se apartan del borde */
/* Los controles de la tira están abajo en el centro, así que ni los títulos ni
   los créditos tienen ya que apartarse de ningún borde. */

@media (max-width: 768px){
  .mut-reel-side{ display: none; }   /* en el móvil se arrastra con el dedo; los puntos se quedan */
}