/* ═══════════════════════════════════════════════════════════════════════
   NUEVA DISTRIBUCIÓN DEL SITIO · hoja propia, plana.

   No hereda main.css a propósito: la landing anterior es oscura, con
   degradados y sombras, y esta es plana y clara. Mezclarlas obligaba a
   pelear cada regla.

   PLANO quiere decir: sin degradados, sin sombras, sin brillos. La jerarquía
   la dan el color sólido, el tamaño de la letra y el aire.

   MATE Y VERDE, el mismo estándar que el index (21/10/2026). Antes el azul
   de marca pintaba las superficies —botones, el menú, el panel del Tour— y
   las secciones se veían de otra casa que el home. Ya no:
     fondo   #16181B  gris oscuro neutro: el del home y el de la presentación
                      de TOUR y CUP (aprobado por León el 30/10/2026; antes
                      #0B0B14, casi negro tirando a azul)
     tarjeta #1F2226  gris un poco más claro para distinguir superficies
     vidrio  rgba(22,24,27,.55) + borde blanco al 12 %: translúcido y mate.
     verde   #78F750  el acento Y la acción: botones llenos, el chip activo
             del menú, los números, los íconos.
     azul    #1B17EF  SÓLO marca (el logo). NO se usa como superficie ni como
             texto: sobre el fondo oscuro da 1.45 de contraste.
   Sobre el verde la letra va en negro (#16181B); sobre el fondo, en blanco.
   Las fotos van mate: desaturadas y con velo, como el hero del index.
   La regla de contraste está en docs/variables-del-proyecto.md, sección 1c,
   y la vigila `node scripts/contraste.js`.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Raleway'; src: url('/assets/fonts/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaooCP.ttf?v=mvvwrggw') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('/assets/fonts/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvoooCP.ttf?v=mvvwrggw') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('/assets/fonts/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVsEpYCP.ttf?v=mvvwrggw') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('/assets/fonts/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVs9pYCP.ttf?v=mvvwrggw') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('/assets/fonts/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVtapYCP.ttf?v=mvvwrggw') format('truetype'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Raleway'; src: url('/assets/fonts/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVtzpYCP.ttf?v=mvvwrggw') format('truetype'); font-weight: 900; font-display: swap; }

:root {
  --azul: #1B17EF;                      /* SÓLO marca. Nunca superficie ni texto. */
  --azul-osc: #0D0AA8;

  /* EL ACENTO DE LA SECCIÓN. Lo pone el layout en el <body>, sacado de la
     barra de color que cada sección ya tiene bajo su nombre en el index
     (campo `barra` de seccionesV2, en index.js). Aquí van los valores de
     reserva: si una página no manda ninguno, se queda en verde.

     Son DOS porque la regla de la casa pide 7.0 de contraste al texto de
     menos de 16px, y el magenta del podcast (6.73) y el rojo de nosotros
     (5.99) no llegan. `--acento-chico` es el mismo color aclarado lo justo.
     Ver docs/variables-del-proyecto.md, sección 1c. */
  --acento: var(--acento);                /* superficies y texto de 16px o más */
  --acento-chico: var(--acento);          /* texto de menos de 16px */
  /* El vidrio del index: translúcido, mate, con un borde apenas visible. */
  --vidrio: rgba(22, 24, 27, 0.55);
  --vidrio-borde: rgba(255, 255, 255, 0.12);
  --lima: #78F750;
  --tinta: #FFFFFF;                     /* la letra */
  --tinta-2: #C3C5CA;                   /* 9.6 sobre el fondo, 8.4 sobre la tarjeta */
  --fondo: #16181B;
  --superficie: #1F2226;
  --linea: rgba(255, 255, 255, 0.12);
  --negro: #16181B;                     /* texto sobre verde y sobre blanco */


  --radio: 22px;
  --radio-sm: 14px;
  --ancho: 1180px;
  --gutter: 24px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* Negritas editoriales: Bold real (700), mismo tamaño, familia y color que
   el párrafo. Nunca otro color. */
strong { font-weight: 700; color: inherit; }
body {
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--fondo);
  color: var(--tinta);
  font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.pagina { padding-top: 104px; }
.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); }

/* ─── Menú en píldora ─────────────────────────────────────────────── */
.nav {
  position: fixed; top: 18px; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: center; padding: 0 var(--gutter);
  pointer-events: none;
}
.nav__pildora {
  pointer-events: auto;
  display: flex; align-items: center; gap: 8px;
  /* Negro translúcido con desenfoque (30/10/2026): se distingue de las
     tarjetas grises y lo de atrás no se alcanza a leer. */
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  border-radius: 999px;
  padding: 7px 7px 7px 22px;
}
.nav__logo img { height: 24px; width: auto; }
.nav__marcas {
  display: flex; gap: 2px; margin-left: 18px;
  background: rgba(255,255,255,.06); border-radius: 999px; padding: 4px;
}
.nav__link {
  font-size: 14px; font-weight: 600; color: var(--tinta-2);
  padding: 8px 16px; border-radius: 999px;
  transition: background .15s, color .15s;
}
.nav__link:hover { color: var(--tinta); background: rgba(255,255,255,.08); }
/* `--acento-chico` y no `--acento`: el texto va en negro a 14px y la
   regla pide 7.0 por debajo de 16px. */
.nav__link.is-activo { background: var(--acento-chico); color: var(--negro); }
.nav__menu {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  background: var(--acento-chico); color: var(--negro);
  border-radius: 999px; margin-left: 4px;
}
/* Tres rayas, sin palabra: el ícono de menú que todo el mundo reconoce.
   Sobre el verde van en negro, igual que iba el punto. */
.nav__menu-icono { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* ─── Menú completo (ancla #menu, sin JavaScript) ─────────────────── */
.menu {
  position: fixed; inset: 0; z-index: 80;
  /* Mate, como el index: casi negro con un desenfoque detrás. */
  background: rgba(22, 24, 27, 0.95); color: #fff;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  display: flex; flex-direction: column;
  padding: 28px var(--gutter) 32px;
  visibility: hidden; opacity: 0; transition: opacity .2s, visibility .2s;
  overflow-y: auto;
}
.menu:target, .menu.is-abierta { visibility: visible; opacity: 1; }
/* Con el menú abierto, el dedo no mueve la página de abajo. */
html.con-menu, html.con-menu body { overflow: hidden; }
.menu__cab { display: flex; align-items: center; justify-content: space-between; max-width: var(--ancho); width: 100%; margin: 0 auto; }
.menu__cab img { height: 26px; width: auto; }
.menu__logo { display: inline-flex; align-items: center; min-height: 44px; }
.menu__logo:active { opacity: .7; }
/* El idioma va junto a Cerrar, empujando desde la derecha. */
.menu__idioma { margin-left: auto; margin-right: 8px; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-size: 14px; font-weight: 800; letter-spacing: .08em; color: var(--tinta-2); border-radius: 999px; }
.menu__idioma:active { color: var(--tinta); background: rgba(255,255,255,.12); }
.menu__x { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: 14px; border: 1.5px solid rgba(255,255,255,.55); border-radius: 999px; padding: 0 18px; }
.menu__lista { list-style: none; max-width: var(--ancho); width: 100%; margin: 48px auto 0; }
.menu__item {
  display: flex; align-items: baseline; gap: 22px;
  padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.22);
}
.menu__num { font-size: 14px; font-weight: 700; color: var(--acento-chico); width: 28px; }
.menu__nombre { font-size: clamp(30px, 6vw, 56px); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; flex: 1; }
.menu__flecha { font-size: 24px; opacity: .7; }
.menu__item:hover .menu__nombre { color: var(--acento); }
.menu__redes { max-width: var(--ancho); width: 100%; margin: auto auto 0; padding-top: 36px; display: flex; flex-wrap: wrap; gap: 8px; }
/* Las redes, como íconos en círculo (el nombre va en aria-label y title). */
.red-icono { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1.5px solid rgba(255,255,255,.55); border-radius: 50%; transition: border-color .15s, color .15s; }
.red-icono svg { width: 20px; height: 20px; }
.red-icono:hover { border-color: var(--acento-chico); color: var(--acento-chico); }

/* ─── Piezas comunes ──────────────────────────────────────────────── */
.kicker { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
.titular {
  font-size: clamp(38px, 6.4vw, 76px); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.02;
}
.titular em { font-style: normal; color: var(--acento); }
.bajada { font-size: 18px; color: var(--tinta-2); max-width: 620px; }
.boton {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 700;
  border-radius: 999px; padding: 13px 22px;
  border: 1.5px solid rgba(255,255,255,.6); color: #fff;
  transition: background .15s, color .15s, border-color .15s;
}
.boton:hover { background: #fff; color: var(--negro); border-color: #fff; }
/* La acción va en verde con letra negra: 11 : 1 de contraste y es el
   acento que ya usa el index. */
/* El botón lleva su texto en negro a 15px: mismo motivo. El oscurecido al
   pasar se saca del propio color con un filtro, para que funcione con
   cualquier acento sin tener que guardar una segunda ficha por sección. */
.boton--lleno { background: var(--acento-chico); border-color: var(--acento-chico); color: var(--negro); }
.boton--lleno:hover { filter: brightness(.92); }
.boton--claro { border-color: rgba(255,255,255,.7); color: #fff; }
.boton--claro:hover { background: #fff; color: var(--negro); }
.flecha { font-size: 1.05em; line-height: 1; }
.pastilla {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--tinta-2);
}
.pastilla--ok { background: var(--acento-chico); color: var(--negro); }
.pastilla--muestra { background: transparent; border: 1.5px dashed var(--tinta-2); color: var(--tinta-2); }
.rotulo {
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-2); margin: 0 0 18px;
}
.rotulo::after { content: ''; flex: 1; height: 1px; background: var(--linea); }
.rotulo { color: var(--tinta-2); }
/* padding-block y no `padding: X 0`: el atajo pondría en cero el margen
   lateral de .envoltura y el contenido quedaría pegado al borde en celular. */
.seccion { padding-block: 56px; }

/* El home v2 (hero, cinta, tarjetas, índice y banda) se retiró: el inicio
   vive en el layout `main` con assets/css/inicio.css. Sus reglas estaban
   aquí sin que ninguna vista las usara, y eran el último sitio donde
   sobrevivía el azul como superficie. */

/* ─── Cabecera de cada sección ────────────────────────────────────── */
.cabecera { padding-block: 40px 8px; }
.cabecera__fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cabecera__marca { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; }
/* El cuadrito de la marca es el acento de la sección, igual que la barra
   bajo su nombre en el index. Antes había una ficha por marca (--c-tour y
   compañía) y las seis valían lo mismo; ahora el valor llega del <body>. */
.cabecera__marca::before { content: ''; width: 12px; height: 12px; border-radius: 4px; background: var(--acento); }


/* ═══════════════════════════════════════════════════════════════════════
   BLOQUES DE SECCIÓN · la anatomía de la página de iD CUP, traída al
   sistema plano de esta hoja. Los comparten Tour, Legends y Travel para
   que las tres marcas se lean como la misma casa y no como tres sitios.

   El orden de una sección completa es siempre el mismo:
     portada → cifras → hitos → pilares → mosaico
     → aliados → prensa → (eventos · contacto) → cierre
   Ninguno es obligatorio: la vista pinta los que tienen material.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Portada: la foto a sangre con el título encima ──────────────── */
/* Sale del ancho de lectura y se come el espacio que .pagina reserva para
   la píldora del menú, para que la imagen llegue al borde de arriba. */
.portada { position: relative; margin-top: -104px; min-height: clamp(440px, 70vh, 740px); display: flex; align-items: flex-end; overflow: hidden; }
/* Mate, con el mismo tratamiento que el hero del index: desaturada y
   apenas cálida, para que acompañe y no compita con el texto. */
.portada__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.62) brightness(1.02) sepia(.18); }
/* El velo oscurece la foto entera (indicación de León, 30/10/2026: partir
   del 85 % y ajustar hasta que el texto se lea claro) para que acompañe al
   contenido sin competir. Negro neutro, sin tinte azul. Es una capa CSS: las
   fotos aprobadas se conservan sin oscurecer. Abajo muere en el fondo. */
.portada__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.70) 38%, rgba(0,0,0,.78) 70%, var(--fondo) 100%); }
.portada__cuerpo { position: relative; z-index: 2; width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 140px var(--gutter) clamp(34px, 5vh, 56px); }
.portada__titulo { font-size: clamp(46px, 7.2vw, 96px); font-weight: 900; letter-spacing: -.04em; line-height: .95; }
.portada__titulo em { font-style: normal; color: var(--acento); }
.portada__bajada { font-size: clamp(16px, 1.25vw, 20px); color: #fff; max-width: 640px; margin-top: 18px; }
.portada__pastillas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.portada__pastillas .pastilla { background: rgba(255,255,255,.12); color: var(--tinta); display: inline-flex; align-items: center; gap: 8px; }
.portada__pastillas svg { width: 14px; height: 14px; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* ─── Cifras: los números, en grande ──────────────────────────────── */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.cifra { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 26px 24px 28px; }
.cifra__icono { width: 34px; height: 34px; color: var(--acento); margin-bottom: 16px; }
.cifra__icono svg { width: 100%; height: 100%; }
.cifra__valor { font-size: clamp(38px, 4.2vw, 58px); font-weight: 900; letter-spacing: -.04em; line-height: 1; color: var(--acento); }
.cifra__etiqueta { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-top: 14px; }
.cifra__sub { font-size: 14px; color: var(--tinta-2); margin-top: 4px; }

/* ─── Hitos: la línea de tiempo de las ediciones ──────────────────── */
.hitos { display: flex; flex-direction: column; }
.hito { display: grid; grid-template-columns: 112px 1fr 24px; align-items: center; gap: 20px; padding: 20px 4px; border-top: 1px solid var(--linea); transition: padding .15s; }
.hito:last-child { border-bottom: 1px solid var(--linea); }
a.hito:hover { padding-left: 14px; }
.hito__anio { font-size: clamp(26px, 2.6vw, 34px); font-weight: 900; letter-spacing: -.03em; line-height: 1; color: var(--acento); }
.hito--pendiente .hito__anio { color: var(--tinta-2); }
.hito__partido { font-size: 18px; font-weight: 800; }
.hito__lugar { font-size: 14px; color: var(--tinta-2); margin-top: 2px; }
.hito__flecha { color: var(--tinta-2); }
.hito__flecha svg { width: 18px; height: 18px; }
a.hito:hover .hito__flecha { color: var(--acento); }

/* ─── Pilares: qué hacemos ────────────────────────────────────────── */
.pilares { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 14px; }
.pilar { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 26px 24px 28px; }
.pilar__num { font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--acento-chico); }
.pilar h3 { font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin: 10px 0 8px; }
.pilar p { font-size: 15px; color: var(--tinta-2); }
/* En Nosotros los pilares son enlaces a cada marca. */
a.pilar { transition: border-color .15s; }
a.pilar:hover { border-color: var(--tinta); }

/* ─── Mosaico: la galería ─────────────────────────────────────────── */
/* minmax(0, 1fr) y no 1fr: con celdas de proporción fija, 1fr dejaba crecer
   las columnas y la galería se salía ~20 px del ancho del contenido. */
.mosaico { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mosaico__foto { aspect-ratio: 1; border-radius: var(--radio-sm); background: var(--superficie) center / cover no-repeat; border: 1px solid var(--linea); }
/* La primera y la sexta van dobles: rompe la retícula y evita el muestrario. */
.mosaico__foto:nth-child(1), .mosaico__foto:nth-child(6) { grid-column: span 2; aspect-ratio: 2 / 1; }
/* Con 8 fotos (la galería del Tour y las de cada edición) la última fila
   quedaba con dos celdas vacías: las dos últimas van dobles y la cuadrícula
   cierra en tres filas parejas (2+1+1 · 1+1+2 · 2+2). */
@media (min-width: 901px) {
  .mosaico:has(> .mosaico__foto:nth-child(8):last-child) > .mosaico__foto:nth-child(7),
  .mosaico:has(> .mosaico__foto:nth-child(8):last-child) > .mosaico__foto:nth-child(8) { grid-column: span 2; aspect-ratio: 2 / 1; }
}

/* ─── Aliados: los logos de quien respalda ────────────────────────── */
.aliados { display: flex; flex-wrap: wrap; gap: 12px; }
.aliado { flex: 1 1 180px; min-height: 92px; display: flex; align-items: center; justify-content: center; padding: 18px 26px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-sm); }
/* Los logos vienen de muchas marcas y con muchos fondos: en blanco puro
   todos pesan igual y ninguno rompe la paleta. */
.aliado img { max-height: 38px; width: auto; filter: brightness(0) invert(1); opacity: .82; }
.aliado__texto { font-size: 15px; font-weight: 800; color: var(--tinta-2); text-align: center; }

/* ─── Prensa: enlaces a lo que se publicó ─────────────────────────── */
.prensa { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.prensa__nota { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px 22px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-sm); transition: border-color .15s; }
.prensa__nota:hover { border-color: var(--tinta); }
.prensa__fuente { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--acento-chico); }
.prensa__titulo { font-size: 16px; font-weight: 700; line-height: 1.4; margin-top: 7px; }
.prensa__nota .flecha { color: var(--tinta-2); flex: none; }
/* La miniatura va a la izquierda y el texto ocupa lo que sobra. Sin imagen,
   la nota se ve igual que antes. */
.prensa__img { flex: none; width: 112px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--radio-sm) - 4px); background: var(--linea); }
.prensa__texto { flex: 1; min-width: 0; }
/* El medio en su renglón, encima del título: pegados se leían como una frase. */
.prensa__fuente, .prensa__titulo { display: block; }
/* «Ver más notas»: las demás notas siguen en la misma lista y se esconden
   hasta pulsar el botón, que va solo, centrado debajo (assets/js/ver-mas.js).
   Sin JavaScript no se recorta nada. */
.prensa.is-recortada .prensa__nota--extra { display: none; }
.prensa__mas { display: flex; justify-content: center; margin-top: 18px; }
.prensa__boton { min-height: 44px; padding: 10px 22px; border: 1.5px solid var(--linea); border-radius: 999px; background: none; color: var(--tinta); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: border-color .15s; }
.prensa__boton:hover { border-color: var(--tinta); }

/* ─── Eventos: el calendario de lo que viene ──────────────────────── */
/* Como .partido pero sin escudos: sirve para cualquier fecha, no sólo
   para un partido de dos equipos. */
.eventos { display: flex; flex-direction: column; gap: 10px; }
.evento { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 24px; padding: 16px 18px 16px 16px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); }
.evento__fecha { background: rgba(255,255,255,.08); border: 1px solid var(--vidrio-borde); color: var(--tinta); border-radius: var(--radio-sm); text-align: center; padding: 10px 0; }
.evento__dia { font-size: 28px; font-weight: 900; line-height: 1; }
.evento__mes { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--acento-chico); margin-top: 4px; }
.evento__nombre { font-size: 18px; font-weight: 800; }
.evento__meta { font-size: 14px; color: var(--tinta-2); margin-top: 4px; }
.vacio { padding: 34px 24px; border: 1.5px dashed var(--linea); border-radius: var(--radio); text-align: center; color: var(--tinta-2); font-size: 15px; }
/* Un evento de muestra lleva su pastilla punteada junto al nombre. */
.evento__nombre .pastilla--muestra { margin-left: 8px; vertical-align: middle; }

/* ─── Recuerdos: lo que ya pasó (viajes, eventos). Partial `recuerdo` ── */
/* Tres por fila como máximo (seis encuentros de Legends = 3 + 3; con
   auto-fit puro salían 4 + 2); en pantallas angostas bajan a 2 y a 1. */
.recuerdos { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(260px, calc((100% - 28px) / 3)), 1fr)); gap: 14px; }
.recuerdo { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.recuerdo__foto { position: relative; aspect-ratio: 16 / 10; background: var(--linea) center / cover no-repeat; }
/* La pastilla de muestra va sobre la foto: necesita su propio fondo para leerse. */
.recuerdo__muestra { position: absolute; top: 12px; left: 12px; background: rgba(22,24,27,.8); color: #fff; border-color: rgba(255,255,255,.7); }
.recuerdo__cuerpo { padding: 18px 20px 22px; }
.recuerdo__tipo { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--acento-chico); }
.recuerdo__titulo { font-size: 19px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; margin: 6px 0 6px; }
.recuerdo__meta { font-size: 14px; color: var(--tinta-2); }
.recuerdo__detalle { font-size: 14px; color: var(--tinta-2); margin-top: 10px; }
.recuerdo--enlace { display: block; transition: border-color .15s, transform .12s; }
.recuerdo--enlace:hover { border-color: var(--tinta); }
.recuerdo--enlace:active { border-color: var(--tinta); transform: scale(.985); }
.recuerdo__ver { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--acento-chico); }

/* ─── Contacto ────────────────────────────────────────────────────── */
.contacto { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: center; }
.contacto__texto h3 { font-size: clamp(26px, 3vw, 38px); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; }
.contacto__texto p { font-size: 16px; color: var(--tinta-2); margin: 14px 0 0; max-width: 460px; }
.contacto__vias { display: flex; flex-direction: column; gap: 10px; }
.via { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-sm); transition: border-color .15s; }
.via:hover { border-color: var(--tinta); }
.via__icono { width: 42px; height: 42px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--acento); color: var(--negro); }
.via__icono svg { width: 19px; height: 19px; }
.via__que { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); }
.via__dato { font-size: 17px; font-weight: 800; }

/* ─── Cierre: la llamada final, a sangre ──────────────────────────── */
.cierre { position: relative; margin-top: 76px; overflow: hidden; }
.cierre__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.62) brightness(1.02) sepia(.18); }
.cierre__velo { position: absolute; inset: 0; background: rgba(18,20,24,.82); }
.cierre__cuerpo { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; padding: clamp(56px, 8vh, 96px) var(--gutter); text-align: center; }
.cierre__t { font-size: clamp(30px, 4.4vw, 54px); font-weight: 900; letter-spacing: -.03em; line-height: 1.04; }
.cierre__d { font-size: 17px; color: var(--tinta-2); margin: 16px 0 28px; }
.cierre + .pie { margin-top: 0; border-top: 0; }
/* Sin descripción, el botón no se pega al título. */
.cierre__t + .boton { margin-top: 26px; }

/* ─── Celular y tableta para los bloques de sección ───────────────── */
/* Mismo corte que el resto de la hoja (900 px): con 860 quedaba una franja
   entre 861 y 900 donde media sección era de escritorio y la otra media,
   de celular. */
@media (max-width: 900px) {
  .portada { margin-top: -92px; min-height: clamp(380px, 62vh, 560px); }
  /* Encabezado centrado en el teléfono (indicaciones de la entrega de
     diseño, 28/10/2026): sin hueco a la izquierda. El velo deja de
     oscurecer sólo ese lado y pasa a ser vertical, parejo de lado a lado. */
  .portada__cuerpo { padding-top: 120px; text-align: center; }
  .portada__velo { background: linear-gradient(180deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.72) 34%, rgba(0,0,0,.8) 70%, var(--fondo) 100%); }
  .portada__bajada { margin-inline: auto; }
  .portada__pastillas, .portada__acciones, .duelo { justify-content: center; }
  .portada .escucha { margin-inline: auto; }
  /* La galería se arrastra, no se apila: ocho fotos en dos columnas son
     cuatro pantallas de scroll vertical en un teléfono, y además rompen el
     ritmo de la página. En fila, con una foto y pico a la vista, se ven
     todas sin salir del sitio. El desplazamiento y el encuadre los hace el
     navegador, como en los demás carruseles de la casa. */
  .mosaico {
    display: flex; gap: 10px;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .mosaico::-webkit-scrollbar { display: none; }
  /* Todas del mismo tamaño: en fila, una doble no aporta ritmo, sólo
     descoloca el encuadre al soltar. */
  .mosaico__foto,
  .mosaico__foto:nth-child(1),
  .mosaico__foto:nth-child(6) {
    flex: 0 0 min(300px, 76%); scroll-snap-align: start;
    aspect-ratio: 4 / 3; grid-column: auto;
  }
  .prensa, .contacto { grid-template-columns: 1fr; }
  .prensa__img { width: 84px; }
  .hito { grid-template-columns: 76px 1fr 20px; gap: 14px; }
  .evento { grid-template-columns: 70px 1fr; gap: 16px; }
  .evento > .boton { grid-column: 1 / -1; justify-content: center; }
}

/* ─── Reproductor de video ────────────────────────────────────────── */
/* Lo usan Podcast y la ficha de edición, por eso vive aquí. */
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--linea); background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ─── Carrusel ────────────────────────────────────────────────────── */
/* Las opiniones van en carrusel, no en retícula: se arrastran con el dedo.
   El desplazamiento es el del navegador —con su inercia y su rebote—, y el
   `scroll-snap` hace que cada tarjeta quede encuadrada al soltar. Sin
   JavaScript ya funciona; el script sólo añade las flechas para el ratón.

   `.carrusel` se sale del ancho de lectura y se lo devuelve como relleno:
   así la primera tarjeta queda alineada con el texto y las demás se
   asoman por el borde de la pantalla, que es lo que invita a arrastrar. */
.carrusel { position: relative; margin-inline: calc(-1 * var(--gutter)); }
.opiniones, .invitados {
  display: flex; gap: 14px;
  padding-inline: var(--gutter); padding-block: 2px 6px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* la barra sobra: la referencia son los puntos */
}
.opiniones::-webkit-scrollbar, .invitados::-webkit-scrollbar { display: none; }
.opiniones:focus-visible, .invitados:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; }
/* Flechas: sólo donde hay ratón. En táctil estorban y el dedo basta. */
.carrusel__mandos { display: none; }
@media (hover: hover) and (pointer: fine) {
  .carrusel__mandos { display: flex; gap: 8px; justify-content: flex-end; margin: 14px var(--gutter) 0; }
}
.carrusel__flecha {
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1.5px solid var(--linea); color: var(--tinta);
  font: inherit; transition: background .15s, border-color .15s, color .15s, opacity .15s;
}
.carrusel__flecha svg { width: 18px; height: 18px; }
.carrusel__flecha:hover:not(:disabled) { background: var(--acento-chico); border-color: var(--acento-chico); color: var(--negro); }
.carrusel__flecha:disabled { opacity: .35; cursor: default; }

/* ─── Desplazamiento: dónde estoy ─────────────────────────────────── */
/* Barra de progreso de la página, pegada al borde de arriba. Las secciones
   son largas —Tour pasa de cinco mil píxeles— y en un teléfono no hay
   barra de scroll que lo diga. Va por encima de la píldora del menú. */
.progreso {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70;
  pointer-events: none; background: transparent;
}
.progreso__barra {
  height: 100%; width: 100%; background: var(--acento);
  transform: scaleX(0); transform-origin: left;
}

/* Indicador de posición dentro de un carrusel. Sólo en táctil: con ratón
   están las flechas, que ya dicen si queda algo. Sin esto, en el teléfono
   no hay manera de saber cuántas fotos hay ni por dónde vas. */
.deslizador {
  position: relative; height: 3px; border-radius: 999px; overflow: hidden;
  background: var(--linea); margin: 12px 0 0;
}
.carrusel .deslizador { margin-inline: var(--gutter); }
/* Posición y ancho en porcentaje del riel, no con transform: mezclar una
   escala con una traslación en porcentaje se presta a error, y aquí lo que
   importa es que el pulgar caiga EXACTAMENTE donde va. Son 3 px: el coste
   de animar `left` en vez de `transform` no se nota. */
.deslizador__pulgar {
  position: absolute; top: 0; bottom: 0; left: 0; width: 100%;
  border-radius: inherit; background: var(--acento);
}
@media (hover: hover) and (pointer: fine) { .deslizador { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .progreso__barra { transition: transform .1s linear; }
  .deslizador__pulgar { transition: left .1s linear, width .1s linear; }
}

/* ─── Volver arriba ───────────────────────────────────────────────── */
/* Flotante abajo a la derecha. En celular se separa del borde con el
   `safe-area` para no quedar bajo la barra del sistema. El acento es el
   de la sección, igual que todo lo demás. */
.arriba {
  position: fixed; z-index: 60;
  right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.78); color: var(--tinta);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.arriba svg { width: 20px; height: 20px; }
.arriba:hover, .arriba:focus-visible {
  background: var(--acento-chico); border-color: var(--acento-chico);
  color: var(--negro); transform: translateY(-2px);
}
@media (max-width: 900px) { .arriba { right: 14px; width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .arriba { transition: none; } }

/* ─── Pie ─────────────────────────────────────────────────────────── */
/* Una sola columna centrada: logo, secciones, redes, avisos y copyright. */
.pie { max-width: var(--ancho); margin: 64px auto 0; padding: 34px var(--gutter) 40px; border-top: 1px solid var(--linea); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.pie__marca { width: 200px; height: auto; display: block; }.pie__redes, .pie__legales { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 14px; font-weight: 600; }
.pie__legales a:hover { color: var(--acento-chico); }
.pie__redes { gap: 10px; color: var(--tinta-2); }
.pie__redes .red-icono { border-color: var(--linea); }
.pie__legales { gap: 8px 20px; font-size: 13px; font-weight: 500; color: var(--tinta-2); }
.pie__legal { font-size: 13px; color: var(--tinta-2); }
@media (max-width: 768px) { .pie__marca { width: 164px; } .pie { gap: 14px; } }

/* ─── Celular ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Botones compactos: con 15px, interlineado de 1.55 y 13px de relleno
     medían 51 de alto y tres apilados se comían media pantalla. 44 es el
     mínimo que se toca bien; el alto lo fija min-height, no el relleno. */
  .boton { font-size: 14px; line-height: 1.2; min-height: 44px; padding: 0 18px; gap: 8px; }
  .boton.boton--icono svg { width: 16px; height: 16px; }   /* le gana a seccion-podcast.css, que carga después */
  .portada__acciones { gap: 8px; }
  .nav__marcas { display: none; }
  .nav { top: 12px; }
  .nav__pildora { width: 100%; justify-content: space-between; padding-left: 18px; }
  .pagina { padding-top: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ─── Toque ───────────────────────────────────────────────────────── */
/* En un teléfono no hay hover: si al presionar no cambia nada, el toque se
   siente muerto hasta que la página navega. Cada cosa tocable responde al
   bajar el dedo. `manipulation` quita la espera del doble toque para zoom,
   y el resaltado gris del navegador se apaga porque `:active` lo sustituye
   (quitar uno sin poner el otro deja el toque sin respuesta). */
a, button, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.boton, .nav__menu, .menu__x, .arriba, .red-icono, .visor__x {
  transition: background .15s, color .15s, border-color .15s, filter .15s, transform .12s;
}
.boton:active, .nav__menu:active, .menu__x:active, .red-icono:active, .visor__x:active { transform: scale(.96); }
.boton:active { background: rgba(255,255,255,.14); }
.boton--lleno:active { background: var(--acento-chico); filter: brightness(.85); }
.arriba:active { transform: scale(.92); background: var(--acento-chico); color: var(--negro); }
.nav__link:active { background: rgba(255,255,255,.12); color: var(--tinta); }
.menu__item:active .menu__nombre { color: var(--acento); }
.menu__item:active { border-bottom-color: var(--acento); }
a.pilar:active, .prensa__nota:active, a.relacionado:active, .prensa__boton:active, .via:active, .entre__ir:active, .entre__todas:active,
.nota:active, .edicion:active, a.aliado:active {
  border-color: var(--tinta); background-color: rgba(255,255,255,.07); transform: scale(.985);
}
a.hito:active { background: rgba(255,255,255,.05); }
a.hito:active .hito__flecha { color: var(--acento); }
.fila-ep:active { background: rgba(255,255,255,.1); }
[data-ampliar]:active { transform: scale(.97); opacity: .85; }
.bastidores:active .bastidores__velo { background: rgba(18,20,24,.3); }
.pie__legales a:active { color: var(--acento-chico); }
a.pilar, .prensa__nota, .via, .entre__ir, .entre__todas, .nota, .edicion, a.aliado {
  transition: border-color .15s, background-color .15s, transform .12s;
}

/* Áreas de toque de 44 px sin agrandar lo que se ve: los avisos legales del
   pie son texto de 13 px y medían 20 de alto. */
.pie__legales a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
.pie__legales { gap: 0 12px; }

/* ─── Visor de fotos (assets/js/v2-lightbox.js) ───────────────────── */
/* Las fotos que se amplían son botones: se ven igual, pero se pueden tocar
   y se alcanzan con el teclado. */
[data-ampliar] { cursor: zoom-in; padding: 0; font: inherit; color: inherit; transition: opacity .15s, transform .15s; }
[data-ampliar]:hover { opacity: .88; }
[data-ampliar]:focus-visible { outline: 2px solid var(--acento-chico); outline-offset: 3px; }
.con-visor, .con-visor body { overflow: hidden; }
.visor { position: fixed; inset: 0; z-index: 200; background: #07070d; display: flex; flex-direction: column; }
.visor[hidden] { display: none; }
.visor__barra { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--gutter); flex: none; }
.visor__cuenta { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tinta-2); }
/* Una foto por pantalla; el dedo desliza y cada foto se queda centrada. */
.visor__pista {
  flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none; outline: none;
  /* El horizontal es del carrete; el vertical lo toma el script para
     cerrar deslizando hacia abajo, sin que el navegador mueva la página. */
  touch-action: pan-x pinch-zoom;
}
.visor__pista::-webkit-scrollbar { display: none; }
.visor__foto { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; padding: 0 var(--gutter) 24px; margin: 0; }
.visor__foto img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radio-sm); user-select: none; -webkit-user-drag: none; }
.visor__x, .visor__flecha {
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2); cursor: pointer;
}
.visor__x:hover, .visor__flecha:hover { background: rgba(255,255,255,.2); }
.visor__x svg, .visor__flecha svg { width: 22px; height: 22px; }
.visor__flecha { position: absolute; top: 50%; transform: translateY(-50%); }
.visor__flecha[hidden] { display: none; }
.visor__flecha--ant { left: 18px; }
.visor__flecha--sig { right: 18px; }
/* En el teléfono se desliza con el dedo: las flechas sobran y tapan la foto. */
@media (hover: none) and (pointer: coarse) { .visor__flecha { display: none; } }

/* ─── Fichas: una página dentro de una sección (reportaje, partido) ── */
/* El título es una frase, no el nombre de una marca: va más chico que en
   las portadas de sección para que un titular largo quepa en tres líneas. */
.portada--ficha .portada__titulo { font-size: clamp(32px, 4.4vw, 58px); line-height: 1.05; letter-spacing: -.03em; max-width: 900px; }
.compartir { display: flex; flex-wrap: wrap; gap: 10px; }

/* Ficha de algo que ya pasó (views/v2/pasado.hbs): viajes y Legends. */
.pasado__experiencia { max-width: 760px; }
/* Portada con la foto entera en el teléfono (fotos de grupo). La foto va
   debajo del menú en su proporción real, se funde con el fondo por abajo y
   el título sigue debajo. En escritorio la portada es la de siempre. */
@media (max-width: 900px) {
  .portada--foto-completa { display: block; min-height: 0; padding-top: 92px; }
  .portada--foto-completa .portada__foto {
    position: relative; inset: auto; display: block; width: 100%; height: auto;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent);
            mask-image: linear-gradient(180deg, #000 72%, transparent);
  }
  .portada--foto-completa .portada__velo { display: none; }
  .portada--foto-completa .portada__cuerpo { padding-top: 6px; }
}
.pasado__pendiente { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; font-size: 14px; color: var(--tinta-2); }
@media (max-width: 900px) { .pasado__pendiente { justify-content: center; } }
.pasado__testimonio blockquote { font-size: 16px; line-height: 1.6; }
.pasado__testimonio figcaption { margin-top: 12px; font-size: 14px; font-weight: 800; color: var(--acento-chico); }

/* Itinerario de un viaje (views/v2/viaje.hbs): una columna por día, con la
   línea de tiempo a la izquierda. */
.itinerario { display: flex; flex-direction: column; gap: 22px; }
.itinerario__dia { display: grid; grid-template-columns: 170px 1fr; gap: 24px; }
.itinerario__fecha { font-size: 15px; font-weight: 800; color: var(--acento-chico); padding-top: 2px; }
.itinerario__pasos { list-style: none; border-left: 2px solid var(--linea); padding-left: 22px; display: flex; flex-direction: column; gap: 16px; }
.itinerario__paso { position: relative; }
.itinerario__paso::before { content: ''; position: absolute; left: -29px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--acento); }
.itinerario__hora { font-size: 13px; font-weight: 700; color: var(--tinta-2); }
.itinerario__concepto { font-size: 17px; font-weight: 800; }
.itinerario__detalle { font-size: 15px; color: var(--tinta-2); margin-top: 2px; }
@media (max-width: 900px) {
  .itinerario__dia { grid-template-columns: 1fr; gap: 10px; }
}

/* ─── Relacionados: «Otros viajes» / «Otros encuentros» en una ficha ─ */
/* Filas compactas (León, 30/10/2026): sin foto grande ni descripción, para
   que la lista sea secundaria frente al evento que se está viendo. */
.relacionados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.relacionado { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 18px 10px 10px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-sm); transition: border-color .15s; }
a.relacionado:hover { border-color: var(--tinta); }
.relacionado__mini { flex: none; width: 64px; height: 48px; object-fit: cover; border-radius: calc(var(--radio-sm) - 4px); background: var(--linea); }
.relacionado__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.relacionado__titulo { font-size: 15px; font-weight: 700; line-height: 1.3; }
.relacionado__meta { font-size: 13px; color: var(--tinta-2); }
.relacionado .flecha { flex: none; color: var(--tinta-2); }
@media (max-width: 640px) {
  .relacionados { grid-template-columns: 1fr; }
}

/* ─── Recuadros centrados en el teléfono ──────────────────────────── */
/* Cifras y pilares (las tarjetas de «01 · título · texto») se centran en
   el teléfono en todas las páginas (León, 30/10/2026); en escritorio siguen
   alineados a la izquierda. */
@media (max-width: 720px) {
  .cifra, .pilar { text-align: center; }
  .cifra__icono { margin-inline: auto; }
  .premio__cab { justify-content: center; }
}

/* ─── Aclaración: la nota que va debajo de un bloque ──────────────── */
/* Recuadro punteado con una pastilla y el texto, el de «En 2027, SOCCER iD
   CUP evoluciona a SOCCER iD TOUR». Todas las notas de ese tipo lo usan
   (León, 30/10/2026), nunca como texto suelto. En el teléfono, centrada. */
.aclaracion {
  display: flex; gap: 14px; align-items: center;
  margin: 26px 0; padding: 16px 20px;
  border: 1.5px dashed var(--linea); border-radius: var(--radio-sm);
  font-size: 14px; color: var(--tinta-2); text-wrap: pretty;
}
.aclaracion .pastilla { flex: none; }
.aclaracion b { color: var(--tinta); }
/* Pegada al bloque que aclara. */
.aclaracion--pegada { margin: 14px 0 0; }
/* La primera cosa de su bloque (el aviso del itinerario). */
.aclaracion--arriba { margin: 0 0 22px; }
@media (max-width: 720px) {
  .aclaracion { flex-direction: column; text-align: center; gap: 10px; }
}

/* ─── Rejillas sin tarjetas sueltas (tabletas y plegables) ────────── */
/* Con el ajuste automático, en anchos intermedios (iPad, Surface Duo,
   Galaxy Fold abierto) quedaban filas de 3+1 o 2+1. Según cuántas
   tarjetas haya, la rejilla elige un reparto parejo. */
@media (min-width: 561px) and (max-width: 1100px) {
  .cifras:has(> :nth-child(4):last-child),
  .pilares:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 561px) and (max-width: 699px) {
  .cifras:has(> :nth-child(3):last-child),
  .pilares:has(> :nth-child(3):last-child),
  .recuerdos:has(> :nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 700px) and (max-width: 1100px) {
  .cifras:has(> :nth-child(3):last-child),
  .pilares:has(> :nth-child(3):last-child),
  .recuerdos:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}