/* =========================================
   1. RESET Y BASE
========================================= */
.boton-misato, 
.boton-misato *, 
.boton-misato *:before, 
.boton-misato *:after {
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
    text-decoration: none !important;
}

/* Contenedor Principal */
.boton-misato {
    display: flex;
    position: relative;
    cursor: pointer;
    padding: 0;
    margin: 0;
    background: transparent !important;
    overflow: visible; 
    box-sizing: border-box;
    transition: all 0.4s ease;
    border: none !important; 
}

/* =========================================
   2. PARTES DEL BOTÓN (Cuadrado y Rectángulo)
========================================= */
.boton-misato .cuadrado,
.boton-misato .rectangulo {
    display: flex;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-radius 0.4s ease;
    box-sizing: border-box; 
    position: relative; 
    z-index: 2;
}

/* Cuadrado (Flecha) */
.boton-misato .cuadrado {
    justify-content: center;
    z-index: 2; 
    flex-shrink: 0;
}

/* Flecha / Icono */
.boton-misato .flecha,
.boton-misato .custom-arrow {
    display: block;
    line-height: 1;
    transition: all 0.3s ease;
    border: none !important;
    z-index: 11; /* Encima del ruido */
}

/* Rectángulo (Textos) */
.boton-misato .rectangulo {
    position: relative;
    z-index: 10;
    overflow: hidden;
    padding: 0 15px; 
    flex-grow: 1;
}

/* =========================================
   3. TEXTOS (Normal vs Hover)
========================================= */
.boton-misato .texto-normal,
.boton-misato .texto-hover {
    display: block;
    white-space: nowrap;
    transition: all 0.4s ease;
    border: none !important;
    z-index: 11; 
}

.boton-misato .texto-normal {
    position: relative;
    opacity: 1;
    transform: translateY(0);
}

.boton-misato .texto-hover {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 100%;
    opacity: 0;
}

/* Cambio general de textos en Hover */
.boton-misato:hover .texto-normal {
    opacity: 0;
    transform: translateY(-10px);
}

.boton-misato:hover .texto-hover {
    opacity: 1;
}

/* =========================================
   4. ANIMACIONES
========================================= */

/* --- A. HIDE (Ocultar tras rectángulo) --- */
.boton-misato.anim-hide:hover .cuadrado {
    transform: translateX(100%);
    opacity: 0;
}
.boton-misato.anim-hide:hover .rectangulo {
    transform: translateX(-50px);
    width: 100% !important;
}

/* --- B. SWAP (Mover al final) --- */
.boton-misato.anim-swap:hover .cuadrado {
    transform: translateX(260%); 
    opacity: 1;
    z-index: 1; 
}
.boton-misato.anim-swap:hover .rectangulo {
    transform: translateX(-50px);
    z-index: 10; 
}

/* --- C. ELASTIC (Chicle / Separación) --- */
.boton-misato.anim-elastic .cuadrado,
.boton-misato.anim-elastic .rectangulo {
    transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), background-color 0.4s ease, border-color 0.4s ease, border-radius 0.4s ease;
}

.boton-misato.anim-elastic:hover .cuadrado {
    transform: translateX(-25px); 
}

.boton-misato.anim-elastic:hover .rectangulo {
    transform: translateX(25px); 
}

/* =========================================
   5. EFECTO DE RUIDO (NOISE)
========================================= */
.boton-misato.has-noise .cuadrado::before,
.boton-misato.has-noise .rectangulo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMCAxMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIGZpbGw9IiMwMDAwMDAiIHBvaW50cz0iNzguMzYyLDgwLjExNSAzMC4wNjEsMjMuNjI5IDEwMCw0NC42MzUgMTcuNzUxLDMyLjk0MSAzNS42NDIsNzguOTM4IDEwMCw2Mi41ODkgNjguMDM4LDI4LjkxMyAxMS4wODYsNDEuMDY0IDY3LjQzMSwxNi41OTUgMTguOTI1LDUzLjY1MiA5Ni45OTIsNTUuMjY1IDI5LjcwNyw1MS41MjcgNjYuMDgyLDQ3Ljk0NyA4LjgzMyw3Ny44ODkgODUuMDc2LDYzLjgyNSIvPjxwb2x5Z29uIGZpbGw9IiMwMDAwMDAiIHBvaW50cz0iODguMjU0LDU2LjY2NSA4Ni4wMDMsNTEuOTkyIDkyLjEzMSw1Mi4xMjkgOTAuMDE1LDQ3LjQ2IDIwLjQ1NSw4Ny43MyAzNy4xNDQsNzUuMzM4IDkwLjkyMSw3NC42NzIgMjkuODY4LDQ1LjQ2MSA0MS43NjksODcuMzk3IDg2LjY0NywyOC4zNTMgMzcuMTk1LDM4LjQyNiAyMi45NTYsODcuNzk4IDg5LjYyNiwzNC4wNDIgNTcuNDYyLDg4LjI3OCA3Mi44ODIsNzUuNzU4IDUuODUzLDQ3LjI3MiA5MC40NTQsNjUuODYyIDI4LjAzOSw3OS45NzUgNzMuOTI3LDQ5LjM3MyAxMS4xMjcsMjUuMDY5IDg3LjAyOCw0My4yNjcgMzcuNzYsNTcuNTYgNDIuMjkxLDM2LjM4OSAxMS44MjcsODcuODk3IDY4LjMxMywzMy4zMDYgNzEuODIzLDg3LjY1OSAyNS4zMjIsNzkuNTg5IDQ5LjE5NSwxMS43NzUgNjYuNTM1LDQ2LjQ1NiAxMC41MzUsNTUuNjg2IDU4LjY3NywxMS41NjUgNDYuNTY4LDg0LjQxNSIvPjwvc3ZnPg==');
    background-repeat: repeat;
    pointer-events: none; 
    z-index: 1; 
    opacity: 0.1; 
    mix-blend-mode: overlay; 
    transition: opacity 0.4s ease, background-size 0.4s ease, border-radius 0.4s ease;
}

/* Asegura que los contenidos del botón estén por encima del ruido */
.boton-misato .cuadrado .flecha,
.boton-misato .cuadrado .custom-arrow,
.boton-misato .rectangulo .texto-normal,
.boton-misato .rectangulo .texto-hover { 
    z-index: 11; 
}