/* =====================================================================
   Fisiopostura — sito pubblico

   I colori sono quelli del logo: il magenta del profilo e il ciano della
   curva a destra. Il magenta puro non raggiunge il contrasto AA sul bianco
   per il testo normale, quindi per il testo si usa il tono 700 e il puro
   resta ai fondi pieni, dove il bianco sopra va bene.

   Nessun font esterno: Google Fonts significherebbe l'indirizzo IP di ogni
   visitatore mandato a Google a ogni pagina, che su un sito sanitario è una
   segnalazione nell'informativa che possiamo semplicemente non doverci
   scrivere. La pila di sistema è anche più veloce di qualunque font
   scaricato.

   LE ANIMAZIONI SONO UN DI PIÙ, MAI UNA CONDIZIONE. Il contenuto si vede
   sempre: la comparsa graduale si attiva solo se il browser esegue lo
   script (classe «js» sulla radice), e chi ha chiesto al sistema di ridurre
   il movimento non ne vede nessuna.
   ===================================================================== */

:root {
    --magenta-900: #7A1148;
    --magenta-700: #B01F69;
    --magenta-500: #E52988;
    --magenta-300: #F27CB4;
    --magenta-100: #FCE4F0;

    --ciano-900: #005E77;
    --ciano-700: #0089AD;
    --ciano-500: #00B4E4;
    --ciano-300: #6FD5F0;
    --ciano-100: #E0F6FC;

    --neutro-900: #1A1D21;
    --neutro-700: #4A5158;
    --neutro-500: #8A9199;
    --neutro-300: #D5DADD;
    --neutro-200: #E7EAEC;
    --neutro-100: #F4F6F7;
    --bianco: #FFFFFF;

    --positivo: #1E9E62;
    --attenzione: #E08A00;
    --errore: #D32F2F;

    --larghezza: 72rem;
    --raggio: 14px;
    --raggio-grande: 28px;

    --ombra-piccola: 0 1px 2px rgba(26, 29, 33, .06), 0 2px 8px rgba(26, 29, 33, .05);
    --ombra: 0 2px 6px rgba(26, 29, 33, .06), 0 12px 32px rgba(26, 29, 33, .08);
    --ombra-magenta: 0 8px 24px rgba(229, 41, 136, .28);

    /* Area di tocco minima: sotto i 44 px un pulsante diventa difficile da
       centrare con un dito. Vale ovunque, non solo sul telefono. */
    --tocco: 44px;

    /* Il pattern esagonale ripreso dal banner del marchio: è l'unico
       elemento decorativo dell'identità esistente, e tenerlo lega il sito
       nuovo a quello che i pazienti hanno già visto. */
    --trama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 0l24 14v28L28 56 4 42V14z' fill='none' stroke='%2300B4E4' stroke-opacity='.16' stroke-width='1.2'/%3E%3C/svg%3E");
}

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

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

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--neutro-900);
    background: var(--bianco);
    overflow-x: hidden;
}

/* --- Elementi di base ---------------------------------------------- */

h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); }
h3 { font-size: 1.2rem; letter-spacing: -.01em; }

p, ul, ol { margin: 0 0 1.15em; }
ul, ol { padding-left: 1.3em; }

a { color: var(--magenta-700); text-underline-offset: .18em; }
a:hover { color: var(--magenta-900); }

img { max-width: 100%; height: auto; display: block; }

strong { font-weight: 700; }

/* Il contorno di messa a fuoco non si toglie mai: è come si naviga il sito
   con la tastiera, ed è un requisito WCAG. Si rende visibile, non invisibile. */
:focus-visible {
    outline: 3px solid var(--ciano-500);
    outline-offset: 3px;
    border-radius: 6px;
}

.contenitore {
    width: 100%;
    max-width: var(--larghezza);
    margin: 0 auto;
    padding: 0 1.25rem;
}

.salta-al-contenuto {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--magenta-700);
    color: var(--bianco);
    padding: .75rem 1.25rem;
    z-index: 200;
    border-radius: 0 0 var(--raggio) 0;
}
.salta-al-contenuto:focus { left: 0; color: var(--bianco); }

/* --- Comparsa graduale --------------------------------------------- */
/* Si attiva SOLO con «js» sulla radice: senza script il contenuto è
   semplicemente visibile, che è il comportamento giusto quando qualcosa non
   parte. Le classi le assegna l'osservatore in fondo alla pagina. */

.js .rivela {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1);
    will-change: opacity, transform;
}
.js .rivela.visibile { opacity: 1; transform: none; }

/* Gli elementi di un gruppo entrano uno dopo l'altro: dà il senso della
   sequenza senza far aspettare nessuno più di mezzo secondo. */
.js .rivela--1 { transition-delay: .08s; }
.js .rivela--2 { transition-delay: .16s; }
.js .rivela--3 { transition-delay: .24s; }
.js .rivela--4 { transition-delay: .32s; }

/* --- Testata -------------------------------------------------------- */

.testata {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(26, 29, 33, .07);
}

.testata .contenitore {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 4.5rem;
    flex-wrap: wrap;
}

.marchio {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none;
    padding: .4rem 0;
    font-weight: 800;
    font-size: clamp(1.05rem, .9rem + .6vw, 1.25rem);
    letter-spacing: -.02em;
    color: var(--neutro-900);
    /* Su schermo stretto il nome si accorcia invece di spingere fuori il
       pulsante del menu. */
    min-width: 0;
}
.marchio__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marchio img {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 10px;
    box-shadow: var(--ombra-piccola);
    transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}
.marchio:hover img { transform: rotate(-6deg) scale(1.06); }
.marchio b { color: var(--magenta-500); font-weight: 800; }
.marchio span { color: var(--ciano-500); font-weight: 600; }

.apri-menu { display: none; }

.etichetta-menu {
    display: none;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: var(--tocco);
    min-width: var(--tocco);
    padding: .5rem .9rem;
    border: 1px solid var(--neutro-300);
    border-radius: 999px;
    cursor: pointer;
    font-weight: 700;
    color: var(--neutro-700);
    background: var(--bianco);
    transition: border-color .2s, color .2s;
}
.etichetta-menu:hover { border-color: var(--magenta-300); color: var(--magenta-700); }

.menu ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: .2rem;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.menu a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--tocco);
    padding: .5rem .95rem;
    border-radius: 999px;
    text-decoration: none;
    color: var(--neutro-700);
    font-weight: 600;
    transition: color .2s, background-color .2s;
}
.menu a:hover { color: var(--magenta-700); background: var(--magenta-100); }

/* La sottolineatura della voce corrente cresce da sinistra invece di
   comparire di colpo. */
.menu a[aria-current="page"] { color: var(--magenta-700); }
.menu a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: .95rem;
    right: .95rem;
    bottom: .35rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--magenta-500), var(--ciano-500));
    transform-origin: left;
    animation: cresci .45s cubic-bezier(.2, .7, .3, 1);
}
@keyframes cresci { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.testata__azione { display: none; }

/* Il richiamo nel menu è un pulsante pieno, non una voce.
   «.menu a» ha un peso più alto di «.pulsante--principale» e gli imponeva il
   grigio scuro del menu: scritta grigia su fondo magenta, illeggibile. Si
   ripete qui la regola con lo stesso peso del selettore che la stava
   sovrascrivendo. */
.menu a.testata__azione,
.menu a.testata__azione:hover {
    color: var(--bianco);
    background: linear-gradient(100deg, var(--magenta-500), var(--magenta-700));
}

@media (min-width: 62em) {
    .testata__azione { display: inline-flex; }
}

@media (max-width: 47.99em) {
    .etichetta-menu { display: inline-flex; }

    .menu {
        display: none;
        width: 100%;
        padding-bottom: .75rem;
    }
    .apri-menu:checked ~ .menu { display: block; animation: apri .25s ease; }

    @keyframes apri { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

    .menu ul { flex-direction: column; gap: 0; align-items: stretch; }
    .menu a { padding: .9rem .75rem; border-radius: 10px; }
    .menu a[aria-current="page"] { background: var(--magenta-100); }
    .menu a[aria-current="page"]::after { display: none; }
}

/* --- Apertura ------------------------------------------------------- */

.apertura {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 82% 8%, var(--ciano-100) 0%, transparent 55%),
        radial-gradient(90% 80% at 6% 0%, var(--magenta-100) 0%, transparent 52%),
        linear-gradient(180deg, #FBFCFD 0%, var(--bianco) 100%);
    padding: clamp(2.5rem, 1rem + 6vw, 5rem) 0 0;
}

/* La trama esagonale del marchio, appena percettibile, che scorre
   lentissima: dà profondità senza chiedere attenzione. */
.apertura::before {
    content: "";
    position: absolute;
    inset: -64px;
    background-image: var(--trama);
    opacity: .5;
    animation: trama 90s linear infinite;
    pointer-events: none;
}
@keyframes trama { from { transform: translate(0, 0); } to { transform: translate(56px, 64px); } }

.apertura__griglia {
    position: relative;
    display: grid;
    gap: 2rem;
    align-items: center;

    /*
     * «minmax(0, 1fr)» e non «1fr»: la larghezza minima di una traccia di
     * griglia vale «auto», cioè la larghezza intrinseca del contenuto. La
     * fotografia è larga 868 px, quindi su un telefono la colonna si
     * allargava fino a lì e la pagina scorreva di lato — con il testo
     * tagliato fuori dallo schermo. È il difetto che la regola RENNA sul
     * «nessuno scorrimento orizzontale» vieta, e si vede solo provando.
     */
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 62em) {
    .apertura__griglia { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 3rem; }
}

/* Stessa ragione: senza, un figlio largo allarga la colonna che lo contiene. */
.apertura__testo, .apertura__figura { min-width: 0; }

.apertura__testo { padding-bottom: 3rem; }

/*
 * L'occhiello contiene un testo che il cliente può allungare quanto vuole
 * («L'app di Dott.ssa Nome Cognome — FisioPostura»). Con «inline-flex» e
 * niente altro il testo non va a capo e la pastiglia cresce oltre lo
 * schermo, portandosi dietro tutta la colonna: su un telefono il titolo
 * finiva tagliato a metà parola. Da cui il limite in larghezza e il
 * ritorno a capo consentito.
 */
.occhiello {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: 100%;
    padding: .4rem .9rem .4rem .5rem;
    margin-bottom: 1.25rem;
    border-radius: 20px;
    background: var(--bianco);
    border: 1px solid var(--neutro-200);
    box-shadow: var(--ombra-piccola);
    font-size: .9rem;
    font-weight: 600;
    color: var(--neutro-700);
    text-align: left;
}
.occhiello img { width: 1.6rem; height: 1.6rem; border-radius: 6px; flex: 0 0 auto; }

.apertura h1 { margin-bottom: .35em; }

/* Il gradiente sul titolo prende i due colori del logo nell'ordine in cui
   stanno nell'icona: magenta a sinistra, ciano a destra. */
.sfumato {
    background: linear-gradient(100deg, var(--magenta-500) 10%, var(--ciano-500) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Se il browser non capisce il ritaglio sul testo resta il magenta,
       che è leggibile: mai un titolo invisibile. */
    -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .sfumato { color: var(--magenta-700); -webkit-text-fill-color: currentColor; }
}

.apertura__sommario {
    font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
    color: var(--neutro-700);
    max-width: 34rem;
}
.apertura__sommario p:last-child { margin-bottom: 0; }

.azioni {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.75rem;
}

/* --- La figura --------------------------------------------------- */

.apertura__figura {
    position: relative;
    align-self: center;
    display: flex;
    justify-content: center;
}

/* La macchia colorata dietro la fotografia: due cerchi sfumati che si
   deformano piano. È l'unica animazione continua della pagina, ed è lenta
   apposta — un movimento veloce in fondo allo sguardo stanca. */
.apertura__figura::before {
    content: "";
    position: absolute;
    inset: 6% 4% 0;
    background: linear-gradient(150deg, var(--magenta-500), var(--ciano-500));
    opacity: .16;
    border-radius: 48% 52% 42% 58% / 55% 45% 55% 45%;
    animation: macchia 18s ease-in-out infinite;
}
@keyframes macchia {
    0%, 100% { border-radius: 48% 52% 42% 58% / 55% 45% 55% 45%; transform: rotate(0deg) scale(1); }
    50%      { border-radius: 58% 42% 55% 45% / 42% 58% 42% 58%; transform: rotate(4deg) scale(1.04); }
}

.apertura__figura img {
    position: relative;
    /* Alta quanto basta: la fotografia accompagna il testo, non gli fa
       concorrenza. Senza il limite in altezza su uno schermo largo diventa
       la cosa più grande della pagina. */
    width: auto;
    max-width: 100%;
    max-height: min(34rem, 68vh);

    /*
     * La fotografia è ritagliata dal banner del cliente e si porta dietro il
     * suo fondo azzurrino: senza questa maschera si vedrebbe il rettangolo
     * dell'immagine stagliato sulla pagina, che è la cosa che fa sembrare
     * «incollato» un sito. I bordi sfumano nel fondo dell'apertura e la
     * figura sembra immersa nella pagina invece che appoggiata sopra.
     *
     * Si sfuma sotto e ai due lati, non in alto: là c'è la testa, e sfumarla
     * la farebbe sparire a metà.
     */
    -webkit-mask-image:
        linear-gradient(to bottom, #000 62%, transparent 99%),
        linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to bottom, #000 62%, transparent 99%),
        linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
    mask-composite: intersect;
}

/* Dove le maschere non ci sono, la figura resta un rettangolo: gli si danno
   angoli arrotondati e un'ombra, così sembra una scheda voluta e non un
   ritaglio dimenticato. */
@supports not ((mask-composite: intersect) or (-webkit-mask-composite: source-in)) {
    .apertura__figura img {
        border-radius: var(--raggio-grande);
        box-shadow: var(--ombra);
    }
}

/* --- Pulsanti ------------------------------------------------------- */

.pulsante {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: var(--tocco);
    padding: .8rem 1.6rem;
    border: 2px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    background: var(--neutro-100);
    color: var(--neutro-900);
    transition: transform .22s cubic-bezier(.2, .7, .3, 1), box-shadow .22s, background-color .22s, color .22s;
}
.pulsante:hover { transform: translateY(-2px); }
.pulsante:active { transform: translateY(0); }

.pulsante--principale {
    background: linear-gradient(100deg, var(--magenta-500), var(--magenta-700));
    color: var(--bianco);
    box-shadow: var(--ombra-magenta);
}
.pulsante--principale:hover { color: var(--bianco); box-shadow: 0 12px 30px rgba(229, 41, 136, .38); }

.pulsante--contorno {
    background: var(--bianco);
    border-color: var(--neutro-200);
    color: var(--neutro-900);
    box-shadow: var(--ombra-piccola);
}
.pulsante--contorno:hover { border-color: var(--magenta-300); color: var(--magenta-700); }

.pulsante--chiaro {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .5);
    color: var(--bianco);
}
.pulsante--chiaro:hover { background: var(--bianco); color: var(--magenta-700); }

/* La freccia che scorre in avanti al passaggio del mouse. */
.pulsante .freccia { transition: transform .22s cubic-bezier(.2, .7, .3, 1); }
.pulsante:hover .freccia { transform: translateX(4px); }

/* --- I tre store ---------------------------------------------------- */

.store {
    display: flex;
    flex-wrap: wrap;
    /* Allineati al centro perché nella stessa riga convivono due altezze: il
       distintivo di un negozio già aperto e l'etichetta «in arrivo» di uno che
       deve ancora aprire. */
    align-items: center;
    gap: .6rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

/*
 * OGNI NEGOZIO IN UNA CASELLA ALTA UGUALE, CON IL SUO CONTENUTO IN MEZZO.
 *
 * Senza questa regola i tre non si allineano fra loro, e non è un caso: la
 * voce dell'elenco è un blocco di testo, e quello che ci sta dentro — un
 * collegamento `inline-flex` — si posa sulla LINEA DI BASE della riga, come
 * farebbe una parola. La linea di base di un distintivo cade dove finisce la
 * sua immagine, e le immagini finiscono in punti diversi: quella di Google
 * porta il margine di rispetto dentro il file, quelle di Apple e di Huawei
 * arrivano nude e il margine glielo dà la casella. Risultato: distintivi alti
 * uguali ma appoggiati a quote diverse — nell'apertura si vedeva AppGallery
 * più basso di Google Play di tre pixel e mezzo.
 *
 * Rendendo la voce dell'elenco un contenitore flex la linea di base esce dal
 * gioco: il contenuto si centra nella casella e i tre distintivi condividono
 * la stessa mezzeria, comunque siano fatti i file.
 *
 * `min-height` tiene la casella alta quanto il distintivo più alto anche
 * quando dentro c'è altro. È il posto dell'App Store finché la revisione di
 * Apple non finisce: l'etichetta «in arrivo» sta in mezzo alla stessa casella,
 * in riga con gli altri due, e il giorno che l'app esce il suo distintivo — che
 * è già in casa e aspetta solo l'indirizzo — prende quel posto senza spostare
 * niente.
 */
.store > li {
    display: flex;
    align-items: center;
    min-height: 3.5rem;
}

.store a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: var(--tocco);
    padding: .55rem 1.1rem;
    border: 1.5px solid var(--neutro-300);
    border-radius: 999px;
    background: var(--bianco);
    color: var(--neutro-900);
    text-decoration: none;
    font-weight: 600;
    font-size: .92rem;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
/* Nell'apertura i richiami ai negozi sono squadrati e senza contorno — deciso
   da Matteo il 23 agosto 2026. Vale per tutti e tre gli stati in cui un negozio
   si presenta: il distintivo, il collegamento scritto e l'etichetta «in
   arrivo», che devono restare della stessa forma o la riga sembra composta da
   pezzi di tre siti diversi.

   Sui distintivi toglie anche una cosa che non doveva esserci: la pillola
   bianca con il bordo intorno al marchio arrivava da `.store a`, e le regole
   d'uso di Google e Apple dicono che sopra il distintivo non si aggiunge
   niente — né bordi, né angoli nostri. */
.apertura .store a,
.apertura .store__attesa {
    border-width: 0;
    border-radius: 0;
    /* Fondo trasparente: il distintivo porta il suo, e quello che ci stava
       sotto era una scatola bianca nostra intorno a un marchio altrui. */
    background: transparent;
}

/* L'area sensibile è il distintivo, non la casella che lo contiene.
   Il `padding` di `.store a` allargava il collegamento di un dito tutto
   intorno all'immagine: il cursore entrava lì e il distintivo si sollevava
   mentre il mouse era ancora sul vuoto. Qui l'area torna a coincidere con
   quello che si vede. */
.apertura .store__badge { padding: 0; }

/* Tranne il distintivo di Apple, che arriva nudo: quel padding è il suo
   margine di rispetto e non è decorazione (v. sopra). Sta dopo la riga
   precedente apposta — hanno lo stesso peso e vince l'ultima. */
.apertura .store__badge--nudo { padding: .4rem; }

/* E al passaggio del mouse niente ombra: senza il contorno e senza gli angoli
   tondi, l'ombra restava l'unica cosa a disegnare una scatola intorno al
   marchio — proprio quella che si è appena tolta. Il richiamo si solleva e
   basta, che è già un segnale sufficiente. */
.apertura .store a:hover {
    box-shadow: none;
}

.store a:hover {
    border-color: var(--ciano-500);
    transform: translateY(-2px);
    box-shadow: var(--ombra-piccola);
}

/* Il distintivo ufficiale del negozio — quello di Google Play, quello
   dell'App Store e quello di AppGallery: sono in casa tutti e tre, serviti dal
   nostro server.

   NON SI RIDISEGNA E NON SI RICOLORA. Non prende il bordo, lo sfondo e il
   raggio degli altri pulsanti: sono le condizioni d'uso dei marchi, e sarebbero
   comunque un contorno intorno a un'immagine che il contorno ce l'ha già.
   L'unica cosa che cambia è la misura.

   L'altezza è quella dell'immagine INTERA, che porta dentro di sé il margine di
   rispetto preteso dalle regole del marchio: il distintivo vero è più basso di
   circa un quarto. A 3.5rem l'immagine misura 56 px e il distintivo dentro ne
   misura 43, cioè sopra il minimo che Google chiede e con l'area di tocco a
   posto (la larghezza è più di tre volte l'altezza). */
.store__badge {
    display: inline-flex;
    /* Serve solo a dare una forma al contorno di messa a fuoco. */
    border-radius: 10px;
    transition: transform .2s;
}
.store__badge:hover { transform: translateY(-2px); }

.store__badge img {
    display: block;
    height: 3.5rem;
    width: auto;

    /*
     * LA RETE CHE IMPEDISCE AL MARCHIO DI ARRIVARE STORTO.
     *
     * «height» fissa e «width: auto» tengono le proporzioni finché nella riga
     * c'è lo spazio. Quando non c'è, no: un distintivo più largo della riga che
     * lo contiene viene ristretto dal flex, e siccome l'altezza è dichiarata
     * resta quella — l'immagine si schiaccia. È il caso della fascia in fondo a
     * 360 px, dove fra i margini del riquadro colorato restano 248 px utili:
     * qualunque distintivo con un rapporto sopra 3,9:1 ci arriva schiacciato. Il
     * distintivo di Google (2,58:1) e quello di Apple (2,99:1) ci stanno, quello
     * di AppGallery — che porta scritto il nome del negozio per esteso — no.
     *
     * «object-fit: contain» disegna l'immagine dentro la casella conservandone
     * le proporzioni: se la casella si stringe, il distintivo rimpicciolisce
     * tutto insieme e sopra e sotto resta spazio trasparente. Non si deforma e
     * non si ritaglia — le due cose che le regole d'uso dei marchi vietano — e
     * la casella resta alta com'era, quindi l'area di tocco non scende.
     *
     * «max-width» impedisce alla casella di uscire dalla riga nei punti in cui
     * il flex non la stringerebbe da sé.
     */
    max-width: 100%;
    object-fit: contain;
}

/* Il distintivo di Apple arriva nudo, quello di Google porta il suo margine
   dentro il file: alla stessa altezza, affiancati, quello di Apple sembrerebbe
   un terzo più alto dell'altro. Qui l'altezza è quella del distintivo vero di
   Google — 43 px in apertura, 49 px nella fascia — e lo spazio intorno lo mette
   il padding. È anche il modo giusto di dare ad Apple il margine di rispetto
   che le sue regole pretendono: senza toccare il file. */
.store__badge--nudo { padding: .4rem; }
.store__badge--nudo img { height: 2.7rem; }

/* Nella fascia colorata in fondo alla home i distintivi stanno in mezzo agli
   altri richiami: un filo più grandi, perché lì sono il richiamo principale. */
.azioni--store { align-items: center; }
.azioni--store .store__badge img { height: 4rem; }
.azioni--store .store__badge--nudo img { height: 3.1rem; }

/* Lo store non ancora aperto: stessa forma, tono spento e nessun effetto al
   passaggio del mouse. Deve leggersi come un'informazione, non come un
   pulsante che non risponde. */
.store__attesa {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: var(--tocco);
    padding: .55rem 1.1rem;
    border: 1.5px dashed var(--neutro-300);
    border-radius: 999px;
    color: var(--neutro-500);
    font-weight: 600;
    font-size: .92rem;
}
.store__attesa small {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* Lo stesso, in versione chiara, dentro la fascia colorata della home. */
.pulsante--attesa {
    background: transparent;
    border: 2px dashed rgba(255, 255, 255, .45);
    color: rgba(255, 255, 255, .85);
    cursor: default;
}
.pulsante--attesa:hover { transform: none; }

/* --- Sezioni -------------------------------------------------------- */

.sezione { padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0; }
.sezione--chiara { background: var(--neutro-100); }

.sezione__titolo { max-width: 42rem; margin-bottom: 2.5rem; }
.sezione__titolo p { color: var(--neutro-700); font-size: 1.1rem; margin-bottom: 0; }

.sezione__titolo--centrato { margin-left: auto; margin-right: auto; text-align: center; }

.etichetta-sezione {
    display: inline-block;
    margin-bottom: .75rem;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ciano-700);
}

.griglia {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

/* --- I passi -------------------------------------------------------- */

.passo {
    position: relative;
    background: var(--bianco);
    border: 1px solid var(--neutro-200);
    border-radius: var(--raggio-grande);
    padding: 2rem 1.6rem 1.6rem;
    box-shadow: var(--ombra-piccola);
    transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s, border-color .3s;
}
.passo:hover { transform: translateY(-6px); box-shadow: var(--ombra); border-color: var(--magenta-100); }

.passo__numero {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.1rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--magenta-500), var(--ciano-500));
    color: var(--bianco);
    font-weight: 800;
    font-size: 1.25rem;
    box-shadow: var(--ombra-magenta);
}

.passo h3 { margin-bottom: .4rem; }
.passo p { color: var(--neutro-700); margin-bottom: 0; }

/* --- Le patologie --------------------------------------------------- */

.patologie {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.patologie li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.15rem;
    border-radius: 999px;
    background: var(--bianco);
    border: 1.5px solid var(--neutro-200);
    font-weight: 600;
    color: var(--neutro-900);
    transition: border-color .25s, transform .25s, box-shadow .25s;
}
.patologie li:hover {
    border-color: var(--magenta-300);
    transform: translateY(-2px);
    box-shadow: var(--ombra-piccola);
}
.patologie li::before {
    content: "";
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--magenta-500), var(--ciano-500));
    flex: 0 0 auto;
}

/* --- I numeri ------------------------------------------------------- */

.numeri-fatti {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.fatto {
    padding: 1.75rem 1.5rem;
    background: var(--bianco);
    border-radius: var(--raggio-grande);
    border: 1px solid var(--neutro-200);
    box-shadow: var(--ombra-piccola);
    transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s;
}
.fatto:hover { transform: translateY(-4px); box-shadow: var(--ombra); }

.fatto__valore {
    display: block;
    font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    background: linear-gradient(120deg, var(--magenta-500), var(--ciano-500));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    margin-bottom: .5rem;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .fatto__valore { color: var(--magenta-700); -webkit-text-fill-color: currentColor; }
}

.fatto p { color: var(--neutro-700); margin: 0; font-size: .98rem; }

/* --- Richiamo finale ------------------------------------------------ */

.richiamo {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, var(--magenta-700) 0%, var(--magenta-500) 45%, var(--ciano-500) 100%);
    color: var(--bianco);
    border-radius: var(--raggio-grande);
    padding: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
    text-align: center;
    box-shadow: var(--ombra);
}
.richiamo::before {
    content: "";
    position: absolute;
    inset: -64px;
    background-image: var(--trama);
    opacity: .5;
    filter: brightness(3);
    animation: trama 90s linear infinite;
}
.richiamo > * { position: relative; }
.richiamo h2 { color: var(--bianco); }
.richiamo p { color: rgba(255, 255, 255, .92); max-width: 40rem; margin-inline: auto; }
.richiamo .azioni { justify-content: center; }

.richiamo__nota {
    margin: 1.25rem auto 0;
    font-size: .95rem;
    color: rgba(255, 255, 255, .82);
}
.richiamo__nota a { color: var(--bianco); font-weight: 700; }

.richiamo__icona {
    width: 5rem;
    height: 5rem;
    margin: 0 auto 1.25rem;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
    animation: fluttua 6s ease-in-out infinite;
}
@keyframes fluttua {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* --- Pagine di contenuto -------------------------------------------- */

.pagina { padding: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0 clamp(3rem, 2rem + 3vw, 4.5rem); }

.pagina__intestazione {
    background:
        radial-gradient(100% 100% at 90% 0%, var(--ciano-100) 0%, transparent 60%),
        radial-gradient(80% 100% at 0% 0%, var(--magenta-100) 0%, transparent 55%);
    padding: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0 clamp(1.5rem, 1rem + 2vw, 2.5rem);
    border-bottom: 1px solid var(--neutro-200);
}
.pagina__intestazione h1 { margin-bottom: 0; }

/* Il testo lungo si legge meglio stretto: oltre i 70 caratteri per riga
   l'occhio fatica a ritrovare l'inizio della riga successiva. */
.pagina__corpo { max-width: 46rem; font-size: 1.075rem; }
.pagina__corpo > *:last-child { margin-bottom: 0; }
.pagina__corpo h2 { margin-top: 2.25rem; }
.pagina__corpo h3 { margin-top: 1.75rem; }
.pagina__corpo li { margin-bottom: .4rem; }

.pagina__corpo blockquote {
    margin: 1.75rem 0;
    padding: .35rem 0 .35rem 1.35rem;
    border-left: 4px solid var(--magenta-300);
    color: var(--neutro-700);
    font-style: italic;
}

.pagina__corpo table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: .96rem;
}
.pagina__corpo th, .pagina__corpo td {
    padding: .7rem .8rem;
    border-bottom: 1px solid var(--neutro-200);
    text-align: left;
    vertical-align: top;
}
.pagina__corpo th { background: var(--neutro-100); font-weight: 700; }

/* Una tabella dentro un testo può essere più larga dello schermo: scorre
   lei, non la pagina. Le tabelle scritte dal pannello non hanno un
   contenitore, quindi glielo si dà qui. */
.pagina__corpo table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (min-width: 48em) {
    .pagina__corpo table { display: table; }
}

.pagina__corpo code {
    padding: .12em .4em;
    border-radius: 5px;
    background: var(--neutro-100);
    border: 1px solid var(--neutro-200);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .9em;
}

/* Il segnaposto di un dato che manca ancora: deve saltare all'occhio, non
   passare inosservato in mezzo al testo. */
.pagina__corpo mark {
    background: #FDF4E3;
    color: #7A4A00;
    padding: .1em .45em;
    border-radius: 5px;
    font-weight: 700;
    border: 1px dashed var(--attenzione);
}

.nota-aggiornamento { color: var(--neutro-500); font-size: .92rem; }

/* --- Recapiti ------------------------------------------------------- */

.recapiti {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem;
}

.recapiti li {
    padding: 1.25rem;
    background: var(--bianco);
    border: 1px solid var(--neutro-200);
    border-radius: var(--raggio);
    box-shadow: var(--ombra-piccola);
}
.recapiti strong {
    display: block;
    color: var(--ciano-700);
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .3rem;
}
.recapiti a { font-weight: 700; text-decoration: none; }
.recapiti a:hover { text-decoration: underline; }

/* --- Contatti: modulo e mappa affiancati ---------------------------- */

/* Le due colonne hanno la stessa larghezza e la stessa altezza. «minmax(0,
   1fr)» e non «1fr»: la traccia «1fr» non scende sotto la larghezza naturale
   del suo contenuto, e un riquadro di mappa la spingerebbe fuori pagina. */
.contatti__griglia {
    display: grid;
    gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    align-items: stretch;
    margin-top: 2.5rem;
}

.contatti__colonna { min-width: 0; display: flex; flex-direction: column; }
.contatti__colonna > h2 { margin-top: 0; }

@media (min-width: 62em) {
    .contatti__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* La mappa occupa tutto lo spazio che avanza nella colonna: così è alta
   quanto il modulo accanto, che è quello che serve perché le due metà si
   leggano come una cosa sola. */
.mappa {
    position: relative;
    flex: 1;
    min-height: 22rem;
    overflow: hidden;
    border-radius: var(--raggio-grande);
    border: 1px solid var(--neutro-200);
    background:
        var(--trama),
        linear-gradient(150deg, var(--magenta-100), var(--ciano-100));
}

/* Una volta caricata, la mappa si prende tutto: niente sfondo, niente
   bordo interno che spunti da sotto. */
.mappa--caricata { background: var(--neutro-200); }
.mappa iframe { display: block; width: 100%; height: 100%; border: 0; }

.mappa__invito {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    height: 100%;
    padding: 2rem 1.5rem;
    text-align: center;
}

.mappa__segno { color: var(--magenta-500); }

.mappa__indirizzo {
    margin: 0;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--neutro-900);
}

.mappa__nota {
    margin: 0;
    max-width: 26rem;
    font-size: .88rem;
    color: var(--neutro-700);
}

.azioni--compatte { margin-top: .5rem; justify-content: center; }

@media (max-width: 61.99em) {
    /* In colonna la mappa non deve rubare mezzo schermo: quanto basta per
       riconoscere la via, poi si tocca per aprirla in grande. */
    .mappa { min-height: 18rem; }
}

/* --- Moduli --------------------------------------------------------- */

.modulo {
    max-width: 36rem;
    background: var(--bianco);
    border: 1px solid var(--neutro-200);
    border-radius: var(--raggio-grande);
    padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
    box-shadow: var(--ombra-piccola);
}

.campo { margin-bottom: 1.25rem; }

.campo label {
    display: block;
    font-weight: 700;
    margin-bottom: .4rem;
    color: var(--neutro-900);
}

.campo__aiuto {
    display: block;
    font-weight: 400;
    font-size: .9rem;
    color: var(--neutro-700);
    margin-top: -.15rem;
    margin-bottom: .45rem;
}

.campo input,
.campo textarea,
.campo select {
    width: 100%;
    min-height: var(--tocco);
    padding: .7rem .9rem;
    border: 1.5px solid var(--neutro-300);
    border-radius: 12px;
    font: inherit;
    color: var(--neutro-900);
    background: var(--bianco);
    /* 16px è la soglia sotto la quale iOS ingrandisce la pagina quando si
       tocca un campo, e poi la lascia ingrandita. */
    font-size: max(1rem, 16px);
    transition: border-color .2s, box-shadow .2s;
}

.campo textarea { min-height: 8.5rem; resize: vertical; }

.campo input:focus, .campo textarea:focus, .campo select:focus {
    border-color: var(--ciano-500);
    box-shadow: 0 0 0 4px rgba(0, 180, 228, .14);
    outline: none;
}

.campo--errore input,
.campo--errore textarea,
.campo--errore select { border-color: var(--errore); }
.campo--errore input:focus { box-shadow: 0 0 0 4px rgba(211, 47, 47, .12); }

.campo__errore {
    display: block;
    color: var(--errore);
    font-size: .9rem;
    font-weight: 600;
    margin-top: .35rem;
}

.campo--consenso {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: 1rem;
    background: var(--neutro-100);
    border-radius: 12px;
}
.campo--consenso input {
    width: 1.4rem;
    height: 1.4rem;
    min-height: 0;
    margin: .1rem 0 0;
    flex: 0 0 auto;
    accent-color: var(--magenta-500);
}
.campo--consenso label { font-weight: 400; margin: 0; font-size: .95rem; }

.obbligatorio { color: var(--errore); }

/* --- Messaggi ------------------------------------------------------- */

.messaggio {
    padding: 1rem 1.2rem;
    border-radius: 12px;
    border-left: 4px solid;
    margin-bottom: 1.5rem;
    font-weight: 500;
    animation: entra .35s cubic-bezier(.2, .7, .3, 1);
}
@keyframes entra { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.messaggio--successo { background: #E8F6EF; border-color: var(--positivo); color: #10603A; }
.messaggio--errore   { background: #FDECEC; border-color: var(--errore);   color: #8C1D1D; }
.messaggio--avviso   { background: #FDF4E3; border-color: var(--attenzione); color: #7A4A00; }

/* --- Piede ---------------------------------------------------------- */

/* Nessun margine sopra: il piede attacca alla sezione precedente. Uno
   spazio bianco fra il contenuto e il piede si legge come una pagina
   finita male. */
.piede {
    background: var(--neutro-900);
    color: var(--neutro-300);
    padding: 3rem 0 1.75rem;
    font-size: .95rem;
    margin-top: 0;
}

.piede__griglia {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.piede__marchio {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--bianco);
    text-decoration: none;
    margin-bottom: .75rem;
}
.piede__marchio img { width: 2.2rem; height: 2.2rem; border-radius: 8px; }

.piede h2 {
    font-size: .82rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--neutro-500);
    margin-bottom: .9rem;
}

.piede ul { list-style: none; padding: 0; margin: 0; }
.piede li { margin-bottom: .5rem; }

.piede a { color: var(--neutro-300); text-decoration: none; transition: color .2s; }
.piede a:hover { color: var(--bianco); text-decoration: underline; }

.piede p { margin-bottom: .45rem; }

.piede__chiusura {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    justify-content: space-between;
    padding-top: 1.5rem;
    color: var(--neutro-500);
    font-size: .88rem;
}
.piede__chiusura p { margin: 0; }

/* La firma di chi ha fatto il sito: «Sviluppo» e il marchio sulla stessa
   riga, allineati al centro delle lettere e non alla base. L'altezza è
   dichiarata qui e la larghezza si adegua da sola — il file è largo cinque
   volte più che alto, e fissare tutte e due le misure lo schiaccerebbe. */
.piede__autore {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

.piede__renma {
    display: block;
    height: 1.15rem;
    /* Il disegno è largo più di quattro volte l'altezza: fissare solo
       l'altezza e lasciare che la larghezza segua è l'unico modo perché non
       si schiacci. Un SVG senza larghezza dichiarata, in certi browser, si
       prende tutto lo spazio che trova. */
    width: auto;
    transition: opacity .2s;
}
.piede__autore a:hover .piede__renma { opacity: .75; }

/* --- Stampa --------------------------------------------------------- */

@media print {
    .testata, .piede, .azioni, .store, .salta-al-contenuto, .richiamo { display: none; }
    body { font-size: 11pt; }
    .apertura::before, .apertura__figura { display: none; }
}

/* Chi ha chiesto al sistema operativo di ridurre le animazioni non ne deve
   vedere nessuna: per certe persone il movimento sullo schermo provoca
   nausea o emicrania. Non è una preferenza estetica. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .js .rivela { opacity: 1; transform: none; }
}