@charset "utf-8";
/* =========================================================================
   TACOTE MX · FICHA DEL BREAK
   Hoja complementaria de index.html. Se enlaza DESPUÉS de sistema.css y no
   la sustituye: sólo (a) corrige lo que la auditoría marcó y (b) añade los
   componentes que la página del break necesitaba y no existían.

   Regla de esta hoja: cero valores sueltos. Todo sale de un token de
   sistema.css; los tres tokens nuevos se declaran arriba y se justifican.

   FORMA, PARA QUE NO SE VUELVA UN TABLERO
   Después de la decisión (producto → hora → lugares) la página no apila
   recuadros: se convierte en un EXPEDIENTE. Una sola columna de contenido
   con un margen izquierdo numerado y fijo, filetes de 1px como única
   separación, cero tarjetas, cero sombras, cero esquinas redondeadas.
   Es un documento técnico, no un panel de métricas.
   ========================================================================= */


/* =========================================================================
   1. CORRECCIONES AL SISTEMA
   Todo lo de esta sección viene del informe de auditoría. Va aquí y no en
   sistema.css porque sistema.css es intocable en este encargo.
   ========================================================================= */

:root {

    /* --- Tokens nuevos ------------------------------------------------- */

    /* Margen numerado del expediente. Cabe "01" + una versalita de dos
       palabras sin partirse, y deja la columna de lectura por encima de
       --ancho-lectura en 1120px. */
    --col-rail: 132px;

    /* Columna de "cuándo" en los renglones de agenda: cabe "SÁB 9 AGO ·
       22:30" en cifras tabulares sin envolver. */
    --col-cuando: 132px;

    /* Columna de etiqueta en los pares campo/valor. */
    --col-par: 216px;

    /* --- Contraste ------------------------------------------------------
       --t-4 se usaba en texto de 11-12px que sustituye al color ("Apartado",
       "MXN", los sellos). #65635E sobre el fondo da 3,17:1, por debajo del
       4,5:1 que exige AA en texto pequeño. Sube a 4,4:1 y el valor viejo se
       conserva como --t-5, ya sólo para trazos decorativos. */
    --t-4: #7C7973;
    --t-5: #65635E;

    /* --- Categorías por luminosidad -------------------------------------
       sistema.css promete que "la categoría se lee por LUMINOSIDAD" y luego
       pinta la premium de oro: con el orden por categoría, los 7 clubes
       premium ponían 14 marcas doradas en la primera pantalla, contra el
       límite de dos o tres que la propia hoja declara. Ahora la escalera es
       monocroma de verdad y el oro queda para la marca. */
    --cat-premium: var(--t-1);
    --cat-alto:    var(--t-2);
    --cat-medio:   var(--t-3);
    --cat-bajo:    var(--t-5);
}

/* El anillo de foco deja de ser dorado: era el tercer uso del oro en la
   misma pantalla y compite con el logotipo. Blanco = máxima jerarquía. */
:focus-visible { outline-color: var(--pri-alto); }

/* La versalita de categoría, en el mismo monocromo que su filete. */
.equipo.t-premium .tier { color: var(--t-2); }

/* "Libres" no es un estado de pago, así que no se pinta de verde: se
   jerarquiza por luminosidad, que es lo que manda el sistema. El número que
   importa es el de lugares libres, y por eso es el más claro. */
.c-total b       { color: var(--t-2); }
.c-disponibles b { color: var(--t-1); }
.c-apartados b   { color: var(--t-2); }

/* Cargando ≠ deshabilitado. #65635E sobre #292723 daba 2,40:1 y el texto
   "Apartando..." era ilegible justo en el segundo que más importa. */
.boton:disabled {
    background: var(--s-4);
    color: var(--t-2);
}
/* Sin movimiento, el punto de compás se queda fijo pero visible: bajo
   prefers-reduced-motion la animación se detiene y antes no quedaba ninguna
   señal de que el botón estaba trabajando. */
@media (prefers-reduced-motion: reduce) {
    .boton:disabled::after { opacity: 1; }
}

/* Bloqueo del desplazamiento de fondo mientras la ventana está abierta.
   Es lo único de la trampa de foco que se puede resolver sin tocar el JS. */
body:has(.velo.abierta) { overflow: hidden; }

/* El separador de los filtros traía el color en un atributo style, contra la
   regla de "ningún número suelto en un componente". Aquí queda con clase. */
.filtros > span.corte {
    width: var(--grosor-1);
    background: var(--b-2);
}


/* =========================================================================
   2. LA LISTA DE CLUBES COMO CHECKLIST
   A 1120px la cuadrícula daba tres columnas y CSS Grid llena por RENGLONES:
   el ojo bajaba por columnas y el orden por precio se leía mal. Multicolumna
   fluye en vertical, así que la numeración corre 01-17 a la izquierda y
   18-33 a la derecha, y la lista se lee como la hoja del break.
   ========================================================================= */

.rejilla {
    display: block;
    columns: 2;
    column-gap: var(--e-64);
    counter-reset: club;
}
.equipo {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    counter-increment: club;
    padding-left: var(--e-40);
}
/* Folio de renglón en el margen: cifra tabular, monoespaciada y apagada.
   No es decoración: es el número que el breaker canta frente a la cámara. */
.equipo::after {
    content: counter(club, decimal-leading-zero);
    position: absolute;
    left: var(--e-12);
    top: var(--e-12);
    font-family: var(--fuente-mono);
    font-size: var(--f-11);
    line-height: var(--lh-16);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    color: var(--t-5);
}
.equipo.ocupado::after { opacity: .6; }


/* =========================================================================
   3. PORTADA
   ========================================================================= */

/* -------------------------------------------------------------------------
   3.1 El lomo de la caja
   Sustituye al cuadrado gris con una cruz, que era un marcador de posición
   ocupando el lugar de honor. Mientras no haya foto del producto, lo que se
   dibuja es el LOMO de la caja compuesto con tipografía: año, marca, línea y
   el sello de caja sellada. Dice qué caja es, que es justo lo que un icono
   neutro no decía.
   ------------------------------------------------------------------------- */

.portada-imagen {
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-items: start;
    justify-items: stretch;
    text-align: left;
    gap: var(--e-16);
    /* Degradado de dos superficies vecinas (3% de luminosidad de diferencia):
       da la sensación de cartón sin convertirse en un fondo decorativo. */
    background: linear-gradient(160deg, var(--s-2) 0%, var(--s-app) 100%);
}
.lomo-tipo {
    display: flex;
    align-items: center;
    gap: var(--e-8);
    font-size: var(--f-11);
    line-height: var(--lh-11);
    letter-spacing: var(--tr-versalita);
    text-transform: uppercase;
    font-weight: var(--p-medio);
    color: var(--t-4);
}
.lomo-tipo i {
    flex: 1;
    height: var(--grosor-1);
    background: var(--b-1);
}
.lomo-centro { align-self: end; display: grid; gap: var(--e-4); }
.lomo-anio {
    font-size: var(--f-40);
    line-height: var(--lh-40);
    letter-spacing: var(--tr-40);
    font-weight: var(--p-fuerte);
    font-variant-numeric: tabular-nums;
    color: var(--t-1);
}
.lomo-anio span { color: var(--t-4); font-weight: var(--p-normal); }
.lomo-sello {
    padding-top: var(--e-12);
    border-top: var(--grosor-1) solid var(--b-2);
    font-size: var(--f-11);
    line-height: var(--lh-11);
    letter-spacing: var(--tr-versalita);
    text-transform: uppercase;
    font-weight: var(--p-medio);
    color: var(--t-3);
}

/* -------------------------------------------------------------------------
   3.2 Rango de precios
   Cardsmiths y Mojobreak lo ponen en el listado porque es lo primero que
   decide si alguien entra. Aquí es una cotización de una sola línea, no dos
   azulejos con un número grande cada uno.
   ------------------------------------------------------------------------- */

.banda-precio {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--e-4) var(--e-12);
    padding: var(--e-12) 0;
    margin-bottom: var(--e-16);
    border-top: var(--grosor-1) solid var(--b-1);
}
.banda-precio .cifra-precio {
    font-size: var(--f-26);
    line-height: var(--lh-26);
    letter-spacing: var(--tr-26);
    font-weight: var(--p-fuerte);
    font-variant-numeric: tabular-nums;
    color: var(--t-1);
}
.banda-precio .guion {
    font-size: var(--f-16);
    color: var(--t-4);
}
.banda-precio .moneda {
    font-size: var(--f-11);
    letter-spacing: var(--tr-versalita);
    text-transform: uppercase;
    color: var(--t-4);
}
.banda-precio .segun {
    font-size: var(--f-12);
    line-height: var(--lh-16);
    letter-spacing: var(--tr-12);
    color: var(--t-3);
}

/* -------------------------------------------------------------------------
   3.3 Gancho de una línea
   El "qué puedes sacar" completo va abajo, en su tramo. Aquí sólo la frase
   que justifica seguir leyendo, con su ancla.
   ------------------------------------------------------------------------- */

.gancho {
    font-size: var(--f-13);
    line-height: var(--lh-lectura);
    letter-spacing: var(--tr-13);
    color: var(--t-2);
    max-width: var(--ancho-lectura);
    margin-bottom: var(--e-16);
}
.gancho a {
    color: var(--t-1);
    border-bottom: var(--grosor-1) solid var(--b-3);
    padding-bottom: var(--e-2);
    white-space: nowrap;
    transition: border-color var(--d-toque) var(--c-firme);
}
.gancho a:hover { border-bottom-color: var(--t-1); }

/* -------------------------------------------------------------------------
   3.4 Transmisión, en sus tres momentos
   Un solo bloque con tres estados excluyentes. El integrador cambia
   data-estado y no toca nada más.
   ------------------------------------------------------------------------- */

#transmision {
    padding: var(--e-16) 0;
    margin-bottom: var(--e-8);
    border-top: var(--grosor-1) solid var(--b-1);
}
#transmision .tm { display: none; }
#transmision[data-estado="antes"]   .tm-antes,
#transmision[data-estado="ahora"]   .tm-ahora,
#transmision[data-estado="despues"] .tm-despues {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--e-12) var(--e-16);
}
#transmision .boton { width: auto; min-width: var(--min-boton-ancho); }
.tm-texto {
    font-size: var(--f-13);
    line-height: var(--lh-lectura);
    letter-spacing: var(--tr-13);
    color: var(--t-3);
    max-width: var(--ancho-lectura);
}
.tm-texto b { color: var(--t-2); font-weight: var(--p-medio); }

/* Punto de estado apagado: mismo tamaño que .punto-vivo, sin halo y sin
   relleno. Sirve para decir "todavía no" sin encender un rojo que late. */
.punto-espera {
    width: var(--punto);
    height: var(--punto);
    border-radius: 50%;
    border: var(--grosor-1) solid var(--t-4);
    flex: 0 0 auto;
}

/* Indicador del encabezado: mismos tres estados que la transmisión, para que
   nunca digan cosas distintas. Deja de ser un adorno fijo. */
a.envivo { transition: color var(--d-toque) var(--c-firme); }
a.envivo:hover { color: var(--t-1); }
#estado-vivo .ev { display: none; }
#estado-vivo[data-estado="antes"]   .ev-antes,
#estado-vivo[data-estado="ahora"]   .ev-ahora,
#estado-vivo[data-estado="despues"] .ev-despues {
    display: inline-flex;
    align-items: center;
    gap: var(--e-8);
}


/* =========================================================================
   4. EL EXPEDIENTE
   Todo lo que va después de la decisión. Margen numerado a la izquierda,
   contenido a la derecha, filete entre tramos. Ni una caja.
   ========================================================================= */

.expediente {
    counter-reset: tramo;
    margin-top: var(--e-64);
    border-top: var(--grosor-1) solid var(--b-2);
}

.tramo {
    counter-increment: tramo;
    display: grid;
    grid-template-columns: var(--col-rail) minmax(0, 1fr);
    gap: var(--e-40);
    padding: var(--e-48) 0;
    border-bottom: var(--grosor-1) solid var(--b-1);
    scroll-margin-top: calc(var(--alto-encabezado) + var(--e-16));
}

/* El margen se queda quieto mientras el tramo se desplaza: siempre se sabe
   en qué parte del documento se está leyendo. */
.tramo-rail {
    position: sticky;
    top: calc(var(--alto-encabezado) + var(--e-24));
    align-self: start;
    display: grid;
    gap: var(--e-8);
}
.tramo-num {
    font-family: var(--fuente-mono);
    font-size: var(--f-12);
    line-height: var(--lh-12);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    color: var(--t-5);
}
.tramo-num::before { content: counter(tramo, decimal-leading-zero); }

.tramo-titulo {
    font-size: var(--f-26);
    line-height: var(--lh-26);
    letter-spacing: var(--tr-26);
    font-weight: var(--p-fuerte);
    margin-bottom: var(--e-8);
}
.tramo-bajada {
    font-size: var(--f-14);
    line-height: var(--lh-lectura);
    letter-spacing: var(--tr-14);
    color: var(--t-2);
    max-width: var(--ancho-lectura);
    margin-bottom: var(--e-24);
}
.tramo-bajada strong { color: var(--t-1); font-weight: var(--p-medio); }
/* La lista de reglas vive dentro de un tramo: su encabezado es el título del
   tramo, así que no lleva margen propio ni un segundo título. */
.tramo .reglas { margin-top: 0; }
.tramo .reglas ul { margin-bottom: var(--e-24); }
/* Subtítulo dentro de un tramo (el archivo de grabaciones): versalita, no un
   segundo título grande que compita con el del tramo. */
.sub-tramo {
    display: block;
    margin: var(--e-32) 0 var(--e-12);
}
.tramo-cierre {
    margin-top: var(--e-16);
    font-size: var(--f-12);
    line-height: var(--lh-16);
    letter-spacing: var(--tr-12);
    color: var(--t-4);
}

/* -------------------------------------------------------------------------
   4.1 Qué puede salir
   Mismo mecanismo que un renglón de club: filete de 2px, nombre a la
   izquierda, cifra tabular a la derecha. Un índice, no un catálogo.
   ------------------------------------------------------------------------- */

.chase-lista {
    display: grid;
    border-top: var(--grosor-1) solid var(--b-1);
    margin-bottom: var(--e-24);
}
.chase {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--e-16);
    row-gap: var(--e-2);
    padding: var(--e-12) var(--e-4) var(--e-12) var(--e-20);
    border-bottom: var(--grosor-1) solid var(--b-1);
}
.chase::before {
    content: "";
    position: absolute;
    left: 0;
    top: var(--e-16);
    bottom: var(--e-16);
    width: var(--grosor-2);
    background: var(--t-5);
    border-radius: var(--r-full);
}
/* Los tres que de verdad cambian una noche. Se distinguen por luminosidad
   del filete, igual que las categorías de los clubes. */
.chase.mayor::before { background: var(--t-1); }
.chase-nom {
    grid-area: 1 / 1;
    font-size: var(--f-16);
    line-height: var(--lh-16);
    letter-spacing: var(--tr-16);
    font-weight: var(--p-medio);
    color: var(--t-1);
}
.chase-desc {
    grid-area: 2 / 1;
    font-size: var(--f-13);
    line-height: var(--lh-lectura);
    letter-spacing: var(--tr-13);
    color: var(--t-3);
    max-width: var(--ancho-lectura);
}
.chase-tirada {
    grid-area: 1 / 2;
    justify-self: end;
    font-family: var(--fuente-mono);
    font-size: var(--f-13);
    line-height: var(--lh-16);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums slashed-zero;
    color: var(--t-2);
    white-space: nowrap;
}

.objetivos { padding-top: var(--e-16); border-top: var(--grosor-1) solid var(--b-1); }
.objetivos .etq { display: block; margin-bottom: var(--e-8); }
/* Uso 2 de 3 del oro en toda la página, y en otra pantalla que el logotipo:
   los nombres por los que la gente entra al break. */
.objetivos-lista {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-4) var(--e-12);
    font-size: var(--f-16);
    line-height: var(--lh-16);
    letter-spacing: var(--tr-16);
    color: var(--oro-txt);
}
.objetivos-lista span { display: inline-flex; align-items: center; gap: var(--e-12); }
.objetivos-lista span:not(:last-child)::after {
    content: "·";
    color: var(--t-5);
}

/* -------------------------------------------------------------------------
   4.2 Pares campo / valor
   Sirve para la resolución de cartas ambiguas y para los datos de entrega.
   Es una declaración, no una tabla de reporte: la etiqueta apagada a la
   izquierda, la sentencia a contraste pleno a la derecha.
   ------------------------------------------------------------------------- */

.pares { display: grid; border-top: var(--grosor-1) solid var(--b-2); }
.par {
    display: grid;
    grid-template-columns: minmax(0, var(--col-par)) minmax(0, 1fr);
    gap: var(--e-4) var(--e-32);
    padding: var(--e-16) 0;
    border-bottom: var(--grosor-1) solid var(--b-1);
}
.par-etq {
    font-size: var(--f-13);
    line-height: var(--lh-lectura);
    letter-spacing: var(--tr-13);
    color: var(--t-3);
}
.par-val {
    font-size: var(--f-14);
    line-height: var(--lh-lectura);
    letter-spacing: var(--tr-14);
    color: var(--t-2);
    max-width: var(--ancho-lectura);
}
.par-val strong { color: var(--t-1); font-weight: var(--p-medio); }
/* Modo sentencia: lo que se declara antes de romper el sello se lee más
   grande que el resto del documento, porque es lo que evita la discusión. */
.pares.declarada .par-val {
    font-size: var(--f-16);
    letter-spacing: var(--tr-16);
    color: var(--t-1);
}

/* -------------------------------------------------------------------------
   4.3 Tabla de configuración de la caja
   ------------------------------------------------------------------------- */

.tabla-config { border-top: var(--grosor-1) solid var(--b-2); }
.tabla-config th {
    width: var(--col-par);
    text-align: left;
    vertical-align: baseline;
    padding: var(--e-12) var(--e-32) var(--e-12) 0;
    border-bottom: var(--grosor-1) solid var(--b-1);
    font-size: var(--f-13);
    line-height: var(--lh-lectura);
    letter-spacing: var(--tr-13);
    font-weight: var(--p-normal);
    color: var(--t-3);
}
.tabla-config td {
    vertical-align: baseline;
    padding: var(--e-12) 0;
    border-bottom: var(--grosor-1) solid var(--b-1);
    font-size: var(--f-14);
    line-height: var(--lh-lectura);
    letter-spacing: var(--tr-14);
    font-weight: var(--p-medio);
    color: var(--t-1);
    font-variant-numeric: tabular-nums;
}
.tabla-config td small {
    display: block;
    margin-top: var(--e-2);
    font-size: var(--f-12);
    letter-spacing: var(--tr-12);
    font-weight: var(--p-normal);
    color: var(--t-3);
}

/* -------------------------------------------------------------------------
   4.4 Credenciales de la casa
   Las cifras que el gremio mira antes de transferirle dinero a un
   desconocido. Van en una línea separada por filetes, nunca en cuatro
   azulejos con un número grande.
   ------------------------------------------------------------------------- */

.credenciales {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-8) var(--e-16);
    padding-bottom: var(--e-16);
    margin-bottom: var(--e-16);
    border-bottom: var(--grosor-1) solid var(--b-1);
}
.credenciales > span {
    display: inline-flex;
    align-items: center;
    gap: var(--e-8);
    padding-left: var(--e-16);
    border-left: var(--grosor-1) solid var(--b-2);
    font-size: var(--f-13);
    line-height: var(--lh-13);
    letter-spacing: var(--tr-13);
    color: var(--t-2);
}
.credenciales > span:first-child { padding-left: 0; border-left: 0; }
.credenciales b {
    font-size: var(--f-16);
    line-height: var(--lh-16);
    letter-spacing: var(--tr-16);
    font-weight: var(--p-fuerte);
    font-variant-numeric: tabular-nums;
    color: var(--t-1);
}
/* Palomita dibujada con bordes: sin emoji, idéntica en todos los sistemas. */
.palomita {
    width: var(--e-12);
    height: var(--e-8);
    border-left: var(--grosor-2) solid var(--verde);
    border-bottom: var(--grosor-2) solid var(--verde);
    transform: rotate(-45deg) translateY(calc(var(--e-2) * -1));
    flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
   4.5 Renglón de agenda
   Un mismo componente para el archivo de grabaciones y para los otros
   breaks del mismo producto. Se lee como una parrilla de programación
   nocturna: cuándo, qué, cuánto. Sin imagen de caja y sin tarjeta.
   ------------------------------------------------------------------------- */

.lista-renglones { display: grid; border-top: var(--grosor-1) solid var(--b-1); }
.renglon {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, var(--col-cuando)) minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--e-4) var(--e-24);
    padding: var(--e-16) var(--e-4) var(--e-16) var(--e-20);
    border-bottom: var(--grosor-1) solid var(--b-1);
    color: inherit;
    transition: background-color var(--d-toque) var(--c-firme);
}
.renglon::before {
    content: "";
    position: absolute;
    left: 0;
    top: var(--e-16);
    bottom: var(--e-16);
    width: var(--grosor-2);
    background: var(--t-5);
    border-radius: var(--r-full);
}
a.renglon:hover { background: var(--s-1); }
.renglon.vivo::before { background: var(--rojo); }
.renglon.lleno::before { opacity: .35; }
.renglon-cuando {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: var(--e-8);
    font-family: var(--fuente-mono);
    font-size: var(--f-12);
    line-height: var(--lh-16);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
    color: var(--t-3);
    white-space: nowrap;
}
.renglon-que {
    grid-column: 2;
    grid-row: 1;
    font-size: var(--f-14);
    line-height: var(--lh-16);
    letter-spacing: var(--tr-14);
    font-weight: var(--p-medio);
    color: var(--t-1);
}
.renglon-nota {
    grid-column: 2;
    grid-row: 2;
    font-size: var(--f-12);
    line-height: var(--lh-16);
    letter-spacing: var(--tr-12);
    color: var(--t-3);
}
.renglon-dato {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    font-size: var(--f-14);
    line-height: var(--lh-16);
    letter-spacing: var(--tr-14);
    font-weight: var(--p-fuerte);
    font-variant-numeric: tabular-nums;
    color: var(--t-1);
    white-space: nowrap;
}
.renglon-accion {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    font-size: var(--f-11);
    line-height: var(--lh-11);
    letter-spacing: var(--tr-versalita);
    text-transform: uppercase;
    font-weight: var(--p-medio);
    color: var(--t-3);
    white-space: nowrap;
}
a.renglon:hover .renglon-accion { color: var(--t-1); }
.renglon.lleno .renglon-que { color: var(--t-3); font-weight: var(--p-normal); }
.renglon.lleno .renglon-dato { color: var(--t-4); font-weight: var(--p-normal); }

/* -------------------------------------------------------------------------
   4.6 Pie
   ------------------------------------------------------------------------- */

.pie p { margin-bottom: var(--e-8); max-width: var(--ancho-lectura); }
.pie p:last-of-type { margin-bottom: 0; }
.pie .firma { color: var(--t-3); }


/* =========================================================================
   5. CELULAR
   El expediente pierde el margen numerado y se vuelve una columna: el número
   y la etiqueta pasan a ser el encabezado del tramo.
   ========================================================================= */

@media (max-width: 900px) {
    /* La proporción 16/7 que hereda la placa no alcanza para el lomo
       compuesto; con altura automática nada se recorta. */
    .portada-imagen { aspect-ratio: auto; gap: var(--e-12); }
    .lomo-anio { font-size: var(--f-32); line-height: var(--lh-32); letter-spacing: var(--tr-32); }

    .expediente { margin-top: var(--e-48); }
    .tramo {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--e-16);
        padding: var(--e-32) 0;
    }
    .tramo-rail {
        position: static;
        display: flex;
        align-items: center;
        gap: var(--e-8);
    }
    .tramo-rail::after {
        content: "";
        flex: 1;
        height: var(--grosor-1);
        background: var(--b-1);
    }
    .par { grid-template-columns: minmax(0, 1fr); gap: var(--e-4); }
    .tabla-config th, .tabla-config td { display: block; width: auto; }
    .tabla-config th { padding: var(--e-12) 0 0; border-bottom: 0; }
    .tabla-config td { padding: var(--e-2) 0 var(--e-12); }
}

@media (max-width: 640px) {
    /* Dos columnas de clubes en 390px darían 170px por renglón: el nombre y
       el precio no caben en la misma línea. Vuelve a una. */
    .rejilla { columns: 1; }
    .equipo { padding-left: var(--e-32); }
    .equipo::after { left: var(--e-8); }

    .banda-precio .cifra-precio {
        font-size: var(--f-21);
        line-height: var(--lh-21);
        letter-spacing: var(--tr-21);
    }
    .tramo-titulo {
        font-size: var(--f-21);
        line-height: var(--lh-21);
        letter-spacing: var(--tr-21);
    }
    #transmision .boton { width: 100%; min-width: 0; }

    /* El renglón de agenda pasa a dos filas: cuándo arriba, qué y cuánto
       abajo. En 390px, tres columnas dejaban el título en dos caracteres. */
    .renglon {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: var(--e-4);
    }
    .renglon-cuando { grid-column: 1 / -1; grid-row: 1; }
    .renglon-que    { grid-column: 1; grid-row: 2; }
    .renglon-nota   { grid-column: 1 / -1; grid-row: 3; }
    .renglon-dato   { grid-column: 2; grid-row: 2; }
    .renglon-accion { grid-column: 2; grid-row: 3; }
}