/* ══════════════════════════════════════════════════════════════════
   COP · TÍTULO DE SECCIÓN — ley fija (12/09/2026)
   ------------------------------------------------------------------
   Franco: *«necesito que utilices exactamente el mismo diseño con ese
   mismo título, tamaño de fuente y logo de play que usás en la página
   de explorar»* — y lo pidió para CUATRO lugares distintos (los dos
   títulos del inicio, «Mis grupos» y «Próximos partidos»).

   ⚠⚠ POR ESO ES UN COMPONENTE Y NO UN ESTILO COPIADO. Escrito cuatro
   veces, en dos semanas no se parecen: es exactamente lo que pasó con
   las cuatro tarjetas de historial, donde Franco pidió un cambio y
   apareció en una sola. **Todo título de sección de la app nace así**,
   igual que el botón desde el 05/09.

   ⚠ EL DISEÑO NO ES NUEVO: son las reglas de `.ex-head` / `.ex-ico` /
   `.ex-titulo` de `explorar.html`, mudadas tal cual. Y explorar pasó a
   usar este archivo, así que no puede separarse de lo que copia el
   resto — que es la única forma de que la regla dure.

   Marcado (lo arma `COPTitulo.html()`, o se escribe a mano y el módulo
   le rellena el ícono):

     <div class="cop-tsec">
       <div class="cop-tsec-fila">
         <span class="cop-tsec-ico" data-cop-ico="vivo"></span>
         <h2 class="cop-tsec-txt">En Vivo Ahora</h2>
         <a class="cop-tsec-link" href="…">Ver todo</a>
       </div>
       <p class="cop-tsec-sub">bajada opcional</p>
     </div>

   ⚠ LA BAJADA VA ADENTRO DEL BLOQUE y no como hermana. Así el aire
   entre el título y su bajada (`--gap-xs`) y el aire hasta el contenido
   (`--gap-md`) los decide el componente, y una pantalla sin bajada no
   tiene que inventar ningún margen. Como hermana habría hecho falta
   `:has()` para anular el margen del título, y un componente no se
   apoya en un selector que puede no estar.
   ══════════════════════════════════════════════════════════════════ */

/* ⚠⚠ MISMO AIRE ARRIBA QUE ABAJO (Franco, 17/09/2026): *«mantené como
   regla la misma distancia arriba y abajo de ese título»*. Antes era
   `0` arriba y `.7rem` abajo, y el aire de arriba lo ponía —o no— cada
   pantalla: en la portada lo daba un `gap` de la columna (1.1rem), en
   escritorio no lo daba nadie (`.2rem`) y en Arena era un margen propio
   (1.1rem). **Tres pantallas, tres distancias, para el mismo título.**
   Ahora el aire lo pone el título y ninguna pantalla decide el suyo. */
.cop-tsec{
  margin: var(--gap-tsec, 1.1rem) 0;
}
/* ⚠⚠ ACÁ HUBO UN `.cop-tsec:first-child{margin-top:0}` Y DURÓ UNA
   CAPTURA (17/09/2026). La idea era que el primer título de una pantalla
   no llevara aire arriba. Lo que no vi es que en la portada **cada
   título es el primer hijo de su propia sección**, así que la regla se
   los comía a TODOS: la captura mostraba «Modos de Juego» pegado al
   banner y «En Vivo Ahora» pegado a los nombres de los modos —
   justo lo contrario de lo que Franco pidió.
   ⚠ La lección es del sistema, no de esta regla: `:first-child` cuenta
   por PADRE, y un componente no sabe quién va a ser su padre. Mismo
   error que el `:first-of-type` de Arena, que le daba el margen de
   «primero» a «Minijuegos» por ser el único `<p>` de su pestaña.
   **El título lleva su aire SIEMPRE, y la pantalla que no lo quiera lo
   dice ella.** */
.cop-tsec[hidden]{ display: none }

.cop-tsec-fila{
  display: flex;
  align-items: center;
  gap: var(--gap-sm, .5rem);
}
/* ⚠ EL `[hidden]` PROPIO: la fila declara `display`, y `hidden` esconde
   con el `display:none` de la hoja del NAVEGADOR, que pierde contra
   cualquier `display` de autor. Van DIEZ apariciones de este bug. */
.cop-tsec-fila[hidden]{ display: none }

/* ── el ícono ────────────────────────────────────────────────────────
   ⚠ La caja mide 26 y el dibujo 22: el aire de los 2 px de cada lado es
   lo que lo deja a la misma altura óptica que la letra. Sin caja, un
   ícono de 22 pegado al texto se lee más grande que el título. */
.cop-tsec-ico{
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid; place-items: center;
}
.cop-tsec-ico[hidden]{ display: none }
.cop-tsec-ico svg{ width: 22px; height: 22px; display: block }
/* ⚠ SIN ÍCONO NO QUEDA EL HUECO: un cuadrado vacío de 26 px corre el
   título y esa sección se lee desalineada contra las que sí lo tienen. */
.cop-tsec-ico:empty{ display: none }

/* ── el texto ────────────────────────────────────────────────────────
   ⚠ Inter 800 a `--fs-xl` (1.2rem) y BLANCO. El acento de la
   competencia va en el ÍCONO, nunca en el cuerpo del texto — regla 6
   del sistema.
   ⚠ `--fs-xl` y no `--fs-2xl`: el techo del texto es 1.5rem y un título
   de sección no es el título de la pantalla. */
.cop-tsec-txt{
  flex: 1 1 auto; min-width: 0;
  margin: 0;
  font-family: var(--texto, 'Inter', system-ui, sans-serif);
  font-weight: 800;
  font-size: var(--fs-xl, 1.3rem);
  line-height: var(--lh-tight, 1.1);
  letter-spacing: -.2px;
  /* ⚠⚠ `text-transform:none` NO ES DECORACIÓN, ES DEFENSA — y lo cazó la
     CAPTURA, no una medición (12/09/2026). `app.html` trae un reset
     `h1,h2,h3{font-family:Anton; text-transform:uppercase}`: el título
     salía «EN VIVO AHORA» en el inicio y «En Vivo Ahora» en Explorar, o
     sea DOS variantes del mismo título — exactamente lo que este
     componente vino a eliminar. La familia y el peso los ganaba la clase
     (0-1-0 contra 0-0-3), pero lo que el componente no declara, lo
     decide la página. **Un componente no puede depender de que la
     página no tenga un reset.** */
  text-transform: none;
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── el enlace de la derecha («Ver todo») ───────────────────────────── */
.cop-tsec-link{
  flex: 0 0 auto;
  font-family: var(--texto, 'Inter', system-ui, sans-serif);
  font-size: var(--fs-md, .88rem);
  font-weight: 700;
  color: var(--primary, #0c95eb);
  white-space: nowrap;
  text-decoration: none;
}
.cop-tsec-link[hidden]{ display: none }
/* ⚠ Hover SÓLO con puntero de verdad: en el teléfono el navegador lo
   simula al apoyar el dedo y deja pintado lo que se tocó (regla 10). */
@media (hover: hover) and (pointer: fine){
  .cop-tsec-link:hover{ color: #fff }
}

.cop-tsec-sub{
  margin: var(--gap-xs, .3rem) 0 0;
  font-family: var(--texto, 'Inter', system-ui, sans-serif);
  font-size: var(--fs-md, .88rem);
  line-height: var(--lh-base, 1.3);
  font-weight: 500;
  color: var(--text-dim, #9aa3b5);
}
.cop-tsec-sub[hidden]{ display: none }

/* ⚠ LA ACCIÓN DE LA DERECHA (21/09/2026): un botón chico en la línea
   del título, en el mismo hueco donde va el enlace «Ver todo». Se
   estila acá y no en cada pantalla porque lo van a pedir varias — la
   primera fue «Crear copa» en grupos.
   ⚠ `margin-left:auto` y no `space-between` en la fila: la fila lleva
   ícono, título y acción, y `space-between` separaría también el ícono
   del título. */
.cop-tsec-fila > .cop-b{ flex:0 0 auto; margin-left:auto }