/* ====================================================================
 * LOS REELS — quince Shorts en vertical, reproduciendose solos
 * PHP: inc/reels.php   ·   JS: assets/js/reels.js
 * ==================================================================== */

.cm-reels {
  padding-block: clamp(56px, 8vw, 110px);
  background: var(--noche, #0E0E0E);
  /*
   * Un halo ambar muy tenue detras de la rejilla. Sobre negro puro, quince
   * recuadros de video se leen como una hoja de contactos; con el halo, la
   * seccion tiene centro y las piezas parecen estar iluminadas por algo.
   */
  background-image: radial-gradient(120% 60% at 50% 0%, rgba(247, 173, 6, .13), transparent 62%);
}

.cm-reels__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
  margin-bottom: clamp(28px, 4vw, 48px);
}

/* La nota larga está en galeria.css: el mínimo del clamp dejaba este titular en
   32 px en el teléfono mientras el resto de la portada sube a 44,9. El tope de
   escritorio no se mueve. */
.cm-reels__titulo {
  margin: 8px 0 0;
  font-family: var(--fuente-titulo);
  font-size: clamp(min(11.5vw, 3.6rem), 5vw, 3.6rem);
  line-height: 1;
  color: var(--blanco, #FFF);
}

.cm-reels__bajada {
  margin: 12px 0 0;
  max-width: 52ch;
  color: rgba(255, 255, 255, .68);
  line-height: 1.6;
}

/*
 * LA PISTA DE «SIN SONIDO».
 *
 * Los reels arrancan mudos por obligacion del navegador, no por gusto. Sin
 * avisar, un visitante da por hecho que las piezas no tienen audio y nunca toca
 * el altavoz — se pierde la mitad del trabajo. Esta linea lo dice una vez, en
 * pequeno, y no vuelve a molestar.
 */
.cm-reels__pista {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  font-size: .82rem;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .72);
  white-space: nowrap;
}

/* --- La rejilla ---------------------------------------------------- */

.cm-reels__lista {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * 5 → 3 → 2 COLUMNAS, Y NUNCA 4.
 *
 * Son quince reels, y quince es divisible entre 5 y entre 3. Con cuatro columnas
 * la última fila sale con tres piezas y un hueco, que no se lee como diseño sino
 * como una imagen que no cargó.
 *
 * Por eso las cinco columnas aguantan hasta los 900px: a ese ancho cada pieza
 * mide unos 165px, que en formato vertical sigue siendo una imagen legible. Se
 * salta directamente a tres.
 */
@media (max-width: 900px) { .cm-reels__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (max-width: 560px) {
  .cm-reels__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /*
   * A DOS COLUMNAS SE ENSEÑAN CATORCE.
   *
   * Quince entre dos deja uno solo en la última fila, y ese hueco al lado es
   * exactamente lo que parece un fallo de carga. Con catorce cierran siete filas
   * completas. Se hace en CSS y no en PHP para que el mismo marcado valga en los
   * tres tamaños.
   */
  .cm-reels__pieza:nth-child(15) { display: none; }
}

/*
 * 9:16 EN LA CASILLA, NO EN LO QUE LLEVA DENTRO.
 *
 * La proporcion la fija el hueco. Asi la rejilla no da NINGUN salto cuando la
 * miniatura se sustituye por el reproductor y viceversa — y aqui eso pasa
 * constantemente, cada vez que un reel entra o sale de la pantalla. Si la altura
 * dependiese del contenido, bajar por la pagina seria un temblor continuo.
 */
.cm-reels__casilla {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  transition: transform 420ms cubic-bezier(.22, .8, .3, 1),
              box-shadow 420ms ease;
}

/* Todo lo que va dentro llena la casilla y se apila en el mismo sitio. */
.cm-reel__miniatura,
.cm-reel__marco,
.cm-reel__enlace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/*
 * LA MINIATURA DE YOUTUBE ES 16:9 Y EL HUECO ES 9:16.
 *
 * `hqdefault` viene apaisada con dos franjas negras arriba y abajo. Metida en un
 * hueco vertical con `cover`, se amplia hasta llenarlo y las franjas quedan
 * fuera: se ve el centro del fotograma, que en un Short es justo donde esta la
 * accion. Sin `cover` se verian dos barras negras enormes a los lados.
 */
.cm-reel__miniatura {
  object-fit: cover;
  z-index: 1;
}

.cm-reel__marco {
  border: 0;
  z-index: 2;
}

/*
 * EL REPRODUCTOR ENTRA CON UN FUNDIDO.
 *
 * YouTube tarda un instante en pintar el primer fotograma, y durante ese
 * instante el iframe es un rectangulo NEGRO encima de la miniatura. Sin el
 * fundido, bajar por la pagina es ver parpadear recuadros negros. Con el, la
 * miniatura se mantiene visible debajo hasta que hay imagen de verdad.
 */
@keyframes cm-reel-entra { from { opacity: 0; } to { opacity: 1; } }

.cm-reel__marco { animation: cm-reel-entra 420ms ease 220ms both; }

/* --- El enlace al Short --------------------------------------------- */

/*
 * TODA LA CASILLA ES UN ENLACE, Y VA ENCIMA DEL REPRODUCTOR.
 *
 * Por dos razones. La primera es de uso: tocar la pieza lleva al Short completo
 * en YouTube, que es lo que alguien quiere al ver algo que le interesa.
 *
 * La segunda es tecnica y menos evidente: un iframe de YouTube se queda con
 * TODOS los toques que reciba, y con `controls=0` un toque pausa el video sin
 * ningun aviso visible. El visitante toca, la pieza se congela y parece rota.
 * Esta capa por encima intercepta el toque antes de que llegue ahi.
 */
.cm-reel__enlace {
  z-index: 3;
  display: block;
}

.cm-reel__enlace:focus-visible {
  outline: 3px solid var(--ambar, #F7AD06);
  outline-offset: -3px;
  border-radius: 14px;
}

/* --- El botón de sonido --------------------------------------------- */

.cm-reel__sonido {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 4;                 /* por encima del enlace, o no se podria pulsar */
  display: grid;
  place-items: center;
  /*
   * 44px, no 40 y desde luego no 28: 44 es el minimo tactil y esto es un boton
   * que hay que acertar con el pulgar sobre una imagen en movimiento. Estaba en
   * 40 y en una tableta de 768 —donde la rejilla sigue siendo rejilla— era el
   * unico objetivo del sitio por debajo del minimo. En el carril del telefono
   * sube a 48; ver el bloque del final del archivo.
   */
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #FFF;
  cursor: pointer;
  transition: background 220ms ease, transform 220ms ease;
}

.cm-reel__sonido:hover { background: rgba(0, 0, 0, .78); transform: scale(1.08); }

.cm-reel__sonido:focus-visible {
  outline: 3px solid var(--ambar, #F7AD06);
  outline-offset: 2px;
}

/* Con sonido activo, el botón se pone del ámbar de la marca: se ve de un
   vistazo cuál de los quince está sonando. */
.cm-reels__casilla--sonando .cm-reel__sonido {
  background: var(--ambar, #F7AD06);
  color: var(--ambar-tinta, #101010);
}

/* El icono cambia de tachado a ondas según el estado. Un solo SVG con los dos
   trazos dentro, y el CSS enseña el que toca — sin JavaScript pintando rutas. */
.cm-reel__alto { display: none; }
.cm-reels__casilla--sonando .cm-reel__mudo { display: none; }
.cm-reels__casilla--sonando .cm-reel__alto { display: block; }

/* --- Al pasar por encima -------------------------------------------- */

/*
 * `@media (hover: hover)` OBLIGATORIO.
 *
 * En una pantalla tactil el navegador EMULA el hover al tocar y NO lo retira: la
 * pieza tocada se quedaria levantada y con halo hasta tocar en otro sitio. Ya
 * pasó una vez en el mosaico de este mismo tema.
 */
@media (hover: hover) {
  .cm-reels__casilla:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55),
                0 0 0 2px var(--ambar, #F7AD06);
  }
}

/* --- Movimiento reducido -------------------------------------------- */

/*
 * SIN AUTOMATISMO NINGUNO.
 *
 * Quince videos moviendose solos es exactamente lo que esta preferencia existe
 * para evitar. El JavaScript no arranca nada; aqui se pinta el play encima de la
 * miniatura para que se vea que la pieza SE PUEDE reproducir — si no, parecen
 * fotos y nadie las toca.
 */
@media (prefers-reduced-motion: reduce) {
  .cm-reels__casilla { transition: none; }
  .cm-reels__casilla:hover { transform: none; }
  .cm-reel__marco { animation: none; }

  /* El círculo ámbar. */
  .cm-reel__enlace::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;
    border-radius: 999px;
    background: var(--ambar, #F7AD06);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  }

  /* El triángulo, hecho con bordes: ni imagen ni SVG. Va en `::after` porque se
     pinta después que `::before` y tiene que quedar ENCIMA del círculo. */
  .cm-reel__enlace::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -11px 0 0 -6px;   /* corrimiento óptico: la masa del triángulo tira
                                 a la izquierda del centro matemático */
    border-style: solid;
    border-width: 11px 0 11px 17px;
    border-color: transparent transparent transparent var(--ambar-tinta, #101010);
  }
}


/* ====================================================================
 * EL CARRIL — un reel, una pantalla
 * --------------------------------------------------------------------
 * VA AL FINAL DEL ARCHIVO y no es manía de orden: la regla de 560 px
 * esconde la casilla 15 para que no quede una fila coja, y aquí hay que
 * devolverla. Con la misma especificidad solo gana la que va después.
 *
 * POR QUÉ CARRIL Y NO UNA REJILLA MÁS GRANDE. Medido a 390x844: en dos
 * columnas cada pieza medía 172x306 px, MENOS que los 262x466 que le da
 * un escritorio de 1440. Un vertical rodado para un teléfono se veía más
 * pequeño en el teléfono que en el ordenador. Y a 172 px de ancho la
 * barra de título de YouTube, el avatar y la marca de agua tapan casi la
 * mitad del encuadre: se ve la interfaz de YouTube, no el trabajo.
 *
 * En carril la pieza pasa a ~296x527 —casi el triple de área, y más
 * grande que en escritorio— y la sección baja de 2.549 px a unos 875.
 * ==================================================================== */

@media (max-width: 700px) {

  /* Se aprieta: lo que tiene que caber es el vídeo, no la cabecera. */
  .cm-reels { padding-block: 40px 32px; }

  /* El halo se refuerza porque la sección va ahora PEGADA al hero, y dos
     superficies oscuras seguidas se leen como una sola. El halo, junto con la
     línea ámbar del borde del hero, es la costura entre las dos. */
  .cm-reels {
    background-image: radial-gradient(140% 55% at 50% 0%, rgba(247, 173, 6, .20), transparent 60%);
  }

  .cm-reels__cabeza { display: block; margin-bottom: 16px; }
  .cm-reels__bajada { margin-top: 6px; font-size: var(--fs-chico); }
  .cm-reels__pista  { margin-top: 12px; font-size: .78rem; padding: 6px 12px; }

  .cm-reels__lista {
    display: flex;
    grid-template-columns: none;   /* desarma la rejilla de 5/3/2 columnas */
    gap: 12px;

    margin-inline: calc(var(--canal) * -1);
    padding-inline: var(--canal);

    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    /* NADA de `touch-action: pan-x` aqui: secuestra el scroll vertical en vez
       de protegerlo. La nota larga, con la medida, esta en galeria.css. */
    scrollbar-width: none;
  }
  .cm-reels__lista::-webkit-scrollbar { display: none; }

  /*
   * EL ANCHO LO LLEVA EL ENVOLTORIO, no la casilla: desde que el nombre de la
   * marca va debajo, el elemento del carril es el <li>. Ponerlo en la casilla
   * dejaba las quince piezas apretadas en tiras de nada. Medido el 2026-08-23.
   *
   * Manda 76vw, salvo en pantallas bajas. El tope en `svh` garantiza que la
   * pieza entera quepa junto a su titular sin medir teléfono por teléfono:
   * como la altura sale del 9:16, limitando el ANCHO se limita el alto. La
   * primera línea es el respaldo para navegadores sin `svh`.
   */
  .cm-reels__pieza {
    flex: 0 0 min(76vw, 35vh);
    flex-basis: min(76vw, 35svh);
    scroll-snap-align: center;
  }

  .cm-reels__casilla { border-radius: 18px; }

  /*
   * VUELVEN LOS QUINCE.
   * Esconder el 15 existía porque a dos columnas dejaba una fila coja. En un
   * carril no hay filas, y esconder trabajo pagado no tiene justificación.
   */
  .cm-reels__pieza:nth-child(15) { display: block; }

  /*
   * EL ARO ÁMBAR DICE CUÁL ESTÁ VIVO.
   *
   * La clase la pone el guion desde siempre y NO tenía ni una regla de CSS. Con
   * un solo reproductor a la vez es la única señal de qué se está reproduciendo
   * y qué sigue siendo una foto quieta.
   */
  .cm-reels__casilla--vivo {
    box-shadow: 0 0 0 2px var(--ambar), 0 16px 36px rgba(0, 0, 0, .6);
  }

  /* Aquí sí hay sitio: el altavoz pasa de 40 a 48 px y deja de incumplir el
     mínimo táctil de 44. Se separa de la esquina para no pisar el subtítulo
     quemado que traen algunos reels en la banda inferior. */
  .cm-reel__sonido { width: 48px; height: 48px; right: 12px; bottom: 12px; }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .cm-reels__lista { scroll-snap-type: x proximity; scroll-behavior: auto; }
}

/* ==================================================================
   LO QUE SE AÑADIÓ PARA QUE ESTO SEA UN PORTAFOLIO Y NO UN CONTACTOS
   ==================================================================
   La sección era un título, una bajada y quince casillas iguales. Se ve
   el trabajo pero no se lee: quien mira no sabe para quién es cada pieza
   ni qué hacer después. Tres añadidos, y cada uno tapa una de esas cosas.
   ================================================================== */

/* --- Las cifras: qué tamaño tiene esto ----------------------------- */

.cm-reels__cifras {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
  margin: var(--e-3) 0 0;
  padding: 0;
  list-style: none;
}

/* Sin el separador vertical de las listas del pie: esta va en fila. */
.cm-reels__cifras li + li { margin-top: 0; }

.cm-reels__cifras li {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: .84rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

.cm-reels__cifras b {
  font-family: var(--fuente-titulo, inherit);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ambar);
  line-height: 1;
}

/* --- El pie: de quién es cada pieza -------------------------------- */

/*
 * VA DEBAJO, NO ENCIMA. Se probó encima y no se veía: el iframe de YouTube y
 * el enlace de respaldo se pintan después y lo tapaban. Subirlo con z-index lo
 * habría dejado peleando con los adornos del propio reproductor —el avatar del
 * canal arriba, el logo de YouTube abajo—, que no controlamos.
 *
 * Debajo no pelea con nada y es como se rotula un portafolio de siempre.
 */
.cm-reels__pieza {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.cm-reel__marca {
  margin: 0;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .74);
  /* Un nombre largo no ensancha su columna ni parte la rejilla. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- El cierre: la sección acaba en una puerta --------------------- */

.cm-reels__cierre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.cm-reels__cierre-texto {
  margin: 0;
  font-family: var(--fuente-titulo, inherit);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--hueso);
}

/* En el teléfono el cierre se apila y el botón ocupa el ancho: un botón
   de media línea al final de una sección larga se salta. */
@media (max-width: 640px) {
  .cm-reels__cierre { flex-direction: column; align-items: stretch; }
  .cm-reels__cierre-texto { text-align: left; }
  .cm-reels__cierre .cm-btn { justify-content: center; }
}

/* --- La muestra de la portada -------------------------------------- */

/*
 * SEIS PIEZAS Y A TRES COLUMNAS, no quince a cinco.
 *
 * El dueño: «no me cuadra esta sección de tantos vídeos». Quince piezas
 * verticales en la portada son casi 2.500 px de alto y quince reproductores de
 * YouTube peleando por la conexión — eso es el catálogo entero en el
 * escaparate. La misma sección ya vivía en /proyectos/, así que ahí se quedan
 * las quince y aquí va la muestra.
 *
 * TRES COLUMNAS Y SEIS PIEZAS CUADRA EN TODOS LOS ANCHOS: dos filas exactas a
 * tres, tres filas exactas a dos, y un carril en el teléfono. Con cinco piezas
 * quedaba una fila coja en algún ancho, y una fila coja se lee como un fallo
 * de carga. Y de paso las casillas son casi el doble de grandes, que en una
 * sección cuyo argumento es el vídeo importa más que la cantidad.
 */
.cm-reels__lista--muestra {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .cm-reels__lista--muestra { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .cm-reels__lista--muestra { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   CUATRO COLUMNAS Y «VER MÁS» — 2026-08-26
   ==========================================================================
   El dueño: «que sean cuatro videos, cuatro columnas... y un botón de ver
   más y ahí se abran los demás». La muestra pasa de 3 columnas a 4, y las
   piezas de más allá del tope viven escondidas hasta que el botón las abre
   (o hasta que un <noscript> las desesconde, si no hay guion).
   ========================================================================== */

.cm-reels__lista--muestra {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .cm-reels__lista--muestra { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cm-reels__pieza--guardada { display: none; }

.cm-reels__pie-lista {
  display: flex;
  justify-content: center;
  margin-top: var(--e-4, 32px);
}