/* ===========================================================================
   Ottica Vediamoci — v2

   Impianto ricalcato su lelunetiermilano.com: fondo bianco, nero pieno,
   una sola famiglia neutra (Helvetica/Arial), titoli di sezione in maiuscolo
   di peso normale, angoli vivi, niente ombre, niente colore d'accento.
   La pagina è una successione di blocchi editoriali per brand, e le
   fotografie portano tutto il peso visivo.

   Differenza voluta rispetto al riferimento: le fotografie restano a colori.

   La v1 (fondo scuro, Gloock in display, chiaro/scuro automatico) è
   conservata in sito-v1-scuro.css.
   =========================================================================== */

/* --- Token ---------------------------------------------------------------- */

:root {
    color-scheme: light;

    --nero:      #000;
    --bianco:    #fff;
    --grigio:    #6e6e6e;   /* testo secondario — 5.4:1 su bianco */
    --grigio-2:  #9a9a9a;   /* solo decorativo, mai testo essenziale */
    --bordo:     #e3e3e3;
    --campo:     #f6f6f6;   /* fondo tessere prodotto e input */
    --saldo:     #8c1d18;   /* rosso profondo, unico colore del sistema */

    --font: Helvetica, "Helvetica Neue", Arial, "Liberation Sans", sans-serif;

    /* Scala: il riferimento usa 14px di base e 27px per i titoli di sezione */
    --t-mini:   0.6875rem;                                  /* 11px  etichette */
    --t-sm:     0.75rem;                                    /* 12px  bottoni   */
    --t-base:   0.875rem;                                   /* 14px  interfaccia */
    --t-testo:  0.9375rem;                                  /* 15px  paragrafi */
    --t-titolo: clamp(1.35rem, 1.05rem + 1.1vw, 1.71rem);   /* ~27px sezioni   */
    --t-grande: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);      /* pagine e hero   */

    --gutter:  clamp(1rem, 3.2vw, 2.5rem);
    --sezione: clamp(3rem, 6vw, 5.5rem);
    --contenitore: 1400px;

    /* Movimento: sobrio, coerente col riferimento */
    --ease:   cubic-bezier(0.22, 1, 0.36, 1);
    --t-fast: 150ms;
    --t-mid:  380ms;
    --t-slow: 800ms;
}

/* --- Reset ---------------------------------------------------------------- */

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

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

body {
    margin: 0;
    background: var(--bianco);
    color: var(--nero);
    font-family: var(--font);
    font-size: var(--t-base);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--nero); outline-offset: 2px; }
::selection { background: var(--nero); color: var(--bianco); }

/* --- Impalcatura ---------------------------------------------------------- */

.contenitore {
    width: 100%;
    max-width: var(--contenitore);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.sezione { padding-block: var(--sezione); }
.sezione--chiara { background: var(--campo); }

/* Nel riferimento i titoli di sezione sono centrati, maiuscoli, peso normale */
.sezione__titolo {
    font-size: var(--t-titolo);
    text-transform: uppercase;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0.01em;
}

.sezione__testata {
    display: grid;
    justify-items: center;
    gap: 1.25rem;
    text-align: center;
    margin-bottom: clamp(1.75rem, 3.5vw, 3rem);
}

.etichetta {
    font-size: var(--t-mini);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--grigio);
}

.salta { position: absolute; left: -9999px; }

.salta:focus {
    left: var(--gutter);
    top: 0.75rem;
    z-index: 200;
    background: var(--nero);
    color: var(--bianco);
    padding: 0.7rem 1.2rem;
}

/* --- Intestazione ---------------------------------------------------------- */

.testata {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bianco);
    border-bottom: 1px solid var(--bordo);
}

.testata__interno {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    min-height: 68px;
}

/* Marchio centrato, come nel riferimento */
.marchio {
    grid-column: 2;
    justify-self: center;
    text-align: center;
    font-size: 1.45rem;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.marchio span {
    display: block;
    font-size: var(--t-mini);
    letter-spacing: 0.34em;
    text-transform: uppercase;
    margin-top: 0.4em;
    padding-left: 0.34em;
    color: var(--grigio);
}

.menu {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: clamp(0.9rem, 1.8vw, 1.7rem);
    font-size: var(--t-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.menu a { padding-block: 0.3rem; border-bottom: 1px solid transparent; }
.menu a:hover, .menu a[aria-current="page"] { border-bottom-color: var(--nero); }

.testata__azioni {
    grid-column: 3;
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 1rem;
}

.stato {
    font-size: var(--t-mini);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--grigio);
    white-space: nowrap;
}

.stato--aperto { color: var(--nero); }

.apri-menu, .bottone-menu { display: none; }

/* --- Bottoni: rettangoli, maiuscolo, filetto nero -------------------------- */

.bottone {
    --bg: transparent;
    --fg: var(--nero);
    --bd: var(--nero);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.6rem;
    border: 1px solid var(--bd);
    border-radius: 0;
    background: var(--bg);
    color: var(--fg);
    font: inherit;
    font-size: var(--t-sm);
    text-transform: uppercase;
    letter-spacing: 0.11em;
    text-align: center;
    cursor: pointer;
    transition: background var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease;
}

.bottone:hover { --bg: var(--nero); --fg: var(--bianco); }

.bottone--pieno { --bg: var(--nero); --fg: var(--bianco); }
.bottone--pieno:hover { --bg: var(--bianco); --fg: var(--nero); }

.bottone--fantasma { --bd: var(--bordo); }
.bottone--fantasma:hover { --bd: var(--nero); }

.bottone--wa { --bg: var(--nero); --fg: var(--bianco); }
.bottone--wa:hover { --bg: var(--bianco); --fg: var(--nero); }

.bottone--grande { padding: 0.95rem 2.2rem; }
.bottone--icona  { padding: 0.75rem 0.9rem; }

.riga-azioni { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* --- Hero: due porte -------------------------------------------------------- */

.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--bordo);
}

.porta {
    position: relative;
    display: grid;
    place-items: center;
    min-height: clamp(420px, 76vh, 820px);
    overflow: hidden;
    background: var(--campo);
    color: var(--bianco);
    isolation: isolate;
}

/* L'etichetta sta al centro del riquadro: l'inquadratura va alzata perché il
   testo cada sulle spalle e non sul viso. */
.porta__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 82%;
    z-index: -2;
    transform: scale(1.01);
    transition: transform var(--t-slow) var(--ease);
}

.porta:hover .porta__foto, .porta:focus-visible .porta__foto { transform: scale(1.05); }

/* velo leggero: serve solo a tenere leggibile l'etichetta centrale */
.porta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, rgba(0,0,0,0.10), rgba(0,0,0,0.34));
}

/* Etichetta centrata sopra la foto, come nel riferimento */
.porta__testo {
    display: grid;
    justify-items: center;
    gap: 0.9rem;
    text-align: center;
    padding: var(--gutter);
}

.porta__titolo {
    font-size: var(--t-grande);
    text-transform: uppercase;
    line-height: 1.05;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 24px rgba(0,0,0,0.35);
}

.porta__freccia {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--t-sm);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    border-bottom: 1px solid currentColor;
    padding-bottom: 0.3rem;
}

.porta__freccia svg { transition: transform var(--t-mid) var(--ease); }
.porta:hover .porta__freccia svg { transform: translateX(5px); }

.porta .etichetta { color: rgba(255,255,255,0.82); }

/* Occhiello sopra l'hero */
.hero-intro {
    padding-block: clamp(2rem, 4.5vw, 3.5rem) clamp(1.25rem, 2.5vw, 2rem);
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 0.9rem;
}

.hero-intro h1 {
    font-size: var(--t-titolo);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    max-width: 22ch;
}

.hero-intro p { color: var(--grigio); font-size: var(--t-testo); max-width: 60ch; }

/* --- Banner brand scorrevole ------------------------------------------------ */

.banner-brand {
    overflow: hidden;
    padding-block: clamp(1.5rem, 2.6vw, 2.2rem);
    border-block: 1px solid var(--bordo);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.banner-brand__pista {
    display: flex;
    width: max-content;
    animation: scorri calc(var(--n, 7) * 4.5s) linear infinite;
}

.banner-brand:hover .banner-brand__pista,
.banner-brand:focus-within .banner-brand__pista { animation-play-state: paused; }

.banner-brand__lista {
    display: flex;
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5.5rem);
    padding-right: clamp(2.5rem, 6vw, 5.5rem);
}

.banner-brand__lista a { display: grid; place-items: center; height: 34px; }

.banner-brand__nome {
    font-size: var(--t-base);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--grigio);
    transition: color var(--t-mid) ease;
}

.banner-brand__lista a:hover .banner-brand__nome,
.banner-brand__lista a:focus-visible .banner-brand__nome { color: var(--nero); }

@keyframes scorri {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* --- Blocco editoriale per brand -------------------------------------------- */

.blocco-brand { padding-block: clamp(2.5rem, 5vw, 4.5rem); border-top: 1px solid var(--bordo); }

.blocco-brand__intro {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 1rem;
    max-width: 62ch;
    margin-inline: auto;
    margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

.blocco-brand__logo { max-height: 38px; width: auto; filter: invert(1); opacity: 0.85; }

.blocco-brand__nome {
    font-size: var(--t-titolo);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.15;
}

.blocco-brand__testo { color: var(--grigio); font-size: var(--t-testo); }

/* --- Griglia e scheda prodotto ---------------------------------------------- */

.griglia-prodotti {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
    gap: clamp(1.25rem, 2.4vw, 2.25rem) clamp(1rem, 1.8vw, 1.6rem);
}

.scheda { display: flex; flex-direction: column; }
.scheda--esaurito { opacity: 0.55; }

/* Riquadro foto sempre quadrato: formato unico del sito */
.scheda__foto {
    position: relative;
    display: block;
    aspect-ratio: 1;
    background: var(--campo);
    overflow: hidden;
}

.scheda__foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 9%;
    mix-blend-mode: multiply;
    transition: transform var(--t-mid) var(--ease);
}

.scheda__foto:hover img { transform: scale(1.04); }

.badge {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    font-size: var(--t-mini);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.3rem 0.6rem;
}

.badge--saldo    { background: var(--saldo); color: var(--bianco); }
.badge--esaurito { background: var(--nero); color: var(--bianco); top: auto; bottom: 0; }

.scheda__testo {
    flex: 1;
    display: grid;
    align-content: start;
    justify-items: center;
    text-align: center;
    gap: 0.2rem;
    padding: 1rem 0.5rem 0.75rem;
}

.scheda__brand {
    font-size: var(--t-mini);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--grigio);
}

.scheda__modello { font-size: var(--t-base); text-transform: uppercase; letter-spacing: 0.05em; }
.scheda__variante { font-size: var(--t-sm); color: var(--grigio); }

.scheda__prezzo { margin-top: 0.45rem; font-size: var(--t-base); font-variant-numeric: tabular-nums; }
.scheda__prezzo s { color: var(--grigio-2); margin-right: 0.45rem; }
.scheda__prezzo .in-saldo { color: var(--saldo); }

.scheda__azioni { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem; padding-top: 0.75rem; }
.scheda__azioni .bottone { padding: 0.6rem 0.8rem; font-size: var(--t-mini); letter-spacing: 0.09em; }

/* --- Selettore categoria ----------------------------------------------------- */

.selettore {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    justify-content: center;
    margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
    font-size: var(--t-sm);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.selettore a { color: var(--grigio); padding-bottom: 0.35rem; border-bottom: 1px solid transparent; }
.selettore a:hover { color: var(--nero); }
.selettore a.attivo { color: var(--nero); border-bottom-color: var(--nero); }
.selettore span { color: var(--grigio-2); }

/* --- Filtri ------------------------------------------------------------------- */

.filtri {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem 1.25rem;
    padding: 1.1rem 1.25rem;
    background: var(--campo);
    margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.filtri__campo { display: grid; gap: 0.3rem; }

.filtri label {
    font-size: var(--t-mini);
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--grigio);
}

.filtri select, .filtri input[type="number"] {
    padding: 0.5rem 0.65rem;
    background: var(--bianco);
    border: 1px solid var(--bordo);
    border-radius: 0;
    color: var(--nero);
    font: inherit;
    font-size: var(--t-sm);
}

.intervallo { display: flex; align-items: center; gap: 0.4rem; }
.intervallo input { width: 5.5rem; }

.filtri__check {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--t-sm);
    text-transform: none;
    letter-spacing: 0;
    color: var(--nero);
    padding-bottom: 0.55rem;
}

.filtri__azioni { display: flex; align-items: center; gap: 1rem; margin-left: auto; }

.link-azzera {
    font-size: var(--t-sm);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--grigio);
    border-bottom: 1px solid var(--bordo);
}

.vuoto {
    padding: clamp(3rem, 7vw, 5rem) var(--gutter);
    text-align: center;
    color: var(--grigio);
    background: var(--campo);
}

.vuoto a { border-bottom: 1px solid currentColor; }

/* --- Pagine interne ------------------------------------------------------------ */

.testata-pagina {
    padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 2.5vw, 2rem);
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 0.75rem;
}

.testata-pagina h1 {
    font-size: var(--t-grande);
    text-transform: uppercase;
    line-height: 1.05;
    letter-spacing: 0.02em;
}

.testata-pagina p { color: var(--grigio); font-size: var(--t-testo); max-width: 62ch; }

.briciole {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    font-size: var(--t-mini);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--grigio);
}

.briciole a:hover { color: var(--nero); }
.conteggio { font-size: var(--t-sm); color: var(--grigio); letter-spacing: 0.08em; text-transform: uppercase; }

/* --- Griglia brand -------------------------------------------------------------- */

.griglia-brand {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: 1px;
    background: var(--bordo);
    border: 1px solid var(--bordo);
}

.griglia-brand a {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.85rem;
    min-height: 180px;
    padding: 1.75rem 1.25rem;
    background: var(--bianco);
    text-align: center;
    transition: background var(--t-fast) ease;
}

.griglia-brand a:hover { background: var(--campo); }
.griglia-brand img { max-height: 44px; width: auto; object-fit: contain; filter: invert(1); opacity: 0.8; }
.griglia-brand a:hover img { opacity: 1; }
.griglia-brand__nome { font-size: var(--t-base); text-transform: uppercase; letter-spacing: 0.1em; }
.griglia-brand__nome-testo { font-size: var(--t-base); text-transform: uppercase; letter-spacing: 0.08em; }
.griglia-brand__conteggio { font-size: var(--t-mini); color: var(--grigio); letter-spacing: 0.06em; }

/* --- Due categorie -------------------------------------------------------------- */

.due-categorie { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1px; background: var(--bordo); }

.categoria {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.4rem;
    min-height: 420px;
    padding: var(--gutter);
    overflow: hidden;
    isolation: isolate;
    background: var(--campo);
    color: var(--bianco);
    text-align: center;
}

.categoria img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transform: scale(1.01);
    transition: transform var(--t-slow) var(--ease);
}

.categoria::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, rgba(0,0,0,0.10), rgba(0,0,0,0.34));
}

.categoria:hover img { transform: scale(1.05); }

.categoria__etichetta {
    font-size: var(--t-grande);
    text-transform: uppercase;
    line-height: 1.05;
    text-shadow: 0 1px 24px rgba(0,0,0,0.35);
}

.categoria__conteggio { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.85); }

/* --- Dettaglio prodotto ----------------------------------------------------------- */

.dettaglio {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 4.5rem);
    align-items: start;
    padding-block: clamp(1.5rem, 3.5vw, 3rem);
}

.galleria__principale {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    padding: clamp(1.5rem, 4vw, 3.5rem);
    background: var(--campo);
    mix-blend-mode: multiply;
}

.galleria__miniature { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }

.galleria__miniature button {
    width: 72px;
    aspect-ratio: 1;
    padding: 0.35rem;
    background: var(--campo);
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
}

.galleria__miniature button.attiva { border-color: var(--nero); }
.galleria__miniature img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

.dettaglio__info { display: grid; gap: 0.4rem; align-content: start; }
.dettaglio__brand { font-size: var(--t-mini); text-transform: uppercase; letter-spacing: 0.18em; color: var(--grigio); }
.dettaglio__info h1 { font-size: var(--t-titolo); text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.15; }
.dettaglio__variante { color: var(--grigio); font-size: var(--t-testo); }

.dettaglio__prezzo {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
}

.dettaglio__prezzo s { font-size: var(--t-testo); color: var(--grigio-2); }
.dettaglio__prezzo .in-saldo { color: var(--saldo); }
.dettaglio__prezzo .badge { position: static; }

.dettaglio__descrizione { color: var(--grigio); font-size: var(--t-testo); margin-top: 0.9rem; max-width: 54ch; }

.specifiche {
    display: grid;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-block: 1.25rem;
    border-block: 1px solid var(--bordo);
    font-size: var(--t-sm);
}

.specifiche > div { display: flex; gap: 1rem; }
.specifiche dt { min-width: 9rem; color: var(--grigio); text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--t-mini); }
.specifiche dd { margin: 0; }

.dettaglio__azioni { display: grid; gap: 0.5rem; margin-top: 1.75rem; }
.nota { font-size: var(--t-sm); color: var(--grigio); margin-top: 1.25rem; }
.nota a { border-bottom: 1px solid var(--bordo); }

/* --- Contatti e visita ------------------------------------------------------------ */

.due-colonne {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
    gap: clamp(1.75rem, 4vw, 4rem);
    align-items: start;
}

.riquadro { padding: clamp(1.4rem, 3vw, 2.2rem); background: var(--campo); display: grid; gap: 1rem; align-content: start; }
.riquadro h2 { font-size: var(--t-base); text-transform: uppercase; letter-spacing: 0.12em; }

.orari { font-size: var(--t-sm); width: 100%; }
.orari--compatti li { display: flex; justify-content: space-between; gap: 1.5rem; padding-block: 0.22rem; color: var(--grigio); }
.orari--completi { border-collapse: collapse; }
.orari--completi th, .orari--completi td { text-align: left; padding: 0.55rem 0; border-bottom: 1px solid var(--bordo); font-weight: 400; }
.orari--completi td { text-align: right; color: var(--grigio); font-variant-numeric: tabular-nums; }
.orari--completi tr.oggi th, .orari--completi tr.oggi td { color: var(--nero); }
.orari .chiuso { color: var(--grigio-2); }

.lista-dati li {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 0.6rem;
    border-bottom: 1px solid var(--bordo);
    font-size: var(--t-sm);
}

.lista-dati span { color: var(--grigio); text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--t-mini); }
.lista-dati a:hover { border-bottom: 1px solid var(--nero); }

.mappa { width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--bordo); filter: grayscale(1); }

.passi { display: grid; gap: 1.4rem; margin-top: 2rem; counter-reset: passo; }

.passi li {
    counter-increment: passo;
    display: grid;
    gap: 0.15rem;
    padding-left: 2.75rem;
    position: relative;
    color: var(--grigio);
    font-size: var(--t-testo);
}

.passi li::before {
    content: counter(passo);
    position: absolute;
    left: 0;
    top: 0.1rem;
    width: 1.8rem;
    height: 1.8rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--nero);
    color: var(--nero);
    font-size: var(--t-mini);
}

.passi strong { color: var(--nero); font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; }

/* --- Paginazione -------------------------------------------------------------------- */

.paginazione {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    margin-top: clamp(2.5rem, 5vw, 4rem);
    font-size: var(--t-sm);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--grigio);
}

.paginazione a { color: var(--nero); border-bottom: 1px solid var(--bordo); }

/* --- Footer ---------------------------------------------------------------------------- */

.pie {
    border-top: 1px solid var(--bordo);
    padding-block: clamp(2.5rem, 5vw, 4rem) 1.75rem;
    font-size: var(--t-sm);
}

.pie__griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 2.5rem; }

.pie__titolo {
    font-size: var(--t-mini);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-bottom: 1rem;
}

.pie address { font-style: normal; line-height: 1.9; color: var(--grigio); }
.pie a:hover { color: var(--nero); border-bottom: 1px solid var(--bordo); }
.pie__lista { display: grid; gap: 0.4rem; color: var(--grigio); }

.pie__legale {
    margin-top: clamp(2.5rem, 4vw, 3.5rem);
    padding-top: 1.25rem;
    border-top: 1px solid var(--bordo);
    font-size: var(--t-mini);
    line-height: 1.7;
    color: var(--grigio-2);
}

.pie__legale p { margin-bottom: 0.2rem; }

/* --- Movimento ------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
    /* La v2 è volutamente sempre chiara, come il riferimento: `color-scheme: light`
       in cima impedisce al browser di forzare un tema scuro sui controlli. */
}

@media (prefers-reduced-motion: no-preference) {
    .rivela {
        opacity: 0;
        transform: translateY(10px);
        animation: entra var(--t-slow) var(--ease) forwards;
        animation-delay: var(--ritardo, 0ms);
    }

    @keyframes entra { to { opacity: 1; transform: none; } }

    .porta { animation: apri var(--t-slow) var(--ease) backwards; }
    .porta:nth-child(2) { animation-delay: 80ms; }

    @keyframes apri { from { opacity: 0; } to { opacity: 1; } }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .banner-brand { overflow-x: auto; }
    .banner-brand__pista { animation: none; }
}

/* --- Mobile ------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .dettaglio { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
    .testata__interno { grid-template-columns: auto 1fr auto; min-height: 58px; }
    .marchio { font-size: 1.15rem; }

    .bottone-menu {
        grid-column: 1;
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        margin-left: -0.5rem;
        border: 0;
        background: none;
        color: inherit;
        cursor: pointer;
    }

    .bottone-menu span,
    .bottone-menu span::before,
    .bottone-menu span::after {
        content: "";
        display: block;
        width: 18px;
        height: 1px;
        background: currentColor;
        position: relative;
    }

    .bottone-menu span::before { position: absolute; top: -5px; }
    .bottone-menu span::after  { position: absolute; top: 5px; }

    .menu {
        grid-column: 1 / -1;
        grid-row: 2;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-bottom: 0.5rem;
    }

    .menu a { padding-block: 0.75rem; border-bottom: 1px solid var(--bordo); }
    .apri-menu:checked ~ .menu { display: flex; }

    .testata__azioni .stato { display: none; }

    /* il numero deve stare su una riga sola nello spazio che resta */
    .testata__azioni .bottone {
        padding: 0.5rem 0.7rem;
        font-size: 0.7rem;
        letter-spacing: 0.04em;
        white-space: nowrap;
    }

    .hero { grid-template-columns: 1fr; }

    /* In verticale il ritaglio è più stretto e l'etichetta centrata finirebbe
       sul viso: scende in basso, sopra un velo più deciso. */
    .porta {
        min-height: 68vh;
        place-items: end stretch;
    }

    .porta::after { background: linear-gradient(to top, rgba(0,0,0,0.62), transparent 55%); }
    .porta__testo { justify-items: start; text-align: left; padding-bottom: clamp(1.5rem, 5vw, 2.5rem); }
    .porta__titolo { font-size: clamp(1.7rem, 7.5vw, 2.4rem); }

    .scheda__azioni { grid-template-columns: 1fr; }
    .filtri__azioni { margin-left: 0; width: 100%; }
}