/*
 * MIDGARD — landing page dei clienti (elarateq.ch/m/{slug})
 *
 * Template: business (chiaro, completo), minimal (una schermata + contatti),
 * portfolio (scuro, immagini in primo piano).
 * I colori del cliente arrivano dal layout come variabili:
 *   --mg-primary / --mg-secondary        colori scelti
 *   --mg-on-primary / --mg-on-secondary  testo leggibile sopra quei colori
 *   --mg-ink-light / --mg-ink-dark       colore principale leggibile su fondo chiaro / scuro
 */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

.mg {
    --mg-bg: #FFFFFF;
    --mg-surface: #F5F6F8;
    --mg-card: #FFFFFF;
    --mg-text: #14161B;
    --mg-muted: #555C6A;
    --mg-border: #E2E5EB;
    --mg-ink: var(--mg-ink-light);
    --mg-radius: 16px;
    --mg-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .06);
    --mg-top: 0px;
    --mg-header-h: 72px;

    margin: 0;
    background: var(--mg-bg);
    color: var(--mg-text);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
}

.mg.mg-dark {
    --mg-bg: #0F1115;
    --mg-surface: #161920;
    --mg-card: #1B1F27;
    --mg-text: #F2F3F5;
    --mg-muted: #A9B0BD;
    --mg-border: #2B303B;
    --mg-ink: var(--mg-ink-dark);
    --mg-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .35);
    color-scheme: dark;
}

.mg.mg-is-preview { --mg-top: 40px; }

.mg img { max-width: 100%; height: auto; display: block; }
.mg h1, .mg h2, .mg h3, .mg p, .mg ul, .mg figure, .mg blockquote { margin: 0; }
.mg ul { padding: 0; list-style: none; }
.mg a { color: var(--mg-ink); text-underline-offset: .2em; }
.mg h1, .mg h2, .mg h3 { line-height: 1.15; letter-spacing: -.02em; font-weight: 700; text-wrap: balance; }

.mg :focus-visible {
    outline: 3px solid var(--mg-ink);
    outline-offset: 3px;
    border-radius: 6px;
}

.mg [id] { scroll-margin-top: calc(var(--mg-header-h) + var(--mg-top) + 16px); }
.mg-minimal [id] { scroll-margin-top: calc(var(--mg-top) + 16px); }

.mg-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.mg-skip {
    position: absolute; left: 1rem; top: -4rem; z-index: 1100;
    padding: .75rem 1rem; border-radius: 10px;
    background: var(--mg-text); color: var(--mg-bg) !important; font-weight: 600; text-decoration: none;
}
.mg-skip:focus { top: calc(var(--mg-top) + 1rem); }

.mg-container { width: 100%; max-width: var(--mg-content-width, 1160px); margin: 0 auto; padding: 0 1.25rem; }
.mg-narrow { max-width: min(780px, var(--mg-content-width, 780px)); }

/* ---------- Pulsanti ---------- */
.mg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    min-height: 48px; padding: .75rem 1.5rem;
    border: var(--mg-border-width, 2px) solid transparent; border-radius: var(--mg-button-radius, 999px);
    font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.mg-btn:hover { transform: translateY(-1px); }
.mg-btn:active { transform: translateY(0); }
.mg-btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }

.mg .mg-btn-primary { background: var(--mg-primary); color: var(--mg-on-primary); box-shadow: var(--mg-button-shadow, 0 6px 18px rgba(0, 0, 0, .14)); }
.mg .mg-btn-primary:hover { box-shadow: var(--mg-button-shadow, 0 10px 24px rgba(0, 0, 0, .2)); }
.mg .mg-btn-light { background: #FFFFFF; color: #14161B; box-shadow: var(--mg-button-shadow, 0 6px 18px rgba(0, 0, 0, .25)); }
.mg .mg-btn-ghost { background: rgba(255, 255, 255, .1); color: #FFFFFF; border-color: rgba(255, 255, 255, .7); }
.mg .mg-btn-ghost:hover { background: rgba(255, 255, 255, .2); }
.mg .mg-btn-outline { background: transparent; color: var(--mg-text); border-color: var(--mg-border); }
.mg .mg-btn-outline:hover { border-color: var(--mg-ink); color: var(--mg-ink); }
.mg .mg-btn-whatsapp { background: #0F7A41; color: #FFFFFF; }
.mg .mg-btn-whatsapp:hover { background: #0B6636; }
.mg-btn-sm { min-height: 42px; padding: .5rem 1.15rem; font-size: .9375rem; }
.mg-btn-block { width: 100%; }

/* ---------- Intestazione ---------- */
.mg-header {
    position: sticky; top: var(--mg-top); z-index: 900;
    background: color-mix(in srgb, var(--mg-bg) 88%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--mg-border);
}
@supports not (background: color-mix(in srgb, #000 50%, transparent)) {
    .mg-header { background: var(--mg-bg); }
}
.mg-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--mg-header-h); }

.mg .mg-brand { display: inline-flex; align-items: center; gap: .75rem; min-width: 0; color: var(--mg-text); text-decoration: none; font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em; }
.mg-brand img { max-height: 44px; width: auto; max-width: 200px; object-fit: contain; }
.mg-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mg-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; flex: none;
    border: 1px solid var(--mg-border); border-radius: 12px;
    background: var(--mg-card); color: var(--mg-text); font-size: 1.1rem; cursor: pointer;
}

.mg-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    padding: .75rem 1.25rem 1.25rem;
    background: var(--mg-bg); border-bottom: 1px solid var(--mg-border);
    box-shadow: 0 18px 30px rgba(0, 0, 0, .12);
    max-height: calc(100vh - var(--mg-header-h) - var(--mg-top)); overflow-y: auto;
}
.mg-nav.is-open { display: block; }
.mg-nav ul { display: flex; flex-direction: column; gap: .15rem; }
.mg .mg-nav a:not(.mg-btn) { display: block; padding: .8rem .5rem; border-radius: 10px; color: var(--mg-text); font-weight: 500; text-decoration: none; }
.mg .mg-nav a:not(.mg-btn):hover { color: var(--mg-ink); background: var(--mg-surface); }
.mg-nav .mg-btn { margin-top: .6rem; width: 100%; }

@media (min-width: 920px) {
    .mg-nav-toggle { display: none; }
    .mg-nav { display: block; position: static; padding: 0; background: none; border: 0; box-shadow: none; max-height: none; overflow: visible; }
    .mg-nav ul { flex-direction: row; align-items: center; gap: .25rem; }
    .mg .mg-nav a:not(.mg-btn) { padding: .5rem .8rem; font-size: .9375rem; }
    .mg .mg-nav a:not(.mg-btn):hover { background: none; }
    .mg-nav .mg-btn { margin: 0 0 0 .75rem; width: auto; }
}

/* ---------- Hero ---------- */
.mg-hero {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; align-items: center;
    padding: clamp(4.5rem, 12vw, 8rem) 0;
    background: linear-gradient(135deg, var(--mg-primary) 0%, var(--mg-secondary) 100%);
    color: #FFFFFF;
}
/* velo scuro: tiene leggibile il testo bianco qualunque sia il colore o la foto */
.mg-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(9, 10, 14, .5) 0%, rgba(9, 10, 14, .62) 100%);
}
.mg-hero-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.mg-hero.has-image::before { background: linear-gradient(180deg, rgba(9, 10, 14, .55) 0%, rgba(9, 10, 14, .72) 100%); }

.mg-hero-content { max-width: 780px; }
.mg-hero-logo { max-height: 88px; width: auto; max-width: 260px; margin-bottom: 2rem; object-fit: contain; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .35)); }
.mg-badge {
    display: inline-block; margin-bottom: 1.25rem; padding: .4rem .9rem;
    border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.mg-hero h1 { font-size: clamp(2.25rem, 6.2vw, 4.25rem); font-weight: 800; }
.mg-hero-subtitle { margin-top: 1.25rem; max-width: 640px; font-size: clamp(1.0625rem, 2.1vw, 1.3125rem); line-height: 1.55; color: rgba(255, 255, 255, .92); }
.mg-hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.25rem; }

.mg-hero-full { min-height: calc(100vh - var(--mg-top)); min-height: calc(100svh - var(--mg-top)); text-align: center; }
.mg-hero-full .mg-hero-content { margin: 0 auto; }
.mg-hero-full .mg-hero-logo { margin-left: auto; margin-right: auto; }
.mg-hero-full .mg-hero-subtitle { margin-left: auto; margin-right: auto; }
.mg-hero-full .mg-hero-actions { justify-content: center; }
.mg-hero-full h1 { font-size: clamp(2.5rem, 8vw, 5.25rem); }
.mg .mg-hero-scroll {
    position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
    display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
    border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; color: #FFFFFF; text-decoration: none;
}
.mg .mg-hero-scroll:hover { background: rgba(255, 255, 255, .15); }
.mg .mg-hero :focus-visible { outline-color: #FFFFFF; }

.mg-hero-compact { padding: clamp(3.5rem, 9vw, 6rem) 0; }

/* ---------- Sezioni ---------- */
.mg-section { padding: var(--mg-section-space, clamp(3.5rem, 8vw, 6rem)) 0; }
.mg-section-alt { background: var(--mg-surface); }
.mg-section-head { max-width: 720px; margin: 0 auto clamp(2rem, 5vw, 3.25rem); text-align: center; }
.mg-section-head h2, .mg-h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.mg-section-head h2::after, .mg-h2-bar::after {
    content: ""; display: block; width: 56px; height: 4px; margin: 1rem auto 0;
    border-radius: 4px; background: var(--mg-primary);
}
.mg-h2-bar::after { margin-left: 0; }
.mg-section-head p { margin-top: 1rem; color: var(--mg-muted); font-size: 1.0625rem; }
.mg-minimal .mg-section { padding: var(--mg-section-space, clamp(2.75rem, 6vw, 4.25rem)) 0; }

/* Chi siamo */
.mg-about-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.mg-prose { color: var(--mg-muted); font-size: 1.0625rem; }
.mg-prose p + p { margin-top: 1.1em; }
.mg-about-text .mg-prose { margin-top: 1.5rem; }
.mg-about-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--mg-image-radius, var(--mg-radius)); box-shadow: var(--mg-shadow); }
@media (min-width: 860px) {
    .mg-about-grid.has-image { grid-template-columns: 1.05fr .95fr; }
}
.mg-about-grid:not(.has-image) { max-width: 780px; margin: 0 auto; }

/* Servizi */
.mg-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.mg-card {
    padding: 1.75rem; background: var(--mg-card);
    border: var(--mg-border-width, 1px) solid var(--mg-border); border-radius: var(--mg-card-radius, var(--mg-radius));
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mg-card:hover { transform: translateY(-3px); box-shadow: var(--mg-shadow); border-color: color-mix(in srgb, var(--mg-primary) 45%, var(--mg-border)); }
.mg-card-icon {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 54px; height: 54px; padding: 0 .6rem; margin-bottom: 1.1rem;
    border-radius: 14px; background: color-mix(in srgb, var(--mg-primary) 14%, var(--mg-card));
    color: var(--mg-ink); font-size: 1.5rem; font-weight: 700; line-height: 1;
}
.mg-card-icon-img { width: 64px; height: 64px; min-width: 0; padding: 0; background: none; border-radius: 14px; overflow: hidden; }
.mg-card-icon-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mg-card h3 { font-size: 1.1875rem; }
.mg-card p { margin-top: .6rem; color: var(--mg-muted); white-space: pre-line; }

/* Galleria */
.mg-gallery { display: grid; gap: .9rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .mg-gallery { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } }
.mg-gallery > li { display: grid; min-width: 0; }
.mg-gallery-item { position: relative; overflow: hidden; border-radius: var(--mg-image-radius, var(--mg-radius)); background: var(--mg-surface); }
.mg-gallery-item a { display: block; height: 100%; }
.mg-gallery-item img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .45s ease; }
.mg-gallery-item a:hover img, .mg-gallery-item a:focus-visible img { transform: scale(1.045); }
.mg-gallery-item figcaption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem 1rem .85rem;
    background: linear-gradient(180deg, rgba(9, 10, 14, 0) 0%, rgba(9, 10, 14, .82) 100%);
    color: #FFFFFF; font-size: .9375rem; font-weight: 500; line-height: 1.35; pointer-events: none;
}
/* Portfolio: griglia piu' grande, prima immagine in evidenza */
.mg-gallery-showcase { gap: 1rem; }
@media (min-width: 720px) {
    .mg-gallery-showcase > li:first-child:not(:last-child) { grid-column: span 2; grid-row: span 2; }
    .mg-gallery-showcase > li:first-child:not(:last-child) img { aspect-ratio: auto; }
}
@media (min-width: 1100px) { .mg-gallery-showcase { grid-template-columns: repeat(4, 1fr); } }
.mg-container-wide { max-width: var(--mg-content-width, 1400px); }

.mg-lightbox { width: min(96vw, 1200px); max-width: none; max-height: 94vh; padding: 0; border: 0; background: transparent; color: #FFFFFF; overflow: visible; }
.mg-lightbox::backdrop { background: rgba(6, 7, 10, .92); }
.mg-lightbox figure { display: flex; flex-direction: column; align-items: center; gap: .85rem; }
.mg-lightbox img { max-width: 100%; max-height: 80vh; width: auto; border-radius: var(--mg-image-radius, 10px); }
.mg-lightbox figcaption { text-align: center; font-size: 1rem; }
.mg-lightbox-bar { display: flex; justify-content: center; gap: .75rem; margin-top: 1rem; }
.mg-lightbox button {
    width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%;
    background: rgba(255, 255, 255, .1); color: #FFFFFF; font-size: 1.05rem; cursor: pointer;
}
.mg-lightbox button:hover { background: rgba(255, 255, 255, .25); }
.mg .mg-lightbox :focus-visible { outline-color: #FFFFFF; border-radius: 50%; }

/* Recensioni */
.mg-quotes { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.mg-quotes > li { display: grid; }
.mg-quote { display: flex; flex-direction: column; padding: 1.75rem; background: var(--mg-card); border: var(--mg-border-width, 1px) solid var(--mg-border); border-radius: var(--mg-card-radius, var(--mg-radius)); }
.mg-quote-mark { color: var(--mg-ink); font-size: 1.5rem; margin-bottom: .9rem; }
.mg-quote blockquote { flex: 1; font-size: 1.0625rem; white-space: pre-line; }
.mg-quote figcaption { display: flex; align-items: center; gap: .85rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--mg-border); }
.mg-quote-photo { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; background: var(--mg-bg, transparent); }
.mg-quote-name { display: block; font-weight: 700; }
.mg-quote-role { display: block; color: var(--mg-muted); font-size: .9375rem; }

/* Domande frequenti */
.mg-faq { display: grid; gap: .75rem; max-width: 820px; margin: 0 auto; }
.mg-faq details { background: var(--mg-card); border: var(--mg-border-width, 1px) solid var(--mg-border); border-radius: var(--mg-card-radius, 14px); }
.mg-faq details[open] { border-color: color-mix(in srgb, var(--mg-primary) 45%, var(--mg-border)); box-shadow: var(--mg-shadow); }
.mg-faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.1rem 1.25rem; font-weight: 600; font-size: 1.0625rem; cursor: pointer; list-style: none; border-radius: var(--mg-card-radius, 14px);
}
.mg-faq summary::-webkit-details-marker { display: none; }
.mg-faq summary::after {
    content: "+"; flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: color-mix(in srgb, var(--mg-primary) 14%, var(--mg-card)); color: var(--mg-ink);
    font-size: 1.25rem; font-weight: 500; line-height: 1; transition: transform .2s ease;
}
.mg-faq details[open] summary::after { content: "−"; }
.mg-faq-answer { padding: 0 1.25rem 1.25rem; color: var(--mg-muted); white-space: pre-line; }

/* Orari */
.mg-hours-wrap { max-width: 560px; margin: 0 auto; border: var(--mg-border-width, 1px) solid var(--mg-border); border-radius: var(--mg-card-radius, var(--mg-radius)); overflow: hidden; background: var(--mg-card); }
.mg-hours { width: 100%; border-collapse: collapse; }
.mg-hours th, .mg-hours td { padding: .9rem 1.25rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--mg-border); }
.mg-hours tr:last-child th, .mg-hours tr:last-child td { border-bottom: 0; }
.mg-hours th { font-weight: 600; }
.mg-hours td { text-align: right; color: var(--mg-muted); font-variant-numeric: tabular-nums; }

/* Contatti */
.mg-contact-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .mg-contact-grid.has-form { grid-template-columns: .9fr 1.1fr; } }
.mg-contact-grid:not(.has-form) { max-width: 720px; margin: 0 auto; text-align: center; }
.mg-contact-grid:not(.has-form) .mg-h2-bar::after { margin-left: auto; }
.mg-contact-grid:not(.has-form) .mg-contact-list { display: inline-grid; text-align: left; }
.mg-contact-grid:not(.has-form) .mg-social { justify-content: center; }
.mg-contact-intro { margin-top: 1.25rem; color: var(--mg-muted); font-size: 1.0625rem; white-space: pre-line; }
.mg-contact-list { display: grid; gap: 1.1rem; margin-top: 1.75rem; }
.mg-contact-list li { display: flex; gap: .9rem; align-items: flex-start; }
.mg-contact-icon {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    border-radius: 12px; background: color-mix(in srgb, var(--mg-primary) 14%, var(--mg-bg)); color: var(--mg-ink);
}
.mg-contact-label { display: block; color: var(--mg-muted); font-size: .8125rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.mg .mg-contact-value { color: var(--mg-text); font-weight: 500; text-decoration: none; white-space: pre-line; overflow-wrap: anywhere; }
.mg a.mg-contact-value:hover { color: var(--mg-ink); text-decoration: underline; }
.mg-contact-actions { margin-top: 1.75rem; }

.mg-social { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.75rem; }
.mg .mg-social a {
    display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
    border: 1px solid var(--mg-border); border-radius: 50%; color: var(--mg-text); font-size: 1.1rem; text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.mg .mg-social a:hover { background: var(--mg-primary); border-color: var(--mg-primary); color: var(--mg-on-primary); }

/* Modulo */
.mg-form-card { padding: clamp(1.5rem, 4vw, 2.25rem); background: var(--mg-card); border: var(--mg-border-width, 1px) solid var(--mg-border); border-radius: var(--mg-card-radius, var(--mg-radius)); box-shadow: var(--mg-shadow); text-align: left; }
.mg-form-card h3 { font-size: 1.3125rem; margin-bottom: 1.25rem; }
.mg-form { display: grid; gap: 1.1rem; }
.mg-form-row { display: grid; gap: 1.1rem; }
@media (min-width: 560px) { .mg-form-row { grid-template-columns: 1fr 1fr; } }
.mg-field label { display: block; margin-bottom: .4rem; font-weight: 600; font-size: .9375rem; }
.mg-field-hint { color: var(--mg-muted); font-weight: 400; }
.mg-field input, .mg-field textarea {
    display: block; width: 100%; padding: .8rem .95rem;
    border: var(--mg-border-width, 1px) solid color-mix(in srgb, var(--mg-text) 38%, var(--mg-bg)); border-radius: var(--mg-input-radius, 12px);
    background: var(--mg-bg); color: var(--mg-text); font: inherit; line-height: 1.4;
}
.mg-field textarea { min-height: 150px; resize: vertical; }
.mg-field input:focus, .mg-field textarea:focus { outline: 3px solid color-mix(in srgb, var(--mg-ink) 45%, transparent); outline-offset: 1px; border-color: var(--mg-ink); }
.mg-field [aria-invalid="true"] { border-color: #C62828; border-width: 2px; }
.mg-field-error { margin-top: .4rem; color: #B42318; font-size: .875rem; font-weight: 500; }
.mg-dark .mg-field-error { color: #FF9C8F; }
.mg-dark .mg-field [aria-invalid="true"] { border-color: #FF9C8F; }
.mg-form-note { color: var(--mg-muted); font-size: .875rem; }
.mg-hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }

.mg-alert { display: flex; gap: .85rem; align-items: flex-start; margin-bottom: 1.25rem; padding: 1rem 1.15rem; border: 1px solid; border-radius: 12px; }
.mg-alert i { margin-top: .2rem; font-size: 1.15rem; }
.mg-alert strong { display: block; }
.mg-alert-success { background: #ECFDF3; border-color: #6CD9A0; color: #05603A; }
.mg-alert-error { background: #FEF3F2; border-color: #F5A49C; color: #912018; }
.mg-alert-info { background: #FFFAEB; border-color: #F5CF6B; color: #7A4B00; }

/* Contatti compatti (minimal) */
.mg-contact-compact { text-align: center; }
.mg-contact-compact .mg-contact-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); max-width: 880px; margin-left: auto; margin-right: auto; text-align: left; }
.mg-contact-compact .mg-social { justify-content: center; }
.mg-contact-compact .mg-form-card { max-width: 640px; margin: 2.5rem auto 0; }

/* ---------- Piede ---------- */
.mg-footer { padding: 2.5rem 0 2rem; background: #0F1115; color: #C9CED8; font-size: .9375rem; }
.mg-dark .mg-footer { border-top: 1px solid var(--mg-border); }
.mg-footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.mg-footer-brand { color: #FFFFFF; font-weight: 700; font-size: 1.125rem; }
.mg-footer-text { margin-top: .4rem; max-width: 520px; }
.mg-footer .mg-social { margin-top: 0; }
.mg .mg-footer .mg-social a { border-color: #3A404D; color: #FFFFFF; }
.mg-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1.5rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #2B303B; font-size: .875rem; }
.mg .mg-footer a.mg-credit { color: #C9CED8; text-decoration: none; }
.mg .mg-footer a.mg-credit:hover { color: #FFFFFF; text-decoration: underline; }
.mg .mg-footer :focus-visible { outline-color: #FFFFFF; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .mg *, .mg *::before, .mg *::after { transition: none !important; animation: none !important; }
}

@media print {
    .mg-header, .mg-nav-toggle, .mg-hero-scroll, .mg-form-card, .mg-preview-banner { display: none !important; }
}

/* Ombre opzionali definite dallo Studio, limitate alla pagina del cliente. */
.mg-card, .mg-quote, .mg-hours-wrap { box-shadow: var(--mg-card-shadow, none); }

.mg .mg-btn:focus-visible { border-radius: var(--mg-button-radius, 999px); }
.mg .mg-field input:focus-visible, .mg .mg-field textarea:focus-visible { border-radius: var(--mg-input-radius, 12px); }

/* ---------- Pro / Enterprise modules ---------- */
.mg-module-card{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0}
.mg-module-card .mg-btn{margin-top:auto;max-width:100%;white-space:normal}
.mg-module-card address{font-style:normal;color:var(--mg-muted)}
.mg-module-card .mg-module-emphasis{color:var(--mg-ink);font-weight:600;font-size:.9rem}
.mg-module-card .mg-offer-price{font-size:1.8rem;font-weight:700;color:var(--mg-text)}
.mg-team-photo{width:96px;height:96px!important;object-fit:cover;border-radius:var(--mg-image-radius,50%)}
.mg-calendar{max-width:680px;margin:0 auto 32px;padding:24px;border:var(--mg-border-width,1px) solid var(--mg-border);border-radius:var(--mg-card-radius,var(--mg-radius));background:var(--mg-card);box-shadow:var(--mg-card-shadow,var(--mg-shadow))}
.mg-calendar-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-bottom:20px}
.mg-calendar-picker{display:flex;flex-direction:column;gap:4px;font-size:.75rem;color:var(--mg-muted);max-width:100%}
.mg-calendar-picker input{font:inherit;font-size:1rem;min-width:0;max-width:100%;padding:8px;background:var(--mg-surface);color:var(--mg-text);border:var(--mg-border-width,1px) solid var(--mg-border);border-radius:var(--mg-input-radius,8px)}
.mg-calendar-week,.mg-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;text-align:center}
.mg-calendar-week{font-size:.8rem;color:var(--mg-muted);margin-bottom:8px}
.mg-calendar-day{position:relative;min-height:44px;padding:8px 2px 12px;border:1px solid transparent;border-radius:var(--mg-input-radius,8px);background:var(--mg-surface);color:var(--mg-text);font:inherit;cursor:pointer}
.mg-calendar-day.has-events::after{content:'';position:absolute;bottom:5px;left:calc(50% - 2px);width:4px;height:4px;border-radius:50%;background:currentColor}
.mg-calendar-day.has-events{color:var(--mg-ink);font-weight:700}
.mg-calendar-day[aria-current]{border-color:var(--mg-ink)}
.mg-calendar-day[aria-pressed=true],.mg-calendar-toolbar [aria-pressed=true]{background:var(--mg-primary);color:var(--mg-on-primary)}
.mg-calendar-day:focus-visible{outline:2px solid var(--mg-ink);outline-offset:2px}
.mg-calendar-status{font-size:.85rem;color:var(--mg-muted);margin-top:16px!important;text-align:center}
.mg-calendar-empty{text-align:center;color:var(--mg-muted);padding:24px}
.mg [hidden]{display:none!important}
@media(max-width:520px){.mg-calendar{padding:14px}.mg-calendar-week,.mg-calendar-grid{gap:3px}.mg-calendar-day{min-height:42px;font-size:.85rem}}

/* A long section menu remains usable at desktop widths too. */
.mg-header-many .mg-nav-toggle{display:inline-flex}
.mg-header-many .mg-nav{display:none;position:absolute;left:0;right:0;top:100%;padding:.75rem 1.25rem 1.25rem;background:var(--mg-bg);border-bottom:1px solid var(--mg-border);box-shadow:0 18px 30px #0000001f;max-height:calc(100vh - var(--mg-header-h) - var(--mg-top));overflow-y:auto}
.mg-header-many .mg-nav.is-open{display:block}
.mg-header-many .mg-nav ul{flex-direction:column;align-items:stretch;max-width:1160px;margin:auto}
.mg-header-many .mg-nav .mg-btn{margin:.6rem 0 0;width:100%}

.mg-subpage-back{padding-top:24px}.mg-subpage-back a{font-size:.9rem}.mg-subpage-links{display:flex;flex-wrap:wrap;gap:12px 24px;padding:20px 0}.mg-section-head h1{font-size:clamp(2rem,5vw,3.5rem)}

/* Guided presentation settings; original template defaults stay unchanged. */
.mg{font-family:var(--mg-font-body,Inter),system-ui,sans-serif}
.mg h1,.mg h2,.mg h3,.mg-brand{font-family:var(--mg-font-heading,Inter),system-ui,sans-serif}
.mg-brand{gap:.75rem;min-width:0}.mg-brand span{overflow-wrap:anywhere}
.mg-about-bullets{margin-top:2rem}.mg-about-bullets p{margin-top:.75rem;color:var(--mg-muted)}
.mg-hero-mode-solid,.mg-hero-mode-gradient{background:var(--mg-hero-bg)}
.mg-hero-mode-solid{color:var(--mg-hero-ink)}
.mg-hero-mode-solid::before{display:none}
.mg-hero-mode-gradient::before{background:rgba(9,10,14,.64)}
.mg-hero-mode-solid .mg-hero-subtitle{color:inherit}
.mg-hero-mode-solid .mg-badge{border-color:currentColor;background:transparent}
.mg .mg-hero-mode-solid .mg-btn-ghost,.mg .mg-hero-mode-solid .mg-hero-scroll{color:var(--mg-hero-ink);border-color:currentColor;background:transparent}
.mg .mg-hero-mode-solid :focus-visible{outline-color:var(--mg-hero-ink)}

.mg-hero-brand{font-size:1.25rem;font-weight:700;margin-bottom:1.5rem!important}