/* ------------------------------------------- */
/* CONFIGURACIÓN BASE */
/* ------------------------------------------- */

/* --- FIX DEFINITIVO: MATAR EL BORDE DEL CONTENEDOR DE ELEMENTOR --- */
.elementor-widget-menudesplegable-misato,
.elementor-widget-menudesplegable-misato:focus,
.elementor-widget-menudesplegable-misato:focus-within,
.elementor-widget-menudesplegable-misato .elementor-widget-container,
.elementor-widget-menudesplegable-misato .elementor-widget-container:focus,
.elementor-widget-menudesplegable-misato .elementor-widget-container:focus-within,
.elementor-widget-menudesplegable-misato .elementor-widget-container:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    -webkit-tap-highlight-color: transparent !important;
}

:root {
    --button-radius: 50%;
    --transition-duration: 0.3s;
    --transition-easing: cubic-bezier(0.19, 1, 0.22, 1);
}

/* ------------------------------------------- */
/* ZONA DE LIMPIEZA NUCLEAR (ELIMINA LINEAS ROSADAS) */
/* ------------------------------------------- */

/* Aplica limpieza a todo el widget y sus hijos */
.misato-menu-wrapper,
.misato-menu-wrapper *,
.misato-menu-wrapper *:before,
.misato-menu-wrapper *:after,
.menu-toggle-button,
.menu-toggle-container {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Elimina el foco específico del navegador */
.misato-menu-wrapper:focus,
.misato-menu-wrapper:focus-within,
.menu-toggle-button:focus,
.menu-toggle-button:focus-visible,
.menu-toggle-button:active,
.menu-toggle-container:focus {
    outline: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

/* ------------------------------------------- */
/* ESTRUCTURA PRINCIPAL */
/* ------------------------------------------- */
.misato-menu-wrapper {
    position: relative;
    z-index: 999;
    display: inline-block;
}

/* ------------------------------------------- */
/* BOTÓN RELATIVO */
/* ------------------------------------------- */
.menu-toggle-container {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    z-index: 10001 !important; 
    background: transparent !important;
}

.menu-toggle-button {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    transition: transform 0.2s ease;
    pointer-events: auto !important;
    
    /* Refuerzo de limpieza */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.menu-toggle-button:hover { transform: scale(0.95); }

/* Contenedor del Icono */
.menu-toggle-icon {
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%; /* Único borde permitido */
    overflow: hidden;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.menu-toggle-icon svg,
.menu-toggle-icon i {
    color: #fff;
    fill: currentColor;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.menu-toggle-icon img { width: 100%; height: 100%; object-fit: contain; }

/* ------------------------------------------- */
/* ANIMACIÓN HAMBURGUESA */
/* ------------------------------------------- */
.burger-lines {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 30% 0;
    box-sizing: border-box;
}

.burger-lines span {
    display: block;
    height: 2px;
    width: 50%;
    background-color: #fff;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}

/* X visible en Negro cuando activo */
.misato-menu-wrapper.is-active .burger-lines span {
    background-color: #000 !important;
}

.misato-menu-wrapper.is-active .burger-lines span:nth-child(1) { transform: translateY(250%) rotate(45deg); }
.misato-menu-wrapper.is-active .burger-lines span:nth-child(2) { opacity: 0; transform: scale(0); }
.misato-menu-wrapper.is-active .burger-lines span:nth-child(3) { transform: translateY(-250%) rotate(-45deg); }

/* ------------------------------------------- */
/* ICONO ACTIVO */
/* ------------------------------------------- */
.misato-icon-active-wrapper {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.5); transition: all 0.3s ease; z-index: 5;
}
.misato-menu-wrapper.is-active .misato-icon-active-wrapper { opacity: 1; transform: scale(1); }
.misato-menu-wrapper.is-active .misato-icon-normal { opacity: 0; transform: scale(0.5); }

/* ------------------------------------------- */
/* PANEL PANTALLA COMPLETA */
/* ------------------------------------------- */
.fullscreen-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9998; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-y: auto; 
    overflow-x: hidden;
    background-color: #ffe700;
    
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-100%);
    
    transition: transform 0.6s var(--transition-easing), opacity 0.4s var(--transition-easing), visibility 0s 0.6s;
}

.fullscreen-menu.is-active {
    opacity: 1 !important; visibility: visible !important; pointer-events: all !important; transform: translateY(0) !important;
    transition: transform 0.6s var(--transition-easing), opacity 0.4s var(--transition-easing), visibility 0s;
}

.misato-noise-yes .fullscreen-menu:before {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAG0lEQVQIW2NkgABGMf//jKqB6gEGEZ8F8gUABjUFB/L/lqkAAAAASUVORK5CYII="); opacity: 0.1; pointer-events: none; z-index: -1;
}

/* SIDEBAR */
.misato-menu-type-sidebar .fullscreen-menu { width: 30vw; left: auto; right: 0; transform: translateX(100%); }
.misato-menu-type-sidebar .fullscreen-menu.is-active { transform: translateX(0) !important; }
.misato-sidebar-left.misato-menu-type-sidebar .fullscreen-menu { left: 0; right: auto; transform: translateX(-100%); }
.misato-sidebar-left.misato-menu-type-sidebar .fullscreen-menu.is-active { transform: translateX(0) !important; }

/* ------------------------------------------- */
/* RESPONSIVE Y CONTENIDO SEGURO */
/* ------------------------------------------- */
.main-nav-container { width: 100%; max-width: 800px; padding: 20px; box-sizing: border-box; }
.main-nav { list-style: none !important; padding: 0 !important; margin: 0 0 50px 0 !important; width: 100%; }
.main-nav li { margin: 20px 0 !important; padding-bottom: 15px !important; position: relative; max-width: 100%; }
.main-nav a { text-decoration: none !important; text-transform: uppercase; display: inline-block; transition: all 0.3s; font-weight: bold; font-size: 1.5rem; white-space: normal; word-wrap: break-word; max-width: 100%; }

@media (max-width: 768px) {
    .misato-menu-type-sidebar .fullscreen-menu { width: 85vw; }
    .fullscreen-menu { padding-top: 80px; justify-content: flex-start; }
}

.misato-menu-wrapper[data-separator-display="yes"] .main-nav > li::after {
    content: ""; display: block; width: 200px; max-width: 80%; margin: 0 auto; border-bottom: 1px solid #000; position: absolute; bottom: -15px; left: 0; right: 0;
}
.main-nav > li:last-child::after { display: none; }

.misato-menu-wrapper[data-show-pointer="yes"] .main-nav > li > a:hover::before {
    content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: -25px; width: 12px; height: 12px; background-color: #000; display: block;
}
.misato-menu-wrapper[data-pointer-type="circle"] .main-nav > li > a:hover::before { border-radius: 50%; }
.misato-menu-wrapper[data-pointer-type="line"] .main-nav > li > a:hover::before { width: 3px; height: 30px; }

.main-nav ul { list-style: none !important; padding: 10px 0 0 0 !important; margin: 0 !important; opacity: 0.8; }
.social-icons { display: flex; gap: 20px; margin-top: 40px; justify-content: center; flex-wrap: wrap; max-width: 100%; }
.social-icons a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.2); transition: 0.3s; }
.social-icons a:hover { transform: scale(1.1); }
body.misato-menu-open { overflow: hidden !important; }