/* ============================================================
   Club Rubio Ñu — hoja de estilos principal
   Ajustada al Manual de Marca:
   · Verde institucional #3CA85C · Blanco · Tinta #10201A
   · Dorado #BC8C3E de uso restringido (logros y trayectoria)
   · Titulares Oswald en mayúsculas · Texto Karla
   · Franjas verticales albiverdes como fondo o separador,
     nunca debajo del escudo.
   ============================================================ */

:root {
  --verde: #3CA85C;
  --verde-hondo: #2E8749;
  --blanco: #FFFFFF;
  --tinta: #10201A;
  --tinta-suave: #5A6660;
  --dorado: #BC8C3E;
  --gris-suave: #F4F6F4;
  --linea: rgba(16, 32, 26, 0.14);

  --marco: 1180px;
  --borde: 1px solid var(--linea);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font-family: 'Karla', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, .display {
  font-family: 'Oswald', 'Karla', system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: 0.005em;
  margin: 0;
}

:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }

.marco { width: min(100% - 2.5rem, var(--marco)); margin-inline: auto; }

.saltar {
  position: absolute; left: -9999px; top: 0;
  background: var(--verde); color: var(--tinta);
  padding: 0.75rem 1.25rem; z-index: 200;
}
.saltar:focus { left: 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;
}

/* ===== Franjas albiverdes ===== */
.bastones {
  background-image: repeating-linear-gradient(
    90deg,
    var(--verde) 0px, var(--verde) 34px,
    var(--blanco) 34px, var(--blanco) 68px
  );
}
.filete { height: 8px; }

.textura-diagonal {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(60, 168, 92, 0.07) 0px, rgba(60, 168, 92, 0.07) 1px,
    transparent 1px, transparent 9px
  );
}

/* ===== Cabecera ===== */
.cabecera { position: sticky; top: 0; z-index: 100; background: var(--tinta); color: var(--blanco); }
.cabecera-fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 70px;
}
.marca { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: inherit; }
.marca img { width: 42px; height: 42px; object-fit: contain; }
.marca-texto {
  font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: 1.4rem; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em;
}
.marca-texto small {
  display: block; font-family: 'Karla', sans-serif; font-weight: 500;
  font-size: 0.6rem; letter-spacing: 0.16em; color: var(--verde); margin-top: 4px;
}

.cabecera-derecha { display: flex; align-items: center; gap: 0.9rem; order: 3; }
.idioma {
  font-family: 'Oswald', sans-serif; text-transform: uppercase;
  font-size: 0.76rem; letter-spacing: 0.09em; font-weight: 500;
  color: var(--verde); text-decoration: none;
  border: 1px solid rgba(60, 168, 92, 0.45);
  padding: 0.35rem 0.6rem; border-radius: 2px;
  transition: background 0.15s, color 0.15s;
}
.idioma:hover { background: var(--verde); color: var(--tinta); }

.menu { display: flex; gap: 1.6rem; align-items: center; order: 2; }
.menu a {
  text-decoration: none; font-size: 0.9rem; font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  padding: 0.4rem 0; border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.menu a:hover { color: var(--blanco); }
.menu a[aria-current="page"] { color: var(--blanco); border-bottom-color: var(--verde); }

.menu-boton {
  display: none; background: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--blanco); padding: 0.5rem 0.7rem;
  font: inherit; font-size: 0.85rem; cursor: pointer; border-radius: 2px;
}

@media (max-width: 880px) {
  .menu-boton { display: block; }
  .menu {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--tinta); flex-direction: column; align-items: stretch;
    gap: 0; padding: 0.5rem 1.25rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12); display: none;
  }
  .menu.abierto { display: flex; }
  .menu a { padding: 0.85rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .menu a[aria-current="page"] { border-bottom-color: var(--verde); }
}

/* ===== Portada =====
   Verde institucional sólido: el escudo nunca va sobre las franjas. */
.portada { background: var(--verde); color: var(--tinta); }
.portada-contenido {
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem);
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
.portada-escudo { width: clamp(130px, 20vw, 220px); }
.portada h1 { font-size: clamp(3.2rem, 11vw, 7.5rem); }
.portada-bajada {
  margin: 1.1rem 0 0; max-width: 46ch;
  color: var(--tinta); font-size: clamp(1rem, 1.6vw, 1.1rem);
}
.portada-datos {
  display: flex; flex-wrap: wrap; gap: 0.35rem clamp(1.5rem, 4vw, 3rem);
  padding-bottom: 2.25rem; font-size: 0.85rem; color: rgba(16, 32, 26, 0.9);
}
.portada-datos b { font-weight: 700; }

@media (max-width: 760px) { .portada-contenido { grid-template-columns: 1fr; } }

/* Portadas de páginas interiores: la foto se ve limpia arriba y el texto
   apoya sobre una franja sólida al pie, para no tapar las caras. */
.portada-interior { min-height: min(72vh, 640px); }
.portada-interior .fondo { animation: none; transform: none; background-position: center 34%; }
.portada-interior .velo {
  background: linear-gradient(to top,
    rgba(16,32,26,0.98) 0%, rgba(16,32,26,0.97) 30%,
    rgba(16,32,26,0.62) 39%, rgba(16,32,26,0.12) 58%, rgba(16,32,26,0.08) 100%);
}
.portada-interior .placa { margin-top: auto; margin-bottom: 0.75rem; }
.portada-interior .placa img { width: clamp(76px, 9vw, 112px); box-shadow: 0 0 0 9px var(--tinta); }
.portada-interior .placa h1 { font-size: clamp(2.2rem, 6vw, 3.9rem); }
.portada-interior .placa p.lema { margin-top: 0.6rem; font-size: 0.98rem; }

/* ===== Franja de partido ===== */
.franja-partido { background: var(--tinta); color: var(--blanco); }
.partido-grilla {
  display: grid; grid-template-columns: 1fr 1px 1.35fr;
  gap: clamp(1rem, 3vw, 2.5rem); padding: 1.85rem 0; align-items: center;
}
.partido-grilla > .divisoria { background: rgba(255, 255, 255, 0.14); }
.partido-rotulo {
  font-family: 'Oswald', sans-serif; text-transform: uppercase;
  font-size: 0.78rem; letter-spacing: 0.14em;
  color: var(--verde); font-weight: 500; margin: 0 0 0.7rem;
}
.marcador {
  display: flex; align-items: baseline; gap: 0.9rem;
  font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase;
}
.marcador-equipos { font-size: clamp(1.25rem, 3vw, 1.75rem); line-height: 1.15; }
.marcador-cifras { font-size: clamp(2rem, 5vw, 2.8rem); color: var(--verde); font-weight: 700; }
.partido-pie { font-size: 0.82rem; color: rgba(255, 255, 255, 0.58); margin-top: 0.4rem; }

.proximo-lista { display: grid; gap: 0.7rem; }
.proximo-fila {
  display: grid; grid-template-columns: 58px 1fr auto;
  gap: 1rem; align-items: center; padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.proximo-fila:last-child { border-bottom: 0; padding-bottom: 0; }
.proximo-dia {
  font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: 1.55rem; line-height: 0.95; color: var(--verde); text-transform: uppercase;
}
.proximo-dia span {
  display: block; font-family: 'Karla', sans-serif; font-weight: 500;
  font-size: 0.6rem; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.5);
}
.proximo-rival { font-weight: 700; font-size: 0.98rem; }
.proximo-detalle { font-size: 0.78rem; color: rgba(255, 255, 255, 0.5); }
.proximo-hora { font-size: 0.86rem; color: rgba(255, 255, 255, 0.72); white-space: nowrap; }

@media (max-width: 760px) {
  .partido-grilla { grid-template-columns: 1fr; }
  .partido-grilla > .divisoria { height: 1px; }
}

/* ===== Secciones ===== */
.seccion { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.seccion-verde { background: var(--verde); color: var(--tinta); }
.seccion-tinta { background: var(--tinta); color: var(--blanco); }
.seccion-gris { background: var(--gris-suave); }

.titulo-seccion { font-size: clamp(2rem, 4.6vw, 3.1rem); margin-bottom: 0.5rem; }
.seccion-tinta .titulo-seccion { color: var(--blanco); }
.entrada { max-width: 62ch; color: var(--tinta-suave); margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.seccion-tinta .entrada { color: rgba(255, 255, 255, 0.72); }
.seccion-verde .entrada { color: var(--tinta); }

.cabezal-seccion {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem;
}
.enlace-mas {
  font-family: 'Oswald', sans-serif; text-transform: uppercase;
  font-size: 0.85rem; font-weight: 500; letter-spacing: 0.06em;
  color: var(--verde-hondo); text-decoration: none;
  border-bottom: 2px solid var(--verde); padding-bottom: 3px; white-space: nowrap;
}
.seccion-tinta .enlace-mas { color: var(--verde); border-bottom-color: rgba(60, 168, 92, 0.5); }
.seccion-verde .enlace-mas { color: var(--tinta); border-bottom-color: var(--tinta); }

/* ===== Tabla de posiciones ===== */
.tabla-envoltorio { overflow-x: auto; }
table.posiciones {
  width: 100%; border-collapse: collapse;
  font-variant-numeric: tabular-nums; min-width: 640px;
}
table.posiciones.resumida { min-width: 340px; }
table.posiciones.resumida th:not(:nth-child(2)),
table.posiciones.resumida td:not(:nth-child(2)) { width: 56px; }
table.posiciones.resumida td:nth-child(1),
table.posiciones.resumida th:nth-child(1) { width: 34px; }

table.posiciones th {
  font-family: 'Oswald', sans-serif; text-transform: uppercase;
  text-align: right; font-size: 0.76rem; font-weight: 500;
  letter-spacing: 0.08em; color: var(--tinta-suave);
  padding: 0 0.55rem 0.7rem; border-bottom: 3px solid var(--verde);
}
table.posiciones th:nth-child(1), table.posiciones th:nth-child(2) { text-align: left; }
table.posiciones td {
  padding: 0.7rem 0.55rem; border-bottom: var(--borde);
  text-align: right; font-size: 0.92rem;
}
table.posiciones td:nth-child(1) { width: 34px; color: var(--tinta-suave); text-align: left; }
table.posiciones td:nth-child(2) { text-align: left; font-weight: 500; }
table.posiciones td.pts { font-weight: 700; }

.fila-nuestra { background: var(--verde); color: var(--tinta); }
.fila-nuestra td { border-bottom-color: var(--verde-hondo); }
.fila-nuestra td:nth-child(1) { color: rgba(16, 32, 26, 0.7); }
.fila-nuestra td:nth-child(2) { font-weight: 700; }

.forma { display: inline-flex; gap: 3px; }
.forma i {
  width: 17px; height: 17px; display: grid; place-items: center;
  font-style: normal; font-size: 0.6rem; font-weight: 700;
  border-radius: 2px; color: var(--blanco);
}
.forma i.G { background: var(--verde-hondo); }
.forma i.E { background: #8A928C; }
.forma i.P { background: #9E4A42; }
.fila-nuestra .forma i { box-shadow: 0 0 0 1px rgba(16, 32, 26, 0.25); }

.leyenda-tabla {
  display: flex; gap: 1.5rem; flex-wrap: wrap;
  font-size: 0.76rem; color: var(--tinta-suave); margin-top: 1rem;
}

/* ===== Hitos de historia ===== */
.hitos { display: grid; margin-top: 2rem; }
.hito {
  display: grid; grid-template-columns: 130px 1fr;
  gap: clamp(1rem, 3vw, 2.5rem); padding: 1.6rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16); align-items: start;
}
.hito-anio {
  font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: 2.5rem; line-height: 0.9; color: var(--dorado);
}
.hito h3 { font-size: 1.3rem; margin-bottom: 0.45rem; color: var(--blanco); }
.hito p { margin: 0; color: rgba(255, 255, 255, 0.72); max-width: 60ch; font-size: 0.95rem; }

@media (max-width: 620px) { .hito { grid-template-columns: 1fr; gap: 0.4rem; } }

/* ===== Fichas de datos ===== */
.datos-grilla {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border-top: 3px solid var(--verde);
}
.dato { padding: 1.4rem 1.25rem 1.5rem; border-right: var(--borde); border-bottom: var(--borde); }
.dato:last-child { border-right: 0; }
.dato dt {
  font-family: 'Oswald', sans-serif; text-transform: uppercase;
  font-size: 0.76rem; letter-spacing: 0.1em; font-weight: 500;
  color: var(--tinta-suave); margin-bottom: 0.5rem;
}
.dato dd {
  margin: 0; font-family: 'Oswald', sans-serif; font-weight: 600;
  text-transform: uppercase; font-size: 1.45rem; line-height: 1.1;
}

/* ===== Listas y misión ===== */
.lista-marca { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.lista-marca li { padding-left: 1.4rem; position: relative; }
.lista-marca li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 8px; height: 8px; background: var(--verde);
}
.seccion-verde .lista-marca li::before { background: var(--tinta); }

.cita-mision {
  font-family: 'Oswald', sans-serif; font-weight: 500;
  text-transform: uppercase; font-size: clamp(1.25rem, 2.8vw, 1.8rem);
  line-height: 1.3; max-width: 30ch; margin: 0;
}

.dos-columnas {
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: clamp(1.5rem, 5vw, 4rem); align-items: start;
}
@media (max-width: 760px) { .dos-columnas { grid-template-columns: 1fr; } }

/* ===== Plantel ===== */
.plantel-grupo { margin-bottom: 2.75rem; }
.plantel-grupo h3 {
  font-size: 1.45rem; padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--verde); margin-bottom: 1.25rem;
}
.plantel-grilla {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1px; background: var(--linea); border: 1px solid var(--linea);
}
.jugador { background: var(--blanco); }
.jugador-foto {
  aspect-ratio: 3 / 4; background: var(--verde);
  position: relative; overflow: hidden; display: grid; place-items: center;
}
.jugador-foto img { width: 100%; height: 100%; object-fit: cover; }
.jugador-numero {
  font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: 3.4rem; color: rgba(16, 32, 26, 0.35); line-height: 1;
}
.jugador-info { padding: 0.75rem 0.85rem 1rem; }
.jugador-info strong { display: block; font-size: 0.98rem; font-weight: 700; }
.jugador-info span { font-size: 0.78rem; color: var(--tinta-suave); }

/* ===== Noticias ===== */
.noticias-grilla {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px; background: var(--linea);
  border-top: 3px solid var(--verde); border-left: 1px solid var(--linea);
}
.noticia {
  background: var(--blanco); padding: 1.5rem 1.4rem 1.75rem;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 0.6rem; transition: background 0.15s;
}
.noticia:hover { background: var(--gris-suave); }
.noticia time { font-size: 0.75rem; color: var(--tinta-suave); letter-spacing: 0.05em; }
.noticia h3 { font-size: 1.3rem; }
.noticia p { margin: 0; font-size: 0.9rem; color: var(--tinta-suave); }

/* ===== Bloque de acción ===== */
.accion {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: center; gap: clamp(1.5rem, 4vw, 3rem);
  background: var(--tinta); color: var(--blanco); padding: clamp(2rem, 5vw, 3.25rem);
}
.accion h2 { font-size: clamp(1.9rem, 4.2vw, 2.8rem); color: var(--blanco); }
.accion p { color: rgba(255, 255, 255, 0.72); max-width: 46ch; margin: 0.8rem 0 0; }
.botonera { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.boton {
  display: inline-block; padding: 0.85rem 1.6rem;
  background: var(--verde); color: var(--tinta); text-decoration: none;
  font-family: 'Oswald', sans-serif; text-transform: uppercase;
  font-weight: 500; letter-spacing: 0.05em; font-size: 0.95rem;
  border: 2px solid var(--verde); transition: background 0.15s, color 0.15s;
}
.boton:hover { background: transparent; color: var(--verde); }
.boton-borde { background: transparent; color: var(--blanco); border-color: rgba(255, 255, 255, 0.4); }
.boton-borde:hover { background: var(--blanco); color: var(--tinta); border-color: var(--blanco); }

/* ===== Formulario ===== */
.formulario { display: grid; gap: 1.1rem; max-width: 520px; }
.campo { display: grid; gap: 0.35rem; }
.campo label { font-size: 0.85rem; font-weight: 700; }
.campo input, .campo textarea, .campo select {
  font: inherit; font-size: 0.95rem; padding: 0.7rem 0.8rem;
  border: 1px solid rgba(16, 32, 26, 0.25); background: var(--blanco); border-radius: 2px;
}
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--verde); }
.campo textarea { min-height: 130px; resize: vertical; }

/* ===== Sponsors ===== */
.banda-sponsors {
  background: var(--blanco); border-top: 3px solid var(--verde);
  padding: clamp(2rem, 4vw, 2.75rem) 0;
}
.rotulo-sponsors {
  font-family: 'Oswald', sans-serif; text-transform: uppercase;
  font-size: 0.78rem; letter-spacing: 0.16em; font-weight: 500;
  color: var(--tinta-suave); text-align: center; margin: 0 0 1.6rem;
}
.grilla-sponsors {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: clamp(1.75rem, 5vw, 3.5rem);
}
.grilla-sponsors img { height: 38px; width: auto; }
.grilla-sponsors img.alto { height: 56px; }
@media (max-width: 560px) {
  .grilla-sponsors { gap: 1.5rem 2rem; }
  .grilla-sponsors img { height: 30px; }
  .grilla-sponsors img.alto { height: 44px; }
}

/* ===== Instituciones ===== */
.instituciones {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding-bottom: 1.75rem; margin-bottom: 1.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.instituciones-escudos { display: flex; gap: 0.6rem; }
.instituciones-escudos span {
  background: var(--blanco); border-radius: 3px;
  padding: 7px 9px; display: grid; place-items: center;
}
.instituciones-escudos img { height: 34px; width: auto; }
.instituciones p { margin: 0; font-size: 0.82rem; color: rgba(255, 255, 255, 0.55); max-width: 42ch; }

/* ===== Portada con fotografía =====
   La foto da contexto; el escudo nunca se apoya sobre ella, va en una
   placa sólida de alto contraste como pide el manual. */
.portada-foto {
  position: relative;
  background: var(--tinta);
  min-height: min(92vh, 820px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.portada-foto .fondo {
  position: absolute; inset: -2%;
  background-size: cover;
  background-position: center 30%;
  transform-origin: 52% 46%;
  will-change: transform;
  animation: sobrevuelo 30s linear infinite alternate;
}

/* Sobrevuelo: avance lento con deriva diagonal, como un drone cruzando la cancha. */
@keyframes sobrevuelo {
  from { transform: scale(1.02) translate3d(-2.6%, 1.6%, 0); }
  to   { transform: scale(1.24) translate3d(2.6%, -1.6%, 0); }
}

.banda-foto .fondo {
  animation: sobrevuelo-corto 38s linear infinite alternate;
  will-change: transform;
}
@keyframes sobrevuelo-corto {
  from { transform: scale(1.02) translate3d(2.2%, 0, 0); }
  to   { transform: scale(1.16) translate3d(-2.2%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .portada-foto .fondo, .banda-foto .fondo { animation: none; transform: none; }
}
.portada-foto .velo {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top,
      rgba(16,32,26,0.97) 0%, rgba(16,32,26,0.93) 18%,
      rgba(16,32,26,0.55) 42%, rgba(16,32,26,0.22) 68%, rgba(16,32,26,0.28) 100%),
    linear-gradient(rgba(16,32,26,0.12), rgba(16,32,26,0.12));
}
.portada-foto .marco { position: relative; z-index: 2; width: min(100% - 2.5rem, var(--marco)); }

.placa {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: center;
  max-width: 860px;
  margin: clamp(4rem, 16vw, 11rem) 0 clamp(1.25rem, 3vw, 2rem);
}
.placa img {
  width: clamp(96px, 14vw, 168px);
  border-radius: 50%;
  background: var(--tinta);
  box-shadow: 0 0 0 12px var(--tinta);
}
.placa-kicker {
  font-family: 'Oswald', sans-serif; text-transform: uppercase;
  font-size: clamp(0.72rem, 1.5vw, 0.85rem); letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.9); margin: 0 0 0.6rem; font-weight: 500;
  text-shadow: 0 1px 12px rgba(16, 32, 26, 0.8);
}
.placa h1 {
  font-size: clamp(3rem, 10vw, 6.8rem);
  color: var(--blanco);
  line-height: 0.9;
}
.placa p.lema {
  margin: 1rem 0 0; max-width: 40ch;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(0.98rem, 1.5vw, 1.08rem);
}

.pie-foto {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 0.75rem;
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
  font-size: 0.8rem; color: rgba(255, 255, 255, 0.55);
}
.pie-foto b { color: rgba(255, 255, 255, 0.9); font-weight: 700; }
.pie-foto .sello {
  font-family: 'Oswald', sans-serif; text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 0.4rem 0.75rem;
}

@media (max-width: 760px) {
  .placa { grid-template-columns: 1fr; gap: 1rem; }
  .portada-foto { min-height: auto; }
}

/* ===== Banda fotográfica intermedia ===== */
.banda-foto {
  position: relative;
  min-height: clamp(340px, 46vw, 520px);
  display: flex; align-items: center;
  background: var(--tinta);
  overflow: hidden;
}
.banda-foto .fondo { position: absolute; inset: -2%; background-size: cover; background-position: center 60%; }
.banda-foto .velo {
  position: absolute; inset: 0;
  background: linear-gradient(260deg, rgba(16,32,26,0.9) 0%, rgba(16,32,26,0.68) 42%, rgba(16,32,26,0.2) 100%);
}
.banda-foto .marco { position: relative; z-index: 2; }
.banda-cita {
  margin-left: auto; max-width: 30ch; text-align: right;
  font-family: 'Oswald', sans-serif; font-weight: 500; text-transform: uppercase;
  font-size: clamp(1.3rem, 3.2vw, 2.2rem); line-height: 1.25;
  color: var(--blanco);
}
.banda-cita span { display: block; margin-top: 1rem; font-family: 'Karla', sans-serif;
  text-transform: none; font-size: 0.85rem; font-weight: 400; color: rgba(255,255,255,0.6); }

/* ===== Figura del estadio ===== */
.figura-estadio { margin: 0 0 clamp(1.75rem, 4vw, 2.5rem); }
.figura-estadio img {
  width: 100%; height: auto; display: block;
  border-top: 4px solid var(--verde);
}
.figura-estadio figcaption {
  margin-top: 0.7rem; font-size: 0.82rem; color: var(--tinta-suave);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.figura-estadio figcaption b { color: var(--tinta); font-weight: 700; }

.seccion-tinta .figura-estadio figcaption { color: rgba(255, 255, 255, 0.55); }
.seccion-tinta .figura-estadio figcaption b { color: rgba(255, 255, 255, 0.85); }
.figura-ancha { margin-top: clamp(2rem, 5vw, 3rem); }

/* ===== Redes ===== */
.redes { display: flex; gap: 0.6rem; margin-top: 1rem; }
.redes a {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 3px;
  color: rgba(255, 255, 255, 0.75);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.redes a:hover { background: var(--verde); color: var(--tinta); border-color: var(--verde); }
.redes svg { width: 19px; height: 19px; fill: currentColor; display: block; }

.redes-claro a { border-color: rgba(16, 32, 26, 0.22); color: var(--tinta); }
.redes-claro a:hover { background: var(--verde); border-color: var(--verde); color: var(--tinta); }

/* ===== Tiras y galerías de fotos ===== */
.tira-fotos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2px; margin-top: clamp(1.5rem, 4vw, 2.25rem);
}
.tira-fotos figure { margin: 0; }
.tira-fotos img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/2; display: block; }
.tira-fotos figcaption {
  font-size: 0.78rem; color: var(--tinta-suave); margin-top: 0.55rem;
}
.seccion-tinta .tira-fotos figcaption { color: rgba(255,255,255,0.55); }

.galeria-accion {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px; border-top: 3px solid var(--verde); padding-top: 2px;
}
@media (max-width: 760px) { .galeria-accion { grid-template-columns: repeat(2, 1fr); } }
.galeria-accion img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; display: block;
  transition: filter 0.2s;
}
.galeria-accion a:hover img, .galeria-accion figure:hover img { filter: brightness(1.06); }

/* ===== Nómina de la comisión ===== */
.nomina { display: grid; gap: 0; margin: 0 0 2rem; border-top: 3px solid var(--verde); }
.nomina div {
  display: grid; grid-template-columns: minmax(140px, 22%) 1fr;
  gap: 1rem; padding: 0.85rem 0.2rem; border-bottom: var(--borde); align-items: baseline;
}
.nomina dt {
  font-family: 'Oswald', sans-serif; text-transform: uppercase;
  font-size: 0.8rem; letter-spacing: 0.08em; font-weight: 500; color: var(--tinta-suave);
}
.nomina dd { margin: 0; font-weight: 500; }
@media (max-width: 620px) {
  .nomina div { grid-template-columns: 1fr; gap: 0.15rem; }
}

.nomina-columnas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem); margin-top: 2.5rem;
}
.nomina-columnas h3 {
  font-size: 1.05rem; color: var(--verde-hondo);
  padding-bottom: 0.5rem; border-bottom: 2px solid var(--verde); margin-bottom: 1rem;
}
.nomina-columnas ol { margin: 0; padding-left: 1.3rem; display: grid; gap: 0.55rem; }
.nomina-columnas li { padding-left: 0.2rem; }
.nomina-columnas li::marker { color: var(--verde-hondo); font-weight: 700; }

/* ===== Pie ===== */
.pie {
  background: var(--tinta); color: rgba(255, 255, 255, 0.62);
  padding: clamp(2.5rem, 5vw, 3.5rem) 0 2rem; font-size: 0.88rem;
}
.pie-grilla {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 2rem;
  padding-bottom: 2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
@media (max-width: 880px) {
  .pie-grilla { grid-template-columns: 1fr 1fr; }
  .pie-escudo { grid-column: 1 / -1; }
}
@media (max-width: 480px) { .pie-grilla { grid-template-columns: 1fr; } }

.pie h4 {
  font-family: 'Oswald', sans-serif; text-transform: uppercase;
  font-size: 0.8rem; letter-spacing: 0.12em; font-weight: 500;
  color: var(--verde); margin: 0 0 0.9rem;
}
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--blanco); }
.pie-escudo { display: flex; gap: 0.9rem; align-items: flex-start; }
.pie-escudo img { width: 54px; }
.pie-legal {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  padding-top: 1.5rem; font-size: 0.78rem; color: rgba(255, 255, 255, 0.42);
}

/* ===== Utilidades ===== */
.cargando { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; padding: 1rem 0; }
.seccion .cargando { color: var(--tinta-suave); }
.vacio {
  border: 1px dashed rgba(16, 32, 26, 0.25); padding: 2.5rem 1.5rem;
  text-align: center; color: var(--tinta-suave); font-size: 0.92rem;
}
.seccion-tinta .vacio { border-color: rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.6); }