/* ==========================================================================
   Ávila FC — Capa de aplicación
   Construida SOLO sobre los tokens de css/styles.css.
   Regla: si necesitas un color, sombra, radio o espaciado, usa una variable.
   Nunca escribas un hex aquí.
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font: var(--text-body-role);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
h1, h2, h3, h4, p, figure { margin: 0; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--gutter); }
.container--lg { max-width: var(--container-lg); }
.container--md { max-width: var(--container-md); }
.container--sm { max-width: var(--container-sm); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--space-16); }
.section--ink { background: var(--surface-ink); color: var(--text-on-dark); }
.section--subtle { background: var(--grey-100); }
.section--white { background: var(--avila-white); }

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* Franja rojiblanca — dispositivo gráfico de marca. Usar con intención. */
.stripes { height: 6px; background: var(--stripes-red); }
.stripes--thin { height: 4px; }

/* ---------- Tipografía ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: var(--fs-2xs); letter-spacing: var(--ls-widest);
  text-transform: uppercase; color: var(--avila-navy);
}
.eyebrow--on-dark { color: var(--avila-white); }
.eyebrow::before { content: ""; width: 22px; height: 3px; background: var(--avila-red); border-radius: 2px; flex: none; }
.eyebrow--dot::before { width: 8px; height: 8px; border-radius: var(--radius-circle); }
.eyebrow--stripe::before { width: 26px; height: 12px; background: var(--stripes-red); border-radius: 2px; }
.eyebrow--bare::before { display: none; }

.display {
  font-family: var(--font-display); font-weight: var(--fw-black);
  font-size: clamp(38px, 7.2vw, var(--fs-5xl));
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
  text-transform: uppercase; color: var(--text-strong);
}
.h1 { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: clamp(30px, 5vw, var(--fs-3xl)); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); text-transform: uppercase; color: var(--text-strong); }
.h2 { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: clamp(26px, 4vw, var(--fs-2xl)); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); text-transform: uppercase; color: var(--text-strong); }
.h3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-xl); line-height: var(--lh-snug); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-strong); }
.h4 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-md); line-height: var(--lh-snug); color: var(--text-strong); }
.on-dark, .on-dark .h1, .on-dark .h2, .on-dark .h3, .on-dark .h4, .on-dark .display { color: var(--text-on-dark); }

.lead { font-size: var(--fs-md); line-height: var(--lh-relaxed); font-weight: var(--fw-light); color: var(--text-body); max-width: 62ch; }
.lead--on-dark { color: var(--text-on-dark-muted); }
.muted { color: var(--text-muted); }
.muted--on-dark { color: var(--text-on-dark-muted); }
.small { font-size: var(--fs-xs); }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- Botones (espejo de Button.jsx) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 11px 22px;
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-sm);
  line-height: 1; letter-spacing: 0.08em; text-transform: uppercase;
  border: var(--border-2) solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-disabled { opacity: 0.5; cursor: not-allowed; }
.btn--sm { height: 36px; padding: 8px 16px; font-size: var(--fs-xs); }
.btn--lg { height: 54px; padding: 15px 30px; font-size: var(--fs-base); }
.btn--block { width: 100%; }

.btn--primary { background: var(--avila-red); color: var(--avila-white); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--red-600); color: var(--avila-white); }
.btn--primary:active { background: var(--red-700); }
.btn--secondary { background: var(--avila-navy); color: var(--avila-white); }
.btn--secondary:hover { background: var(--navy-700); color: var(--avila-white); }
.btn--outline { background: transparent; color: var(--avila-navy); border-color: var(--border-strong); }
.btn--outline:hover { background: var(--grey-50); border-color: var(--avila-navy); color: var(--avila-navy); }
.btn--ghost { background: transparent; color: var(--avila-navy); }
.btn--ghost:hover { background: var(--grey-100); color: var(--avila-navy); }
.btn--on-dark { background: var(--avila-white); color: var(--avila-navy); }
.btn--on-dark:hover { background: var(--grey-100); color: var(--avila-navy); }
.btn--outline-on-dark { background: transparent; color: var(--avila-white); border-color: var(--border-on-dark); }
.btn--outline-on-dark:hover { background: rgba(255,255,255,0.08); color: var(--avila-white); }

/* ---------- Badge (espejo de Badge.jsx) ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: var(--fs-3xs); letter-spacing: var(--ls-wider); text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--radius-xs); line-height: 1;
  background: var(--avila-navy); color: var(--avila-white);
}
.badge--sm { font-size: 10px; padding: 3px 8px; }
.badge--red { background: var(--avila-red); }
.badge--blue { background: var(--avila-blue); }
.badge--neutral { background: var(--grey-100); color: var(--grey-700); }
.badge--success { background: var(--success); }
.badge--warning { background: var(--warning); }
.badge--live { background: var(--avila-red); }
.badge--live::before {
  content: ""; width: 6px; height: 6px; border-radius: var(--radius-circle);
  background: var(--avila-white); animation: avila-pulse 1.4s var(--ease-standard) infinite;
}
@keyframes avila-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.6); }
  70%  { box-shadow: 0 0 0 6px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* ---------- Tag / chip de filtro (espejo de Tag.jsx) ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--grey-100); color: var(--grey-700);
  border: var(--border-1) solid transparent; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-xs);
  letter-spacing: 0.02em; padding: 7px 14px; line-height: 1; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.tag:hover { filter: brightness(0.96); }
.tag.is-active { background: var(--avila-navy); color: var(--avila-white); }
.tag.is-active:hover { filter: none; }

/* ---------- Card (espejo de Card.jsx) ---------- */
.card {
  position: relative; background: var(--surface-card);
  border: var(--border-1) solid var(--border-subtle); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); padding: var(--space-5); overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.card--interactive:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--border-strong); }
.card--dark { background: var(--avila-blue); border-color: var(--border-on-dark); box-shadow: none; color: var(--text-on-dark); }
.card--flush { padding: 0; }
.card--accent-top::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--avila-red); }
.card--accent-stripe::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--stripes-red); }

/* ---------- StatTile (espejo de StatTile.jsx) ---------- */
.stat {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surface-card); border: var(--border-1) solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 20px 22px; box-shadow: var(--shadow-sm);
}
.stat__value {
  font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-2xl);
  line-height: 1; letter-spacing: -0.01em; color: var(--avila-navy); font-variant-numeric: tabular-nums;
}
.stat__label {
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-3xs);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}
.stat--dark { background: var(--avila-navy); border-color: transparent; box-shadow: none; }
.stat--dark .stat__value { color: var(--avila-white); }
.stat--dark .stat__label { color: rgba(255,255,255,.6); }
.stat--red { background: var(--avila-red); border-color: transparent; box-shadow: none; }
.stat--red .stat__value { color: var(--avila-white); }
.stat--red .stat__label { color: rgba(255,255,255,.8); }

/* ---------- Escudo ---------- */
/* El escudo es una marca real: nunca se redibuja. Se usa el PNG del manual.
   Mientras el PNG no esté en /assets, se muestra un marcador tipográfico
   NEUTRO (no es el escudo, es un placeholder) para que nada se vea roto. */
.crest { height: 44px; width: auto; display: block; }
.crest-fallback {
  height: 44px; width: 44px; flex: none; border-radius: var(--radius-circle);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--avila-red); color: var(--avila-white);
  font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-xs);
  letter-spacing: 0.04em; border: var(--border-2) solid var(--avila-white);
}
.crest-lockup { display: inline-flex; align-items: center; gap: 12px; }
.crest-lockup__word {
  font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 15px;
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--avila-navy); line-height: 1;
  white-space: nowrap;
}
.crest-lockup__sub {
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin-top: 3px;
}
.crest-lockup--on-dark .crest-lockup__word { color: var(--avila-white); }
.crest-lockup--on-dark .crest-lockup__sub { color: var(--text-on-dark-muted); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--surface-ink); border-bottom: var(--border-1) solid var(--border-on-dark);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); height: 72px; }
.nav { display: flex; align-items: center; gap: var(--space-6); }
.nav a {
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-on-dark);
  padding-block: 6px; position: relative; white-space: nowrap;
}
/* Enlace al portal dentro del menú: solo aparece en el cajón móvil, donde el
   botón rojo de la cabecera se oculta por falta de espacio. */
.nav__portal { display: none; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--avila-red); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-standard);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--text-on-dark); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

.nav-toggle {
  display: none; background: transparent; border: var(--border-1) solid var(--border-on-dark);
  border-radius: var(--radius-sm); color: var(--text-on-dark); height: 40px; width: 44px;
  cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 18px; height: 2px; background: currentColor; position: relative;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--surface-ink); color: var(--text-on-dark); overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Duotone navy sobre fotografía — el manual exige que el tipo y el escudo sigan
   legibles. Dos velos: uno lateral que oscurece el lado del texto y deja
   respirar la foto a la derecha, y otro de abajo que la funde con la página. */
.hero__media img { object-position: center 38%; filter: brightness(1.14) saturate(1.06); }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(16,26,54,.86) 0%, rgba(16,26,54,.58) 45%, rgba(16,26,54,.18) 100%),
    linear-gradient(180deg, rgba(16,26,54,.40) 0%, rgba(16,26,54,.08) 45%, rgba(16,26,54,.88) 100%);
}
.hero__placeholder { position: absolute; inset: 0; background: var(--avila-navy); }
.hero__placeholder::before {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background: radial-gradient(120% 90% at 50% 0%, var(--navy-600) 0%, var(--avila-navy) 62%);
}
/* Texto a la izquierda, foto a la derecha. El lema está pintado de verdad en
   la pared de La Guacamaya, así que la foto y el titular dicen lo mismo: es a
   propósito, no una repetición por descuido. */
.hero__inner { position: relative; padding-block: clamp(96px, 15vw, 190px); display: flex; flex-direction: column; gap: var(--space-6); align-items: flex-start; }
.hero__title { max-width: 16ch; }
.hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }
.hero__stripes { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--stripes-red); }

/* ---------- Sección con fotografía de fondo ----------
   Mismo principio que la portada: la foto queda debajo de un velo navy denso
   para que el texto no pierda contraste. La foto acompaña, no compite. */
.seccion--foto { position: relative; overflow: hidden; }
.seccion--foto > .container { position: relative; }
.seccion__media { position: absolute; inset: 0; }
.seccion__media img { width: 100%; height: 100%; object-fit: cover; object-position: center var(--foco, 22%); filter: brightness(1.16) saturate(1.06); }
.seccion__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(16,26,54,.90) 0%, rgba(16,26,54,.66) 52%, rgba(16,26,54,.34) 100%),
    linear-gradient(180deg, rgba(16,26,54,.86) 0%, rgba(16,26,54,.30) 42%, rgba(16,26,54,.86) 100%);
}

/* ---------- MatchCard (espejo de MatchCard.jsx) ---------- */
.match {
  background: var(--surface-card); border: var(--border-1) solid var(--border-subtle);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden;
}
.match--dark { background: var(--avila-navy); border-color: var(--border-on-dark); box-shadow: none; }
.match__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: 10px 16px; border-bottom: var(--border-1) solid var(--border-subtle);
}
.match--dark .match__head { border-bottom-color: var(--border-on-dark); }
.match__comp {
  font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-3xs);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--avila-red); white-space: nowrap;
  /* Con nombres de liga largos ("Liga Futve 2") esta línea se quedaba sin sitio.
     Se aprieta el tracking y, como red de seguridad, se recorta con puntos
     suspensivos en vez de desbordar la tarjeta. */
  font-size: 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.match--dark .match__comp { color: rgba(255,255,255,.7); }
.match__status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap;
}
.match--dark .match__status { color: rgba(255,255,255,.7); }
.match__status--final { background: var(--grey-200); color: var(--grey-700); padding: 4px 8px; border-radius: var(--radius-xs); }
.match__body { display: flex; align-items: center; padding: 18px 16px; }
.match__team { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.match__team-crest { height: 46px; width: 46px; border-radius: var(--radius-circle); background: var(--grey-100); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-3xs); color: var(--grey-500); }
.match--dark .match__team-crest { background: rgba(255,255,255,.1); color: rgba(255,255,255,.6); }
.match__team-crest--home { background: var(--avila-red); color: var(--avila-white); }
/* Escudo real del equipo. `contain` para no recortar marcas de proporciones
   distintas: los escudos vienen cuadrados, alargados o circulares. */
.match__team-logo { height: 46px; width: 46px; object-fit: contain; display: block; flex: none; }
.match__team-name {
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-2xs);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--avila-navy);
  text-align: center; line-height: 1.2; max-width: 100%;
  /* Dos líneas en vez de recortar: "CS Marítimo" o "Dynamo Puerto La Cruz"
     no se entienden cortados a "CS MARÍTI...". */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere; min-height: 2.4em;
}
.match--dark .match__team-name { color: var(--avila-white); }
.match__center { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 6px; }
.match__score {
  font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-xl);
  line-height: 1; color: var(--avila-navy); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.match--dark .match__score { color: var(--avila-white); }
.match__score span { color: var(--grey-300); margin: 0 8px; }
.match--dark .match__score span { color: rgba(255,255,255,.35); }
.match__vs { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-lg); color: var(--avila-navy); letter-spacing: .04em; }
.match--dark .match__vs { color: var(--avila-white); }
.match__venue { padding: 0 16px 12px; text-align: center; font-size: var(--fs-3xs); color: var(--text-muted); font-weight: var(--fw-medium); }
.match--dark .match__venue { color: rgba(255,255,255,.5); }

/* ---------- Tarjeta de jugador ---------- */
.player {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius-md); background: var(--avila-navy);
  aspect-ratio: 3 / 4; border: var(--border-1) solid var(--border-subtle);
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.player:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.player__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.player__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,26,54,.10) 0%, rgba(16,26,54,.30) 45%, rgba(16,26,54,.94) 100%); }
/* Sin foto: el peso lo carga el número y la tipografía, no una imagen rota. */
.player__nophoto { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--avila-navy); }
.player__nophoto::before { content: ""; position: absolute; inset: 0; background: var(--stripes-subtle); opacity: .5; }
.player__ghost {
  font-family: var(--font-display); font-weight: var(--fw-black);
  font-size: clamp(80px, 18vw, 150px); line-height: 1; color: rgba(255,255,255,.07);
  letter-spacing: var(--ls-tight);
}
.player__number {
  position: absolute; top: var(--space-3); left: var(--space-4);
  font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-2xl);
  line-height: 1; color: var(--avila-white); font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 12px rgba(16,26,54,.5);
}
.player__pos {
  position: absolute; top: var(--space-4); right: var(--space-4);
  font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 10px;
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  background: var(--avila-red); color: var(--avila-white);
  padding: 4px 8px; border-radius: var(--radius-xs);
}
.player__meta { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-4); }
.player__name {
  font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-md);
  line-height: 1.05; letter-spacing: var(--ls-tight); text-transform: uppercase; color: var(--avila-white);
}
.player__sub { font-size: var(--fs-3xs); font-weight: var(--fw-medium); color: rgba(255,255,255,.66); margin-top: 4px; letter-spacing: 0.04em; }
.player__sub + .player__sub { margin-top: 2px; color: rgba(255,255,255,.5); }
.player__rule { height: 3px; width: 28px; background: var(--avila-red); border-radius: 2px; margin-bottom: var(--space-3); }

/* ---------- Ficha de jugador ----------
   Foto y datos lado a lado. La columna de datos es una lista de dos
   columnas: cabe toda la ficha sin que el visitante tenga que bajar. */
.ficha { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: var(--space-12); align-items: end; }
.ficha__foto { position: relative; aspect-ratio: 3/4; border-radius: var(--radius-md); overflow: hidden; background: var(--avila-navy); }
.ficha__foto img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ficha__info { display: flex; flex-direction: column; gap: var(--space-4); padding-bottom: var(--space-12); }
.ficha__dorsal { font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(56px, 8vw, 104px); line-height: .9; color: var(--avila-red); display: block; font-variant-numeric: tabular-nums; }

.ficha__datos { margin: var(--space-6) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); border-top: var(--border-1) solid var(--border-on-dark); }
.ficha__dato { padding: var(--space-4) 0; border-bottom: var(--border-1) solid var(--border-on-dark); }
.ficha__dato dt { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-3xs); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--text-on-dark-muted); }
.ficha__dato dd { margin: 6px 0 0; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); line-height: 1.1; color: var(--text-on-dark); }

@media (max-width: 900px) {
  .ficha { grid-template-columns: 1fr; gap: var(--space-8); align-items: start; }
  .ficha__foto { max-width: 420px; }
  .ficha__info { padding-bottom: var(--space-8); }
  .ficha__datos { margin-top: var(--space-2); }
}

/* En telefono, dos columnas obligan a partir "23 de febrero de 2007" en tres
   lineas. Una sola columna se lee mejor aunque la ficha quede mas larga. */
@media (max-width: 520px) {
  .ficha__datos { grid-template-columns: 1fr; }
}

/* ---------- Documento legal ----------
   Texto largo para leer, no para ojear: medida corta, interlineado amplio y
   jerarquía marcada, para que se distinga un apartado de otro sin adornos. */
.doc { max-width: 68ch; }
.doc h2 { margin-top: var(--space-12); }
.doc h2:first-of-type { margin-top: 0; }
.doc h3 { margin-top: var(--space-8); font-size: var(--fs-base); letter-spacing: var(--ls-wide); }
.doc p { margin-top: var(--space-4); line-height: var(--lh-relaxed); color: var(--text-body); }
.doc ul { margin: var(--space-4) 0 0; padding-left: var(--space-5); }
.doc li { margin-bottom: var(--space-3); line-height: var(--lh-relaxed); }
.doc li::marker { color: var(--avila-red); }
.doc strong { color: var(--text-strong); }
.doc .notice { margin-top: var(--space-5); }
.doc__regla { height: 3px; width: 40px; background: var(--avila-red); border-radius: 2px; margin-top: var(--space-6); }

/* Índice: enlaces internos, no navegación principal. Van discretos. */
.doc-indice { border-left: var(--border-2) solid var(--border-subtle); padding-left: var(--space-5); }
.doc-indice ol { margin: 0; padding-left: var(--space-5); }
.doc-indice li { margin-bottom: var(--space-2); font-size: var(--fs-sm); }
.doc-indice li::marker { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ---------- Personas del club (cuerpo técnico y directiva) ---------- */
/* El nombre va apoyado en el borde inferior de la foto, sobre un velo navy,
   igual que en las fichas de jugador: las dos rejillas de la misma pagina
   deben leerse como una sola familia. */
.persona {
  position: relative; overflow: hidden; aspect-ratio: 1;
  border-radius: var(--radius-md); background: var(--avila-navy);
  border: var(--border-1) solid var(--border-subtle);
}
.persona__foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}
.persona__foto--vacia { display: grid; place-items: center; }
.persona__foto--vacia span {
  font-family: var(--font-display); font-weight: var(--fw-black);
  font-size: var(--fs-2xl); color: rgba(255,255,255,.16); letter-spacing: var(--ls-tight);
}
/* El velo arranca a media altura: la cara queda limpia y el nombre, legible. */
.persona__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,26,54,0) 42%, rgba(16,26,54,.55) 72%, rgba(16,26,54,.94) 100%);
}
.persona__meta { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-4); }
.persona__nombre {
  display: block; font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: var(--fs-base); line-height: 1.1; letter-spacing: var(--ls-tight);
  color: var(--avila-white); overflow-wrap: break-word;
}
.persona__cargo { display: block; font-size: var(--fs-xs); color: rgba(255,255,255,.66); margin-top: 2px; }

/* ---------- Hitos de la historia ----------
   El año a la izquierda en rojo y el texto a la derecha: se lee como una
   línea de tiempo sin necesidad de dibujarla. */
.hito { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-6); padding-block: var(--space-6); border-top: var(--border-1) solid var(--border-subtle); }
.hito:last-child { border-bottom: var(--border-1) solid var(--border-subtle); }
.hito__anio {
  font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-xl);
  color: var(--avila-red); line-height: 1; font-variant-numeric: tabular-nums;
}
@media (max-width: 620px) {
  .hito { grid-template-columns: 1fr; gap: var(--space-2); }
}

/* ---------- Publicaciones de Instagram ----------
   Cuadrícula de cuadrados, como la propia rejilla de Instagram, para que se
   reconozca de un vistazo de dónde viene el contenido. */
.ig-fila + .ig-fila { margin-top: var(--space-12); }
.ig-fila__cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.ig-fila__cuenta { font-size: var(--fs-sm); color: var(--text-muted); }
.ig-fila__cuenta:hover { color: var(--avila-red); }

.ig-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 900px) { .ig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ig-post {
  position: relative; display: block; border-radius: var(--radius-md); overflow: hidden;
  background: var(--avila-navy); aspect-ratio: 1;
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.ig-post:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ig-post img { width: 100%; height: 100%; object-fit: cover; }

/* El texto se lee sobre la foto, así que necesita un velo que garantice
   contraste sin tapar la imagen entera. */
.ig-post__velo { position: absolute; inset: auto 0 0 0; height: 62%; background: linear-gradient(to top, rgba(16,26,54,.92), rgba(16,26,54,0)); }
.ig-post__pie { position: absolute; inset: auto 0 0 0; padding: var(--space-4); display: flex; flex-direction: column; gap: 4px; }
.ig-post__fecha { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-3xs); letter-spacing: var(--ls-wider); text-transform: uppercase; color: rgba(255,255,255,.7); }
.ig-post__texto { font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--avila-white); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Distintivo de vídeo o carrusel, arriba a la derecha. */
.ig-post__tipo { position: absolute; top: var(--space-3); right: var(--space-3); background: rgba(16,26,54,.75); color: var(--avila-white); border-radius: var(--radius-xs); padding: 3px 7px; font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 10px; letter-spacing: var(--ls-wider); text-transform: uppercase; }

/* Foto de una sede: proporción fija para que dos tarjetas con y sin imagen
   no se descuadren, y recorte centrado. */
.sede__foto { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }

/* Escudo de la competición dentro de una cifra. */
.stat__logo { width: 40px; height: 40px; border-radius: var(--radius-xs); margin-bottom: 2px; }

/* Fila de logos de terceros: todos a la misma altura, cada uno con su propio
   fondo. Son marcas ajenas y no se retocan. */
.logos-fila { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-4); }
.logos-fila img { height: 56px; width: auto; border-radius: var(--radius-sm); display: block; }

/* Logo de la fuente citada. Va pequeño y con su propio fondo: es la marca de
   otra institución y no se retoca ni se recorta contra el color de la tarjeta. */
.fuente-logo { display: block; width: 100%; max-width: 220px; height: auto; border-radius: var(--radius-sm); margin-top: var(--space-4); }

/* ---------- Cita destacada ----------
   Una frase que merece leerse sola. Sin comillas dibujadas: la sangría y el
   filete rojo ya dicen que es una cita. */
.cita {
  margin: var(--space-16) auto 0; max-width: 34ch; padding-left: var(--space-6);
  border-left: 4px solid var(--avila-red);
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: clamp(22px, 3vw, var(--fs-2xl)); line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight); color: var(--avila-navy);
}

/* ---------- Formularios ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.label {
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-3xs);
  letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--avila-navy);
}
.input, .select, .textarea {
  width: 100%; height: 46px; padding: 0 14px;
  background: var(--avila-white); color: var(--text-body);
  border: var(--border-1) solid var(--border-subtle); border-radius: var(--radius-md);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.textarea { height: auto; min-height: 96px; padding: 12px 14px; line-height: var(--lh-normal); resize: vertical; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--avila-red); box-shadow: 0 0 0 3px var(--focus-ring);
}
.input::placeholder { color: var(--grey-400); }
.hint { font-size: var(--fs-3xs); color: var(--text-muted); line-height: var(--lh-normal); }
.check { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; }
.check input { margin: 2px 0 0; width: 18px; height: 18px; accent-color: var(--avila-red); flex: none; }
.check__text { font-size: var(--fs-xs); line-height: var(--lh-normal); color: var(--text-body); }

/* ---------- Tabla ---------- */
.table-wrap { overflow-x: auto; border: var(--border-1) solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-card); }
.table { width: 100%; border-collapse: collapse; min-width: 720px; }
.table th {
  text-align: left; padding: 14px 16px; background: var(--grey-50);
  font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-3xs);
  letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-muted);
  border-bottom: var(--border-1) solid var(--border-subtle); white-space: nowrap;
}
.table td { padding: 14px 16px; border-bottom: var(--border-1) solid var(--border-subtle); font-size: var(--fs-sm); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--grey-50); }
.table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Portal ---------- */
.portal { min-height: 100vh; background: var(--surface-page); }
.portal-shell { display: grid; grid-template-columns: 248px 1fr; min-height: calc(100vh - 72px); }
.portal-side { background: var(--surface-ink); padding: var(--space-6) var(--space-4); }
.portal-side__group { margin-bottom: var(--space-6); }
.portal-side__title {
  font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 10px;
  letter-spacing: var(--ls-widest); text-transform: uppercase;
  color: rgba(255,255,255,.4); padding: 0 12px var(--space-3);
}
.portal-side a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 12px; border-radius: var(--radius-sm);
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-2xs);
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,.72);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
  cursor: pointer;
}
.portal-side a:hover { background: rgba(255,255,255,.07); color: var(--avila-white); }
.portal-side a.is-active { background: var(--avila-red); color: var(--avila-white); }
.portal-main { padding: var(--space-8) var(--space-8) var(--space-16); min-width: 0; }
.portal-auth { display: flex; align-items: center; justify-content: center; padding: var(--space-16) var(--gutter); min-height: calc(100vh - 72px); background: var(--surface-ink); }
.portal-auth__card { width: 100%; max-width: 440px; background: var(--surface-card); border-radius: var(--radius-lg); padding: var(--space-10); box-shadow: var(--shadow-lg); }

.view { display: none; }
.view.is-active { display: block; }

/* Aviso de tasa congelada — refleja la regla de negocio acordada. */
.rate-note {
  display: flex; gap: var(--space-3); align-items: flex-start;
  background: var(--red-50); border: var(--border-1) solid var(--red-100);
  border-radius: var(--radius-md); padding: var(--space-4); font-size: var(--fs-xs);
  line-height: var(--lh-normal); color: var(--red-700);
}
.rate-note strong { font-weight: var(--fw-extrabold); }

.notice {
  background: var(--grey-100); border-left: var(--border-3) solid var(--avila-navy);
  border-radius: var(--radius-sm); padding: var(--space-4); font-size: var(--fs-xs);
  line-height: var(--lh-normal); color: var(--text-body);
}
.notice--warning { background: #FDF6E7; border-left-color: var(--warning); }

/* ---------- Texto legal plegable ----------
   <details> nativo: funciona sin JavaScript y los lectores de pantalla ya
   saben anunciarlo como algo que se abre y se cierra. */
.legal-detalle {
  border: var(--border-1) solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--grey-50);
  margin-bottom: var(--space-4);
}
.legal-detalle > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 12px 16px;
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-3xs);
  letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--avila-navy);
  transition: background var(--dur-fast) var(--ease-standard);
}
.legal-detalle > summary::-webkit-details-marker { display: none; }
.legal-detalle > summary:hover { background: var(--grey-100); }
.legal-detalle > summary::after {
  content: "+"; font-size: var(--fs-md); font-weight: var(--fw-bold);
  color: var(--avila-red); line-height: 1; flex: none;
}
.legal-detalle[open] > summary::after { content: "–"; }
.legal-detalle[open] > summary { border-bottom: var(--border-1) solid var(--border-subtle); }
.legal-detalle__cuerpo {
  padding: var(--space-4) 16px;
  font-size: var(--fs-xs); line-height: var(--lh-relaxed); color: var(--text-body);
}

/* ---------- Botón de copiar ---------- */
.btn-copiar {
  flex: none; cursor: pointer; padding: 0;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--avila-white); color: var(--avila-navy);
  border: var(--border-1) solid var(--border-strong); border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
/* Hueco del mismo ancho que el botón, para las filas que no se copian:
   así todos los valores quedan alineados a la misma altura. */
.btn-copiar-hueco { width: 30px; flex: none; }

.btn-copiar:hover { border-color: var(--avila-navy); background: var(--grey-100); }
.btn-copiar:active { transform: translateY(1px); }
.btn-copiar.is-copiado {
  background: var(--success); border-color: var(--success); color: var(--avila-white);
}

/* Marcador de dato pendiente — visible a propósito, para no publicar con relleno. */
.todo {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--warning); color: var(--avila-white);
  font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 10px;
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--radius-xs);
}

/* ---------- Footer ---------- */
.site-footer { background: var(--surface-ink); color: var(--text-on-dark); }
.site-footer__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-8); padding-block: var(--space-16); }
.site-footer h4 {
  font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-3xs);
  letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--avila-white); margin-bottom: var(--space-4);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.site-footer a { color: var(--text-on-dark-muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.site-footer a:hover { color: var(--avila-white); }
/* ---------- Redes sociales ---------- */
.social { margin-top: var(--space-6); }
.social__label {
  display: block; margin-bottom: var(--space-3);
  font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-3xs);
  letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--avila-white);
}
.social__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.social__links a {
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-3xs);
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--text-on-dark-muted); position: relative; padding-bottom: 3px;
}
.social__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--avila-red); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-standard);
}
.social__links a:hover { color: var(--avila-white); }
.social__links a:hover::after { transform: scaleX(1); }

.site-footer__bottom {
  border-top: var(--border-1) solid var(--border-on-dark); padding-block: var(--space-5);
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  font-size: var(--fs-3xs); color: var(--text-on-dark-muted);
}
.site-footer__bottom a { color: var(--text-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__bottom a:hover { color: var(--avila-red); }

/* ---------- Tienda (próximamente) ----------
   El swoosh de Nike va detrás del texto, a baja opacidad, sobre el degradado
   navy del club. Es una marca de agua: acompaña, nunca compite con el titular.
   El PNG está recortado a la silueta y en blanco puro, así que se mantiene
   nítido a cualquier tamaño y hereda el color del velo que tenga debajo. */
.tienda {
  position: relative; overflow: hidden;
  min-height: clamp(560px, 76vh, 780px);
  display: flex; align-items: center;
  background: radial-gradient(130% 95% at 50% 46%, #1d2750 0%, var(--avila-navy) 44%, #070c1e 100%);
  color: var(--text-on-dark);
}
.tienda__marca {
  position: absolute; left: 50%; top: 50%;
  width: min(76vw, 820px); height: auto;
  transform: translate(-50%, -50%);
  opacity: .12; pointer-events: none; user-select: none;
}
.tienda__inner {
  position: relative; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-6);
  padding-block: clamp(80px, 12vw, 140px);
}
.tienda__titulo { max-width: 14ch; }
.tienda__lead { max-width: 52ch; }
.tienda__acciones { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; margin-top: var(--space-2); }
.tienda__lista {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3);
  list-style: none; margin-top: var(--space-6); padding: 0;
}
.tienda__lista li {
  border: var(--border-1) solid var(--border-on-dark); border-radius: var(--radius-pill);
  padding: 8px 16px; font-size: var(--fs-xs); color: var(--text-on-dark-muted);
  font-family: var(--font-display); font-weight: var(--fw-bold);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.tienda__stripes { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--stripes-red); }

/* ---------- Noticias ----------
   Viven en una seccion de la portada, no en una pagina aparte. La tarjeta va
   apaisada (foto a la izquierda) y el texto largo se despliega dentro de ella
   misma, para que leer una noticia no obligue a cambiar de pagina. */
.noticia {
  display: grid; grid-template-columns: 280px 1fr; gap: 0;
  background: var(--surface-card); border: var(--border-1) solid var(--border-subtle);
  border-radius: var(--radius-md); overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.noticia--sinfoto { grid-template-columns: 1fr; }
.noticia:hover { box-shadow: var(--shadow-sm); }
/* La foto NO crece con el texto. Estirada a toda la altura de la tarjeta,
   al desplegar una noticia larga la columna se vuelve altisima y estrecha, y
   el recorte deja fuera justo lo que importa: los jugadores. Con proporcion
   fija y pegada arriba, la foto se ve igual este la noticia abierta o cerrada.
   El encuadre tira hacia arriba porque en las fotos de equipo las caras
   quedan en el tercio superior. */
.noticia__foto { align-self: start; }
.noticia__foto img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; display: block;
  object-fit: cover; object-position: center 35%;
  background: var(--avila-navy);
}
/* Al abrir la noticia, la foto sube: pasa a ocupar todo el ancho, encima del
   texto. Cerrada va al lado, que es lo que pide un listado; abierta, arriba,
   que es lo que pide un articulo. La altura se limita para que una foto
   vertical no ocupe la pantalla entera. */
.noticia:has(.noticia__despliegue[open]) { grid-template-columns: 1fr; }
.noticia:has(.noticia__despliegue[open]) .noticia__foto img {
  aspect-ratio: 16 / 9; max-height: 440px;
}

.noticia__texto {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--space-2); padding: var(--space-6);
}
.noticia__meta {
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-3xs);
  letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-muted);
}
.noticia__titulo {
  font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-xl);
  line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--text-strong);
}
.noticia__resumen { font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--text-body); }
/* El texto largo se abre en la misma portada. <details> lo resuelve sin una
   linea de JavaScript y funciona aunque el navegador sea viejo. */
.noticia__despliegue { margin-top: var(--space-2); }
.noticia__despliegue summary {
  cursor: pointer; list-style: none; display: inline-block;
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-xs);
  color: var(--avila-red);
}
.noticia__despliegue summary::-webkit-details-marker { display: none; }
.noticia__despliegue summary::after { content: " +"; }
.noticia__despliegue[open] summary::after { content: " −"; }
.noticia__despliegue summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.noticia__cuerpo { margin-top: var(--space-4); max-width: 62ch; }
.noticia__cuerpo p { color: var(--text-body); line-height: var(--lh-relaxed); margin-bottom: var(--space-4); }
.noticia__cuerpo p:last-child { margin-bottom: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  :root { --section-y: var(--space-16); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .portal-shell { grid-template-columns: 1fr; }
  .portal-side { display: flex; gap: var(--space-2); overflow-x: auto; padding: var(--space-3) var(--space-4); }
  .portal-side__group { margin: 0; display: flex; gap: var(--space-2); }
  .portal-side__title { display: none; }
  .portal-side a { white-space: nowrap; }
  .portal-main { padding: var(--space-6) var(--gutter) var(--space-16); }
}
/* La barra colapsa antes que el resto del layout. Con "LIGA FUTVE JUNIOR" y
   "TIENDA" el contenido de la cabecera mide ~1075px (escudo + nombre + menú +
   botón), así que por debajo de 1220px se pasa al menú desplegable. Si se
   quita una sección del menú, este valor se puede bajar. */
@media (max-width: 1220px) {
  .nav { display: none; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--surface-ink); border-bottom: var(--border-1) solid var(--border-on-dark); padding: var(--space-2) var(--gutter) var(--space-4); }
  .nav.is-open { display: flex; }
  .nav a { padding: 14px 0; border-bottom: var(--border-1) solid var(--border-on-dark); font-size: var(--fs-sm); }
  .nav a:last-child { border-bottom: none; }
  .nav a::after { display: none; }
  .nav__portal { display: block; color: var(--avila-red); }
  .nav-toggle { display: inline-flex; }
  .site-header__inner { position: relative; }
  .header-cta { display: none; }
}

@media (max-width: 760px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  /* La foto pasa arriba: 280px de columna no caben en un telefono. */
  .noticia { grid-template-columns: 1fr; }
  .grid--auto { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  /* La ficha del jugador deja unos 118px utiles para el nombre. Apellidos largos
     ("Castellano", "Matamoros") se salian de la tarjeta a 18px. Baja a 16 y,
     por si algun dia entra uno aun mas largo, se parte la palabra antes que
     desbordar. */
  .player__name { font-size: 16px; overflow-wrap: break-word; }
  .site-footer__inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .portal-auth__card { padding: var(--space-6); }
}