/* =====================================================
   HOME MODAL - ECOSISTEMA SANBOSI
===================================================== */

:root{
  /* Fondo oscuro detrás del modal */
  --eco-modal-overlay-color: rgba(2,6,23,0.55);

  /* Modal escritorio */
  --eco-modal-width-desktop: min(200vw, 1250px);
  --eco-modal-height-desktop: min(88dvh, 780px);
  --eco-modal-padding-bottom-desktop:240px;
  --eco-modal-padding-bottom-mobile:260px;
  --eco-modal-bottom-space-desktop: 30px;
  --eco-modal-bottom-space-mobile: 30px;
  --eco-modal-top-desktop: 0px;
  --eco-modal-left-desktop: 0px;

  /* Modal móvil */
  --eco-modal-width-mobile: min(100vw, 420px);
  --eco-modal-height-mobile: min(88dvh, 900px);
  --eco-modal-top-mobile: 0px;
  --eco-modal-left-mobile: 0px;

  /* Estilo modal */
  --eco-modal-bg: #ffffff;
  --eco-modal-radius: 22px;
  --eco-modal-border-width: 0px;
  --eco-modal-border-color: transparent;
  --eco-modal-shadow: 0 30px 90px rgba(0,0,0,0.35);

  /* X escritorio */
  --eco-close-top-desktop: 18px;
  --eco-close-right-desktop: 22px;
  --eco-close-size-desktop: 34px;
  --eco-close-color: #111827;
  --eco-close-bg: transparent;

  /* X móvil */
  --eco-close-top-mobile: 18px;
  --eco-close-right-mobile: 22px;
  --eco-close-size-mobile: 34px;

  /* Logo modal escritorio */
--eco-logo-width-desktop: 150px;
--eco-logo-top-desktop: 28px;
--eco-logo-left-desktop: 50%;
--eco-logo-translate-x-desktop: -50%;

/* Logo modal móvil */
--eco-logo-width-mobile: 110px;
--eco-logo-top-mobile: 28px;
--eco-logo-left-mobile: 50%;
--eco-logo-translate-x-mobile: -50%;

/* Título modal escritorio */
--eco-title-top-desktop: 170px;
--eco-title-left-desktop: 50%;
--eco-title-translate-x-desktop: -50%;
--eco-title-width-desktop: 90%;

--eco-title-small-size-desktop: 22px;
--eco-title-small-color: #071a44;

--eco-title-blue-size-desktop: 44px;
--eco-title-blue-color: #0072ff;

--eco-title-line-height: 0.95;
--eco-title-weight: 900;
--eco-title-align: center;
--eco-title-gap: 4px;

/* Título modal móvil */
--eco-title-top-mobile: 135px;
--eco-title-left-mobile: 50%;
--eco-title-translate-x-mobile: -50%;
--eco-title-width-mobile: 90%;

--eco-title-small-size-mobile: 22px;
--eco-title-blue-size-mobile: 38px;

/* Subtítulo modal escritorio */
--eco-subtitle-top-desktop: 260px;
--eco-subtitle-left-desktop: 50%;
--eco-subtitle-translate-x-desktop: -50%;
--eco-subtitle-width-desktop: 620px;
--eco-subtitle-size-desktop: 17px;

/* Subtítulo modal móvil */
--eco-subtitle-top-mobile: 225px;
--eco-subtitle-left-mobile: 50%;
--eco-subtitle-translate-x-mobile: -50%;
--eco-subtitle-width-mobile: 86%;
--eco-subtitle-size-mobile: 14px;

/* Subtítulo estilo */
--eco-subtitle-color: #1f2937;
--eco-subtitle-line-height: 1.45;
--eco-subtitle-weight: 400;
--eco-subtitle-align: center;

/* Card ¿Qué es Grupo Sanbosi? - Escritorio */
--eco-info-card-width-desktop: 350px;
--eco-info-card-height-desktop: 230px;
--eco-info-card-top-desktop: 330px;
--eco-info-card-left-desktop: 70px;

/* Card ¿Qué es Grupo Sanbosi? - Móvil */
--eco-info-card-width-mobile: 86%;
--eco-info-card-height-mobile: 150px;
--eco-info-card-top-mobile: 290px;
--eco-info-card-left-mobile: 50%;
--eco-info-card-translate-x-mobile: -50%;

/* Estilo card */
--eco-info-card-bg: rgba(231, 235, 240, 0.92);
--eco-info-card-radius: 16px;
--eco-info-card-border-width: 0px;
--eco-info-card-border-color: transparent;
--eco-info-card-shadow: 0 12px 30px rgba(15,23,42,0.08);

/* Icono */
--eco-info-icon-size-desktop: 58px;
--eco-info-icon-top-desktop: 28px;
--eco-info-icon-left-desktop: 32px;

--eco-info-icon-size-mobile: 46px;
--eco-info-icon-top-mobile: 22px;
--eco-info-icon-left-mobile: 22px;

/* Título */
--eco-info-title-size-desktop: 18px;
--eco-info-title-top-desktop: 105px;
--eco-info-title-left-desktop: 32px;
--eco-info-title-color: #0046b8;

--eco-info-title-size-mobile: 14px;
--eco-info-title-top-mobile: 25px;
--eco-info-title-left-mobile: 84px;

/* Texto */
--eco-info-text-size-desktop: 15px;
--eco-info-text-top-desktop: 140px;
--eco-info-text-left-desktop: 32px;
--eco-info-text-width-desktop: 280px;
--eco-info-text-color: #1f2937;
--eco-info-text-line-height: 1.45;

--eco-info-text-size-mobile: 12px;
--eco-info-text-top-mobile: 58px;
--eco-info-text-left-mobile: 84px;
--eco-info-text-width-mobile: calc(100% - 105px);

/* Card ¿Cómo funciona? - Escritorio */
--eco-steps-card-width-desktop: clamp(500px, 52vw, 650px);
--eco-steps-card-height-desktop: 230px;
--eco-steps-card-top-desktop: 330px;
--eco-steps-card-left-desktop: clamp(390px, 40vw, 450px);

/* Card ¿Cómo funciona? - Móvil */
--eco-steps-card-width-mobile: 86%;
--eco-steps-card-height-mobile: 260px;
--eco-steps-card-top-mobile: 465px;
--eco-steps-card-left-mobile: 50%;
--eco-steps-card-translate-x-mobile: -50%;

/* Estilo card ¿Cómo funciona? */
--eco-steps-card-bg: rgba(231, 235, 240, 0.92);
--eco-steps-card-radius: 16px;
--eco-steps-card-border-width: 0px;
--eco-steps-card-border-color: transparent;
--eco-steps-card-shadow: 0 12px 30px rgba(15,23,42,0.08);

/* Título ¿Cómo funciona? */
--eco-steps-title-size-desktop: 18px;
--eco-steps-title-top-desktop: 24px;
--eco-steps-title-left-desktop: 50%;
--eco-steps-title-translate-x-desktop: -50%;
--eco-steps-title-color: #0046b8;

--eco-steps-title-size-mobile: 15px;
--eco-steps-title-top-mobile: 24px;
--eco-steps-title-left-mobile: 50%;
--eco-steps-title-translate-x-mobile: -50%;

/* Números generales */
--eco-step-size-desktop: 40px;
--eco-step-size-mobile: 34px;
--eco-step-bg: #006eff;
--eco-step-color: #ffffff;
--eco-step-font-size-desktop: 16px;
--eco-step-font-size-mobile: 14px;
--eco-step-font-weight: 800;

/* Números escritorio */
--eco-step-1-top-desktop: 78px;
--eco-step-1-left-desktop: 15%;

--eco-step-2-top-desktop: 78px;
--eco-step-2-left-desktop: 36%;

--eco-step-3-top-desktop: 78px;
--eco-step-3-left-desktop: 57%;

--eco-step-4-top-desktop: 78px;
--eco-step-4-left-desktop: 78%;

/* Números móvil */
--eco-step-1-top-mobile: 65px;
--eco-step-1-left-mobile: 35px;

--eco-step-2-top-mobile: 115px;
--eco-step-2-left-mobile: 35px;

--eco-step-3-top-mobile: 165px;
--eco-step-3-left-mobile: 35px;

--eco-step-4-top-mobile: 215px;
--eco-step-4-left-mobile: 35px;

/* Iconos pasos */
/* ICONO 1 */
--eco-step-icon-1-size-desktop: 56px;
--eco-step-icon-1-size-mobile: 44px;

/* ICONO 2 */
--eco-step-icon-2-size-desktop: 56px;
--eco-step-icon-2-size-mobile: 44px;

/* ICONO 3 */
--eco-step-icon-3-size-desktop: 46px;
--eco-step-icon-3-size-mobile: 40px;

/* ICONO 4 */
--eco-step-icon-4-size-desktop: 110px;
--eco-step-icon-4-size-mobile: 90px;

--eco-step-icon-1-top-desktop: 125px;
--eco-step-icon-1-left-desktop: 14%;
--eco-step-icon-2-top-desktop: 125px;
--eco-step-icon-2-left-desktop: 35%;
--eco-step-icon-3-top-desktop: 125px;
--eco-step-icon-3-left-desktop: 56%;
--eco-step-icon-4-top-desktop: 90px;
--eco-step-icon-4-left-desktop: 72%;

--eco-step-icon-1-top-mobile: 60px;
--eco-step-icon-1-left-mobile: 85px;
--eco-step-icon-2-top-mobile: 110px;
--eco-step-icon-2-left-mobile: 85px;
--eco-step-icon-3-top-mobile: 160px;
--eco-step-icon-3-left-mobile: 85px;
--eco-step-icon-4-top-mobile: 180px;
--eco-step-icon-4-left-mobile: 60px;

/* Textos pasos */
--eco-step-text-size-desktop: 13px;
--eco-step-text-size-mobile: 11px;
--eco-step-text-color: #1f2937;
--eco-step-text-line-height: 1.25;
--eco-step-text-width-desktop: 105px;
--eco-step-text-width-mobile: 170px;

--eco-step-text-1-top-desktop: 176px;
--eco-step-text-1-left-desktop: 8%;
--eco-step-text-2-top-desktop: 176px;
--eco-step-text-2-left-desktop: 29%;
--eco-step-text-3-top-desktop: 176px;
--eco-step-text-3-left-desktop: 50%;
--eco-step-text-4-top-desktop: 176px;
--eco-step-text-4-left-desktop: 70%;

--eco-step-text-1-top-mobile: 65px;
--eco-step-text-1-left-mobile: 135px;
--eco-step-text-2-top-mobile: 115px;
--eco-step-text-2-left-mobile: 135px;
--eco-step-text-3-top-mobile: 165px;
--eco-step-text-3-left-mobile: 135px;
--eco-step-text-4-top-mobile: 215px;
--eco-step-text-4-left-mobile: 135px;

/* Título beneficios */
--eco-benefits-title-top-desktop: 610px;
--eco-benefits-title-left-desktop: 50%;
--eco-benefits-title-translate-x-desktop: -50%;
--eco-benefits-title-size-desktop: 20px;

--eco-benefits-title-top-mobile: 760px;
--eco-benefits-title-left-mobile: 50%;
--eco-benefits-title-translate-x-mobile: -50%;
--eco-benefits-title-size-mobile: 15px;

--eco-benefits-title-color:#0046b8;
--eco-benefits-title-weight:900;
--eco-benefits-title-align:center;

/* Card beneficios */
--eco-benefits-card-width-desktop: 900px;
--eco-benefits-card-height-desktop: 130px;
--eco-benefits-card-top-desktop: 650px;
--eco-benefits-card-left-desktop: 50%;
--eco-benefits-card-translate-x-desktop: -50%;

--eco-benefits-card-width-mobile: 86%;
--eco-benefits-card-height-mobile: 260px;
--eco-benefits-card-top-mobile: 795px;
--eco-benefits-card-left-mobile: 50%;
--eco-benefits-card-translate-x-mobile: -50%;

--eco-benefits-card-bg:#ffffff;
--eco-benefits-card-radius:14px;
--eco-benefits-card-border-width:1px;
--eco-benefits-card-border-color:rgba(15,23,42,0.08);
--eco-benefits-card-shadow:0 12px 30px rgba(15,23,42,0.06);

/* Iconos beneficios escritorio */
--eco-benefit-icon-1-size-desktop:80px;
--eco-benefit-icon-1-top-desktop:8px;
--eco-benefit-icon-1-left-desktop:60px;

--eco-benefit-icon-2-size-desktop:70px;
--eco-benefit-icon-2-top-desktop:10px;
--eco-benefit-icon-2-left-desktop:230px;

--eco-benefit-icon-3-size-desktop:45px;
--eco-benefit-icon-3-top-desktop:20px;
--eco-benefit-icon-3-left-desktop:410px;

--eco-benefit-icon-4-size-desktop:42px;
--eco-benefit-icon-4-top-desktop:28px;
--eco-benefit-icon-4-left-desktop:575px;

--eco-benefit-icon-5-size-desktop:42px;
--eco-benefit-icon-5-top-desktop:28px;
--eco-benefit-icon-5-left-desktop:740px;

/* Iconos beneficios móvil */
--eco-benefit-icon-1-size-mobile:60px;
--eco-benefit-icon-1-top-mobile:8px;
--eco-benefit-icon-1-left-mobile:25%;

--eco-benefit-icon-2-size-mobile:60px;
--eco-benefit-icon-2-top-mobile:8px;
--eco-benefit-icon-2-left-mobile:75%;

--eco-benefit-icon-3-size-mobile:34px;
--eco-benefit-icon-3-top-mobile:115px;
--eco-benefit-icon-3-left-mobile:25%;

--eco-benefit-icon-4-size-mobile:34px;
--eco-benefit-icon-4-top-mobile:115px;
--eco-benefit-icon-4-left-mobile:75%;

--eco-benefit-icon-5-size-mobile:34px;
--eco-benefit-icon-5-top-mobile:200px;
--eco-benefit-icon-5-left-mobile:50%;

/* Textos beneficios */
--eco-benefit-text-color:#1f2937;
--eco-benefit-text-weight:700;
--eco-benefit-text-line-height:1.25;

--eco-benefit-text-size-desktop:13px;
--eco-benefit-text-width-desktop:120px;

--eco-benefit-text-size-mobile:11px;
--eco-benefit-text-width-mobile:95px;

/* Textos beneficios escritorio */
--eco-benefit-text-1-top-desktop:76px;
--eco-benefit-text-1-left-desktop:40px;

--eco-benefit-text-2-top-desktop:76px;
--eco-benefit-text-2-left-desktop:205px;

--eco-benefit-text-3-top-desktop:76px;
--eco-benefit-text-3-left-desktop:370px;

--eco-benefit-text-4-top-desktop:76px;
--eco-benefit-text-4-left-desktop:535px;

--eco-benefit-text-5-top-desktop:76px;
--eco-benefit-text-5-left-desktop:700px;

/* Textos beneficios móvil */
--eco-benefit-text-1-top-mobile:68px;
--eco-benefit-text-1-left-mobile:25%;

--eco-benefit-text-2-top-mobile:68px;
--eco-benefit-text-2-left-mobile:75%;

--eco-benefit-text-3-top-mobile:155px;
--eco-benefit-text-3-left-mobile:25%;

--eco-benefit-text-4-top-mobile:155px;
--eco-benefit-text-4-left-mobile:75%;

--eco-benefit-text-5-top-mobile:238px;
--eco-benefit-text-5-left-mobile:50%;

/* Botón Ver Empresas */
--eco-companies-btn-width-desktop: 240px;
--eco-companies-btn-height-desktop: 50px;
--eco-companies-btn-top-desktop: 830px;
--eco-companies-btn-left-desktop: 50%;
--eco-companies-btn-translate-x-desktop: -50%;

--eco-companies-btn-width-mobile: 86%;
--eco-companies-btn-height-mobile: 48px;
--eco-companies-btn-top-mobile: 1100px;
--eco-companies-btn-left-mobile: 50%;
--eco-companies-btn-translate-x-mobile: -50%;

--eco-companies-btn-bg:#0072ff;
--eco-companies-btn-color:#ffffff;
--eco-companies-btn-radius:8px;
--eco-companies-btn-border-width:0px;
--eco-companies-btn-border-color:transparent;
--eco-companies-btn-shadow:0 14px 30px rgba(0,114,255,0.28);

--eco-companies-btn-text-size-desktop:15px;
--eco-companies-btn-text-size-mobile:14px;
--eco-companies-btn-text-weight:900;
--eco-companies-btn-text-letter-spacing:0.03em;

}

/* Fondo */
.ecosystem-modal{
  position:fixed;
  inset:0;
  z-index:4000;
  display:none;
  align-items:center;
  justify-content:center;
  background:var(--eco-modal-overlay-color);
}

.ecosystem-modal.show{
  display:flex;
}

/* Caja modal */
.ecosystem-modal-content{
  position:relative;

  width:var(--eco-modal-width-desktop);
  height:var(--eco-modal-height-desktop);

  top:var(--eco-modal-top-desktop);
  left:var(--eco-modal-left-desktop);

  background:var(--eco-modal-bg);
  border-radius:var(--eco-modal-radius);
  border:var(--eco-modal-border-width) solid var(--eco-modal-border-color);
  box-shadow:var(--eco-modal-shadow);

  box-sizing:border-box;
  padding-bottom:var(--eco-modal-padding-bottom-desktop);
  overflow:auto;
  max-height:88dvh;
  
}

.ecosystem-modal-content::after{
  content:"";
  position:absolute;
  left:0;
  top:calc(
    var(--eco-companies-btn-top-desktop) +
    var(--eco-companies-btn-height-desktop) +
    var(--eco-modal-bottom-space-desktop)
  );
  width:1px;
  height:1px;
  pointer-events:none;
}

/* Logo modal */
.ecosystem-modal-logo{
  position:absolute;

  top:var(--eco-logo-top-desktop);
  left:var(--eco-logo-left-desktop);

  width:var(--eco-logo-width-desktop);
  height:auto;

  transform:translateX(var(--eco-logo-translate-x-desktop));

  object-fit:contain;
  display:block;
}

/* Título modal */
.ecosystem-modal-title{
  position:absolute;

  top:var(--eco-title-top-desktop);
  left:var(--eco-title-left-desktop);
  width:var(--eco-title-width-desktop);

  transform:translateX(var(--eco-title-translate-x-desktop));

  margin:0;
  text-align:var(--eco-title-align);
  text-transform:uppercase;
  line-height:var(--eco-title-line-height);
  font-weight:var(--eco-title-weight);
}

.ecosystem-title-small,
.ecosystem-title-blue{
  display:block;
}

.ecosystem-title-small{
  font-size:var(--eco-title-small-size-desktop);
  color:var(--eco-title-small-color);
}

.ecosystem-title-blue{
  margin-top:var(--eco-title-gap);
  font-size:var(--eco-title-blue-size-desktop);
  color:var(--eco-title-blue-color);
}

/* Subtítulo modal */
.ecosystem-modal-subtitle{
  position:absolute;

  top:var(--eco-subtitle-top-desktop);
  left:var(--eco-subtitle-left-desktop);
  width:var(--eco-subtitle-width-desktop);

  transform:translateX(var(--eco-subtitle-translate-x-desktop));

  margin:0;

  font-size:var(--eco-subtitle-size-desktop);
  line-height:var(--eco-subtitle-line-height);
  font-weight:var(--eco-subtitle-weight);
  color:var(--eco-subtitle-color);
  text-align:var(--eco-subtitle-align);
}

/* Card ¿Qué es Grupo Sanbosi? */
.eco-info-card{
  position:absolute;

  top:var(--eco-info-card-top-desktop);
  left:var(--eco-info-card-left-desktop);

  width:var(--eco-info-card-width-desktop);
  height:var(--eco-info-card-height-desktop);

  background:var(--eco-info-card-bg);
  border-radius:var(--eco-info-card-radius);
  border:var(--eco-info-card-border-width) solid var(--eco-info-card-border-color);
  box-shadow:var(--eco-info-card-shadow);

  box-sizing:border-box;
}

.eco-info-icon{
  position:absolute;

  top:var(--eco-info-icon-top-desktop);
  left:var(--eco-info-icon-left-desktop);

  width:var(--eco-info-icon-size-desktop);
  height:var(--eco-info-icon-size-desktop);

  object-fit:contain;
}

.eco-info-title{
  position:absolute;

  top:var(--eco-info-title-top-desktop);
  left:var(--eco-info-title-left-desktop);

  margin:0;

  font-size:var(--eco-info-title-size-desktop);
  color:var(--eco-info-title-color);
  font-weight:900;
  text-transform:uppercase;
}

.eco-info-text{
  position:absolute;

  top:var(--eco-info-text-top-desktop);
  left:var(--eco-info-text-left-desktop);

  width:var(--eco-info-text-width-desktop);

  margin:0;

  font-size:var(--eco-info-text-size-desktop);
  line-height:var(--eco-info-text-line-height);
  color:var(--eco-info-text-color);
}

/* Card ¿Cómo funciona? */
.eco-steps-card{
  position:absolute;

  top:var(--eco-steps-card-top-desktop);
  left:var(--eco-steps-card-left-desktop);

  width:var(--eco-steps-card-width-desktop);
  height:var(--eco-steps-card-height-desktop);

  background:var(--eco-steps-card-bg);
  border-radius:var(--eco-steps-card-radius);
  border:var(--eco-steps-card-border-width) solid var(--eco-steps-card-border-color);
  box-shadow:var(--eco-steps-card-shadow);

  box-sizing:border-box;
  overflow:hidden;
}

.eco-steps-title{
  position:absolute;

  top:var(--eco-steps-title-top-desktop);
  left:var(--eco-steps-title-left-desktop);

  transform:translateX(var(--eco-steps-title-translate-x-desktop));

  margin:0;

  font-size:var(--eco-steps-title-size-desktop);
  color:var(--eco-steps-title-color);
  font-weight:900;
  text-transform:uppercase;
  white-space:nowrap;
}

.eco-step-number{
  position:absolute;

  width:var(--eco-step-size-desktop);
  height:var(--eco-step-size-desktop);

  border-radius:50%;
  background:var(--eco-step-bg);
  color:var(--eco-step-color);

  display:grid;
  place-items:center;

  font-size:var(--eco-step-font-size-desktop);
  font-weight:var(--eco-step-font-weight);
}

.eco-step-number-1{
  top:var(--eco-step-1-top-desktop);
  left:var(--eco-step-1-left-desktop);
}

.eco-step-number-2{
  top:var(--eco-step-2-top-desktop);
  left:var(--eco-step-2-left-desktop);
}

.eco-step-number-3{
  top:var(--eco-step-3-top-desktop);
  left:var(--eco-step-3-left-desktop);
}

.eco-step-number-4{
  top:var(--eco-step-4-top-desktop);
  left:var(--eco-step-4-left-desktop);
}

/* Iconos pasos */
.eco-step-icon{
  position:absolute;
  object-fit:contain;
}

.eco-step-icon-1{
  top:var(--eco-step-icon-1-top-desktop);
  left:var(--eco-step-icon-1-left-desktop);

  width:var(--eco-step-icon-1-size-desktop);
  height:var(--eco-step-icon-1-size-desktop);
}

.eco-step-icon-2{
  top:var(--eco-step-icon-2-top-desktop);
  left:var(--eco-step-icon-2-left-desktop);

  width:var(--eco-step-icon-2-size-desktop);
  height:var(--eco-step-icon-2-size-desktop);
}

.eco-step-icon-3{
  top:var(--eco-step-icon-3-top-desktop);
  left:var(--eco-step-icon-3-left-desktop);

  width:var(--eco-step-icon-3-size-desktop);
  height:var(--eco-step-icon-3-size-desktop);
}

.eco-step-icon-4{
  top:var(--eco-step-icon-4-top-desktop);
  left:var(--eco-step-icon-4-left-desktop);

  width:var(--eco-step-icon-4-size-desktop);
  height:var(--eco-step-icon-4-size-desktop);
}

/* Textos pasos */
.eco-step-text{
  position:absolute;
  width:var(--eco-step-text-width-desktop);
  margin:0;

  font-size:var(--eco-step-text-size-desktop);
  line-height:var(--eco-step-text-line-height);
  color:var(--eco-step-text-color);
  text-align:center;
}

.eco-step-text-1{
  top:var(--eco-step-text-1-top-desktop);
  left:var(--eco-step-text-1-left-desktop);
}

.eco-step-text-2{
  top:var(--eco-step-text-2-top-desktop);
  left:var(--eco-step-text-2-left-desktop);
}

.eco-step-text-3{
  top:var(--eco-step-text-3-top-desktop);
  left:var(--eco-step-text-3-left-desktop);
}

.eco-step-text-4{
  top:var(--eco-step-text-4-top-desktop);
  left:var(--eco-step-text-4-left-desktop);
}

/* Título beneficios */
.eco-benefits-title{
  position:absolute;

  top:var(--eco-benefits-title-top-desktop);
  left:var(--eco-benefits-title-left-desktop);

  transform:translateX(var(--eco-benefits-title-translate-x-desktop));

  margin:0;

  font-size:var(--eco-benefits-title-size-desktop);
  color:var(--eco-benefits-title-color);
  font-weight:var(--eco-benefits-title-weight);
  text-align:var(--eco-benefits-title-align);
  text-transform:uppercase;
  white-space:nowrap;
}

/* Card beneficios */
.eco-benefits-card{
  position:absolute;

  top:var(--eco-benefits-card-top-desktop);
  left:var(--eco-benefits-card-left-desktop);
  width:var(--eco-benefits-card-width-desktop);
  height:var(--eco-benefits-card-height-desktop);

  transform:translateX(var(--eco-benefits-card-translate-x-desktop));

  background:var(--eco-benefits-card-bg);
  border-radius:var(--eco-benefits-card-radius);
  border:var(--eco-benefits-card-border-width) solid var(--eco-benefits-card-border-color);
  box-shadow:var(--eco-benefits-card-shadow);

  box-sizing:border-box;
}

.eco-benefit-icon{
  position:absolute;
  object-fit:contain;
}

.eco-benefit-icon-1{
  top:var(--eco-benefit-icon-1-top-desktop);
  left:var(--eco-benefit-icon-1-left-desktop);
  width:var(--eco-benefit-icon-1-size-desktop);
  height:var(--eco-benefit-icon-1-size-desktop);
}

.eco-benefit-icon-2{
  top:var(--eco-benefit-icon-2-top-desktop);
  left:var(--eco-benefit-icon-2-left-desktop);
  width:var(--eco-benefit-icon-2-size-desktop);
  height:var(--eco-benefit-icon-2-size-desktop);
}

.eco-benefit-icon-3{
  top:var(--eco-benefit-icon-3-top-desktop);
  left:var(--eco-benefit-icon-3-left-desktop);
  width:var(--eco-benefit-icon-3-size-desktop);
  height:var(--eco-benefit-icon-3-size-desktop);
}

.eco-benefit-icon-4{
  top:var(--eco-benefit-icon-4-top-desktop);
  left:var(--eco-benefit-icon-4-left-desktop);
  width:var(--eco-benefit-icon-4-size-desktop);
  height:var(--eco-benefit-icon-4-size-desktop);
}

.eco-benefit-icon-5{
  top:var(--eco-benefit-icon-5-top-desktop);
  left:var(--eco-benefit-icon-5-left-desktop);
  width:var(--eco-benefit-icon-5-size-desktop);
  height:var(--eco-benefit-icon-5-size-desktop);
}

.eco-benefit-text{
  position:absolute;
  margin:0;

  width:var(--eco-benefit-text-width-desktop);

  font-size:var(--eco-benefit-text-size-desktop);
  line-height:var(--eco-benefit-text-line-height);
  font-weight:var(--eco-benefit-text-weight);
  color:var(--eco-benefit-text-color);
  text-align:center;
}

.eco-benefit-text-1{
  top:var(--eco-benefit-text-1-top-desktop);
  left:var(--eco-benefit-text-1-left-desktop);
}

.eco-benefit-text-2{
  top:var(--eco-benefit-text-2-top-desktop);
  left:var(--eco-benefit-text-2-left-desktop);
}

.eco-benefit-text-3{
  top:var(--eco-benefit-text-3-top-desktop);
  left:var(--eco-benefit-text-3-left-desktop);
}

.eco-benefit-text-4{
  top:var(--eco-benefit-text-4-top-desktop);
  left:var(--eco-benefit-text-4-left-desktop);
}

.eco-benefit-text-5{
  top:var(--eco-benefit-text-5-top-desktop);
  left:var(--eco-benefit-text-5-left-desktop);
}

/* Botón Ver Empresas */
.eco-companies-btn{
  position:absolute;

  top:var(--eco-companies-btn-top-desktop);
  left:var(--eco-companies-btn-left-desktop);

  width:var(--eco-companies-btn-width-desktop);
  height:var(--eco-companies-btn-height-desktop);

  transform:translateX(var(--eco-companies-btn-translate-x-desktop));

  border:var(--eco-companies-btn-border-width) solid var(--eco-companies-btn-border-color);
  border-radius:var(--eco-companies-btn-radius);
  background:var(--eco-companies-btn-bg);
  box-shadow:var(--eco-companies-btn-shadow);

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  box-sizing:border-box;
}

.eco-companies-btn-text{
  color:var(--eco-companies-btn-color);
  font-size:var(--eco-companies-btn-text-size-desktop);
  font-weight:var(--eco-companies-btn-text-weight);
  letter-spacing:var(--eco-companies-btn-text-letter-spacing);
  text-transform:uppercase;
}

/* Botón cerrar */
.ecosystem-modal-close{
  position:absolute;

  top:var(--eco-close-top-desktop);
  right:var(--eco-close-right-desktop);

  border:none;
  background:var(--eco-close-bg);

  font-size:var(--eco-close-size-desktop);
  line-height:1;
  color:var(--eco-close-color);

  cursor:pointer;
}

/* Móvil */
@media (max-width:768px){
  .ecosystem-modal-content{
    padding-bottom:var(--eco-modal-padding-bottom-mobile);
    width:var(--eco-modal-width-mobile);
    height:var(--eco-modal-height-mobile);
    max-height:88dvh;

    top:var(--eco-modal-top-mobile);
    left:var(--eco-modal-left-mobile);
  }

  .ecosystem-modal-content::after{
  top:calc(
    var(--eco-companies-btn-top-mobile) +
    var(--eco-companies-btn-height-mobile) +
    var(--eco-modal-bottom-space-mobile)
  );
}

  .ecosystem-modal-logo{
  top:var(--eco-logo-top-mobile);
  left:var(--eco-logo-left-mobile);
  width:var(--eco-logo-width-mobile);
  transform:translateX(var(--eco-logo-translate-x-mobile));
}

.ecosystem-modal-title{
  top:var(--eco-title-top-mobile);
  left:var(--eco-title-left-mobile);
  width:var(--eco-title-width-mobile);
  transform:translateX(var(--eco-title-translate-x-mobile));
}

.ecosystem-title-small{
  font-size:var(--eco-title-small-size-mobile);
}

.ecosystem-title-blue{
  font-size:var(--eco-title-blue-size-mobile);
}

.ecosystem-modal-subtitle{
  top:var(--eco-subtitle-top-mobile);
  left:var(--eco-subtitle-left-mobile);
  width:var(--eco-subtitle-width-mobile);
  transform:translateX(var(--eco-subtitle-translate-x-mobile));
  font-size:var(--eco-subtitle-size-mobile);
}

.eco-info-card{
  top:var(--eco-info-card-top-mobile);
  left:var(--eco-info-card-left-mobile);
  width:var(--eco-info-card-width-mobile);
  height:var(--eco-info-card-height-mobile);
  transform:translateX(var(--eco-info-card-translate-x-mobile));
}

.eco-info-icon{
  top:var(--eco-info-icon-top-mobile);
  left:var(--eco-info-icon-left-mobile);
  width:var(--eco-info-icon-size-mobile);
  height:var(--eco-info-icon-size-mobile);
}

.eco-info-title{
  top:var(--eco-info-title-top-mobile);
  left:var(--eco-info-title-left-mobile);
  font-size:var(--eco-info-title-size-mobile);
}

.eco-info-text{
  top:var(--eco-info-text-top-mobile);
  left:var(--eco-info-text-left-mobile);
  width:var(--eco-info-text-width-mobile);
  font-size:var(--eco-info-text-size-mobile);
}

.eco-steps-card{
  top:var(--eco-steps-card-top-mobile);
  left:var(--eco-steps-card-left-mobile);
  width:var(--eco-steps-card-width-mobile);
  height:var(--eco-steps-card-height-mobile);
  transform:translateX(var(--eco-steps-card-translate-x-mobile));
}

.eco-steps-title{
  top:var(--eco-steps-title-top-mobile);
  left:var(--eco-steps-title-left-mobile);
  transform:translateX(var(--eco-steps-title-translate-x-mobile));
  font-size:var(--eco-steps-title-size-mobile);
}

.eco-step-number{
  width:var(--eco-step-size-mobile);
  height:var(--eco-step-size-mobile);
  font-size:var(--eco-step-font-size-mobile);
}

.eco-step-number-1{
  top:var(--eco-step-1-top-mobile);
  left:var(--eco-step-1-left-mobile);
}

.eco-step-number-2{
  top:var(--eco-step-2-top-mobile);
  left:var(--eco-step-2-left-mobile);
}

.eco-step-number-3{
  top:var(--eco-step-3-top-mobile);
  left:var(--eco-step-3-left-mobile);
}

.eco-step-number-4{
  top:var(--eco-step-4-top-mobile);
  left:var(--eco-step-4-left-mobile);
}

.eco-step-icon-1{
  width:var(--eco-step-icon-1-size-mobile);
  height:var(--eco-step-icon-1-size-mobile);
}

.eco-step-icon-2{
  width:var(--eco-step-icon-2-size-mobile);
  height:var(--eco-step-icon-2-size-mobile);
}

.eco-step-icon-3{
  width:var(--eco-step-icon-3-size-mobile);
  height:var(--eco-step-icon-3-size-mobile);
}

.eco-step-icon-4{
  width:var(--eco-step-icon-4-size-mobile);
  height:var(--eco-step-icon-4-size-mobile);
}

.eco-step-icon-1{
  top:var(--eco-step-icon-1-top-mobile);
  left:var(--eco-step-icon-1-left-mobile);
}

.eco-step-icon-2{
  top:var(--eco-step-icon-2-top-mobile);
  left:var(--eco-step-icon-2-left-mobile);
}

.eco-step-icon-3{
  top:var(--eco-step-icon-3-top-mobile);
  left:var(--eco-step-icon-3-left-mobile);
}

.eco-step-icon-4{
  top:var(--eco-step-icon-4-top-mobile);
  left:var(--eco-step-icon-4-left-mobile);
}

.eco-step-text{
  width:var(--eco-step-text-width-mobile);
  font-size:var(--eco-step-text-size-mobile);
  text-align:left;
}

.eco-step-text-1{
  top:var(--eco-step-text-1-top-mobile);
  left:var(--eco-step-text-1-left-mobile);
}

.eco-step-text-2{
  top:var(--eco-step-text-2-top-mobile);
  left:var(--eco-step-text-2-left-mobile);
}

.eco-step-text-3{
  top:var(--eco-step-text-3-top-mobile);
  left:var(--eco-step-text-3-left-mobile);
}

.eco-step-text-4{
  top:var(--eco-step-text-4-top-mobile);
  left:var(--eco-step-text-4-left-mobile);
}

.eco-benefits-title{
  top:var(--eco-benefits-title-top-mobile);
  left:var(--eco-benefits-title-left-mobile);
  transform:translateX(var(--eco-benefits-title-translate-x-mobile));
  font-size:var(--eco-benefits-title-size-mobile);
}

.eco-benefits-card{
  top:var(--eco-benefits-card-top-mobile);
  left:var(--eco-benefits-card-left-mobile);
  width:var(--eco-benefits-card-width-mobile);
  height:var(--eco-benefits-card-height-mobile);
  transform:translateX(var(--eco-benefits-card-translate-x-mobile));
}

.eco-benefit-icon-1{
  top:var(--eco-benefit-icon-1-top-mobile);
  left:var(--eco-benefit-icon-1-left-mobile);
  width:var(--eco-benefit-icon-1-size-mobile);
  height:var(--eco-benefit-icon-1-size-mobile);
  transform:translateX(-50%);
}

.eco-benefit-icon-2{
  top:var(--eco-benefit-icon-2-top-mobile);
  left:var(--eco-benefit-icon-2-left-mobile);
  width:var(--eco-benefit-icon-2-size-mobile);
  height:var(--eco-benefit-icon-2-size-mobile);
  transform:translateX(-50%);
}

.eco-benefit-icon-3{
  top:var(--eco-benefit-icon-3-top-mobile);
  left:var(--eco-benefit-icon-3-left-mobile);
  width:var(--eco-benefit-icon-3-size-mobile);
  height:var(--eco-benefit-icon-3-size-mobile);
  transform:translateX(-50%);
}

.eco-benefit-icon-4{
  top:var(--eco-benefit-icon-4-top-mobile);
  left:var(--eco-benefit-icon-4-left-mobile);
  width:var(--eco-benefit-icon-4-size-mobile);
  height:var(--eco-benefit-icon-4-size-mobile);
  transform:translateX(-50%);
}

.eco-benefit-icon-5{
  top:var(--eco-benefit-icon-5-top-mobile);
  left:var(--eco-benefit-icon-5-left-mobile);
  width:var(--eco-benefit-icon-5-size-mobile);
  height:var(--eco-benefit-icon-5-size-mobile);
  transform:translateX(-50%);
}

.eco-benefit-text{
  width:var(--eco-benefit-text-width-mobile);
  font-size:var(--eco-benefit-text-size-mobile);
}

.eco-benefit-text-1{
  top:var(--eco-benefit-text-1-top-mobile);
  left:var(--eco-benefit-text-1-left-mobile);
  transform:translateX(-50%);
}

.eco-benefit-text-2{
  top:var(--eco-benefit-text-2-top-mobile);
  left:var(--eco-benefit-text-2-left-mobile);
  transform:translateX(-50%);
}

.eco-benefit-text-3{
  top:var(--eco-benefit-text-3-top-mobile);
  left:var(--eco-benefit-text-3-left-mobile);
  transform:translateX(-50%);
}

.eco-benefit-text-4{
  top:var(--eco-benefit-text-4-top-mobile);
  left:var(--eco-benefit-text-4-left-mobile);
  transform:translateX(-50%);
}

.eco-benefit-text-5{
  top:var(--eco-benefit-text-5-top-mobile);
  left:var(--eco-benefit-text-5-left-mobile);
  transform:translateX(-50%);
}

.eco-companies-btn{
  top:var(--eco-companies-btn-top-mobile);
  left:var(--eco-companies-btn-left-mobile);
  width:var(--eco-companies-btn-width-mobile);
  height:var(--eco-companies-btn-height-mobile);
  transform:translateX(var(--eco-companies-btn-translate-x-mobile));
}

.eco-companies-btn-text{
  font-size:var(--eco-companies-btn-text-size-mobile);
}

  .ecosystem-modal-close{
    top:var(--eco-close-top-mobile);
    right:var(--eco-close-right-mobile);
    font-size:var(--eco-close-size-mobile);
  }

  /* ==========================================
   SCROLL MODAL ECOSISTEMA
========================================== */

.ecosystem-modal-content::-webkit-scrollbar{
  width:8px;
  height:8px;
}

.ecosystem-modal-content::-webkit-scrollbar-thumb{
  background:#b8c0cc;
  border-radius:20px;
}

.ecosystem-modal-content::-webkit-scrollbar-track{
  background:transparent;
}
}