@import 'colors.css';

@media (min-width: 1080px){
    .sect-sop-detalles {    
    display: grid;
    grid-template-columns: 1fr 1fr;   
    width: 100%;
    margin-top:40px; 
}
.sop-detalles-container{
    margin-top: 40px;
}
.img-cont-sop-detalles{
     margin-top: 40px;
}
.linea-sop-detalles{
    background: var(--azul);
    width: 35%;
    text-align: center;
    padding: 10px;
    font-family: "MiFuente", sans-serif;
    font-size: 20px;
    font-style: italic;
    font-weight: 900;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    margin-left: 50px;
    color: #fff;
    text-align: center;
}
.sop-detalles-texto{
    display: flex;
    justify-content: center;
    align-items: center;    
    flex-direction: column;
    padding: 20px;
    margin: 0 auto;    
    color: var(--azul1);
    width: 90%;
    border: 3px solid var(--azul1);
    border-radius: 20px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
}
.titulo-parr-sop-detalles{
    text-align: center;
    margin: 10px 0 0 0;
    font-family: "MiFuente", sans-serif;
}
.sop-detalles-texto p{
    font-family: "MiFuente", sans-serif;    
    font-size: 16px;
    text-align: left;
    width: 95%;
    line-height: 1.5;
    margin-bottom: 15px;
} 
.icon-text-detall{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 100%;
}
.icon-text-detall i{
    padding: 5px 10px;
    text-align: center;
}
.icon-text-detall h4{
    font-family: "MiFuente", sans-serif;
    font-size: 16px;
    font-style: italic;
    text-align: center;    
    line-height: 1.5;
    color: var(--azul1);
    margin-bottom: 5px;
    font-weight: 700;
} 
.img-sop-detalles{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.img-sop-detalles img{
    width:35%;
}
.img-sop-detalles2{
    display:none;      
}
.sop-detalles-container:hover {
    transform: scale(1.05);
    transition: all 400ms ease-in;
}
.sop-detalles-container:before {
  transform: scale(1.05);
  transition: all 400ms ease-in;
}

.sop-detalles-container:hover .sop-detalles-texto p {  
  color: #fff;
  background: var(--azul1);
}

.sop-detalles-container:hover .sop-detalles-texto {  
  color: #fff;
  background: var(--azul1);
}
    
}
@media (min-width: 600px) and (max-width:1079px) {
     .sect-sop-detalles {    
    display: grid;
    grid-template-columns:1fr;   
    width: 100%;  
    margin-bottom: 20px;  
}
.sop-detalles-container{
    margin: 20px auto;
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;    
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 40px;
}
.linea-sop-detalles{
    background: var(--azul);
    width: 35%;
    text-align: center;
    padding: 10px;
    font-family: "MiFuente", sans-serif;
    font-size: 20px;
    font-style: italic;
    font-weight: 900;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    margin-left: 50px;
    color: #fff;
    text-align: center;
}
.sop-detalles-texto{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px;
    margin: 0 auto;
    color: var(--azul1);
    width: 90%;
}
.titulo-parr-sop-detalles{
    text-align: center;
    margin: 10px 0 0 0;
    font-family: "MiFuente", sans-serif;
}
.sop-detalles-texto p{
    font-family: "MiFuente", sans-serif;
    font-size: 26px;
    text-align: left;
    width: 100%;
    line-height: 1.5;
    margin-bottom: 15px;
} 
.icon-text-detall{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;    
    margin: 0 auto;      
    padding: 5px;
}
.icon-text-detall i{
    padding: 5px 10px;
    text-align: center;
    font-size: 28px;
}
.icon-text-detall h4{
    font-family: "MiFuente", sans-serif;
    font-size: 26px;
    font-style: italic;
    text-align: center;
    line-height: 1.5;
    color: var(--azul1);
    margin-bottom: 5px;
} 
.img-sop-detalles2{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.img-sop-detalles2 img{
    width:150px;
    margin: 5px;
}
.img-sop-detalles{
    display:none;      
}

}
@media (max-width: 599px) {
    .sect-sop-detalles {    
    display: grid;
    grid-template-columns:1fr;   
    width: 100%;  
    margin-bottom: 20px;  
}
.sop-detalles-container{
    margin: 20px auto;
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;    
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    padding: 20px;
    border-radius: 40px;
}
.linea-sop-detalles{
    background: var(--azul);
    width: 35%;
    text-align: center;
    padding: 10px;
    font-family: "MiFuente", sans-serif;
    font-size: 20px;
    font-style: italic;
    font-weight: 900;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    margin-left: 50px;
    color: #fff;
    text-align: center;
}
.sop-detalles-texto{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px;
    margin: 0 auto;
    color: var(--azul1);
    width: 90%;
}
.titulo-parr-sop-detalles{
    text-align: center;
    margin: 10px 0 0 0;
    font-family: "MiFuente", sans-serif;
}
.sop-detalles-texto p{
    font-family: "MiFuente", sans-serif;
    font-size: 26px;
    text-align: left;
    width: 100%;
    line-height: 1.5;
    margin-bottom: 15px;
} 
.icon-text-detall{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;    
    margin: 0 auto;      
    padding: 5px;
}
.icon-text-detall i{
    padding: 5px 10px;
    text-align: center;
    font-size: 28px;
}
.icon-text-detall h4{
    font-family: "MiFuente", sans-serif;
    font-size: 26px;
    font-style: italic;
    text-align: center;
    line-height: 1.5;
    color: var(--azul1);
    margin-bottom: 5px;
} 
.img-sop-detalles2{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.img-sop-detalles2 img{
    width:150px;
    margin: 5px;
}
.img-sop-detalles{
    display:none;      
}
}
/* Ajustes para cuando el dispositivo esté en modo horizontal */
@media (min-width: 600px) and (max-width:1079px) and (orientation: landscape) {
     .sect-sop-detalles {    
    display: grid;
    grid-template-columns:1fr;   
    width: 100%;    
}
.sop-detalles-container{
    margin: 20px auto;
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;    
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    padding: 20px;
    border-radius: 40px;
}
.linea-sop-detalles{
    background: var(--azul);
    width: 35%;
    text-align: center;
    padding: 10px;
    font-family: "MiFuente", sans-serif;
    font-size: 20px;
    font-style: italic;
    font-weight: 900;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    margin-left: 50px;
    color: #fff;
    text-align: center;
}
.sop-detalles-texto{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px;
    margin: 0 auto;
    color: var(--azul1);
    width: 90%;
}
.titulo-parr-sop-detalles{
    text-align: center;
    margin: 10px 0 0 0;
    font-family: "MiFuente", sans-serif;
}
.sop-detalles-texto p{
    font-family: "MiFuente", sans-serif;    
    font-size: 20px;
    text-align: left;
    width: 95%;
    line-height: 1.5;
    margin-bottom: 15px;
} 
.icon-text-detall{
   display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width:60%;
    margin: 0 auto;    
    padding: 5px;
}
.icon-text-detall i{
    padding: 5px 10px;
    text-align: center;
}
.icon-text-detall h4{
    font-family: "MiFuente", sans-serif;
    font-size: 20px;
    font-style: italic;
    text-align: center;
    line-height: 1.5;
    color: var(--azul1);
    margin-bottom: 5px;
} 
.img-sop-detalles{
    display: flex;
    justify-content: right;
    align-items: center;
    width: 100%;
}
.image-sop-detalles{
    display: flex;
    justify-content: center;
    align-items: center;   
    width: 100%;     
}
.img-sop-detalles{
    display: none;
    justify-content: center;
    align-items: center;   
    width: 100%;  
}
.img-sop-detalles img{
    width:45%;
}
}