/* Lo de la portada (1207) en el resto de la web (1208; el porqué en SCHEMA):
 * la banda de arriba de cada página principal, en el color de su sección
 * (`--acento`, que pone `data-seccion`), y la cascada de sus bloques. La
 * inyecta quien pinta (`hojaInyectada('css/seccion.css')`) o la página la
 * enlaza en su cabecera. */

.banda-s {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e-xl);
  min-height: 132px;
  padding: var(--e-xl);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--acento) 28%, var(--border));
  border-radius: var(--radius-xl);
  background:
    radial-gradient(60% 140% at 92% 0%, color-mix(in srgb, var(--acento) 30%, transparent), transparent 62%),
    linear-gradient(135deg, color-mix(in srgb, var(--acento) 12%, var(--white)), var(--white) 72%);
  isolation: isolate;
}

.banda-s-texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--e-xs);
  min-width: 0;
}

.banda-s-ceja {
  color: var(--acento);
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

:root[data-theme='dark'] .banda-s-ceja { color: color-mix(in srgb, var(--acento) 85%, var(--blanco-fijo)); }

.banda-s :is(h1, h2) {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  line-height: 1.1;
  text-wrap: balance;
}

/* La raya de color bajo el título de una lista (1018) sobra en la banda. */
.banda-s h1::after { content: none; }

.banda-s-lema {
  margin: 0;
  color: var(--text-mid);
  font-size: var(--t-sm);
}

.banda-s-cifras {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-sm) var(--e-xl);
  margin-top: var(--e-sm);
}

.banda-s-cifra {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  text-decoration: none;
}

.banda-s-cifra b {
  font-family: var(--font-marca);
  font-size: var(--t-2xl);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.banda-s-cifra small {
  color: var(--text-mid);
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

:is(a, button).banda-s-cifra { cursor: pointer; }
:is(a, button).banda-s-cifra:hover small { color: var(--acento); }

.banda-s-derecha {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--e-md);
  margin-left: auto;
}

/* Tres cartas en abanico (las de la banda de la portada, en pequeño). */
.banda-s-abanico {
  position: relative;
  width: 148px;
  height: 104px;
}

.banda-s-abanico > * {
  position: absolute;
  bottom: 0;
  width: 64px;
  aspect-ratio: 245 / 342;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--ice);
  box-shadow: var(--shadow-lg);
  animation: seccion-flota 6s ease-in-out infinite;
}

.banda-s-abanico img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banda-s-abanico > :nth-child(1) { left: 0; --giro: -10deg; animation-delay: -1s; }
.banda-s-abanico > :nth-child(2) { left: 42px; bottom: 10px; z-index: 1; --giro: 0deg; animation-delay: -3s; }
.banda-s-abanico > :nth-child(3) { left: 84px; --giro: 10deg; animation-delay: -5s; }

@keyframes seccion-flota {
  0%, 100% { transform: translateY(0) rotate(var(--giro, 0deg)); }
  50% { transform: translateY(-5px) rotate(var(--giro, 0deg)); }
}

/* En el móvil la banda es una tira con las cifras: el título ya lo dice la
 * burbuja de abajo (la 1038) y lo que se viene a ver tiene que empezar en
 * la primera pantalla (la 1040). */
@media (max-width: 600px) {
  .banda-s {
    min-height: 0;
    padding: var(--e-md) var(--e-lg);
  }

  .banda-s :is(h1, h2),
  .banda-s-lema,
  .banda-s-ceja {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .banda-s-cifras { margin-top: 0; gap: var(--e-sm) var(--e-lg); }
  .banda-s-cifra b { font-size: var(--t-xl); }
  .banda-s-abanico { width: 92px; height: 64px; }
  .banda-s-abanico > * { width: 40px; }
  .banda-s-abanico > :nth-child(2) { left: 26px; bottom: 6px; }
  .banda-s-abanico > :nth-child(3) { left: 52px; }
}

/* La cascada (1207): lo que lleva `en-cascada` entra con sus hijos uno
 * detrás de otro, 60 ms cada uno y como mucho ocho. Solo opacidad y
 * `transform`: nada mueve el dibujo. */
@keyframes seccion-entra {
  from { opacity: 0; transform: translateY(12px); }
}

.banda-s,
.en-cascada > * {
  animation: seccion-entra 0.5s var(--ease) backwards;
}

.en-cascada > :nth-child(2) { animation-delay: 60ms; }
.en-cascada > :nth-child(3) { animation-delay: 120ms; }
.en-cascada > :nth-child(4) { animation-delay: 180ms; }
.en-cascada > :nth-child(5) { animation-delay: 240ms; }
.en-cascada > :nth-child(6) { animation-delay: 300ms; }
.en-cascada > :nth-child(7) { animation-delay: 360ms; }
.en-cascada > :nth-child(n + 8) { animation-delay: 420ms; }

@media (prefers-reduced-motion: reduce) {
  .banda-s,
  .en-cascada > *,
  .banda-s-abanico > * {
    animation: none;
  }
}

/* El podio del mes en una banda (Gente, 1209): las tres caras sobre sus
 * peanas, el primero en medio y más alto. */
.banda-s-podio {
  display: flex;
  align-items: flex-end;
  gap: var(--e-sm);
}

.banda-s-puesto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-xs);
  width: 72px;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}

.banda-s-puesto-cara {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 2px solid var(--white);
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  color: var(--blanco-fijo);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

.banda-s-puesto-1 .banda-s-puesto-cara { width: 56px; height: 56px; }

.banda-s-puesto-nombre {
  max-width: 100%;
  overflow: hidden;
  font-size: var(--t-2xs);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.banda-s-puesto-xp {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-mid);
  font-size: var(--t-2xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.banda-s-peana {
  display: grid;
  width: 100%;
  place-items: center;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: #1a1205;
  font-family: var(--font-marca);
  font-size: var(--t-lg);
  font-weight: 800;
}

.banda-s-puesto-1 .banda-s-peana { height: 48px; background: linear-gradient(180deg, #e0b252, #a8770c); }
.banda-s-puesto-2 .banda-s-peana { height: 32px; background: linear-gradient(180deg, #cbd5e1, #8796a8); }
.banda-s-puesto-3 .banda-s-peana { height: 24px; background: linear-gradient(180deg, #e0a06a, #a8622f); }

@media (max-width: 600px) {
  .banda-s-podio { gap: var(--e-xs); }
  .banda-s-puesto { width: 32px; }
  .banda-s-puesto-cara { width: 28px; height: 28px; font-size: var(--t-xs); }
  .banda-s-puesto-1 .banda-s-puesto-cara { width: 32px; height: 32px; }
  .banda-s-puesto-nombre,
  .banda-s-puesto-xp { display: none; }
  .banda-s-puesto-1 .banda-s-peana { height: 20px; }
  .banda-s-puesto-2 .banda-s-peana { height: 14px; font-size: 0; }
  .banda-s-puesto-3 .banda-s-peana { height: 8px; font-size: 0; }
  .banda-s-peana { font-size: var(--t-xs); }
}

/* ── 1214: las otras dos animaciones de la portada (el porqué en SCHEMA) ──
   Lo que tiene foto BRILLA al pasar el ratón (un reflejo que cruza), y lo que
   está vivo LATE (el punto verde de «en línea»). Las cifras que cuentan son
   js/cifras-cuentan.js. Todo quieto con «menos movimiento». */
@keyframes seccion-reflejo {
  from { transform: translateX(-120%) skewX(-18deg); }
  to { transform: translateX(220%) skewX(-18deg); }
}

/* Lo que se posiciona para llevar el reflejo (el abanico ya lo está). */
:where(.guia-tarjeta .guia-arte, .noticia-portada, .mc-cruce-carta, .com-persona-vitrina a) {
  position: relative;
  overflow: hidden;
}

:is(.guia-tarjeta .guia-arte, .noticia-portada:not(.noticia-portada-vacia), .mc-cruce-carta, .banda-s-abanico > *, .com-persona-vitrina a)::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 2;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
}

:is(.guia-tarjeta:hover .guia-arte, .noticia-tarjeta:hover .noticia-portada, .noticia-titular:hover .noticia-portada, .mc-cruce-carta:hover, .banda-s-abanico > :hover, .com-persona-vitrina a:hover)::after {
  animation: seccion-reflejo 0.7s var(--ease);
}

@keyframes seccion-late {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

.avatar-conectado::after { animation: seccion-late 2.4s ease-out infinite; }

@media (prefers-reduced-motion: reduce) {
  :is(.guia-tarjeta:hover .guia-arte, .noticia-tarjeta:hover .noticia-portada, .noticia-titular:hover .noticia-portada, .mc-cruce-carta:hover, .banda-s-abanico > :hover, .com-persona-vitrina a:hover)::after,
  .avatar-conectado::after {
    animation: none;
  }
}

/* Las cabeceras de bloque con su icono en el color de la sección (1214). */
.cab-bloque-ico {
  display: inline-grid;
  width: 28px;
  height: 28px;
  margin-right: var(--e-sm);
  place-items: center;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--acento) 18%, transparent);
  color: var(--acento);
  vertical-align: middle;
}
.cab-bloque-ico svg { width: 16px; height: 16px; }