/* =========================================================================
   AZAHAR DATA INSIGHTS — CSS de página: listado
   Sirve a los dos índices completos del sitio: /servicios/ (46 servicios
   agrupados por ruta) y /insights/casos-exito/ (15 casos agrupados por
   sector). Solo clases específicas de "listado"; las globales azh-* viven
   en azh-globals.css y NO se redefinen aquí.
   Fuente de verdad: este fichero. La plantilla Jinja2 no lleva <style>.

   LAS DOS VARIANTES
   El wrapper lleva .listado-page--servicios o .listado-page--casos. Es lo
   único que las diferencia:
     servicios -> filas compactas a dos columnas, sin visual
     casos     -> tarjetas a tres columnas, con banda de color arriba
   La estructura HTML es idéntica. Cambiar de una a otra no toca la
   plantilla.

   MULTICOLOR: la página no lleva acento propio. Cada grupo lleva el suyo
   —el de su ruta o el de su sector— y las tarjetas de caso el que declara
   su ficha. Todo consume --accent-color y --accent-light (B5).

   FRANJA MOSAICO: mismas dos reglas que en pagina-hub.css. La dirección la
   fija la fila (arriba acento→blanco, abajo blanco→acento) y la intensidad
   varía por banda. Alternar la dirección dentro de una fila deja un vacío
   lechoso donde se tocan dos extremos blancos.
   ========================================================================= */

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

/* B11: contención de desbordamiento en el wrapper, nunca en el body. */
div.listado-page { overflow-x: clip; }

/* B7: Bricks renderiza cada <section> como flex column. */
.listado-page .listado-hero,
.listado-page .listado-anclas__inner,
.listado-page .listado-cuerpo__inner,
.listado-page .listado-cta__inner { width: 100%; }


/* === HERO === */
.listado-page .listado-hero {
  max-width: 1200px;
  margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;
  padding-top: 64px; padding-right: 40px; padding-bottom: 72px; padding-left: 40px;
}

.listado-page .listado-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;
}

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

.listado-page .listado-hero__lead {
  color: var(--azahar-oxford-70, rgba(5, 37, 76, 0.7));
  max-width: 780px; margin: 0; font-size: 20px;
}


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

.listado-page .listado-strip__row--top {
  grid-template-columns: 1.4fr 0.8fr 1.8fr;
  height: 48px;
}
.listado-page .listado-strip__row--bottom {
  grid-template-columns: 0.9fr 2.1fr 1fr;
  height: 48px;
}

.listado-page .listado-strip__row--top > .listado-strip__band--plena {
  background: linear-gradient(90deg, var(--accent-color) 0%, var(--azahar-white, #ffffff) 100%);
}
.listado-page .listado-strip__row--top > .listado-strip__band--media {
  background: linear-gradient(90deg, var(--accent-color) -45%, var(--azahar-white, #ffffff) 92%);
}
.listado-page .listado-strip__row--bottom > .listado-strip__band--plena {
  background: linear-gradient(90deg, var(--azahar-white, #ffffff) 0%, var(--accent-color) 100%);
}
.listado-page .listado-strip__row--bottom > .listado-strip__band--media {
  background: linear-gradient(90deg, var(--azahar-white, #ffffff) 8%, var(--accent-color) 145%);
}


/* === ÍNDICE DE GRUPOS === */
/* Solo se emite con más de dos grupos. Con 46 servicios en seis bloques, un
   índice ahorra scroll ciego; con dos grupos sobra. */
.listado-page .listado-anclas {
  background: var(--azahar-bg-soft, #ecf4fe);
  padding-top: 28px; padding-right: 40px; padding-bottom: 28px; padding-left: 40px;
}

.listado-page .listado-anclas__inner {
  max-width: 1200px;
  margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: 24px; row-gap: 12px;
}

.listado-page .listado-anclas__label {
  font-size: 13px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--azahar-oxford-50, rgba(5, 37, 76, 0.5));
  flex-shrink: 0;
}

.listado-page .listado-anclas__links {
  display: flex; flex-wrap: wrap; column-gap: 10px; row-gap: 10px;
}

.listado-page .listado-anclas__link {
  display: inline-flex; align-items: center; column-gap: 8px;
  padding-top: 8px; padding-right: 14px; padding-bottom: 8px; padding-left: 14px;
  font-size: 15px; font-weight: 500; text-decoration: none;
  color: var(--azahar-oxford, #05254c);
  background: var(--azahar-white, #ffffff);
  transition: box-shadow 0.2s ease, background 0.25s ease;
}

.listado-page .listado-anclas__link:hover,
.listado-page .listado-anclas__link:focus-visible {
  text-decoration: none;
  box-shadow: 0 0 0 1px var(--accent-color) inset;
}

.listado-page .listado-anclas__n {
  font-size: 13px; font-weight: 600; color: var(--accent-color);
}


/* === CUERPO Y GRUPOS === */
.listado-page .listado-cuerpo {
  padding-top: 88px; padding-right: 40px; padding-bottom: 88px; padding-left: 40px;
  background: var(--azahar-white, #ffffff);
}

.listado-page .listado-cuerpo__inner {
  max-width: 1200px;
  margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;
}

.listado-page .listado-grupo {
  margin-bottom: 80px;
  /* El encabezado del tema es sticky: sin esto el ancla aterriza tapada. */
  scroll-margin-top: 120px;
}

.listado-page .listado-grupo:last-child { margin-bottom: 0; }

.listado-page .listado-grupo__head {
  position: relative;
  padding-left: 28px;
  margin-bottom: 32px;
}

/* B11: la esquina no usa offsets negativos, se apoya en el padding. */
.listado-page .listado-grupo__corner {
  position: absolute; top: 6px; left: 0;
  display: block; width: 8px; height: 48px;
  background: linear-gradient(180deg, var(--accent-color) 0%, var(--accent-light) 100%);
}

.listado-page .listado-grupo__titulo {
  color: var(--azahar-oxford, #05254c);
  margin: 0 0 10px;
}

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

.listado-page .listado-grupo__items { display: grid; }


/* === ITEM — base común === */
.listado-page .listado-item {
  display: block; text-decoration: none;
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.listado-page .listado-item:hover,
.listado-page .listado-item:focus-visible,
.listado-page .listado-item:active { text-decoration: none; }

.listado-page .listado-item__nombre {
  display: block;
  font-size: 19px; font-weight: 600; line-height: 1.3;
  color: var(--azahar-oxford, #05254c);
}

.listado-page .listado-item__rule {
  display: block; width: 48px; height: 4px;
  margin-top: 12px; margin-bottom: 12px;
  background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-light) 100%);
  transition: width 0.3s ease;
}

.listado-page .listado-item:hover .listado-item__rule,
.listado-page .listado-item:focus-visible .listado-item__rule { width: 110px; }

.listado-page .listado-item__texto {
  display: block;
  font-size: 16px; line-height: 1.55;
  color: var(--azahar-oxford-70, rgba(5, 37, 76, 0.7));
  margin-bottom: 14px;
}

.listado-page .listado-item__arrow {
  display: block;
  font-size: 14px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--azahar-button, #4F4CC0);
  transition: text-decoration-color 0.2s ease;
}

.listado-page .listado-item:hover .listado-item__arrow,
.listado-page .listado-item:focus-visible .listado-item__arrow {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}


/* === VARIANTE SERVICIOS — filas compactas === */
.listado-page--servicios .listado-grupo__items {
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
}

.listado-page--servicios .listado-item {
  padding-top: 24px; padding-right: 20px; padding-bottom: 24px; padding-left: 20px;
  border-bottom: 1px solid var(--azahar-oxford-10, rgba(5, 37, 76, 0.1));
}

.listado-page--servicios .listado-item:hover,
.listado-page--servicios .listado-item:focus-visible {
  background: linear-gradient(90deg, var(--accent-light) 0%, var(--azahar-white, #ffffff) 65%);
}

.listado-page--servicios .listado-item__visual { display: none; }


/* === VARIANTE CASOS — tarjetas === */
.listado-page--casos .listado-grupo__items {
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32px; row-gap: 32px;
}

.listado-page--casos .listado-item {
  background: var(--azahar-white, #ffffff);
  box-shadow: 0 0 0 1px var(--azahar-oxford-15, rgba(5, 37, 76, 0.15)) inset;
}

.listado-page--casos .listado-item:hover,
.listado-page--casos .listado-item:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(5, 37, 76, 0.08);
}

.listado-page--casos .listado-item__visual {
  display: block; width: 100%; height: 10px;
  background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-light) 100%);
}

.listado-page--casos .listado-item__body {
  display: block;
  padding-top: 28px; padding-right: 24px; padding-bottom: 28px; padding-left: 24px;
}


/* === PIE DE GRUPO === */
.listado-page .listado-grupo__pie {
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: 12px; row-gap: 6px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--azahar-oxford-10, rgba(5, 37, 76, 0.1));
}

.listado-page .listado-grupo__pie-txt {
  font-size: 16px; color: var(--azahar-oxford-70, rgba(5, 37, 76, 0.7));
}

.listado-page .listado-grupo__pie-cta {
  font-size: 16px; font-weight: 600; text-decoration: none;
  color: var(--azahar-button, #4F4CC0);
}

.listado-page .listado-grupo__pie-cta:hover { color: var(--azahar-oxford, #05254c); }


/* === CTA FINAL === */
.listado-page .listado-cta__title {
  color: var(--azahar-oxford, #05254c);
  line-height: 1.15; margin: 0 0 16px;
}

.listado-page .listado-cta__desc {
  color: var(--azahar-oxford-90, rgba(5, 37, 76, 0.9));
  margin: 0;
}


/* === RESPONSIVE === */
@media (max-width: 991px) {
  .listado-page--casos .listado-grupo__items { grid-template-columns: 1fr 1fr; }
  .listado-page .listado-anclas__inner { flex-direction: column; }
}

@media (max-width: 767px) {
  .listado-page .listado-hero {
    padding-top: 48px; padding-right: 24px; padding-bottom: 48px; padding-left: 24px;
  }
  .listado-page .listado-cuerpo {
    padding-top: 56px; padding-right: 24px; padding-bottom: 56px; padding-left: 24px;
  }
  .listado-page .listado-anclas {
    padding-right: 24px; padding-left: 24px;
  }
  .listado-page--servicios .listado-grupo__items,
  .listado-page--casos .listado-grupo__items { grid-template-columns: 1fr; }
  .listado-page .listado-strip__row { height: 36px; }
  .listado-page .listado-grupo { margin-bottom: 56px; }
}