/* ============================================================
   DAVID FAVALE — BARBIERE, NUSCO (AV)
   Mondo visivo: CALMA
   ------------------------------------------------------------
   Direzione fissata dal committente sul riferimento Stillmind
   (SlabPixel). Ne prendiamo la lingua, non il file: fotografia
   calda a tutta pagina con angoli morbidi, titoli grandi in un
   sans leggero e non maiuscolo, bottoni a pillola, fondo crema.
   Il verde del riferimento e' sostituito dal marrone gia'
   fissato dal committente.
   Carattere unico: Hanken Grotesk 300-600.
   ============================================================ */

:root {
    --crema: #f6f1e7;
    --crema-2: #efe8da;
    --carta: #ffffff;
    --bruno: #3d2a1a;
    --bruno-2: #6b4e35;
    /* Il grigio caldo dei testi secondari (durate, etichette, stato).
       Era #8a7a68 e sul crema faceva 3.7:1, sotto lo standard AA.
       #75644f e' il piu' chiaro che tiene 4.5:1 su crema, crema-2 e
       carta insieme: PRODUCT.md chiede contrasto alto perche' il
       pubblico comprende molti over 50. */
    --grigio: #75644f;
    /* Solo per elementi disattivati e decorativi: non porta mai testo
       che vada letto. */
    --grigio-2: #a2917c;
    --bordo: #e2d8c7;
    --bordo-forte: #cfc1aa;

    /* Alias usati in tutta l'applicazione */
    --primary: var(--bruno);
    --primary-light: var(--bruno-2);
    --accent: var(--bruno);
    --accent-hover: var(--bruno-2);
    /* Colori di stato: solo messaggi, badge e bottoni di conferma o
       annullamento. Mai decorativi. Ognuno ha la sua tinta scura per lo
       stato "hover" e, dove serve, il fondo e il bordo dell'avviso.
       Prima erano valori letterali sparsi nel foglio. */
    --success: #3f6b4a;
    --success-hover: #335840;
    --success-bg: #edf3ed;
    --success-fg: #315539;
    --success-bordo: #d2e2d5;
    /* Il verde "aperto" sul fondo marrone: quello pieno non si staccava */
    --success-su-scuro: #8fc79f;
    --success-su-scuro-alone: rgba(143, 199, 159, 0.22);
    --warning: #8a6414;
    --warning-hover: #715210;
    --danger: #9d4436;
    --danger-hover: #85392c;
    --danger-bg: #f9eeeb;
    --danger-fg: #833527;
    --danger-bordo: #ecd3cb;
    --text: var(--bruno-2);
    --text-light: var(--bruno-2);
    --text-muted: var(--grigio);
    --bg: var(--crema);
    --bg-light: var(--crema-2);
    --bg-dark: var(--bruno);
    --border: var(--bordo);
    --border-strong: var(--bordo-forte);
    --smalto: var(--bruno);
    --inchiostro-2: var(--bruno-2);
    --inchiostro-3: var(--grigio);
    --oro: var(--bruno-2);
    --bottega: var(--crema);
    --bottega-2: var(--crema-2);
    --dipinto: #ffffff;

    --shadow: 0 2px 6px rgba(61, 42, 26, 0.04), 0 18px 40px -30px rgba(61, 42, 26, 0.35);
    --shadow-lg: 0 34px 70px -44px rgba(61, 42, 26, 0.45);
    /* Solo curve. --radius-xs veste il contorno del fuoco da tastiera,
       --radius-sm i quadratini del calendario e le miniature. */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 22px;
    --radius-pill: 999px;

    /* Il crema del pannello di amministrazione, appena piu' chiaro */
    --crema-admin: #fbf9f4;

    /* ------------------------------------------------------------------
       Scala tipografica. Prima il foglio usava 25 corpi diversi, con sei
       valori (0.90 0.92 0.95 0.96 0.98 1.00) dentro una fascia del 10%:
       differenze invisibili all'occhio e impossibili da mantenere.
       Otto passi, rapporto costante ~1.12. I titoli fluidi restano in
       clamp() perche' sono ruoli a se', documentati in DESIGN.md.
       ------------------------------------------------------------------ */
    --fs-micro: 0.74rem;
    --fs-xs:    0.82rem;
    --fs-sm:    0.9rem;
    --fs-base:  1rem;
    --fs-md:    1.12rem;
    --fs-lg:    1.3rem;
    --fs-xl:    1.5rem;
    --fs-2xl:   1.7rem;

    --font: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
    --font-body: var(--font);
    --font-display: var(--font);
    --font-ui: var(--font);
    --font-mono: var(--font);

    --transition: 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.62;
    color: var(--bruno-2);
    background: var(--crema);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

a { color: var(--bruno); text-decoration: none; transition: color var(--transition), opacity var(--transition); }
a:hover { color: var(--bruno-2); }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--bruno); outline-offset: 3px; border-radius: var(--radius-xs); }
::selection { background: var(--bruno); color: #fff; }

/* Salta il menu: invisibile finche' non riceve il fuoco da tastiera */
.salta-al-contenuto {
    position: absolute; left: 1rem; top: -100px; z-index: 2000;
    background: var(--bruno); color: #fff;
    padding: 0.8rem 1.4rem; border-radius: var(--radius-pill);
    font-size: var(--fs-base); font-weight: 500;
    transition: top var(--transition);
}
.salta-al-contenuto:focus { top: 1rem; color: #fff; }
main:focus { outline: none; }

.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 2rem; }
.container-sm { max-width: 700px; }

/* ---------- Titoli: leggeri, non maiuscoli, molto crenati ---------- */
h1, h2, h3, h4 {
    font-family: var(--font);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -0.032em;
    color: var(--bruno);
}
h1 { font-size: clamp(2.6rem, 6.2vw, 5rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3rem); }
h3 { font-size: var(--fs-lg); font-weight: 500; letter-spacing: -0.018em; }

/* Gli occhielli sopra i titoli sono stati tolti: ripetevano quello che
   il titolo dice gia' (e in home ripetevano il nome della navigazione).
   Il titolo si regge da solo. */

.section-title {
    font-weight: 300;
    font-size: clamp(2rem, 4.2vw, 3rem);
    letter-spacing: -0.032em;
    color: var(--bruno);
    margin-bottom: 2.2rem;
    max-width: 22ch;
}
.section-title.is-centered { text-align: center; margin-left: auto; margin-right: auto; }

.text-center { text-align: center; }
.text-muted { color: var(--grigio); }
.lead { font-size: var(--fs-md); color: var(--bruno-2); max-width: 62ch; }

/* ---------- Bottoni: pillole ----------
   min-height 46px non e' un vezzo: il pubblico comprende molti over 50
   e si prenota da telefono, quindi nessun bottone scende sotto i 44px. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0.92rem 1.9rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-family: var(--font);
    font-size: var(--fs-base);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    text-align: center;
    line-height: 1.35;
}
.btn-primary { background: var(--bruno); color: #fff; border-color: var(--bruno); }
.btn-primary:hover { background: var(--bruno-2); border-color: var(--bruno-2); color: #fff; }
/* Il bordo chiaro spariva sul crema: serve un contorno che si veda */
.btn-outline { background: transparent; color: var(--bruno); border-color: rgba(61, 42, 26, 0.28); }
.btn-outline:hover { border-color: var(--bruno); background: var(--bruno); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { background: var(--danger-hover); color: #fff; }
.btn-success { background: var(--success); color: #fff; border-color: var(--success); }
.btn-success:hover { background: var(--success-hover); color: #fff; }
.btn-warning { background: var(--warning); color: #fff; border-color: var(--warning); }
.btn-warning:hover { background: var(--warning-hover); color: #fff; }
.btn-accent { background: #fff; color: var(--bruno); border-color: #fff; }
.btn-accent:hover { background: var(--crema-2); color: var(--bruno); }
.btn-lg { padding: 1.02rem 2.1rem; font-size: var(--fs-md); }
.btn-sm { padding: 0.68rem 1.4rem; font-size: var(--fs-sm); min-height: 44px; }
.btn-block { display: flex; width: 100%; }

/* ------------------------------------------------------------------
   Su fondo scuro i bottoni si invertono.
   Senza questa regola .btn-primary e' marrone su marrone e .btn-outline
   ha il testo marrone su marrone: spariscono tutti e due.
   Vale per la fotografia, le sezioni scure e il footer.
   ------------------------------------------------------------------ */
.hero .btn-primary,
.section-dark .btn-primary,
.section-dynamic-bg .btn-primary,
.footer .btn-primary {
    background: #fff; color: var(--bruno); border-color: #fff;
}
.hero .btn-primary:hover,
.section-dark .btn-primary:hover,
.section-dynamic-bg .btn-primary:hover,
.footer .btn-primary:hover {
    background: var(--crema-2); color: var(--bruno); border-color: var(--crema-2);
}

.section-dark .btn-outline,
.section-dynamic-bg .btn-outline,
.footer .btn-outline {
    color: #fff; border-color: rgba(255, 255, 255, 0.45); background: transparent;
}
.section-dark .btn-outline:hover,
.section-dynamic-bg .btn-outline:hover,
.footer .btn-outline:hover {
    color: var(--bruno); background: #fff; border-color: #fff;
}

/* Nella fotografia il secondo bottone e' un collegamento, non una pillola */
.hero .btn-outline {
    color: #fff; border-color: transparent; background: transparent;
    padding-left: 0.4rem; padding-right: 0.4rem;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
    text-decoration-color: rgba(255, 255, 255, 0.45);
}
.hero .btn-outline:hover { background: transparent; color: #fff; text-decoration-color: #fff; }

/* Il fuoco da tastiera deve restare visibile anche sullo scuro */
.hero .btn:focus-visible,
.section-dark .btn:focus-visible,
.section-dynamic-bg .btn:focus-visible,
.footer .btn:focus-visible,
.navbar.is-sopra-foto .navbar-menu li a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* ---------- Navbar ---------- */
.navbar {
    background: var(--crema);
    border-bottom: 1px solid var(--bordo);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0.9rem 0;
}
.navbar .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.navbar-brand {
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--bruno);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
/* Il salone non ha un logo: il nome e' composto tipograficamente.
   Il segno accanto e' un anello con il pieno dentro — la stessa lingua
   dei cerchi e del pallino di stato. Prima era un anello vuoto e
   sottile, che si leggeva come un'immagine non caricata. */
.brand-icon {
    width: 15px; height: 15px; border-radius: 50%;
    border: 1.5px solid currentColor;
    font-size: 0; flex-shrink: 0; position: relative;
    transform: translateY(-0.5px);
}
.brand-icon::after {
    content: ''; position: absolute; inset: 3px;
    border-radius: 50%; background: currentColor;
}
.navbar-toggle { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 0.5rem; }
.navbar-toggle span { display: block; width: 24px; height: 1.5px; background: var(--bruno); transition: var(--transition); }
.navbar-menu { list-style: none; display: none; width: 100%; flex-direction: column; padding-top: 1rem; gap: 0; }
.navbar-menu.open { display: flex; }
.navbar-menu li a { display: block; padding: 0.75rem 0; color: var(--bruno-2); font-size: var(--fs-base); font-weight: 400; }
.navbar-menu li a:hover { color: var(--bruno); }

/* I bottoni dentro il menu vanno riaffermati: `.navbar-menu li a` ha piu'
   specificita' di `.btn-primary` e gli spegneva il colore del testo,
   lasciando "Prenota" marrone su marrone. */
.navbar-menu li a.btn { padding: 0.62rem 1.4rem; font-weight: 500; }
.navbar-menu li a.btn-primary { background: var(--bruno); color: #fff; border-color: var(--bruno); }
.navbar-menu li a.btn-primary:hover { background: var(--bruno-2); border-color: var(--bruno-2); color: #fff; }
.navbar-menu li a.btn-outline { color: var(--bruno); border-color: var(--bordo-forte); }
.navbar-menu li a.btn-outline:hover { color: var(--bruno); border-color: var(--bruno); background: rgba(61, 42, 26, 0.04); }
.navbar-greeting { font-size: var(--fs-sm); color: var(--grigio); padding: 0.5rem 0; display: block; }
.navbar-logo { max-height: 40px; width: auto; object-fit: contain; }

/* ------------------------------------------------------------------
   Menu da telefono aperto.
   Il pannello ha un fondo pieno e sta sopra il resto: in home la barra
   e' trasparente sulla fotografia, e senza fondo le voci del menu
   cadevano sopra il titolo della pagina, illeggibili.
   Vale anche sopra la fotografia, dove vince sulla trasparenza.
   ------------------------------------------------------------------ */
.navbar.is-open,
.navbar.is-sopra-foto.is-open {
    background: var(--crema);
    border-bottom: 1px solid var(--bordo);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1100;
}
/* Sul crema il marchio e le voci tornano scuri, anche in home */
.navbar.is-sopra-foto.is-open .navbar-brand { color: var(--bruno); }
.navbar.is-sopra-foto.is-open .navbar-menu li a { color: var(--bruno-2); }
.navbar.is-sopra-foto.is-open .navbar-menu li a:hover { color: var(--bruno); }
.navbar.is-sopra-foto.is-open .navbar-toggle span { background: var(--bruno); }
.navbar.is-sopra-foto.is-open .navbar-greeting { color: var(--grigio); }
.navbar.is-sopra-foto.is-open .navbar-menu li a.btn-primary {
    background: var(--bruno); color: #fff; border-color: var(--bruno);
}
.navbar.is-sopra-foto.is-open .navbar-menu li a.btn-outline {
    color: var(--bruno); border-color: var(--bordo-forte); background: transparent;
}
/* Solo dove il menu e' a colonna: sopra i 992px torna una riga normale
   e queste regole non devono valere. */
@media (max-width: 991px) {
    /* L'elenco scorre se il telefono e' basso o il menu e' lungo */
    .navbar.is-open .navbar-menu {
        max-height: calc(100vh - 5rem);
        overflow-y: auto;
        padding-bottom: 0.9rem;
        gap: 0.15rem;
    }
    /* I bottoni in fondo al menu stanno larghi, non stretti al testo */
    .navbar.is-open .navbar-menu li a.btn { width: 100%; margin-top: 0.5rem; }
}

/* In home la barra galleggia sulla fotografia */
.navbar.is-sopra-foto {
    position: absolute; top: 0; left: 0; right: 0;
    background: transparent; border-bottom: 0;
}
.navbar.is-sopra-foto .navbar-brand { color: #fff; }
.navbar.is-sopra-foto .navbar-menu li a { color: rgba(255,255,255,0.9); }
.navbar.is-sopra-foto .navbar-menu li a:hover { color: #fff; }
.navbar.is-sopra-foto .navbar-toggle span { background: #fff; }
.navbar.is-sopra-foto .navbar-greeting { color: rgba(255,255,255,0.75); }
.navbar.is-sopra-foto .navbar-menu li a.btn-primary { background: #fff; color: var(--bruno); border-color: #fff; }
.navbar.is-sopra-foto .navbar-menu li a.btn-primary:hover { background: var(--crema-2); color: var(--bruno); }
.navbar.is-sopra-foto .navbar-menu li a.btn-outline { color: #fff; border-color: rgba(255,255,255,0.5); }
.navbar.is-sopra-foto .navbar-menu li a.btn-accent { background: #fff; color: var(--bruno); }

/* ---------- Sezioni ---------- */
.section { padding: 5.5rem 0; }
.section-light { background: var(--crema-2); }
.section-dark { background: var(--bruno); color: rgba(255, 255, 255, 0.82); border-radius: var(--radius-lg); }
.section-dark h2, .section-dark h3, .section-dark .section-title { color: #fff; }
.section-dark .lead { color: rgba(255, 255, 255, 0.78); }

/* ============================================================
   LA FOTOGRAFIA — primo schermo
   ============================================================ */
.hero {
    position: relative;
    min-height: 88vh;
    overflow: hidden;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    display: flex;
    align-items: flex-end;
    background: var(--bruno);
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img, .hero-slide {
    width: 100%; height: 100%; object-fit: cover; display: block;
    background-size: cover; background-position: center;
    filter: saturate(1.04) brightness(0.93) sepia(0.14);
}
/* ------------------------------------------------------------------
   Il velo sulla fotografia.
   Non e' un effetto: e' cio' che rende leggibile il testo bianco. La
   foto ha una zona quasi bianca (l'anello del lavatesta) proprio dove
   cade il testo, e con un velo leggero il paragrafo spariva.
   Il velo orizzontale e' forte a sinistra, dove sta la colonna di
   testo, e si apre entro il 72% perche' la fotografia respiri.
   ------------------------------------------------------------------ */
.hero-media::after {
    content: '';
    position: absolute; inset: 0;
    /* z-index 2 e' obbligatorio: Swiper mette z-index 1 sul proprio
       contenitore, quindi con z-index automatico la fotografia copriva
       il velo e il testo restava bianco su bianco. */
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            rgba(40,26,15,0.58) 0%,
            rgba(40,26,15,0.20) 26%,
            rgba(40,26,15,0.34) 62%,
            rgba(40,26,15,0.86) 100%),
        linear-gradient(94deg,
            rgba(40,26,15,0.80) 0%,
            rgba(40,26,15,0.68) 26%,
            rgba(40,26,15,0.32) 52%,
            rgba(40,26,15,0.06) 72%,
            rgba(40,26,15,0) 86%);
}
.hero-content { position: relative; z-index: 3; width: 100%; padding-top: 7rem; padding-bottom: 6.5rem; }
.hero-insegna, .hero h1 {
    color: #fff;
    font-weight: 300;
    font-size: clamp(2.5rem, 6.4vw, 5.2rem);
    line-height: 1.02;
    letter-spacing: -0.037em;
    max-width: 16ch;
}
.hero-claim { color: #fff; font-size: var(--fs-md); max-width: 46ch; margin-top: 1.3rem; }
.hero-azioni { display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: center; margin-top: 2.2rem; }

/* La barra dei recapiti dentro la fotografia.
   Ha un fondo pieno, non solo un filo: appoggiata sul chiaro della foto
   i recapiti non si leggevano. */
.hero-barra {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
    display: grid; grid-template-columns: 1fr;
    gap: 0.3rem;
    padding: 1.15rem 2rem;
    background: rgba(32, 21, 12, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-top: 1px solid rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.92);
    font-size: var(--fs-sm);
}
.hero-barra a { color: inherit; }
.hero-barra a:hover { color: #fff; }
@media (min-width: 760px) {
    .hero-barra { grid-template-columns: 1fr 1fr 1fr; }
    .hero-barra span:nth-child(2) { text-align: center; }
    .hero-barra span:nth-child(3) { text-align: right; }
}
.hero-overlay, .hero-slide-overlay, .hero-slide-content { display: none; }
.hero-slider, .hero-foto { position: absolute; inset: 0; }
.hero-slider .swiper, .hero-slider .swiper-wrapper, .hero-slider .swiper-slide { height: 100%; width: 100%; }
.hero-video, .hero-youtube-iframe {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    min-width: 100%; min-height: 100%; object-fit: cover; border: 0;
}
.hero-slider .swiper-button-prev, .hero-slider .swiper-button-next, .hero-slider .swiper-pagination { display: none; }

/* Lo stato del salone */
/* Aperto o chiuso adesso. E' la domanda numero uno di chi apre il sito
   di un negozio, quindi si legge da lontano invece di stare in fondo a
   una riga di testo minuto. */
.stato-ora {
    display: inline-flex; align-items: center; gap: 0.7rem;
    font-size: var(--fs-md);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--bruno);
    margin: -0.8rem 0 0;
}
.stato-ora .pallino {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--grigio-2); flex-shrink: 0;
    box-shadow: 0 0 0 4px rgba(117, 100, 79, 0.12);
}
.stato-ora.is-aperto { color: var(--success-fg); }
.stato-ora.is-aperto .pallino { background: var(--success); box-shadow: 0 0 0 4px rgba(63, 107, 74, 0.18); }
.hero .stato-ora { color: rgba(255,255,255,0.9); }
.hero .stato-ora .pallino { background: rgba(255,255,255,0.55); }
.hero .stato-ora.is-aperto .pallino { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.2); }

/* ---------- "In bottega": scorciatoie e orari, affiancati ----------
   I tre servizi stavano dentro cerchi grandi e mezzi vuoti, col testo
   compresso. Ora sono righe: si leggono, e il posto guadagnato lo
   prendono gli orari della settimana, che al sito mancavano del tutto.
   -------------------------------------------------------------------- */
.bottega-griglia {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-top: 2.8rem;
    align-items: start;
}
@media (min-width: 900px) {
    .bottega-griglia { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

.bottega-griglia h3 {
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--grigio);
    margin-bottom: 1.1rem;
}

/* Le richieste piu' comuni: righe nude, separate da un filo.
   Nessuna scheda: il pannello bianco qui accanto e' gia' uno, e due
   riquadri gemelli farebbero una griglia di schede uguali. */
.richieste ul { list-style: none; border-top: 1px solid var(--bordo); }
.richieste li { border-bottom: 1px solid var(--bordo); }
.richieste li a {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1.5rem; padding: 1.05rem 0.7rem;
    color: var(--bruno);
    /* Solo colore: animare il padding farebbe ricalcolare il layout a
       ogni fotogramma. Il rientro lo da' il nome, che si sposta con
       transform e non tocca il flusso. */
    transition: background var(--transition);
}
.richieste li a:hover { background: var(--crema-2); }
.richiesta-nome { transition: transform var(--transition); }
.richieste li a:hover .richiesta-nome { transform: translateX(4px); }
.richiesta-nome { font-size: var(--fs-md); font-weight: 400; letter-spacing: -0.02em; }
.richiesta-durata {
    font-size: var(--fs-sm); color: var(--grigio); white-space: nowrap;
    font-variant-numeric: tabular-nums lining-nums;
}
.richieste .btn { margin-top: 1.6rem; }

/* Chiusure straordinarie in arrivo. Compaiono solo se ce ne sono:
   una lista vuota non si vede. */
.chiusure { margin-top: 1.4rem; }
.chiusure h4 {
    font-size: var(--fs-sm); font-weight: 500; color: var(--bruno);
    letter-spacing: normal; text-transform: none; margin-bottom: 0.5rem;
}
.chiusure ul { list-style: none; display: flex; flex-direction: column; gap: 0.3rem; }
.chiusure li {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.6rem;
    font-size: var(--fs-sm); color: var(--bruno-2);
}
.chiusure time { font-weight: 500; color: var(--bruno); }
.chiusure li span { color: var(--grigio); }

/* ---------- Gli orari ---------- */
.settimana { display: grid; grid-template-columns: 1fr; max-width: 640px; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--radius); overflow: hidden; }
.giorno-riga { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding: 0.85rem 1.4rem; border-bottom: 1px solid var(--bordo); }
.giorno-riga:last-child { border-bottom: 0; }
.giorno-nome { font-weight: 500; font-size: var(--fs-base); color: var(--bruno); }
/* Mattina e pomeriggio sulla stessa riga, separati da un punto: incolonnate
   una sopra l'altra raddoppiavano l'altezza del pannello per niente. */
.giorno-fasce { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.15rem 0.5rem; }
.fascia { font-size: var(--fs-base); font-variant-numeric: tabular-nums lining-nums; color: var(--bruno); }
.fascia + .fascia::before { content: '·'; color: var(--grigio-2); margin-right: 0.5rem; }
.fascia.is-chiusa { font-variant-numeric: normal; color: var(--grigio); }
.giorno-riga.is-chiuso .giorno-nome { color: var(--grigio); }
/* Oggi si distingue per fondo e peso, non per colore: il marrone e' uno solo */
.giorno-riga.is-oggi { background: var(--crema-2); }
.giorno-riga.is-oggi .giorno-nome { font-weight: 600; }
.giorno-riga.is-oggi .giorno-nome::after { content: ' · oggi'; font-weight: 400; color: var(--grigio); }

/* ---------- Il listino ---------- */
.listino { list-style: none; display: grid; grid-template-columns: 1fr; gap: 0; max-width: 940px; }
.voce {
    display: grid; grid-template-columns: 1fr auto;
    align-items: baseline; gap: 0.35rem 1.6rem;
    padding: 1.7rem 0; border-bottom: 1px solid var(--bordo);
}
.voce:first-child { border-top: 1px solid var(--bordo); }
.voce-media { display: none; }
.voce-corpo { min-width: 0; }
.voce-nome { font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-weight: 300; letter-spacing: -0.03em; color: var(--bruno); }
.voce-punti { display: none; }
.voce-prezzo {
    font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 300; letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums lining-nums; color: var(--bruno);
    white-space: nowrap; justify-self: end; text-align: right; min-width: 3.4em;
}
/* L'euro sta con la cifra, non sembra un refuso: stesso inchiostro,
   appena piu' piccolo, con un filo d'aria davanti */
.voce-prezzo .valuta { color: inherit; opacity: 0.62; font-size: 0.66em; margin-left: 0.1em; }
.voce-prezzo.is-richiesta { font-size: var(--fs-base); font-weight: 400; color: var(--grigio); }
.voce-desc { font-size: var(--fs-base); color: var(--bruno-2); max-width: 62ch; margin-top: 0.35rem; }
.voce-meta { display: flex; gap: 1rem; margin-top: 0.4rem; font-size: var(--fs-sm); color: var(--grigio); }
.voce-azione { grid-column: 1 / -1; justify-self: start; margin-top: 1rem; }

/* ---------- Prodotti ---------- */
.products-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.2rem 1.6rem; max-width: 980px; }
.product-card { background: none; border: 0; padding: 0; }
.product-card-icon { display: none; }
.product-card-img { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--crema-2); border-radius: var(--radius); margin-bottom: 1rem; }
.product-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-card h3 { font-size: var(--fs-md); font-weight: 500; color: var(--bruno); margin-bottom: 0.2rem; }
.product-card p { color: var(--bruno-2); font-size: var(--fs-base); margin-bottom: 0.5rem; }
.product-card-price { font-size: var(--fs-lg); font-weight: 300; letter-spacing: -0.03em; font-variant-numeric: tabular-nums lining-nums; color: var(--bruno); }
.product-card-price .valuta { color: inherit; opacity: 0.62; font-size: 0.68em; }

/* Senza fotografia il prodotto era una riga di testo appesa al nulla.
   Diventa una scheda vera: stessa carta e stessi angoli del resto. */
.product-card:not(:has(.product-card-img)) {
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: var(--radius);
    padding: 1.5rem 1.4rem;
    display: flex; flex-direction: column; gap: 0.35rem;
}
.product-card:not(:has(.product-card-img)) h3 { margin-bottom: 0; }
@media (min-width: 760px) { .products-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Intestazione pagine interne ---------- */
.page-header { background: var(--crema-2); padding: 4.5rem 0 3.4rem; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.page-header h1 { color: var(--bruno); margin-bottom: 0.9rem; max-width: 18ch; }
.page-header p { color: var(--bruno-2); max-width: 60ch; }

/* ---------- Schede servizio ---------- */
.services-grid { display: grid; grid-template-columns: 1fr; gap: 1.4rem; }
.service-card { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--radius); padding: 1.8rem; }
.service-card-icon { display: none; }
.service-card h3 { font-size: var(--fs-lg); font-weight: 400; letter-spacing: -0.025em; margin-bottom: 0.4rem; }
.service-card p { color: var(--bruno-2); font-size: var(--fs-base); margin-bottom: 1.1rem; }
.service-card-meta { display: flex; justify-content: space-between; align-items: baseline; padding-top: 0.9rem; border-top: 1px solid var(--bordo); font-size: var(--fs-base); }
.service-duration { color: var(--grigio); }
.service-price { font-size: var(--fs-lg); font-weight: 400; color: var(--bruno); }
.service-card-img { width: calc(100% + 3.6rem); height: 180px; overflow: hidden; margin: -1.8rem -1.8rem 1.4rem; background: var(--crema-2); border-radius: var(--radius) var(--radius) 0 0; }
.service-card-img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Categoria ---------- */
.category-title {
    display: block; max-width: 940px;
    margin: 3.6rem 0 0.4rem; padding-bottom: 0.6rem;
    font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--grigio);
}
.category-title:first-of-type { margin-top: 0; }

.services-list { display: flex; flex-direction: column; }
.service-list-item { display: flex; flex-direction: column; gap: 1rem; padding: 1.6rem 0; border-bottom: 1px solid var(--bordo); }
.service-info h3 { font-size: var(--fs-lg); font-weight: 300; letter-spacing: -0.03em; margin-bottom: 0.25rem; }
.service-info p { color: var(--bruno-2); font-size: var(--fs-base); }
.service-list-img { width: 104px; height: 78px; flex-shrink: 0; overflow: hidden; border-radius: var(--radius-sm); }
.service-list-img img { width: 100%; height: 100%; object-fit: cover; }
.service-duration-badge { display: inline-block; margin-top: 0.45rem; font-size: var(--fs-sm); color: var(--grigio); }
.service-price-action { display: flex; align-items: center; gap: 1.3rem; }
.service-price-action .price { font-size: var(--fs-xl); font-weight: 300; letter-spacing: -0.03em; color: var(--bruno); }

/* ---------- Orari (tabella legacy) ---------- */
.orari-table-wrapper { max-width: 560px; }
.orari-table { width: 100%; border-collapse: collapse; }
.orari-table tr { border-bottom: 1px solid var(--bordo); }
.orari-table td { padding: 0.9rem 0.2rem; }
.orari-table tr.chiuso { color: var(--grigio); }
.orari-table .giorno { font-weight: 500; color: var(--bruno); }
.orari-table .orario { font-variant-numeric: tabular-nums; text-align: right; }
.orari-table small { display: block; color: var(--grigio); font-size: var(--fs-sm); }

/* ---------- Dove siamo ---------- */
/* Il fondo serve: se la mappa di Google non carica (rete, blocco cookie,
   estensioni) restava un buco bianco alto 440px. Cosi' resta un pannello
   coerente, e l'indirizzo con le indicazioni sta comunque nella scheda. */
.map-wrapper {
    overflow: hidden; border-radius: var(--radius);
    background: var(--crema-2); border: 1px solid var(--bordo);
    min-height: 260px;
}
.map-wrapper iframe { display: block; filter: grayscale(0.35) sepia(0.14) contrast(1.02); }
.contatti-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
.contatti-scheda { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--radius); padding: 2rem; }
.contatto-blocco + .contatto-blocco { margin-top: 1.5rem; }
.contatto-etichetta { display: block; font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grigio); margin-bottom: 0.3rem; }
.contatto-valore { font-size: var(--fs-md); font-weight: 400; color: var(--bruno); line-height: 1.45; letter-spacing: -0.02em; }
.contatto-valore a { color: var(--bruno); }
.contatto-valore a:hover { color: var(--bruno-2); }
@media (min-width: 900px) { .contatti-grid { grid-template-columns: 1fr 1.2fr; gap: 3rem; } }

/* ---------- Chi siamo ---------- */
.chi-siamo-content { display: grid; grid-template-columns: 1fr; gap: 2.2rem; align-items: center; }
.chi-siamo-content.senza-foto { grid-template-columns: 1fr; }
.chi-siamo-img { overflow: hidden; border-radius: var(--radius); }
.chi-siamo-img img { width: 100%; height: auto; display: block; }
.chi-siamo-text { font-size: var(--fs-md); line-height: 1.75; color: var(--bruno-2); max-width: 62ch; }
@media (min-width: 900px) {
    .chi-siamo-content { grid-template-columns: 0.8fr 1fr; gap: 3.5rem; }
    .chi-siamo-content.senza-foto { grid-template-columns: 1fr; }
}

/* ---------- Prenotazione ---------- */
.booking-steps { display: flex; gap: 0.5rem; margin-top: 1.6rem; flex-wrap: wrap; }
.booking-steps .step {
    font-size: var(--fs-sm); font-weight: 500; color: var(--grigio);
    border: 1px solid var(--bordo); border-radius: var(--radius-pill); padding: 0.42rem 1.05rem;
    background: transparent;
}
.booking-steps .step.active { color: #fff; background: var(--bruno); border-color: var(--bruno); }
.booking-steps .step.done { color: var(--bruno); border-color: var(--bordo-forte); }

.service-select-list { display: flex; flex-direction: column; gap: 0.6rem; }
.service-select-item { display: block; cursor: pointer; }
.service-select-item input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.service-select-content {
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: start; column-gap: 1.1rem;
    padding: 1.3rem 1.4rem;
    background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--radius);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.service-select-content .segno {
    width: 24px; height: 24px; border-radius: 50%;
    border: 1.5px solid rgba(61, 42, 26, 0.34); background: #fff;
    margin-top: 0.25rem; flex-shrink: 0;
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.service-select-item:hover .service-select-content { border-color: var(--bordo-forte); }
.service-select-item input:checked + .service-select-content { border-color: var(--bruno); box-shadow: inset 0 0 0 1px var(--bruno); }
.service-select-item input:checked + .service-select-content .segno { background: var(--bruno); border-color: var(--bruno); box-shadow: inset 0 0 0 3px #fff; }
.service-select-item input:focus-visible + .service-select-content { outline: 2px solid var(--bruno); outline-offset: 2px; }
.service-select-info strong { font-size: var(--fs-lg); font-weight: 300; letter-spacing: -0.03em; color: var(--bruno); display: block; line-height: 1.2; }
.service-select-info > span { display: block; color: var(--bruno-2); font-size: var(--fs-base); }
.service-select-meta { margin-top: 0.25rem; font-size: var(--fs-sm); color: var(--grigio); }
.service-select-content .voce-prezzo { justify-self: end; font-size: var(--fs-xl); }

.selected-service-badge {
    background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--radius);
    padding: 1.1rem 1.4rem; margin-bottom: 0.7rem;
    display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.4rem;
    font-size: var(--fs-base); color: var(--bruno-2);
}
.selected-service-badge strong { font-size: var(--fs-md); font-weight: 400; letter-spacing: -0.02em; color: var(--bruno); }

.barber-select-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin-top: 1.3rem; }
.barber-select-card { cursor: pointer; position: relative; }
.barber-select-card input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.barber-select-content {
    background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--radius);
    padding: 1.6rem 1rem; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
    transition: border-color var(--transition);
}
.barber-select-card input[type="radio"]:checked + .barber-select-content { border-color: var(--bruno); box-shadow: inset 0 0 0 1px var(--bruno); }
.barber-select-photo, .barber-select-placeholder {
    width: 86px; height: 86px; border-radius: 50%; object-fit: cover;
    background: var(--crema-2); border: 1px solid var(--bordo);
    display: flex; align-items: center; justify-content: center; font-size: var(--fs-2xl);
}
.barber-select-desc { font-size: var(--fs-sm); color: var(--bruno-2); }

.calendar-wrapper { margin-bottom: 1.9rem; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--radius); padding: 1.4rem; }
.calendar-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.1rem; font-size: var(--fs-md); font-weight: 400; letter-spacing: -0.02em; color: var(--bruno); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.calendar-grid .cal-header { font-size: var(--fs-micro); font-weight: 500; color: var(--grigio); padding: 0.5rem 0; }
.calendar-grid .cal-day {
    padding: 0.8rem 0.2rem; cursor: pointer; border-radius: var(--radius-sm);
    font-size: var(--fs-base); font-weight: 400; font-variant-numeric: tabular-nums lining-nums;
    color: var(--bruno); border: 1px solid transparent;
    transition: background var(--transition), color var(--transition);
}
.calendar-grid .cal-day:hover:not(.disabled) { background: var(--crema-2); }
.calendar-grid .cal-day.disabled { color: var(--grigio-2); opacity: 0.5; cursor: not-allowed; }
.calendar-grid .cal-day.selected { background: var(--bruno); color: #fff; }
.calendar-grid .cal-day.today { border-color: var(--bordo-forte); }
.calendar-grid .cal-empty { padding: 0.8rem; }

.slots-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; margin-bottom: 1.9rem; }
.slot-btn {
    padding: 0.9rem 0.35rem; border: 1px solid var(--bordo-forte); border-radius: var(--radius-pill);
    background: var(--carta); cursor: pointer;
    font-family: var(--font); font-size: var(--fs-base); font-weight: 400;
    font-variant-numeric: tabular-nums lining-nums; color: var(--bruno);
    transition: border-color var(--transition), background var(--transition), color var(--transition);
    text-align: center;
}
.slot-btn:hover { border-color: var(--bruno); }
.slot-btn.selected { background: var(--bruno); color: #fff; border-color: var(--bruno); }

.lampo-barber { margin-bottom: 1.9rem; }
.lampo-barber h3 { font-size: var(--fs-lg); font-weight: 400; letter-spacing: -0.02em; margin-bottom: 0.9rem; color: var(--bruno); }
.lampo-slots-grid { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.lampo-slot-btn {
    display: inline-block; padding: 0.72rem 1.4rem; border-radius: var(--radius-pill);
    border: 1px solid var(--bordo-forte); color: var(--bruno); background: var(--carta);
    font-weight: 400; font-size: var(--fs-base); font-variant-numeric: tabular-nums;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.lampo-slot-btn:hover { background: var(--bruno); color: #fff; border-color: var(--bruno); }

.spinner { width: 26px; height: 26px; border: 2px solid var(--bordo); border-top-color: var(--bruno); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto; }
@keyframes spin { to { transform: rotate(360deg); } }

.booking-summary { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--radius); padding: 1.4rem 1.5rem; margin-top: 1.3rem; font-size: var(--fs-base); color: var(--bruno-2); }
.booking-summary p { margin-bottom: 0.3rem; }
.booking-summary strong { color: var(--bruno); font-weight: 500; }

.success-icon {
    width: 70px; height: 70px; border-radius: 50%;
    background: var(--bruno); color: #fff; font-size: var(--fs-2xl);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.6rem;
}
.success-details { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--radius); padding: 1.7rem; margin: 1.6rem auto 0; text-align: left; max-width: 440px; font-size: var(--fs-base); color: var(--bruno-2); }
.success-details p { margin-bottom: 0.5rem; }
.success-details strong { color: var(--bruno); font-weight: 500; }

/* ---------- Moduli ---------- */
.form-group { margin-bottom: 1.3rem; }
.form-group label { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--bruno); margin-bottom: 0.45rem; }
.form-control {
    width: 100%; padding: 0.92rem 1.1rem;
    border: 1px solid var(--bordo-forte); border-radius: var(--radius);
    font-family: var(--font); font-size: var(--fs-base);
    transition: border-color var(--transition), box-shadow var(--transition);
    background: var(--carta); color: var(--bruno);
}
/* Il testo suggerito nei campi si deve leggere: e' spesso l'unico
   esempio del formato richiesto */
.form-control::placeholder { color: var(--grigio); opacity: 1; }
.form-control:focus { outline: none; border-color: var(--bruno); box-shadow: 0 0 0 3px rgba(61,42,26,0.09); }
.form-control-sm { padding: 0.55rem 0.75rem; font-size: var(--fs-sm); }
textarea.form-control { resize: vertical; }
select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%233d2a1a' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 1.1rem center; padding-right: 2.6rem;
}
.form-row { display: flex; flex-direction: column; gap: 0; }
.form-actions { display: flex; gap: 0.8rem; margin-top: 1.7rem; flex-wrap: wrap; }
.checkbox-label { display: flex; align-items: flex-start; gap: 0.7rem; cursor: pointer; font-size: var(--fs-base); color: var(--bruno-2); }
.checkbox-label input[type="checkbox"] { margin-top: 0.3rem; width: 18px; height: 18px; accent-color: var(--bruno); flex-shrink: 0; }

/* ---------- Finestra di conferma ----------
   Il velo e' marrone, non nero: in questo mondo anche le ombre sono
   marroni, e un nero puro sopra il crema si vede come corpo estraneo.
   Lo stato aperto lo imposta il JS in riga (display:flex). */
.modale {
    display: none;
    position: fixed; inset: 0; z-index: 9999;
    justify-content: center; align-items: center;
    padding: 1.25rem;
    background: rgba(32, 21, 12, 0.62);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.modale-riquadro {
    background: var(--carta);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 2rem 2.25rem;
    text-align: center;
    max-width: 420px; width: 100%;
}
.modale-riquadro h2 { font-size: var(--fs-lg); font-weight: 400; margin-bottom: 1rem; }
.modale-riquadro > p { color: var(--bruno-2); margin-bottom: 1.5rem; }
.modale-azioni { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }
.modale-azioni .btn { flex: 1 1 auto; }
/* Attesa durante la conferma della prenotazione */
.modale-riquadro .spinner { margin: 0 auto 1rem; }
.modale-attesa { font-size: var(--fs-md); font-weight: 500; color: var(--bruno); }
.modale-attesa-nota { margin-top: 0.5rem; font-size: var(--fs-sm); color: var(--grigio); }

/* ---------- Avviso: due prenotazioni gia' attive nello stesso giorno ----------
   Era un blocco di stili in riga con gli alias del mondo precedente e
   angoli vivi. Ora usa i token del sistema e le sue curve. */
.avviso-prenotazioni {
    margin-top: 1.5rem;
    background: var(--carta);
    border: 1px solid var(--bordo-forte);
    border-radius: var(--radius);
    padding: 1.5rem;
}
.avviso-prenotazioni h3 {
    font-size: var(--fs-lg);
    font-weight: 400;
    margin-bottom: 0.5rem;
}
.avviso-prenotazioni > p {
    color: var(--bruno-2);
    margin-bottom: 1.2rem;
    max-width: 62ch;
}
.avviso-prenotazioni-elenco {
    display: flex; flex-wrap: wrap; gap: 0.7rem;
}
.avviso-prenotazione {
    background: var(--crema-2);
    border: 1px solid var(--bordo);
    border-radius: var(--radius-sm);
    padding: 0.9rem 1.1rem;
    min-width: 200px;
    font-size: var(--fs-sm);
}
.avviso-prenotazione p { display: flex; justify-content: space-between; gap: 1.2rem; }
.avviso-prenotazione p + p { margin-top: 0.25rem; }
.avviso-prenotazione span { color: var(--grigio); }

/* ---------- Avvisi ---------- */
.alert { padding: 1rem 1.3rem; margin-bottom: 1.3rem; font-size: var(--fs-base); border: 1px solid transparent; border-radius: var(--radius); }
.alert-error { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger-bordo); }
.alert-success { background: var(--success-bg); color: var(--success-fg); border-color: var(--success-bordo); }

/* ---------- Footer ---------- */
.footer { background: var(--bruno); color: rgba(255,255,255,0.72); padding: 4rem 0 2rem; font-size: var(--fs-base); margin-top: 3rem; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.4rem; }
/* h3 e non h4: dopo un h2 di pagina, saltare al quarto livello rompe
   l'indice che usano i lettori di schermo. L'aspetto non cambia. */
.footer-col h3 { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.62); margin-bottom: 1rem; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 0.5rem; }
.footer-col ul li a { color: rgba(255,255,255,0.72); }
.footer-col ul li a:hover { color: #fff; }
.footer-col p a { color: rgba(255,255,255,0.9); }
.footer-insegna { font-size: var(--fs-xl); font-weight: 300; letter-spacing: -0.03em; color: #fff; margin-bottom: 0.9rem; }
/* Lo stato di apertura sul fondo scuro: stessa lingua del pallino in home */
.footer-stato {
    display: inline-flex; align-items: center; gap: 0.6rem;
    margin-top: 1.1rem; font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.9);
}
.footer-stato .pallino {
    width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
    background: rgba(255, 255, 255, 0.42);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);
}
.footer-stato.is-aperto { color: #fff; }
.footer-stato.is-aperto .pallino { background: var(--success-su-scuro); box-shadow: 0 0 0 4px var(--success-su-scuro-alone); }
.footer-bottom { padding-top: 1.8rem; margin-top: 2.6rem; border-top: 1px solid rgba(255,255,255,0.14); font-size: var(--fs-sm); color: rgba(255,255,255,0.5); }

/* ---------- Tabelle e badge ---------- */
.table { width: 100%; border-collapse: collapse; }
.table thead th { text-align: left; padding: 0.8rem; border-bottom: 1px solid var(--bordo-forte); font-size: var(--fs-micro); font-weight: 600; color: var(--grigio); text-transform: uppercase; letter-spacing: 0.1em; }
.table tbody td { padding: 0.9rem 0.8rem; border-bottom: 1px solid var(--bordo); vertical-align: middle; }
.table tbody tr:hover { background: var(--crema-2); }
.table-responsive { overflow-x: auto; }
.badge { display: inline-block; padding: 0.25rem 0.8rem; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 500; }
.badge-prenotato { background: var(--crema-2); color: var(--bruno); }
.badge-completato { background: var(--success-bg); color: var(--success-fg); }
.badge-annullato { background: var(--danger-bg); color: var(--danger-fg); }
.inline-form { display: inline; }
.actions { white-space: nowrap; }
.actions form, .actions a { margin-right: 0.25rem; }

/* ---------- Sfondi dinamici ---------- */
.section-dynamic-bg { position: relative; background-size: cover; background-position: center; overflow: hidden; color: rgba(255,255,255,0.85); border-radius: var(--radius-lg); }
.section-dynamic-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40,26,15,0.72) 0%, rgba(40,26,15,0.9) 100%); z-index: 1; }
.section-dynamic-bg > .container { position: relative; z-index: 2; }
.section-dynamic-bg h2, .section-dynamic-bg .section-title { color: #fff; }

/* ---------- Banner push e badge media ---------- */
.push-banner { position: fixed; bottom: 1rem; left: 1rem; right: 1rem; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--radius); padding: 1rem 1.3rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; z-index: 9999; box-shadow: var(--shadow-lg); }
.push-banner-text { flex: 1; }
.push-banner-text strong { display: block; margin-bottom: 0.15rem; color: var(--bruno); font-weight: 500; }
.push-banner-text span { font-size: var(--fs-sm); color: var(--bruno-2); }
.push-banner-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.slider-admin-img { position: relative; }
.media-badge { position: absolute; top: 8px; right: 8px; background: var(--bruno); color: #fff; padding: 3px 10px; border-radius: var(--radius-pill); font-size: var(--fs-micro); font-weight: 500; }

/* ---------- Amministrazione ---------- */
.admin-body, .login-page {
    --bg: var(--crema-admin);
    --bg-light: var(--crema-2);
    --accent: var(--bruno);
    --accent-hover: var(--bruno-2);
    font-family: var(--font);
    background: var(--crema-admin);
    color: var(--bruno-2);
}

/* ---------- Il momento d'apertura: la fotografia che sale ---------- */
.hero-media { opacity: 0; }
.is-ready .hero-media { opacity: 1; transition: opacity 1.1s cubic-bezier(0.22, 0.61, 0.36, 1); }
.reveal { opacity: 0; transform: translateY(12px); }
.is-ready .reveal {
    opacity: 1; transform: none;
    transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.is-ready .reveal-1 { transition-delay: 0.2s; }
.is-ready .reveal-2 { transition-delay: 0.32s; }
.is-ready .reveal-3 { transition-delay: 0.44s; }
.is-ready .reveal-4 { transition-delay: 0.56s; }

/* ============================================================
   BREAKPOINT
   ============================================================ */
@media (min-width: 640px) {
    .form-row { flex-direction: row; gap: 1.3rem; }
    .form-row .form-group { flex: 1; }
    .service-list-item { flex-direction: row; justify-content: space-between; align-items: center; }
    .slots-grid { grid-template-columns: repeat(4, 1fr); }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .voce { grid-template-columns: 1fr auto auto; }
    .voce-azione { grid-column: auto; justify-self: end; margin-top: 0; align-self: center; }
}

@media (min-width: 992px) {
    .navbar-toggle { display: none; }
    .navbar-menu { display: flex !important; width: auto; flex-direction: row; padding-top: 0; gap: 0.4rem; align-items: center; }
    .navbar-menu li a { padding: 0.5rem 0.9rem; }
    .services-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; gap: 3.5rem; }
    .slots-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ---------- Telefono ---------- */
@media (max-width: 639px) {
    body { font-size: 16px; }
    .container { padding: 0 1.25rem; }
    .section { padding: 3.6rem 0; }
    .section-title { margin-bottom: 1.7rem; }
    .page-header { padding: 2.8rem 0 2.2rem; }

    .hero { min-height: 92vh; }
    .hero-content { padding-top: 5rem; padding-bottom: 6rem; }
    .hero-claim { font-size: var(--fs-base); }
    .hero-azioni { gap: 0.7rem; margin-top: 1.8rem; }
    .hero-azioni .btn-primary { flex: 1 1 100%; }
    .hero-barra { padding: 0.9rem 1.25rem; font-size: var(--fs-xs); }

    .btn { padding: 0.95rem 1.7rem; }
    .btn-lg { padding: 1rem 1.7rem; font-size: var(--fs-base); }
    .btn-sm { padding: 0.65rem 1.25rem; font-size: var(--fs-sm); }
    .form-control { font-size: 16px; }
    .navbar-menu li a { padding: 0.85rem 0; font-size: var(--fs-base); }

    .voce { padding: 1.4rem 0; }
    .voce-azione { width: 100%; }
    .voce-azione.btn { display: block; }
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1.1rem; }
    .bottega-griglia { gap: 2.2rem; margin-top: 2.2rem; }
    .richieste li a { padding: 0.95rem 0.2rem; }
    .giorno-riga { padding: 0.8rem 1.1rem; }
    .stato-ora { font-size: var(--fs-base); }

    .service-select-content { grid-template-columns: auto 1fr; row-gap: 0.5rem; padding: 1.1rem; }
    .service-select-content .voce-prezzo { grid-column: 2; justify-self: start; font-size: var(--fs-lg); min-width: 0; }
    .booking-steps { gap: 0.4rem; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.3rem; }
    .booking-steps .step { white-space: nowrap; flex-shrink: 0; }

    .calendar-wrapper { padding: 0.9rem; }
    .calendar-grid .cal-day { padding: 0.75rem 0.1rem; font-size: var(--fs-base); }
    .slots-grid { grid-template-columns: repeat(3, 1fr); gap: 0.45rem; }

    .contatti-scheda { padding: 1.5rem; }
    .map-wrapper iframe { height: 300px; }
    .footer { padding: 3rem 0 1.4rem; }
}

@media (max-width: 380px) {
    .products-grid { grid-template-columns: 1fr; }
    .slots-grid { grid-template-columns: repeat(2, 1fr); }
}

@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;
    }
    .reveal, .hero-media { opacity: 1; transform: none; }
}