/* ─────────────────────────────────────────────────────────────────────────
   AvanzaSuite · sistema de diseño sobre Bootstrap 5.3

   Hasta ahora este fichero era una capa de marca: el color y media docena de
   ajustes. Ahora es un sistema completo —tipografía, escala, neutros, radios
   y componentes— tomado de cómo construye Atlassian su web pública, medido
   sobre su propio código y no de memoria:

     texto casi negro #101214 · secundario #505258 · apagado #8c8f97
     borde #dddee1 · fondo #f8f8f8
     escala 2.5 / 2 / 1.5 / 1.25 / 1.125 / 1 / .875 / .75 rem
     pesos 600–700 en titulares, 500 medio, 400 texto
     titulares con interletrado -1px; etiquetas con +.3px
     radios 8px tarjeta · 20px tarjeta grande · 40px botón píldora

   La fuente de marca no se distribuye con este proyecto:

   · Charlie Display y Charlie Text son fuentes de marca de acceso restringido.
     Plus Jakarta Sans tiene un carácter
     geométrico y abierto para los titulares; Inter, que ya usábamos, es casi
     gemela de Charlie Text para el cuerpo.

   Los botones y enlaces usan el azul #1868db medido en la web pública.

   Bootstrap sigue poniendo la rejilla, el menú y el acordeón, y se ajusta
   por sus propias variables, no pisando sus reglas. Quien conozca Bootstrap
   puede mantener esto.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Marca */
  --as-indigo: #1868db;
  --as-indigo-oscuro: #1558bc;
  --as-indigo-mas-oscuro: #0c4a9e;
  --as-indigo-claro: #e9f2ff;
  --as-indigo-borde: #a8c7fa;

  /* Neutros, medidos en atlassian.com */
  --as-tinta: #101214;
  --as-tinta-2: #505258;
  --as-tinta-3: #8c8f97;
  --as-borde: #dddee1;
  --as-fondo: #f8f8f8;

  /* La sección oscura: casi negro, no morado. Es lo que da el contraste de
     «producto serio» que tienen sus bloques oscuros. */
  --as-noche: #101214;
  --as-noche-2: #1d1f24;
  --as-noche-3: #26292f;
  --as-noche-borde: #33363d;
  --as-noche-texto: #b6b9c1;
  --as-noche-apagado: #8c8f97;

  /* Radios */
  --as-radio: .5rem;
  --as-radio-grande: 1.25rem;
  --as-radio-pildora: 2.5rem;

  /* Sombras: grandes, suaves y ligeramente teñidas. Es lo que separa una
     captura «pegada» de una que parece flotar sobre la página. */
  --as-sombra-suave: 0 1px 2px rgb(16 18 20 / 5%), 0 8px 24px -8px rgb(16 18 20 / 12%);
  --as-sombra-grande: 0 2px 4px rgb(16 18 20 / 5%), 0 24px 64px -20px rgb(16 18 20 / 28%);
  --as-sombra-indigo: 0 12px 32px -12px rgb(24 104 219 / 30%);

  /* Fuentes */
  --as-display: "Plus Jakarta Sans", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --as-texto: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* Variables de Bootstrap: se reasignan, no se sobrescriben con reglas. */
  --bs-primary: var(--as-indigo);
  --bs-primary-rgb: 24, 104, 219;
  --bs-link-color: var(--as-indigo);
  --bs-link-color-rgb: 24, 104, 219;
  --bs-link-hover-color: var(--as-indigo-oscuro);
  --bs-link-hover-color-rgb: 21, 88, 188;
  --bs-body-font-family: var(--as-texto);
  --bs-body-color: var(--as-tinta);
  --bs-body-color-rgb: 16, 18, 20;
  --bs-secondary-color: var(--as-tinta-2);
  --bs-secondary-color-rgb: 80, 82, 88;
  --bs-border-color: var(--as-borde);
  --bs-light-rgb: 248, 248, 248;
  --bs-border-radius: var(--as-radio);
  --bs-border-radius-lg: .75rem;
  --bs-border-radius-xl: var(--as-radio-grande);
  --bs-body-line-height: 1.6;
}

/* ── Tipografía ─────────────────────────────────────────────────────────── */

h1, h2, h3, h4,
.display-4, .display-5, .display-6 {
  font-family: var(--as-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--as-tinta);
}

/* El titular de portada: peso 800 e interletrado de -1px, que es lo que
   Atlassian aplica a sus titulares grandes. Fluido entre móvil y escritorio
   sin saltos por puntos de corte. */
.display-5 {
  font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -1px;
  line-height: 1.08;
}

/* Los titulares se reparten en líneas parejas y los párrafos evitan dejar
   una palabra sola al final. Donde el navegador no lo entiende, no pasa nada. */
h1, h2, .display-5, .display-6 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* Títulos de sección. */
.display-6 {
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.5px;
  line-height: 1.12;
}

h2:not(.display-6):not(.small) { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

.lead {
  font-size: 1.125rem;
  line-height: 1.6;
  font-weight: 400;
  color: var(--as-tinta-2);
}

strong, b { font-weight: 600; }

/* Rótulos en mayúsculas pequeñas: interletrado positivo, como sus etiquetas. */
.as-rotulo {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--as-tinta-2);
}

/* ── Botones ────────────────────────────────────────────────────────────── */

.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: var(--as-radio-pildora);
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-padding-y: .625rem;
  letter-spacing: -.01em;
  transition: scale .15s cubic-bezier(.4, 0, 0, 1), background-color .15s cubic-bezier(.4, 0, 0, 1), border-color .15s cubic-bezier(.4, 0, 0, 1);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:hover:not(:disabled) { scale: 1.025; }
  .btn:active:not(:disabled) { scale: .985; }
}

.btn-lg {
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y: .8125rem;
  --bs-btn-font-size: 1.0625rem;
}

.btn-primary {
  --bs-btn-bg: var(--as-indigo);
  --bs-btn-border-color: var(--as-indigo);
  --bs-btn-hover-bg: var(--as-indigo-oscuro);
  --bs-btn-hover-border-color: var(--as-indigo-oscuro);
  --bs-btn-active-bg: var(--as-indigo-mas-oscuro);
  --bs-btn-active-border-color: var(--as-indigo-mas-oscuro);
  --bs-btn-disabled-bg: var(--as-indigo);
  --bs-btn-disabled-border-color: var(--as-indigo);
  --bs-btn-focus-shadow-rgb: 24, 104, 219;
}

.btn-outline-primary {
  --bs-btn-color: var(--as-indigo);
  --bs-btn-border-color: var(--as-indigo-borde);
  --bs-btn-hover-bg: var(--as-indigo-claro);
  --bs-btn-hover-color: var(--as-indigo-mas-oscuro);
  --bs-btn-hover-border-color: var(--as-indigo-borde);
  --bs-btn-active-bg: var(--as-indigo);
  --bs-btn-active-border-color: var(--as-indigo);
  --bs-btn-focus-shadow-rgb: 24, 104, 219;
}

/* El botón secundario, neutro: texto oscuro y borde gris, no gris sobre gris. */
.btn-outline-secondary {
  --bs-btn-color: var(--as-tinta);
  --bs-btn-border-color: var(--as-borde);
  --bs-btn-hover-color: var(--as-tinta);
  --bs-btn-hover-bg: var(--as-fondo);
  --bs-btn-hover-border-color: var(--as-tinta-3);
  --bs-btn-active-bg: var(--as-borde);
  --bs-btn-active-border-color: var(--as-tinta-3);
}

/* ── Utilidades de marca ────────────────────────────────────────────────── */

.text-primary { color: var(--as-indigo) !important; }
.border-primary { border-color: var(--as-indigo) !important; }
.text-bg-primary { background-color: var(--as-indigo) !important; color: #fff !important; }
.bg-indigo-claro { background-color: var(--as-indigo-claro); }
.border-indigo-claro { border-color: var(--as-indigo-borde) !important; }

.badge {
  font-weight: 600;
  letter-spacing: .3px;
  --bs-badge-padding-x: .75em;
  --bs-badge-padding-y: .4em;
}

/* ── Barra de navegación ────────────────────────────────────────────────── */

.navbar {
  --bs-navbar-padding-y: .875rem;
  background: rgb(255 255 255 / 88%) !important;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}

.navbar-brand {
  font-family: var(--as-display);
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: 1.25rem;
  color: var(--as-tinta);
}

.navbar .nav-link {
  font-weight: 500;
  color: var(--as-tinta-2);
  padding-inline: .875rem;
  border-radius: var(--as-radio);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus-visible { color: var(--as-tinta); background: var(--as-fondo); }
.navbar .nav-link.active { color: var(--as-tinta); font-weight: 600; }

/* ── Ritmo vertical ─────────────────────────────────────────────────────── */

/* Atlassian deja mucho aire entre bloques; el `py-5` de Bootstrap se queda
   corto en pantallas grandes. Las utilidades llevan !important, así que la
   regla lo necesita también, con más especificidad para ganar. */
@media (min-width: 992px) {
  main > section.py-5 { padding-top: 5.5rem !important; padding-bottom: 5.5rem !important; }
}

/* ── Tarjetas ───────────────────────────────────────────────────────────── */

.card {
  --bs-card-border-color: var(--as-borde);
  --bs-card-border-radius: var(--as-radio-grande);
  --bs-card-inner-border-radius: calc(var(--as-radio-grande) - 1px);
  --bs-card-spacer-x: 1.75rem;
  --bs-card-spacer-y: 1.75rem;
}

/* ── Portada: el lienzo con los seis sistemas ───────────────────────────── */

.as-lienzo {
  border-radius: var(--as-radio-grande) !important;
  box-shadow: var(--as-sombra-grande);
}

.as-ficha,
.as-sistema {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.as-ficha { border-radius: var(--as-radio) !important; }
.as-sistema { border-radius: var(--as-radio-grande) !important; }

.as-ficha:hover,
.as-sistema:hover,
.as-sistema:focus-within {
  transform: translateY(-2px);
  border-color: var(--as-indigo-borde) !important;
  box-shadow: var(--as-sombra-indigo);
}

/* El enlace de cada sistema: texto con flecha que se desplaza al pasar, el
   patrón «Learn more →» de Atlassian. */
.as-enlace {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--as-indigo);
}
.as-enlace .bi { transition: transform .18s ease; }
.as-enlace:hover .bi,
.as-enlace:focus-visible .bi { transform: translateX(3px); }

/* ── Sección oscura ─────────────────────────────────────────────────────── */

.seccion-noche { background-color: var(--as-noche); color: #fff; }
.seccion-noche .text-body-secondary { color: var(--as-noche-texto) !important; }
.seccion-noche h2 { color: #fff; }

.as-noche-etiqueta { background: var(--as-noche-3); color: #e0e7ff; }
.as-noche-icono { color: #a5b4fc; }
.as-noche-tarjeta { background: var(--as-noche-2); border: 1px solid var(--as-noche-borde); box-shadow: var(--as-sombra-grande); }
.as-noche-rotulo { color: var(--as-noche-apagado); letter-spacing: .3px; font-weight: 600; }
.as-noche-fila { background: var(--as-noche); border: 1px solid var(--as-noche-borde); }
.as-noche-fila-activa { background: var(--as-noche-3); border-color: var(--as-indigo-mas-oscuro); }
.as-noche-texto { color: var(--as-noche-texto); }
.as-noche-apagado { color: var(--as-noche-apagado); }

/* ── Precios ────────────────────────────────────────────────────────────── */

.as-precio { background: #fff; }

.as-precio-destacado {
  border-color: var(--as-indigo) !important;
  box-shadow: var(--as-sombra-indigo);
}

@media (min-width: 992px) {
  /* La tarjeta destacada sobresale un poco: es la que se quiere que se elija. */
  .as-precio-destacado { transform: translateY(-.75rem); }
}

.as-precio .display-6 {
  font-size: 2.5rem;
  letter-spacing: -1px;
}

/* ── Acordeón ───────────────────────────────────────────────────────────── */

.accordion {
  --bs-accordion-border-color: var(--as-borde);
  --bs-accordion-border-radius: var(--as-radio);
  --bs-accordion-inner-border-radius: calc(var(--as-radio) - 1px);
  --bs-accordion-btn-padding-y: 1.125rem;
  --bs-accordion-active-bg: var(--as-indigo-claro);
  --bs-accordion-active-color: var(--as-indigo-mas-oscuro);
  --bs-accordion-btn-focus-border-color: var(--as-indigo);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(24, 104, 219, .25);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23101214'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233730a3'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
}
.accordion-button { font-weight: 600; }

/* ── Pie ────────────────────────────────────────────────────────────────── */

footer h2.small { font-size: .75rem; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--as-tinta-2); }
footer .link-secondary { color: var(--as-tinta-2) !important; }
footer .link-secondary:hover { color: var(--as-tinta) !important; }

/* ── Accesibilidad y detalles ───────────────────────────────────────────── */

/* Enlace para saltar al contenido: invisible hasta que se le da el foco con
   el teclado. Sin esto, quien navega sin ratón tiene que recorrer toda la
   barra de navegación en cada página. */
.saltar-al-contenido {
  position: absolute; left: -9999px; top: 0; z-index: 1080;
  padding: .75rem 1.25rem; background: var(--as-indigo); color: #fff;
  font-weight: 600; text-decoration: none; border-radius: 0 0 var(--as-radio) 0;
}
.saltar-al-contenido:focus { left: 0; color: #fff; }

/* Documentos legales: medida de lectura corta y jerarquía marcada. Son
   textos que se escanean buscando una sección, no que se leen enteros. */
.legal h2 {
  margin-top: 3rem; padding-top: 2rem; font-size: 1.375rem;
  border-top: 1px solid var(--bs-border-color);
}
.legal h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.legal p, .legal li { line-height: 1.75; }
.legal ul { margin-top: 1rem; }
.legal li + li { margin-top: .5rem; }
.legal table { margin-top: 1.25rem; }

/* Los datos de empresa que aún faltan se ven; no se esconden. Un hueco en
   blanco en un documento legal es peor que uno que dice qué le falta. */
.pendiente {
  background: #fee2e2; color: #991b1b; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85em; font-weight: 600; padding: .1em .4em; border-radius: .25rem;
}

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* La barra fija taparía el título de la sección a la que se salta. */
:target { scroll-margin-top: 5rem; }

/* El movimiento se desactiva para quien lo ha pedido en su sistema. No es un
   adorno opcional: a algunas personas el desplazamiento les provoca mareo. */
@media (prefers-reduced-motion: reduce) {
  .as-ficha, .as-sistema, .as-enlace .bi, .btn { transition: none; }
  .as-ficha:hover, .as-sistema:hover, .as-sistema:focus-within { transform: none; }
  .as-enlace:hover .bi { transform: none; }
  .as-precio-destacado { transform: none; }
}

/* ── Pequeñas utilidades que antes iban en línea ────────────────────────── */

.as-punto { width: 9px; height: 9px; }
.as-medida { max-width: 32em; }
.as-medida-corta { max-width: 26em; }
.as-concepto { width: 40%; }

/* La comparativa en móvil: letra y celdas más compactas para que quepa sin
   desplazamiento lateral; si aun así no cabe, .table-responsive la desplaza. */
@media (max-width: 575.98px) {
  .as-comparativa { font-size: .8125rem; }
  .as-comparativa > :not(caption) > * > * { padding-inline: .25rem; }
  .as-comparativa .as-concepto { width: auto; }
  /* Los datos nunca parten («Sin tope» en dos líneas se lee mal); el nombre
     del concepto sí puede, y con eso la tabla entra en 390px sin desplazarse. */
  .as-comparativa th[scope="row"] { white-space: normal; }
}

/* ── Colección de sistemas ────────────────────────────────────────────────
   La página conserva sus seis artículos, su orden y sus enlaces. El guion
   añade una navegación por pestañas; sin JavaScript queda la cuadrícula.
   El tratamiento editorial toma como referencia la colección mostrada por
   Atlassian, pero usa la marca, los nombres y gráficos propios de AvanzaSuite.
   ───────────────────────────────────────────────────────────────────────── */

main > section:first-child {
  background: #fff !important;
}

main > section:first-child .as-lienzo {
  background: #f1e7ff !important;
  border-color: #e4d1fb !important;
  box-shadow: 0 30px 70px -35px rgb(95 43 158 / 30%);
}

main > section:first-child .as-ficha {
  background: #fff;
  border-color: #e7daf7 !important;
  box-shadow: 0 8px 25px -20px rgb(61 33 90 / 35%);
}

#sistemas {
  background: #fff;
}

@media (min-width: 992px) {
  #sistemas .row.justify-content-center.text-center {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  #sistemas .row.justify-content-center.text-center > .col-lg-8 {
    width: 100%;
  }

  #sistemas .row.justify-content-center.text-center .lead {
    max-width: 65ch;
  }
}

.as-coleccion-tabs {
  display: flex;
  gap: .25rem;
  width: max-content;
  max-width: 100%;
  padding: .375rem;
  margin: 0 auto 2.5rem;
  overflow-x: auto;
  border-radius: 3rem;
  background: #f4f5f7;
  scrollbar-width: thin;
}

.as-coleccion-tab {
  flex: 0 0 auto;
  padding: .75rem 1.125rem;
  border: 0;
  border-radius: 2.5rem;
  background: transparent;
  color: var(--as-tinta);
  font: 700 .9rem/1.2 var(--as-texto);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.as-coleccion-tab:hover:not([aria-selected="true"]) {
  background: #e3e5e9;
}

.as-coleccion-tab[aria-selected="true"] {
  background: #101214;
  color: #fff;
}

.as-coleccion-tab:focus-visible {
  outline: 3px solid var(--as-indigo);
  outline-offset: 3px;
}

#sistemas .as-coleccion-activa {
  margin-inline: 0;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--as-borde);
}

#sistemas .as-coleccion-activa > .col {
  width: 100% !important;
  padding-inline: 0;
}

#sistemas .as-coleccion-activa > .col[hidden] {
  display: none !important;
}

#sistemas .as-coleccion-activa > .col:nth-child(1) { --as-collection-wash: #ca83f4; --as-collection-ink: #25132f; }
#sistemas .as-coleccion-activa > .col:nth-child(2) { --as-collection-wash: #8dbaff; --as-collection-ink: #10234e; }
#sistemas .as-coleccion-activa > .col:nth-child(3) { --as-collection-wash: #a0e9cd; --as-collection-ink: #0b463d; }
#sistemas .as-coleccion-activa > .col:nth-child(4) { --as-collection-wash: #ffccac; --as-collection-ink: #5b281b; }
#sistemas .as-coleccion-activa > .col:nth-child(5) { --as-collection-wash: #b6a6fb; --as-collection-ink: #28205a; }
#sistemas .as-coleccion-activa > .col:nth-child(6) { --as-collection-wash: #ffc2d1; --as-collection-ink: #592233; }

#sistemas .as-coleccion-activa .as-sistema {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  grid-template-rows: auto auto minmax(5rem, 1fr) auto;
  column-gap: clamp(2rem, 5vw, 5rem);
  min-height: 390px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

#sistemas .as-coleccion-activa .as-sistema > .bi {
  grid-column: 2;
  grid-row: 1 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  isolation: isolate;
  min-height: 390px;
  overflow: hidden;
  border-radius: .75rem;
  color: var(--as-collection-ink) !important;
  background:
    radial-gradient(circle at 76% 20%, rgb(255 255 255 / 44%) 0 13%, transparent 14%),
    radial-gradient(circle at 22% 82%, rgb(255 255 255 / 27%) 0 18%, transparent 19%),
    var(--as-collection-wash);
}

#sistemas .as-coleccion-activa .as-sistema > .bi::before {
  display: grid;
  place-items: center;
  width: clamp(7rem, 13vw, 10rem);
  height: clamp(7rem, 13vw, 10rem);
  border: 1px solid rgb(255 255 255 / 65%);
  border-radius: 2rem;
  background: rgb(255 255 255 / 72%);
  box-shadow: 0 25px 50px -20px rgb(16 18 20 / 25%);
  font-size: clamp(3.5rem, 7vw, 5.5rem);
}

#sistemas .as-coleccion-activa .as-sistema > .bi::after {
  content: "AVANZASUITE  /  TU ESPACIO";
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  padding: .55rem .8rem;
  border-radius: .3rem;
  background: #17191d;
  color: #fff;
  font: 700 .7rem/1 var(--as-texto);
  letter-spacing: .08em;
}

#sistemas .as-coleccion-activa .as-sistema > .as-rotulo {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  margin: 1.5rem 0 1rem !important;
  color: var(--as-tinta);
}

#sistemas .as-coleccion-activa .as-sistema > h3 {
  grid-column: 1;
  grid-row: 2;
  margin: 0 0 1rem !important;
  font-size: clamp(2.4rem, 4vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -.04em;
}

#sistemas .as-coleccion-activa .as-sistema > p.text-body-secondary {
  grid-column: 1;
  grid-row: 3;
  max-width: 39ch;
  margin: 0 !important;
  color: var(--as-tinta-2) !important;
  font-size: 1.125rem;
  line-height: 1.6;
}

#sistemas .as-coleccion-activa .as-sistema > .as-enlace {
  grid-column: 1;
  grid-row: 4;
  align-self: start;
  width: max-content;
  margin: 0 0 1.5rem !important;
  font-size: 1rem;
}

@media (max-width: 767.98px) {
  .as-coleccion-tabs {
    max-width: calc(100vw - 2rem);
    margin-bottom: 1.75rem;
    border-radius: 1.5rem;
  }

  .as-coleccion-tab { padding: .7rem .9rem; font-size: .85rem; }

  #sistemas .as-coleccion-activa .as-sistema {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto;
    min-height: 0;
    row-gap: .5rem;
  }

  #sistemas .as-coleccion-activa .as-sistema > .as-rotulo { grid-row: 1; margin: 0 0 .5rem !important; }
  #sistemas .as-coleccion-activa .as-sistema > h3 { grid-row: 2; font-size: clamp(2.2rem, 8vw, 3rem); }
  #sistemas .as-coleccion-activa .as-sistema > p.text-body-secondary { grid-row: 3; }
  #sistemas .as-coleccion-activa .as-sistema > .as-enlace { grid-row: 4; margin: .75rem 0 1.25rem !important; }
  #sistemas .as-coleccion-activa .as-sistema > .bi {
    grid-column: 1;
    grid-row: 5;
    min-height: 250px;
  }

  #sistemas .as-coleccion-activa .as-sistema > .bi::before {
    width: 7rem;
    height: 7rem;
    font-size: 3.5rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  #sistemas .as-coleccion-activa > .col:not([hidden]) .as-sistema {
    animation: as-coleccion-entrada .35s ease-out both;
  }

  @keyframes as-coleccion-entrada {
    from { opacity: .45; translate: 0 .75rem; }
    to { opacity: 1; translate: 0 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .as-coleccion-tab { transition: none; }
}