/* ============================================================
   SoFitness — Home redesign 2026
   Sorgente: Figma "Home" (file CLUmb3dGpOIjrftOXU0F5k, node 0:30).
   Consuma i token di design-system.css (--ds-*). Zero hardcode di brand.
   Tutto scoped a .sf-home (sezioni) e body.route-index (header home),
   così non tocca le altre pagine (che restano sul vecchio app.css).
   Font: Inter Display (display/testo) · Newsreader italic (accenti) ·
   Instrument Sans (label bottoni).
   ============================================================ */

/* ---------- Reset / base scoped ---------- */
/* I token --sf-* sono ora definiti su :root in design-system.css (promossi per
   riuso su tutte le pagine pubbliche): .sf-home li eredita, valori invariati. */
.sf-home {
    font-family: var(--ds-font-display);
    color: var(--ds-text);
    background: var(--ds-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}
.sf-home img,
.sf-home svg { display: block; max-width: 100%; }
.sf-home p { margin: 0; }
.sf-home a { text-decoration: none; } /* il colore eredita dal reset globale *{color:inherit} */

/* ---------- Lenis (smooth scroll) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Container (.sf-inner), tipografia (.sf-display/.sf-title/.sf-accent/.sf-lead/.sf-body)
   e Bottoni (.sf-btn*) → spostati in components.css (design system condiviso). */
.sf-foot__cta img { transition: transform .2s ease; }
.sf-foot__cta:hover img { transform: translateX(5px); }

/* .sf-btn-group / .sf-iconbtn → components.css */

/* ============================================================
   HEADER (solo home) — sovrapposto all'hero, bianco
   ============================================================ */
/* nasconde header/menu/footer globali solo sulla home (la home ha i suoi) */
body.route-index #header-wrapper,
body.route-index > .dropdown,
body.route-index .header-wrapper + .dropdown,
body.route-index > footer { display: none !important; }

.sf-header {
    position: fixed; /* sempre on top: le sezioni scorrono sotto */
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--sf-edge);
    transition: background-color .3s ease, box-shadow .3s ease;
}
.sf-header__logo { height: 24px; width: auto; }
/* specificità > `.sf-home img {display:block}`, altrimenti il logo scuro non si nasconde */
.sf-header .sf-header__logo--dark { display: none; }
/* stato dopo lo scroll: barra chiara leggibile sopra le sezioni chiare */
.sf-header.is-scrolled {
    background: rgba(250, 248, 244, 0.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}
.sf-header.is-scrolled .sf-header__logo--white { display: none; }
.sf-header.is-scrolled .sf-header__logo--dark { display: block; }
.sf-header.is-scrolled .sf-header__nav a { color: var(--ds-heading); }
.sf-header.is-scrolled .sf-header__burger span { background: var(--ds-heading); }
.sf-header__nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 42px;
}
.sf-header__nav a {
    font-family: var(--ds-font-display);
    font-weight: 400;
    font-size: 20px;
    line-height: 1;
    letter-spacing: -0.32px;
    color: #fff;
    /* "Chi Sono" e "Il Tuo Plan" andavano a capo sotto i 1280px (richiesta Sofia,
       21 set 2026): sono due parole sole, si tengono su una riga e semmai si stringe
       lo spazio fra le voci, vedi la media query piu' sotto */
    white-space: nowrap;
}
.sf-header__nav a.is-active,
.sf-header__nav a:hover { font-weight: 500; letter-spacing: -0.5px; }
/* fra i 980 e i 1300 le sei voci in una riga sola non ci stanno col passo pieno:
   si stringe lo spazio invece di mandarle a capo. Sotto i 980 c'e' gia' il menu a panino. */
@media (max-width: 1300px) {
    .sf-header__nav { gap: 30px; }
    .sf-header__nav a { font-size: 18px; }
}
@media (max-width: 1150px) {
    .sf-header__nav { gap: 22px; }
    .sf-header__nav a { font-size: 17px; }
}

/* pagina corrente: sottolineata (il solo grassetto non si distingueva dall'hover) */
.sf-header__nav a.is-active { text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1.5px; }
.sf-header__cta {
    display: inline-flex;
    align-items: center;
    background: #fff;
    color: var(--ds-heading);
    font-family: var(--ds-font-display);
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    letter-spacing: -0.64px;
    padding: 14px 24px;
    border-radius: var(--ds-radius);
    box-shadow: var(--sf-shadow-soft);
    transition: transform .15s ease, box-shadow .15s ease;
}
.sf-header__cta:hover { transform: translateY(-2px); box-shadow: 0 12px 22px rgba(0, 0, 0, 0.10); }
.sf-header__burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.sf-header__burger span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; }
.sf-header__burger span + span { margin-top: 5px; }
.sf-header__mobile { display: none; } /* visibile solo su mobile a menu aperto (vedi media query) */

/* ============================================================
   HERO (0:32)
   ============================================================ */
.sf-hero {
    position: sticky; /* resta fissa: il resto della pagina scorre sopra */
    top: 0;
    z-index: 0;
    padding: var(--ds-space-2); /* inset più sottile (8px) */
}
/* tutte le sezioni dopo la hero scorrono SOPRA (coprono la hero pinnata), ma NON l'header */
.sf-home > :not(.sf-hero):not(.sf-header) { position: relative; z-index: 1; }
.sf-hero__card {
    position: relative;
    height: 900px; /* più alta */
    border-radius: var(--ds-radius); /* rounded ridotto coerente con l'inset (16px) */
    overflow: hidden;
    isolation: isolate;
}
.sf-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 75%; /* foto più in basso */
    z-index: -2;
}
.sf-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 9.8%, rgba(0, 0, 0, 0) 45%),
        radial-gradient(120% 70% at 18% 92%, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 60%);
}
.sf-hero__content {
    position: absolute;
    left: var(--sf-edge);
    bottom: 82px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    color: #fff;
}
/* 🔴 SOLO la home: l'etichetta sale in cima alla card e titolo/testo/CTA restano in
   fondo, come gia' fa il telefono. Prima l'etichetta stava appiccicata sopra il titolo,
   cioe' proprio sul viso di Sofia (richiesta sua, 21 set 2026: "mettere le scritte piu'
   sotto, cosi' si vede la faccia"). Il fondo resta ancorato a 82px, quindi la CTA non
   scende di un pixel e non torna il problema del bottone fuori dalla piega. */
.sf-home .sf-hero__content { top: 124px; }
.sf-home .sf-hero__title { margin-top: auto; }

.sf-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    /* glass — da css.glass (radius a pill perché nel Figma è una pill) */
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(9.7px);
    -webkit-backdrop-filter: blur(9.7px);
    border: 1px solid rgba(255, 255, 255, 0.63);
    font-size: 16px;
    letter-spacing: -0.32px;
    color: #fff;
}
.sf-hero__title {
    margin: 0;
    color: #fff;
    width: 874px;
    max-width: 100%;
}
.sf-hero__sub {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 526px;
    max-width: 100%;
}
.sf-hero__sub p { color: #fff; }

/* QUOTE (.sf-quote*) → components.css (componente Quote) */

/* ============================================================
   LA TUA COACH — presentazione di Sofia (usa MediaText) + firma
   ============================================================ */
.sf-coach__badge { align-self: flex-start; padding: 10px 20px; }
.sf-coach__title { text-transform: none; }  /* "Ciao, sono Sofia!" è una frase: il capitalize la rende "Ciao, Sono" */
.sf-coach__badge span { font-size: 16px; }
/* testo più grande dei 16px del resto: a quella misura si scorreva via senza fermarsi
   (richiesta Sofia, 21 ago 2026). Specificità 0,3,0 per battere .sf-mediatext__text .sf-body.
   19 e non 20px: a 20 la riga "Da quel desiderio…" misura 626px in una colonna da 614
   e andrebbe a capo dove Sofia non l'ha chiesto (misurato a 1440). */
.sf-mediatext__text .sf-coach__text { font-size: 19px; line-height: 1.6; letter-spacing: -0.3px; }
.sf-coach__link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.sf-coach__sign { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.sf-coach__sign-name {
    font-family: var(--ds-font-signature);
    font-weight: 400;
    font-size: 56px;
    line-height: 1.2;
    color: var(--sf-sub-2);
}

/* firma vera + qualifica in bianco SULLA foto (Sofia, 21 ago): il testo si chiude
   sulla parola "Sofi" e la qualifica passa sull'immagine. Sfumatura in basso per
   tenere il bianco leggibile sopra le foglie chiare. */
.sf-home .sf-mediatext__media { position: relative; }
.sf-home .sf-mediatext__media::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 42%;
    border-radius: 0 0 var(--ds-radius-lg) var(--ds-radius-lg);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
    pointer-events: none;
}
.sf-coach__stamp {
    position: absolute;
    left: 40px;
    right: 40px;
    bottom: 36px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    /* incolonnate al centro: la qualifica va centrata SOTTO LA FIRMA, allineata a
       sinistra sembrava spostata (richiesta Sofia, 21 set 2026) */
    align-items: center;
    gap: 4px;
}
/* la sorgente è grigio chiaro su trasparente: brightness(0)+invert la porta a bianco pieno */
.sf-coach__stamp-sign { width: min(340px, 55%); height: auto; filter: brightness(0) invert(1); }
.sf-coach__stamp-role {
    font-family: var(--ds-font-display);
    font-weight: 500;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
}

/* ============================================================
   SE TI RICONOSCI — 6 situazioni numerate su due colonne, niente card
   (le card sono la sezione verde sotto: qui il trattamento è volutamente diverso)
   ============================================================ */
.sf-sit { background: var(--sf-bg-warm); padding-block: 140px; }
.sf-sit__inner { display: flex; flex-direction: column; gap: 56px; }
/* colonna unica centrata: titolo, elenco e pannello di chiusura sulla stessa verticale */
.sf-sit__head { display: flex; flex-direction: column; gap: 12px; max-width: 900px; margin-inline: auto; }
.sf-sit__title { text-transform: none; margin: 0; }
.sf-sit__sub {
    font-family: var(--ds-font-display);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.5;
    color: var(--sf-ink-80);
}
/* una voce sotto l'altra e testi grandi: "come un post di Instagram", così l'occhio
   ci incappa e ci si riconosce (richiesta Sofia, 21 ago 2026). La colonna resta stretta
   a 900px: a tutta larghezza le righe sarebbero due parole in mezzo al vuoto. */
.sf-sit__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 900px;
    margin-inline: auto;
}
.sf-sit__item {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 28px 32px;
    background: #fff;
    border-radius: var(--ds-radius-lg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
/* marker = pill vinaccia con freccia e numero: è l'accento della palette che Sofia
   ha chiesto per fermare l'occhio (prima era verde come i cerchi di "Come funziona") */
.sf-sit__marker {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-claret);
}
.sf-sit__arrow { width: 20px; height: 20px; }
.sf-sit__num {
    font-family: var(--ds-font-display);
    font-weight: 600;
    font-size: 20px;
    line-height: 1;
    color: #fff;
}
.sf-sit__text { display: flex; flex-direction: column; gap: 6px; }
.sf-sit__item-title {
    font-family: var(--ds-font-display);
    font-weight: 500;
    font-size: 26px;
    line-height: 1.25;
    letter-spacing: -0.5px;
    color: var(--sf-sub-2);
}
.sf-sit__item-desc {
    font-family: var(--ds-font-display);
    font-weight: 400;
    font-size: 19px;
    line-height: 1.5;
    color: var(--sf-ink-80);
}
/* pannello menta: chiusura di "Se ti riconosci" e box "Non sai quale scegliere?" dei livelli */
.sf-sit__outro,
.sf-levels__help {
    align-self: center;
    max-width: 900px;
    margin-inline: auto;
    padding: 40px 48px;
    border-radius: var(--ds-radius-xl);
    background: var(--sf-mint-line);
    border: 1px solid var(--sf-green-line);
    text-align: center;
}
.sf-sit__outro-p {
    font-family: var(--ds-font-display);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.6;
    color: var(--sf-sub-2);
    margin: 0 0 10px;
}
.sf-sit__outro-p:last-child { margin-bottom: 0; }

/* ============================================================
   SLIDE DI CHIUSURA DELLE SITUAZIONI — foto a sinistra, frase a destra su bianco.
   Riusa MediaText: qui cambia solo il fondo e la taglia del testo, che deve pesare
   come un titolo (la frase è il passaggio chiave della pagina).
   ============================================================ */
.sf-outro .sf-mediatext { background: #fff; }
.sf-outro__text {
    font-family: var(--ds-font-display);
    font-weight: 400;
    font-size: 28px;
    line-height: 1.45;
    letter-spacing: -0.5px;
    color: var(--ds-heading);
    margin: 0;
}
@media (max-width: 980px) { .sf-outro__text { font-size: 22px; } }

@media (max-width: 900px) {
    .sf-sit { padding-block: 88px; }
    .sf-sit__inner { gap: 40px; }
    /* i 26/19px del desktop mandano i titoli lunghi su 4 righe in una card da 340px */
    .sf-sit__item { gap: 16px; padding: 24px; }
    .sf-sit__item-title { font-size: 22px; }
    .sf-sit__item-desc { font-size: 17px; }
    .sf-sit__outro { padding: 32px 24px; }
}

/* ============================================================
   WHY CHOOSE (0:78) — su verde foresta, 6 card
   ============================================================ */
.sf-why { background: var(--ds-green); padding-block: 140px; color: var(--ds-on-green); }
.sf-why__inner { display: flex; flex-direction: column; gap: 64px; }
.sf-why__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 64px; }
.sf-why__title { color: #fff; width: 460px; flex: none; margin: 0; }
.sf-why__sub { width: 399px; flex: none; color: var(--ds-on-green-soft); }
.sf-why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* card in rosa pieno sul verde: Sofia le voleva "più in evidenza", con lo sfondo rosa
   chiaro della palette e un numero di fianco al motivo (22 ago 2026) */
.sf-why__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    padding: 32px;
    border-radius: var(--ds-radius-lg);
    background: var(--ds-pink);
    border: 0;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}
/* le icone sono tracciate in bianco: sul rosa sparirebbero, quindi il chip diventa verde pieno */
.sf-why__card .sf-icon-chip { background: var(--ds-green); border-color: transparent; }
.sf-why__card-text { display: flex; flex-direction: column; gap: 16px; }
.sf-why__card-head { display: flex; align-items: flex-start; gap: 14px; }
.sf-why__card-num {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--ds-claret);
    color: #fff;
    font-family: var(--ds-font-display);
    font-weight: 600;
    font-size: 19px;
    line-height: 1;
}
.sf-why__card-title {
    margin: 0;
    font-family: var(--ds-font-display);
    font-weight: 500;
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: -1px;
    color: var(--ds-heading);
}
.sf-why__card-desc {
    font-family: var(--ds-font-display);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: -0.23px;
    color: var(--sf-sub-2);
}
.sf-why__cta { display: flex; justify-content: center; align-items: center; gap: 16px; }

/* .sf-icon-chip e .sf-sec-head → components.css */

/* ============================================================
   DEVICES — "Un cambiamento facile" (0:129)
   ============================================================ */
.sf-devsec { background: var(--sf-bg-warm); padding-block: 140px; }
.sf-devsec__inner { display: flex; flex-direction: column; align-items: center; gap: 60px; }
.sf-devsec__sub {
    font-family: var(--ds-font-display);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: -0.23px;
    color: var(--sf-ink-80);
}
.sf-devices { position: relative; width: min(1108px, 100%); aspect-ratio: 1108 / 490; margin-inline: auto; }
.sf-devices img { position: absolute; height: auto; }
.sf-devices__laptop { left: 20.58%; top: 0; width: 56.59%; z-index: 1; }
.sf-devices__tablet { left: 53.07%; top: 27.14%; width: 46.93%; z-index: 2; }
.sf-devices__phone  { left: 0; top: 18.78%; width: 26.99%; z-index: 3; }
/* didascalie sotto il mockup, una per device (Sofia: "sotto le immagini scrivere") */
.sf-devsec__labels {
    list-style: none;
    margin: 0;
    padding: 0;
    width: min(1108px, 100%);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: center;
}
.sf-devsec__labels li { display: flex; flex-direction: column; gap: 4px; }
.sf-devsec__label {
    font-family: var(--ds-font-display);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.3px;
    color: var(--ds-green);
}
.sf-devsec__label-text {
    font-family: var(--ds-font-display);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--sf-ink-80);
}
@media (max-width: 720px) {
    .sf-devsec__labels { grid-template-columns: 1fr; gap: 16px; }
}
/* .sf-badge-pill → components.css */

/* ============================================================
   SPLIT — "Allenati dove ti senti a casa" (0:165) Home/Gym
   ============================================================ */
.sf-splitsec { background: #fff; padding-block: 140px; display: flex; flex-direction: column; align-items: center; gap: 64px; }
.sf-splitsec__title { color: var(--ds-heading); text-align: center; }
.sf-split { position: relative; width: 100%; aspect-ratio: 1440 / 755; overflow: hidden; }
/* due foto divise dalla diagonale d'angolo (top-right → bottom-left) = split 50/50 statico.
   Home = triangolo alto-sx · Gym = triangolo basso-dx. (Hover rimosso su richiesta.) */
.sf-split__pane { position: absolute; inset: 0; overflow: hidden; }
.sf-split__pane img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-split__pane--home { clip-path: polygon(0 0, 100% 0, 0 100%); }
.sf-split__pane--gym  { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
/* niente object-position: le due foto sono già tagliate sull'aspect della fascia, coi
   soggetti dentro il rispettivo triangolo (script in Materiali-Cliente) */
.sf-split__line {
    position: absolute; inset: 0; pointer-events: none; background: #fff;
    clip-path: polygon(calc(100% - 1.5px) 0, calc(100% + 1.5px) 0, calc(0% + 1.5px) 100%, calc(0% - 1.5px) 100%);
}
.sf-split__label {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border-radius: var(--ds-radius-sm);
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
}
.sf-split__label-title {
    font-family: var(--ds-font-display);
    font-weight: 500;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -2px;
    text-transform: capitalize;
}
.sf-split__label-text {
    font-family: var(--ds-font-display);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: -0.23px;
}
.sf-split__label-body {
    font-family: var(--ds-font-display);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: -0.1px;
    opacity: 0.9;
}
/* ancorati agli angoli dei rispettivi triangoli, con lo stesso gutter delle altre sezioni:
   casa in alto a sinistra, palestra in basso a destra */
.sf-split__label--home { left: var(--sf-edge); top: var(--sf-edge); width: 40%; }
.sf-split__label--gym  { right: var(--sf-edge); bottom: var(--sf-edge); width: 40%; }

/* ============================================================
   LEVELS — "…e 2 livelli disponibili" (0:177)
   ============================================================ */
.sf-levels { background: var(--sf-bg-warm); padding-block: 140px; }
.sf-levels__inner { display: flex; flex-direction: column; gap: 60px; }
.sf-levels__sub {
    font-family: var(--ds-font-display);
    font-weight: 400; font-size: 20px; line-height: 1.5; letter-spacing: -0.23px;
    color: var(--sf-sub-2); max-width: 350px;
}
.sf-levels__rows { display: flex; flex-direction: column; gap: 0; }
/* griglia 50/50: l'immagine riempie la sua metà (≈640 a 1440 come Figma), il testo
   sta nell'altra metà accostato all'immagine (gap 80). Bilanciato a ogni larghezza. */
.sf-levels__row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; width: 100%; }
.sf-levels__text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; width: 470px; max-width: 100%; text-align: left; }
.sf-levels__row--end .sf-levels__text { justify-self: end; margin-inline-end: 80px; }
.sf-levels__row:not(.sf-levels__row--end) .sf-levels__text { justify-self: start; margin-inline-start: 80px; }
.sf-levels__claim {
    font-family: var(--ds-font-display);
    font-weight: 600; font-size: 20px; line-height: 1.4; letter-spacing: -0.3px;
    color: var(--ds-ink);
}
.sf-levels__title {
    font-family: var(--ds-font-display);
    font-weight: 500; font-size: 40px; line-height: 1.1; letter-spacing: -2px;
    text-transform: capitalize; color: var(--ds-ink);
}
.sf-levels__desc {
    margin: 0;
    font-family: var(--ds-font-display);
    font-weight: 400; font-size: 18px; line-height: 1.6; letter-spacing: -0.23px;
    color: var(--sf-sub-2);
}
.sf-levels__desc + .sf-levels__desc { margin-top: 12px; }
.sf-levels__img { width: 100%; height: 539px; object-fit: cover; border-radius: var(--ds-radius-lg); }

/* "Non sai quale scegliere?" — chiusura della sezione livelli, nello stesso pannello
   menta usato dalla chiusura di "Se ti riconosci" (regole condivise più sotto) */
.sf-levels__help { display: flex; flex-direction: column; gap: 20px; }
.sf-levels__help-title {
    margin: 0;
    font-family: var(--ds-font-display);
    font-weight: 500; font-size: 22px; line-height: 1.4; letter-spacing: -0.3px;
    color: var(--ds-ink);
}
/* le due proposte in corsivo vinaccia, staccate dal titolo del riquadro: Sofia le voleva
   "di un colore diverso rispetto al titolo, magari rosso vinaccia.. così fa contrasto" (22 ago 2026) */
.sf-levels__help-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.sf-levels__help-list li { display: flex; gap: 14px; text-align: left; }
.sf-levels__help-arrow { width: 24px; height: 24px; flex: none; margin-top: 5px; }
.sf-levels__help-list span {
    font-family: var(--ds-font-display);
    font-style: italic;
    font-weight: 400; font-size: 18px; line-height: 1.6; color: var(--ds-claret);
}
/* dentro le due frasi l'accento *parola* resta serif: il corsivo lo eredita già dal <span> */
.sf-levels__help-list .sf-accent { font-weight: 500; }
.sf-levels__img--princ { object-position: center 28%; }
.sf-levels__img--avanz { object-position: center 62%; }

/* ============================================================
   PLANS — "4 piani disponibili" (13:35) su verde — tabella prezzi
   ============================================================ */
.sf-plans { background: var(--ds-green); padding-block: 140px; }
.sf-plans__inner { display: flex; flex-direction: column; align-items: center; gap: 60px; }
.sf-plans__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.sf-plans__title { color: var(--ds-on-green); }
.sf-plans__sub {
    font-family: var(--ds-font-display);
    font-weight: 400; font-size: 20px; line-height: 1.5; letter-spacing: -0.23px;
    color: var(--ds-on-green-soft); max-width: 520px;
}
.sf-plans__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: 100%; }

/* card prezzo */
.sf-pcard {
    display: flex; flex-direction: column; gap: 32px;
    padding: 24px;
    background: var(--sf-bg-warm);
    border: 1.5px solid transparent; /* base senza bordo; spazio riservato così la featured non sposta */
    border-radius: var(--ds-radius-lg);
}
.sf-pcard--featured { border-color: var(--ds-claret); }
.sf-pcard__head { display: flex; flex-direction: column; gap: 24px; }
.sf-pcard__name-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sf-pcard__name {
    font-family: var(--ds-font-display);
    font-weight: 500; font-size: 20px; line-height: 1.1;
    text-transform: capitalize; color: var(--ds-green);
}
.sf-pcard__badge {
    flex: none;
    padding: 4px 12px; border-radius: var(--ds-radius-pill);
    font-family: var(--ds-font-display);
    font-weight: 500; font-size: 14px; line-height: 1.5; letter-spacing: -0.23px;
    color: #fff;
}
.sf-pcard__badge--claret { background: var(--ds-claret); }
.sf-pcard__badge--green { background: var(--ds-green); }
.sf-pcard__price { display: flex; align-items: flex-end; gap: 6px; }
.sf-pcard__amount {
    font-family: var(--ds-font-display);
    font-weight: 500; font-size: 32px; line-height: 1.1; letter-spacing: -1px;
    text-transform: capitalize; color: var(--ds-green);
}
.sf-pcard__per, .sf-pcard__note {
    font-family: var(--ds-font-display);
    font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: -0.23px;
    color: var(--sf-green-80);
}
.sf-pcard__divider { height: 1px; background: rgba(30, 59, 47, 0.15); }
.sf-pcard__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sf-pcard__features li {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--ds-font-display);
    font-weight: 400; font-size: 18px; line-height: 1.5; letter-spacing: -0.23px;
    color: var(--sf-green-80);
}
.sf-pcard__features img { width: 20px; height: 20px; flex: none; }
.sf-pcard__btn {
    margin-top: auto;
    display: flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 8px 24px;
    border: 1.5px solid var(--ds-green); border-radius: var(--ds-radius-pill);
    font-family: var(--ds-font-display);
    font-weight: 400; font-size: 18px; line-height: 1.5; letter-spacing: -0.23px;
    color: var(--sf-green-80);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.sf-pcard__btn:hover { background: var(--ds-green); color: #fff; }
.sf-pcard--featured .sf-pcard__btn { background: var(--ds-claret); border-color: var(--ds-claret); color: #fff; }
.sf-pcard--featured .sf-pcard__btn:hover { background: var(--ds-claret-deep); border-color: var(--ds-claret-deep); }

/* .sf-sub → components.css */

/* ============================================================
   ACCESSORI — "Accessori necessari" (0:212)
   ============================================================ */
.sf-acc { background: #fff; padding-block: 140px; }
.sf-acc__inner { display: flex; flex-direction: column; align-items: center; gap: 60px; }
.sf-acc__grid { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; width: 100%; }
.sf-acc__item { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sf-acc__circle {
    width: 200px; height: 200px; flex: none;
    border-radius: 50%;
    border: 1px solid var(--sf-mint-line);
    background: var(--sf-green-05);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.sf-acc__circle img { width: 72%; height: 72%; object-fit: contain; transition: transform .3s ease; }
/* hover: il cerchio si solleva + ombra + bordo verde, l'icona zooma */
.sf-acc__item:hover .sf-acc__circle { transform: translateY(-8px); box-shadow: 0 16px 32px rgba(30, 59, 47, 0.12); border-color: var(--ds-green); }
.sf-acc__item:hover .sf-acc__circle img { transform: scale(1.08); }
.sf-acc__label {
    font-family: var(--ds-font-display);
    font-weight: 500; font-size: 24px; line-height: 1.5; letter-spacing: -0.23px;
    color: var(--ds-green); text-align: center;
}

/* ============================================================
   STEPS — "Come funziona?" (0:239)
   ============================================================ */
.sf-steps { background: #fff; padding-block: 140px; }
.sf-steps__inner { display: flex; flex-direction: column; align-items: center; gap: 64px; }
.sf-steps__row { position: relative; display: flex; gap: 40px; width: 100%; }
.sf-steps__line { position: absolute; top: 30px; height: 0; border-top: 2px dashed var(--sf-green-line); }
.sf-steps__line--1 { left: 19.2%; width: 27%; }
.sf-steps__line--2 { left: 53.7%; width: 27%; }
.sf-steps__col { position: relative; z-index: 1; flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 40px; }
/* "Tre semplici passi. Una grande rivincita personale." su una riga sola (Sofia, 22 ago):
   servono 419px, il .sf-sub condiviso ne dà 350 e la spezzava in due */
.sf-steps .sf-sub { max-width: none; }
/* cerchietti in vinaccia e non in verde: Sofia li voleva "in contrasto" (22 ago 2026) */
.sf-steps__circle {
    width: 60px; height: 60px; border-radius: 50%;
    background: var(--ds-claret); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--ds-font-display); font-weight: 600; font-size: 24px; line-height: 1; letter-spacing: -0.48px;
}
.sf-steps__text { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.sf-steps__step-title { font-family: var(--ds-font-display); font-weight: 500; font-size: 24px; line-height: 1; letter-spacing: -0.36px; color: #000; }
.sf-steps__step-desc { font-family: var(--ds-font-display); font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: -0.16px; color: #000; opacity: 0.7; max-width: 300px; }

/* ============================================================
   BEFORE/AFTER — "400.000 donne" (0:265)
   ============================================================ */
.sf-ba { background: var(--sf-bg-warm); padding-block: 140px; display: flex; flex-direction: column; align-items: center; gap: 64px; }
.sf-ba__title { color: var(--ds-heading); text-align: center; line-height: 1.2; }
/* sette prima/dopo, non più tre di misure diverse: sono immagini già composte e
   brandizzate, tutte 4:5, quindi vanno trattate uguali. Griglia che va a capo e si
   centra: la seconda riga di tre resta in mezzo invece di restare spaiata a sinistra.
   4 per riga sul desktop, 3 sotto i 1200, 2 sul telefono. (Sofia, 21 set 2026) */
.sf-ba__gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.sf-ba__img {
    width: calc(25% - 15px);
    aspect-ratio: 4 / 5;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
}
@media (max-width: 1200px) { .sf-ba__img { width: calc(33.333% - 14px); } }

/* ============================================================
   BLOG — "Le ultime dal blog" (0:273)
   ============================================================ */
.sf-blog { background: #fff; padding-block: 140px; }
.sf-blog__inner { display: flex; flex-direction: column; gap: 60px; }
.sf-blog__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 64px; }
.sf-blog__title { width: 402px; flex: none; color: var(--ds-heading); line-height: 1.2; }
.sf-blog__sub {
    width: 484px; flex: none;
    font-family: var(--ds-font-display);
    font-weight: 400; font-size: 20px; line-height: 1.4; letter-spacing: -0.23px;
    color: var(--sf-ink-80);
}
.sf-blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sf-blog__card { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.sf-blog__media { height: 320px; border-radius: var(--ds-radius-xl); overflow: hidden; }
.sf-blog__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: transform .3s ease; }
.sf-blog__card:hover .sf-blog__media img { transform: scale(1.04); }
.sf-blog__card:nth-child(3) .sf-blog__media img { object-position: center 50%; } /* 3ª foto (piscina) centrata */
.sf-blog__body { display: flex; flex-direction: column; gap: 12px; }
.sf-blog__meta { display: flex; gap: 16px; font-family: var(--ds-font-display); font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: -0.084px; color: var(--sf-ink-80); }
.sf-blog__meta span { opacity: 0.6; }
.sf-blog__main { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.sf-blog__post-title { font-family: var(--ds-font-display); font-weight: 600; font-size: 20px; line-height: 1.2; letter-spacing: -0.4px; color: var(--ds-ink); }
.sf-blog__more { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ds-font-sans); font-weight: 500; font-size: 16px; line-height: 1; letter-spacing: -0.64px; color: var(--ds-text); }
.sf-blog__more span { text-decoration: underline; text-underline-position: from-font; }
.sf-blog__more img { width: 24px; height: 24px; }

/* ============================================================
   REVIEWS — "Commenti e recensioni" (0:311) — su crema
   ⚠️ contenuto placeholder: nessuna entity recensioni nel backend.
   ============================================================ */
.sf-rev { background: var(--sf-bg-warm); padding-block: 140px; }
.sf-rev__inner { display: flex; flex-direction: column; align-items: center; gap: 60px; }
.sf-rev__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px 16px; width: 100%; }
.sf-rev__card {
    position: relative;
    display: flex; flex-direction: column; gap: 40px;
    padding: 24px;
    background: #fff;
    border-radius: var(--ds-radius-lg);
    border-bottom-left-radius: 0;            /* angolo squadrato dove parte la codina */
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.05));
}
/* codina "nuvoletta" in basso a sinistra (stile chat) */
.sf-rev__card::after {
    content: "";
    position: absolute; left: 0; top: 100%;
    width: 52px; height: 38px;
    background: url("../images/home/icons/bubble-tail-WUdRPXQ.svg") no-repeat left top;
}
.sf-rev__stars { display: flex; gap: 8px; }
.sf-rev__stars img { width: 24px; height: 24px; }
.sf-rev__text {
    font-family: var(--ds-font-display);
    font-weight: 400; font-size: 22px; line-height: 1.4; letter-spacing: -0.23px;
    color: var(--sf-sub-2); flex: 1;
}
.sf-rev__author { display: flex; align-items: center; gap: 11px; }
.sf-rev__avatar {
    width: 42px; height: 42px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: var(--ds-mint); color: var(--ds-green);
    font-family: var(--ds-font-display); font-weight: 500; font-size: 18px;
}
.sf-rev__name {
    font-family: var(--ds-font-display);
    font-weight: 500; font-size: 24px; line-height: 1.1; letter-spacing: -1px;
    text-transform: capitalize; color: var(--ds-ink);
}

/* ============================================================
   FAQ — "Domande frequenti" (0:396) accordion
   ============================================================ */
.sf-faq { background: #fff; padding-block: 140px; }
.sf-faq__inner { display: flex; gap: 64px; align-items: flex-start; }
.sf-faq__head { width: 467px; flex: none; display: flex; flex-direction: column; gap: 16px; }
.sf-faq__sub { font-family: var(--ds-font-display); font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: -0.23px; color: var(--sf-sub-2); max-width: 399px; }
.sf-faq__list { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; }
.sf-faq__item { width: 100%; }
.sf-faq__header {
    width: 100%; background: none; border: 0; cursor: pointer;
    display: flex; gap: 60px; align-items: center; justify-content: space-between;
    padding: 0; text-align: left;
}
.sf-faq__qa { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; }
.sf-faq__q { font-family: var(--ds-font-display); font-weight: 500; font-size: 24px; line-height: 1; letter-spacing: -0.36px; color: #000; }
.sf-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.sf-faq__a > div { overflow: hidden; min-height: 0; }
.sf-faq__a p { font-family: var(--ds-font-display); font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: -0.16px; color: #000; opacity: 0.7; padding-top: 16px; }
.sf-faq__item.is-open .sf-faq__a { grid-template-rows: 1fr; }
.sf-faq__toggle {
    flex: none; width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border-radius: var(--ds-radius); box-shadow: var(--sf-shadow-soft);
    transition: background-color .2s ease;
}
.sf-faq__toggle img { width: 24px; height: 24px; }
.sf-faq__toggle .sf-faq__minus { display: none; }
.sf-faq__item.is-open .sf-faq__toggle { background: var(--sf-green-chip); }
.sf-faq__item.is-open .sf-faq__toggle .sf-faq__plus { display: none; }
.sf-faq__item.is-open .sf-faq__toggle .sf-faq__minus { display: block; }
.sf-faq__divider { height: 1px; background: var(--sf-hairline); margin: 24px 0; }

/* ============================================================
   FOOTER (0:435) — banner CTA + footer su immagine
   ============================================================ */
.sf-foot { padding: var(--ds-space-2); background: var(--ds-bg); } /* inset come la hero (8px); sfondo crema pagina: annulla l'alocasia ereditato da footer{} (app.css) E copre la hero sticky che scorre dietro */
/* raggio come la hero; padding-inline = --sf-edge − inset → contenuto footer al bordo 66px come le sezioni */
/* foto + overlay verde uniforme = UN solo background (vedi style inline nel template) → niente alone agli angoli */
.sf-foot__card { position: relative; border-radius: var(--ds-radius); overflow: hidden; padding-block: 80px 48px; padding-inline: calc(var(--sf-edge) - var(--ds-space-2)); background-size: cover; background-position: center; }
.sf-foot__inner { display: flex; flex-direction: column; gap: 133px; color: #fff; }
.sf-foot__top { display: flex; gap: 100px; align-items: flex-start; }
/* base 430px e non 0: con `flex: 1 0 0` il titolo prendeva solo l'avanzo, e sotto i
   1250px si riduceva a una colonna strettissima attaccata ai link (99px a 1024).
   Sopra i 1440 non cambia niente: l'avanzo e' piu' della base e il blocco cresce uguale. */
.sf-foot__left { flex: 1 1 430px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.sf-foot__eyebrow { font-family: var(--ds-font-display); font-weight: 400; font-size: 18px; line-height: normal; letter-spacing: -0.18px; color: #fff; }
.sf-foot__cta-block { display: flex; flex-direction: column; gap: 40px; align-items: flex-start; }
.sf-foot__title { font-family: var(--ds-font-display); font-weight: 500; font-size: 48px; line-height: 1.1; letter-spacing: -0.5px; color: #fff; }
/* puo' stringersi invece di restare fisso, cosi' lo spazio si divide fra titolo e link */
.sf-foot__right { flex: 0 1 693px; display: flex; gap: 30px; align-items: flex-start; }
.sf-foot__col { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 30px; }
.sf-foot__col-title { font-family: var(--ds-font-display); font-weight: 400; font-size: 18px; line-height: normal; letter-spacing: -0.18px; color: #fff; }
.sf-foot__links { display: flex; flex-direction: column; gap: 16px; }
.sf-foot__links a { font-family: var(--ds-font-display); font-weight: 500; font-size: 16px; line-height: normal; letter-spacing: -0.16px; color: #fff; opacity: 0.7; transition: opacity .15s ease; }
.sf-foot__links a:hover { opacity: 1; }
.sf-foot__img { flex: 1 0 0; min-width: 0; height: 303px; object-fit: cover; border-radius: var(--ds-radius); }
.sf-foot__bottom { display: flex; flex-direction: column; gap: 35px; }
.sf-foot__divider { height: 1px; background: rgba(255, 255, 255, 0.2); width: 100%; }
.sf-foot__legal { display: flex; justify-content: space-between; font-family: var(--ds-font-display); font-weight: 400; font-size: 16px; line-height: normal; letter-spacing: -0.16px; color: #fff; }
.sf-foot__cta { gap: 10px; }
.sf-foot__cta img { width: 24px; height: 24px; }

/* ============================================================
   RESPONSIVE — il Figma è solo desktop 1440; mobile interpretato
   ============================================================ */
@media (max-width: 980px) {
    .sf-why, .sf-devsec, .sf-splitsec, .sf-levels, .sf-plans,
    .sf-acc, .sf-steps, .sf-ba, .sf-blog, .sf-rev, .sf-faq { padding-block: 88px; }
    /* responsive di .sf-quote / .sf-title / .sf-inner (≤980) → components.css */

    /* Header mobile */
    .sf-header { padding-inline: 24px; }
    .sf-header__nav, .sf-header__cta { display: none; }
    .sf-header__burger { display: block; }
    .sf-header__mobile {
        display: none; position: absolute; top: 84px; left: 16px; right: 16px;
        flex-direction: column; gap: 4px; padding: 16px;
        background: var(--ds-green); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-lg);
    }
    body.sf-menu-open .sf-header__mobile { display: flex; }
    .sf-header__mobile a { color: #fff; font-family: var(--ds-font-display); font-size: 18px; padding: 10px 8px; border-radius: var(--ds-radius-sm); transition: background-color .15s ease; }
    .sf-header__mobile a:hover, .sf-header__mobile a:active { background: rgba(255, 255, 255, 0.14); }
    /* pagina corrente: lo stesso fondo, ma fisso */
    .sf-header__mobile a.is-active { background: rgba(255, 255, 255, 0.14); font-weight: 500; }
    .sf-header__mobile-cta { background: #fff; color: var(--ds-ink) !important; border-radius: var(--ds-radius); text-align: center; margin-top: 8px; }
    .sf-header__mobile-cta:hover, .sf-header__mobile-cta:active { background: var(--sf-mint-line); }

    /* Hero */
    .sf-hero__card { height: 600px; }
    .sf-hero__content { left: 24px; right: 24px; bottom: 40px; }
    .sf-hero__title { font-size: 44px; letter-spacing: -1px; width: auto; }
    .sf-hero__sub { width: auto; }

    /* Why choose */
    .sf-why__head { flex-direction: column; gap: 16px; }
    .sf-why__title, .sf-why__sub { width: 100%; }
    .sf-why__grid { grid-template-columns: repeat(2, 1fr); }

    /* Split */
    .sf-split { aspect-ratio: auto; height: 560px; }

    /* Levels: immagine sopra, testo sotto.
       I due selettori ripetono quelli desktop: con la sola .sf-levels__row .sf-levels__text
       il margin-inline di 80px non veniva vinto e il testo usciva dallo schermo. */
    .sf-levels__row { grid-template-columns: 1fr; gap: 24px; }
    .sf-levels__row--end .sf-levels__img { order: -1; }
    .sf-levels__row--end .sf-levels__text,
    .sf-levels__row:not(.sf-levels__row--end) .sf-levels__text { width: 100%; justify-self: stretch; margin-inline: 0; }
    .sf-levels__rows { gap: 48px; }
    .sf-levels__img { width: 100%; height: auto; aspect-ratio: 640 / 539; }

    /* Plans 2x2 */
    .sf-plans__grid { grid-template-columns: repeat(2, 1fr); }

    /* Before/after: due per riga */
    .sf-ba__img { width: calc(50% - 10px); }

    /* Blog / Reviews 2 col */
    .sf-blog__head { flex-direction: column; gap: 16px; }
    .sf-blog__title, .sf-blog__sub { width: 100%; }
    .sf-blog__grid { grid-template-columns: repeat(2, 1fr); }
    .sf-rev__grid { grid-template-columns: repeat(2, 1fr); }

    /* Steps: verticale. Le lineette di collegamento restano, girate in verticale
       (sul telefono sparivano: Sofia le rivuole come sul desktop, 21 set 2026).
       Le due .sf-steps__line sono tarate in percentuale sulla riga orizzontale: in colonna
       le colonne hanno altezze diverse, quindi la linea la disegna ogni colonna nel
       proprio spazio vuoto (top: 100% = dentro il gap di 48px). */
    .sf-steps__row { flex-direction: column; gap: 48px; }
    .sf-steps__line { display: none; }
    .sf-steps__col:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 100%; left: 50%;
        height: 48px;
        border-left: 2px dashed var(--sf-green-line);
    }

    /* FAQ */
    .sf-faq__inner { flex-direction: column; gap: 32px; }
    .sf-faq__head { width: 100%; }
    .sf-faq__q { font-size: 20px; }

    /* Footer */
    .sf-foot__card { padding: 48px 24px 32px; }
    .sf-foot__top { flex-direction: column; gap: 48px; }
    .sf-foot__right { flex: 1 1 auto; width: 100%; }
    .sf-foot__title { font-size: 36px; }
    .sf-foot__inner { gap: 64px; }
}

@media (max-width: 560px) {
    /* HERO DELLA HOME: il blocco di testo cadeva sul viso di Sofia (richiesta Sofia, 21 set 2026).
       Tre mosse: la card prende esattamente le proporzioni della foto (nessun taglio, si vede
       tutta la figura), l'etichetta sale in cima sotto il logo e titolo+testo+bottone
       restano in basso, sul pavimento libero. Misurato a 390px: viso fino a y 385,
       titolo che parte da y 396.
       🔴 TUTTE scoped a .sf-home: `.sf-hero__*` è condivisa con `.sf-pagehero` (Chi sono,
       Concept, Allenamenti, Il tuo plan, Abbonamenti). Senza lo scope, `pages.css`
       neutralizzava per specificità solo `height` e `font-size`, mentre `margin-top: auto`,
       `top`/`bottom` e la sfumatura passavano: sul /about a 390px il badge restava in cima
       alla card e il titolo finiva 300px più in basso. */
    .sf-home .sf-hero__title { font-size: 30px; margin-top: auto; }
    .sf-home .sf-hero__card {
        /* 🔴 `width: 100%` ESPLICITA, non `auto`: con la larghezza indefinita il browser
           usa `aspect-ratio` per ricavarla dall'altezza, e quando `max-height` qui sotto
           morde si restringe anche in orizzontale. Misurato a 560x450: card 290x434
           invece di 544x434, cioè una colonna stretta con due fasce vuote ai lati.
           Con la larghezza definita il rapporto decide solo l'altezza, il tetto la taglia
           e la foto viene ritagliata da `object-fit: cover`, che è quello che si vuole. */
        width: 100%;
        height: auto;
        aspect-ratio: 2832 / 4240;
        /* 🔴 il rapporto della foto vale FINCHÉ la card sta nello schermo. La hero è
           `position: sticky; top: 0` dentro un contenitore alto tutta la pagina: quello che
           esce dalla piega non torna più in vista con nessuno scroll, e in fondo alla card
           ci stanno titolo, testo e il bottone "Inizia il tuo percorso". Senza questo tetto,
           a 560px di larghezza la card viene alta 814px e su una finestra da 700 la CTA
           finisce a y 810: irraggiungibile. Oltre il tetto si taglia la FOTO, che
           `object-fit: cover` gestisce da sola, invece del bottone. */
        max-height: calc(100vh - 2 * var(--ds-space-2));
        max-height: calc(100svh - 2 * var(--ds-space-2));
    }
    /* i 104px in cima (sotto il logo) sono una prenotazione: su una card molto bassa si
       mangiano lo spazio del contenuto e la coda (testo + CTA) sfonda il bordo, tagliata
       da `overflow: hidden`. Misurato a 560x350: sfondava di 74px. `min()` li fa cedere
       quando la card è piccola. Il titolo non si muove comunque: lo tiene giù il
       `margin-top: auto`, quindi qui cambia solo dove sta l'etichetta. */
    .sf-home .sf-hero__content { top: min(104px, 18%); bottom: 12px; gap: 4px; }
    .sf-home .sf-hero__sub { gap: 12px; }
    /* la sfumatura scura era solo in cima: ora il testo sta in fondo e serve anche lì.
       Misurata sui pixel dei glifi (due screenshot, con e senza testo, differenza per
       trovare le lettere e luminanza dello sfondo sotto): i leggings bianchi di Sofia
       passano proprio sotto il titolo e col 50% il contrasto crollava a 1,6:1 su un
       1% dei pixel. Alzata e allungata fino a metà card. */
    .sf-home .sf-hero__scrim {
        background:
            linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 8%, rgba(0, 0, 0, 0) 32%),
            linear-gradient(to top,
                rgba(0, 0, 0, 0.78) 2%,
                rgba(0, 0, 0, 0.58) 26%,
                rgba(0, 0, 0, 0) 52%);
    }
    .sf-why__grid { grid-template-columns: 1fr; }
    .sf-plans__grid { grid-template-columns: 1fr; }
    .sf-blog__grid, .sf-rev__grid { grid-template-columns: 1fr; }
    /* card blog senza bordo: impilate servono più aria delle recensioni, che il bordo lo hanno */
    .sf-blog__grid { gap: 56px; }
    .sf-rev__grid { gap: 24px; }
    /* sotto i 560 restano due per riga: sono 4:5, a tutta larghezza sarebbero sette
       foto altissime da scrollare una per una */
    .sf-ba__img { width: calc(50% - 8px); }
    .sf-ba__gallery { gap: 16px; }
    .sf-acc__circle { width: 150px; height: 150px; }
    /* i due menu restano affiancati, la foto va a capo a tutta larghezza */
    /* affiancate, le due righe legali andavano a capo entrambe a metà parola */
    .sf-foot__legal { flex-direction: column; gap: 8px; }
    .sf-foot__right { gap: 20px; flex-wrap: wrap; }
    .sf-foot__col { flex: 1 0 40%; }
    /* la foto è verticale: in una fascia panoramica le tagliava la testa, ma a tutto
       formato si mangiava mezzo schermo → quadrata, con l'inquadratura alzata sul viso */
    .sf-foot__img { flex: 1 0 100%; height: auto; aspect-ratio: 1 / 1; object-position: 50% 38%; }
    .sf-devsec__sub { font-size: 16px; }
    .sf-levels__title { font-size: 32px; }
}

/* Split: sul telefono la diagonale d'angolo non regge. Le due schede si sovrappongono
   (crescono in altezza mentre la fascia resta di 560px) e soprattutto le foto, che sono
   panoramiche e coi soggetti negli angoli, dentro una fascia verticale perdono i due terzi
   dell'inquadratura — restano pavimento e vetrate vuote, con la scheda sopra il soggetto.
   Qui diventa la sequenza foto intera → testo, due volte: si vede tutta la foto e il
   testo si legge su fondo pieno. La diagonale resta sopra i 700px. */
@media (max-width: 700px) {
    .sf-split { aspect-ratio: auto; height: auto; display: flex; flex-direction: column; }
    /* ogni foto è composta per il proprio triangolo e ha la metà opposta sfumata (quella
       che sul desktop finisce sotto l'altra): a tutta larghezza si vedrebbe il vuoto.
       Il riquadro ne inquadra circa i due terzi — casa da sinistra, palestra da destra. */
    .sf-split__pane { position: relative; inset: auto; clip-path: none; aspect-ratio: 1.18; }
    .sf-split__pane--home { order: 1; }
    .sf-split__pane--gym { order: 3; }
    .sf-split__pane--home img { object-position: left center; }
    .sf-split__pane--gym img { object-position: right center; }
    .sf-split__line { display: none; }
    .sf-split__label {
        position: static;
        width: auto;
        gap: 12px;
        padding: 28px 24px;
        border-radius: 0;
        background: var(--ds-green);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .sf-split__label--home { order: 2; }
    .sf-split__label--gym { order: 4; }
    .sf-split__label-title { font-size: 28px; letter-spacing: -1px; }
    .sf-split__label-text { font-size: 18px; }
}