@charset "utf-8";

/* ============================================================
   BAYMEET · HEADER
   Archivo: assets/css/page_public/header.css
   Mobile First · Responsive Premium
============================================================ */

/* ============================================================
   VARIABLES GLOBALES
============================================================ */

:root {

    --bm-primary: #d80027;
    --bm-accent: #ff5023;

    --bm-bg: #ffffff;
    --bm-text: #1a1a1a;

    --header-height: 78px;

    --menu-btn-size-w: 22px;
    --menu-btn-size-h: 14px;

    --menu-btn-top: .70rem;
    --menu-btn-right: 1rem;

    --header-max-width: 1200px;
    --header-max-width-xl: 1400px;
}

/* ============================================================
   EMPUJE GLOBAL
============================================================ */

body {
    padding-top: var(--header-height);
}

/* ============================================================
   ESTADO GLOBAL MENÚ
============================================================ */

body.menu-open {
    overflow: hidden;
}

/* ============================================================
   HEADER FIJO
============================================================ */

.bm-header {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: var(--header-height);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 1rem;

    background: var(--bm-bg);

    border-radius: 0 0 12px 12px;

    box-shadow:
        0 6px 18px rgba(255, 80, 35, .10);

    z-index: 8000;

    box-sizing: border-box;
}

.bm-header::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background: var(--bm-accent);
}

/* ============================================================
   CONTENIDO INTERNO
============================================================ */

.bm-header-inner {
    position: relative;

    width: 100%;

    z-index: 2;

    box-sizing: border-box;
}

.header-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    width: 100%;
}

.desktop-menu {
    display: none;
}

/* ============================================================
   LOGO
============================================================ */

.header-logo {
    display: flex;
    align-items: center;

    min-width: 0;
}

.header-logo-link {
    display: inline-flex;
    align-items: center;

    gap: .30rem;

    text-decoration: none;
}

.header-logo .logo-img {
    width: 20px;
    height: 20px;

    flex: 0 0 auto;
}

.logo-text {
    display: inline-flex;

    font-family: var(--font-logo);

    font-size: clamp(1.65rem, 7vw, 2rem);

    font-weight: 700;

    letter-spacing: -.45px;

    text-transform: lowercase;

    line-height: 1;
}

.logo-bay {
    color: var(--bm-primary);
}

.logo-meet {
    color: var(--bm-accent);
}

/* ============================================================
   SLOGAN
============================================================ */

.header-slogan {
    display: block;

    margin-top: .20rem;

    font-family: var(--font-body);

    font-size: clamp(.95rem, 4vw, 1.08rem);

    font-weight: 500;

    line-height: 1.25;

    color: #000;
}

/* ============================================================
   BOTÓN HAMBURGUESA
============================================================ */

.menu-toggle {
    position: absolute;

    top: var(--menu-btn-top);
    right: var(--menu-btn-right);

    width: var(--menu-btn-size-w);
    height: var(--menu-btn-size-h);

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 0;

    background: none;
    border: none;

    cursor: pointer;

    z-index: 10000;

    transition: opacity .15s ease;
}

.menu-toggle span {
    display: block;

    width: 100%;
    height: 2px;

    background: var(--bm-primary);

    border-radius: 999px;
}

body.menu-open .menu-toggle {
    opacity: 0;
    pointer-events: none;
}

/* ============================================================
   OVERLAY
============================================================ */

.bm-nav-overlay {
    position: fixed;

    inset: 0;

    background: rgba(0,0,0,.20);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .25s ease,
        visibility .25s ease;

    z-index: 9000;
}

body.menu-open .bm-nav-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ============================================================
   MENÚ MOBILE
============================================================ */

.mobile-menu {
    position: fixed;

    top: 0;
    right: 0;

    width: min(78vw, 320px);

    height: 100dvh;
    min-height: 100vh;

    padding: 3.4rem 1.6rem 2.2rem;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    gap: 1.4rem;

    background: var(--bm-bg);

    border-radius: 1.2rem 0 0 1.2rem;

    transform: translateX(calc(100% + 60px));

    transition:
        transform .32s cubic-bezier(.18,.88,.25,1),
        box-shadow .22s ease;

    z-index: 9500;
}

body.menu-open .mobile-menu {
    transform: translateX(0);

    box-shadow:
        -8px 0 22px rgba(0,0,0,.22);
}

/* ============================================================
   BOTÓN CERRAR
============================================================ */

.menu-close {
    position: fixed;

    top: 20px;
    right: 20px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    background: none;
    border: none;

    cursor: pointer;

    z-index: 9600;

    opacity: 0;
    pointer-events: none;

    transform: scale(.7);

    transition:
        opacity .22s ease,
        transform .22s ease;
}

.menu-close span {
    position: absolute;

    width: var(--menu-btn-size-w);
    height: 2px;

    background: var(--bm-primary);

    border-radius: 999px;
}

.menu-close span:nth-child(1) {
    transform: rotate(45deg);
}

.menu-close span:nth-child(2) {
    transform: rotate(-45deg);
}

body.menu-open .menu-close {
    opacity: 1;
    pointer-events: auto;

    transform: scale(1);
}

/* ============================================================
   LINKS MOBILE
============================================================ */

.mobile-menu ul {
    display: flex;
    flex-direction: column;

    margin: .2rem 0 0;
    padding: 0;

    list-style: none;
}

.mobile-menu a {
    display: block;

    padding: .8rem 0;

    font-family: var(--font-body);

    font-size: 1.08rem;
    font-weight: 400;

    color: var(--bm-text);

    text-decoration: none;

    border-bottom:
        1px solid rgba(216,0,39,.35);

    transition:
        color .18s ease,
        transform .18s ease;
}

.mobile-menu a:hover,
.mobile-menu a:focus-visible {
    color: var(--bm-primary);
}

.mobile-menu a:active {
    transform: translateX(4px);
}

/* ============================================================
   480PX
============================================================ */

@media (min-width: 480px) {

    :root {
        --header-height: 84px;
    }

    .header-logo .logo-img {
        width: 22px;
        height: 22px;
    }

    .logo-text {
        font-size: 2rem;
    }

    .header-slogan {
        font-size: 1rem;
    }

    .mobile-menu {
        width: min(68vw, 300px);
    }
}

/* ============================================================
   600PX
============================================================ */

@media (min-width: 600px) {

    :root {
        --header-height: 92px;
    }

    .header-logo .logo-img {
        width: 24px;
        height: 24px;
    }

    .logo-text {
        font-size: 2.1rem;
    }

    .header-slogan {
        font-size: 1.02rem;
    }

    .mobile-menu {
        width: min(52vw, 290px);
    }
}

/* ============================================================
   TABLET / DESKTOP
============================================================ */

@media (min-width: 768px) {

    :root {
        --header-height: 92px;
    }

    .bm-header::before {
        display: none;
    }

    .bm-header {
        background:
            linear-gradient(
                to top,
                #fff9fa 0%,
                #ffffff 100%
            );

        box-shadow:
            0 2px 14px rgba(0,0,0,.04);
    }

    .bm-header-inner {
        max-width: var(--header-max-width);

        margin: 0 auto;
    }

    .header-slogan {
        max-width: var(--header-max-width);

        margin: .25rem auto 0;

        text-align: left;

        font-size: .96rem;
    }

    .logo-text {
        font-size: 1.7rem;
    }

    .menu-toggle,
    .menu-close,
    .bm-nav-overlay,
    .mobile-menu {
        display: none !important;
    }

    .desktop-menu {
        display: flex;
        align-items: center;

        margin-top: 12px;
    }

    .desktop-menu ul {
        display: flex;
        align-items: center;

        gap: 1.8rem;

        list-style: none;

        margin: 0;
        padding: 0;
    }

    .desktop-menu a {
        position: relative;

        display: inline-block;

        padding: .4rem 0;

        font-family: var(--font-body);

        font-size: .96rem;
        font-weight: 500;

        color: var(--bm-text);

        text-decoration: none;

        transition:
            color .22s ease,
            transform .20s ease;
    }

    .desktop-menu a::after {
        content: "";

        position: absolute;

        left: 0;
        bottom: -2px;

        width: 100%;
        height: 2px;

        background: var(--bm-primary);

        border-radius: 999px;

        transform: scaleX(0);
        transform-origin: left;

        transition: transform .28s ease;
    }

    .desktop-menu a:hover,
    .desktop-menu a:focus-visible {
        color: var(--bm-primary);

        transform: translateY(-1px);
    }

    .desktop-menu a:hover::after,
    .desktop-menu a:focus-visible::after {
        transform: scaleX(1);
    }
}

/* ============================================================
   DESKTOP GRANDE
============================================================ */

@media (min-width: 1200px) {

    .bm-header-inner,
    .header-slogan {
        max-width: var(--header-max-width-xl);
    }

    .logo-text {
        font-size: 1.85rem;
    }

    .header-slogan {
        font-size: 1rem;
    }
}