/* Estilos generales del botón */
.button_001 {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.2dvw; /* Reducir el espacio entre botones */
    bottom: 3dvw;
    right: 2dvw;
    padding: 1dvw 0.5dvw;
    z-index: 5000;
    background: var(--c1);
    border-radius: 20dvw;
    box-shadow: 1dvw 1dvw 1dvw rgba(0, 0, 0, 0.25);
}

.button_001:hover {
    transform: scale(1.025);
}

/*******************************************
/Para tener el icono de whatsapp llamativo y al acercarse diga nombre
/* Estilos del ancla del logo */
.button_001_logo_anchor {
    position: relative;
    display: flex;
    width: 3dvw;
    height: 3dvw;
    background: #25D366; /* Color verde de WhatsApp */
    border-radius: 20dvw;
    overflow: visible;
    box-shadow: 0.5dvw 0.5dvw 0.5dvw rgba(37, 211, 102, 0.5);
    padding: 0;
    transition: transform 0.2s ease-in-out, background 0.3s;
    text-decoration: none;
}

.button_001_logo_anchor:hover {
    transform: scale(1.05);
    background: #1EBE5D; /* Color más oscuro al pasar el cursor */
}

/* Mensaje al acercarse al logo */
.button_001_logo_anchor .tooltip {
    visibility: hidden;
    background-color: black;
    color: white;
    text-align: center;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    position: absolute;
    bottom: 110%; /* Ubicado sobre el botón */
    left: 50%;
    transform: translateX(-50%); 
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* Mostrar tooltip al pasar el cursor */
.button_001_logo_anchor:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

/**************************/

/* Estilos del botón de desplazamiento */
.button_001_scroll_button {
    background: var(--c2);
    width: 2.5dvw;
    height: 2.5dvw;
    border-radius: 20dvw;
    padding: 0.75dvw;
    z-index: 5000;
    cursor: pointer;
}

.button_001_scroll_button_bar {
    width: 60%;
    height: 25%;
    background: var(--c1);
    border-radius: 5dvw;
}

/* Estilos del botón de desplazamiento superior */
.button_001_top_scroll_button {
    transform: rotate(0deg);
}

.button_001_top_scroll_button_bar_1 {
    transform: rotate(45deg);
    left: 0.3dvw;
    top: 0.40dvw;
}

.button_001_top_scroll_button_bar_2 {
    transform: rotate(135deg);
    right: 0dvw;
    top: 0.15dvw;
}

/* Estilos del botón de desplazamiento inferior */
.button_001_bottom_scroll_button {
    transform: rotate(180deg);
}

.button_001_bottom_scroll_button_bar_1 {
    transform: rotate(45deg);
    left: 0.3dvw;
    top: 0.3dvw;
}

.button_001_bottom_scroll_button_bar_2 {
    transform: rotate(135deg);
    right: 0.05dvw;
    top: 0dvw;
}

/* Media Queries */
@media only screen and (max-width: 950px) and (min-width: 451px) { 
    /* Estilos para tabletas */
    .button_001 {
        gap: 0.1dvw; /* Espacio aún más reducido en tabletas */
    }
}

@media only screen and (max-width: 450px) {  
    /* Estilos para móviles */
    .button_001 {
        gap: 0; /* Sin espacio entre botones en móviles */
    }
}