/* ============================================================
   MAGIX VETRINA — Tema Light (flavor-light)
   Design premium, mobile-first, responsive
   ============================================================ */

/* ── CSS Variables ──────────────────────────────────────── */
:root {
    --mx-primary: #1a1a2e;
    --mx-secondary: #e94560;
    --mx-accent: #0f3460;
    --mx-success: #10b981;
    --mx-warning: #f59e0b;
    --mx-danger: #ef4444;
    --mx-bg: #ffffff;
    --mx-bg-alt: #f8f9fc;
    --mx-bg-card: #ffffff;
    --mx-text: #1e293b;
    --mx-text-muted: #64748b;
    --mx-text-light: #94a3b8;
    --mx-border: #e2e8f0;
    --mx-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --mx-shadow-md: 0 4px 16px rgba(0,0,0,0.08);
    --mx-shadow-lg: 0 10px 40px rgba(0,0,0,0.1);
    --mx-radius: 12px;
    --mx-radius-lg: 20px;
    --mx-radius-xl: 28px;
    --mx-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --mx-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mx-navbar-height: 72px;
    --mx-mini-menu-height: 68px;
}

/* ── Reset & Base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--mx-navbar-height); }

body.magix-body {
    font-family: var(--mx-font);
    color: var(--mx-text);
    background: var(--mx-bg);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

a { color: var(--mx-accent); text-decoration: none; transition: var(--mx-transition); }
a:hover { color: var(--mx-secondary); }

img { max-width: 100%; height: auto; }

/* ── NAVBAR ─────────────────────────────────────────────── */
.magix-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--mx-border);
    transition: var(--mx-transition);
}

.magix-navbar { min-height: var(--mx-navbar-height); padding: 0; }

.magix-brand { display: flex; align-items: center; gap: 10px; }

.magix-logo { height: 42px; width: auto; object-fit: contain; }

.magix-logo-text {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--mx-primary);
    letter-spacing: -0.02em;
}

.magix-nav .nav-link {
    font-size: 0.925rem;
    font-weight: 500;
    color: var(--mx-text);
    padding: 0.6rem 1rem;
    border-radius: var(--mx-radius);
    transition: var(--mx-transition);
    position: relative;
}

.magix-nav .nav-link:hover,
.magix-nav .nav-link.active {
    color: var(--mx-secondary);
    background: rgba(233, 69, 96, 0.06);
}

.magix-btn-header {
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.45rem 1.1rem;
}

/* Hamburger custom */
.magix-toggler { border: none; padding: 8px; background: none; }
.magix-hamburger { display: flex; flex-direction: column; gap: 5px; width: 24px; }
.magix-hamburger span {
    display: block; height: 2.5px; background: var(--mx-primary);
    border-radius: 2px; transition: var(--mx-transition);
}

/* ── HERO ───────────────────────────────────────────────── */
.magix-hero {
    background: linear-gradient(135deg, var(--mx-bg-alt) 0%, var(--mx-bg) 100%);
    padding: 4rem 0 5rem;
    position: relative;
    overflow: hidden;
}

.magix-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 80%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(233,69,96,0.04) 0%, transparent 70%);
    pointer-events: none;
}

.min-vh-75 { min-height: 75vh; }

.magix-hero-title {
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 800;
    color: var(--mx-primary);
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin-bottom: 1rem;
}

.magix-hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--mx-text-muted);
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 520px;
}

.magix-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.magix-btn-hero {
    border-radius: 50px;
    padding: 0.75rem 1.8rem;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: var(--mx-shadow);
    transition: var(--mx-transition);
}
.magix-btn-hero:hover { transform: translateY(-2px); box-shadow: var(--mx-shadow-md); }

.magix-hero-image { display: flex; justify-content: center; align-items: center; }
.magix-hero-placeholder {
    width: 380px; height: 380px;
    background: linear-gradient(135deg, var(--mx-bg-alt), rgba(233,69,96,0.08));
    border-radius: var(--mx-radius-xl);
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--mx-shadow-lg);
}
.magix-hero-placeholder i { font-size: 5rem; color: var(--mx-text-light); }

/* ── SEZIONI GENERICHE ──────────────────────────────────── */
.magix-section { padding: 5rem 0; }
.magix-section:nth-child(even) { background: var(--mx-bg-alt); }

.magix-section-badge {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mx-secondary);
    background: rgba(233, 69, 96, 0.08);
    padding: 0.35rem 1rem;
    border-radius: 50px;
    margin-bottom: 0.75rem;
}

.magix-section-title {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    color: var(--mx-primary);
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}

.magix-section-subtitle {
    font-size: 1.05rem;
    color: var(--mx-text-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* ── SERVICE CARDS ──────────────────────────────────────── */
.magix-service-card {
    background: var(--mx-bg-card);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-lg);
    padding: 2rem;
    text-align: center;
    transition: var(--mx-transition);
    height: 100%;
}
.magix-service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--mx-shadow-lg);
    border-color: rgba(233, 69, 96, 0.2);
}

.magix-service-icon {
    width: 64px; height: 64px; margin: 0 auto 1.25rem;
    background: linear-gradient(135deg, rgba(233,69,96,0.1), rgba(15,52,96,0.08));
    border-radius: var(--mx-radius);
    display: flex; align-items: center; justify-content: center;
}
.magix-service-icon i { font-size: 1.75rem; color: var(--mx-secondary); }

.magix-service-card h3 {
    font-size: 1.15rem; font-weight: 600;
    color: var(--mx-primary); margin-bottom: 0.5rem;
}

.magix-service-card p { font-size: 0.925rem; color: var(--mx-text-muted); margin: 0; line-height: 1.65; }

/* ── ABOUT PREVIEW ──────────────────────────────────────── */
.magix-about-placeholder {
    width: 100%; min-height: 320px;
    background: linear-gradient(135deg, var(--mx-bg-alt), rgba(15,52,96,0.06));
    border-radius: var(--mx-radius-xl);
    display: flex; align-items: center; justify-content: center;
}
.magix-about-placeholder i { font-size: 4rem; color: var(--mx-text-light); }
.magix-text-lead { font-size: 1.05rem; color: var(--mx-text-muted); line-height: 1.8; margin-bottom: 1.5rem; }

/* ── CTA BOX ────────────────────────────────────────────── */
.magix-cta-section { background: var(--mx-primary) !important; }
.magix-cta-box { padding: 2rem 0; }
.magix-cta-title { color: #fff; font-size: 1.8rem; font-weight: 700; margin-bottom: 0.5rem; }
.magix-cta-text { color: rgba(255,255,255,0.8); font-size: 1.05rem; margin: 0; }

/* ── CONTACT PREVIEW ────────────────────────────────────── */
.magix-contact-item {
    display: flex; gap: 1rem; align-items: flex-start;
    margin-bottom: 1.25rem;
}
.magix-contact-item i {
    font-size: 1.5rem; color: var(--mx-secondary);
    min-width: 32px; margin-top: 2px;
}
.magix-contact-item strong { display: block; font-size: 0.85rem; color: var(--mx-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.magix-contact-item p { margin: 0; font-size: 1rem; }

.magix-map-placeholder {
    width: 100%; min-height: 350px;
    background: var(--mx-bg-alt);
    border-radius: var(--mx-radius-lg);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: 2px dashed var(--mx-border);
}
.magix-map-placeholder i { font-size: 3rem; color: var(--mx-text-light); margin-bottom: 0.5rem; }

/* ── PAGINA STATICA ─────────────────────────────────────── */
.magix-page-header {
    background: var(--mx-bg-alt);
    padding: 2rem 0 2.5rem;
    border-bottom: 1px solid var(--mx-border);
}
.magix-breadcrumb { font-size: 0.85rem; margin-bottom: 0.75rem; }
.magix-breadcrumb a { color: var(--mx-text-muted); }
.magix-breadcrumb .active { color: var(--mx-text); }
.magix-page-title { font-size: 2rem; font-weight: 700; color: var(--mx-primary); margin: 0; }
.magix-page-subtitle { color: var(--mx-text-muted); margin-top: 0.5rem; }
.magix-page-content { font-size: 1.05rem; line-height: 1.85; }
.magix-page-content h2 { font-size: 1.5rem; font-weight: 600; color: var(--mx-primary); margin: 2rem 0 1rem; }
.magix-page-content h3 { font-size: 1.25rem; font-weight: 600; margin: 1.5rem 0 0.75rem; }
.magix-page-content p { margin-bottom: 1.25rem; }
.magix-page-content img { border-radius: var(--mx-radius); margin: 1.5rem 0; }

/* ── ERRORE ─────────────────────────────────────────────── */
.magix-error-section { padding: 6rem 0; }
.magix-error-content { max-width: 500px; margin: 0 auto; }
.magix-error-code {
    font-size: 7rem; font-weight: 800;
    background: linear-gradient(135deg, var(--mx-primary), var(--mx-secondary));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; line-height: 1;
}
.magix-error-title { font-size: 1.5rem; font-weight: 600; margin: 1rem 0 0.5rem; }
.magix-error-message { color: var(--mx-text-muted); margin-bottom: 2rem; }
.magix-error-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── FOOTER ─────────────────────────────────────────────── */
.magix-footer {
    background: var(--mx-primary);
    color: rgba(255,255,255,0.85);
    padding-top: 1rem;
}

.magix-footer-logo { height: 48px; width: auto; filter: brightness(0) invert(1); }
.magix-footer-brand { color: #fff; font-size: 1.3rem; font-weight: 700; }
.magix-footer-slogan { color: rgba(255,255,255,0.6); font-size: 0.925rem; }

.magix-footer-address { font-style: normal; font-size: 0.9rem; }
.magix-footer-address p { margin-bottom: 0.35rem; }
.magix-footer-address i { width: 20px; display: inline-block; }
.magix-footer a { color: rgba(255,255,255,0.75); }
.magix-footer a:hover { color: #fff; }

.magix-footer-title {
    font-size: 0.8rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.1em; color: rgba(255,255,255,0.5);
    margin-bottom: 1rem;
}

.magix-footer-links { list-style: none; padding: 0; margin: 0; }
.magix-footer-links li { margin-bottom: 0.5rem; }
.magix-footer-links a { font-size: 0.925rem; }

.magix-social-links { display: flex; gap: 10px; flex-wrap: wrap; }
.magix-social-icon {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    transition: var(--mx-transition);
    font-size: 1.1rem;
}
.magix-social-icon:hover { background: var(--mx-secondary); color: #fff; transform: translateY(-2px); }

.magix-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 1.25rem 0;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
}
.magix-credits a { color: var(--mx-secondary); font-weight: 600; }

/* ── MINI-MENU MOBILE ───────────────────────────────────── */
.magix-mini-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--mx-border);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
    padding: 0.5rem 0;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
}

.magix-mini-menu-inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 480px;
    margin: 0 auto;
    padding: 0 0.5rem;
}

.magix-mini-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0.4rem 0.75rem;
    border-radius: var(--mx-radius);
    color: var(--mx-text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--mx-transition);
    min-width: 64px;
}
.magix-mini-btn i { font-size: 1.35rem; }
.magix-mini-btn:hover { color: var(--mx-secondary); background: rgba(233,69,96,0.06); }

.magix-mini-whatsapp { color: var(--mx-success); }
.magix-mini-whatsapp:hover { color: #fff; background: var(--mx-success); }

.magix-mini-cta {
    color: #fff;
    background: var(--mx-secondary);
    border-radius: 50px;
    padding: 0.5rem 1rem;
}
.magix-mini-cta:hover { color: #fff; background: var(--mx-primary); transform: translateY(-2px); }

.magix-mini-menu-spacer { height: var(--mx-mini-menu-height); }

/* ── COOKIE BANNER ──────────────────────────────────────── */
.magix-cookie-banner {
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 1050;
    background: var(--mx-primary);
    color: rgba(255,255,255,0.9);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
}
.magix-cookie-banner a { color: var(--mx-secondary); text-decoration: underline; }

/* ── BACK TO TOP ────────────────────────────────────────── */
.magix-btn-top {
    position: fixed;
    bottom: 90px;
    right: 20px;
    z-index: 1020;
    width: 44px; height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--mx-primary);
    color: #fff;
    font-size: 1.2rem;
    box-shadow: var(--mx-shadow-md);
    cursor: pointer;
    opacity: 0;
    transform: translateY(20px);
    transition: var(--mx-transition);
    display: flex; align-items: center; justify-content: center;
}
.magix-btn-top.visible { opacity: 1; transform: translateY(0); }
.magix-btn-top:hover { background: var(--mx-secondary); transform: translateY(-2px); }

/* ── BUTTONS OVERRIDE ───────────────────────────────────── */
.btn-primary {
    background: var(--mx-secondary);
    border-color: var(--mx-secondary);
    border-radius: var(--mx-radius);
    font-weight: 600;
}
.btn-primary:hover { background: #d63b55; border-color: #d63b55; }
.btn-outline-primary { color: var(--mx-secondary); border-color: var(--mx-secondary); border-radius: var(--mx-radius); font-weight: 600; }
.btn-outline-primary:hover { background: var(--mx-secondary); border-color: var(--mx-secondary); }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .magix-hero { padding: 2.5rem 0 3rem; }
    .min-vh-75 { min-height: auto; }
    .magix-hero-title { margin-top: 1rem; }
    .magix-section { padding: 3rem 0; }

    .magix-nav { padding: 1rem 0; }
    .magix-nav .nav-link { padding: 0.75rem 0; border-bottom: 1px solid var(--mx-border); }
    .magix-nav .nav-item:last-child .nav-link { border-bottom: none; }

    /* Mini-menu: aggiungi padding al body per non coprire contenuto */
    body.magix-body { padding-bottom: var(--mx-mini-menu-height); }
    .magix-btn-top { bottom: calc(var(--mx-mini-menu-height) + 16px); }
    .magix-cookie-banner { bottom: var(--mx-mini-menu-height); }
}

@media (max-width: 575.98px) {
    .magix-hero-title { font-size: 1.8rem; }
    .magix-hero-actions { flex-direction: column; }
    .magix-btn-hero { width: 100%; text-align: center; }
    .magix-section-title { font-size: 1.5rem; }
    .magix-error-code { font-size: 5rem; }
    .magix-mini-btn { min-width: 56px; font-size: 0.65rem; }
    .magix-mini-btn i { font-size: 1.2rem; }
}

/* ── PRINT ──────────────────────────────────────────────── */
@media print {
    .magix-header, .magix-footer, .magix-mini-menu, .magix-btn-top,
    .magix-cookie-banner { display: none !important; }
    .magix-main { padding: 0; }
    body { color: #000; background: #fff; }
}