/* ==========================================================================
   Club de Ajedrez Grandama — sistema visual
   --------------------------------------------------------------------------
   Dirección: el tablero como RETÍCULA DE COMPOSICIÓN, no como fondo decorativo.
   El espacio se subdivide en casillas a distintas escalas y el contenido se
   apoya en ellas (referencia: identidad del World Schools Team Chess
   Championship, estudio ONY). El color se usa con la disciplina del rebranding
   de World Chess de Pentagram: dos colores en oposición y nada más — aquí el
   azul y el amarillo del propio escudo del club. Se evita a propósito el verde
   y la madera de chess.com/lichess.

   Reglas de rol que no se rompen:
   - Azul: estructura y superficies grandes.
   - Amarillo: acento escaso. Marca lo que importa (categoría, dato, CTA).
     Nunca es fondo de una sección entera ni color de texto largo.
   - Las casillas son estructura. Si no ordenan contenido, no se usan.
   ========================================================================== */

:root {
  --azul: #0b4c96;
  --azul-hondo: #06305f;
  --azul-vivo: #1668c4;
  --amarillo: #e2df49;
  --amarillo-hondo: #b8b52e;

  --tinta: #14181d;
  --tinta-suave: #565e68;
  --linea: #dfe3e8;
  --hueso: #f4f5f7;
  --blanco: #fff;

  --ancho: 1200px;
  --casilla: 56px;          /* módulo base de la retícula del tablero */
  --transicion: 160ms cubic-bezier(.2, .7, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}

/* --- Tipografía: grotesca pesada para cartel, neutra para lectura --------- */

h1, h2, h3, .display {
  font-family: "Archivo Black", Archivo, Impact, sans-serif;
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.022em;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0 0 .5em;
  color: var(--azul);
}

h1 { font-size: clamp(2.4rem, 7vw, 4.6rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.7rem); }
h3 { font-size: clamp(1.1rem, 1.9vw, 1.35rem); letter-spacing: -.012em; }

p { margin: 0 0 1.15em; }
strong { font-weight: 700; color: var(--azul); }

a { color: var(--azul); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--azul-vivo); }

img { max-width: 100%; height: auto; display: block; }

[hidden] { display: none !important; }

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

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.salta-al-contenido {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--azul); color: var(--blanco); padding: .8rem 1.3rem;
  font-weight: 700;
}
.salta-al-contenido:focus { left: 0; }

/* --- El motivo: casillas de tablero ---------------------------------------
   Una sola utilidad reutilizable. Es la textura estructural del sitio.       */

.tablero {
  background-image:
    linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%),
    linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%);
  background-size: calc(var(--casilla) * 2) calc(var(--casilla) * 2);
  background-position: 0 0, var(--casilla) var(--casilla);
}

/* --- Cabecera ------------------------------------------------------------- */

.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
}
.cabecera__interior {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 82px;
}

.marca { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.marca img { width: 48px; }
.marca__nombre {
  font-family: "Archivo Black", sans-serif;
  font-size: .95rem; line-height: 1.05;
  text-transform: uppercase; letter-spacing: -.01em;
  color: var(--azul);
}
.marca__nombre span {
  display: block; margin-top: .2rem;
  font-family: Archivo, sans-serif; font-weight: 600;
  font-size: .62rem; letter-spacing: .18em; color: var(--tinta-suave);
}

.menu { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.menu a {
  display: block; padding: .5rem .85rem;
  font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; color: var(--tinta);
  position: relative;
}
.menu a:hover { color: var(--azul); }
/* El indicador de página activa es una casilla amarilla bajo el enlace:
   el acento marca posición, no decora. */
.menu a[aria-current="page"] { color: var(--azul); }
.menu a[aria-current="page"]::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .1rem;
  height: 4px; background: var(--amarillo);
}

.menu-boton {
  display: none; background: none; border: 2px solid var(--azul);
  padding: .4rem .55rem; cursor: pointer; color: var(--azul);
}
.menu-boton svg { width: 22px; height: 22px; display: block; }

/* --- Portada --------------------------------------------------------------
   Bloque azul dividido en dos casillas: el rótulo y el escudo.              */

.portada { background: var(--azul); color: var(--blanco); overflow: hidden; position: relative; }
/* Las casillas del tablero como textura de fondo, muy tenues: aquí sí son
   atmósfera, porque quien ordena el contenido es la retícula de dos columnas. */
.portada::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  --casilla: 68px;
  background-image:
    linear-gradient(45deg, rgb(255 255 255 / 5%) 25%, transparent 25%, transparent 75%, rgb(255 255 255 / 5%) 75%),
    linear-gradient(45deg, rgb(255 255 255 / 5%) 25%, transparent 25%, transparent 75%, rgb(255 255 255 / 5%) 75%);
  background-size: calc(var(--casilla) * 2) calc(var(--casilla) * 2);
  background-position: 0 0, var(--casilla) var(--casilla);
}
/* Franja ajedrezada amarilla que cierra la portada contra el blanco. */
.portada::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px;
  --casilla: 10px;
  background-image:
    linear-gradient(45deg, var(--amarillo) 25%, transparent 25%, transparent 75%, var(--amarillo) 75%),
    linear-gradient(45deg, var(--amarillo) 25%, transparent 25%, transparent 75%, var(--amarillo) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}
.portada__interior {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.35fr .65fr;
  align-items: center; gap: 3rem;
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.portada__etiqueta {
  display: inline-block;
  background: var(--amarillo); color: var(--azul-hondo);
  font-weight: 800; font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; padding: .3rem .7rem; margin-bottom: 1.4rem;
}
.portada h1 { color: var(--blanco); margin-bottom: 1.1rem; }
.portada__entrada {
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  max-width: 46ch; color: rgb(255 255 255 / 86%); margin-bottom: 2rem;
}
.portada__escudo {
  width: min(240px, 100%);
  background: var(--blanco);
  padding: 1.4rem;
  justify-self: end;
}

/* --- Botones -------------------------------------------------------------- */

.acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; }

.boton {
  display: inline-block; padding: .85rem 1.6rem; border: 2px solid transparent;
  font-family: Archivo, sans-serif; font-weight: 700;
  font-size: .84rem; letter-spacing: .07em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.boton--acento { background: var(--amarillo); color: var(--azul-hondo); }
.boton--acento:hover { background: var(--blanco); color: var(--azul-hondo); }
.boton--linea { border-color: rgb(255 255 255 / 55%); color: var(--blanco); }
.boton--linea:hover { background: var(--blanco); color: var(--azul); }
.boton--azul { background: var(--azul); color: var(--blanco); }
.boton--azul:hover { background: var(--azul-hondo); color: var(--blanco); }

/* --- Secciones ------------------------------------------------------------ */

.seccion { padding-block: clamp(3.25rem, 6.5vw, 5.5rem); }
.seccion--hueso { background: var(--hueso); }
.seccion--azul { background: var(--azul); color: var(--blanco); }
.seccion--azul h2 { color: var(--blanco); }

/* Encabezado de sección: número de casilla + título, alineado a la izquierda
   como en un cuadro de torneo. Nada centrado: la retícula manda. */
.rotulo {
  display: flex; align-items: baseline; gap: 1rem;
  padding-bottom: 1rem; margin-bottom: 2.5rem;
  border-bottom: 3px solid var(--azul);
}
.seccion--azul .rotulo { border-bottom-color: var(--amarillo); }
.rotulo__indice {
  font-family: "Archivo Black", sans-serif;
  font-size: .8rem; letter-spacing: .1em;
  background: var(--amarillo); color: var(--azul-hondo);
  padding: .25rem .5rem; flex: none;
}
.rotulo h2, .rotulo h1 { margin: 0; }
.rotulo__nota {
  margin: 0 0 0 auto; font-size: .88rem; color: var(--tinta-suave);
  text-align: right; max-width: 34ch;
}
.seccion--azul .rotulo__nota { color: rgb(255 255 255 / 75%); }

.entrada-texto { max-width: 62ch; font-size: 1.1rem; }
.seccion--azul .entrada-texto { color: rgb(255 255 255 / 88%); }

/* --- Cita ----------------------------------------------------------------- */

.cita {
  margin: 0; padding-block: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--linea);
}
.cita blockquote {
  margin: 0; max-width: 22ch;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(1.5rem, 3.6vw, 2.6rem);
  line-height: 1.02; letter-spacing: -.02em;
  text-transform: uppercase; color: var(--azul);
}
/* El amarillo marca la palabra que sostiene la frase. Un único acento. */
.cita blockquote em { font-style: normal; background: var(--amarillo); padding: 0 .12em; }
.cita figcaption {
  margin-top: 1.1rem; font-weight: 700; font-size: .78rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-suave);
}

/* --- Bloques de contenido -------------------------------------------------
   Casillas literales: bordes compartidos, sin sombras ni redondeos.         */

.casillas {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  border: 1px solid var(--linea);
}
.casilla-bloque {
  padding: 2rem 1.75rem;
  border-right: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  background: var(--blanco);
}
.casilla-bloque:nth-child(even) { background: var(--hueso); }
.casilla-bloque h3 { margin-bottom: .55rem; }
.casilla-bloque p:last-child { margin-bottom: 0; }
.casilla-bloque__indice {
  display: block; font-family: "Archivo Black", sans-serif;
  font-size: 2.2rem; line-height: 1; color: var(--linea); margin-bottom: .9rem;
}

/* --- Colaboradores: retícula ajedrezada real ------------------------------ */

.colaboradores {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0; list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--linea);
}
.colaboradores li {
  display: grid; place-items: center; min-height: 132px; padding: 1.5rem;
  border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
  background: var(--blanco);
  transition: background var(--transicion);
}
.colaboradores li:nth-child(odd) { background: var(--hueso); }
.colaboradores li:hover { background: var(--amarillo); }
.colaboradores img {
  max-height: 76px; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .72;
  transition: filter var(--transicion), opacity var(--transicion);
}
.colaboradores li:hover img { filter: none; opacity: 1; }

/* --- Noticias: cuadro de torneo -------------------------------------------
   Filas, no tarjetas. Se lee como un tableau de resultados.                  */

.filtros {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: 0 0 1.75rem; padding: 0; list-style: none;
}
.filtros button {
  font-family: Archivo, sans-serif; font-weight: 700;
  font-size: .76rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .5rem 1rem; border: 2px solid var(--azul);
  background: transparent; color: var(--azul); cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}
.filtros button:hover { background: var(--hueso); }
.filtros button[aria-pressed="true"] { background: var(--azul); color: var(--blanco); }

.noticias { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--azul); }

.noticia {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  align-items: baseline; gap: 0 1.75rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--linea);
  transition: background var(--transicion);
}
.noticia:hover { background: var(--hueso); }
.noticia__fecha {
  font-family: "Archivo Black", sans-serif;
  font-size: .84rem; letter-spacing: .02em; color: var(--tinta-suave);
  text-transform: uppercase; margin: 0; padding-left: .4rem;
}
.noticia__cuerpo { min-width: 0; }
.noticia__etiqueta {
  display: inline-block; margin-bottom: .5rem;
  font-weight: 800; font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--azul-hondo);
  background: var(--amarillo); padding: .18rem .5rem;
}
.noticia h3 { margin: 0 0 .4rem; }
.noticia h3 a { text-decoration: none; }
.noticia h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.noticia__extracto { margin: 0; font-size: .97rem; color: var(--tinta-suave); max-width: 62ch; }
.noticia__flecha {
  font-family: "Archivo Black", sans-serif; font-size: 1.4rem;
  color: var(--azul); align-self: center; padding-right: .4rem;
}

/* --- Artículo ------------------------------------------------------------- */

.articulo { padding-block: clamp(2.5rem, 5vw, 4rem); }
.articulo__cabecera {
  max-width: 800px; padding-bottom: 2rem; margin-bottom: 2.5rem;
  border-bottom: 3px solid var(--azul);
}
.articulo__meta {
  margin: 0 0 .9rem; font-weight: 800; font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave);
}
.articulo__meta span { background: var(--amarillo); color: var(--azul-hondo); padding: .18rem .5rem; }
.articulo__cuerpo { max-width: 72ch; }
.articulo__cuerpo h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-top: 2.5rem; }
.articulo__cuerpo h3 {
  font-family: Archivo, sans-serif; font-weight: 800;
  font-size: .82rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--tinta-suave); margin-top: 2rem; margin-bottom: .4rem;
}
.articulo__cuerpo ul, .articulo__cuerpo ol { padding-left: 1.2rem; margin-bottom: 1.3rem; }
.articulo__cuerpo li { margin-bottom: .3rem; }
.articulo__cuerpo li::marker { color: var(--azul); }

.lista-columnas { columns: 2; column-gap: 2.5rem; }
@media (width < 640px) { .lista-columnas { columns: 1; } }

.tabla-premios { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: .97rem; }
.tabla-premios caption {
  text-align: left; padding-bottom: .7rem;
  font-weight: 800; font-size: .76rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--tinta-suave);
}
.tabla-premios th, .tabla-premios td { padding: .55rem .85rem; text-align: left; border-bottom: 1px solid var(--linea); }
.tabla-premios thead th {
  background: var(--azul); color: var(--blanco);
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
}
.tabla-premios tbody tr:nth-child(odd) { background: var(--hueso); }
.tabla-premios tfoot td {
  font-family: "Archivo Black", sans-serif; color: var(--azul);
  border-top: 3px solid var(--azul); border-bottom: 0;
}

.aviso {
  border-left: 6px solid var(--amarillo);
  background: var(--hueso); padding: 1.1rem 1.35rem;
  font-size: .94rem; margin-bottom: 1.5rem;
}
.aviso p:last-child { margin-bottom: 0; }

/* --- Contacto ------------------------------------------------------------- */

.contacto-rejilla {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0; border: 1px solid var(--linea);
}
.contacto-bloque {
  padding: 2.5rem 2rem;
  border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
}
.contacto-bloque:nth-child(even) { background: var(--hueso); }
.contacto-bloque__icono { width: 30px; height: 30px; color: var(--azul); margin-bottom: 1.1rem; }
.contacto-bloque h2 {
  font-family: Archivo, sans-serif; font-weight: 800;
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-suave); margin-bottom: .5rem;
}
.contacto-bloque__dato {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem); line-height: 1.05;
  text-transform: uppercase; color: var(--azul); margin: 0 0 .6rem;
}
.contacto-bloque__dato a { text-decoration: none; }
.contacto-bloque__dato a:hover { text-decoration: underline; }
.contacto-bloque__nota { margin: 0; font-size: .93rem; color: var(--tinta-suave); }

/* --- Pie ------------------------------------------------------------------ */

.pie { background: var(--azul-hondo); color: rgb(255 255 255 / 82%); }
.pie__franja { height: 10px; color: var(--amarillo); }
.pie__interior { padding-block: 3rem 1.5rem; }
.pie a { color: var(--amarillo); }
.pie__rejilla {
  display: grid; gap: 2.5rem; grid-template-columns: 1.5fr 1fr 1fr;
  padding-bottom: 2.25rem;
}
.pie h2 {
  font-family: Archivo, sans-serif; font-weight: 800;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--amarillo); margin-bottom: 1rem;
}
.pie__marca { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.pie__marca img { width: 54px; background: var(--blanco); padding: .35rem; }
.pie__marca strong {
  font-family: "Archivo Black", sans-serif; color: var(--blanco);
  font-size: 1rem; text-transform: uppercase; line-height: 1.1;
}
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: .94rem; }
.pie ul a { text-decoration: none; }
.pie ul a:hover { text-decoration: underline; }
.pie__legal {
  border-top: 1px solid rgb(255 255 255 / 16%); padding-top: 1.4rem;
  display: flex; flex-wrap: wrap; gap: .7rem 1.5rem; justify-content: space-between;
  font-size: .84rem; color: rgb(255 255 255 / 62%);
}

/* --- Adaptación a pantallas pequeñas -------------------------------------- */

@media (width < 900px) {
  .pie__rejilla { grid-template-columns: 1fr; gap: 2rem; }
}

@media (width < 860px) {
  .menu-boton { display: block; }
  .cabecera { position: relative; }
  .menu {
    position: absolute; inset: 100% 0 auto; display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--blanco); border-bottom: 4px solid var(--amarillo);
    box-shadow: 0 14px 30px rgb(6 48 95 / 14%); padding: .25rem 1.5rem 1rem;
  }
  .menu[data-abierto="true"] { display: flex; }
  .menu a { padding: .9rem .2rem; border-bottom: 1px solid var(--linea); }
  .menu a[aria-current="page"]::after { left: .2rem; right: auto; width: 26px; bottom: .55rem; }
  .menu li:last-child a { border-bottom: 0; }

  .portada__interior { grid-template-columns: 1fr; }
  .portada__escudo { justify-self: start; width: min(180px, 46vw); order: -1; }

  .rotulo { flex-wrap: wrap; }
  .rotulo__nota { margin-left: 0; text-align: left; width: 100%; }
}

@media (width < 620px) {
  .noticia { grid-template-columns: 1fr; gap: .5rem; padding: 1.4rem 0; }
  .noticia__fecha { padding-left: 0; }
  .noticia__flecha { display: none; }
}

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