/* =================================================================
   FEDEMIPS · Sistema de diseño (prototipo fuera de WP)
   Dirección: sobrio, institucional, deportivo. Sin estética genérica.
   BEM · mobile-first · accesible (WCAG 2.1 AA)
   ================================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* Marca: granate institucional Región de Murcia */
  --granate:        #6e1228;
  --granate-vivo:   #8f1a2f;
  --granate-tinta:  #420b18;

  /* Neutros cálidos */
  --tinta:          #221b1c;
  --tinta-suave:    #5e5557;
  --papel:          #ffffff;
  --piedra:         #f4f0ec;
  --piedra-2:       #e9e2db;
  --linea:          #ddd4cd;

  /* Medallero (acento ligado al contenido real) */
  --oro:    #bd942c;
  --plata:  #94999f;
  --bronce: #a4673a;

  /* Color por deporte (etiquetas funcionales, desaturadas) */
  --dep-baloncesto: #b5532a;
  --dep-futsal:     #33507a;
  --dep-futbol7:    #46662c;
  --dep-atletismo:  #3f6b46;
  --dep-natacion:   #1f6f8b;
  --dep-petanca:    #8a6a3b;
  --dep-golf:       #5c6b35;
  --dep-padel:      #2e7d74;
  --dep-tenismesa:  #7a2e4a;

  /* Tipografía */
  --display: "Archivo Expanded", "Archivo", system-ui, sans-serif;
  --fuerte:  "Archivo", system-ui, sans-serif;
  --texto:   "IBM Plex Sans", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* Métrica */
  --contenedor: 78rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --radio: 3px;
}

/* ---------- 2. Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  font-family: var(--texto);
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* Foco accesible visible */
:focus-visible {
  outline: 3px solid var(--granate-vivo);
  outline-offset: 2px;
}

/* Salto de contenido (teclado/lector) */
.salto {
  position: absolute; left: 0; top: -100%;
  background: var(--granate); color: #fff;
  padding: .75rem 1.25rem; z-index: 100; font-weight: 600;
}
.salto:focus { top: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. Tipografía ---------- */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: 1.02; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.4rem, 1.4rem + 4.6vw, 5rem); }
h2 { font-size: clamp(1.85rem, 1.2rem + 2.6vw, 3.1rem); }
h3 { font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.8rem); }
p  { max-width: 62ch; }

/* Antetítulo (eyebrow) — mono, técnico, sin decorar de más */
.antetitulo {
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--granate);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.antetitulo::before {
  content: "";
  width: 1.6rem; height: 2px;
  background: var(--granate);
}
.antetitulo--claro { color: rgba(255,255,255,.85); }
.antetitulo--claro::before { background: rgba(255,255,255,.6); }

/* ---------- 4. Estructura ---------- */
.contenedor { width: 100%; max-width: var(--contenedor); margin-inline: auto; padding-inline: var(--gutter); }

.seccion { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.seccion--piedra { background: var(--piedra); }
.seccion--granate { background: var(--granate); color: #fff; }

.seccion__cabecera { margin-bottom: clamp(2rem, 4vw, 3rem); }
.seccion__cabecera p { margin-top: .9rem; color: var(--tinta-suave); }
.seccion--granate .seccion__cabecera p { color: rgba(255,255,255,.78); }

/* ---------- 5. Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--fuerte); font-weight: 700;
  font-size: .95rem; letter-spacing: .01em;
  padding: .85rem 1.5rem; border: 2px solid transparent;
  border-radius: var(--radio); transition: background .18s, color .18s, border-color .18s;
}
.btn--solido { background: var(--granate); color: #fff; }
.btn--solido:hover { background: var(--granate-tinta); }
.btn--linea { border-color: var(--granate); color: var(--granate); }
.btn--linea:hover { background: var(--granate); color: #fff; }
.btn--claro { border-color: rgba(255,255,255,.55); color: #fff; }
.btn--claro:hover { background: #fff; color: var(--granate); border-color: #fff; }
.btn__flecha { font-family: var(--mono); }

/* ---------- 6. Etiqueta de deporte ---------- */
.tag {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: var(--radio);
  color: #fff; background: var(--tinta-suave); white-space: nowrap;
}
.tag--baloncesto { background: var(--dep-baloncesto); }
.tag--futsal     { background: var(--dep-futsal); }
.tag--futbol7    { background: var(--dep-futbol7); }
.tag--atletismo  { background: var(--dep-atletismo); }
.tag--natacion   { background: var(--dep-natacion); }
.tag--petanca    { background: var(--dep-petanca); }
.tag--golf       { background: var(--dep-golf); }
.tag--padel      { background: var(--dep-padel); }
.tag--tenismesa  { background: var(--dep-tenismesa); }

/* ---------- 7. Tratamiento duotono granate (firma visual) ---------- */
.duo { position: relative; overflow: hidden; background: var(--granate-tinta); }
.duo > img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(1.02); }
.duo::before { content: ""; position: absolute; inset: 0; background: var(--granate); mix-blend-mode: multiply; }
.duo::after  { content: ""; position: absolute; inset: 0; background: #fff3ec; mix-blend-mode: screen; opacity: .14; }

/* ---------- 8. Barra superior ---------- */
.topbar { background: var(--granate-tinta); color: rgba(255,255,255,.9); font-family: var(--mono); font-size: .76rem; letter-spacing: .04em; }
.topbar__interior { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center; padding-block: .5rem; }
.topbar__item { display: inline-flex; align-items: center; gap: .4rem; }
.topbar__sep { opacity: .4; }
.topbar__derecha { margin-left: auto; }
.topbar a:hover { color: #fff; text-decoration: underline; }

/* ---------- 9. Cabecera / navegación ---------- */
.cabecera { position: sticky; top: 0; z-index: 50; background: var(--papel); border-bottom: 1px solid var(--linea); }
.cabecera__interior { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .7rem; }
.cabecera__logo img { height: clamp(2.6rem, 6vw, 3.1rem); width: auto; }
.cabecera__nav { display: none; }
.nav__lista { display: flex; align-items: center; gap: clamp(.6rem, 1.4vw, 1.6rem); }
.nav__enlace { font-family: var(--fuerte); font-weight: 600; font-size: .95rem; padding: .4rem 0; position: relative; }
.nav__enlace::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.2rem; height: 2px; background: var(--granate); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.nav__enlace:hover::after, .nav__enlace[aria-current="page"]::after { transform: scaleX(1); }
.nav__enlace[aria-current="page"] { color: var(--granate); }

.menu-btn { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--mono); font-weight: 600; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; background: var(--granate); color: #fff; padding: .6rem .9rem; border: 0; border-radius: var(--radio); }

@media (max-width: 59.99rem) {
  .cabecera__nav--abierta { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--papel); border-bottom: 1px solid var(--linea); box-shadow: 0 14px 28px rgba(0,0,0,.1); }
  .cabecera__nav--abierta .nav__lista { flex-direction: column; align-items: stretch; gap: 0; padding: .25rem var(--gutter) 1rem; }
  .cabecera__nav--abierta .nav__enlace { padding: .9rem 0; border-bottom: 1px solid var(--linea); }
  .cabecera__nav--abierta .nav__enlace::after { display: none; }
}
@media (min-width: 60rem) {
  .cabecera__nav { display: block; }
  .menu-btn { display: none; }
}

/* ---------- 10. Hero ---------- */
.hero { position: relative; isolation: isolate; color: #fff; min-height: clamp(32rem, 76vh, 46rem); display: flex; align-items: flex-end; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.hero__velo { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(180deg, rgba(66,11,24,.15) 0%, rgba(66,11,24,.55) 55%, rgba(66,11,24,.9) 100%); }
.hero__contenido { padding-block: clamp(2.5rem, 6vw, 4.5rem); max-width: 46rem; }
.hero__titulo { margin: 1rem 0 1.1rem; text-shadow: 0 2px 24px rgba(0,0,0,.25); }
.hero__entrada { font-size: 1.15rem; color: rgba(255,255,255,.92); max-width: 40ch; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

/* Cintillo de "última hora / próxima cita" bajo el hero */
.cintillo { background: var(--granate); color: #fff; }
.cintillo__interior { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; padding-block: .9rem; font-size: .92rem; }
.cintillo__etq { font-family: var(--mono); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .74rem; background: #fff; color: var(--granate); padding: .25rem .6rem; border-radius: var(--radio); }
.cintillo strong { font-family: var(--fuerte); }
.cintillo a { margin-left: auto; font-family: var(--mono); font-size: .8rem; text-decoration: underline; }

/* ---------- 11. Rejilla de deportes (tablón) ---------- */
.deportes__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
@media (min-width: 40rem) { .deportes__grid { grid-template-columns: repeat(4, 1fr); } }
.deporte { background: var(--papel); padding: 1.4rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; min-height: 9rem; position: relative; transition: background .2s; }
.deporte:hover { background: var(--piedra); }
.deporte__color { width: 2.2rem; height: .35rem; border-radius: 2px; }
.deporte__nombre { font-family: var(--display); font-weight: 800; font-size: 1.25rem; line-height: 1; margin-top: auto; }
.deporte__dato { font-family: var(--mono); font-size: .76rem; color: var(--tinta-suave); letter-spacing: .04em; }

/* ---------- 12. Marcador de resultados (el corazón) ---------- */
.marcador { border-top: 2px solid var(--tinta); }
.resultado { display: grid; gap: .65rem .9rem; padding-block: 1.4rem; border-bottom: 1px solid var(--linea); align-items: center;
  grid-template-columns: 1fr; grid-template-areas: "dep" "tit" "meta" "med" "pdf"; }
.resultado__dep   { grid-area: dep; }
.resultado__titulo{ grid-area: tit; font-family: var(--fuerte); font-weight: 700; font-size: 1.18rem; line-height: 1.15; }
.resultado__meta  { grid-area: meta; font-family: var(--mono); font-size: .82rem; color: var(--tinta-suave); letter-spacing: .03em; }
.resultado__medallas { grid-area: med; display: flex; gap: .5rem; }
.resultado__pdf   { grid-area: pdf; }
.resultado:hover  { background: var(--piedra); }

@media (min-width: 52rem) {
  .resultado { grid-template-columns: 9rem 1fr auto auto; grid-template-areas: "dep tit med pdf" "dep meta med pdf"; column-gap: 1.6rem; }
  .resultado__dep { align-self: center; }
}

/* Medallas (oro/plata/bronce ligadas al contenido) */
.medalla { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--mono); font-weight: 600; font-size: .95rem; color: var(--tinta); }
.medalla__punto { width: .8rem; height: .8rem; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.medalla__punto--oro    { background: var(--oro); }
.medalla__punto--plata  { background: var(--plata); }
.medalla__punto--bronce { background: var(--bronce); }
.estado { font-family: var(--mono); font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); border: 1.5px solid var(--linea); border-radius: var(--radio); padding: .3rem .6rem; }

.enlace-pdf { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--mono); font-weight: 600; font-size: .8rem; letter-spacing: .05em; color: var(--granate); border: 1.5px solid var(--linea); padding: .5rem .8rem; border-radius: var(--radio); transition: border-color .18s, background .18s; }
.enlace-pdf:hover { border-color: var(--granate); background: var(--granate); color: #fff; }

/* ---------- 13. Próximas citas (carteles) ---------- */
.citas__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 40rem) { .citas__grid { grid-template-columns: repeat(3, 1fr); } }
.cartel { display: flex; flex-direction: column; }
.cartel__media { aspect-ratio: 3 / 4; border: 1px solid var(--linea); }
.cartel__cuerpo { padding-top: .9rem; }
.cartel__fecha { font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--granate); font-weight: 600; }
.cartel__titulo { font-family: var(--fuerte); font-weight: 700; font-size: 1.05rem; margin-top: .3rem; }

/* ---------- 14. Franja institucional ---------- */
.institucional__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 52rem) { .institucional__grid { grid-template-columns: 1.1fr .9fr; } }
.institucional__media { aspect-ratio: 4 / 3; }
.institucional .antetitulo--claro + h2 { margin-top: 1rem; }
.cifras { display: flex; flex-wrap: wrap; gap: 2rem 2.6rem; margin-top: 2rem; }
.cifra__n { font-family: var(--display); font-weight: 900; font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1; }
.cifra__et { font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-top: .3rem; }

/* ---------- 15. Clubes / socios ---------- */
.clubes__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
@media (min-width: 48rem) { .clubes__grid { grid-template-columns: repeat(4, 1fr); } }
.club { background: var(--papel); padding: 1.1rem 1.2rem; display: flex; align-items: center; gap: .8rem; }
.club__inicial { font-family: var(--display); font-weight: 800; color: var(--granate); font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.club__nombre { font-weight: 600; font-size: .92rem; line-height: 1.2; }
.club__loc { font-family: var(--mono); font-size: .72rem; color: var(--tinta-suave); }

.socios { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.6rem, 5vw, 3.4rem); }
.socios img { height: 2.8rem; width: auto; filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; }
.socios a:hover img { filter: none; opacity: 1; }

/* ---------- 16. Pie ---------- */
.pie { background: var(--granate-tinta); color: rgba(255,255,255,.78); padding-block: clamp(3rem, 6vw, 4.5rem); }
.pie__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .pie__grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.pie__marca { font-family: var(--display); font-weight: 900; font-size: 1.8rem; color: #fff; letter-spacing: -.01em; }
.pie__marca span { color: rgba(255,255,255,.55); display: block; font-size: .9rem; font-family: var(--mono); font-weight: 500; letter-spacing: .1em; margin-top: .3rem; }
.pie h4 { font-family: var(--fuerte); font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 1rem; }
.pie__lista { display: flex; flex-direction: column; gap: .55rem; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie__legal { border-top: 1px solid rgba(255,255,255,.15); margin-top: 2.5rem; padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-family: var(--mono); font-size: .76rem; }
.pie__legal .topbar__sep { opacity: .35; }

/* ---------- 17. Silueta (firma gráfica del atleta) ---------- */
.silueta { position: absolute; pointer-events: none; opacity: .05; z-index: 0; }
.con-silueta { position: relative; overflow: hidden; }
.con-silueta > *:not(.silueta) { position: relative; z-index: 1; }

/* =================================================================
   PÁGINAS INTERNAS
   ================================================================= */

/* ---------- 18. Migas de pan ---------- */
.migas { font-family: var(--mono); font-size: .8rem; letter-spacing: .03em; display: flex; flex-wrap: wrap; gap: .45rem; color: var(--tinta-suave); }
.migas a:hover { color: var(--granate); text-decoration: underline; }
.migas [aria-current] { color: var(--tinta); }
.migas__sep { opacity: .45; }
.migas--claro, .migas--claro a { color: rgba(255,255,255,.78); }
.migas--claro [aria-current] { color: #fff; }

/* ---------- 19. Cabecera interna ---------- */
.cabint { position: relative; isolation: isolate; color: #fff; }
.cabint__media { position: absolute; inset: 0; z-index: -2; background: var(--granate-tinta); }
.cabint__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; filter: grayscale(1) contrast(1.05); }
.cabint__media::after { content: ""; position: absolute; inset: 0; background: var(--granate); mix-blend-mode: multiply; }
/* Cabecera sin foto: fondo de marca con el color del deporte (no se usa foto de archivo ajena). */
.cabint--color .cabint__media { background: linear-gradient(135deg, var(--cab-dep, var(--granate)), var(--granate-tinta)); }
.cabint--color .cabint__media::after { display: none; }
.cabint__velo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(66,11,24,.45), rgba(66,11,24,.9)); }
.cabint__cuerpo { padding-block: clamp(1.5rem, 4vw, 2.2rem) clamp(2.5rem, 6vw, 4rem); }
.cabint__sup { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.cabint h1 { margin: .6rem 0 0; font-size: clamp(2rem, 1.3rem + 3vw, 3.6rem); }
.cabint__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1.2rem; font-family: var(--mono); font-size: .85rem; color: rgba(255,255,255,.82); }
.cabint__meta b { color: #fff; font-weight: 600; }
.estado-pill { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--mono); font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; background: #fff; color: var(--granate); padding: .35rem .7rem; border-radius: var(--radio); }
.estado-pill::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--pill-dot, #2e8b57); }

/* ---------- 20. Layout interno (contenido + aside) ---------- */
.interna { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.interna__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 62rem) { .interna__grid { grid-template-columns: minmax(0,1fr) 19rem; align-items: start; } }
@media (min-width: 62rem) { .interna__grid--solo-ficha { grid-template-columns: minmax(0, 32rem); } }
.bloque + .bloque { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.bloque__titulo { font-family: var(--display); font-weight: 800; font-size: clamp(1.3rem,1.1rem+.8vw,1.6rem); padding-bottom: .8rem; border-bottom: 2px solid var(--tinta); margin-bottom: 1.4rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.bloque__titulo small { font-family: var(--mono); font-size: .76rem; font-weight: 500; letter-spacing: .04em; color: var(--tinta-suave); white-space: nowrap; }

/* ---------- 21. Tabla de clasificación ---------- */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 33rem; }
.tabla th, .tabla td { padding: .68rem .55rem; text-align: right; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabla thead th { font-family: var(--mono); font-size: .7rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-suave); border-bottom: 1.5px solid var(--tinta); }
.tabla__pos { text-align: center; width: 3rem; }
.tabla th.tabla__equipo, .tabla td.tabla__equipo { text-align: left; width: 100%; }
.tabla__equipo b { font-weight: 600; }
.tabla__equipo span { font-family: var(--mono); font-size: .72rem; color: var(--tinta-suave); display: block; }
.tabla__pts { font-family: var(--display); font-weight: 800; color: var(--granate); font-size: 1.05rem; }
.tabla tbody tr:hover { background: var(--piedra); }
.posbola { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; color: #fff; font-family: var(--mono); font-weight: 700; font-size: .8rem; }
.posbola--oro { background: var(--oro); } .posbola--plata { background: var(--plata); } .posbola--bronce { background: var(--bronce); }

/* ---------- 22. Resultados por jornada ---------- */
.jornada-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.4rem; }
.jornada-nav a { font-family: var(--mono); font-size: .8rem; font-weight: 600; padding: .4rem .65rem; border: 1.5px solid var(--linea); border-radius: var(--radio); color: var(--tinta-suave); }
.jornada-nav a:hover { border-color: var(--granate); color: var(--granate); }
.jornada-nav a[aria-current] { background: var(--granate); color: #fff; border-color: var(--granate); }
.partido { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8rem; padding: .85rem 1rem; border: 1px solid var(--linea); border-radius: var(--radio); }
.partido + .partido { margin-top: .55rem; }
.partido__eq { font-weight: 600; font-size: .95rem; }
.partido__eq--local { text-align: right; }
.partido__marcador { font-family: var(--display); font-weight: 800; font-size: 1.25rem; display: flex; gap: .55rem; align-items: center; }
.partido__marcador span { min-width: 1.6ch; text-align: center; }
.partido__marcador .gana { color: var(--granate); }
.partido__marcador .sep { color: var(--linea); font-weight: 500; }
.partido__cita { text-align: center; font-family: var(--mono); font-size: .76rem; color: var(--tinta-suave); margin-top: 1rem; }

/* ---------- 23. Aside: ficha técnica + descargas ---------- */
.aside-bloque { border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.4rem; }
.aside-bloque + .aside-bloque { margin-top: 1.2rem; }
.aside-bloque__titulo { font-family: var(--mono); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--granate); margin-bottom: 1.1rem; }
.datos { display: grid; gap: 0; }
.datos__fila { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; border-bottom: 1px solid var(--linea); padding: .55rem 0; }
.datos__fila:last-child { border-bottom: 0; }
.datos__et { color: var(--tinta-suave); }
.datos__v { font-weight: 600; text-align: right; }
.descargas { display: grid; gap: .55rem; }
.descarga { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border: 1.5px solid var(--linea); border-radius: var(--radio); transition: border-color .18s, background .18s; }
.descarga:hover { border-color: var(--granate); background: var(--piedra); }
.descarga__ext { font-family: var(--mono); font-size: .64rem; font-weight: 700; color: #fff; background: var(--granate); padding: .25rem .4rem; border-radius: 2px; flex-shrink: 0; }
.descarga__txt { font-weight: 600; font-size: .88rem; line-height: 1.2; }
.enlaces-temporada { display: grid; gap: .55rem; }
.enlaces-temporada a { font-family: var(--mono); font-size: .85rem; color: var(--granate); }
.enlaces-temporada a:hover { text-decoration: underline; }

/* ---------- 24. Galería interna ---------- */
.galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
@media (min-width: 40rem) { .galeria { grid-template-columns: repeat(4, 1fr); } }
.galeria .duo { aspect-ratio: 4 / 3; border-radius: var(--radio); }

/* ---------- 25. Cabecera de página (índices e institucional) ---------- */
.cabpag { position: relative; isolation: isolate; overflow: hidden; background: var(--granate); color: #fff; }
.cabpag__cuerpo { position: relative; z-index: 1; padding-block: clamp(1.5rem, 4vw, 2.2rem) clamp(2.6rem, 6vw, 3.6rem); }
.cabpag h1 { margin-top: .7rem; }
.cabpag__intro { margin-top: 1.1rem; color: rgba(255,255,255,.85); font-size: 1.12rem; max-width: 54ch; }
.cabpag .silueta { opacity: .07; }

/* ---------- 26. Barra de filtros (deporte · temporada · búsqueda) ---------- */
.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.2rem 1.6rem; background: var(--piedra); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.15rem 1.25rem; }
.filtros__grupo { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.filtros__grupo--crece { flex: 1 1 13rem; }
.filtros__et { font-family: var(--mono); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); }

.filtros__chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.filtros__chip { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--mono); font-size: .76rem; font-weight: 600; letter-spacing: .03em; padding: .42rem .75rem; border: 1.5px solid var(--linea); border-radius: 2rem; background: var(--papel); color: var(--tinta); transition: border-color .18s, background .18s, color .18s; }
.filtros__chip::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--chip-c, var(--tinta-suave)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); flex-shrink: 0; }
.filtros__chip:hover { border-color: var(--chip-c, var(--granate)); }
.filtros__chip[aria-pressed="true"], .filtros__chip[aria-current] { background: var(--chip-c, var(--granate)); border-color: var(--chip-c, var(--granate)); color: #fff; }
.filtros__chip[aria-pressed="true"]::before, .filtros__chip[aria-current]::before { background: #fff; box-shadow: none; }
.filtros__chip--baloncesto { --chip-c: var(--dep-baloncesto); }
.filtros__chip--futsal     { --chip-c: var(--dep-futsal); }
.filtros__chip--atletismo  { --chip-c: var(--dep-atletismo); }
.filtros__chip--natacion   { --chip-c: var(--dep-natacion); }
.filtros__chip--petanca    { --chip-c: var(--dep-petanca); }
.filtros__chip--golf       { --chip-c: var(--dep-golf); }
.filtros__chip--padel      { --chip-c: var(--dep-padel); }
.filtros__chip--tenismesa  { --chip-c: var(--dep-tenismesa); }

.filtros__select, .filtros__buscar { font: inherit; font-size: .9rem; color: var(--tinta); background: var(--papel); border: 1.5px solid var(--linea); border-radius: var(--radio); padding: .58rem .8rem; }
.filtros__select { padding-right: 2rem; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236e1228' stroke-width='2' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; background-size: .7rem; }
.filtros__buscar { width: 100%; }
.filtros__select:focus-visible, .filtros__buscar:focus-visible { outline-offset: 0; border-color: var(--granate); }
.filtros__reset { font-family: var(--mono); font-size: .78rem; font-weight: 600; color: var(--granate); background: none; border: 0; text-decoration: underline; text-underline-offset: 2px; padding: .5rem 0; align-self: flex-end; }
.filtros__reset:hover { color: var(--granate-tinta); }

/* ---------- 27. Barra de recuento + leyenda del medallero ---------- */
.listado__barra { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .6rem 1.5rem; margin: 1.9rem 0 .3rem; }
.listado__cuenta { font-family: var(--mono); font-size: .82rem; color: var(--tinta-suave); letter-spacing: .03em; }
.listado__cuenta b { color: var(--tinta); font-weight: 600; }
.leyenda { display: flex; flex-wrap: wrap; gap: .9rem; font-family: var(--mono); font-size: .74rem; color: var(--tinta-suave); }
.leyenda span { display: inline-flex; align-items: center; gap: .35rem; }
.leyenda i { width: .7rem; height: .7rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); flex-shrink: 0; }

/* ---------- 28. Estado vacío ---------- */
.vacio { text-align: center; padding: clamp(2.5rem, 6vw, 4rem) 1rem; border-bottom: 1px solid var(--linea); }
.vacio__t { font-family: var(--display); font-weight: 800; font-size: 1.3rem; }
.vacio p { margin: .6rem auto 0; color: var(--tinta-suave); max-width: 42ch; }

/* ---------- 29. Prosa (texto largo: institucional, artículo, legales) ---------- */
.prosa { max-width: 62ch; }
.prosa > * + * { margin-top: 1.1rem; }
.prosa h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-top: 2.6rem; }
.prosa h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem); margin-top: 2rem; }
.prosa > h2:first-child, .prosa > h3:first-child { margin-top: 0; }
.prosa a { color: var(--granate); text-decoration: underline; text-underline-offset: 2px; }
.prosa a:hover { color: var(--granate-tinta); }
.prosa ul, .prosa ol { padding-left: 1.35rem; display: grid; gap: .5rem; }
.prosa ul { list-style: disc; }
.prosa ol { list-style: decimal; }
.prosa li::marker { color: var(--granate); }
.prosa blockquote { border-left: 3px solid var(--granate); padding: .2rem 0 .2rem 1.2rem; font-family: var(--fuerte); font-size: 1.2rem; line-height: 1.4; }
.prosa figure { margin-block: 1.8rem; }
.prosa figure .duo { aspect-ratio: 16 / 9; border-radius: var(--radio); }
.prosa figcaption { font-family: var(--mono); font-size: .78rem; color: var(--tinta-suave); margin-top: .6rem; }
.prosa hr { border: 0; border-top: 1px solid var(--linea); margin-block: 2.2rem; }
.prosa dt { font-weight: 700; font-family: var(--fuerte); }
.prosa dd { margin-left: 0; color: var(--tinta-suave); }

/* ---------- 30. Índice lateral (tabla de contenidos) ---------- */
.indice { position: sticky; top: 5.5rem; }
.indice__t { font-family: var(--mono); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: .9rem; }
.indice a { display: block; padding: .45rem 0 .45rem .85rem; border-left: 2px solid var(--linea); font-family: var(--mono); font-size: .85rem; color: var(--tinta-suave); }
.indice a:hover, .indice a[aria-current] { border-color: var(--granate); color: var(--granate); }

/* ---------- 31. Valores / misión (rejilla) ---------- */
.valores { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
@media (min-width: 40rem) { .valores { grid-template-columns: repeat(3, 1fr); } }
.valor { background: var(--papel); padding: 1.7rem 1.4rem; }
.valor__n { font-family: var(--mono); font-size: .8rem; font-weight: 600; letter-spacing: .08em; color: var(--granate); }
.valor__t { font-family: var(--display); font-weight: 800; font-size: 1.25rem; margin: .7rem 0 .5rem; }
.valor p { font-size: .95rem; color: var(--tinta-suave); }

/* ---------- 32. Hitos (línea de tiempo / historia) ---------- */
.hitos { display: grid; gap: 0; border-left: 2px solid var(--linea); margin-left: .5rem; }
.hito { position: relative; padding: 0 0 1.9rem 1.7rem; }
.hito:last-child { padding-bottom: 0; }
.hito::before { content: ""; position: absolute; left: -.53rem; top: .25rem; width: .85rem; height: .85rem; border-radius: 50%; background: var(--granate); box-shadow: 0 0 0 3px var(--papel); }
.hito__año { font-family: var(--mono); font-weight: 700; font-size: .9rem; letter-spacing: .05em; color: var(--granate); }
.hito__t { font-family: var(--fuerte); font-weight: 700; font-size: 1.08rem; margin: .2rem 0 .35rem; }
.hito p { font-size: .95rem; color: var(--tinta-suave); }

/* ---------- 33. Órganos de gobierno (personas / cargos) ---------- */
.junta { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
@media (min-width: 34rem) { .junta { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 52rem) { .junta { grid-template-columns: repeat(3, 1fr); } }
.cargo { background: var(--papel); padding: 1.4rem; display: flex; flex-direction: column; gap: .25rem; }
.cargo__rol { font-family: var(--mono); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--granate); }
.cargo__nombre { font-family: var(--fuerte); font-weight: 700; font-size: 1.1rem; line-height: 1.2; }
.cargo__extra { font-family: var(--mono); font-size: .78rem; color: var(--tinta-suave); }

/* ---------- 34. Tarjetas (noticias, álbumes, contenido) ---------- */
.tarjetas { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2.2rem); }
@media (min-width: 38rem) { .tarjetas--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 46rem) { .tarjetas--3 { grid-template-columns: repeat(3, 1fr); } }
.tarjeta { display: flex; flex-direction: column; }
.tarjeta__media { aspect-ratio: 16 / 10; border: 1px solid var(--linea); overflow: hidden; }
.tarjeta__media img { transition: transform .4s ease; }
.tarjeta:hover .tarjeta__media img { transform: scale(1.05); }
.tarjeta__cuerpo { padding-top: 1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.tarjeta__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .85rem; font-family: var(--mono); font-size: .76rem; color: var(--tinta-suave); letter-spacing: .03em; }
.tarjeta__fecha { color: var(--granate); font-weight: 600; }
.tarjeta__titulo { font-family: var(--display); font-weight: 800; font-size: 1.28rem; line-height: 1.12; }
.tarjeta__titulo a:hover { color: var(--granate); }
.tarjeta__extracto { font-size: .95rem; color: var(--tinta-suave); }
.tarjeta__mas { font-family: var(--mono); font-size: .8rem; font-weight: 600; color: var(--granate); margin-top: auto; padding-top: .3rem; }
@media (min-width: 52rem) {
  .tarjeta--destacada { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(1.5rem, 3vw, 2.4rem); align-items: center; }
  .tarjeta--destacada .tarjeta__media { aspect-ratio: 3 / 2; }
  .tarjeta--destacada .tarjeta__titulo { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
}

/* ---------- 35. Paginación ---------- */
.paginacion { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.paginacion a, .paginacion span { display: inline-grid; place-items: center; min-width: 2.6rem; height: 2.6rem; padding: 0 .6rem; font-family: var(--mono); font-size: .85rem; font-weight: 600; border: 1.5px solid var(--linea); border-radius: var(--radio); color: var(--tinta-suave); }
.paginacion a:hover { border-color: var(--granate); color: var(--granate); }
.paginacion [aria-current] { background: var(--granate); color: #fff; border-color: var(--granate); }
.paginacion__puntos { border: 0 !important; }

/* ---------- 36. Listado de clubes (tarjetas) ---------- */
.clubes-lista { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 40rem) { .clubes-lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .clubes-lista { grid-template-columns: repeat(3, 1fr); } }
.club-card { display: flex; flex-direction: column; gap: 1rem; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.4rem; transition: border-color .18s, box-shadow .18s, transform .18s; }
.club-card:hover { border-color: var(--granate); box-shadow: 0 12px 26px rgba(66,11,24,.09); transform: translateY(-2px); }
.club-card__top { display: flex; align-items: center; gap: .9rem; }
.club-card__escudo { width: 3rem; height: 3rem; flex-shrink: 0; display: grid; place-items: center; background: var(--granate); color: #fff; font-family: var(--display); font-weight: 800; font-size: 1.4rem; border-radius: var(--radio); }
.club-card__nombre { display: block; font-family: var(--fuerte); font-weight: 700; font-size: 1.1rem; line-height: 1.15; }
.club-card__loc { display: block; font-family: var(--mono); font-size: .76rem; color: var(--tinta-suave); margin-top: .15rem; }
.club-card__deportes { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; }
.club-card__mas { font-family: var(--mono); font-size: .78rem; font-weight: 600; color: var(--granate); }
.mini-tag { font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .04em; padding: .22rem .55rem; border-radius: 2rem; border: 1.5px solid var(--linea); color: var(--tinta-suave); white-space: nowrap; }

/* ---------- 37. Formulario ---------- */
.formulario { display: grid; gap: 1.15rem; }
.formulario__fila { display: grid; gap: 1.15rem; }
@media (min-width: 40rem) { .formulario__fila { grid-template-columns: 1fr 1fr; } }
.campo { display: flex; flex-direction: column; gap: .4rem; }
.campo > label { font-family: var(--mono); font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); }
.campo .req { color: var(--granate); }
.campo input, .campo textarea, .campo select { font: inherit; font-size: 1rem; color: var(--tinta); background: var(--papel); border: 1.5px solid var(--linea); border-radius: var(--radio); padding: .7rem .85rem; }
.campo textarea { min-height: 8.5rem; resize: vertical; }
.campo input:focus-visible, .campo textarea:focus-visible, .campo select:focus-visible { border-color: var(--granate); outline-offset: 0; }
.campo-check { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; color: var(--tinta-suave); }
.campo-check input { margin-top: .2rem; flex-shrink: 0; }
.campo-check a { color: var(--granate); text-decoration: underline; }

/* Mapa (placeholder sin dependencias externas) */
.mapa { aspect-ratio: 16 / 9; border: 1px solid var(--linea); border-radius: var(--radio); background:
  repeating-linear-gradient(45deg, var(--piedra), var(--piedra) 12px, var(--piedra-2) 12px, var(--piedra-2) 24px);
  display: grid; place-items: center; }
.mapa span { font-family: var(--mono); font-size: .8rem; color: var(--tinta-suave); background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: .5rem .8rem; }

/* ---------- 38. Descargas a página completa ---------- */
.docs-grupo + .docs-grupo { margin-top: clamp(2.2rem, 5vw, 3rem); }
.docs-grupo__t { font-family: var(--display); font-weight: 800; font-size: clamp(1.25rem, 1.1rem + .7vw, 1.55rem); padding-bottom: .7rem; border-bottom: 2px solid var(--tinta); margin-bottom: 1.2rem; }
.docs-grid { display: grid; grid-template-columns: 1fr; gap: .7rem; }
@media (min-width: 46rem) { .docs-grid { grid-template-columns: repeat(2, 1fr); } }
.descarga__cuerpo { display: flex; flex-direction: column; }
.descarga__meta { font-family: var(--mono); font-size: .7rem; color: var(--tinta-suave); margin-top: .15rem; }

/* ---------- 39. Compartir (artículo) ---------- */
.compartir { display: flex; flex-wrap: wrap; gap: .5rem; }
.compartir a { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1.5px solid var(--linea); border-radius: var(--radio); color: var(--tinta-suave); font-family: var(--mono); font-size: .72rem; font-weight: 700; }
.compartir a:hover { border-color: var(--granate); color: var(--granate); }

/* ---------- 40. Campeonato: medallero + resultados por prueba ---------- */
.tabla__club, .tabla th.tabla__club { text-align: left; width: 100%; }
.tabla__club b { font-weight: 600; }
.tabla__club span { font-family: var(--mono); font-size: .72rem; color: var(--tinta-suave); display: block; }
.tabla__total { font-family: var(--display); font-weight: 800; color: var(--granate); font-size: 1.05rem; }
.th-medal { display: inline-flex; align-items: center; gap: .3rem; justify-content: flex-end; }
.th-medal i { width: .6rem; height: .6rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }

.prueba { border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.1rem 1.2rem; }
.prueba + .prueba { margin-top: .8rem; }
.prueba__t { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-family: var(--fuerte); font-weight: 700; font-size: 1.05rem; margin-bottom: .9rem; }
.prueba__cat { font-family: var(--mono); font-size: .74rem; font-weight: 500; color: var(--tinta-suave); white-space: nowrap; }
.podio { display: grid; gap: .55rem; }
.puesto { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; }
.puesto__medalla { width: 1.55rem; height: 1.55rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-weight: 700; font-size: .74rem; color: #fff; flex-shrink: 0; }
.puesto__medalla--oro { background: var(--oro); }
.puesto__medalla--plata { background: var(--plata); }
.puesto__medalla--bronce { background: var(--bronce); }
.puesto__nombre { font-weight: 600; font-size: .95rem; line-height: 1.2; }
.puesto__club { font-family: var(--mono); font-size: .74rem; color: var(--tinta-suave); }
.puesto__marca { font-family: var(--mono); font-weight: 600; font-size: .9rem; white-space: nowrap; }

/* ---------- 41. Próximamente (coming soon) ---------- */
.proxima { min-height: 100vh; display: grid; grid-template-columns: 1fr; background: var(--papel); border-top: 4px solid var(--granate); }
.proxima__panel { display: flex; align-items: center; padding: clamp(2.2rem, 7vw, 4.5rem) var(--gutter); }
.proxima__cuerpo { width: 100%; max-width: 34rem; margin-inline: auto; }

.proxima__logo { width: clamp(9.5rem, 26vw, 13.5rem); height: auto; }
.proxima__ante { margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.proxima__titulo { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem); margin-top: .9rem; }
.proxima__texto { margin-top: 1.1rem; font-size: 1.08rem; color: var(--tinta-suave); max-width: 46ch; }
.proxima__prosa { margin-top: 1.1rem; color: var(--tinta-suave); }

/* Estado / fecha prevista */
.proxima__estado { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.5rem; padding: .45rem .8rem; font-family: var(--mono); font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--granate); background: var(--piedra); border: 1px solid var(--piedra-2); border-radius: var(--radio); }
.proxima__pulso { width: .5rem; height: .5rem; border-radius: 50%; background: var(--granate-vivo); flex-shrink: 0; animation: proxima-pulso 2.4s ease-in-out infinite; }
@keyframes proxima-pulso { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.65); } }

/* Rótulos de apartado dentro del panel */
.proxima__rotulo { font-family: var(--mono); font-size: .72rem; font-weight: 600; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: var(--granate); margin-top: clamp(2rem, 4vw, 2.6rem); padding-top: 1.3rem; border-top: 1px solid var(--linea); }
.proxima__rotulo + * { margin-top: 1.1rem; }

/* Vías de contacto */
.vias { display: grid; grid-template-columns: 1fr; gap: .7rem; }
@media (min-width: 30rem) { .vias { grid-template-columns: repeat(2, 1fr); } }
.via { display: flex; flex-direction: column; gap: .25rem; padding: .85rem 1rem; border: 1.5px solid var(--linea); border-radius: var(--radio); transition: background .18s, border-color .18s; }
.via__et { font-family: var(--mono); font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); }
.via__v { font-family: var(--fuerte); font-weight: 700; font-size: 1.02rem; line-height: 1.25; color: var(--granate); overflow-wrap: anywhere; }
.via--enlace:hover { border-color: var(--granate); background: var(--piedra); }
.via--destacada { grid-column: 1 / -1; background: var(--granate); border-color: var(--granate); }
.via--destacada .via__et { color: rgba(255,255,255,.72); }
.via--destacada .via__v { color: #fff; }
.via--destacada.via--enlace:hover { background: var(--granate-tinta); border-color: var(--granate-tinta); }

.proxima__pie { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: clamp(2rem, 5vw, 3rem); padding-top: 1.2rem; border-top: 1px solid var(--linea); font-family: var(--mono); font-size: .72rem; color: var(--tinta-suave); }
.proxima__pie-sep { opacity: .45; }

/* Imagen en duotono: banda inferior en móvil, columna a partir de 60rem */
.proxima__media { display: grid; align-items: end; isolation: isolate; min-height: 32vh; }
.proxima__media > img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.proxima__claim { position: relative; z-index: 2; padding: clamp(1.4rem, 4vw, 2.6rem); max-width: 24ch; font-family: var(--display); font-weight: 800; font-size: clamp(1.35rem, 1rem + 1.9vw, 2.4rem); line-height: 1.05; letter-spacing: -.01em; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.3); }

@media (min-width: 60rem) {
  .proxima { grid-template-columns: 1.02fr .98fr; }
  .proxima__media { min-height: 0; }
}