/* =====================================================
   FEELING COACH — Design System
   Palette derivata dal logo: petrolio, smeraldo, turchese
   Stile: dark luxury, glassmorphism, glow leggerissimo
   ===================================================== */

:root {
    /* Widget nativi (tendine dei select, calendari, scrollbar) in versione scura */
    color-scheme: dark;

    /* Colori brand (dal logo) */
    --nero:      #05090a;
    --antracite: #0b1214;
    --carbone:   #10191c;
    --petrolio:  #0e8a99;
    --turchese:  #2ec5d3;
    --smeraldo:  #4fb573;
    --bianco:    #eef4f4;
    --grigio:    #9fb0b5;
    --grigio-scuro: #5f6f74;

    /* Gradienti */
    --grad-accento: linear-gradient(135deg, var(--turchese) 0%, var(--smeraldo) 100%);
    --grad-scuro: linear-gradient(180deg, rgba(14,138,153,.08) 0%, rgba(5,9,10,0) 60%);

    /* Glass */
    --vetro: rgba(16, 25, 28, .55);
    --vetro-bordo: rgba(238, 244, 244, .07);

    /* Glow — volutamente leggerissimo */
    --glow-turchese: 0 0 34px rgba(46, 197, 211, .14);
    --glow-smeraldo: 0 0 34px rgba(79, 181, 115, .12);

    /* Tipografia */
    --font-display: 'Sora', system-ui, sans-serif;
    --font-testo: 'Inter', system-ui, sans-serif;

    /* Ritmi */
    --raggio: 18px;
    --raggio-sm: 12px;
    --sezione: clamp(4.5rem, 10vw, 8.5rem);
    --transizione: .35s cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* REGOLA D'ORO SU hidden
   L'attributo `hidden` vale `display:none` solo finche' nessuno scrive un
   `display:` sull'elemento: [hidden] e una classe hanno la STESSA specificita',
   quindi vince l'ultima scritta, cioe' la nostra. Risultato: elementi che
   restavano visibili anche dopo averli chiusi (e' successo con l'invito
   all'app, con la tendina del catalogo e col pannello delle notifiche).
   Qui la questione e' chiusa una volta per tutte, per tutto il sito. */
[hidden] { display: none !important; }

/* STESSA REGOLA D'ORO, PER <dialog>
   Un <dialog> senza `open` lo nasconde il BROWSER, con
   `dialog:not([open]) { display: none }`. Ma quella regola e' del browser,
   e qualunque regola scritta da noi con un `display:` la batte comunque:
   le regole dell'autore vincono su quelle del browser a prescindere dalla
   specificita'. E' successo davvero: `.popup { display: flex }`, aggiunto in
   area.css per far scorrere le note lunghe, teneva APERTI tutti e due i
   dialog dell'area cliente (l'animazione e la domanda al coach), che
   comparivano in fondo alla pagina anche a schede chiuse.
   Quando il dialog e' davvero aperto l'attributo `open` c'e', questa regola
   non lo tocca, e il `display:flex` che lo fa scorrere funziona come prima. */
dialog:not([open]) { display: none !important; }

/* CENTRATURA DEI PANNELLI
   Un <dialog> si centra da solo, ma si misura sulla pagina SENZA la barra di
   scorrimento, mentre la finestra ce l'ha: da qui i pannelli e il timer che
   ogni tanto sembrano spostati di qualche pixel verso sinistra. Togliendo lo
   scorrimento alla pagina mentre un pannello e' aperto, il conto torna esatto
   — e come effetto giusto la pagina dietro smette di scorrere sotto le dita
   mentre il timer e' a tutto schermo. */
html:has(dialog[open]) { overflow: hidden; }

html { scroll-behavior: smooth; }
body {
    font-family: var(--font-testo);
    background: var(--nero);
    color: var(--bianco);
    line-height: 1.65;
    font-size: 1.0625rem;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
/* NIENTE SCORRIMENTO LATERALE — la difesa scritta una volta sola.
   `overflow-x: hidden` qui sopra NASCONDE quello che sborda, ma su iPhone la
   pagina si lascia trascinare lo stesso di lato e mentre scorri su e giu'
   scivola: e' il difetto che si vede nell'app installata. La causa vera e'
   sempre una: una parola piu' larga dello schermo che non si spezza (un
   indirizzo web dentro una nota, un nome di esercizio lunghissimo, una email).
   `break-word` la manda a capo SOLO quando da sola non ci sta: il testo
   normale non cambia di una virgola, e le parole non si spezzano a meta' per
   capriccio. Dove lo spazio e' davvero poco (il titolo di una scheda accanto
   al contatore, su telefoni molto stretti) serve la versione dura
   (`anywhere`), ed e' scritta li' in area.css sotto la sua media query. */
body { overflow-wrap: break-word; }

/* IL VERO MOTIVO PER CUI LA PAGINA SCIVOLAVA IN OGNI DIREZIONE (01-09-2026).
   Danny: «potevo spostarla a destra, sinistra, alto e basso senza staccare il
   dito, e la testata col logo usciva dallo schermo». Non era la pagina troppo
   larga: era la pagina INGRANDITA. Su iPhone, quando tocchi un campo di testo
   scritto sotto i 16px, Safari zooma da solo per farti leggere — e da quel
   momento la pagina e' piu' grande dello schermo e si trascina dappertutto.
   I campi dei pesi erano a 14,7px e la domanda al coach a 13,3px: proprio
   quelli che si toccano durante l'allenamento.
   Rimedio (quello giusto: NON si disattiva lo zoom con maximum-scale, che
   toglie l'ingrandimento anche a chi ci vede poco): sui dispositivi a tocco
   ogni campo parte da 16px. Col mouse resta tutto come prima.

   L'`!important` qui non e' pigrizia, e' necessario: `.registro-riga input`
   (una classe) e' piu' specifica di `input`, e stare dentro una media query
   NON aggiunge specificita'. Senza, la regola c'era e non si applicava: i
   campi restavano a 14,7px e la pagina continuava a zoomare. E' una guardia
   di sistema, deve vincere su ogni regola di dettaglio. */
@media (pointer: coarse) {
    input, select, textarea { font-size: 16px !important; }
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

::selection { background: rgba(46,197,211,.35); }

/* ---------- Tipografia ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; }
.titolo-xl { font-size: clamp(2.6rem, 6vw, 4.6rem); }
.titolo-lg { font-size: clamp(2rem, 4.2vw, 3.1rem); }
.titolo-md { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
.testo-grande { font-size: clamp(1.1rem, 1.8vw, 1.3rem); color: var(--grigio); }
.testo-soft { color: var(--grigio); }

.testo-accento {
    background: var(--grad-accento);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Etichetta di sezione (kicker) */
.kicker {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--turchese);
    margin-bottom: 1.1rem;
}
.kicker::before {
    content: '';
    width: 26px; height: 1px;
    background: var(--grad-accento);
}

/* ---------- Layout ---------- */
.contenitore { width: min(1180px, 92vw); margin-inline: auto; }
.sezione { padding-block: var(--sezione); position: relative; }
.sezione-testa { max-width: 640px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.griglia { display: grid; gap: 1.4rem; }
.griglia-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.griglia-3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.griglia-4 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }

/* ---------- Sfondo ambientale ---------- */
.alone {
    position: absolute; inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: -1;
}
/* Glow pre-sfumato via radial-gradient: filter blur(140px) su elementi così
   grandi costava tantissimo in rendering (pagine e scroll lenti su mobile). */
.alone::before, .alone::after {
    content: '';
    position: absolute;
    width: 92vw; height: 92vw;
    border-radius: 50%;
}
.alone::before {
    background: radial-gradient(circle, rgba(14,138,153,.13) 0%, rgba(14,138,153,0) 62%);
    top: -41vw; right: -35vw;
}
.alone::after {
    background: radial-gradient(circle, rgba(79,181,115,.08) 0%, rgba(79,181,115,0) 62%);
    bottom: -43vw; left: -37vw;
}

/* ---------- Header ---------- */
.testata {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    transition: background var(--transizione), border-color var(--transizione);
    border-bottom: 1px solid transparent;
}
/* Sfondo solido, niente backdrop-filter: su iOS Safari il filtro sugli elementi
   fixed è inaffidabile (barra invisibile) e diventerebbe containing block per il
   menu mobile fixed, confinandolo dentro l'header a pagina scrollata. */
.testata.compatta {
    background: rgba(5, 9, 10, .94);
    border-bottom-color: var(--vetro-bordo);
}
.testata-interna {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: .9rem;
}
.marchio { display: flex; align-items: center; gap: .8rem; }
.marchio img { height: 46px; width: auto; }
.marchio-testo { display: flex; flex-direction: column; line-height: 1.15; }
.marchio-nome { font-family: var(--font-display); font-weight: 600; font-size: .98rem; letter-spacing: .02em; }
.marchio-sotto { font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--turchese); }

.navigazione ul { display: flex; gap: 1.9rem; align-items: center; }
.navigazione a {
    font-size: .92rem;
    font-weight: 500;
    color: var(--grigio);
    position: relative;
    padding-block: .4rem;
    white-space: nowrap;
    transition: color var(--transizione);
}
.navigazione a::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1.5px;
    background: var(--grad-accento);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transizione);
}
.navigazione a:hover, .navigazione a.attivo { color: var(--bianco); }
.navigazione a:hover::after, .navigazione a.attivo::after { transform: scaleX(1); }

.testata-azioni { display: flex; align-items: center; gap: .9rem; }

/* Hamburger */
.menu-toggle { display: none; flex-direction: column; gap: 5px; padding: .5rem; z-index: 110; }
.menu-toggle span { width: 24px; height: 2px; background: var(--bianco); border-radius: 2px; transition: var(--transizione); }
.menu-toggle.aperto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.aperto span:nth-child(2) { opacity: 0; }
.menu-toggle.aperto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Pulsanti ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .85rem 1.7rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .01em;
    transition: transform var(--transizione), box-shadow var(--transizione), background var(--transizione), color var(--transizione), border-color var(--transizione);
    will-change: transform;
}
.btn:active { transform: scale(.97); }

.btn-primario {
    background: var(--grad-accento);
    color: #04282c;
    box-shadow: var(--glow-turchese);
}
.btn-primario:hover { transform: translateY(-2px); box-shadow: 0 6px 44px rgba(46,197,211,.28); }

.btn-secondario {
    border: 1px solid rgba(238,244,244,.18);
    color: var(--bianco);
    background: rgba(238,244,244,.03);
    backdrop-filter: blur(6px);
}
.btn-secondario:hover { border-color: var(--turchese); color: var(--turchese); transform: translateY(-2px); }

.btn-piccolo { padding: .55rem 1.15rem; font-size: .85rem; }

/* ---------- Hero ---------- */
.hero {
    min-height: 100svh;
    display: flex;
    align-items: center;
    position: relative;
    padding-top: 90px;
    overflow: hidden;
}
.hero-sfondo {
    position: absolute; inset: 0;
    z-index: -2;
}
.hero-sfondo img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 22%;
    opacity: .38;
    filter: saturate(.9);
}
.hero-sfondo::after {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(5,9,10,.94) 0%, rgba(5,9,10,.66) 46%, rgba(5,9,10,.32) 100%),
        linear-gradient(0deg, var(--nero) 0%, rgba(5,9,10,0) 34%),
        radial-gradient(60% 50% at 78% 30%, rgba(14,138,153,.14), transparent 70%);
}
.hero-contenuto { max-width: 680px; }
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--vetro-bordo);
    background: var(--vetro);
    backdrop-filter: blur(12px);
    font-size: .82rem;
    color: var(--grigio);
    margin-bottom: 1.6rem;
}
.hero-badge .punto {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--smeraldo);
    box-shadow: 0 0 10px var(--smeraldo);
    animation: pulsa 2.4s ease-in-out infinite;
}
@keyframes pulsa { 50% { opacity: .45; } }

.hero h1 { margin-bottom: 1.4rem; }
.hero .sotto { max-width: 520px; margin-bottom: 2.4rem; }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Entrata hero */
.entra { opacity: 0; transform: translateY(18px); animation: entra .5s cubic-bezier(.22,.61,.36,1) forwards; }
.entra-2 { animation-delay: .08s; }
.entra-3 { animation-delay: .16s; }
.entra-4 { animation-delay: .24s; }
@keyframes entra { to { opacity: 1; transform: none; } }

/* Indicatore scroll */
.scorri {
    position: absolute;
    bottom: 2.2rem; left: 50%;
    transform: translateX(-50%);
    width: 26px; height: 42px;
    border: 1.5px solid rgba(238,244,244,.25);
    border-radius: 999px;
    display: flex; justify-content: center;
}
.scorri::before {
    content: '';
    width: 3px; height: 8px;
    background: var(--turchese);
    border-radius: 3px;
    margin-top: 7px;
    animation: scorri 2s ease-in-out infinite;
}
@keyframes scorri { 50% { transform: translateY(14px); opacity: .2; } }

/* ---------- Statistiche ---------- */
.statistiche {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.2rem;
}
.statistica {
    text-align: center;
    padding: 1.9rem 1.2rem;
    border-radius: var(--raggio);
    background: var(--vetro);
    border: 1px solid var(--vetro-bordo);
    backdrop-filter: blur(14px);
    transition: transform var(--transizione), border-color var(--transizione), box-shadow var(--transizione);
}
.statistica:hover { transform: translateY(-4px); border-color: rgba(46,197,211,.35); box-shadow: var(--glow-turchese); }
.statistica .numero {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 4vw, 2.9rem);
    font-weight: 700;
    background: var(--grad-accento);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.statistica .voce { font-size: .88rem; color: var(--grigio); margin-top: .3rem; }

/* ---------- Card ---------- */
.card {
    position: relative;
    padding: 2rem 1.8rem;
    border-radius: var(--raggio);
    background: var(--vetro);
    border: 1px solid var(--vetro-bordo);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform var(--transizione), border-color var(--transizione), box-shadow var(--transizione);
    overflow: hidden;
}
.card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(46,197,211,.5), transparent);
    opacity: 0;
    transition: opacity var(--transizione);
}
.card:hover { transform: translateY(-6px); border-color: rgba(46,197,211,.28); box-shadow: var(--glow-turchese); }
.card:hover::before { opacity: 1; }

.card-icona {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(46,197,211,.14), rgba(79,181,115,.12));
    border: 1px solid rgba(46,197,211,.22);
    margin-bottom: 1.3rem;
}
.card-icona svg { width: 26px; height: 26px; stroke: var(--turchese); }
.card h3 { margin-bottom: .6rem; font-size: 1.18rem; }
.card p { color: var(--grigio); font-size: .96rem; }

/* ---------- Metodo (timeline) ---------- */
.metodo-passi { display: grid; gap: 0; position: relative; }
.passo {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 1.4rem;
    padding-block: 1.6rem;
    position: relative;
}
.passo:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 31px; top: 74px; bottom: -6px;
    width: 2px;
    background: linear-gradient(180deg, rgba(46,197,211,.4), rgba(79,181,115,.12));
}
.passo-numero {
    width: 64px; height: 64px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--turchese);
    background: var(--vetro);
    border: 1px solid rgba(46,197,211,.3);
    box-shadow: var(--glow-turchese);
}
.passo h3 { margin-bottom: .4rem; }
.passo p { color: var(--grigio); max-width: 560px; }

/* ---------- Slider trasformazioni ---------- */
.slider { position: relative; overflow: hidden; border-radius: var(--raggio); }
.slider-binario { display: flex; transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.slide { min-width: 100%; }
.slide-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 380px;
    background: var(--vetro);
    border: 1px solid var(--vetro-bordo);
    border-radius: var(--raggio);
    overflow: hidden;
}
.slide-card img { width: 100%; height: 100%; object-fit: cover; }
.slide-testo { padding: 2.4rem; display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
.slide-testo blockquote { font-size: 1.12rem; line-height: 1.7; color: var(--bianco); font-style: italic; }
.slide-testo cite { color: var(--turchese); font-style: normal; font-weight: 600; font-size: .92rem; }
.slider-controlli { display: flex; gap: .7rem; justify-content: center; margin-top: 1.4rem; }
.slider-punto {
    width: 34px; height: 4px;
    border-radius: 4px;
    background: rgba(238,244,244,.15);
    transition: background var(--transizione);
}
.slider-punto.attivo { background: var(--grad-accento); }
.slider-freccia {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 46px; height: 46px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(5,9,10,.6);
    border: 1px solid var(--vetro-bordo);
    backdrop-filter: blur(8px);
    transition: var(--transizione);
    z-index: 5;
}
.slider-freccia:hover { border-color: var(--turchese); color: var(--turchese); }
.slider-freccia.prev { left: 1rem; }
.slider-freccia.next { right: 1rem; }

/* ---------- FAQ ---------- */
.faq-lista { display: grid; gap: .9rem; max-width: 780px; margin-inline: auto; }
.faq-voce {
    border: 1px solid var(--vetro-bordo);
    border-radius: var(--raggio-sm);
    background: var(--vetro);
    backdrop-filter: blur(10px);
    overflow: hidden;
    transition: border-color var(--transizione);
}
.faq-voce[open] { border-color: rgba(46,197,211,.3); }
.faq-voce summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.4rem;
    font-weight: 600;
    cursor: pointer;
}
.faq-voce summary::-webkit-details-marker { display: none; }
.faq-voce summary::after {
    content: '+';
    font-size: 1.4rem;
    color: var(--turchese);
    transition: transform var(--transizione);
    flex-shrink: 0;
}
.faq-voce[open] summary::after { transform: rotate(45deg); }
.faq-voce .risposta { padding: 0 1.4rem 1.3rem; color: var(--grigio); }

/* ---------- Blog ---------- */
.articolo-card { padding: 0; display: flex; flex-direction: column; }
.articolo-copertina {
    height: 190px;
    background: linear-gradient(135deg, rgba(14,138,153,.35), rgba(79,181,115,.2)), var(--carbone);
    display: grid; place-items: center;
}
.articolo-copertina svg { width: 46px; height: 46px; stroke: rgba(238,244,244,.5); }
.articolo-corpo { padding: 1.6rem 1.6rem 1.8rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.articolo-categoria { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--turchese); }
.articolo-corpo h3 { font-size: 1.12rem; }
.articolo-corpo p { color: var(--grigio); font-size: .93rem; flex: 1; }
.articolo-data { font-size: .8rem; color: var(--grigio-scuro); }

/* ---------- Form ---------- */
.campo { display: flex; flex-direction: column; gap: .45rem; }
.campo label { font-size: .86rem; font-weight: 600; color: var(--grigio); }
.campo input, .campo textarea, .campo select {
    font: inherit;
    color: var(--bianco);
    background: rgba(238,244,244,.04);
    border: 1px solid rgba(238,244,244,.12);
    border-radius: var(--raggio-sm);
    padding: .85rem 1rem;
    transition: border-color var(--transizione), box-shadow var(--transizione);
}
.campo input:focus, .campo textarea:focus, .campo select:focus {
    outline: none;
    border-color: var(--turchese);
    box-shadow: 0 0 0 3px rgba(46,197,211,.12);
}
.campo textarea { min-height: 140px; resize: vertical; }

/* Select in tema: freccia personalizzata e tendina scura (le opzioni native
   ereditano i colori di sistema: senza queste regole risultano bianche e illeggibili) */
.campo select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%232ec5d3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.7rem;
    cursor: pointer;
}
select option, select optgroup {
    background-color: var(--carbone);
    color: var(--bianco);
}

/* Altri controlli nativi in tema */
input[type="checkbox"], input[type="radio"] { accent-color: var(--turchese); }
input::file-selector-button {
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    color: var(--bianco);
    background: rgba(238,244,244,.08);
    border: 1px solid rgba(238,244,244,.18);
    border-radius: 999px;
    padding: .45rem 1.1rem;
    margin-right: .9rem;
    cursor: pointer;
    transition: border-color var(--transizione), color var(--transizione);
}
input::file-selector-button:hover { border-color: var(--turchese); color: var(--turchese); }

.avviso {
    padding: 1rem 1.3rem;
    border-radius: var(--raggio-sm);
    font-size: .95rem;
    margin-bottom: 1.4rem;
    border: 1px solid;
}
.avviso-ok { background: rgba(79,181,115,.1); border-color: rgba(79,181,115,.4); color: #a4dcb8; }
.avviso-errore { background: rgba(220,90,90,.1); border-color: rgba(220,90,90,.4); color: #eeb0b0; }

/* ---------- Contatti ---------- */
.contatto-voce {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.3rem;
    border-radius: var(--raggio-sm);
    background: var(--vetro);
    border: 1px solid var(--vetro-bordo);
    transition: var(--transizione);
}
.contatto-voce:hover { border-color: rgba(46,197,211,.35); transform: translateX(4px); }
.contatto-voce svg { width: 22px; height: 22px; stroke: var(--turchese); flex-shrink: 0; }
.mappa { border-radius: var(--raggio); overflow: hidden; border: 1px solid var(--vetro-bordo); }
.mappa iframe { width: 100%; height: 380px; border: 0; display: block; filter: grayscale(.6) invert(.9) hue-rotate(160deg); }

/* ---------- CTA finale ---------- */
.cta-banda {
    text-align: center;
    padding: clamp(3rem, 7vw, 5.5rem) 2rem;
    border-radius: calc(var(--raggio) + 8px);
    background:
        radial-gradient(80% 120% at 50% 0%, rgba(14,138,153,.22), transparent 70%),
        var(--carbone);
    border: 1px solid var(--vetro-bordo);
    position: relative;
    overflow: hidden;
}
.cta-banda h2 { margin-bottom: 1rem; }
.cta-banda p { color: var(--grigio); max-width: 480px; margin: 0 auto 2rem; }

/* ---------- Footer ---------- */
.piede {
    border-top: 1px solid var(--vetro-bordo);
    padding: 3.5rem 0 2rem;
    margin-top: var(--sezione);
    background: linear-gradient(180deg, transparent, rgba(14,138,153,.05));
}
.piede-griglia {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.2fr;
    gap: 2.5rem;
    margin-bottom: 2.6rem;
}
.piede h4 { font-size: .95rem; margin-bottom: 1rem; }
.piede ul { display: grid; gap: .55rem; }
.piede a { color: var(--grigio); font-size: .92rem; transition: color var(--transizione); }
.piede a:hover { color: var(--turchese); }
.piede-marchio img { height: 54px; margin-bottom: 1rem; }
.piede-marchio p { color: var(--grigio); font-size: .9rem; max-width: 300px; }
.piede-basso {
    border-top: 1px solid var(--vetro-bordo);
    padding-top: 1.6rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: .82rem;
    color: var(--grigio-scuro);
}

/* Credit VIBEST (come sul sito Maicol Clacson) */
.creato-da {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 1.4rem;
    font-size: .78rem;
    letter-spacing: .06em;
    color: var(--grigio-scuro);
}
.creato-da a {
    color: #c800ff;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(200, 0, 255, .45);
    border-bottom: 1px dotted #c800ff;
    transition: color var(--transizione), text-shadow var(--transizione);
}
.creato-da a:hover {
    color: #ff66ff;
    text-shadow: 0 0 12px rgba(255, 102, 255, .85);
}

/* Social icone */
.social { display: flex; gap: .8rem; margin-top: 1.2rem; }
.social a {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid var(--vetro-bordo);
    transition: var(--transizione);
}
.social a:hover { border-color: var(--turchese); box-shadow: var(--glow-turchese); transform: translateY(-3px); }
.social svg { width: 18px; height: 18px; stroke: var(--grigio); }
.social a:hover svg { stroke: var(--turchese); }

/* ---------- Reveal on scroll ---------- */
.rivela { opacity: 0; transform: translateY(22px); transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1); }
.rivela.visibile { opacity: 1; transform: none; }
.rivela-ritardo-1 { transition-delay: .1s; }
.rivela-ritardo-2 { transition-delay: .2s; }
.rivela-ritardo-3 { transition-delay: .3s; }

/* ---------- Pagina interna (hero ridotto) ---------- */
.pagina-testa {
    padding: calc(90px + clamp(3rem, 7vw, 5rem)) 0 clamp(2.5rem, 5vw, 4rem);
    position: relative;
}
.pagina-testa h1 { max-width: 760px; }
.pagina-testa .testo-grande { max-width: 620px; margin-top: 1.1rem; }

/* ---------- Chi sono ---------- */
.bio-griglia {
    display: grid;
    grid-template-columns: minmax(300px, 460px) 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}
.bio-foto {
    position: sticky;
    top: 110px;
    border-radius: var(--raggio);
    overflow: hidden;
    border: 1px solid var(--vetro-bordo);
    box-shadow: var(--glow-turchese);
}
.bio-foto img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center top; }
.certificazione {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.1rem 1.3rem;
    border-radius: var(--raggio-sm);
    background: var(--vetro);
    border: 1px solid var(--vetro-bordo);
}
.certificazione svg { width: 22px; height: 22px; stroke: var(--smeraldo); flex-shrink: 0; margin-top: .2rem; }
.certificazione strong { display: block; font-size: .98rem; }
.certificazione span { font-size: .88rem; color: var(--grigio); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
    .navigazione {
        position: fixed;
        inset: 0;
        background: var(--nero);
        display: grid;
        place-items: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transizione);
        z-index: 105;
    }
    .navigazione.aperta { opacity: 1; pointer-events: auto; }
    .navigazione ul { flex-direction: column; gap: 1.6rem; text-align: center; }
    .navigazione a { font-size: 1.3rem; }
    .menu-toggle { display: flex; }
    .testata-azioni .btn { display: none; }
    .piede-griglia { grid-template-columns: 1fr 1fr; }
    .slide-card { grid-template-columns: 1fr; }
    .slide-card img { max-height: 320px; }
    .bio-griglia { grid-template-columns: 1fr; }
    .bio-foto { position: static; max-width: 460px; }
}
/* Su schermi piccoli il backdrop-filter delle card costa troppo in scroll:
   vetro leggermente più opaco al posto della sfocatura, resa quasi identica. */
@media (max-width: 760px) {
    .card, .statistica, .faq-voce, .hero-badge, .btn-secondario, .slider-freccia {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(16, 25, 28, .85);
    }
    .btn-secondario { background: rgba(238,244,244,.05); }
    .slider-freccia { background: rgba(5,9,10,.75); }
}

@media (max-width: 560px) {
    .piede-griglia { grid-template-columns: 1fr; gap: 2rem; }
    .hero-cta .btn { width: 100%; }
    .passo { grid-template-columns: 48px 1fr; gap: 1rem; }
    .passo-numero { width: 48px; height: 48px; font-size: 1rem; }
    .passo:not(:last-child)::before { left: 23px; top: 58px; }
}

/* ---------- Accessibilità: riduci animazioni ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
    .rivela { opacity: 1; transform: none; }
    .entra { opacity: 1; transform: none; }
}

/* =====================================================
   BARRETTA "TORNA AL PANNELLO"
   -----------------------------------------------------
   Si vede solo a Giorgio, quando guarda il sito pubblico
   partendo dall'app ADMIN FC. Dentro un'app installata
   non c'e' il tasto indietro del browser: senza questa
   si resta bloccati sul sito.
   Sta in cima, sopra la testata, e scorre via con la
   pagina: non deve rubare spazio mentre guarda il sito.
   ===================================================== */
.barra-admin {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    flex-wrap: wrap;
    padding: .55rem 1rem;
    background: linear-gradient(135deg, rgba(14,138,153,.95), rgba(46,197,211,.85));
    color: #06202a;
    font-size: .85rem;
    font-weight: 600;
    text-align: center;
    /* La testata del sito e' position:fixed a top:0. Se la barretta restasse
       nel flusso normale, la testata le finirebbe SOPRA e coprirebbe logo e
       menu. Quindi: barretta fissa in cima, e la testata scende sotto di lei
       dell'altezza esatta, misurata a schermo (cambia se il testo va a capo). */
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 120;
    /* margine alto delle app a tutto schermo (notch iPhone) */
    padding-top: calc(.55rem + env(safe-area-inset-top, 0px));
}
.barra-admin strong { color: #06202a; }
/* Quando la barretta c'e', tutto scende della sua altezza */
body.con-barra-admin .testata { top: var(--barra-admin-h, 0px); }
body.con-barra-admin { padding-top: var(--barra-admin-h, 0px); }
.barra-admin .btn {
    background: rgba(6,32,42,.85);
    color: #eef4f4;
    border-color: rgba(6,32,42,.5);
    padding: .25rem .8rem;
}
.barra-admin .btn:hover { background: #06202a; color: #fff; }
@media (max-width: 600px) {
    .barra-admin { font-size: .78rem; gap: .5rem; }
}