:root {
  --ic-gray-light: #7e8283;
  --ic-gray-dark: #3c434d;
  --ic-green: #03cd5c;
  --ic-green-light: #f0fdf6;
  --ic-lightgray: #f5f5f5;
  --ic-blue-light: #0296d6;
  --ic-blue: #006eb9;
  --ic-blue-dark: #053050;
  --fin-shadow: 0 10px 24px rgba(17, 24, 39, 0.08);
  --ic-white: #ffffff;

  --ic-radius-sm: 8px;
  --ic-radius-md: 14px;
  --ic-radius-lg: 22px;

  --ic-transition: 0.3s ease;
}

.ic-socio-container-card-dos {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  margin-top: 40px;
  height: auto;
}

@media (max-width: 900px) {
  .ic-socio-container-card-dos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 25px;
    margin-top: 25px;
  }
}

/* ---- TARJETA ---- */
.ic-socio-card-dos {
  width: 30%;
  background: var(--ic-white);
  border-radius: var(--ic-radius-md);
  padding: 24px 20px;
  text-align: center;

  box-shadow: var(--ic-shadow-light);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
  cursor: default;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-height: 204px;
}

/* ANIMACIÓN HOVER */
.ic-socio-card-dos:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.ic-socio-card-dos img {
  width: 60px;
}

@media (max-width: 1400px) {
  .ic-socio-card-dos {
    min-height: 240px;
  }
}

@media (max-width: 900px) {
  .ic-socio-card-dos {
    width: 100%;
  }
}

/* ---- LISTA CUSTOMER PORTAL ---- */
/* Ítems (columna derecha) */
.lista-customer-portal-items {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
  row-gap: 20px;
  margin-top: 20px;
  column-gap: 20px;
  margin-bottom: 40px;
}

/* Cada item */
.customer-portal-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 8px 12px;
  font-size: 15px;
  line-height: 1.2;
  color: var(--text);
  text-align: left;
  transition: all 0.3s ease;
  width: 45%;
}
.customer-portal-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.15);
}

/* Ícono check */
.customer-portal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 205, 92, 0.1); /* círculo con leve verde */
  color: var(--green);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.customer-portal-icon i {
  font-size: 14px;
  line-height: 1;
}

@media (max-width: 900px) {
  .lista-customer-portal-items {
    width: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
  }

  .customer-portal-item {
    width: 100%;
  }
}

/* ---- LISTA Análisis de Necesidades para tu Compañía  ---- */
/* Ítems (columna derecha) */
.lista-analisis-de-necesidades-items {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
  row-gap: 20px;
  margin-top: 20px;
  column-gap: 20px;
  margin-bottom: 40px;
}

/* Cada item */
.analisis-de-necesidades-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 8px 12px;
  font-size: 15px;
  line-height: 1.2;
  color: var(--text);
  text-align: left;
  transition: all 0.3s ease;
  width: 100%;
}
.analisis-de-necesidades-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.15);
}

/* Ícono check */
.analisis-de-necesidades-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 205, 92, 0.1); /* círculo con leve verde */
  color: var(--green);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.analisis-de-necesidades-icon i {
  font-size: 14px;
  line-height: 1;
}

@media (max-width: 900px) {
  .lista-analisis-de-necesidades-items {
    width: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
  }

  .analisis-de-necesidades-item {
    width: 100%;
  }
}

.ic-solutions-container-2-extras {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  gap: 25px;
  margin-top: 20px;
}

@media (max-width: 820px) {
  .ic-solutions-container-2-extras {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 25px;
    margin-top: 25px;
  }
}

.ic-solutions-container-2-extras .ic-solutions-card {
  width: 30%;
  min-height: 150px;
}

@media (max-width: 820px) {
  .ic-solutions-container-2-extras .ic-solutions-card {
    width: 100%;
  }
}

.supp-and-maint-ecosistem-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 20px;
  padding: 24px;
  border-radius: var(--ic-radius-md);
  width: 100%;
  height: 300px;
  background-color: var(--ic-green);
  margin-bottom: 60px;
}

@media (max-width: 980px) {
  .supp-and-maint-ecosistem-section {
    width: 100%;
    height: 360px;
  }
}

/*Soluciones*/
.soluciones-support {
  background: #f5f5f5;
  padding: 0px;
  border-radius: var(--ic-radius-lg);
  margin: 25px auto;
}
.soluciones-support h4 {
  font-size: 18px !important;
  margin-bottom: 0px !important;
}
.soluciones-support h2 {
  font-size: 34px !important;
  margin-bottom: 14px !important;
  color: var(--ic-gray-dark) !important;
  padding: 0 10px 0 0;
  margin-top: 30px !important;
}
.soluciones-support title {
  vertical-align: middle !important;
  height: auto;
}
.soluciones-support .choose-icon {
  width: 40px !important;
  height: 40px !important;
  background-color: var(--ic-gray-dark);
}
.soluciones-support .choose-icon img {
  width: 80% !important;
  height: 80% !important;
}
.h8-choose-content-wrapper {
  margin-inline-start: 20px;
}
.soluciones-support .choose-content {
  display: flex;
  align-items: center; /* Centra verticalmente el icono y el h4 */
  gap: 12px; /* opcional */
}
.soluciones-support .choose-banner {
  width: auto;
  height: auto;
}
.h8-choose-content-wrapper {
  padding: 30px 0;
}

@media (max-width: 767px) {
  .soluciones-support .h8-choose-banner img {
    display: none;
  }
}
@media (max-width: 767px) {
  .ic-integral-icon {
    display: none;
  }
}
.soporteman .text-btn {
  border: solid 1px var(--ic-gray-dark);
  padding: 4px 15px;
  border-radius: 25px;
  margin-bottom: 5px;
}
/* =============================== */
/*   SECCIÓN customer portal   */
/* =============================== */
.project-item.h4-project-item .project-img {
  height: auto !important;
  border-radius: 10px;
 
}
.customer .container {
  background-color: #f5f5f5;
  border-radius: var(--ic-radius-lg);
  padding: 0 24px;
  z-index: -1 !important;
  overflow: hidden;
}
/* el bloque sticky de la izquierda */
.customer .sec-heading {
  position: sticky;
  background: #f5f5f5; /* opcional, para que se vea sólido */
}

/* las cards de la derecha por debajo */
.customer .project-item {
  position: relative;
  z-index: 1;
}

.customer h2 {
  font-size: 34px;
  margin-bottom: 14px !important;
  color: var(--ic-gray-dark) !important;
  padding: 0 10px 0 0;
  margin-top: 30px !important;
}
.customer .tj-sticky-panel img {
  height: 40px !important;
  width: 40px;
}
.customer .project-img:before {
  background: #ffffff !important;
}
.customer h3 {
  font-size: 20px !important;
  font-weight: 600 !important;
  width: 100%;
  margin: 60px 20px !important;
  max-width: 500px !important;
  height: 30px !important;
  line-height: 8em !important;
  top: 30px;
}
.customer .project-content {
  margin: 0px !important;
  padding: 0px !important;
}
.customer .project-item.h4-project-item {
  padding: 0px !important;
}

/* Ajustes para <= 1025px */
@media (max-width: 1025px) {
  /* 1) Ocultar la imagen del portal (celu) */
  .ic-portal-section .ic-portal-figure,
  .ic-portal-section .ic-portal-phone {
    display: none;
  }

  /* 2) Estructura general en columna (título, subtítulo, columnas) */
  .ic-portal-section .ic-portal-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  /* 3) Las columnas izquierda y derecha pasan a ser contenedores flex
        para poner los recuadros uno al lado del otro */
  .ic-portal-section .ic-portal-col-left,
  .ic-portal-section .ic-portal-col-right {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
  }

  /* 4) Cada recuadro ocupa 50% aprox (dos por fila) */
  .ic-portal-section .ic-portal-item {
    flex: 1 1 calc(50% - 16px);
  }

  /* 5) Que los recuadros ocupen el ancho del item con padding */
  .ic-portal-section .ic-portal-card {
    width: 100%;
    box-sizing: border-box;
    padding: 24px; /* si preferís 14px, cámbialo acá :) */
  }

  /* 6) Quitar flechas, líneas y círculos (según cómo estén hechos) */
  .ic-portal-section .ic-portal-card::after,
  .ic-portal-section .ic-portal-card::before,
  .ic-portal-section .ic-portal-item::before,
  .ic-portal-section .ic-portal-item::after,
  .ic-portal-section .ic-portal-col-left::before,
  .ic-portal-section .ic-portal-col-right::before {
    content: none !important;
    display: none !important;
    background: none !important;
  }
}
 .h7-project-wrapper {
    max-width: 870px;
    margin-inline-start: auto;
    padding: 110px 0 0 0;
   
}


.section-customer-portal-container{
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: start;
  align-items: center;
  background-color:#f5f5f5;
  padding: 20px;
}

.container-customer-portal-content{
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: space-evenly;
  align-items: center;
}

.container-customer-portal-content-card{
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 40px;
  gap: 20px;
}

.container-customer-portal-content-img{
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 40px;
}

.customer-portal-content-img{
  width: 50%;
  height: auto;
}

@media (max-width: 760px) {
  .customer-portal-content-img{
    width: 100%;
  }
}

.customer-portal-card{
  display: flex;
  flex-direction: row;
  height: 80px;
  width: 320px;
  justify-content: start;
  align-items: center;
  gap: 20px;
  font-size: 20px;
  font-weight: 700;
  background-color: white;
  border-radius: 15px;
  padding-left: 20px;
  padding-right: 20px;
}