/* =========================================================================
   Falegnameria Ceresio - foglio di stile unico
   =========================================================================
   Il sito e' una landing sola (marchio + modulo di contatto) piu' due
   pagine di servizio: informativa privacy e 404. Da qui sono spariti gli
   stili di hero, schede prodotto, blocchi testo/immagine e menu a tendina:
   non c'era piu' markup che li usasse, e un foglio che descrive pagine
   inesistenti e' solo peso da scaricare e da mantenere.

   Ogni valore ricorrente e' un token in :root: per cambiare un colore o un
   ritmo si tocca un punto solo.

   Indice
     1. Font
     2. Token
     3. Reset e base
     4. Tipografia
     5. Impaginazione
     6. Testata (solo pagine di servizio)
     7. Landing: marchio e pannello
     8. Bottoni
     9. Modulo e avvisi di esito
    10. Recapiti
    11. Pagine di servizio (privacy, 404)
    12. Pie' di pagina
    13. Utilita', movimento ridotto, stampa
   ========================================================================= */

/* 1. Font ---------------------------------------------------------------- */

/* Roboto e' servito dal nostro dominio, non da fonts.gstatic.com. Oltre a
   togliere una connessione esterna dal percorso critico, evita di trasmettere
   a Google l'indirizzo IP di chi visita il sito. */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300 900;      /* un solo file variabile copre tutti i pesi */
    font-display: swap;         /* il testo resta leggibile durante il caricamento */
    src: url('../fonts/roboto-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
        U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('../fonts/roboto-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

/* 2. Token --------------------------------------------------------------- */

:root {
    /* Colore
       La palette e' quella storica del sito. L'arancio resta decorativo:
       su fondo chiaro da' 2.06:1 di contrasto, sotto il minimo di 4.5:1
       richiesto da WCAG AA per il testo; il marrone ne da' 6.67:1. */
    --c-brand: #864b13;         /* noce - titoli, bottoni, etichette */
    --c-brand-scuro: #6b3a0f;   /* stato premuto */
    --c-accent: #f0a032;        /* larice - filetti, aloni, stati attivi */
    --c-accent-tenue: rgba(240, 160, 50, 0.12);

    --c-warm-100: #f7f4e9;      /* betulla - fondo della landing */
    --c-warm-200: #ecdfcc;      /* rovere */
    --c-sfondo: #fafafa;
    --c-superficie: #ffffff;

    --c-testo: #2a2a2a;
    --c-testo-tenue: #5c554e;
    --c-bordo: #e2ddd5;

    --c-ok-sfondo: #e8f3e9;
    --c-ok-testo: #1d5228;
    --c-errore-sfondo: #fbe9e9;
    --c-errore-testo: #8a1f1f;

    /* Spazio - scala su base 4px. */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;

    /* Ritmo verticale delle sezioni: fluido, senza media query dedicate. */
    --sp-sezione: clamp(3rem, 7vw, 5.5rem);

    /* Tipografia - scala modulare di ragione 1.2 */
    --font: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --fs-xs: 0.79rem;
    --fs-sm: 0.889rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: clamp(1.2rem, 1.6vw, 1.35rem);
    --fs-xl: clamp(1.45rem, 2.2vw, 1.75rem);
    --fs-2xl: clamp(1.75rem, 3.2vw, 2.35rem);
    --fs-3xl: clamp(2.2rem, 5.5vw, 3.75rem);

    --lh-stretta: 1.15;
    --lh-media: 1.4;
    --lh-testo: 1.7;

    /* Forma */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 16px;
    --r-tonda: 999px;

    /* Profondita' - un solo sistema, due livelli. */
    --ombra-1: 0 1px 2px rgba(31, 26, 21, 0.06), 0 2px 8px rgba(31, 26, 21, 0.05);
    --ombra-2: 0 2px 4px rgba(31, 26, 21, 0.07), 0 8px 24px rgba(31, 26, 21, 0.09);

    /* Movimento */
    --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --durata-veloce: 160ms;
    --durata: 280ms;

    /* Misure */
    --larghezza-max: 1200px;
    --larghezza-testo: 68ch;  /* oltre le ~70 battute l'occhio perde la riga */
    --larghezza-landing: 40rem;
}

/* 3. Reset e base -------------------------------------------------------- */

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

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--c-sfondo);
    color: var(--c-testo);
    font-family: var(--font);
    font-size: var(--fs-md);
    font-weight: 400;
    line-height: var(--lh-testo);
    -webkit-font-smoothing: antialiased;
}

img,
picture,
svg {
    display: block;
    max-width: 100%;
}

button,
input,
textarea {
    font: inherit;
    color: inherit;
}

a {
    color: var(--c-brand);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

a:hover {
    color: var(--c-brand-scuro);
}

/* Un solo stile di focus per tutto il sito, sempre visibile.
   :focus-visible lo mostra a chi naviga da tastiera senza farlo comparire
   al clic del mouse. */
:where(a, button, input, textarea, summary):focus-visible {
    outline: 3px solid var(--c-brand);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

/* 4. Tipografia ---------------------------------------------------------- */

h1,
h2,
h3 {
    color: var(--c-brand);
    line-height: var(--lh-stretta);
    text-wrap: balance;   /* evita la riga orfana di una parola nei titoli */
}

h1 {
    font-size: var(--fs-3xl);
    font-weight: 300;      /* il peso leggero regge le dimensioni grandi */
    letter-spacing: -0.02em;
}

h2 {
    font-size: var(--fs-2xl);
    font-weight: 700;
}

h3 {
    font-size: var(--fs-xl);
    font-weight: 600;
}

p {
    max-width: var(--larghezza-testo);
    color: var(--c-testo);
}

/* Etichetta breve sopra un titolo: dice di cosa parla la sezione senza
   rubare la gerarchia al titolo stesso. */
.occhiello {
    display: block;
    margin-bottom: var(--sp-3);
    color: var(--c-brand);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* 5. Impaginazione ------------------------------------------------------- */

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

.sezione {
    padding-block: var(--sp-sezione);
}

/* Salto diretto al contenuto: la prima tabulazione della pagina. */
.salta-al-contenuto {
    position: absolute;
    left: var(--sp-4);
    top: var(--sp-4);
    z-index: 2000;
    padding: var(--sp-3) var(--sp-5);
    background-color: var(--c-brand);
    color: #fff;
    border-radius: var(--r-sm);
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--durata-veloce) var(--ease);
}

.salta-al-contenuto:focus {
    transform: translateY(0);
    color: #fff;
}

/* 6. Testata (solo pagine di servizio) ----------------------------------- */

/* La landing non include questa testata: li' il marchio e' il contenuto,
   e ripeterlo in cima avrebbe significato mostrarlo due volte nella stessa
   schermata. Resta su privacy e 404, dove serve la via di ritorno. */
/* Fondo betulla anche qui, per la stessa ragione della landing: il fondo
   opaco del file del logo e' esattamente questo colore, e su una fascia
   bianca sarebbe ricomparso come un riquadro attorno all'insegna. */
.intestazione {
    background-color: var(--c-warm-100);
    border-bottom: 1px solid var(--c-bordo);
}

.intestazione__interno {
    display: flex;
    align-items: center;
    padding-block: var(--sp-3);
}

.logo__immagine {
    width: 120px;
    height: auto;
    transition: opacity var(--durata-veloce) var(--ease);
}

.logo:hover .logo__immagine {
    opacity: 0.85;
}

/* 7. Landing: marchio e pannello ----------------------------------------- */

/* Fondo betulla, pieno e senza sfumature.
   Il file del logo non ha canale alpha: il suo fondo e' un rettangolo
   opaco, e qualunque gradiente sotto lo farebbe emergere come un riquadro
   piu' chiaro attorno all'insegna. Il fondo dell'immagine e' stato
   riallineato a questo esatto valore, percio' i due combaciano e il
   rettangolo sparisce; il rilievo lo danno l'ombra gia' dipinta
   nell'insegna e quella del pannello. */
.pagina-landing {
    background-color: var(--c-warm-100);
}

.landing {
    flex: 1;
    display: flex;
    padding-block: clamp(var(--sp-8), 7vh, var(--sp-16));
}

/* margin:auto invece di align-items:center: centra su entrambi gli assi ma,
   quando il contenuto e' piu' alto della finestra, lo lascia scorrere dal
   suo inizio. Con align-items il bordo superiore sarebbe finito fuori
   schermo e irraggiungibile, cioe' il modulo sarebbe stato inutilizzabile
   proprio sugli schermi piccoli. */
/* min-width:0 annulla il minimo automatico degli elementi flessibili. Senza,
   il contenitore non puo' scendere sotto la larghezza minima del proprio
   contenuto - qui l'indirizzo email, che e' una parola sola non spezzabile -
   e su schermo stretto il pannello sfondava a destra portandosi dietro
   l'intera pagina. */
.landing__interno {
    width: 100%;
    min-width: 0;
    max-width: var(--larghezza-landing);
    margin: auto;
    padding-inline: var(--sp-5);
}

.landing__marchio {
    margin-bottom: var(--sp-8);
    text-align: center;
}

/* Il filetto arancio corto e' l'unico segno decorativo del sito: la traccia
   che la lama lascia sul legno. Prima stava sotto i titoli di sezione, che
   non esistono piu'; qui fa da cerniera fra insegna e modulo. */
.landing__marchio::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    margin: var(--sp-6) auto 0;
    background-color: var(--c-accent);
    border-radius: var(--r-tonda);
}

/* Niente ombra CSS: l'immagine e' un rettangolo opaco, quindi sia
   box-shadow sia drop-shadow disegnerebbero l'ombra del rettangolo e non
   quella dell'insegna. Il rilievo e' gia' dipinto nel file. */
.landing__logo {
    width: clamp(200px, 46vw, 280px);
    height: auto;
    margin-inline: auto;
}

.landing__stato {
    max-width: none;
    margin-bottom: var(--sp-4);
    text-align: center;
}

.landing__intro {
    max-width: 34rem;
    margin: 0 auto var(--sp-8);
    color: var(--c-testo-tenue);
    text-align: center;
    text-wrap: pretty;   /* niente ultima riga di una parola sola */
}

.pannello {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    padding: clamp(var(--sp-6), 5vw, var(--sp-10));
    background-color: var(--c-superficie);
    border: 1px solid var(--c-bordo);
    border-radius: var(--r-lg);
    box-shadow: var(--ombra-2);
}

/* 8. Bottoni ed etichette ------------------------------------------------ */

/* Pastiglia di stato, con il pallino arancio davanti. Una sola definizione
   per i due punti in cui compare - "Sito in costruzione" sulla landing,
   "Errore 404" sulla pagina d'errore - perche' e' lo stesso oggetto con lo
   stesso significato: dire in che stato si trova la pagina che stai
   guardando. */
.etichetta-stato {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    background-color: var(--c-accent-tenue);
    border-radius: var(--r-tonda);
    color: var(--c-brand);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Il pallino respira: un lavoro in corso, non una pagina ferma. Il battito
   e' lento e lo scarto piccolo, perche' deve leggersi come vita e non come
   allarme; chi ha chiesto meno animazioni non lo vede affatto (sezione 13). */
.etichetta-stato::before {
    content: '';
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    background-color: var(--c-accent);
    border-radius: var(--r-tonda);
    animation: battito 2.6s var(--ease) infinite;
}

@keyframes battito {
    0%, 100% { opacity: 1;    transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.78); }
}

.bottone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-6);
    border: 2px solid transparent;
    border-radius: var(--r-sm);
    background-color: var(--c-brand);
    color: #fff;
    font-size: var(--fs-base);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--durata-veloce) var(--ease),
                transform var(--durata-veloce) var(--ease),
                box-shadow var(--durata-veloce) var(--ease);
}

.bottone:hover {
    background-color: var(--c-brand-scuro);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--ombra-2);
}

.bottone:active {
    transform: translateY(0);
}

/* Il ramo :hover ha la stessa specificita' ed e' dichiarato prima, quindi
   senza ripetere qui il selettore con :hover il bottone bloccato continuava
   a scurirsi al passaggio del mouse, suggerendo di poterlo premere. */
.bottone[disabled],
.bottone[disabled]:hover {
    background-color: var(--c-brand);
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.bottone--chiaro {
    background-color: transparent;
    border-color: var(--c-brand);
    color: var(--c-brand);
}

.bottone--chiaro:hover {
    background-color: var(--c-brand);
    color: #fff;
}

/* 9. Modulo e avvisi di esito -------------------------------------------- */

.modulo {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.campo {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.campo label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-testo-tenue);
}

.campo input,
.campo textarea {
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    background-color: var(--c-superficie);
    border: 1px solid var(--c-bordo);
    border-radius: var(--r-sm);
    font-size: var(--fs-base);
    transition: border-color var(--durata-veloce) var(--ease),
                box-shadow var(--durata-veloce) var(--ease);
}

.campo textarea {
    resize: vertical;
    min-height: 9rem;
    line-height: var(--lh-media);
}

.campo input:hover,
.campo textarea:hover {
    border-color: #c9c2b8;
}

.campo input:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--c-brand);
    box-shadow: 0 0 0 3px var(--c-accent-tenue);
}

/* Campo segnalato come non valido dopo un invio respinto. */
.campo input[aria-invalid='true'],
.campo textarea[aria-invalid='true'] {
    border-color: var(--c-errore-testo);
}

/* Trappola per i bot.
   Deve restare compilabile da uno script - quindi niente display:none, che
   molti bot riconoscono e saltano - ma invisibile a chi usa il modulo.
   Il ritaglio con clip-path ottiene questo senza spostare l'elemento a
   coordinate negative: un left:-9999px puo' allargare il box di scorrimento
   in alcuni contesti, e su una pagina con direzione RTL lo allargherebbe
   sempre. */
.esca {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.consenso {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
}

/* 24x24 e' il minimo richiesto da WCAG 2.2 (2.5.8, livello AA) per un
   bersaglio tattile. A 18px la casella era difficile da centrare con il
   dito, e per chi ha tremore o usa il touch con una mano sola diventa un
   ostacolo reale su un modulo di due campi. */
.consenso input[type='checkbox'] {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.1rem;
    accent-color: var(--c-brand);
    cursor: pointer;
}

.consenso label {
    font-size: var(--fs-sm);
    font-weight: 400;
    line-height: var(--lh-media);
    color: var(--c-testo-tenue);
    cursor: pointer;
}

/* Avviso di esito ------------------------------------------------------- */

/* Griglia a due colonne: il simbolo a sinistra occupa tutte le righe, il
   testo e l'eventuale elenco degli errori si impilano a destra. Con un
   semplice display:flex il messaggio e la lista finivano affiancati, e con
   quattro errori la colonna del testo si riduceva a poche parole per riga. */
.avviso {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-1) var(--sp-3);
    padding: var(--sp-4);
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-size: var(--fs-base);
    line-height: var(--lh-media);
}

.avviso p,
.avviso ul {
    grid-column: 2;
    max-width: none;
}

.avviso[hidden] {
    display: none;
}

/* Il simbolo affianca il colore invece di sostituirlo: l'esito resta
   distinguibile anche senza percepire la differenza fra verde e rosso. */
.avviso::before {
    grid-row: 1 / -1;
    font-weight: 700;
}

.avviso--ok {
    background-color: var(--c-ok-sfondo);
    border-color: #bcdcc2;
    color: var(--c-ok-testo);
}

.avviso--ok::before { content: '\2713'; }

.avviso--errore {
    background-color: var(--c-errore-sfondo);
    border-color: #eec4c4;
    color: var(--c-errore-testo);
}

.avviso--errore::before { content: '\2715'; }

.avviso--attesa {
    background-color: var(--c-warm-200);
    border-color: var(--c-bordo);
    color: var(--c-testo);
}

.avviso--attesa::before { content: '\2026'; }

.avviso ul {
    margin: var(--sp-2) 0 0;
    padding-left: var(--sp-5);
}

/* 10. Recapiti ----------------------------------------------------------- */

/* Sotto il modulo, separati da un filo: chi preferisce telefonare o passare
   in bottega non deve compilare niente per trovarli.
   Colonna unica a ogni larghezza. Con auto-fit su due colonne il terzo
   recapito restava spaiato a meta' riga, e sotto i 360px l'email - una
   parola sola, non spezzabile - non stava nella mezza colonna. */
.recapiti {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--c-bordo);
}

/* Etichetta e valore sulla stessa riga finche' c'e' spazio; sotto i 26rem
   il valore va a capo sotto l'etichetta invece di comprimersi. */
.recapito {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: var(--sp-1) var(--sp-4);
    align-items: baseline;
}

@media (max-width: 26rem) {
    .recapito {
        grid-template-columns: 1fr;
    }
}

.recapito__etichetta {
    color: var(--c-brand);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.recapito p,
.recapito address {
    max-width: none;
    margin: 0;
    font-size: var(--fs-base);
    font-style: normal;
    line-height: var(--lh-media);
    /* L'indirizzo email e' una parola sola di 27 caratteri: sotto i 320px
       di schermo deve poter andare a capo, altrimenti sfonda il pannello. */
    overflow-wrap: anywhere;
}

/* Stessa regola dei 24px minimi (WCAG 2.5.8): telefono ed email sono voci
   autonome, non collegamenti dentro una frase, quindi vanno dimensionati
   come bersagli tattili. */
.recapito a,
.pie__interno a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

/* Nota legale su reCAPTCHA in fondo al pannello. */
.nota-legale {
    max-width: none;
    color: var(--c-testo-tenue);
    font-size: var(--fs-sm);
    line-height: var(--lh-media);
}

/* 11. Pagine di servizio (privacy, 404) ---------------------------------- */

/* Testo lungo: l'informativa privacy. */
.prosa {
    max-width: 46rem;
}

.prosa h2 {
    margin-top: var(--sp-10);
    margin-bottom: var(--sp-3);
    font-size: var(--fs-xl);
}

.prosa h3 {
    margin-top: var(--sp-6);
    margin-bottom: var(--sp-2);
    font-size: var(--fs-lg);
    color: var(--c-testo);
}

.prosa p,
.prosa ul {
    margin-bottom: var(--sp-4);
}

.prosa ul {
    padding-left: var(--sp-6);
}

.prosa li {
    margin-bottom: var(--sp-2);
}

/* Selettore composto: '.prosa p' pesa (0,1,1) e batterebbe la sola classe
   (0,1,0), riportando il margine a --sp-4 e vanificando lo stacco voluto
   sotto la data di aggiornamento. */
.prosa p.prosa__aggiornamento {
    margin-bottom: var(--sp-8);
    color: var(--c-testo-tenue);
    font-size: var(--fs-sm);
}

/* Riquadro della pagina 404: stato dichiarato, non pagina vuota. */
.allestimento {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-5);
    max-width: 44rem;
    margin-inline: auto;
    padding: clamp(var(--sp-10), 7vw, var(--sp-20)) var(--sp-6);
    text-align: center;
    background-color: var(--c-warm-100);
    border: 1px solid var(--c-bordo);
    border-radius: var(--r-lg);
}

.allestimento p {
    margin-inline: auto;
    color: var(--c-testo-tenue);
}

.allestimento__azioni {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-4);
    margin-top: var(--sp-2);
}

/* 12. Pie' di pagina ----------------------------------------------------- */

/* Una riga sola. La fascia marrone a quattro colonne ripeteva indirizzo,
   telefono ed email gia' presenti nel pannello, a mezzo schermo di distanza,
   e chiudeva la pagina con un blocco piu' pesante del contenuto. */
.pie {
    margin-top: auto;
    padding-block: var(--sp-6);
}

.pie__interno {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--sp-2) var(--sp-6);
    font-size: var(--fs-sm);
}

.pie__interno p {
    max-width: none;
    color: var(--c-testo-tenue);
}

/* 13. Utilita', movimento ridotto, stampa -------------------------------- */

/* Chi ha chiesto al sistema operativo di ridurre le animazioni non deve
   subirle qui. Non e' una preferenza estetica: il movimento provoca nausea
   a chi soffre di disturbi vestibolari. */
@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;
        scroll-behavior: auto !important;
    }
}

@media print {
    .intestazione,
    .modulo,
    .salta-al-contenuto {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
        font-size: 11pt;
    }

    /* In stampa i browser non riproducono gli sfondi: dichiarare il bianco
       evita che il pannello resti senza contorno su carta. */
    .pagina-landing {
        background: #fff !important;
    }

    .pannello {
        border: 1px solid #999;
        box-shadow: none;
    }

    a[href^='http']::after {
        content: ' (' attr(href) ')';
        font-size: 0.85em;
    }
}