/* ==========================================================================
   Tender la Mano · Dirección A · hero v3 (11/10/2026, María): «copia el hero
   de las constelaciones [ficha de eventos] pero en tono gris oscuro y las
   constelaciones como están, ubicadas como si fuera una familia».

   1) COPIA del bloque HERO de /assets/css/eventos.css (ficha de eventos, en
      vivo): mismas reglas y mismas medidas. Los colores fijos del original se
      han cambiado por variables CSS cuyo valor por defecto es EXACTAMENTE el
      del original, para que la Fase 2 pueda usar este bloque también en la
      ficha sin cambiarla.
   2) .hero-gris: el tono gris oscuro (grafito neutro, croma 0) que pide María
      para que case con las fotos en blanco y negro.
   ========================================================================== */

/* ---------- 1) Copia parametrizada del hero de eventos.css ---------- */
.event-hero {
  position: relative;
  overflow: hidden;
  min-height: min(100dvh, 880px);
  display: flex;
  align-items: flex-end;
  padding-block: var(--space-2xl, 6rem) var(--space-xl, 4rem);
  background: radial-gradient(120% 90% at 50% -10%, var(--hero-cielo-alto, oklch(20% 0.05 264)) 0%, var(--color-bg, oklch(12.5% 0.026 264)) 60%);
}

.event-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.event-hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--hero-velo-0, oklch(9% 0.02 264 / 0%)) 0%, var(--hero-velo-55, oklch(9% 0.02 264 / 15%)) 55%, var(--color-bg, oklch(12.5% 0.026 264)) 100%);
  pointer-events: none;
}

.event-hero-content {
  position: relative;
  z-index: 1;
  width: min(100% - 2.5rem, 760px);
  margin-inline: auto;
  text-align: left;
}

.event-hero-content h1 {
  color: var(--color-ink, oklch(96% 0.008 264));
  margin-bottom: var(--space-sm, 1rem);
  text-wrap: balance;
}

.event-hero-content .lede {
  color: var(--color-ink-muted, oklch(80% 0.018 264));
  margin-bottom: var(--space-md, 1.5rem);
  max-width: 56ch;
}

.event-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* ---------- 2) Gris oscuro para la dirección A ---------- */
.hero-gris {
  --color-bg: oklch(0.25 0 0);
  --hero-cielo-alto: oklch(0.34 0 0);
  --hero-velo-0: oklch(0.2 0 0 / 0%);
  --hero-velo-55: oklch(0.2 0 0 / 15%);
  --color-ink: oklch(0.97 0 0);
  --color-ink-muted: oklch(0.86 0 0);
}

.hero-gris h1 { max-width: 16ch; }

/* Botones de A sobre el gris: principal blanco con texto verde (7,4:1);
   secundario con borde y texto blancos. */
.hero-gris .btn--primary { background: var(--c-bg); color: var(--c-accent); }
.hero-gris .btn--primary:hover { background: var(--c-accent-soft); color: var(--c-accent-soft-ink); }
.hero-gris .btn--secondary { color: var(--color-ink); border-color: var(--color-ink); }
.hero-gris .btn--secondary:hover { background: var(--color-ink); color: var(--color-bg); }
.hero-gris :focus-visible { outline-color: var(--color-ink); }

/* Foto candidata, debajo del hero */
.hero-foto { padding-top: var(--s-6); }

/* Fotos en blanco y negro repartidas (una o dos por página) */
.foto-bn { margin: 0; }
.foto-bn img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-card); filter: grayscale(1) contrast(1.05); }
.foto-bn--ilustracion img { aspect-ratio: auto; object-fit: contain; border: var(--border); background: var(--c-bg); }
.foto-bn--debajo { margin-top: var(--s-6); }
.ev-hero__intro .foto-bn { margin-top: var(--s-2); }
.intro-foto { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 60rem) { .intro-foto { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }

/* Con la foto debajo de los botones, la tarjeta de precio no debe estirarse */
.two-col > .price { align-self: start; }

/* Imagen del hero en el índice y en /sistema/ */
.hero-muestra { margin: 0; }
.hero-muestra img { width: 100%; border-radius: var(--r-card); border: var(--border); }

/* El hero cabe en la pantalla con la cabecera (el original ocupa 100dvh). */
.hero-gris { min-height: min(calc(100dvh - 7rem), 820px); }