/* Catalog */
#catalog {
    position: relative;
    overflow: hidden;
    color: #fff;
    font-style: italic;
    text-align: start;
    font-family: 'Montserrat', montserrat, sans-serif;
    text-transform: initial;
    background: url("../../resources/images/bg/bg-catalog.png");
    background-size: cover; /* Asegura que la imagen cubra todo el contenedor */
    background-position: bottom center; /* Alinea la imagen en la parte inferior y centrada horizontalmente */
    margin: 0 !important; /* Elimina todos los márgenes */
    padding: 0 !important; /* Elimina todos los rellenos */
    line-height: 1;
    border-top: solid 0px #07c465;
    border-bottom: solid 0px #09792b;
    box-shadow: inset 0px 0px 0px 0px #fff, inset 0px 0px 0px 0px #fff;
    max-height: max-content;
}

/* Pseudo-elemento antes para superponer color con opacidad sobre la imagen */
#catalog::before {
    content: ''; /* Necesario para el pseudo-elemento */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #452856; /* Color de superposición */
    opacity: 0.8; /* Controla la opacidad de la imagen (ajusta entre 0 y 1) */
    pointer-events: none; /* Evita que interfiera con los clics */
    z-index: 1; /* Asegura que la capa esté encima de la imagen pero debajo del contenido */
}

/* Asegúrate de que el contenido en #catalog quede encima de la superposición */
#catalog .container {
    position: relative;
    z-index: 2; /* Asegura que el contenido se muestre por encima de la superposición */
}

#catalog * {
    margin: 0; /* Asegurarse que todos los elementos dentro de #catalog no tengan margen */
    padding: 0; /* Asegurarse que todos los elementos dentro de #catalog no tengan padding */
    line-height: 1; /* Controlar la altura de la línea */
}

#catalog .container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    border: 0px solid #ccc;
    border-radius: 5px;
}

#catalog .container ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;
    padding: 0px;
    margin: 0;
    border: 0px solid #ccc;
    border-radius: 5px;
}

#catalog .container ul li {
    flex: 1 1 auto;
    text-align: start;
    padding: 10px;
    border: 0px solid #ccc;
}

#catalog .container ul li.logo-column {
    flex: 1 1 18%;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: flex-start;
    padding: 10px;
    border: 0px solid #14cc3c;
}

#catalog .container ul li.logo-column img {
    width: 35%;
    height: auto;
}

#catalog .container ul li.logo-column .h2-logo {        /* Titulo del logo - Asicon Consulting */
    font-size: 35px;
    margin-top: 30px;
    margin-bottom: 10px;
    color: #fdfdfd;
    text-align: start;
    line-height: 1;
}

#catalog .container ul li.logo-column .h3-logo {        /* Slogan de la empresa */ 
    font-size: 18px;
    margin-top: 0;
    color: #ffffff;
    text-align: start;
    line-height: 1.5;
}

#catalog .container ul li.options-column .h2-options {      /* Titulo del cada pilar o columna */
    font-size: 18px;
    text-decoration: none;
    margin-top: 0;
    margin-bottom: 20px;
    color: #ffffff;
    font-weight: 900;
    text-align: start;
    border: 0px solid #ccc;
}

#catalog .container ul li.options-column a {            /* Opciones del catalogo */
    text-decoration: none;
    font-style: normal;
    color: #bbeaf1;
    display: block;
    padding: 10px 0;
    font-size: 14px;
    text-align: start;
    line-height: 0.5;
    margin-left: 1.5em;
    border: 0px solid #ccc;
}

/* Estilo cuando el enlace está en hover */
#catalog .container ul li.options-column a:hover{
    color: #252323; /* Cambia el color del texto al pasar el cursor */
    background-color: rgb(255, 255, 255); /* Añade un color de fondo suave al hover */
    padding-left: 0.5em;
    padding-right: 0.5em;
    text-decoration: solid;
    font-weight: 600;
    border-radius: 20px;
    text-decoration: underline; /* Opcional: subraya el texto al pasar el cursor */
    display: inline-block;
}

#catalog .container ul li.options-column a:active,
#catalog .container ul li.options-column a:focus,
#catalog .container ul li.options-column a:focus-visible {
    outline: none;
    box-shadow: none;
    border: none;
}

#catalog .container ul li.options-column:active,
#catalog .container ul li.options-column:focus {
    outline: none;
    box-shadow: none;
    border: none;
}

#catalog .container ul li.spacer-column {
    flex: 1 1 10%;
    border: 0px solid #ccc;
}

#catalog h1 {
    text-align: start;
    color: #fff;
}

#catalog .h2-title {        /* Título de cada bloque de opciones del menu */
    font-size: 16px;
    font-weight: 600;
    margin-top: 0;
    padding-bottom: 0;
    margin-bottom: 10px;
    margin-left: 10px;
    text-decoration: underline;
    color: #ffffff;
    text-align: start;
    border: 0px solid #ccc;
}

#catalog h3 {
    text-align: start;
    color: #ffffff;
}

#catalog h3 {
    font-size: 12px;
}

/* New spacer styles */
.spacer {
    height: 20px;
}

.spacer-line {
    height: 2em;
    background-color: transparent;
    margin: 0 0;
}

.main-heading {                     /* Titulo principal del catalogo de servicios*/
    font-size: 30px !important;
    margin-top: 30px;
    margin-bottom: 10px;
    color: #fdfdfd;
    text-align: start;
    line-height: 1;
}

.div-btn-style {
    display:inline-flex !important; /* Cambiar a inline-flex para que el botón solo ocupe el espacio necesario */
    justify-content: center !important; /* Centra el contenido dentro del botón */
    align-items: center !; /* Centra el contenido verticalmente */
    background-color: #452856 !important; /* Color de fondo del botón */
    color: #fff !important; /* Color del texto del botón */
    text-decoration: none !important; /* Elimina el subrayado del enlace */
    border-radius: 25px !important; /* Bordes redondeados */
    line-height: 2.5em !important;
    width:50% !important; /* El botón solo ocupará el espacio necesario para su contenido */
    border: 1px solid #ffffff !important;

}

.div-btn-style:hover {
    background-color: #ec2526 !important; /* Color de fondo al pasar el mouse sobre el botón */
    border-color: transparent !important;
}

/* ==============================
   Responsive
============================== */

/* ≤1400px → 5 columnas */
@media (max-width: 1400px) {
  .asicon-icons-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
  }

  .asicon-icon-card {
    padding: 16px 8px;
  }
}

/* ≤1100px → 4 columnas */
@media (max-width: 1100px) {
  .asicon-icons-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  .asicon-icon-card__title {
    font-size: 13px;
  }
}

/* ≤900px → 3 columnas */
@media (max-width: 900px) {
  .asicon-icons-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .asicon-icon-card {
    padding: 14px 6px;
  }

  .asicon-icon-card__icon {
    width: 70%;
  }
}

/* ≤600px → 2 columnas */
@media (max-width: 600px) {
  .asicon-icons-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .asicon-icon-card {
    padding: 12px 6px;
    border-radius: 10px;
  }

  .asicon-icon-card__title {
    font-size: 12px;
  }

  .asicon-icon-card__description {
    font-size: 0.8rem;
  }
}