/*BOTONES GENERAL*/
.boton {
    font-family: var(--titulos-dos);
    font-weight: 900;
    background-color: white;
    box-shadow: var(--sombra-btn) var(--naranja);
    border: var(--border-grueso);
    padding: 2px;
    transition: all 0.5s;
}

.boton:hover,
.boton.clicked {
    translate: 2.5px 2.5px;
    box-shadow: 2px 2px 0 0 black;
}

/*BOTONES HOME*/
.boton img {
    display: block;
    width: 95%;
    height: 95%;
    object-fit: cover;
}

.btnHome {
    width: clamp(30px,2dvw, 2dvw);
    aspect-ratio: 1 / 1;
    margin-right: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}



/* BOTONES GALERIA */
.btnGaleria {
    font-family: var(--titulos-dos);
    font-weight: 900;
    transition: none;
    margin: 0 1rem 1rem 0;
    padding: 4px 6px;
}

/* BOTON DE IR ATRAS EN PAGINA INDIVIDUAL DE PROYECTO */

.atras{
    box-shadow: var(--sombra-btn) black;
    padding: 0.4rem;
    margin-bottom: 2rem;
}

.atras a{
    color: black;
}

/* TRAYECTO BOTONES TABS*/
.btnSkill {
    text-align: center;
    padding: 0.6rem;
    box-shadow: var(--sombra-btn) var(--negro);
}

.cuadroTitulo {
    background-color: var(--azul);
    color: white;
    box-shadow: var(--sombra-btn) var(--negro);
    padding: 1rem 0;
}

/* BOTONES E INPUTS FORMULARIO // CONTACTO */

/* BOTONES flecha */
.botonContacto {
    width: 70px;
    margin: 20px;
    filter: drop-shadow(0px 8px 0px var(--amarillo));
 
    transition: all 0.2s;
    align-self: center;
}

.contactos .botonContacto {
    animation: pulso 2s infinite;
}

.botonContacto:hover {
    translate: 0px 2px;
    filter: drop-shadow(0px 4px 0px var(--amarillo));
}

@keyframes pulso {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

/* BOTON submit*/
input[type="submit"] {
    max-width: 30%;
    padding: 0.5rem 0;
    background-color: var(--amarillo);
    box-shadow: black;
    font-family: var(--titulos-dos);
    font-weight: 900;
    box-shadow: var(--sombra-btn) var(--negro);
   
    letter-spacing: 2px;
    transition: all 0.2s ease;
}

input[type="submit"]:hover {
    letter-spacing: 0px;

}

input[type="submit"]:active {
    translate: 4px 4px;
    box-shadow: 0px 0px 0 0 black;
    transition: all 0.1s ease;
    border: var(--border);
}