/*
 * Onda Ground — lo que theme.json no alcanza a expresar.
 *
 * El sitio se compromete con un solo mundo visual: negro, alto contraste,
 * trama de puntos y la onda. Es la estética que ya tienen en el feed, y en una
 * pieza de comunicación conviene comprometerse en lugar de ofrecer dos modos.
 */

/* ── El logotipo ──────────────────────────────────────────────────────────── */

.og-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.16em;
  font-family: 'Archivo Black', Impact, 'Arial Black', sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 1;
  white-space: nowrap;
}
.og-logo svg {
  display: block;
  height: 0.62em;
  width: 1.85em;
  overflow: visible;
}
.og-logo svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

/* ── La onda como divisor ─────────────────────────────────────────────────── */

.og-regla {
  display: block;
  width: 100%;
  height: 14px;
  overflow: visible;
  margin: var(--wp--preset--spacing--30) 0;
}
.og-regla path {
  fill: none;
  stroke: var(--wp--preset--color--linea);
  stroke-width: 1.6;
  stroke-linecap: round;
}

/* ── La trama de puntos ───────────────────────────────────────────────────── */

.og-trama {
  position: relative;
  isolation: isolate;
}
.og-trama::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(244, 242, 236, 0.16) 1.1px, transparent 0);
  background-size: 7px 7px;
  -webkit-mask-image: linear-gradient(155deg, #000 0%, rgba(0, 0, 0, 0.3) 55%, transparent 88%);
          mask-image: linear-gradient(155deg, #000 0%, rgba(0, 0, 0, 0.3) 55%, transparent 88%);
}

/* ── La tabla de puntos ───────────────────────────────────────────────────── */

.og-puntos {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--wp--preset--color--linea);
}
.og-puntos li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--wp--preset--color--linea);
}
.og-puntos__que {
  font-family: 'Archivo Black', Impact, sans-serif;
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.og-puntos__det {
  grid-column: 1;
  font-size: 0.875rem;
  color: var(--wp--preset--color--humo);
  line-height: 1.45;
}
.og-puntos__pt {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--wp--preset--color--verde);
  white-space: nowrap;
}

/* ── Detalles de lectura ──────────────────────────────────────────────────── */

.og-eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--wp--preset--color--humo);
}

.og-guia { max-width: 34em; }

/* El listado de disciplinas: se lee como un line-up de flyer. */
.og-lineup {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: 'Archivo Black', Impact, sans-serif;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 4vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.og-lineup li::after {
  content: '~';
  margin-left: 0.9rem;
  color: var(--wp--preset--color--humo);
}
.og-lineup li:last-child::after { content: none; }

/* Tarjetas de fecha */
.og-fecha {
  border: 1px solid var(--wp--preset--color--linea);
  padding: 1.25rem 1.4rem;
  background: var(--wp--preset--color--carbon);
}
.og-fecha h3 { margin: 0.4rem 0 0; }
.og-fecha p { margin: 0.5rem 0 0; color: var(--wp--preset--color--humo); font-size: 0.9375rem; }

/* Foco visible, siempre: se navega mucho con el teclado en escritorio. */
:where(a, button, input, textarea, summary):focus-visible {
  outline: 2px solid var(--wp--preset--color--verde);
  outline-offset: 3px;
}

/* Las imágenes del archivo, en blanco y negro como el feed; el color aparece
   al pasar por encima, que es cuando alguien se detuvo a mirar. */
.og-archivo img {
  filter: grayscale(1) contrast(1.08);
  transition: filter 0.35s ease;
}
.og-archivo img:hover { filter: grayscale(0) contrast(1); }

@media (prefers-reduced-motion: reduce) {
  .og-archivo img { transition: none; }
}

/* El menú del teléfono abierto: fondo sólido, no translúcido, para que el
   texto de abajo no compita con el del menú. */
.wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--wp--preset--color--negro) !important;
}