@media (width<625px) {
    *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 15px;
    }
    body{
        width: 100%;
        height: 100%;
        position: relative;
    }
    h1 {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
    }
    h2 {
        font-size: clamp(1.3rem, 5vw, 1.8rem);
    }

    h3 {
        font-size: clamp(1.1rem, 4vw, 1.5rem);
    }

    p, li, a {
        font-size: clamp(0.9rem, 3.5vw, 1rem);
    }

    label {
        font-size: clamp(1.2rem, 5vw, 1.6rem);
    }

    .texto {
        font-size: clamp(1rem, 4vw, 1.3rem);
    }
   /*MENU DESPLEGABLE*/
    .menu{
        position: fixed;
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 2;

        .menu-desplegable{
            display: none;
            width: 100%;
            height: auto;
            background-color: var(--bg-secundario);
            flex-direction: column;            
            padding: 20px;
            gap: 20px;
            border-top-right-radius: 30px;
            border-bottom-right-radius: 30px;
            list-style-type: none;
            position: relative;

            a{
                text-decoration: none;
                color: var(--texto-secundario2);
                font-weight: bolder;
                height: 100%;
                display: flex;
            }
        }
    }

    label{
        display: block;
        position: absolute;
        height: 100%;
        left: 0;
        top: 10px;
        z-index: 1;

    }
    #m:checked + .menu-desplegable {
        display: flex; 
        animation: desplazar 0.5s ease-in-out;
    }

.contenedor{
    .footer{
        position: relative;
        opacity: 1;
        filter: none;
        transition: none;
        filter: brightness(0.5);
        img{
            filter: none;
        }
}

    .monigote{
        opacity: 1;
        transition: none;
        position: absolute;
        height: 40px;
        width: 100%;
        bottom: 40%;
        img{
        position: absolute;
        right: auto;
        }
    }
}

.texto{
    top:40%;
    position: absolute;
    opacity: 1;
    transition: none;
    font-size: 100%;
}

.contenedor:hover .footer {
    opacity: 1;
    filter: brightness(0.5);
}

.contenedor:hover .texto{
    opacity: 1;
}

.contenedor:hover .monigote{
    opacity: 1;
}

.card{
    transition: none;
}

.card:hover{
    transform: none;
}

  /*FORMULARIO*/
  #cuestionario button,
  #test-aroma button{
    transition: none;
  }

  #cuestionario button:hover{
    background-color: #ffb6c1;
    transform: none;
  }

  #test-aroma button:hover{
    background-color: #ff69b4;
    transform: none;
  }

 
  #cuestionario button:active {
    background-color: #ff69b4; /* color que quieras al pulsar */
    transform: none;
  }

  #test-aroma button:active {
    background-color: #ff1493; /* color que quieras al pulsar */
    transform: none;
  }

  /* quitar transiciones en móvil */
  #cuestionario button,
  #test-aroma button {
    transition: none;
  }
}