/* =========================================================
   Glosario tecnico — Roshfrans
   Indice fijo a la izquierda + terminos agrupados a la derecha.
   Paleta y tipografia tomadas de base.css / components.css
   ========================================================= */

.gl {
  --gl-dorado:       #c69a20;
  --gl-dorado-claro: #e0b73c;
  --gl-verde:        #009959;
  --gl-negro:        #13161b;
  --gl-azul:         #313945;
  --gl-gris:         #7f868c;
  --gl-gris-claro:   #bec5d3;
  --gl-borde:        #e4e7ec;
  --gl-fondo:        #f9f9f9;
  /* Mismo gris que --gl-fondo, en componentes: un degradado que termina en
     `transparent` vira a gris sucio en el camino, asi que el difuminado del
     indice necesita el color con alfa 0 explicito. */
  --gl-fondo-rgb:    249, 249, 249;
  --gl-blanco:       #fff;

  /* Lo fija el JS: barra de admin + encabezado fijo del sitio.
     Sin esto los anclajes quedan escondidos debajo del header. */
  --gl-offset: 90px;
  /* Alto de la barra de categorias cuando va fija (solo en movil).
     El JS la mide; en escritorio se queda en 0. */
  --gl-indice: 0px;

  font-family: Barlow, sans-serif;
  color: var(--gl-negro);
  background-color: var(--gl-blanco);
}

.gl, .gl *, .gl *::before, .gl *::after { box-sizing: border-box; }

/* ---------- Hero ---------- */

.gl__hero {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: var(--gl-azul);
}

/* La imagen que nos pasaron es mas alta que ancha, asi que se recorta
   por el centro en vez de deformarse. */
.gl__hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

/* Degradado para que el texto blanco se lea sobre cualquier zona de la foto. */
.gl__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(19, 22, 27, 0.92) 0%,
    rgba(19, 22, 27, 0.75) 45%,
    rgba(19, 22, 27, 0.15) 100%
  );
}

.gl__hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3.5rem 2rem 3rem;
  color: var(--gl-blanco);
}

.gl__hero-eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gl-dorado-claro);
}

.gl__hero-title {
  font-family: Barlow, sans-serif;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.05;
  margin: 0 0 1rem;
  color: var(--gl-blanco);
  text-transform: uppercase;
}

.gl__hero-sub {
  margin: 0;
  max-width: 46ch;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
}

/* ---------- Breadcrumb ---------- */

/* .ctn__breadcrumb de base.css ya trae el padding lateral; aqui solo se
   centra al mismo ancho que el contenido para que no quede desalineado.

   Ese mismo .ctn__breadcrumb trae border-bottom y padding-bottom: 0, o sea
   que el texto queda montado sobre la linea. El aire lo pone el
   margin-bottom del <ol> de Bootstrap, que aqui se anula para tener un solo
   control: el padding de abajo. */
.gl__breadcrumb {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 1.25rem;
}

.gl__breadcrumb .breadcrumb { margin-bottom: 0; }

/* ---------- Layout ---------- */

.gl__layout {
  max-width: 1200px;
  margin: 0 auto;
  /* Menos aire arriba que abajo: el breadcrumb ya separa del hero. */
  padding: 2rem 2rem 5rem;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 3.5rem;
  align-items: start;
}

/* ---------- Indice ---------- */

.gl__aside {
  position: sticky;
  top: calc(var(--gl-offset) + 0.5rem);
  /* Con 9 categorias la lista cabe, pero si crecen el indice hace su
     propio scroll en lugar de empujar la pagina. Descuenta el top de arriba
     mas un respiro igual abajo. */
  max-height: calc(100vh - var(--gl-offset) - 1rem);
  display: flex;
  flex-direction: column;
}

.gl__index {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background-color: var(--gl-fondo);
  border: 1px solid var(--gl-borde);
  border-radius: 14px;
  padding: 1.5rem 1.25rem;
}

.gl__seccion + .gl__seccion {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gl-borde);
}

/* La de categorias es la unica que puede desbordar, asi que hereda la cadena
   de min-height: 0 que necesita .gl__nav para hacer su scroll en vez de
   estirar la tarjeta. */
.gl__seccion--nav {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Difuminado al pie de las categorias: la lista se corta a media entrada y
   sin esta pista no se nota que sigue hacia abajo. */
.gl__seccion--nav::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2.5rem;
  background: linear-gradient(
    to top,
    var(--gl-fondo) 15%,
    rgba(var(--gl-fondo-rgb), 0)
  );
  opacity: 0;
  transition: opacity 0.15s linear;
  pointer-events: none;
}

/* Lo enciende el JS y solo mientras quede lista por debajo: fijo se veria
   como una franja rara justo cuando la lista ya cabe entera, que es lo que
   pasa en cuanto filtras y quedan una o dos categorias. */
.gl__seccion--nav.is-scrollable::after { opacity: 1; }

/* Los tres encabezados se ven igual a proposito: son hermanos y ninguno pesa
   mas que otro. Antes habia un solo titulo con icono; con tres, el icono en
   uno solo se leia como que esa seccion era distinta. */
.gl__seccion-title {
  margin: 0 0 0.75rem;
  font-family: Barlow, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gl-negro);
}

/* ---------- Filtro por letra ---------- */

/* auto-fill y no columnas fijas: la columna del indice se angosta a 260px
   en tablet y las letras se reacomodan solas en vez de desbordarse. */
.gl__letras-grid {
  display: grid;
  /* Columnas de 32px clavados y no minmax(...,1fr): con 1fr la rejilla
     repartia el sobrante y las letras crecian con el ancho de la columna.
     El space-between se queda con ese sobrante y lo pone en los huecos. */
  grid-template-columns: repeat(auto-fill, 2rem);
  justify-content: space-between;
  gap: 0.25rem;
}

.gl__letra {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Barlow, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  color: var(--gl-azul);
  background-color: var(--gl-blanco);
  border: 1px solid var(--gl-borde);
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s linear, background-color 0.15s linear, border-color 0.15s linear;
}

.gl__letra:hover:not(:disabled):not(.is-active) {
  color: var(--gl-negro);
  border-color: var(--gl-gris-claro);
  background-color: rgba(19, 22, 27, 0.05);
}

.gl__letra:focus-visible {
  outline: none;
  border-color: var(--gl-dorado);
  box-shadow: 0 0 0 3px rgba(198, 154, 32, 0.18);
}

/* El mismo verde con el que el indice marca la categoria a la vista: en la
   tarjeta solo puede haber un elemento "activo" y debe leerse igual. */
.gl__letra.is-active {
  color: var(--gl-blanco);
  background-color: var(--gl-verde);
  border-color: var(--gl-verde);
}

/* Letra sin terminos. Se queda a la vista, apagada: ocultarla dejaria un
   abecedario con huecos, que se lee como una falla y no como un dato. */
.gl__letra:disabled {
  color: var(--gl-gris-claro);
  background-color: transparent;
  border-color: transparent;
  cursor: default;
}

.gl__letras-todas {
  margin-top: 0.75rem;
  padding: 0;
  font-family: Barlow, sans-serif;
  font-size: 0.8125rem;
  color: var(--gl-verde);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}

.gl__letras-todas:hover { color: var(--gl-negro); }

/* ---------- Buscador ---------- */

/* Sin margen inferior: la separacion con lo que sigue ya la da el espaciado
   entre secciones, y sumar los dos dejaba un hueco muy alto bajo el campo. */
.gl__search { position: relative; }

.gl__search-label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.gl__search-input {
  width: 100%;
  padding: 0.625rem 2.25rem 0.625rem 0.875rem;
  font-family: Barlow, sans-serif;
  font-size: 0.9375rem;
  color: var(--gl-negro);
  background-color: var(--gl-blanco);
  border: 1px solid var(--gl-gris-claro);
  border-radius: 8px;
  -webkit-appearance: none;
  appearance: none;
}

.gl__search-input::-webkit-search-cancel-button { display: none; }

.gl__search-input:focus {
  outline: none;
  border-color: var(--gl-dorado);
  box-shadow: 0 0 0 3px rgba(198, 154, 32, 0.18);
}

.gl__search-input::placeholder { color: var(--gl-gris); }

.gl__search-clear {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--gl-gris);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.gl__search-clear:hover { color: var(--gl-negro); }

/* Solo margen arriba: como es el ultimo elemento de la seccion, el de abajo
   se sumaba al espaciado entre secciones sin separar nada. */
.gl__search-count {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--gl-gris);
}

/* ---------- Navegacion del indice ---------- */

.gl__nav { min-height: 0; overflow-y: auto; }

.gl__nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gl__nav-item + .gl__nav-item { margin-top: 0.125rem; }

.gl__nav-link {
  display: block;
  padding: 0.4375rem 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--gl-azul);
  text-decoration: none;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  transition: color 0.15s linear, background-color 0.15s linear;
}

/* Gris y no dorado: el hover pasa justo al lado del activo, que es verde,
   y dos tintes de color distintos se pelean entre si. */
.gl__nav-link:hover {
  color: var(--gl-negro);
  background-color: rgba(19, 22, 27, 0.05);
}

/* Categoria visible en pantalla: es el equivalente del naranja de la
   referencia, con el verde de la marca. */
.gl__nav-item.is-active .gl__nav-link {
  color: var(--gl-verde);
  font-weight: 600;
  border-left-color: var(--gl-verde);
  background-color: rgba(0, 153, 89, 0.08);
}

/* Categoria sin resultados durante una busqueda. */
.gl__nav-item.is-hidden { display: none; }

/* ---------- Contenido ---------- */

.gl__cat {
  /* Deja aire bajo el header fijo, y bajo la barra de categorias cuando
     esta va fija, al saltar por anclaje. */
  scroll-margin-top: calc(var(--gl-offset) + var(--gl-indice) + 1.5rem);
}

.gl__cat + .gl__cat { margin-top: 3.5rem; }

.gl__cat.is-hidden { display: none; }

/* Barlow y no la tipografia de titulos: la 'Heading Now Trial 15' del tema
   es una version de prueba y sustituye los digitos por una marca de agua,
   asi que cualquier titulo numerado saldria con el watermark encima. */
.gl__cat-title {
  margin: 0 0 1.5rem;
  padding-bottom: 0.75rem;
  font-family: Barlow, sans-serif;
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--gl-negro);
  border-bottom: 2px solid var(--gl-verde);
}

.gl__terms { margin: 0; }

.gl__term {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--gl-borde);
  scroll-margin-top: calc(var(--gl-offset) + var(--gl-indice) + 1.5rem);
}

.gl__term:last-child { border-bottom: 0; }

.gl__term.is-hidden { display: none; }

.gl__term-name {
  margin: 0 0 0.375rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gl-negro);
}

.gl__term-siglas {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.875rem;
  font-weight: 400;
  font-style: italic;
  color: var(--gl-gris);
}

.gl__term-def {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--gl-azul);
}

.gl__term-def p { margin: 0 0 0.75rem; }
.gl__term-def p:last-child { margin-bottom: 0; }

/* Coincidencia del buscador dentro del termino. */
.gl__mark {
  background-color: rgba(198, 154, 32, 0.28);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

.gl__empty {
  margin: 0;
  padding: 3rem 0;
  font-size: 1.0625rem;
  color: var(--gl-gris);
  text-align: center;
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
  /* 290 y no 260: una fila de siete letras de 32px con sus huecos pide 248px
     limpios, y con la columna en 260 se quedaba en 218, asi que la ultima
     letra bajaba de renglon. */
  .gl__layout {
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 2.5rem;
  }

  /* Los 8px que se le quitan al padding devuelven al contenido casi un tercio
     de lo que se llevo la columna, y dejan la rejilla en los mismos 258px que
     tiene en escritorio ancho: las letras se ven igual en los dos tamanos. */
  .gl__index { padding-left: 1rem; padding-right: 1rem; }
}

/* ---------- Movil ---------- */

@media (max-width: 900px) {
  .gl__hero { min-height: 260px; }

  /* El encabezado del sitio es fijo y opaco, y en movil se monta sobre el
     hero: sin reservarle el alto se come la primera linea. */
  .gl__hero-inner {
    padding: calc(var(--gl-offset) + 1.5rem) 1.25rem 2rem;
  }

  /* Bloque y no grid: en una rejilla de una sola columna el area del aside
     mide lo mismo que el aside, asi que position:sticky no tendria recorrido
     y la barra no se quedaria pegada. */
  .gl__layout {
    display: block;
    padding: 0 0 3.5rem;
  }

  /* La barra de categorias se queda fija bajo el encabezado del sitio para
     que se pueda saltar de categoria sin volver arriba. */
  .gl__aside {
    position: sticky;
    top: var(--gl-offset);
    z-index: 20;
    max-height: none;
    margin-bottom: 1.75rem;
  }

  /* A todo lo ancho: como barra fija, una tarjeta con margenes se ve
     despegada del encabezado. */
  .gl__index {
    padding: 0.75rem 1.25rem 0.5rem;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    background-color: var(--gl-blanco);
    box-shadow: 0 6px 14px rgba(19, 22, 27, 0.07);
  }

  /* Los tres encabezados fuera: son 40px de alto cada uno en una barra fija,
     y el campo, las letras y los chips ya se explican solos. Sin ellos las
     tres secciones se leen como una sola barra, que es lo que conviene. */
  .gl__seccion-title { display: none; }

  .gl__seccion + .gl__seccion {
    margin-top: 0.5rem;
    padding-top: 0;
    border-top: 0;
  }

  .gl__letras-grid {
    display: flex;
    /* Hereda el space-between de la rejilla, que aqui no tiene sobrante que
       repartir; explicito para que la tira arranque pegada a la izquierda
       aunque algun dia sobren letras. */
    justify-content: flex-start;
    gap: 0.375rem;
    overflow-x: auto;
    padding-bottom: 0.375rem;
    -webkit-overflow-scrolling: touch;
  }

  .gl__letra {
    flex: 0 0 auto;
    width: 2rem;
    border-radius: 999px;
  }

  /* Sin borde no se distingue de un hueco, y aqui la tira se desliza: una
     letra invisible haria pensar que el abecedario esta incompleto. */
  .gl__letra:disabled { border-color: var(--gl-borde); }

  .gl__content { padding: 0 1.25rem; }

  .gl__search { margin-bottom: 0.625rem; }

  /* En movil el indice es una tira horizontal de chips: no hay nada que se
     corte por abajo, asi que el difuminado sobra. */
  .gl__nav { overflow: visible; }

  .gl__seccion--nav::after { content: none; }

  .gl__nav-list {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
  }

  .gl__nav-item + .gl__nav-item { margin-top: 0; }

  .gl__nav-item { flex: 0 0 auto; }

  .gl__nav-link {
    white-space: nowrap;
    padding: 0.4375rem 0.875rem;
    border: 1px solid var(--gl-gris-claro);
    border-left-width: 1px;
    border-radius: 999px;
    background-color: var(--gl-blanco);
  }

  .gl__nav-item.is-active .gl__nav-link {
    border-color: var(--gl-verde);
    border-left-color: var(--gl-verde);
  }

  .gl__cat + .gl__cat { margin-top: 2.5rem; }
}