/* Sección "Aplicaciones" para los mirrors de los verticales.
   GENERADO por scripts/extract_aplicaciones_css.py desde goErp.css — no editar a mano:
   los retoques propios de las landings van en aplicaciones-landing.css. */
#aplicaciones {
  font-family: "Poppins", sans-serif !important;
  font-size: clamp(0px, 0.78125vw, 10px);
  padding-bottom: 12em;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#aplicaciones .conector {
  display: flex;
  height: 6.8em;
  width: 1px;
  border-left: 1px solid #b2bcc8;
}
#aplicaciones .etiqueta {
  font-size: 1.64em;
  display: flex;
  margin-bottom: 1.4em;
  font-weight: 500;
  border: 1px solid #b2bcc8;
  padding: 0.1em 0.7em;
  border-radius: 0.3em;
}
#aplicaciones h2 {
  text-align: center;
  line-height: 1.1em;
  font-size: 4em;
  font-weight: 600;
  margin-bottom: 0.4em;
}
#aplicaciones h2 span {
  font-style: italic;
  color: #3985ff;
}
#aplicaciones p {
  font-size: 1.6em;
  margin-bottom: 1.2em;
  font-weight: 500;
  line-height: 1.2em;
}
#aplicaciones .contenedor {
  background-color: #eff4fe;
  width: 111.3em;
  border-radius: 2.9em;
  padding: 3.6em 3.6em 0 3.6em;
  margin-bottom: 3.4em;
  font-size: 0.92em;
}
#aplicaciones .contenedor .filtros {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2.6em;
}
#aplicaciones .contenedor .filtros .tipo {
  display: flex;
  gap: 1.1em;
}
#aplicaciones .contenedor .filtros .tipo .seleccion {
  display: none;
}
#aplicaciones .contenedor .filtros .tipo > ul {
  display: flex;
  gap: 1.1em;
}
#aplicaciones .contenedor .filtros .tipo > ul li a {
  display: flex;
  color: #223776;
  font-size: 1.7em;
  border: solid 1px #223776;
  padding: 0.25em 1em;
  border-radius: 1.2em;
  transition: all 0.2s ease;
  font-weight: 500;
}
#aplicaciones .contenedor .filtros .tipo > ul li a:not(.active):hover {
  background-color: #223776;
  color: #fff;
  cursor: pointer;
}
#aplicaciones .contenedor .filtros .tipo > ul li a.active {
  background-color: #3985ff;
  border: solid 1px #3985ff;
  color: #fff;
}
#aplicaciones .contenedor .filtros .industria {
  position: relative;
}
#aplicaciones .contenedor .filtros .industria .seleccion {
  display: flex;
  align-items: center;
  gap: 0.8em;
  color: #223776;
  font-size: 1.7em;
  border: solid 1px #223776;
  padding: 0.25em 0.8em 0.25em 1em;
  border-radius: 0.3em;
  transition: all 0.2s ease;
  font-weight: 500;
  cursor: pointer;
}
#aplicaciones .contenedor .filtros .industria .seleccion .desplegar {
  background-color: #223776;
}
#aplicaciones .contenedor .filtros .industria .seleccion::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.7em;
  height: 0.7em;
}
#aplicaciones .contenedor .filtros .industria > ul {
  display: none;
  position: absolute;
  top: calc(100% + 1em);
  background-color: #fff;
  border: solid 1px #b2bcc8;
  border-radius: 1.2em;
  overflow: hidden;
  z-index: 100;
}
#aplicaciones .contenedor .filtros .industria > ul li a {
  display: flex;
  color: #223776;
  font-size: 1.6em;
  padding: 0.25em 1.2em;
  transition: all 0.2s ease;
  font-weight: 600;
  white-space: nowrap;
}
#aplicaciones .contenedor .filtros .industria > ul li a:hover, #aplicaciones .contenedor .filtros .industria > ul li a.active {
  background-color: #3985ff;
  color: #fff;
}
#aplicaciones .contenedor .filtros .industria > ul li:not(:last-child) {
  border-bottom: solid 1px #efefef;
}
#aplicaciones .contenedor .filtros .industria.abierto .seleccion {
  background-color: #223776;
  color: #fff;
}
#aplicaciones .contenedor .filtros .industria.abierto .seleccion .desplegar {
  background-color: #fff;
}
#aplicaciones .contenedor .filtros .industria.abierto > ul {
  display: block;
}
@media (hover: hover) and (pointer: fine) {
#aplicaciones .contenedor .filtros .industria:hover:not(.cerrado) .seleccion {
    background-color: #223776;
    color: #fff;
  }
#aplicaciones .contenedor .filtros .industria:hover:not(.cerrado) .seleccion .desplegar {
    background-color: #fff;
  }
#aplicaciones .contenedor .filtros .industria:hover:not(.cerrado) > ul {
    display: block;
  }
}
#aplicaciones .contenedor .filtros .industria > ul {
  right: 0;
}
#aplicaciones .contenedor .listaDeAplicaciones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4em;
  max-height: 51em;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  scrollbar-width: 3.3em;
  scrollbar-color: #3a84ff #dbeafe;
  padding: 0 2em 1.4em 0;
  /* Chrome, Edge, Safari */
}
#aplicaciones .contenedor .listaDeAplicaciones::-webkit-scrollbar {
  width: 3.3em; /* ancho de la barra */
  -webkit-appearance: none;
}
#aplicaciones .contenedor .listaDeAplicaciones::-webkit-scrollbar-track {
  background: #dbeafe; /* celeste clarito de fondo */
  border-radius: 1.1em;
  width: 2.2em;
  margin: 0.2em 0; /* para que no toque los bordes arriba/abajo */
}
#aplicaciones .contenedor .listaDeAplicaciones::-webkit-scrollbar-thumb {
  background-color: #3a84ff; /* azul del thumb */
  border-radius: 1.65em;
  border: 3.3em solid #dbeafe; /* simula el "padding" alrededor del thumb, dando el efecto flotante */
}
#aplicaciones .contenedor .listaDeAplicaciones::-webkit-scrollbar-thumb:hover {
  background-color: #3a84ff; /* un poco más oscuro al hacer hover */
}
#aplicaciones .contenedor .listaDeAplicaciones li {
  background-color: #fff;
  border-radius: 1.9em;
  padding: 2.3em 2.6em;
}
#aplicaciones .contenedor .listaDeAplicaciones li .wrapper {
  display: flex;
  align-items: center;
  gap: 1.9em;
  margin-bottom: 1.1em;
}
#aplicaciones .contenedor .listaDeAplicaciones li .wrapper img {
  width: 6.9em;
  height: 6.9em;
  border-radius: 0.48em;
}
#aplicaciones .contenedor .listaDeAplicaciones li .wrapper h5 {
  font-size: 2.2em;
  font-weight: 600;
  line-height: 1.2em;
  color: #223776;
  margin: 0;
}
#aplicaciones .contenedor .listaDeAplicaciones li p {
  font-size: 1.3em;
  font-weight: 400;
  line-height: 1.2em;
  color: #223776;
  margin: 0;
}
#aplicaciones .cta {
  font-size: 1.56em;
  background-color: #3985ff;
  color: #fff;
  padding: 0.45em 1.2em;
  border-radius: 2em;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5em;
}
#aplicaciones .cta:hover {
  background-color: #1b387a;
}
#aplicaciones .cta .flecha {
  background-color: #fff;
}
@media screen and (max-width: 640px) {
#aplicaciones {
    font-size: clamp(10px, 3.125vw, 20px);
    padding-bottom: 3em;
  }
#aplicaciones .conector {
    height: 4.9em;
  }
#aplicaciones .etiqueta {
    font-size: 1.4em;
  }
#aplicaciones h2 {
    font-size: 1.93em;
    max-width: 8.8em;
  }
#aplicaciones p {
    font-size: 1em;
    text-align: center;
    max-width: 25em;
    margin-bottom: 1.8em;
  }
#aplicaciones .contenedor {
    width: 29em;
    border-radius: 1.1em;
    padding: 1.05em 1.17em 0 1.17em;
    font-size: 1em;
  }
#aplicaciones .contenedor .filtros {
    margin-bottom: 0.94em;
    justify-content: flex-start;
    gap: 0.5em;
  }
#aplicaciones .contenedor .filtros .tipo {
    position: relative;
  }
#aplicaciones .contenedor .filtros .tipo .seleccion {
    display: flex;
    align-items: center;
    gap: 0.8em;
    color: #223776;
    font-size: 1.7em;
    border: solid 1px #223776;
    padding: 0.25em 0.8em 0.25em 1em;
    border-radius: 0.3em;
    transition: all 0.2s ease;
    font-weight: 500;
    cursor: pointer;
  }
#aplicaciones .contenedor .filtros .tipo .seleccion .desplegar {
    background-color: #223776;
  }
#aplicaciones .contenedor .filtros .tipo .seleccion::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.7em;
    height: 0.7em;
  }
#aplicaciones .contenedor .filtros .tipo > ul {
    display: none;
    position: absolute;
    top: calc(100% + 1em);
    background-color: #fff;
    border: solid 1px #b2bcc8;
    border-radius: 1.2em;
    overflow: hidden;
    z-index: 100;
  }
#aplicaciones .contenedor .filtros .tipo > ul li a {
    display: flex;
    color: #223776;
    font-size: 1.6em;
    padding: 0.25em 1.2em;
    transition: all 0.2s ease;
    font-weight: 600;
    white-space: nowrap;
  }
#aplicaciones .contenedor .filtros .tipo > ul li a:hover, #aplicaciones .contenedor .filtros .tipo > ul li a.active {
    background-color: #3985ff;
    color: #fff;
  }
#aplicaciones .contenedor .filtros .tipo > ul li:not(:last-child) {
    border-bottom: solid 1px #efefef;
  }
#aplicaciones .contenedor .filtros .tipo.abierto .seleccion {
    background-color: #223776;
    color: #fff;
  }
#aplicaciones .contenedor .filtros .tipo.abierto .seleccion .desplegar {
    background-color: #fff;
  }
#aplicaciones .contenedor .filtros .tipo.abierto > ul {
    display: block;
  }
#aplicaciones .contenedor .filtros .tipo {
    display: block;
    gap: 0;
  }
}
@media screen and (max-width: 640px) and (hover: hover) and (pointer: fine) {
#aplicaciones .contenedor .filtros .tipo:hover:not(.cerrado) .seleccion {
    background-color: #223776;
    color: #fff;
  }
#aplicaciones .contenedor .filtros .tipo:hover:not(.cerrado) .seleccion .desplegar {
    background-color: #fff;
  }
#aplicaciones .contenedor .filtros .tipo:hover:not(.cerrado) > ul {
    display: block;
  }
}
@media screen and (max-width: 640px) {
#aplicaciones .contenedor .filtros .tipo .seleccion {
    display: flex;
    font-size: 0.8em;
  }
#aplicaciones .contenedor .filtros .tipo > ul {
    display: none;
    left: 0;
    gap: 0;
    border-radius: 0.8em;
    top: calc(100% + 0.35em);
  }
#aplicaciones .contenedor .filtros .tipo > ul li a {
    padding: 0.5em 1.2em;
    font-size: 0.71em;
    border: none;
    border-radius: 0;
    font-weight: 600;
  }
#aplicaciones .contenedor .filtros .tipo > ul li a:not(.active):hover {
    background-color: #3985ff;
    color: #fff;
  }
#aplicaciones .contenedor .filtros .tipo > ul li a.active {
    background-color: #3985ff;
    border: none;
    color: #fff;
  }
#aplicaciones .contenedor .filtros .tipo > ul li:not(:last-child) {
    border-bottom: solid 1px #efefef;
  }
#aplicaciones .contenedor .filtros .tipo.abierto > ul {
    display: block;
  }
#aplicaciones .contenedor .filtros .industria .seleccion {
    font-size: 0.8em;
  }
#aplicaciones .contenedor .filtros .industria > ul {
    border-radius: 0.8em;
    top: calc(100% + 0.35em);
  }
#aplicaciones .contenedor .filtros .industria > ul li a {
    padding: 0.5em 1.2em;
    font-size: 0.71em;
  }
#aplicaciones .contenedor .listaDeAplicaciones {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.55em;
    padding-bottom: 1.05em;
  }
#aplicaciones .contenedor .listaDeAplicaciones li {
    padding: 0.94em 1.07em;
    border-radius: 0.9em;
  }
#aplicaciones .contenedor .listaDeAplicaciones li .wrapper {
    gap: 0.78em;
  }
#aplicaciones .contenedor .listaDeAplicaciones li .wrapper img {
    width: 2.6em;
    height: 2.6em;
  }
#aplicaciones .contenedor .listaDeAplicaciones li .wrapper h5 {
    font-size: 0.9em;
  }
#aplicaciones .contenedor .listaDeAplicaciones li p {
    font-size: 0.6em;
    text-align: left;
  }
#aplicaciones .cta {
    display: none;
    font-size: 0.8em;
  }
}