/*
 * Animación del icono del botón menú.
 * https://www.youtube.com/watch?v=WfyQF2xyAHE
 * https://codepen.io/staffanmowitz/pen/KoKgmo
 * https://jsonformatter.org/scss-to-css
*/

.dash {
    /* Elimina cualquier efecto de hover por defecto del navegador */
    -webkit-tap-highlight-color: transparent;
}

.dash svg {
    /* Evita que el ratón "choque" con las líneas individuales */
    pointer-events: none;
    /* Evita el efecto de desenfoque/grisáceo */
    shape-rendering: geometricPrecision;
}

.dash svg line {
    transform-origin: center;
    transform-box: fill-box;
    /* Asegura que el color sea sólido */
    stroke-opacity: 1;
    /* Evita que se vea borroso al animar */
    backface-visibility: hidden;
}

/* --- ESTADO CERRADO (Hamburguesa) --- */
.dash svg g:first-child {
    opacity: 1;
    transition: opacity 0s 0.2s;
}
.dash svg g:first-child line {
    /* Al cerrar, espera 0.2s a que la X sea plana para separarse */
    transition: transform 0.2s 0.2s;
    transform: translateY(0);
}

.dash svg g:last-child {
    opacity: 0;
    transition: opacity 0s 0.2s;
}

.dash svg g:last-child line {
    /* Al cerrar, la X se endereza inmediatamente (sin delay) */
    transition: transform 0.2s 0s;
    transform: rotate(0);
}

/* --- ESTADO ABIERTO (X) --- */
.open .dash svg g:first-child {
    opacity: 0;
    transition: opacity 0s 0.2s;
}

.open .dash svg g:first-child line {
    /* Al abrir, colapsan al centro inmediatamente (sin delay) */
    transition: transform 0.2s;
}

.open .dash svg g:first-child line:first-child {
    transform: translateY(7px);
}

.open .dash svg g:first-child line:last-child {
    transform: translateY(-7px);
}

.open .dash svg g:last-child {
    opacity: 1;
    transition: opacity 0s 0.2s;
}

.open .dash svg g:last-child line {
    /* Al abrir, espera 0.2s a que las otras se junten para rotar */
    transition: transform 0.2s 0.2s;
}

.open .dash svg g:last-child line:first-child {
    transform: rotate(45deg);
}

.open .dash svg g:last-child line:last-child {
    transform: rotate(-45deg);
}