
p.texto-ilustracion {
  margin:0;
}
p.texto-info {
margin:0;
 color: var(--Color-Content-General-1, #2C2C2C);
font-feature-settings: 'liga' off, 'clig' off;

font-family: "IberPangea Text";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 18px;  
}
#mod-infografia .nav-container .owl-next,
#mod-infografia .nav-container .owl-prev{
  display:none;
}
#mod-infografia .owl-carousel .item .media{ order: 1; }
  #mod-infografia .owl-carousel .item .info{ order: 2; }
span.label {
border:none;
}
 
#mod-infografia{
  background:#f9f9f9;
  padding:16px 16px 24px;
}
 
 
#mod-infografia .mod-infografia-header{
  max-width:1280px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:8px;
p.texto-ilustracion {
  margin:0;
}
p.texto-info {
margin:0;

color: var(--Color-Content-General-2, #707070);

font-feature-settings: 'liga' off, 'clig' off;

/* Body/Regular/S */
font-family: "IberPangea Text";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 18px;
}
p.texto-fuentes {
color: var(--Color-Content-General-2, #707070);

text-align: center;
font-feature-settings: 'liga' off, 'clig' off;

/* Body/Regular/S */
font-family: "IberPangea Text";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 18px; /* 128.571% */
}
a.link-fuente {
color: var(--Color-Content-General-2, #707070);
font-feature-settings: 'liga' off, 'clig' off;


font-family: "IberPangea Text";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 18px;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: none;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}
#mod-infografia .nav-container .owl-next,
#mod-infografia .nav-container .owl-prev{
  display:none;
}
#mod-infografia .owl-carousel .item .media{ order: 1; }
  #mod-infografia .owl-carousel .item .info{ order: 2; }
span.label {border:none;margin: 0;padding-left: 0;/* padding: inherit; */padding-left: 0;padding-right: 0;padding-top: 16px;}
 
#mod-infografia{
  background:#f9f9f9;
  padding:16px 16px 24px;
}
 
 
#mod-infografia .mod-infografia-header{
  max-width:1280px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  text-align:center;
}
 
#mod-infografia .titulo{
  width:100%;
  font-size:clamp(22px,3.2vw,32px);
  line-height:1.15;
  color:#2C2C2C;
  font-weight:700;
  margin:0;
}
 
#mod-infografia .subtitulo{
  font-size:16px;
  line-height:28px;
  color:#707070;
  margin:0;
}
 
 
#mod-infografia .procedimiento{
  display:flex;
  justify-content:center;
}
 
#mod-infografia .procedimiento-content{
  width:100%;
  max-width:980px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
 
 
#mod-infografia .spheres-container{
  width:100%;
  position:relative;
  padding-top:6px;
 
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  justify-items:stretch;
  align-items:start;
}
 
 
#mod-infografia .timeline-line{
  position:absolute;
  left:1px;     
  right:1px;
  top:13px;     
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:0;       
  z-index:0;
  pointer-events:none;
}
 
#mod-infografia .horizontal-line{
  width:100%;
  height:2px;
  background:#E6E6E6;
  display:block;
}
 
#mod-infografia .horizontal-line.active{
  background:#007F33;
}
 

#mod-infografia .checkpoint{
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:4px;
  position:relative;
  z-index:1;
}
 
 
#mod-infografia .checkpoint-1{/* justify-self:start; *//* align-items:flex-start; */}
#mod-infografia .checkpoint-2{ justify-self:start; align-items:flex-start; }
#mod-infografia .checkpoint-3{ justify-self:center; align-items:center; }
#mod-infografia .checkpoint-4{ justify-self:end; align-items:flex-end; }
#mod-infografia .checkpoint-5{ justify-self:end; align-items:flex-end; }
 
#mod-infografia .outer-circle{
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid #E6E6E6;
  background:#fff;
 
  font-size:0;
  line-height:0;
  color:transparent;
}
 
 
#mod-infografia .outer-circle.active{
  background:#007F33;
  border-color:#007F33;
}
 
 
 
#mod-infografia .checkpoint-2 .outer-circle,
#mod-infografia .checkpoint-4 .outer-circle{
  width:12px;
  height:12px;
  
}
 
 

#mod-infografia .label{
  font-size:12px;
  line-height:14px;
  color:#2C2C2C;
  max-width:92px;
  white-space:normal;
  overflow-wrap:break-word;
}
 
#mod-infografia .label:empty{ display:none; }
 
#mod-infografia .checkpoint-1 .label,
#mod-infografia .checkpoint-2 .label{ text-align:left; }
#mod-infografia .checkpoint-3 .label{ text-align:center; }
#mod-infografia .checkpoint-4 .label,
#mod-infografia .checkpoint-5 .label{ text-align:right; }
 
@media (max-width:520px){
  #mod-infografia .label{ max-width:70px; font-size:11px; line-height:13px; }
}

#mod-infografia .nav-container{
  display: none;
}
 

@media (min-width: 520px){
  #mod-infografia .contendor-carousel{
    position: relative; 
  }
 
  #mod-infografia .nav-container{
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: none; /
  }
 
  
  #mod-infografia .nav-container .owl-prev,
  #mod-infografia .nav-container .owl-next{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: none;
    background: #fff;
    border-radius: 999px;
    cursor: pointer;
    pointer-events: auto; 
  }
 

  #mod-infografia .nav-container .owl-prev{
    position: absolute;
    left: 8px;
  }
 
  #mod-infografia .nav-container .owl-next{
    position: absolute;
    right: 8px;
  }
 
  #mod-infografia .nav-container .owl-prev.disabled,
  #mod-infografia .nav-container .owl-next.disabled{
    opacity: 0.2;
    pointer-events: none;
  }
}
#mod-infografia .nav-container{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
 
#mod-infografia .nav-container button{
  border:none;
  background:transparent;
  width:56px;
  height:56px;
  cursor:pointer;
}
 
#mod-infografia .nav-container button.disabled{
  opacity:.2;
  pointer-events:none;
}
 
 
#mod-infografia .contendor-carousel{
  max-width:1280px;
  margin:0 auto;
  padding-top:16px;
}
 
#mod-infografia .contendor-carousel .owl-nav,
#mod-infografia .owl-carousel .owl-nav{
  display:none !important;
}
 
#mod-infografia .owl-carousel .item{
  background:#fff;
  border-radius:16px;
  padding:16px;
 
  display:flex;
  flex-direction:column;
  gap:16px;
}
 
#mod-infografia .info,
#mod-infografia .media{
  display:flex;
  flex-direction:column;
  gap:8px;
}
 
#mod-infografia .texto{
  font-size:14px;
  line-height:18px;
  color:#2C2C2C;
}
 
#mod-infografia .media .item-image{
  width:100%;
 
  max-height:420px;
  background-color:silver;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  border-radius:16px;
}
 
#mod-infografia .texto-ilustracion{
  font-size:13px;
  line-height:20px;
  color:#707070;
}
 
#mod-infografia .texto-ilustracion--info{ display:none; }
 
#mod-infografia .text-link{
  color:#707070;
  text-decoration:underline;
  font-weight:700;
}
 
 


@media (min-width:768px){
  #mod-infografia .owl-carousel .item{
    flex-direction: row;
    gap: 32px;
    padding: 32px;
    align-items: stretch;
  }
 
 
  #mod-infografia .owl-carousel .item .media,
  #mod-infografia .owl-carousel .item .info{
    flex: 0 0 50%;
    max-width: 50%;
  }
 
  
  #mod-infografia .media .item-image{
    aspect-ratio: auto;
    max-height: none;
    height: 442px;
  }
 

  #mod-infografia .texto-ilustracion--info{
    display:block;
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid #000;
    max-width:260px;
  }
 
 
  #mod-infografia .media .texto-ilustracion{
    display:none;
  }
}
 
 
@media (min-width:997px){
  #mod-infografia{ padding:24px 82px 40px; }
 
  #mod-infografia .owl-carousel .item{
    flex-direction:row;
    gap:32px;
    padding:32px;
    align-items:stretch;
  }
 
  #mod-infografia .owl-carousel .item .info,
  #mod-infografia .owl-carousel .item .media{
    flex:0 0 50%;
    max-width:50%;
  }
 
  #mod-infografia .media .item-image{
    aspect-ratio:auto;
    max-height:none;
    height:442px;
  }
 
  #mod-infografia .texto-ilustracion--info{
    display:block;
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid #000;
    max-width:260px;
  }
 
  #mod-infografia .media .texto-ilustracion{ display:none; }
}
 
 
#mod-infografia .fuentes{
  max-width:1280px;
  margin:16px auto 0;
}
 

 
#mod-infografia .texto-fuentes a{
  text-decoration:underline;
}
#mod-infografia .checkpoint-2 .outer-circle,
#mod-infografia .checkpoint-4 .outer-circle{
  margin-top: 2px;
}
 
#mod-infografia .checkpoint .label{
  opacity: 0;
}
 
 
#mod-infografia .checkpoint.is-current .label{
  opacity: 1;
}

 
#mod-infografia .outer-circle.next-active{
  background: #fff;
  border-color: #007F33;
}
  align-items:center;
  text-align:center;
}
 
#mod-infografia .titulo{
  width:100%;
  font-size:clamp(22px,3.2vw,32px);
  line-height:1.15;
  color:#2C2C2C;
  font-weight:700;
  margin:0;
}
 
#mod-infografia .subtitulo{
  font-size:16px;
  line-height:28px;
  color:#707070;
  margin:0;
}
 
 
#mod-infografia .procedimiento{
  display:flex;
  justify-content:center;
}
 
#mod-infografia .procedimiento-content{
  width:100%;
  max-width:980px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
 
 
#mod-infografia .spheres-container{
  width:100%;
  position:relative;
  padding-top:9px;
 
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  justify-items:stretch;
  align-items:start;
}
 
 
#mod-infografia .timeline-line{
  position:absolute;
  left:1px;     
  right:1px;
  top:21px;     
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:0;       
  z-index:0;
  pointer-events:none;
}
 
#mod-infografia .horizontal-line{
  width:100%;
  height:2px;
  background:#E6E6E6;
  display:block;
}
 
#mod-infografia .horizontal-line.active{
  background:#007F33;
}
 

#mod-infografia .checkpoint{
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  /* gap: 4px; */
  position:relative;
  z-index:1;
}
 
 
#mod-infografia .checkpoint-1{/* justify-self:start; *//* align-items:flex-start; */}
#mod-infografia .checkpoint-2{ justify-self:start; align-items:flex-start; }
#mod-infografia .checkpoint-3{ justify-self:center; align-items:center; }
#mod-infografia .checkpoint-4{ justify-self:end; align-items:flex-end; }
#mod-infografia .checkpoint-5{ justify-self:end; align-items:flex-end; }
 
#mod-infografia .outer-circle{
  width: 24px;
  height: 24px;
  border-radius:50%;
  border:2px solid #E6E6E6;
  background:#fff;
  font-size:0;
  line-height:0;
  color:transparent;
}
 
 
#mod-infografia .outer-circle.active{
  background:#007F33;
  border-color:#007F33;
}
 
 
 
#mod-infografia .checkpoint-2 .outer-circle,
#mod-infografia .checkpoint-4 .outer-circle{
  width: 18px;
  height: 18px;
}
 
 

#mod-infografia .label{
  font-size:12px;
  line-height:14px;
  color:#2C2C2C;
  max-width:92px;
  white-space:normal;
  overflow-wrap:break-word;
}
 
#mod-infografia .label:empty{ display:none; }
 
#mod-infografia .checkpoint-1 .label,
#mod-infografia .checkpoint-2 .label{text-align:left;}
#mod-infografia .checkpoint-3 .label{ text-align:center; }
#mod-infografia .checkpoint-4 .label,
#mod-infografia .checkpoint-5 .label{/* text-align:right; */}
 

 

@media (min-width: 576px){
  #mod-infografia .contendor-carousel{
    position: relative; 
  }
 
  #mod-infografia .nav-container{
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: none; /
  }
 
  
  #mod-infografia .nav-container .owl-prev,
  #mod-infografia .nav-container .owl-next{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: none;
    background: #fff;
    border-radius: 999px;
    cursor: pointer;
    pointer-events: auto; 
  }
 

  #mod-infografia .nav-container .owl-prev{
    position: absolute;
    left: 8px;
  }
 
  #mod-infografia .nav-container .owl-next{
    position: absolute;
    right: 8px;
  }
 
  #mod-infografia .nav-container .owl-prev.disabled,
  #mod-infografia .nav-container .owl-next.disabled{
    opacity: 0.2;
    pointer-events: none;
  }
}
#mod-infografia .nav-container{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
 
#mod-infografia .nav-container button{
  border:none;
  background:transparent;
  width:56px;
  height:56px;
  cursor:pointer;
}
 
#mod-infografia .nav-container button.disabled{
  opacity:.2;
  pointer-events:none;
}
 
 
#mod-infografia .contendor-carousel{
  max-width:1280px;
  margin:0 auto;
  padding-top:16px;
}
 
#mod-infografia .contendor-carousel .owl-nav,
#mod-infografia .owl-carousel .owl-nav{
  display:none !important;
}
 
#mod-infografia .owl-carousel .item{
  background:#fff;
  border-radius:16px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
 
#mod-infografia .info,
#mod-infografia .media{
  display:flex;
  flex-direction:column;
  gap:8px;
}
 
#mod-infografia .texto{
  font-size:14px;
  line-height:18px;
  color:#2C2C2C;
}
 
#mod-infografia .media .item-image{
  width:100%;
  aspect-ratio:16/15;
  /* max-width:608px; */
  max-height:539px !important;
  background-color:silver;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  border-radius:16px;
  background-position: center 30%;
}
 
#mod-infografia .texto-ilustracion{
  /* font-size:13px; */
  /* line-height:20px; */
  /* color:#707070; */
}
 
#mod-infografia .texto-ilustracion--info{ display:none; }
 
#mod-infografia .text-link{
  color:#707070;
  text-decoration:underline;
  font-weight:700;
}
 
 
#mod-infografia .item-uno .item-image{ background-image:url("/documents/46699/30231441/mod-infografia-vehiculos-electricos-01.webp"); }
#mod-infografia .item-dos .item-image{ background-image:url("/documents/46699/30231441/mod-infografia-vehiculos-electricos-02.webp"); }
#mod-infografia .item-tres .item-image{ background-image:url("/documents/46699/30231441/mod-infografia-vehiculos-electricos-03.webp"); }
#mod-infografia .item-cuatro .item-image{ background-image:url("/documents/46699/30231441/mod-infografia-vehiculos-electricos-04.webp"); }
#mod-infografia .item-cinco .item-image{
  background-image:url("/documents/46699/30231441/mod-infografia-vehiculos-electricos-05.webp");
  background-position:85% center;
}
@media (min-width:768px){
  #mod-infografia .owl-carousel .item{
    flex-direction: row;
    gap: 32px;
    padding: 32px;
    align-items: stretch;
  }
 
 
  #mod-infografia .owl-carousel .item .media,
  #mod-infografia .owl-carousel .item .info{
    flex: 0 0 50%;
    max-width: 50%;
  }
 
  
  #mod-infografia .media .item-image{
    aspect-ratio: auto;
    max-height: 572px !important;
    
    display: flex;
    flex-direction: column;
    align-items: center !important;
    flex: 1 0 0;
    align-self: stretch;
  }
 

  #mod-infografia .texto-ilustracion--info{
    display:block;
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid #000;
    max-width:260px;
  }
 
 
  
}
 
 
@media (min-width:997px){
  #mod-infografia{ padding:24px 82px 40px; }
 
  #mod-infografia .owl-carousel .item{
    /* flex-direction:row; */
    /* gap:32px; */
    /* padding:32px; */
    /* align-items:stretch; */
  }
 
  #mod-infografia .owl-carousel .item .info,
  #mod-infografia .owl-carousel .item .media{
    flex:0 0 50%;
    max-width:50%;
  }
 
  #mod-infografia .media .item-image{
    aspect-ratio:auto;
    max-height:none;
    height:442px;
  }
 
  #mod-infografia .texto-ilustracion--info{
    display:block;
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid #000;
    max-width:260px;
  }
  #mod-infografia .media .item-image{
  min-height:516px;
}
}
 
 
#mod-infografia .fuentes{
  max-width:1280px;
  margin:16px auto 0;
}
 
#mod-infografia .texto-fuentes,
#mod-infografia .texto-fuentes a{
  /* font-size:14px; */
  /* line-height:24px; */
  /* color:#B9B9B9; */
  text-align:center;
}
 
#mod-infografia .texto-fuentes a{
 
  color: var(--Color-Content-General-2, #707070);
font-feature-settings: 'liga' off, 'clig' off;

/* Body/Regular/S */
font-family: "IberPangea Text";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 18px;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: none;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}
#mod-infografia .checkpoint-2 .outer-circle,
#mod-infografia .checkpoint-4 .outer-circle{
  margin-top: 5px;
}
 
#mod-infografia .checkpoint .label{
  opacity: 0;
}
 
 
#mod-infografia .checkpoint.is-current .label{
  opacity: 1;
}

 
#mod-infografia .outer-circle.next-active{
  background: #fff;
  border-color: #007F33;
}
#mod-infografia .media .item-image{
  width:100%;
  aspect-ratio:16/11;
  max-height:200px;
  background-color:silver;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  border-radius:16px;
  background-position: center 30%;
}