/* =========================================================================
   AZAHAR DATA INSIGHTS — CSS de página: hub
   Tipo nuevo. Sirve a los dos índices de navegación: /tus-necesidades/ y
   /sectores/. Solo clases específicas de "hub"; las globales azh-* viven
   en azh-globals.css y NO se redefinen aquí.
   Fuente de verdad: este fichero. La plantilla Jinja2 no lleva <style>.

   MULTICOLOR: la página no lleva acento propio. Cada tarjeta y cada banda
   del mosaico lleva el suyo con azh-accent--{color}, y todo el CSS consume
   --accent-color y --accent-light. No hay variables inline (B5).

   LA FRANJA MOSAICO — dos reglas que la gobiernan

   1. La dirección del degradado la fija la FILA, no la banda. Arriba, todas
      de acento a blanco; abajo, todas de blanco a acento. Alternar la
      dirección dentro de una fila hace que dos bandas contiguas se
      encuentren las dos en su extremo blanco y aparezca un vacío lechoso
      en el centro de la franja.

   2. La intensidad varía POR BANDA. Si todas arrancan en su tono más
      saturado, la franja se lee como una secuencia de rampas idénticas.
      Cada banda entra en su espectro por un punto distinto con
      --plena, --media o --suave. Las paradas fuera del rango 0–100% son
      lo que desplaza el punto de entrada, y son CSS válido.

      --suave se conserva pero NO se usa sobre fondo blanco: se lava y la
      banda deja de leerse. Queda disponible por si alguna franja futura va
      sobre un fondo que la sostenga.
   ========================================================================= */

/* === WRAPPER RAÍZ === */
.hub-page * { box-sizing: border-box; }

/* B11: contención de desbordamiento en el wrapper del fragmento, nunca en
   el body, para no alterar el encabezado sticky del tema. */
div.hub-page { overflow-x: clip; }

/* B7: Bricks renderiza cada <section> como flex column y los __inner sin
   ancho explícito se encogen a su contenido. */
.hub-page .hub-hero,
.hub-page .hub-grid,
.hub-page .hub-alt { width: 100%; }


/* === HERO === */
/* LONGHAND EXPLÍCITO: nunca shorthand padding con var() en Bricks (B1). */
.hub-page .hub-hero {
  max-width: 1200px;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  padding-top: 72px;
  padding-right: 40px;
  padding-bottom: 56px;
  padding-left: 40px;
}

.hub-page .hub-hero__eyebrow {
  display: block;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--azahar-oxford-50, rgba(5, 37, 76, 0.5));
  margin-top: 0;
  margin-bottom: 20px;
}

.hub-page .hub-hero__title {
  color: var(--azahar-oxford, #05254c);
  max-width: 900px;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
}

.hub-page .hub-hero__lead {
  color: var(--azahar-oxford-70, rgba(5, 37, 76, 0.7));
  max-width: 760px;
  margin: 0;
}


/* === FRANJA MOSAICO === */
.hub-page .hub-strip { width: 100%; }
.hub-page .hub-strip__row { display: grid; }
.hub-page .hub-strip__band { width: 100%; height: 100%; }

/* Alturas y repartos. Los anchos son desiguales y las juntas verticales de
   una fila no coinciden con las de la otra: eso es lo que rompe la
   retícula y da el efecto decalado. */
.hub-page .hub-strip--rutas > .hub-strip__row--top {
  grid-template-columns: 0.9fr 2.3fr 1.3fr;
  height: 48px;
}
.hub-page .hub-strip--rutas > .hub-strip__row--bottom {
  grid-template-columns: 1.6fr 1.9fr 1fr;
  height: 48px;
}

/* Sectores: corto + largo sobre largo + corto. Las juntas caen en el 29% y
   el 71%, formando un aspa. */
.hub-page .hub-strip--sectores > .hub-strip__row--top {
  grid-template-columns: 1fr 2.4fr;
  height: 48px;
}
.hub-page .hub-strip--sectores > .hub-strip__row--bottom {
  grid-template-columns: 2.4fr 1fr;
  height: 48px;
}

/* --- Fila superior: de más a menos intensidad --- */
.hub-page .hub-strip__row--top > .hub-strip__band--plena {
  background: linear-gradient(90deg, var(--accent-color) 0%, var(--azahar-white, #ffffff) 100%);
}
.hub-page .hub-strip__row--top > .hub-strip__band--media {
  background: linear-gradient(90deg, var(--accent-color) -45%, var(--azahar-white, #ffffff) 92%);
}
.hub-page .hub-strip__row--top > .hub-strip__band--suave {
  background: linear-gradient(90deg, var(--accent-light) 0%, var(--azahar-white, #ffffff) 100%);
}

/* --- Fila inferior: de menos a más intensidad --- */
.hub-page .hub-strip__row--bottom > .hub-strip__band--plena {
  background: linear-gradient(90deg, var(--azahar-white, #ffffff) 0%, var(--accent-color) 100%);
}
.hub-page .hub-strip__row--bottom > .hub-strip__band--media {
  background: linear-gradient(90deg, var(--azahar-white, #ffffff) 8%, var(--accent-color) 145%);
}
.hub-page .hub-strip__row--bottom > .hub-strip__band--suave {
  background: linear-gradient(90deg, var(--azahar-white, #ffffff) 0%, var(--accent-light) 100%);
}


/* === REJILLA DE TARJETAS === */
.hub-page .hub-grid {
  display: grid;
  max-width: 1200px;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  padding-top: 72px;
  padding-right: 40px;
  padding-bottom: 24px;
  padding-left: 40px;
  column-gap: 24px;
  row-gap: 24px;
}

.hub-page .hub-grid--3 { grid-template-columns: repeat(3, 1fr); }
.hub-page .hub-grid--2 { grid-template-columns: repeat(2, 1fr); }

.hub-page .hub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 36px;
  padding-right: 28px;
  padding-bottom: 32px;
  padding-left: 28px;
  min-height: 300px;
  text-decoration: none;
  background: var(--azahar-white, #ffffff);
  box-shadow: 0 0 0 1px var(--azahar-oxford-15, rgba(5, 37, 76, 0.15)) inset;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* La barra superior no usa offsets negativos (B11). */
.hub-page .hub-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 180px;
  height: 6px;
  background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-light) 100%);
}

.hub-page .hub-card:hover,
.hub-page .hub-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(5, 37, 76, 0.08);
  text-decoration: none;
}

.hub-page .hub-card__tag {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-color);
  margin-top: 0;
  margin-bottom: 16px;
}

.hub-page .hub-card__title {
  font-size: 22px;
  line-height: 1.3;
  color: var(--azahar-oxford, #05254c);
  margin: 0 0 14px;
}

.hub-page .hub-card__desc {
  font-size: 16px;
  line-height: 1.55;
  color: var(--azahar-oxford-70, rgba(5, 37, 76, 0.7));
  margin: 0 0 20px;
}

.hub-page .hub-card__arrow {
  display: block;
  margin-top: auto;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--azahar-button, #4F4CC0);
}


/* === ACCESOS ALTERNATIVOS === */
.hub-page .hub-alt {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1200px;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  padding-top: 72px;
  padding-right: 40px;
  padding-bottom: 96px;
  padding-left: 40px;
  column-gap: 32px;
  row-gap: 24px;
  border-top: 1px solid var(--azahar-oxford-10, rgba(5, 37, 76, 0.1));
}

.hub-page .hub-alt__item {
  display: block;
  text-decoration: none;
}

.hub-page .hub-alt__item:hover,
.hub-page .hub-alt__item:focus-visible { text-decoration: none; }

.hub-page .hub-alt__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--azahar-oxford-50, rgba(5, 37, 76, 0.5));
  margin-top: 0;
  margin-bottom: 10px;
}

.hub-page .hub-alt__text {
  display: block;
  font-size: 18px;
  color: var(--azahar-oxford, #05254c);
  transition: color 0.2s ease;
}

.hub-page .hub-alt__item:hover .hub-alt__text,
.hub-page .hub-alt__item:focus-visible .hub-alt__text {
  color: var(--azahar-button, #4F4CC0);
}


/* === RESPONSIVE === */
@media (max-width: 991px) {
  .hub-page .hub-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .hub-page .hub-alt {
    grid-template-columns: 1fr;
    row-gap: 28px;
  }
}

@media (max-width: 767px) {
  .hub-page .hub-hero {
    padding-top: 48px;
    padding-right: 24px;
    padding-bottom: 40px;
    padding-left: 24px;
  }

  .hub-page .hub-grid--3,
  .hub-page .hub-grid--2 {
    grid-template-columns: 1fr;
    padding-top: 48px;
    padding-right: 24px;
    padding-left: 24px;
  }

  .hub-page .hub-card { min-height: 0; }

  .hub-page .hub-alt {
    padding-top: 48px;
    padding-right: 24px;
    padding-bottom: 72px;
    padding-left: 24px;
  }

  .hub-page .hub-strip__row { height: 36px; }
}