/* =========================================================
   ANDAMIO CODE · MOBILE APP LAYER — BASE
   Tokens, app bar superior y tab bar inferior.
   Se carga DESPUÉS de styles.css / navbar.css / footer.css.
   Solo afecta pantallas < 768px (desktop queda intacto).
   ========================================================= */
@media (max-width: 767px) {

    :root {
        --app-bg: var(--color-bg);
        --app-surface: var(--color-surface);
        --app-surface-2: var(--color-surface-2);
        --app-line: var(--color-border-soft);
        --app-line-2: var(--color-border-soft);
        --app-text: var(--color-text);
        --app-muted: var(--color-text-muted);
        --app-dim: var(--color-text-muted);
        --app-cyan: var(--color-accent);
        --app-green: var(--color-accent);
        --app-grad: var(--color-accent);
        --app-grad-text: var(--color-accent-text);
        --app-radius: 22px;
        --app-radius-sm: 14px;
        --app-bar-h: 60px;
        --app-tab-h: 68px;
        --app-gutter: 18px;
        --app-safe-top: env(safe-area-inset-top, 0px);
        --app-safe-bottom: env(safe-area-inset-bottom, 0px);
        --app-font: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
        --app-mono: 'Space Mono', 'Courier New', monospace;
        --app-ease: cubic-bezier(.2, .7, .2, 1);

        /* Iconos (máscaras SVG, se pintan con currentColor) */
        --i-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
        --i-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
        --i-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
        --i-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.5 8.5 0 0 1-8.5 8.5H3l1.5-4A8.5 8.5 0 1 1 21 11.5Z'/%3E%3C/svg%3E");
        --i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
        --i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
    }

    /* ---------- Base ---------- */
    html { scroll-padding-top: calc(var(--app-bar-h) + var(--app-safe-top) + 12px); }

    body {
        position: relative;
        isolation: isolate;
        font-size: 15px;
        line-height: 1.55;
        background-color: var(--app-bg);
        padding-bottom: calc(var(--app-tab-h) + 28px + var(--app-safe-bottom));
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Fondo fijo al tamaño de pantalla: no se estira ni pixela en páginas largas */
    body::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: -1;
        background-image: var(--pattern-bg-app);
        background-size: cover;
        background-position: top center;
        background-repeat: no-repeat;
        pointer-events: none;
    }

    body.nav-open { position: static; overflow: visible; }

    h1, h2, h3, h4 {
        font-family: var(--app-font);
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.1;
        overflow-wrap: normal;
        text-wrap: balance;
    }

    h3, h4 { font-weight: 700; letter-spacing: -0.015em; }

    p { text-wrap: pretty; }

    ::selection { background: var(--color-accent-soft); }

    .container { padding: 0 var(--app-gutter); }

    .text-gradient { background: var(--app-grad-text); -webkit-background-clip: text; background-clip: text; }

    /* ---------- Botones estilo app ---------- */
    .btn {
        min-height: 50px;
        padding: 0 18px;
        border-radius: var(--app-radius-sm);
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.005em;
        transition: transform .15s var(--app-ease), box-shadow .2s ease, background .2s ease;
    }

    .btn-primary {
        background: var(--app-grad);
        color: var(--color-on-accent);
        box-shadow: 0 10px 26px var(--shadow-color), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    .btn-secondary,
    .btn-outline {
        background: var(--app-surface-2);
        border-color: var(--app-line-2);
        color: var(--app-text);
    }

    .btn:hover { transform: none; }
    .btn:active { transform: scale(0.97); }

    /* ---------- Chip de estado (badge) ---------- */
    .badge {
        gap: 8px;
        padding: 6px 12px 6px 10px;
        margin-bottom: 18px;
        font-size: 11px;
        letter-spacing: 0.04em;
        color: var(--app-cyan);
        background: var(--color-accent-soft);
        border-color: var(--color-accent-soft);
    }

    .badge .dot { width: 7px; height: 7px; animation: app-pulse 1.8s ease-in-out infinite; }

    @keyframes app-pulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: .45; transform: scale(1.35); }
    }

    .eyebrow { font-size: 11px; letter-spacing: 0.1em; margin-bottom: 8px; }

    /* Animaciones de entrada más cortas y suaves */
    .reveal { transform: translateY(18px); transition: opacity .6s var(--app-ease), transform .6s var(--app-ease); }

    /* =========================================================
       APP BAR SUPERIOR
       ========================================================= */
    header { padding-top: var(--app-safe-top); }

    header::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--color-accent);
        border-bottom: 1px solid var(--app-line);
    }

    .navbar {
        width: 100%;
        max-width: none;
        height: var(--app-bar-h);
        margin: 0;
        padding: 0 var(--app-gutter);
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        /* sin backdrop-filter: si no, el tab bar fixed quedaría atrapado */
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .logo { gap: 10px; }
    .logo-icon { height: 32px; filter: drop-shadow(0 0 12px var(--shadow-color)); }

    .logo-name {
        font-family: 'Copperplate', 'Copperplate Gothic Light', 'Copperplate Gothic Bold', serif;
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 0.01em;
        color: var(--color-on-accent);
    }

    .logo-name strong { color: var(--color-on-accent); }

    .hamburger,
    .nav-cta .btn { display: none !important; }

    /* =========================================================
       TAB BAR INFERIOR (reutiliza .nav-links, sin tocar el HTML)
       Orden: Inicio · Nosotros · [Buscar] · Proyectos · Contacto
       ========================================================= */
    .nav-links {
        position: fixed;
        inset: auto 12px calc(12px + var(--app-safe-bottom)) 12px;
        z-index: 1000;
        width: auto;
        height: var(--app-tab-h);
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0;
        padding: 0 6px;
        text-align: center;
        transform: none;
        transition: none;
        isolation: isolate;
        /* LIQUID GLASS: vidrio muy translúcido que refracta y satura lo que pasa por detrás */
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 55%, rgba(255, 255, 255, 0.05) 100%),
            var(--color-surface);
        -webkit-backdrop-filter: blur(14px) saturate(200%) brightness(1.12) contrast(1.05);
        backdrop-filter: blur(14px) saturate(200%) brightness(1.12) contrast(1.05);
        border: 0;
        border-radius: 30px;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.32),
            inset 0 -1px 0 rgba(255, 255, 255, 0.06),
            inset 0 12px 22px -14px rgba(255, 255, 255, 0.28),
            inset 0 -14px 22px -16px var(--shadow-color),
            0 22px 44px var(--shadow-color),
            0 2px 6px var(--shadow-color);
    }

    /* Brillo especular que recorre el vidrio */
    .nav-links::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        pointer-events: none;
        background:
            radial-gradient(60% 120% at 18% -30%, rgba(255, 255, 255, 0.22), transparent 60%),
            radial-gradient(50% 100% at 92% 130%, rgba(255, 255, 255, 0.12), transparent 60%),
            linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.09) 45%, transparent 58%);
        background-size: 100% 100%, 100% 100%, 260% 100%;
        animation: app-glass-sheen 9s ease-in-out infinite;
    }

    /* Borde refractado: más claro arriba-izquierda y abajo-derecha */
    .nav-links::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        pointer-events: none;
        background: linear-gradient(140deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.08) 32%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.12) 78%, rgba(255, 255, 255, 0.45));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    }

    @keyframes app-glass-sheen {
        0%, 100% { background-position: 0 0, 0 0, 120% 0; }
        50% { background-position: 0 0, 0 0, -20% 0; }
    }

    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .nav-links { background: var(--color-surface); }
    }

    .nav-links li { flex: 1 1 0; display: flex; justify-content: center; min-width: 0; }
    .nav-links li:nth-child(1) { order: 1; }
    .nav-links li:nth-child(2) { order: 2; }
    .nav-links li:nth-child(5) { order: 3; flex: 0 0 66px; }
    .nav-links li:nth-child(3) { order: 4; }
    .nav-links li:nth-child(4) { order: 5; }

    .nav-links a {
        position: relative;
        flex-direction: column;
        gap: 4px;
        width: 100%;
        min-height: 56px;
        padding: 6px 0 4px;
        border-radius: 16px;
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 0.01em;
        white-space: nowrap;
        color: var(--color-text-muted);
        background: none;
        box-shadow: none;
        transition: color .2s ease, background .3s ease, box-shadow .3s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1);
    }

    .nav-links a::before {
        content: '';
        width: 24px;
        height: 24px;
        background: currentColor;
        -webkit-mask: var(--i-home) center / contain no-repeat;
        mask: var(--i-home) center / contain no-repeat;
        transition: transform .25s var(--app-ease);
    }

    .nav-links li:nth-child(2) a::before { -webkit-mask-image: var(--i-user); mask-image: var(--i-user); }
    .nav-links li:nth-child(3) a::before { -webkit-mask-image: var(--i-grid); mask-image: var(--i-grid); }
    .nav-links li:nth-child(4) a::before { -webkit-mask-image: var(--i-chat); mask-image: var(--i-chat); }

    .nav-links a:hover { color: var(--color-text); }

    /* Al tocar, la pestaña se "infla" como una gota de vidrio */
    .nav-links a:active {
        transform: scale(1.12);
        transition-duration: .12s;
        background: radial-gradient(100% 100% at 50% 0%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 16px var(--shadow-color);
    }

    /* Pestaña activa: lente de vidrio interior */
    .nav-links a.active {
        width: calc(100% - 4px);
        min-height: 54px;
        color: var(--color-text);
        border-radius: 22px;
        background:
            radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.03) 70%),
            rgba(255, 255, 255, 0.04);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.38),
            inset 0 -1px 1px var(--shadow-color),
            inset 0 -8px 14px -10px var(--color-accent-soft),
            0 4px 14px var(--shadow-color);
    }

    .nav-links a.active::before {
        background: var(--app-cyan);
        filter: drop-shadow(0 0 6px var(--color-accent));
        transform: translateY(-1px) scale(1.05);
    }

    /* Botón central "Busca tu proyecto" */
    .nav-links a.nav-links-cta {
        flex: none;
        width: 56px;
        height: 56px;
        min-height: 0;
        padding: 0;
        gap: 0;
        border-radius: 19px;
        font-size: 0;
        color: var(--color-on-accent);
        background: var(--app-grad);
        transform: translateY(-18px);
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.55),
            inset 0 -10px 16px -8px var(--shadow-color),
            inset 0 10px 14px -8px rgba(255, 255, 255, 0.35),
            0 12px 26px var(--shadow-color);
    }

    .nav-links a.nav-links-cta::before,
    .nav-links a.nav-links-cta::after { display: none; }

    .nav-links a.nav-links-cta.active {
        width: 56px;
        min-height: 0;
        border-radius: 19px;
        background: var(--app-grad);
        box-shadow:
            0 0 0 1.5px var(--color-accent),
            inset 0 1px 0 rgba(255, 255, 255, 0.55),
            inset 0 -10px 16px -8px var(--shadow-color),
            inset 0 10px 14px -8px rgba(255, 255, 255, 0.35),
            0 12px 26px var(--shadow-color);
    }

    .nav-links a.nav-links-cta:hover { transform: translateY(-18px); }
    .nav-links a.nav-links-cta:active { transform: translateY(-18px) scale(1.1); background: var(--app-grad); }

    .nav-links a.nav-links-cta .cta-arrow {
        width: 24px;
        height: 24px;
        border-radius: 0;
        font-size: 0;
        background: var(--color-on-accent);
        -webkit-mask: var(--i-search) center / contain no-repeat;
        mask: var(--i-search) center / contain no-repeat;
    }
}