/* 111 · Variante de la 110 con imágenes propias de Andreu (generadas con IA). Base 104 (prefijo es104-) + es110-. Prefijo es104-. Bio y cifras de la 90, marquesina de la 93 a 12 px/s. */
.es104-eye { font: 500 0.75rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--signal); margin: 0; }

.es104-bio { display: grid; gap: var(--s-4); padding-bottom: var(--sec); }
.es104-txt { display: grid; gap: var(--s-2); }
.es104-txt p { margin: 0; line-height: 1.55; max-width: 52ch; }
.es104-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--line-strong); list-style: none; }
.es104-cifras li { display: flex; flex-direction: column; gap: 8px; }
.es104-cifra { font-size: clamp(2.5rem, 9vw, 6.5rem); font-weight: 500; line-height: .95; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--signal); }
.es104-cifras .mut { font-size: var(--t-small); line-height: 1.3; }
@media (min-width: 900px) { .es104-txt { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); } .es104-txt p { max-width: none; } }

/* Bandas editoriales oscuras. Foto a sangre (sin background-attachment), velo grafito rgba(26,25,24,.62) y texto blanco.
   Contraste: las cinco imágenes contienen píxeles blancos puros (255,255,255). Bajo el velo .62 el peor caso queda en #717170 = 4,92:1 con texto blanco (AA, también texto pequeño). Con .60 sería 4,60:1; se deja .62 como margen mínimo. */
.es110-bio { padding-bottom: var(--sec); }
.es110-banda { position: relative; display: flex; align-items: center; overflow: hidden; isolation: isolate; background: #1a1918; color: #fff; }
.es110-cifras-b { min-height: 70vh; min-height: 70svh; }
.es110-frase-b { min-height: 50vh; min-height: 50svh; }
.es110-foto { position: absolute; inset: 0; z-index: -2; }
.es110-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; animation: es110-zoom 40s ease-in-out infinite alternate; will-change: transform; }
.es110-cifras-b .es110-foto img { object-position: 50% 88%; }
.es110-frase-b .es110-foto img { object-position: 50% 45%; }
@media (max-width: 599px) { .es110-cifras-b .es110-foto img { object-position: 50% 90%; } .es110-frase-b .es110-foto img { object-position: 50% 50%; } }
.es110-velo { position: absolute; inset: 0; z-index: -1; background: rgba(26, 25, 24, .62); }
.es110-fuera .es110-foto img { animation-play-state: paused; }
@keyframes es110-zoom { from { transform: scale(1); } to { transform: scale(1.07); } }
.es110-cont { width: 100%; padding-block: var(--s-4); }
.es110-cifras { border-top: 1px solid rgba(255, 255, 255, .45); }
.es110-cifras .es104-cifra { color: #fff; }
.es110-lab { font-size: var(--t-small); line-height: 1.3; color: #fff; }
.es110-frase { margin: 0; max-width: 20ch; font-size: clamp(1.75rem, 4.6vw, 3.5rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; color: #fff; }
@media (max-width: 599px) { .es110-cifras { gap: 8px; } .es110-cifras .es104-cifra { font-size: clamp(1.9rem, 11vw, 2.75rem); } }

.es104-como { padding-block: var(--sec); border-top: 1px solid var(--line-strong); }
.es104-como-g { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3) var(--gut); margin-top: var(--s-2); }
.es104-como h3 { margin: 0 0 var(--s-1); }
.es104-como p { margin: 0; line-height: 1.5; max-width: 40ch; }
@media (min-width: 800px) { .es104-como-g { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); } }

.es104-mq { background: var(--terra-claro); border-top: 1px solid var(--line-strong); padding-block: var(--s-4) var(--sec); overflow: hidden; }
.es104-mq-cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); padding-bottom: var(--s-3); }
.es104-mq .es104-eye { color: var(--terra-oscuro); }
.es104-mq-n { margin: 0; font-size: var(--t-small); color: var(--terra-oscuro); }
.es104-vista:focus-visible { outline: 3px solid var(--terra-oscuro); outline-offset: 3px; }

.es104-filas { --h: clamp(72px, 9vw, 104px); --g: 12px; display: grid; gap: var(--g); }
/* Sin JS o con reduced-motion: tira con scroll horizontal; el grupo duplicado no se ve */
.es104-vista { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; padding-block: 2px; }
.es104-pista { display: flex; width: max-content; }
.es104-grupo { display: flex; flex: none; gap: var(--g); margin: 0; padding: 0 var(--g) 0 0; list-style: none; }
.es104-grupo[aria-hidden="true"] { display: none; }
.es104-it { flex: none; height: var(--h); aspect-ratio: 9 / 5; background: #fff; border: 1px solid var(--piedra); display: flex; align-items: center; justify-content: center; position: relative; }
.es104-it::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 2px; background: var(--signal); transform: scaleX(0); transition: transform .25s ease; }
.es104-it:hover::after { transform: scaleX(1); }
.es104-logo img { display: block; width: 100%; height: 100%; object-fit: contain; filter: grayscale(1); mix-blend-mode: multiply; transition: filter .25s ease; }
.es104-logo:hover img { filter: none; }
.es104-nom { padding: 8px 12px; text-align: center; }
.es104-nom span { font: 500 0.8125rem/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; letter-spacing: .04em; text-transform: uppercase; color: #3a3835; }

.es104-vivo .es104-vista { overflow: hidden; }
.es104-vivo .es104-grupo[aria-hidden="true"] { display: flex; }
.es104-vivo .es104-pista { animation: es104-izq var(--dur, 120s) linear infinite; will-change: transform; }
.es104-vivo .es104-der .es104-pista { animation-name: es104-der; }
@keyframes es104-izq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes es104-der { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.es104-fila:hover .es104-pista, .es104-fila:focus-within .es104-pista, .es104-fuera .es104-pista { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .es104-vivo .es104-vista { overflow-x: auto; }
  .es104-vivo .es104-pista { animation: none; will-change: auto; }
  .es104-vivo .es104-grupo[aria-hidden="true"] { display: none; }
  .es104-it::after, .es104-logo img { transition: none; }
  .es110-foto img { animation: none; will-change: auto; transform: none; }
}

/* Cifras animadas: ancho estable */
.es104-cifra{font-variant-numeric:tabular-nums;white-space:nowrap}
.es104-num{display:inline-block;text-align:left;font-variant-numeric:tabular-nums}