/* Estilo del botón de whatsapp flotante */
.whatsapp-float {
    position: fixed;
    bottom: 20px; /* Distancia desde el pie de la pantalla */
    right: 20px; /* Distancia desde el lado derecho */
    width: 60px; /* Tamaño del icono */
    height: 60px;
    background-color: #25D366; /* Color de fondo del icono */
    border-radius: 50%; /* Hacerlo circular */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Siempre por encima */
    cursor: pointer;
}
.whatsapp-float img {
    width: 35px; /* Tamaño del ícono */
    height: 35px;
}
.whatsapp-float:hover {
    background-color: #20c35d; /* Color al pasar el mouse */
}
/*=================================================================================================*/
.principal{
    padding-bottom: 30px;
    .imgHeader{
        margin-bottom: 0px;
    }
    .container{
        --sp_color_1: #9e4dab;
        --sp_color_2: #000000;
        --sp_col_w: 90px;
        padding: 0;
        
    }
}
.sp_container:first-child{
    min-height: 350px;
}
.sp_container{

    display: flex;
    justify-content: center;
    
    
    .sp_col{
        width: var(--sp_col_w);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
        img{
            max-width: 90%;
        }
    }
    .sp_coli{
        background-color: var(--sp_color_1);
    }
    .sp_cold{
        background-color: var(--sp_color_2);
    }
    .sp_colc{
        width: calc(100% - var(--sp_col_w) * 2);
        display: flex;
        justify-content: center;

            
        
        .sp_dog{
            width: 200px;
            height: 100%;
            background-image: url("../img/superprot/foto-gato.png");
            
            background-repeat: no-repeat;
            _background-attachment: fixed;
            background-position: center;
            background-size: cover;
            
            display: flex;
            justify-content: center;
            align-content: center;
            align-items: center;
            
            img{
                width: 100%;
                margin-top: 50px;
            }
        
        }
        
        .sp_intro{
            flex: 1;
            padding: 10px 20px;
            
            .sp_titulo{
            
                h1{
                    font-family: superprot;
                    font-size: 28px;
                    padding: 2px;
                    margin: 2px;
                    text-align: center;
                    
                    span:first-child{
                        color: var(--sp_color_1)    
                    }
                }
                
                h2{
                    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
                    font-size: 16px;
                    padding: 2px;
                    margin: 2px;
                    text-align: center;
                }
            }
            
            .sp_texto{
                text-align: justify;
                img{
                    float: left;
                }
                h5{
                    padding: 0;
                    margin: 0px;
                    font-weight: bold;
                }
            }
        }
    }
}
.sp_tabs{
    border-bottom: 1px solid var(--sp_color_1);
    div{
        margin: 10px;
        
        a{
            color: var(--sp_color_1)
        }
        
        a.sp_tab_asel{
            text-decoration: underline;
        }
    }
}

.sp_tab{
    display: none;
    padding: 20px;
    _border: 1px solid var(--sp_color_1);
    _background-color: #EEE;
    
                    table{
                        font-family: Arial;
                        font-size: 12px;
                        border: 1px solid var(--sp_color_1);
                        
                        background-color: #DDDDDD;
                        
                        thead{
                            tr{
                                th{
                                    border-bottom: 1px solid var(--sp_color_1);
                                    padding: 4px 10px;
                                    background-color: var(--sp_color_1);
                                    color: white;
                                }
                            }
                        }
                        
                        tbody{
                            tr{
                                td{
                                    padding: 4px 10px;
                                    border-bottoms: 1px solid white;
                                    span_{
                                        background-color: #cccccc;
                                        _padding: 0px 8px;
                                    }
                                    
                                }
                                
                                th{
                                    padding: 4px 10px;
                                }

                            }
                            tr:hover{
                                background-color: #BBB;
                            }
                        }
                        tfoot{
                            tr{
                                td{
                                    padding: 10px;
                                }
                            }
                        }
                    }
}
.sp_tab_sel{
    display: block;
}

/*=================================================================================================*/
@media(max-width: 768px){
    .principal{
        padding-top: 8px!important;
        
        
        .imgHeader{
            height: 85px;
            margin-bottom: 0px;
        }
        .container{
            margin-top: 38px;
            .sp_container{
                
                .sp_cold{
                    display: none;
                }
                .sp_colc{
                    width: calc(100% - var(--sp_col_w) * 1);
                }
                
            }

        }
    }
}
@media(max-width: 600px){
    .principal{
        
        
        
        .imgHeader{
            
            
        }
        .container{
            
            .sp_container{
                display: block;
                
                .sp_coli{
                    display: none;
                }
                .sp_colc{
                    width: 100%;
                    
                    .sp_dog{
                        display: none;
                    }
                }
            }
            .sp_tabs{
                border-bottom: none;
                div{
                    margin: 0 10px;
                }
            }
        }
    }

}



@media (min-width: 1200px) {
    .container {
        width_: 1170px;
        _margin-top: 20px;
        
        .sp_container{
            .sp_coli{
                margin-left: -100px;
                width: 190px;
            }
            .sp_colc{
                padding: 20px;
                width: calc(100% - 190px *2 );
                .sp_intro{
                    
                    .sp_texto{
                        padding: 10px 50px
                    }
                }
            }
            .sp_cold{
                margin-right: -100px;
                width: 190px;
            }
        }
    }
}

@media (min-width: 992px) {
    .container {
        width_: 970px;
        _margin-top: 20px;
    }
}

@media (min-width: 768px) {
    .container {
        width_: 750px;
        _margin-top: 20px;
    }
}