/**instalacion-termica*/
body{
    color: #2c2c2c;
}
.modulo-cajas-instalacion-termica{
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.resolucion576, .resolucion768, .resolucion992, .resolucion1200, .resolucion1920{
    display: none;
    border-radius: 16px;
    
} 
.resolucion360{
    border-radius: 16px;
    width: 270px;
    height: 240px;
}
.resolucion576{
    width: 444px;
    height: 240px;
}
.resolucion768{
    width: 624px;
    height: 240px;
}

.resolucion992{
    width: 228px;
    height: 240px;
}
.resolucion1200{
    width: 285.33px;
    height: 240px;
}


.resolucion1920{
    width: 376px;
    height: 240px;
}


.contenedor-total-instalacion-termica{
    padding: 24px 16px 40px 16px;
    text-align: center;
}

.titulo-instalacion-termica{
    margin-bottom: 16px;
}


.subtitulo-instalacion-termica{
    margin-bottom: 24px;
}



.cajita{
    padding: 16px 24px;
    gap: 8px;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    text-align: left;
}

.primera-cajita, .segunda-cajita{
    border: 3px solid var(--Color-Forest-30, #c8d9d0);
    color:var(--Color-Forest-70, #18543E);
    
}

.segunda-cajita{
    background: var(--Color-Surface-General-4, #fff5ec);
}


.cuarta-cajita{
    background: var(--Color-Surface-General-3, #f9f9f9);
}

.tercera-cajita{
    background: var(--Color-Surface-General-2, #dcebe1);
}

.cuarta-cajita{
    border: 3px dashed var(--Color-Forest-30, #c8d9d0);
    color:var(--Color-Forest-70, #18543E);
       
    
}

.union-cajitas, .flecha-cajitas{
    height: 24px;
    width: 3px;
    background: var(--Color-Forest-30, #c8d9d0);
    margin-left: auto;
    margin-right: auto;
}

/*.flecha-cajitas {
    width: 30px;
    height: 50px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 60'%3E%3Cpath d='M15 5 L15 45 M5 35 L15 45 L25 35' stroke='%2318543E' stroke-width='3' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    background-size: contain;
    
}*/



.union-rayas-cajitas{
    height: 24px;
    width: 80px;
    border-left: 2px dashed var(--Color-Forest-30, #c8d9d0);;
    margin-left: auto;
    margin-right: auto;
}




.segundo-modulo{
    padding: 40px 24px 16px 24px;
    background: var(--Color-Surface-General-2, #dcebe1);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

.tercer-modulo{
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    padding: 24px;
    background: var(--Color-Surface-General-2, #dcebe1);
    border-radius: 16px;
}

.tercer-modulo .cajita1, .tercer-modulo .cajita2{
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cajita1 .imagen-tercer-modulo, .cajita2 .imagen-tercer-modulo{
    width: 64px;
    margin-left: auto;
    margin-right: auto;
}

.explicacion-instalacion-termica{
    text-align: left;
}

.triangulo-caja-segundo-modulo{
    position: absolute;
    top: -20px;    
    width: 56px;
    align-self: center;
}

@media(min-width: 576px){
    .resolucion360{
        display: none;
    }
    .resolucion576{
        display: block;
    }

.contenedor-total-instalacion-termica{
    padding: 24px 42px 40px 42px;
}
    
}





@media(min-width: 768px){
        .resolucion576{
        display: none;
    }
    .resolucion768{
        display: block;
    }

.contenedor-total-instalacion-termica{
    padding: 24px 48px 40px 48px;
}
    .primer-modulo{
        display: flex;
        flex-direction: column;
        margin-left: auto;
        margin-right: auto;
        
    }
.flecha-cajitas {
    z-index: -1;
    width: 30px;
    height: 50px;
    top: -45px;
    align-self: center;
    position: absolute;
    background: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 60'%3E%3Cpath d='M15 5 L15 45 M5 35 L15 45 L25 35' stroke='%23c8d9e0' stroke-width='3' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}
.union-rayas-cajitas{
    width: 0.1px;
    
}

    .tercera-cajita{
        margin-top: 24px;
        position: relative;
    }
   
}



@media(min-width: 992px){
       .resolucion992{
        display: block;
    }
    .resolucion768{
        display: none;
    }

.contenedor-total-instalacion-termica{
    padding: 40px 82px 48px 82px;
}
    .primer-modulo{
     flex-direction: row;
    }

.cajita{
    width: 189px;
    height: 212px;
}

    .tercera-cajita{
        margin-top: 0;
        margin-left: 24px;
    }



    .union-cajitas, .flecha-cajitas{
    height: 3px;
    width: 24px;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 0;
        margin-right: 0;
        border: none;
    }

.flecha-cajitas {
    width: 60px;
    top: 42%;
    left: -52px;
    height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Cpath d='M5 15 L45 15 M35 5 L45 15 L35 25' stroke='%23c8d9d0' stroke-width='3' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

    
.union-rayas-cajitas{
    height: 0.5px;
    width: 24px;
    border-bottom: 2px dashed var(--Color-Forest-30, #c8d9d0);;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 0;
        margin-right: 0;
    
}

.tercer-modulo{
    flex-direction: row;
    padding: 32px 48px;
}
    
}

@media(min-width: 1200px){
    .resolucion1200{
        display: block;
    }
    .resolucion992{
        display: none;
    }

.contenedor-total-instalacion-termica{
    padding: 40px 102px 48px 102px;
}
    .cajita{
    width: 233px;
    height: 170px;
        letter-spacing: -0.1px;
}


    
}


@media(min-width: 1920px){
    
    .cajita{
    width: 310px;
    height: 170px;
        letter-spacing: 0px;
        
        
}
    .resolucion1920{
        display: block;
    }
    .resolucion1200{
        display: none;
    }
    .contenedor-total-instalacion-termica{
    padding: 40px 304px 48px 304px;
}
 .tercer-modulo .cajita1, .tercer-modulo .cajita2{
     width: 396px;
 }  
    .texto-cajita-tercer-modulo{
        letter-spacing: 0.2px;
    }
}