/* ============================================================
   PLANTILLAS Y PARTIDOS — Club Voleibol Villalba
   Depende de styles.css: usa --accent / --grad-a / --grad-b, que
   cada bloque hereda de su clase de tema (.theme-sf2, etc.).
   ============================================================ */

/* ---------------- Cabecera de página ----------------------- */

.page-hero {
  position: relative;
  padding: 7rem 0 1.75rem;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-ink-2);
  overflow: hidden;
}
.page-hero__court { position: absolute; inset: 0; opacity: 0.35; }
/* Variante lisa: la cabecera se funde con la barra de pestanas que va debajo,
   sin rejilla de fondo ni linea divisoria entre ambas. */
.page-hero--flush { border-bottom: 0; }
.page-hero__inner {
  position: relative; margin: 0 auto; max-width: var(--maxw);
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 1.25rem; padding: 0 1.5rem;
}
.page-hero__title { font-size: clamp(2.4rem, 6vw, 4.5rem); }
/* El texto y el selector de temporada comparten fila: el desplegable se
   apoya en la frase en vez de irse al otro extremo de la cabecera. */
.page-hero__leadrow {
  margin-top: 0.75rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem;
}
.page-hero__leadrow .page-hero__lead { margin-top: 0; }
.page-hero__lead {
  margin-top: 0.75rem; max-width: 34rem;
  font-size: 0.9375rem; line-height: 1.7; color: var(--color-mute);
}

.page-jump {
  position: relative; margin: 2.5rem auto 0; max-width: var(--maxw);
  display: flex; flex-wrap: wrap; gap: 0.625rem; padding: 0 1.5rem;
}

/* ---------------- Selector de temporada -------------------- */

.season-picker { display: flex; align-items: center; gap: 0.875rem; flex-wrap: wrap; }
.season-picker__label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.625rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.24em; color: var(--color-mute);
}
.season-picker__control { position: relative; }
.season-picker__select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--color-line); border-radius: 999px;
  background: var(--color-panel); color: var(--color-bone);
  font: inherit; font-size: 0.875rem; font-weight: 600;
  padding: 0.75rem 2.75rem 0.75rem 1.25rem;
  cursor: pointer; transition: border-color var(--duration-fast) ease, color var(--duration-fast) ease;
}
.season-picker__select:hover,
.season-picker__select:focus-visible {
  border-color: rgb(var(--accent-rgb) / 0.65); color: var(--accent); outline: none;
}
.season-picker__chevron {
  position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--color-mute);
}

/* ---------------- Chips ------------------------------------ */

.chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--color-line); border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
  color: rgb(var(--color-bone-rgb) / 0.78);
  transition: border-color var(--duration-fast) ease, color var(--duration-fast) ease, background var(--duration-fast) ease;
}
.chip--sm {
  padding: 0.25rem 0.625rem; font-size: 0.5625rem; letter-spacing: 0.16em;
  color: var(--color-mute);
}
.chip--link:hover,
.chip--btn:hover { border-color: rgb(var(--accent-rgb) / 0.6); color: var(--accent); }
.chip--btn { cursor: pointer; }
.chip--btn.is-on {
  background: var(--accent); border-color: var(--accent); color: var(--color-ink);
}

/* ---------------- Pestañas por categoría ------------------- */
/* Las comparten partidos.php y plantillas.php: misma barra, mismo
   comportamiento. Sin JavaScript son un índice de saltos. */

.hub-tabs {
  position: sticky; top: 76px; z-index: 40;
  border-bottom: 1px solid var(--color-line);
  background: rgb(var(--color-ink-rgb) / 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
/* Mismo fondo que .page-hero--flush: una sola franja. Fondo opaco porque al
   quedar fija pasa por encima del contenido. */
.hub-tabs--flush {
  background: var(--color-ink-2);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.hub-tabs__bar {
  margin: 0 auto; max-width: var(--maxw); padding: 0 1.5rem;
  display: flex; align-items: center; gap: 2rem;
}
/* Antes era un rail que se desplazaba cuando no cabían todas las
   categorías, con degradado en el borde para avisar del recorrido. Con el
   buscador al lado quedaba menos sitio del que hacía falta y la última
   pestaña se cortaba contra el borde sin que nada invitase a arrastrar:
   ahora la que no cabe baja a una segunda fila y todas están a la vista. */
.hub-tabs__inner {
  flex: 1; min-width: 0;
  display: flex; align-items: stretch; flex-wrap: wrap; gap: 0.25rem 0.5rem;
}
.hub-tab {
  position: relative; isolation: isolate; flex: 0 1 auto;
  display: flex; align-items: center; gap: 0.625rem;
  padding: 1.375rem 1.125rem; min-height: 44px; white-space: nowrap;
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em;
  color: rgb(var(--color-bone-rgb) / 0.6);
  transition: color var(--duration-fast) ease;
}
.hub-tab:hover { color: var(--color-bone); }
/* La pestana activa se marca con un bloque de color de esquinas superiores
   redondeadas, no con un subrayado: apoya en el borde inferior de la barra y
   hace de lengueta hacia la seccion. isolation aisla el z-index -1 para que
   el bloque quede sobre el fondo de la barra y por debajo del texto. */
.hub-tab::after {
  content: ""; position: absolute; z-index: -1;
  left: 0; right: 0; top: 0.5rem; bottom: 0;
  background: var(--accent); border-radius: 12px 12px 0 0;
  transform: scaleY(0); transform-origin: bottom center;
  transition: transform var(--duration-base) var(--ease-out);
}
.hub-tab.is-on { color: var(--color-ink); }
.hub-tab.is-on::after { transform: scaleY(1); }

/* ---------------- Bloque de categoría ---------------------- */

/* Misma malla con grano que las tiras de la portada (--mesh y --noise,
   definidos en styles.css). */
.team-block {
  position: relative; padding-bottom: 2.5rem; overflow: hidden;
  background-color: var(--color-ink);
  background-image: var(--mesh);
}
.team-block::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--noise);
  opacity: var(--noise-opacity);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.team-block > * { position: relative; z-index: 1; }

/* La malla no es de un solo tono: arriba tira a claro y abajo termina en
   azul oscuro (#064f76 en sf2). El texto en tinta se leía bien arriba y
   caía a 2,27:1 abajo, por debajo del 4,5:1 de AA. Cada pieza de texto
   lleva ahora su propia superficie oscura y vuelve al hueso (17:1), que
   es el valor por defecto de la paleta y se comporta igual en los cuatro
   temas. Las fichas y las píldoras del cuerpo técnico ya tenían fondo
   opaco, esas no se tocan. */
.team-block .roster-count {
  display: inline-flex; align-items: center;
  border-radius: 999px; padding: 0.4375rem 1rem;
  background: rgb(var(--color-ink-rgb) / 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--color-bone);
}
.team-block .roster-count__sep { background: rgb(var(--color-bone-rgb) / 0.35); }
.team-block__foot {
  margin-top: 2.25rem; padding: 1.5rem 0 1.75rem;
}
.team-block__foot .team-block__subhead { margin-top: 0; color: var(--color-bone); }
.team-block__more.btn--ghost {
  border-color: rgb(var(--color-bone-rgb) / 0.35);
  color: var(--color-bone);
}
.team-block__more.btn--ghost:hover {
  border-color: var(--color-bone);
  background: rgb(var(--color-bone-rgb) / 0.08);
}
.team-block[data-panel] { scroll-margin-top: 124px; }
.team-block__inner {
  margin: 0 auto; max-width: var(--maxw); padding: 1.5rem 1.5rem 0;
}
.team-block__subhead {
  margin: 2.25rem 0 1rem;
  font-family: var(--font-display); font-size: 1.25rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: rgb(var(--color-bone-rgb) / 0.9);
}
.team-block__empty {
  padding: 1.5rem 0; font-size: 0.9375rem; color: var(--color-mute);
}
.team-block__more { margin-top: 1.75rem; }

/* ---------------- Banner de categoría ---------------------- */

.team-banner {
  position: relative; overflow: hidden;
  min-height: 15rem; display: flex; align-items: center;
  scroll-margin-top: 92px;
}
.team-banner--compact { min-height: 7rem; }
.team-banner__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: grayscale(0.7) brightness(0.5);
}
.team-banner__grad {
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, var(--grad-a), var(--grad-b));
  opacity: 0.82;
  mix-blend-mode: multiply;
}
.team-banner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--color-ink), rgb(var(--color-ink-rgb) / 0.15) 60%, transparent);
  pointer-events: none;
}

/* En plantillas la franja ensena la fotografia limpia: fuera el velo de color
   y fuera el fundido a tinta del pie, que sobre la malla de la seccion se leia
   como una banda negra. La foto ya va oscurecida por su propio filtro, asi que
   el titulo en blanco se sigue leyendo. */
.team-block .team-banner__grad { display: none; }
.team-block .team-banner::after { display: none; }

/* Y respira por arriba: mas altura con el texto apoyado abajo deja ver mas
   fotografia por encima del titulo. */
.team-block .team-banner { min-height: 12.5rem; align-items: flex-end; }

/* Sin el velo de color ni el fundido del pie, la cabecera y la cuadricula
   comparten la misma malla y se leian como una sola mancha. La divisoria la
   separa, y va en el CSS y no en la foto: antes solo aparecia en las
   categorias cuya imagen de banner no llegaba a cargar —el marco que pinta
   el navegador alrededor de una imagen rota—, asi que unas categorias la
   tenian y otras no. */
.team-block .team-banner {
  border-bottom: 1px solid rgb(var(--color-bone-rgb) / 0.22);
}
.team-block .team-banner__inner { padding-top: 3.5rem; }

/* Mosaico de fotos barajadas */
.team-banner__mosaic {
  position: absolute; inset: 0; display: flex; gap: 2px;
  opacity: 0.4; mix-blend-mode: luminosity;
}
.team-banner__tile { flex: 1 1 0; min-width: 0; overflow: hidden; }
.team-banner__tile img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.1);
}
.team-banner__tile:nth-child(n + 8) { display: none; }
@media (min-width: 768px) { .team-banner__tile:nth-child(n + 8) { display: block; } }

.team-banner__inner {
  position: relative; z-index: 2;
  margin: 0 auto; width: 100%; max-width: var(--maxw);
  padding: 1.25rem 1.5rem 1.5rem;
}
.team-banner__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.9rem, 5.2vw, 3.4rem);
  line-height: 1; text-transform: uppercase; letter-spacing: 0.01em;
  text-shadow: 0 4px 24px rgb(var(--black-rgb) / 0.45);
}
.team-banner__sub {
  margin-top: 0.5rem;
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.22em;
  color: rgb(var(--white-rgb) / 0.85);
}

/* ---------------- Cuadrícula de fichas --------------------- */

/* Anchura fija y alineación a la izquierda: cuatro fichas por fila en todas
   las categorías (--cols, que pone PHP) y las que sobran arrancan la fila
   siguiente pegadas al margen izquierdo, no centradas. */
.rgrid {
  display: flex; flex-wrap: wrap; justify-content: flex-start;
  gap: var(--rgrid-gap, 0.875rem);
  margin: 0;
}
.rgrid--foto { --w: 18rem; }
.rgrid--mini { --w: 17.5rem; }
/* La ficha ocupa la parte que le toca del ancho disponible, con un tope para
   que una categoría de dos fichas no las convierta en carteles. */
.rgrid > * {
  flex: 0 0 min(
    var(--w),
    calc((100% - (var(--cols) - 1) * var(--rgrid-gap, 0.875rem)) / var(--cols))
  );
}

.roster-count {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 0.875rem;
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--color-mute);
}
.roster-count__sep {
  width: 4px; height: 4px; border-radius: 999px; flex: 0 0 auto;
  background: rgb(var(--color-bone-rgb) / 0.25);
}

/* ---------------- Ficha baja (sin fotografía) -------------- */

.pmini {
  position: relative;
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.125rem;
  border-radius: 1.25rem;
  background: var(--color-panel);
  transition: transform var(--duration-fast) ease;
}
.pmini--link:hover { transform: translateY(-2px); }
.pmini__link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.pmini__dorsal {
  flex: 0 0 3.25rem; text-align: center;
  font-family: var(--font-display); font-size: 2.75rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px var(--accent);
}
.pmini__body { flex: 1; min-width: 0; }
.pmini__name {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.15rem; text-transform: uppercase; line-height: 1.15; letter-spacing: 0.025em;
}
.pmini__pos {
  margin-top: 0.25rem;
  font-size: 0.5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--accent);
}
.pmini__cap {
  display: inline-flex; vertical-align: baseline;
  margin-left: 0.25rem; color: var(--accent);
}
.pmini__go { flex: 0 0 auto; display: flex; color: var(--color-mute); }
.pmini--link:hover .pmini__go { color: var(--accent); }

/* ---------------- Cuerpo técnico --------------------------- */

.staff-strip { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.staff-pill {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 1.125rem 0.5rem 0.5rem;
  border-radius: 999px;
  background: var(--color-panel);
}
.staff-pill__ava {
  flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: 999px;
  display: grid; place-items: center; overflow: hidden;
  color: var(--accent); background: rgb(var(--accent-rgb) / 0.12);
}
.staff-pill__ava img { width: 100%; height: 100%; object-fit: cover; }
.staff-pill__n {
  display: block;
  font-family: var(--font-display); font-weight: 400;
  font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.2;
}
.staff-pill__r {
  display: block;
  font-size: 0.5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--color-mute);
}


.ptile {
  position: relative; overflow: hidden;
  border-radius: 1.25rem;
  background: var(--color-panel);
}
.ptile__media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.ptile__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.ptile__img--ph {
  display: grid; place-items: center; color: var(--accent);
  background:
    radial-gradient(120% 90% at 50% 0%, rgb(var(--accent-rgb) / 0.18), transparent 70%),
    var(--color-panel);
}
.ptile__fade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--color-panel), rgb(var(--color-panel-rgb) / 0.1) 60%, transparent);
}
.ptile__dorsal {
  position: absolute; right: 0.75rem; bottom: 0.55rem;
  font-family: var(--font-display); font-size: 2.25rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px var(--accent);
  text-shadow: 0 2px 12px rgb(var(--black-rgb) / 0.6);
  pointer-events: none;
}
.ptile__cap {
  position: absolute; left: 0.625rem; top: 0.625rem;
  display: inline-flex; align-items: center; gap: 0.375rem;
  border-radius: 999px; padding: 0.25rem 0.5rem;
  background: rgb(var(--accent-rgb) / 0.16);
  border: 1px solid rgb(var(--accent-rgb) / 0.45);
  color: var(--accent);
  font-size: 0.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em;
  backdrop-filter: blur(4px);
}
.ptile__nophoto {
  position: absolute; left: 0.625rem; bottom: 0.625rem;
  font-size: 0.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em;
  color: rgb(var(--color-bone-rgb) / 0.55);
}
.ptile__body {
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 0.2rem;
  padding: 0.7rem 3.25rem 0.7rem 0.9rem;
}
.ptile__name {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.05rem, 2.6vw, 1.25rem);
  text-transform: uppercase; line-height: 1.18; letter-spacing: 0.025em;
}
.ptile__pos {
  font-size: 0.5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--accent);
}
.ptile--staff .ptile__pos { color: var(--color-mute); }

/* ---------------- Filtros de partidos ---------------------- */

.filters {
  position: sticky; top: 76px; z-index: 40;
  border-bottom: 1px solid var(--color-line);
  background: rgb(var(--color-ink-rgb) / 0.92);
  backdrop-filter: blur(18px);
}
.filters__inner {
  margin: 0 auto; max-width: var(--maxw);
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem;
  padding: 1.125rem 1.5rem;
}
.filters__search {
  display: flex; align-items: center; gap: 0.625rem;
  border: 1px solid var(--color-line); border-radius: 999px;
  padding: 0.625rem 1.125rem; min-width: min(100%, 18rem);
  color: var(--color-mute);
  transition: border-color var(--duration-fast) ease;
}
.filters__search:focus-within { border-color: rgb(var(--accent-rgb) / 0.6); }
.filters__search input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; font-size: 0.875rem; color: var(--color-bone);
}
.filters__search input::placeholder { color: var(--color-mute); }
.filters__group { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.filters__label {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-size: 0.625rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.22em; color: var(--color-mute);
}
.filters__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filters__count {
  margin: 0 auto; max-width: var(--maxw);
  padding: 0 1.5rem 0.875rem;
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--color-mute);
}
.filters__count:empty { display: none; }

/* ---------------- Cuadrícula de partidos ------------------- */

.mcard-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
/* Sin borde: sobre el fondo oscuro del hub la línea se leía como un
   marco negro alrededor de cada ficha. La miniatura ya delimita sola. */
.mcard {
  border-radius: 1.25rem;
  background: var(--color-panel); overflow: hidden;
}
.mcard[hidden] { display: none; }
.mcard__link { display: block; height: 100%; }
.mcard__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.mcard__img {
  width: 100%; height: 100%; object-fit: cover;
}
.mcard__img--ph {
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b)); opacity: 0.35;
}
.mcard__new {
  position: absolute; right: 0.75rem; top: 0.75rem;
  border-radius: 999px; padding: 0.3125rem 0.75rem;
  background: var(--accent); color: var(--color-ink);
  font-size: 0.5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em;
  animation: mcard-new 1.8s ease-in-out infinite;
}
@keyframes mcard-new {
  0%, 100% { box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / 0.55); }
  70%      { box-shadow: 0 0 0 12px rgb(var(--accent-rgb) / 0); }
}
.mcard__members {
  position: absolute; left: 0.75rem; top: 0.75rem;
  display: inline-flex; align-items: center; gap: 0.3rem;
  border-radius: 999px; padding: 0.3rem 0.6rem;
  background: rgb(var(--color-ink-rgb) / 0.82); backdrop-filter: blur(6px);
  border: 1px solid rgb(var(--accent-rgb) / 0.5); color: var(--accent);
  font-size: 0.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em;
}
.mcard__members--inline {
  position: static; backdrop-filter: none;
  background: rgb(var(--accent-rgb) / 0.12);
  vertical-align: middle;
}
.page-hero__note {
  position: relative; margin-top: 1rem; max-width: 34rem;
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  font-size: 0.8125rem; line-height: 1.6; color: var(--color-mute);
}

.mcard__play {
  position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0) scale(0.85);
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem;
  border-radius: 999px; background: var(--color-yt); color: #fff;
  opacity: 0; transition: opacity var(--duration-base) ease, transform var(--duration-base) var(--ease-out);
}
.mcard:hover .mcard__play, .mcard:focus-within .mcard__play { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
.mcard__body { padding: 1rem 1.125rem 1.25rem; }
.mcard__title {
  font-size: 0.9375rem; font-weight: 700; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color var(--duration-fast) ease;
}
/* Al pasar el ratón, el título toma el acento del tema de la categoría. */
.mcard:hover .mcard__title,
.mcard:focus-within .mcard__title { color: var(--accent); }
.mcard__meta {
  margin-top: 0.5rem;
  font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--color-mute);
}

/* ---------------- Movimiento reducido ---------------------- */

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

/* ---------------- Pestañas en pantalla estrecha ------------ */

/* Aquí ya no caben las cuatro en una fila ni con el ancho entero para
   ellas: se reparten en dos filas de dos, centradas y partiendo el texto
   si hace falta. */
@media (max-width: 899px) {
  .hub-tabs__inner { padding-block: 0.5rem; }
  .hub-tab {
    flex: 1 1 calc(50% - 0.25rem);
    justify-content: center; text-align: center;
    white-space: normal; line-height: 1.2;
    padding: 0.75rem;
  }
  /* En una sola fila la lengüeta apoya en el borde inferior de la barra;
     repartidas en dos, la de arriba no llega a ningún borde: se pinta
     entera en vez de quedar abierta por abajo. */
  .hub-tab::after { top: 0; border-radius: 10px; }
}

/* ---------------- Plantillas en pantalla estrecha ---------- */

@media (max-width: 639px) {
  .page-hero { padding: 6.5rem 0 1.25rem; }
  .rgrid { --rgrid-gap: 0.75rem; }
  .rgrid--foto > * { flex: 0 0 calc(50% - 0.375rem); }
  .rgrid--mini > * { flex: 1 1 100%; }
  .hub-tab { font-size: 0.6875rem; letter-spacing: 0.12em; }
  .staff-strip { flex-direction: column; align-items: stretch; }
}