/* =========================================================
   agenda-editorial.css
   Lleva el header y el hero de agenda.html al mismo lenguaje
   visual editorial de la landing (tipografía Inter Tight ya global):
   marca en itálica mayúsculas, hero con título en blanco y eyebrow
   con punto cian — SIN foto de fondo (se mantiene el degradado de marca).
   Se carga el último → sobrescribe components.css / sections.css / agenda.css.
   Modular y reversible: borra el <link> y vuelve al estado anterior.
   ========================================================= */

/* ---- Marca: wordmark en itálica mayúsculas (idéntico a la landing) ---- */
.brand__text {
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: -0.02em;
}

/* ---- Header: al hacer scroll, fondo algo más sutil (coherencia con la landing) ---- */
.site-header.is-scrolled { background: rgba(6, 12, 34, 0.55); }

/* =========================================================
   FONDO CONTINUO — sin banda ni línea de separación
   Un degradado ambiental suave recorre TODA la página (fijo al
   viewport) y la sección del calendario deja de pintar su propio
   azul: así el fondo "corre" de principio a fin, sin cortes.
   ========================================================= */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(115% 75% at 50% -6%, rgba(27, 63, 224, 0.20), transparent 60%),
    radial-gradient(90% 60% at 88% 112%, rgba(25, 212, 255, 0.08), transparent 58%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
/* El fondo alterno (banda azul) se integra con el fondo general */
.section--alt { background: transparent; }

/* La malla/glow del hero se recortaba de golpe en el borde inferior y
   dejaba una "costura". La desvanecemos hacia abajo para que se funda
   con el fondo continuo (sin línea de unión). */
.agenda-hero__bg {
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 92%);
          mask-image: linear-gradient(to bottom, #000 45%, transparent 92%);
}

/* =========================================================
   HERO de la agenda — estilo editorial
   ========================================================= */

/* Eyebrow: fuera el "pill"; mayúsculas con punto cian (como .hero__eyebrow) */
.agenda-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--space-4);
}
.agenda-hero .eyebrow::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-cyan);
  box-shadow: 0 0 10px var(--c-cyan);
}

/* Título: MAYÚSCULAS, blanco, muy ceñido (lenguaje del hero de la landing) */
.agenda-hero__title {
  text-transform: uppercase;
  color: #fff;
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.03em;
}
/* El nombre deja el degradado azul y pasa a blanco translúcido (matiz),
   igual que .hero__title-accent en la landing. */
.agenda-hero__title .text-gradient {
  background: none;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.60);
  color: rgba(255, 255, 255, 0.60);
}

/* Subtítulo: blanco translúcido para el mismo contraste editorial */
.agenda-hero__subtitle { color: rgba(255, 255, 255, 0.88); }

/* =========================================================
   RESPONSIVE — móvil: cabecera compacta
   La marca en itálica mayúsculas es más ancha; en pantallas
   estrechas liberamos espacio ocultando "Volver al inicio"
   (el logo/marca ya enlaza al inicio) para que la marca y el
   botón de WhatsApp no se solapen.
   ========================================================= */
@media (max-width: 600px) {
  .agenda-header .agenda-back { display: none; }
  .brand__text { font-size: 16px; }
}