/* ==========================================================================
   My Sweet Room — landing
   Bootstrap 5.3 + personalizzazioni. Mobile first.
   ========================================================================== */

@font-face {
    font-family: "Outfit";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("/fonts/outfit-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Outfit";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("/fonts/outfit-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-display: swap;
    font-weight: 100 1000;
    src: url("/fonts/dm-sans-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-display: swap;
    font-weight: 100 1000;
    src: url("/fonts/dm-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Colori dal logo */
    --msr-navy: #142232;
    --msr-navy-2: #1E3147;
    --msr-coral: #F04B52;          /* colore del marchio (decorazioni) */
    --msr-coral-strong: #D6343C;   /* bottoni e testi: contrasto AA su bianco */
    --msr-coral-dark: #B8282F;
    --msr-cream: #FBF3EC;
    --msr-blush: #FDE9E5;
    --msr-sand: #F3E6DA;
    --msr-white: #FFFFFF;
    --msr-text: #2A3642;
    --msr-muted: #5E6A75;
    --msr-line: #EADFD4;
    --msr-wa: #178A4A;
    --msr-wa-dark: #11703B;

    --msr-radius: 20px;
    --msr-radius-sm: 12px;
    --msr-shadow: 0 18px 40px -18px rgba(20, 34, 50, .22);
    --msr-shadow-sm: 0 6px 18px -8px rgba(20, 34, 50, .18);
    --msr-header-h: 64px;
    --msr-bar-h: 76px;

    --bs-body-font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-color: var(--msr-text);
    --bs-body-bg: var(--msr-cream);
    --bs-link-color-rgb: 214, 52, 60;
    --bs-link-hover-color-rgb: 184, 40, 47;
    --bs-border-color: var(--msr-line);
    --bs-focus-ring-color: rgba(240, 75, 82, .35);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--msr-header-h) + 8px);
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .section-title, .hero-title {
    font-family: "Outfit", var(--bs-body-font-family);
    color: var(--msr-navy);
    letter-spacing: -.015em;
}

a { text-underline-offset: 3px; }

.skip-link {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2000;
    padding: .5rem 1rem;
    background: var(--msr-navy);
    color: #fff;
    border-radius: 8px;
}

.text-brand { color: var(--msr-coral-strong); }

/* --------------------------------------------------------------------------
   Cuore del logo come elemento grafico
   -------------------------------------------------------------------------- */
.heart {
    display: inline-block;
    width: 1em;
    height: 1em;
    background: url("/favicon.svg") center / contain no-repeat;
    vertical-align: -.12em;
    flex-shrink: 0;
}
.heart--lg { width: 2.25rem; height: 2.25rem; }

/* --------------------------------------------------------------------------
   Bottoni
   -------------------------------------------------------------------------- */
.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: 999px;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: .65rem;
    --bs-btn-focus-box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;
    font-family: "Outfit", var(--bs-body-font-family);
    letter-spacing: .005em;
    transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-lg {
    --bs-btn-padding-x: 1.6rem;
    --bs-btn-padding-y: .8rem;
    --bs-btn-font-size: 1.0625rem;
    --bs-btn-border-radius: 999px;
    min-height: 54px;
}
.btn-sm-touch {
    --bs-btn-padding-x: 1.1rem;
    --bs-btn-padding-y: .45rem;
    min-height: 44px;
}

.btn-brand {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--msr-coral-strong);
    --bs-btn-border-color: var(--msr-coral-strong);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--msr-coral-dark);
    --bs-btn-hover-border-color: var(--msr-coral-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--msr-coral-dark);
    --bs-btn-active-border-color: var(--msr-coral-dark);
    box-shadow: 0 10px 22px -12px rgba(214, 52, 60, .8);
}
.btn-ghost {
    --bs-btn-color: var(--msr-navy);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--msr-line);
    --bs-btn-hover-color: var(--msr-navy);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: var(--msr-navy);
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: var(--msr-navy);
    --bs-btn-disabled-color: var(--msr-muted);
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: var(--msr-line);
    --bs-btn-disabled-opacity: 1;
}
.btn-whatsapp {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--msr-wa);
    --bs-btn-border-color: var(--msr-wa);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--msr-wa-dark);
    --bs-btn-hover-border-color: var(--msr-wa-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--msr-wa-dark);
    --bs-btn-active-border-color: var(--msr-wa-dark);
}
.btn-whatsapp .fa-whatsapp { font-size: 1.3em; }
.btn-call {
    --bs-btn-color: var(--msr-navy);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--msr-navy);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--msr-navy);
    --bs-btn-hover-border-color: var(--msr-navy);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--msr-navy);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--msr-header-h);
    display: flex;
    align-items: center;
    background: rgba(251, 243, 236, .88);
    backdrop-filter: saturate(1.4) blur(12px);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-scrolled {
    border-bottom-color: var(--msr-line);
    box-shadow: 0 6px 20px -16px rgba(20, 34, 50, .35);
}
.brand img { height: 24px; width: auto; display: block; }
@media (min-width: 576px) { .brand img { height: 28px; } }

.header-nav { gap: 1.75rem; }
.header-nav a {
    color: var(--msr-navy);
    text-decoration: none;
    font-weight: 500;
    font-size: .98rem;
}
.header-nav a:hover { color: var(--msr-coral-strong); }

/* --------------------------------------------------------------------------
   Sezioni
   -------------------------------------------------------------------------- */
.section { padding: 4.5rem 0; }
@media (min-width: 992px) { .section { padding: 6.5rem 0; } }

.section--white { background: var(--msr-white); }
.section--blush { background: var(--msr-blush); }
.section--dark {
    background:
        radial-gradient(circle at 85% 10%, rgba(240, 75, 82, .12), transparent 45%),
        radial-gradient(circle at 10% 90%, rgba(240, 75, 82, .06), transparent 40%),
        var(--msr-navy);
    color: rgba(255, 255, 255, .82);
}
.section--dark .section-title,
.section--dark h3 { color: #fff; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .85rem;
    font-family: "Outfit", var(--bs-body-font-family);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--msr-coral-strong);
}
.eyebrow--light { color: #FF8C91; }

.section-title {
    font-size: clamp(1.85rem, 1.3rem + 2.4vw, 2.9rem);
    font-weight: 600;
    line-height: 1.12;
    margin-bottom: 1rem;
}
.section-lead {
    font-size: 1.1rem;
    color: var(--msr-muted);
    max-width: 38rem;
}
.section--dark .section-lead { color: rgba(255, 255, 255, .78); }

.section-head { margin-bottom: 2.25rem; }
.section-head--center { text-align: center; }
.section-head--center .section-lead { margin-inline: auto; }
@media (min-width: 992px) { .section-head { margin-bottom: 3.25rem; } }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
    padding: 2rem 0 4rem;
    overflow: hidden;
}
@media (min-width: 992px) { .hero { padding: 4.5rem 0 6rem; } }

.hero .eyebrow {
    padding: .4rem .85rem;
    background: #fff;
    border: 1px solid var(--msr-line);
    border-radius: 999px;
    letter-spacing: .04em;
    text-transform: none;
    font-size: .88rem;
    color: var(--msr-navy);
}
.hero-title {
    font-size: clamp(2.5rem, 1.6rem + 4.2vw, 4.25rem);
    font-weight: 600;
    line-height: 1.04;
    margin-bottom: 1.1rem;
}
.hero-lead {
    font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem);
    color: var(--msr-muted);
    max-width: 34rem;
    margin-bottom: 1.75rem;
}
.hero-actions {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
@media (min-width: 576px) {
    .hero-actions { flex-direction: row; flex-wrap: wrap; }
}
.hero-facts {
    list-style: none;
    padding: 0;
    margin: 1.75rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.hero-facts a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .8rem;
    border-radius: 999px;
    background: var(--msr-sand);
    color: var(--msr-navy);
    font-size: .9rem;
    font-weight: 500;
    text-decoration: none;
}
.hero-facts a:hover { background: var(--msr-blush); }
.hero-facts i { color: var(--msr-coral-strong); }

.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 1rem 0 1.5rem;
}
.hero-blob {
    position: absolute;
    inset: 6% 8% 2%;
    border-radius: 44% 56% 52% 48% / 48% 42% 58% 52%;
    background: linear-gradient(145deg, var(--msr-blush), #F9D5CE 60%, var(--msr-sand));
}
.hero-phone {
    position: relative;
    width: min(62vw, 270px);
    height: auto;
    filter: drop-shadow(0 30px 40px rgba(20, 34, 50, .28));
}
.float-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .7rem .9rem;
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--msr-shadow);
    font-size: .85rem;
    line-height: 1.3;
    color: var(--msr-navy);
    animation: floaty 6s ease-in-out infinite;
}
.float-card strong { display: block; font-family: "Outfit", sans-serif; font-weight: 600; }
.float-card small { color: var(--msr-muted); font-size: .8rem; }
.float-card--contact {
    left: 0;
    top: 16%;
    max-width: 230px;
}
.float-card--stats {
    right: 0;
    bottom: 12%;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    animation-delay: -3s;
}
.float-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    flex-shrink: 0;
    font-size: 1.25rem;
}
.float-icon--wa { background: #E3F5EA; color: var(--msr-wa); }
.float-label { font-weight: 600; font-family: "Outfit", sans-serif; }
.mini-bars {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 38px;
}
.mini-bars i {
    width: 10px;
    height: var(--h);
    border-radius: 3px;
    background: var(--msr-sand);
}
.mini-bars i:nth-last-child(-n+2) { background: var(--msr-coral); }
.float-trend { color: var(--msr-wa); font-weight: 600; font-size: .8rem; }

@media (max-width: 575.98px) {
    .float-card { font-size: .78rem; padding: .55rem .7rem; }
    .float-card--contact { top: 8%; max-width: 190px; }
    .float-card small { font-size: .74rem; }
    .float-icon { width: 32px; height: 32px; font-size: 1.05rem; }
}
@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
    .float-card { animation: none; }
}

/* --------------------------------------------------------------------------
   Problema
   -------------------------------------------------------------------------- */
.problem-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .75rem;
}
.problem-list li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1.1rem;
    background: var(--msr-cream);
    border-radius: var(--msr-radius-sm);
}
.icon-round {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: var(--msr-coral-strong);
    flex-shrink: 0;
    box-shadow: var(--msr-shadow-sm);
}
.note-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.4rem;
    background: var(--msr-navy);
    color: #fff;
    border-radius: var(--msr-radius);
    font-size: 1.08rem;
}
.note-card--soft {
    background: var(--msr-blush);
    color: var(--msr-navy);
}

/* --------------------------------------------------------------------------
   Card servizio (swipe su mobile, griglia su desktop)
   -------------------------------------------------------------------------- */
.swipe-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: .25rem 1rem 1.25rem;
    margin-inline: calc(var(--bs-gutter-x) * -.5);
    scroll-padding-inline: 1rem;
    scrollbar-width: none;
}
.swipe-row::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
    .swipe-row {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, 1fr);
        overflow: visible;
        padding: 0;
        margin: 0;
    }
}
@media (min-width: 992px) {
    .swipe-row { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}
.feature-card {
    scroll-snap-align: start;
    padding: 1.6rem;
    background: #fff;
    border: 1px solid var(--msr-line);
    border-radius: var(--msr-radius);
    box-shadow: var(--msr-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}
@media (hover: hover) {
    .feature-card:hover { transform: translateY(-4px); box-shadow: var(--msr-shadow); }
}
.feature-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 1.1rem 0 .5rem;
}
.feature-card p { margin: 0; color: var(--msr-muted); }
.icon-tile {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: var(--msr-blush);
    color: var(--msr-coral-strong);
    font-size: 1.4rem;
}
.icon-tile--light { background: rgba(255, 255, 255, .12); color: #FF8C91; }
.swipe-hint {
    margin: .25rem 0 0;
    font-size: .88rem;
    color: var(--msr-muted);
    text-align: center;
}
.swipe-hint i { color: var(--msr-coral); margin-right: .3rem; animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(6px); }
}

/* --------------------------------------------------------------------------
   Metodo: Presenza → Contatti → Risultati
   -------------------------------------------------------------------------- */
.method {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 2.25rem;
    counter-reset: none;
}
@media (min-width: 992px) {
    .method { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}
.method-step {
    position: relative;
    padding: 2rem 1.6rem 1.6rem;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--msr-radius);
    text-align: center;
}
/* freccia tra i passaggi */
.method-step:not(:last-child)::after {
    content: "\f063";
    font: var(--fa-font-solid);
    position: absolute;
    left: 50%;
    bottom: -1.95rem;
    transform: translateX(-50%);
    color: var(--msr-coral);
    font-size: 1.1rem;
}
@media (min-width: 992px) {
    .method-step:not(:last-child)::after {
        content: "\f061";
        left: auto;
        right: -1.2rem;
        bottom: auto;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
    }
}
.method-num {
    position: absolute;
    top: 1rem;
    left: 1.2rem;
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: .85rem;
    color: rgba(255, 255, 255, .45);
}
.method-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--msr-coral);
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 12px 26px -12px rgba(240, 75, 82, .9);
}
.method-step h3 {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: .1rem;
}
.method-claim {
    font-family: "Outfit", sans-serif;
    color: #FF8C91;
    font-weight: 500;
    margin-bottom: .6rem;
}
.method-step p:last-child { margin: 0; }
.method-loop {
    margin: 2.5rem auto 0;
    max-width: 36rem;
    text-align: center;
    font-size: 1.05rem;
    color: #fff;
}
.method-loop i { color: var(--msr-coral); margin-right: .4rem; }

/* --------------------------------------------------------------------------
   A chi è rivolto
   -------------------------------------------------------------------------- */
.chips {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}
.chips li {
    padding: .55rem 1rem;
    border-radius: 999px;
    background: var(--msr-blush);
    color: var(--msr-navy);
    font-family: "Outfit", sans-serif;
    font-weight: 500;
}
.check-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: grid;
    gap: .9rem;
}
.check-list li {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    font-size: 1.08rem;
}
.check-list i {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-top: .05rem;
    border-radius: 50%;
    background: var(--msr-wa);
    color: #fff;
    font-size: .8rem;
    flex-shrink: 0;
}
.small-note {
    margin: 0;
    padding: 1rem 1.1rem;
    border-left: 3px solid var(--msr-coral);
    background: var(--msr-cream);
    border-radius: 0 var(--msr-radius-sm) var(--msr-radius-sm) 0;
    color: var(--msr-muted);
}
.small-note i { color: var(--msr-coral-strong); margin-right: .3rem; }

/* --------------------------------------------------------------------------
   Galleria esempio
   -------------------------------------------------------------------------- */
.gallery { position: relative; }
.gallery-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 88%;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    padding: .5rem 1rem 1rem;
    margin-inline: calc(var(--bs-gutter-x) * -.5);
    scrollbar-width: none;
    outline: none;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track:focus-visible { box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); border-radius: var(--msr-radius); }
@media (min-width: 768px) {
    .gallery-track { grid-auto-columns: 70%; }
}
@media (min-width: 1200px) {
    .gallery-track { grid-auto-columns: 62%; }
}
.gallery-slide {
    scroll-snap-align: center;
    margin: 0;
}
.gallery-frame {
    display: grid;
    place-items: center;
    padding: 1rem;
    aspect-ratio: 16 / 11;
    border-radius: var(--msr-radius);
    background: linear-gradient(150deg, var(--msr-sand), var(--msr-blush));
}
@media (min-width: 768px) { .gallery-frame { padding: 2rem; } }
.gallery-frame img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 26px rgba(20, 34, 50, .2));
}
.gallery-slide figcaption {
    padding: 1rem .25rem 0;
    color: var(--msr-muted);
}
.gallery-slide figcaption strong {
    display: block;
    font-family: "Outfit", sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--msr-navy);
}
.gallery-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: .5rem;
}
.gallery-btn {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--msr-line);
    background: #fff;
    color: var(--msr-navy);
    transition: background-color .15s ease, color .15s ease;
}
.gallery-btn:hover { background: var(--msr-navy); color: #fff; }
.gallery-btn:disabled { opacity: .4; pointer-events: none; }
.gallery-dots { display: flex; gap: .15rem; }
.gallery-dots button {
    width: 28px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    position: relative;
}
.gallery-dots button::before {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--msr-line);
    transform: translate(-50%, -50%);
    transition: width .2s ease, background-color .2s ease;
}
.gallery-dots button[aria-current="true"]::before {
    width: 22px;
    border-radius: 6px;
    background: var(--msr-coral);
}

/* --------------------------------------------------------------------------
   Come funziona: timeline
   -------------------------------------------------------------------------- */
.timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: step;
}
.timeline li {
    position: relative;
    padding: 0 0 2rem 4.25rem;
    counter-increment: step;
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: -.2rem;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--msr-coral-strong);
    color: #fff;
    font-family: "Outfit", sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    box-shadow: 0 0 0 6px var(--msr-blush);
}
.timeline li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 23px;
    top: 3.2rem;
    bottom: .6rem;
    width: 2px;
    background: repeating-linear-gradient(to bottom, var(--msr-line) 0 6px, transparent 6px 12px);
}
.timeline h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: .3rem; }
.timeline p { margin: 0; color: var(--msr-muted); }

/* --------------------------------------------------------------------------
   Pacchetto
   -------------------------------------------------------------------------- */
.price-card {
    padding: 2rem 1.5rem;
    background: #fff;
    border-radius: 26px;
    box-shadow: var(--msr-shadow);
    border: 1px solid var(--msr-line);
    position: relative;
    overflow: hidden;
}
@media (min-width: 768px) { .price-card { padding: 2.5rem 2.75rem; } }
.price-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 6px;
    background: linear-gradient(90deg, var(--msr-coral), #F7897A);
}
.price-head {
    text-align: center;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px dashed var(--msr-line);
}
.price-head img { height: 24px; width: auto; }
.price {
    margin: 1rem 0 0;
    font-family: "Outfit", sans-serif;
    color: var(--msr-navy);
    line-height: 1;
}
.price-amount {
    font-size: clamp(3.2rem, 2.6rem + 3vw, 4.4rem);
    font-weight: 700;
    letter-spacing: -.03em;
}
.price-period { font-size: 1.35rem; font-weight: 500; color: var(--msr-muted); }
.price-note {
    display: inline-block;
    margin: .75rem 0 0;
    padding: .25rem .75rem;
    border-radius: 999px;
    background: var(--msr-blush);
    color: var(--msr-coral-dark);
    font-weight: 600;
    font-size: .9rem;
}
.price-intro { font-weight: 600; color: var(--msr-navy); margin-bottom: .9rem; }
.included {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: grid;
    gap: .65rem;
}
@media (min-width: 768px) {
    .included { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
}
.included li {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    line-height: 1.4;
}
.included i { color: var(--msr-wa); margin-top: .2rem; }
.transparency {
    height: 100%;
    padding: 2rem 1.6rem;
    border-radius: 26px;
    background: var(--msr-navy);
    color: rgba(255, 255, 255, .85);
}
.transparency h3 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 1.1rem 0 .6rem;
}
.transparency strong { color: #fff; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: var(--msr-line);
    --bs-accordion-btn-padding-x: 0;
    --bs-accordion-btn-padding-y: 1.2rem;
    --bs-accordion-body-padding-x: 0;
    --bs-accordion-body-padding-y: 0;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-active-color: var(--msr-navy);
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-btn-color: var(--msr-navy);
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
}
.faq .accordion-item { border-width: 0 0 1px; }
.faq .accordion-item:first-of-type { border-top-width: 1px; }
.faq .accordion-header { margin: 0; }
.faq .accordion-button {
    font-family: "Outfit", sans-serif;
    font-size: 1.15rem;
    font-weight: 500;
    gap: 1rem;
}
.faq .accordion-button:focus-visible { outline: 2px solid var(--msr-coral); outline-offset: 2px; }
.faq .accordion-button::after {
    background: none;
    content: "\2b";
    font: var(--fa-font-solid);
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--msr-blush);
    color: var(--msr-coral-strong);
    transform: none;
    transition: transform .2s ease;
}
.faq .accordion-button:not(.collapsed)::after { transform: rotate(45deg); }
.faq .accordion-body {
    padding-bottom: 1.3rem;
    color: var(--msr-muted);
    max-width: 40rem;
}

/* --------------------------------------------------------------------------
   Contatti
   -------------------------------------------------------------------------- */
.contact-actions {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: 1.75rem;
}
@media (min-width: 576px) {
    .contact-actions { flex-direction: row; flex-wrap: wrap; }
}
.quick-form {
    padding: 1.75rem 1.5rem;
    background: #fff;
    border-radius: 26px;
    box-shadow: var(--msr-shadow);
}
@media (min-width: 768px) { .quick-form { padding: 2.25rem 2.25rem; } }
.quick-form h3 { font-size: 1.4rem; font-weight: 600; margin-bottom: .25rem; }
.quick-form-sub { color: var(--msr-muted); margin-bottom: 1.25rem; }
.quick-form .form-label { font-weight: 600; color: var(--msr-navy); margin-bottom: .35rem; }
.quick-form .optional { font-weight: 400; color: var(--msr-muted); }
.quick-form .form-control {
    min-height: 52px;
    border-radius: var(--msr-radius-sm);
    border-color: var(--msr-line);
    background: var(--msr-cream);
    font-size: 1.05rem; /* ≥16px: evita lo zoom automatico su iOS */
}
.quick-form .form-control:focus {
    background: #fff;
    border-color: var(--msr-coral);
    box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}
.form-note {
    margin: .9rem 0 0;
    font-size: .85rem;
    color: var(--msr-muted);
    text-align: center;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
    padding: 3.5rem 0 2rem;
    background: var(--msr-navy);
    color: rgba(255, 255, 255, .72);
    font-size: .98rem;
}
.site-footer img { height: 28px; width: auto; }
.footer-title {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: .8rem;
}
.footer-links li + li { margin-top: .4rem; }
.footer-links a {
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 32px;
}
.footer-links a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 991.98px) {
    /* spazio per la barra contatti fissa */
    .site-footer { padding-bottom: calc(2rem + var(--msr-bar-h) + env(safe-area-inset-bottom)); }
}
.footer-legal {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: .85rem;
    color: rgba(255, 255, 255, .6);
}

/* --------------------------------------------------------------------------
   Barra contatti fissa (mobile)
   -------------------------------------------------------------------------- */
.contact-bar {
    position: fixed;
    inset: auto 0 0;
    z-index: 1040;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .6rem;
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--msr-line);
    box-shadow: 0 -10px 30px -20px rgba(20, 34, 50, .4);
    transform: translateY(0);
    transition: transform .25s ease;
}
.contact-bar .btn {
    min-height: 50px;
    white-space: nowrap;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 1rem;
}
.contact-bar.is-hidden { transform: translateY(110%); }

/* --------------------------------------------------------------------------
   Pagina privacy
   -------------------------------------------------------------------------- */
.legal-page { padding: 3rem 0 5rem; }
.legal-page h1 { font-size: clamp(2rem, 1.6rem + 2vw, 2.75rem); font-weight: 600; margin-bottom: 1.5rem; }
.legal-page h2 { font-size: 1.3rem; font-weight: 600; margin: 2rem 0 .6rem; }
.legal-card {
    max-width: 46rem;
    padding: 2rem 1.5rem;
    background: #fff;
    border-radius: 26px;
    box-shadow: var(--msr-shadow-sm);
}
@media (min-width: 768px) { .legal-card { padding: 3rem; } }

/* --------------------------------------------------------------------------
   Comparsa morbida delle sezioni
   -------------------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}