/* Estilos de la página de detalle de evento (web/evento/<slug>.html).
   Reutiliza las variables de color de styles.css. */

.migas {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 22px 0 0;
  font-size: 0.85rem;
  color: var(--texto-suave);
}
.migas-marca {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--texto);
  font-weight: 800;
  letter-spacing: 0.03em;
}
.migas-marca em { font-style: normal; color: var(--acento); }
.migas-marca:hover em { color: var(--acento-alto); }
.migas-sep { opacity: 0.6; }

.evento-hero {
  position: relative;
  padding: 26px 0 30px;
  border-bottom: 1px solid var(--borde);
  margin-bottom: 26px;
}

/* Banner del evento (2026-09-09): la misma imagen con la que la gente entró
   desde la portada. No aporta dato nuevo, pero da continuidad — antes se
   pasaba de una tarjeta con foto a una página de puro texto.

   El degradado del color de la categoría va DEBAJO del <img>, así que si la
   imagen no existe, o muere, o el navegador la quita (onerror), lo que queda
   es un banner intencional y no un hueco. */
.evento-banner {
  position: relative;
  height: 240px;
  margin: 0 0 22px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--borde);
  /* Se ve cuando no hay imagen, o si la que había murió. */
  background:
    radial-gradient(120% 130% at 20% 0%, color-mix(in srgb, var(--tono, #4f8cff) 27%, transparent) 0%, transparent 62%),
    linear-gradient(160deg, #1c2840, #141c2c);
}
.banner-fotos { position: absolute; inset: 0; }

/* Copia difuminada que rellena los lados y aporta el color del cartel.
   El scale evita que el desenfoque deje los bordes transparentes. */
.banner-fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(26px) saturate(1.5);
  transform: scale(1.18);
  opacity: 0.55;
}

/* La imagen de verdad: COMPLETA y sin agrandar. `contain` la ajusta al alto
   del banner, y como todas miden 200px o más, nunca se estira: por eso ya no
   se ve pixeleada. Y al no recortar, no se le corta el logo a nadie. */
.banner-frente {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  object-fit: contain;
  /* Sin esto, un cartel muy chico se vería como una estampilla perdida. */
  padding: 14px 0;
  box-sizing: border-box;
}

/* Velo inferior: separa el banner del título sin tapar el cartel. */
.evento-banner::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  background: linear-gradient(180deg, rgba(10, 14, 24, 0), rgba(10, 14, 24, .45));
  pointer-events: none;
}

@media (max-width: 640px) {
  .evento-banner { height: 170px; border-radius: 12px; }
  .banner-frente { padding: 10px 0; }
}
.evento-kicker {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--acento-2);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 14px;
}
.evento-hero h1 {
  font-size: clamp(1.9rem, 4.6vw, 2.9rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.evento-sub { color: var(--texto-suave); font-size: 1.05rem; line-height: 1.7; }

.datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.dato {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 16px 18px;
  transition: border-color 0.18s;
}
.dato:hover { border-color: rgba(79, 140, 255, 0.35); }
.dato-etiqueta {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--texto-suave);
  margin-bottom: 6px;
}
.dato-valor { font-size: 1.05rem; font-weight: 600; }
.dato-valor a { color: var(--acento); text-decoration: none; }
.dato-valor a:hover { text-decoration: underline; }

.acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 10px;
  font-family: inherit;
  font-weight: 700;
  text-decoration: none;
  font-size: 0.92rem;
  border: 1px solid var(--borde);
  color: var(--texto);
  background: transparent;
  transition: border-color 0.18s, color 0.18s, background 0.18s,
              transform 0.18s, box-shadow 0.18s;
}
.btn:hover { border-color: var(--acento); color: var(--acento-alto); transform: translateY(-2px); }
.btn-primario { background: var(--acento); border-color: var(--acento); color: #fff; }
.btn-primario:hover {
  background: var(--acento-alto);
  border-color: var(--acento-alto);
  color: #fff;
  box-shadow: 0 8px 24px rgba(79, 140, 255, 0.3);
}

.bloque {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 22px 24px;
  margin-bottom: 20px;
}
.bloque h2 {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.bloque p { color: var(--texto-suave); font-size: 0.95rem; }
.bloque p + p { margin-top: 10px; }
.bloque .nota { font-size: 0.85rem; color: var(--texto-suave); opacity: 0.8; }

/* "Otras expos en…" — enlaces internos entre eventos */
.rels { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.rel {
  display: block;
  padding: 13px 15px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  text-decoration: none;
  color: var(--texto);
  background: var(--fondo-alto);
  transition: border-color 0.18s, transform 0.18s;
}
.rel:hover { border-color: var(--acento); transform: translateY(-2px); }
.rel-fecha {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--acento-2);
  margin-bottom: 4px;
}
.rel-nombre { display: block; font-weight: 600; font-size: 0.95rem; line-height: 1.3; }
.rel-sede { display: block; font-size: 0.82rem; color: var(--texto-suave); margin-top: 4px; }

.volver {
  display: inline-block;
  margin: 8px 0 32px;
  color: var(--acento);
  text-decoration: none;
  font-size: 0.95rem;
}
.volver:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .evento-hero h1 { font-size: 1.5rem; }
}