/* ==========================================================================
   El Camino DT — La portada
   --------------------------------------------------------------------------
   La solapa «Noticias» a pantalla completa, y la única pantalla del juego que
   NO se compone con las primitivas del producto.

   POR QUÉ ROMPE, QUE ES LO ÚNICO QUE HAY QUE ENTENDER DE ESTA HOJA. Las otras
   diecisiete pantallas están hechas de tarjeta, rótulo y lista, y tienen razón:
   ahí el DT viene a OPERAR y la interfaz tiene que desaparecer debajo del dato.
   Acá viene a LEER. Una pantalla de lectura armada con las herramientas de una
   de gestión sale gris por definición —seis tarjetas con borde propio compiten
   entre sí y no gana ninguna—, y eso fue exactamente lo que pasó: la versión
   anterior de esta hoja repartía el mismo contenido en seis cajas del sistema y
   el resultado no tenía jerarquía ninguna.

   Las cuatro decisiones, cada una con su regla del sistema al lado:

   1. EL TITULAR USA LA VOZ DE LA TAPA. 700 y `--wd-condensed`, versales,
      interlínea corta: es el registro de `.tapa__titular` en `home.css`, que su
      propia hoja declara «el registro del sistema» —el mismo par del nombre de
      club en la barra, en la tabla y en la ficha—. No se inventa una voz para
      esta pantalla: se trae la que ya existía y nunca había entrado al juego.

   2. EL COLOR DE CLUB PINTA LA APERTURA. La Regla del Color de Club dice que
      los colores de club son CONTENIDO y no sistema. En una portada que habla
      de tu club, el fondo ES contenido. Se hunde hacia la pizarra igual que la
      carta del selector: al 32 % sobre `--ink-950`, medido contra los 30
      colores de Primera, el peor caso —River, Huracán y Vélez, los tres
      blancos— deja 6,03:1 con el titular, sobre un piso de 4,5.

   3. NO HAY CAJAS. Un diario separa con reglas y aire. Las únicas superficies
      elevadas que quedan son las dos que sostienen un dato puntual: tu partido
      y la previa del próximo.

   4. LOS RESULTADOS SON UN TABLERO. Escudo, nombre y cifra, con el que ganó en
      blanco y el que perdió apagado: la fecha entera se lee sin leer un solo
      renglón.

   LO QUE NO CAMBIÓ, Y POR QUÉ. El anclaje al alto de la ventana: la promesa de
   esta pantalla sigue siendo que ocupa el alto y no se mueve, así que la fila
   de abajo se queda con lo que sobra y son sus TRES columnas las que
   desplazan por dentro. Es la Regla de Una Lista por Columna, con el mismo
   reparto que tenía la versión anterior.
   ========================================================================== */

/* Sólo existe en su solapa. La vista general no esconde nada —por eso muestra
   todo— así que esta sección tiene que esconderse ella misma y aparecer nada
   más cuando la nombran. */
.portada { display: none; }

/* Cinco filas: cabecera, zócalo, apertura, tira de titulares y el resto. Las
   cuatro primeras miden lo que miden y la quinta se queda con lo que sobra. */
.home[data-vista='noticias'] .portada {
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  /* LA COLUMNA VA DECLARADA, y sin esto la pantalla se va de costado. Una
     columna de grid sin declarar es `auto`, y `auto` crece con el contenido: la
     cinta del zócalo lleva `white-space: nowrap` con los quince cruces de la
     fecha, así que pedía 6003 px y arrastraba a la sección entera —medido:
     6222 de ancho dentro de una ventana de 1440, con la tabla y el minuto a
     minuto fuera de la pantalla—. El `overflow: hidden` de la pista recorta lo
     que se VE, no lo que se PIDE; quien lo corta de verdad es este `minmax`. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
  min-height: 0;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   1 · EL MASTHEAD
   --------------------------------------------------------------------------
   La regla de 2px debajo es lo que lo vuelve la cabecera de un medio y no el
   título de un panel. Va en `--text-primary` y no en la línea del sistema: una
   cabecera de diario tiene una regla que se ve.
   -------------------------------------------------------------------------- */
.portada__cabecera {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--text-primary);
}

.portada__marca {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: 700;
  font-stretch: var(--wd-condensed);
  letter-spacing: -0.015em;
  text-transform: uppercase;
  line-height: 1;
}

.portada__hoy {
  margin: 0;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.portada__envivo {
  margin: 0 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

.portada__pulso {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
}

/* --------------------------------------------------------------------------
   2 · EL ZÓCALO
   --------------------------------------------------------------------------
   Lleva la fecha QUE VIENE. Antes repetía la jugada, que es la misma que la
   tarjeta de abajo mostraba entera: quince partidos escritos dos veces en la
   misma pantalla, una corriendo y otra quieta.

   Corre solo; se para al pasarle el mouse por encima y no se mueve si el
   sistema pide menos movimiento. Es una lista de verdad debajo de la
   animación, así que sigue siendo legible parada.
   -------------------------------------------------------------------------- */
.portada__zocalo {
  display: flex;
  border-bottom: 1px solid var(--line-hairline);
}

/* El rótulo va en negativo: es la pieza que no se mueve al lado de la que se
   mueve, y en un zócalo de canal eso se resuelve invirtiendo, no con un borde. */
.portada__zocalo-rotulo {
  display: flex;
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  background: var(--text-primary);
  color: var(--ink-1000);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.portada__zocalo-pista {
  flex: 1;
  /* `min-width: 0` NO ES DECORACIÓN acá, y se paga caro sin él: la cinta lleva
     `white-space: nowrap` con los quince cruces de la fecha, y un ítem flex sin
     esto toma el ancho de su CONTENIDO aunque el padre tenga `overflow: hidden`.
     Medido antes de ponerlo: la sección entera pedía 5982 px, la columna de la
     fecha 5356, y la pantalla se iba de costado con las otras dos columnas
     fuera de la ventana. El `overflow: hidden` recorta lo que se ve, no lo que
     se pide. */
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.portada__zocalo-cinta {
  display: flex;
  gap: var(--sp-6);
  padding-left: var(--sp-5);
  white-space: nowrap;
  animation: portada-correr 70s linear infinite;
}

.portada__zocalo:hover .portada__zocalo-cinta,
.portada__zocalo:focus-within .portada__zocalo-cinta { animation-play-state: paused; }

@keyframes portada-correr { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .portada__zocalo-cinta { animation: none; }
}

.portada__pieza { font-size: var(--fs-2xs); color: var(--text-secondary); }
.portada__pieza--mio { color: var(--text-primary); font-weight: 600; }

/* --------------------------------------------------------------------------
   3 · LA APERTURA, A SANGRE
   --------------------------------------------------------------------------
   Las dos puntas del degradado importan y el error es soltar una sola: sin
   hundir arriba es pintura plana, sin llegar abajo a la página es un cuadro
   pegado encima. Es la misma lección de la carta del selector.
   -------------------------------------------------------------------------- */
.portada__apertura {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-6);
  min-height: 264px;
  padding: var(--sp-6) var(--sp-7);
  border-radius: var(--r-md);
  background:
    radial-gradient(120% 150% at 6% 0%, color-mix(in srgb, var(--club) 32%, var(--ink-950)) 0%, var(--ink-950) 74%),
    var(--ink-950);
}

/* La barra del canto es lo que ata el bloque a un equipo y no a una paleta. Va
   en el color ACLARADO (`legibleEnPizarra`), porque los colores reales incluyen
   el marrón de Platense, el bordó de Lanús y el negro de Newell's: sobre esta
   pizarra, crudos, son barras invisibles. */
.portada__apertura::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--club-luz);
}

/* El escudo, sangrado y en marca de agua. A más tinta competía con el
   marcador, que es la cifra que el DT vino a ver. */
.portada__hero-escudo {
  position: absolute;
  right: -110px;
  top: 50%;
  translate: 0 -50%;
  width: 380px;
  height: 380px;
  object-fit: contain;
  opacity: 0.07;
  filter: grayscale(0.55) brightness(1.4);
  pointer-events: none;
}

.portada__hero-cuerpo { position: relative; min-width: 0; }

.portada__volanta {
  margin: 0 0 var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* El medio firma con su color, que es el mismo `tono` con el que ya firma en el
   feed y en la tarjeta del vistazo. */
.portada__medio { color: hsl(var(--tono)); }

.portada__sello {
  padding: 3px var(--sp-3);
  border-radius: 999px;
  background: hsl(var(--tono) / 0.20);
  color: hsl(var(--tono));
}

/* LA VOZ DE LA TAPA, adentro del juego. Ver la cabecera de esta hoja. */
.portada__titular {
  margin: 0;
  max-width: 18ch;
  font-size: var(--fs-editorial);
  font-weight: 700;
  font-stretch: var(--wd-condensed);
  line-height: 0.92;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--text-primary);
}

.portada__bajada {
  margin: var(--sp-5) 0 0;
  max-width: 52ch;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--text-secondary);
}

.portada__pie {
  margin: var(--sp-5) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

.portada__pie span + span::before { content: '· '; color: var(--ink-600); }

/* El marcador de la apertura: la cifra más grande de la pantalla, porque es el
   dato que el DT vino a ver. */
.portada__marcador {
  position: relative;
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: var(--sp-5);
}

.portada__marcador-lado {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  width: 124px;
}

.portada__marcador-lado span {
  font-size: var(--fs-xs);
  font-weight: 600;
  font-stretch: var(--wd-condensed);
  text-align: center;
}

.portada__cifras {
  font-size: var(--fs-editorial);
  font-weight: 700;
  font-stretch: var(--wd-condensed);
  line-height: 1;
  letter-spacing: -0.02em;
}

.portada__cifras i { font-style: normal; color: var(--text-muted); margin: 0 var(--sp-2); }

.portada__pen {
  grid-column: 1 / -1;
  margin: var(--sp-3) 0 0;
  text-align: center;
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   4 · LA TIRA DE TITULARES
   --------------------------------------------------------------------------
   Cuatro notas en cuatro columnas separadas por una línea, no una pila de
   puntitos: cada titular se lee entero y se elige el que se quiere abrir.

   Y NO ROTA SOLA. La apertura cambiaba de titular cada 7 s, que es lo que hacía
   que una nota se fuera antes de terminar de leerla; el DT elige y se queda.
   -------------------------------------------------------------------------- */
.portada__tira {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

.portada__sec {
  display: block;
  padding: 0 var(--sp-5);
  border: 0;
  border-left: 1px solid var(--line-hairline);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.portada__sec:first-child { border-left: 0; padding-left: 0; }

.portada__sec-medio {
  display: block;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: hsl(var(--tono));
}

.portada__sec-tit {
  display: block;
  font-size: var(--fs-md);
  font-weight: 700;
  font-stretch: var(--wd-condensed);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color .12s;
}

.portada__sec:hover .portada__sec-tit,
.portada__sec:focus-visible .portada__sec-tit { color: var(--text-primary); }

/* --------------------------------------------------------------------------
   5 · LA REJILLA DE ABAJO
   --------------------------------------------------------------------------
   Tres columnas, y cada una desplaza por dentro: es lo que deja que la pantalla
   siga anclada al alto de la ventana sin recortar nada.
   -------------------------------------------------------------------------- */
.portada__grilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 258px 328px;
  gap: var(--sp-7);
  min-height: 0;
}

.portada__col {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: var(--sp-3);
}

/* El rótulo de sección con la regla que lo cruza: es lo que separa dos cuerpos
   sin dibujar una caja alrededor de cada uno. */
.portada__seccion {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}

.portada__seccion::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line-hairline);
}

.portada__seccion em {
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}

.portada__seccion + .portada__seccion,
.portada__previa + .portada__seccion { margin-top: var(--sp-6); }

/* TU PARTIDO, fuera de la lista. Antes había que buscarlo entre quince. */
.portada__mio {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
  border-radius: var(--r-md);
  border-left: 3px solid var(--club-luz);
  background: var(--ink-900);
}

.portada__mio-lado {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-stretch: var(--wd-condensed);
}

.portada__mio-lado--der { justify-content: flex-end; text-align: right; }

.portada__mio-cifras {
  font-size: var(--fs-3xl);
  font-weight: 700;
  font-stretch: var(--wd-condensed);
  line-height: 1;
}

.portada__mio-cifras i { font-style: normal; color: var(--text-muted); margin: 0 var(--sp-2); }

/* EL TABLERO DE LA FECHA. `auto-fit` y no dos columnas fijas: por debajo de los
   1400 la columna se queda corta y los nombres se parten al medio. */
.portada__tablero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
  gap: 0 var(--sp-6);
}

.portada__partido {
  display: grid;
  gap: 3px;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line-hairline);
  font-size: var(--fs-xs);
}

.portada__lado {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  color: var(--text-secondary);
}

.portada__lado-club {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-stretch: var(--wd-condensed);
}

.portada__lado-gol { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

/* El que ganó en blanco y el que perdió apagado. Es lo que deja leer la fecha
   entera sin leer un renglón; un empate no marca a ninguno de los dos. */
.portada__lado--gana { color: var(--text-primary); font-weight: 700; }
.portada__lado--pierde { color: var(--text-muted); }

.portada__pendiente { font-size: var(--fs-2xs); color: var(--text-muted); }

/* LA TABLA, sin caja: la franja es una barra de color al canto. */
.portada__tabla { display: grid; gap: 1px; }

.portada__fila {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 26px 30px;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
}

.portada__fila::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 5px;
  width: 3px;
  border-radius: 2px;
  background: var(--franja, transparent);
}

.portada__fila--mio { background: var(--ink-850); }
.portada__fila-pos { color: var(--text-muted); font-variant-numeric: tabular-nums; }

.portada__fila-club {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-stretch: var(--wd-condensed);
}

.portada__fila--mio .portada__fila-club { font-weight: 700; }
.portada__fila-pj { text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.portada__fila-pts { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

.portada__leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-4);
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

.portada__leyenda i {
  display: inline-block;
  width: 8px;
  height: 3px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: middle;
}

/* LO QUE VIENE. Ocupa el sitio que tenía la lista de campeones del continente,
   que era almanaque: cuarenta y siete campeones del año pasado ordenados por
   nada. Esto es lo único que la portada le puede dar a alguien que ya sabe qué
   pasó — qué hacer ahora. */
.portada__previa {
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--ink-900);
}

.portada__previa-par {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
}

.portada__previa-club { display: grid; justify-items: center; gap: var(--sp-3); }

.portada__previa-club span {
  font-size: var(--fs-2xs);
  font-weight: 600;
  font-stretch: var(--wd-condensed);
}

.portada__previa-vs { font-size: var(--fs-2xs); color: var(--text-muted); }
.portada__previa-datos { display: grid; margin-top: var(--sp-4); }

.portada__dato {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--line-hairline);
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

.portada__dato b { color: var(--text-primary); font-weight: 600; }

/* EL MINUTO A MINUTO. Era una pila de tarjetas de X con avatar, arroba y
   cifras de repercusión; la línea de tiempo cuenta lo mismo en la mitad del
   espacio y deja de competir con la apertura. El punto se pinta del color del
   medio, que es el mismo dato que antes cargaba el avatar. */
.portada__minuto { display: grid; }

.portada__momento {
  position: relative;
  padding: 0 0 var(--sp-5) var(--sp-6);
  border-left: 1px solid var(--line);
}

.portada__momento:last-child { border-left-color: transparent; padding-bottom: 0; }

.portada__momento::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: hsl(var(--tono));
  box-shadow: 0 0 0 3px var(--bg-page);
}

.portada__momento-quien {
  margin: 0 0 3px;
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-size: var(--fs-2xs);
}

.portada__momento-medio {
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: hsl(var(--tono));
}

.portada__momento-hora { margin-left: auto; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.portada__momento-texto {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--text-secondary);
}

.portada__momento-texto strong { color: var(--text-primary); font-weight: 600; }

/* Tus próximos partidos, que es lo que esa columna tiene para dar mientras no
   se jugó ninguna fecha. Antes ahí decía «Resultados de la fecha» y mostraba
   quince «vs.»: un título que promete un dato que todavía no existe. */
.portada__prox {
  display: grid;
  grid-template-columns: 76px auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line-hairline);
  font-size: var(--fs-xs);
}

.portada__prox-et {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portada__prox-club {
  font-weight: 600;
  font-stretch: var(--wd-condensed);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portada__prox-sede,
.portada__prox-fecha { font-size: var(--fs-2xs); color: var(--text-muted); }

.portada__nada { font-size: var(--fs-2xs); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   LOS QUIEBRES
   --------------------------------------------------------------------------
   Dos, y los dos por el mismo motivo: el ancho que se queda corto para tres
   columnas y el ALTO, que es el recurso escaso de una pantalla anclada a la
   ventana. En un portátil de 800 la apertura no puede quedarse con un tercio
   del alto, así que cede ella —es la que tiene aire— y no las listas.
   -------------------------------------------------------------------------- */
@media (max-width: 1400px) {
  /* Y ACÁ SE SUELTA EL ANCLAJE, que es la otra mitad de la Regla del Alto de
     Ventana: en este mismo quiebre `inicio.css` le devuelve el alto al
     documento —`body { height: auto; overflow: visible }`— porque las columnas
     ya no caben una al lado de la otra. Con la página rodando, los scrollers
     por columna sobran y encima estorban: una barra adentro de otra barra
     esconde justo el final de la lista. Las columnas vuelven a medir lo que
     miden. */
  /* Y la última fila deja de ser `1fr`. Con el documento suelto, `1fr` se
     estira hasta el alto de la ventana ADEMÁS de crecer con su contenido, y eso
     dejaba casi una pantalla de negro debajo del último bloque. */
  .home[data-vista='noticias'] .portada { grid-template-rows: auto auto auto auto auto; }
  .portada__grilla { grid-template-columns: minmax(0, 1fr) 258px; align-content: start; }
  .portada__col { overflow: visible; padding-right: 0; }
  .portada__col--lateral { grid-column: 1 / -1; }
  .portada__titular { font-size: var(--fs-3xl); }
  .portada__hero-escudo { width: 260px; height: 260px; right: -70px; }
}

@media (max-height: 860px) {
  .portada__apertura { min-height: 0; padding: var(--sp-5) var(--sp-6); }
  .portada__titular { font-size: var(--fs-3xl); }
  .portada__cifras { font-size: var(--fs-3xl); }
  .portada__bajada { font-size: var(--fs-md); }
  .portada__hero-escudo { width: 240px; height: 240px; }
}