/* Cabecera + hero movil de la portada (diseno del cliente).
   Se activa solo por debajo de 768px; en escritorio no existe. */

.flako-mob { display: none; }

@media (min-width: 768px) {
    .flako-mob { display: none !important; }
}

@media (max-width: 767.98px) {

    /* ---- el bloque movil sustituye a la cabecera y al hero del tema ---- */
    body.flako-mob-activo #pxl-header-elementor,
    body.flako-mob-activo .pxl-header-sticky-wrap,
    body.flako-mob-activo #home { display: none !important; }

    .flako-mob {
        display: block;
        position: relative;
        width: 100%;
        overflow: hidden;
        background: #0A1C3D;
    }

    /* El diseno es un lienzo de 390x900: se escala, no se reescribe. */
    .flako-mob__escala {
        width: 390px;
        transform-origin: top left;
        transform: scale(var(--flakomob-s, 1));
    }

    .flako-mob__cerrado { height: calc(900px * var(--flakomob-s, 1)); }

    /* la cabecera (106px del lienzo) se mantiene visible y por encima del panel */
    /* el panel del menu se pinta por encima del hero; la cabecera se ve porque el
       panel arranca justo debajo de ella (--flakomob-top), no por z-index */
    .flako-mob__cerrado { position: relative; z-index: 1; }

    /* ---- menu a pantalla completa ---- */
    .flako-mob__menu {
        position: fixed;
        top: var(--flakomob-top, 0px);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99990;
        background: #0A1C3D;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity .26s ease, transform .26s ease, visibility .26s ease;
    }

    /* el lienzo del menu arranca en 106px (la altura de la cabecera del diseno):
       se sube esa franja para que el panel encaje justo bajo el header real */
    .flako-mob__menu .flako-mob__escala {
        transform: scale(var(--flakomob-sm, 1)) translateY(-106px);
        height: calc(794px * var(--flakomob-sm, 1));
    }

    body.flako-mob-menu-abierto .flako-mob__menu { transform: none; }

    .flako-mob__menu[hidden] { display: none; }

    body.flako-mob-menu-abierto .flako-mob__menu { opacity: 1; visibility: visible; }
    body.flako-mob-menu-abierto { overflow: hidden; }

    /* entrada escalonada de los items */
    .flako-mob__menu [data-pencil-name^="Item "],
    .flako-mob__menu [data-pencil-name="Menu Eyebrow"],
    .flako-mob__menu [data-pencil-name="Menu Footer"] {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity .34s ease, transform .34s ease;
    }

    body.flako-mob-menu-abierto .flako-mob__menu [data-pencil-name^="Item "],
    body.flako-mob-menu-abierto .flako-mob__menu [data-pencil-name="Menu Eyebrow"],
    body.flako-mob-menu-abierto .flako-mob__menu [data-pencil-name="Menu Footer"] {
        opacity: 1;
        transform: none;
    }

    .flako-mob__menu [data-pencil-name="Menu Eyebrow"] { transition-delay: .06s; }
    .flako-mob__menu [data-ancla="home"]     { transition-delay: .10s; }
    .flako-mob__menu [data-ancla="services"] { transition-delay: .15s; }
    .flako-mob__menu [data-ancla="about"]    { transition-delay: .20s; }
    .flako-mob__menu [data-ancla="process"]  { transition-delay: .25s; }
    .flako-mob__menu [data-ancla="projects"] { transition-delay: .30s; }
    .flako-mob__menu [data-ancla="faq"]      { transition-delay: .35s; }
    .flako-mob__menu [data-pencil-name="Menu Footer"] { transition-delay: .40s; }

    /* ---- item activo: el resaltado que el diseno trae en "Servicios" ---- */
    .flako-mob__menu [data-ancla] {
        cursor: pointer;
        background-color: transparent;
        transition: background-color .22s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .flako-mob__menu [data-ancla]:hover { background-color: #1C4FD029; }
    .flako-mob__menu [data-ancla].flako-mob-activo { background-color: #1C4FD0; }

    /* la flecha solo acompana al item activo */
    .flako-mob__menu [data-ancla] [data-pencil-name="Arrow"] {
        opacity: 0;
        transform: translateX(-6px);
        transition: opacity .22s ease, transform .22s ease;
    }

    .flako-mob__menu [data-ancla].flako-mob-activo [data-pencil-name="Arrow"] {
        opacity: 1;
        transform: none;
    }

    /* el punto y el tramo del rail siguen al item activo */
    .flako-mob__menu [data-pencil-name="Rail Progreso"],
    .flako-mob__menu [data-pencil-name="Rail Dot"] {
        transition: top .3s ease, height .3s ease;
    }

    /* ---- estados de foco y pulsacion ---- */
    .flako-mob [data-pencil-name="Menu Button"],
    .flako-mob [data-pencil-name="Close Button"],
    .flako-mob [data-pencil-name="Quick Call"],
    .flako-mob [data-pencil-name="CTA Button"],
    .flako-mob [data-pencil-name="Call Row"] {
        cursor: pointer;
        transition: transform .18s ease, filter .18s ease;
    }

    .flako-mob [data-pencil-name="Menu Button"]:active,
    .flako-mob [data-pencil-name="Close Button"]:active,
    .flako-mob [data-pencil-name="Quick Call"]:active,
    .flako-mob [data-pencil-name="CTA Button"]:active { transform: scale(.94); }

    .flako-mob [tabindex]:focus-visible,
    .flako-mob [role="button"]:focus-visible,
    .flako-mob [data-ancla]:focus-visible {
        outline: 2px solid #6EA8FF;
        outline-offset: 3px;
        border-radius: 12px;
    }

    /* quien prefiera menos movimiento, sin animaciones */
    @media (prefers-reduced-motion: reduce) {
        .flako-mob *,
        .flako-mob__menu * { transition: none !important; }
    }
}

@media (max-width: 767.98px) {

    /* el burger se convierte en X sin cambiar de sitio */
    .flako-mob [data-pencil-name="Menu Button"] { position: relative; }

    .flako-mob [data-pencil-name="Menu Icon"] {
        transition: opacity .2s ease, transform .2s ease;
    }

    body.flako-mob-menu-abierto .flako-mob [data-pencil-name="Menu Icon"] {
        opacity: 0;
        transform: rotate(90deg);
    }

    .flako-mob [data-pencil-name="Menu Button"]::before,
    .flako-mob [data-pencil-name="Menu Button"]::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 19px;
        height: 2.5px;
        border-radius: 2px;
        background: #0A1C3D;
        opacity: 0;
        transform: translate(-50%, -50%) rotate(0deg);
        transition: opacity .2s ease, transform .26s ease;
    }

    body.flako-mob-menu-abierto .flako-mob [data-pencil-name="Menu Button"]::before {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(45deg);
    }

    body.flako-mob-menu-abierto .flako-mob [data-pencil-name="Menu Button"]::after {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(-45deg);
    }
}