/* ═══════════════════════════════════════════════════════════
   Medipulse - Navbar
   Archivo: public/assets/css/navbar.css
   Partial: app/Views/web/partials/navbar.php

   Este archivo es autocontenido: la barra se puede insertar en cualquier
   pagina con <?= view('web/partials/navbar') ?> + este <link>, sin depender
   de web.css.
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&display=swap');

/* Tokens propios de la barra */
:root {
    --mp-cyan: #00d2f3;
    --mp-surface: #141414;
    --mp-nav-h: 102px;
    --mp-nav-h-sm: 76px;
}

/* ═══════════════════════════════════════════════════════════
   NAVBAR REUTILIZABLE
   Partial: app/Views/web/partials/navbar.php
   Figma:  "Sin titulo" › Page 2 › frame "hero" (271:49) · 1440 x 900
   ─ Medidas del diseno (coordenadas relativas al frame) ──────
   · Logo            x 124   y 24   126 x 41
   · Link "Home"     x 848   y 6     57 x 90
   · Link "Servicios" x 966  y 6     86 x 90
   · Link "Proyectos" x 1084 y 6     94 x 90
   · Link "Contactos" x 1203 y 6     97 x 90
   · Tipografia      Funnel Display Regular · 20px · ls 0 · #00D2F3
   · Gap             (452 - 334) / 3 = 39.3px  ->  40px
   · Alto de barra   cajas de texto y 6..96  ->  102px
   ═══════════════════════════════════════════════════════════ */

.mp-nav {
    --mp-accent: var(--mp-cyan);
    --mp-ease: cubic-bezier(.65, .05, .36, 1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    font-family: 'Funnel Display', 'FogtwoNo5', sans-serif;
    -webkit-font-smoothing: antialiased;
    background: #00000042;
    transition: background .3s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    overflow-x: hidden;
}

.mp-nav.is-hero {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  
}

/* ─── CONTENEDOR ─────────────────────────────────────────── */
.mp-nav__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    height: var(--mp-nav-h);
    /* 1440px de diseno -> 124px izquierda / 140px derecha */
    padding-left: clamp(20px, 8.611vw, 124px);
    padding-right: clamp(20px, 9.722vw, 140px);
}

/* ─── LOGO ───────────────────────────────────────────────── */
.mp-nav__brand {
    display: block;
    flex: 0 0 auto;
    line-height: 0;
    text-decoration: none;
}

.mp-nav__brand img {
    /* Anula el `img { width:100%; height:100% }` global */
    display: block;
    width: 126px;
    height: 41px;
    object-fit: contain;
    transition: opacity .25s ease;
}

.mp-nav__brand:hover img,
.mp-nav__brand:focus-visible img {
    opacity: .78;
}

/* ─── LINKS ──────────────────────────────────────────────── */
.mp-nav__list {
    display: flex;
    align-items: center;
    gap: 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mp-nav__link {
    position: relative;
    display: block;
    padding: 10px 0;
    color: black;
    font-family: inherit;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .25s ease;
}
.mp-nav__link.is-hero {
    color: var(--mp-accent);
}
.mp-nav__link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .32s var(--mp-ease);
}

.mp-nav__link:hover,
.mp-nav__link:focus-visible {
    opacity: .72;
}

.mp-nav__link:hover::after,
.mp-nav__link:focus-visible::after,
.mp-nav__link.is-active::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* ─── BOTON HAMBURGUESA ──────────────────────────────────── */
.mp-nav__toggle {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mp-accent);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mp-nav__toggle:focus-visible {
    outline: 2px solid var(--mp-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.mp-nav__bars {
    display: grid;
    gap: 6px;
    width: 28px;
}

.mp-nav__bars>span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform-origin: center;
    transition: transform .3s var(--mp-ease), opacity .2s ease;
}

/* ─── PANEL MOVIL (off-canvas) ───────────────────────────── */
.mp-nav__scrim {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: rgba(10, 10, 10, .72);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s;
}

.mp-nav.is-open .mp-nav__scrim {
    opacity: 1;
    visibility: visible;
}

/* ─── RESPONSIVE · <= 991px ──────────────────────────────── */
@media (max-width: 991px) {
    .mp-nav__inner {
        height: var(--mp-nav-h-sm);
        padding-left: 20px;
        padding-right: 20px;
    }

    .mp-nav__brand img {
        width: 108px;
        height: auto;
        margin-left: 2%;
    }

    .mp-nav__toggle {
        display: inline-flex;
    }

    /* El menu se convierte en panel lateral */
    .mp-nav__menu {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
        display: flex;
        align-items: center;
        width: min(400px, 86vw);
        padding: calc(var(--mp-nav-h-sm) + 32px) 40px 40px;
        background: var(--mp-surface);
        border-left: 1px solid rgba(0, 210, 243, .14);
        box-shadow: -24px 0 60px rgba(0, 0, 0, .45);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform .45s var(--mp-ease), visibility .45s;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .mp-nav.is-open .mp-nav__menu {
        transform: translateX(0);
        visibility: visible;
    }

    .mp-nav__list {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        width: 100%;
    }

    .mp-nav__link {
        font-size: 28px;
        line-height: 1.15;
        padding: 14px 0;
    }

    .mp-nav__link::after {
        bottom: 6px;
        height: 2px;
    }

    /* Entrada escalonada de los links */
    .mp-nav.is-open .mp-nav__item {
        animation: mpNavIn .45s var(--mp-ease) both;
    }

    .mp-nav.is-open .mp-nav__item:nth-child(1) {
        animation-delay: .08s;
    }

    .mp-nav.is-open .mp-nav__item:nth-child(2) {
        animation-delay: .14s;
    }

    .mp-nav.is-open .mp-nav__item:nth-child(3) {
        animation-delay: .20s;
    }

    .mp-nav.is-open .mp-nav__item:nth-child(4) {
        animation-delay: .26s;
    }

    /* Hamburguesa -> X */
    .mp-nav.is-open .mp-nav__bars>span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .mp-nav.is-open .mp-nav__bars>span:nth-child(2) {
        opacity: 0;
        transform: scaleX(.4);
    }

    .mp-nav.is-open .mp-nav__bars>span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}

@keyframes mpNavIn {
    from {
        opacity: 0;
        transform: translateX(24px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ─── RESPONSIVE · <= 576px ──────────────────────────────── */
@media (max-width: 576px) {
    .mp-nav__menu {
        width: 100%;
        padding: calc(var(--mp-nav-h-sm) + 24px) 28px 32px;
    }

    .mp-nav__link {
        font-size: 24px;
    }
}

/* ─── MOVIMIENTO REDUCIDO ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .mp-nav__menu,
    .mp-nav__scrim,
    .mp-nav__bars>span,
    .mp-nav__link::after {
        transition-duration: .01ms;
    }

    .mp-nav.is-open .mp-nav__item {
        animation: none;
    }
}