/* ==========================================================================
   Un Gatto in Viaggio — design system "cielo, denim e cuoio"
   Mobile first; da 1024px in su la bottom nav lascia il posto alla sidebar.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500;1,9..144,600&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    /* palette */
    --sky: #d6e7f7;
    --sky-soft: #eaf2fb;
    --sky-deep: #6fa3d6;
    --denim: #2b4f7e;
    --denim-deep: #1b3352;
    --denim-ink: #122238;
    --ink: #1c2633;
    --ink-soft: #5c6b7d;
    --ink-mute: #8b97a6;
    --sand: #f4ecdf;
    --sand-soft: #fbf8f2;
    --paper: #ffffff;
    --leather: #8b5a2b;
    --leather-deep: #5f3d1c;
    --sunset: #f0a35e;
    --sunset-deep: #d9823a;
    --success: #3f8f5a;
    --danger: #c9413a;
    --line: rgba(28, 38, 51, 0.10);
    --line-strong: rgba(28, 38, 51, 0.18);

    /* tipografia */
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* forme e ombre */
    --radius-xl: 28px;
    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 10px;
    --shadow-card: 0 10px 30px rgba(27, 51, 82, 0.08), 0 1px 2px rgba(27, 51, 82, 0.06);
    --shadow-float: 0 18px 50px rgba(27, 51, 82, 0.22);
    --shadow-pop: 0 30px 80px rgba(18, 34, 56, 0.45);

    /* misure */
    --gutter: 18px;
    --content-max: 1120px;
    --sidebar-w: 264px;
    --bottom-nav-h: 68px;
    --transizione: 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
    height: 100%;
    /* Tutto lo scroll vive dentro .app-shell__main: evita che la pagina intera scorra e trascini
       via la bottom nav in modalità standalone (bug classico delle PWA). */
    overflow: hidden;
    overscroll-behavior-y: none;
}

body {
    margin: 0;
    min-height: 100svh;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--sand-soft);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: inherit; }

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

button, input { font: inherit; }

::selection { background: rgba(240, 163, 94, 0.45); }

/* ---------- App shell ---------- */

.app-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100svh;
    height: var(--altezza-reale, 100svh);
    overflow: hidden;
    background:
        radial-gradient(120% 60% at 50% -10%, var(--sky) 0%, rgba(214, 231, 247, 0) 60%),
        var(--sand-soft);
}

.app-shell__colonna {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.app-shell__main {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 12px);
    scrollbar-width: thin;
    scrollbar-color: rgba(43, 79, 126, 0.25) transparent;
}

.app-shell__main.is-entering {
    animation: page-enter 0.35s ease-out;
}

@keyframes page-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.app-shell--splash .app-shell__main,
.app-shell--auth .app-shell__main {
    padding-bottom: 0;
}

.app-shell--chat .app-shell__main {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
}

.sidebar { display: none; }

.turbo-progress-bar {
    background: linear-gradient(90deg, var(--sunset), var(--sky-deep)) !important;
    height: 3px !important;
}

/* Elementi che si rivelano scorrendo (reveal_controller) */
[data-controller~="reveal"] [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

[data-controller~="reveal"] [data-reveal].is-rivelato {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    [data-controller~="reveal"] [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Il linguaggio comune ----------

   Classi di base che più componenti si passano, invece di riscriverle ognuno a modo suo.
   Stanno in cima apposta: chi arriva dopo nel foglio le specializza senza doverle combattere. */

/* LA SOVRATITOLAZIONE. Esisteva già in cinque misure diverse (.card__title, .passaporto__etichetta,
   .tappa-badge, .page-header__eyebrow, .splash__eyebrow). Da qui in avanti la misura è una: cambia
   solo il colore, e il colore dice CHI sta parlando. Si porta come seconda classe. */
.sovratitolo {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.07em;
    line-height: 1.2;
    text-transform: uppercase;
}

/* Cuoio: il contesto del contenuto, su carta bianca. */
.sovratitolo--cuoio { color: var(--leather); }

/* Cuoio scuro: la stessa cosa su carta sabbia, dove il cuoio chiaro sbiadisce. */
.sovratitolo--cuoio-scuro { color: var(--leather-deep); }

/* Grigio: il sito che parla di sé. */
.sovratitolo--sistema { color: var(--ink-mute); }

/* Bianco: il sito che parla di sé sopra una foto o un velo scuro. */
.sovratitolo--chiaro { color: rgba(255, 255, 255, 0.55); }

/* LA CARTA RUOTATA. Un idioma solo, quello dei timbri del passaporto: la rotazione arriva SEMPRE
   dal template con la formula (loop.index0 % 5) - 2, cioè gradi interi da -2 a +2. Niente mezzi
   gradi, niente rotazioni scritte qui dentro.

   REGOLA DURA: quello che porta --rotazione non può portare anche data-reveal. Il reveal scrive
   transform: translateY(14px) e poi transform: none — è la stessa proprietà, e cancellerebbe la
   rotazione. Il data-reveal si mette sull'elemento padre. */
.carta-ruotata {
    /* Il transform crea già un contesto di impilamento: lo z-index va qui, ed è quello che tiene
       il nastro adesivo sopra la foto. */
    position: relative;
    z-index: 1;
    transform: rotate(var(--rotazione, 0deg));
    transition: transform var(--transizione), box-shadow var(--transizione);
}

/* Si raddrizza e si solleva col mouse sopra, come fanno i timbri. Su telefono non succede niente. */
.carta-ruotata:hover {
    transform: rotate(0deg) translateY(-2px);
    box-shadow: var(--shadow-float);
}

/* IL NUMERO GROSSO. È già la faccia del countdown e dei numeri della splash: la misura la decide
   chi lo usa, qui c'è tutto il resto. */
.numero-grosso {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--denim-ink);
}

/* Il numero che il JS fa salire. Il server stampa già il valore vero e intero: l'ombra è la sua
   copia invisibile nella stessa cella di griglia, e tiene ferma la larghezza mentre il valore
   corre da 0 a 10.134 — senza, tutto quello che sta sotto balla per un secondo e mezzo.
   Se il JS non parte non succede niente e il numero è giusto lo stesso. */
.contatore { display: inline-grid; }

.contatore__ombra,
.contatore__valore {
    grid-area: 1 / 1;
    font-variant-numeric: tabular-nums;
}

.contatore__ombra { visibility: hidden; }

/* IL TRATTEGGIO. Uno solo: 8 pieni e 8 vuoti, cioè la spina della timeline girata in orizzontale.
   Uno a passo diverso non cita niente, aggiunge solo un secondo tratteggio. */
.filo-tratteggiato {
    height: 2px;
    border-radius: 1px;
    background: repeating-linear-gradient(90deg, var(--sky-deep) 0 8px, transparent 8px 16px);
    background-size: 16px 2px;
    opacity: 0.6;
}

/* IL PANNELLO SOPRA IL VELO. La lightbox delle foto e la cartolina sono la stessa stanza: stesso
   velo, stesso sfocato, stessa ✕ nello stesso angolo. Qui la ricetta comune; ciascuna tiene di suo
   solo il proprio piano e il proprio contenuto. */
.velo {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: var(--altezza-reale, 100svh);
    padding:
        calc(20px + env(safe-area-inset-top, 0px))
        calc(20px + env(safe-area-inset-right, 0px))
        calc(20px + env(safe-area-inset-bottom, 0px))
        calc(20px + env(safe-area-inset-left, 0px));
    background: rgba(18, 34, 56, 0.92);
    backdrop-filter: blur(10px);
    animation: page-enter 0.2s ease-out;
}

.velo__chiudi {
    position: absolute;
    top: calc(14px + env(safe-area-inset-top, 0px));
    right: calc(14px + env(safe-area-inset-right, 0px));
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

/* LE ICONE. Disegnate a tratto, prendono il colore dal testo e la misura dalla riga in cui
   stanno: 1.25em vuol dire che crescono col testo invece di restare una costante da correggere
   in venti posti. Chi ne vuole una di misura fissa usa i modificatori qui sotto.
   Il vertical-align serve perche' un'icona in mezzo a una frase, senza, si appoggia sulla linea
   di base e sembra sollevata. */
.icona {
    width: 1.25em;
    height: 1.25em;
    flex: 0 0 auto;
    vertical-align: -0.22em;
}

.icona--piccola { width: 1em; height: 1em; vertical-align: -0.15em; }

.icona--grande { width: 1.6em; height: 1.6em; vertical-align: -0.35em; }

/* Nelle sovratitolazioni il testo e' 11-12px: a 1.25em la zampa perde i polpastrelli e diventa
   una macchia. Li' vanno un po' piu' grandi del testo che accompagnano. */
.sovratitolo .icona,
.page-header__eyebrow .icona,
.hero__eyebrow .icona,
.sidebar__brand-eyebrow .icona,
.splash__eyebrow .icona,
.card__title .icona { width: 1.5em; height: 1.5em; vertical-align: -0.32em; }

/* Nei bottoni e nelle righe in flex l'allineamento lo fa il contenitore: li' il vertical-align
   non serve e anzi sposta. */
.btn .icona,
.chat-chip .icona,
.menu-voce .icona { vertical-align: 0; }

/* ---------- Tipografia di pagina ---------- */

.page-header {
    padding: calc(22px + env(safe-area-inset-top, 0px)) var(--gutter) 6px;
}

.page-header--con-azione {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.page-header__eyebrow {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--denim);
}

.page-header__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(30px, 7vw, 40px);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--denim-ink);
}

.page-header__subtitle {
    margin: 8px 0 0;
    color: var(--ink-soft);
    font-size: 14.5px;
    max-width: 52ch;
}

.page-content {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 14px var(--gutter) 8px;
}

.sezione {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sezione__testata {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.sezione__testata--card { margin-bottom: 4px; }

.sezione__titolo {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.01em;
    color: var(--denim-ink);
}

.sezione__link {
    font-size: 13px;
    font-weight: 700;
    color: var(--denim);
    text-decoration: none;
    white-space: nowrap;
}

.sezione__link:hover { text-decoration: underline; }

.sezione__nota {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-mute);
}

/* ---------- Card ---------- */

.card {
    background: var(--paper);
    border-radius: var(--radius-lg);
    padding: 18px;
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(255, 255, 255, 0.7);
    text-decoration: none;
}

.card__title {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.card__testo {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink);
}

.card--racconto .card__testo {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 500;
    color: var(--denim-ink);
}

.griglia-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

/* Colonna di card impilate: su mobile è una lista come le altre, su desktop riempie la sua colonna. */
.pila {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ---------- Bottoni ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--transizione), box-shadow var(--transizione), background var(--transizione), color var(--transizione);
    -webkit-tap-highlight-color: transparent;
}

.btn:active { transform: scale(0.97); }

.btn--primary {
    background: linear-gradient(135deg, var(--sunset) 0%, var(--sunset-deep) 100%);
    color: #fff;
    box-shadow: 0 8px 20px rgba(217, 130, 58, 0.35);
}

.btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(217, 130, 58, 0.42);
}

.btn--outline {
    background: transparent;
    border-color: var(--line-strong);
    color: var(--denim);
}

.btn--outline:hover { background: var(--sky-soft); }

.btn--ghost {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
}

.btn--block { width: 100%; }

.btn--grande { padding: 15px 26px; font-size: 15px; }

/* ---------- Hero ---------- */

.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 340px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    color: #fff;
    background-color: var(--denim-deep);
    box-shadow: var(--shadow-float);
    isolation: isolate;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--cover);
    background-size: cover;
    /* Il punto scelto trascinando la copertina nell'admin; al centro se non è mai stato toccato. */
    background-position: var(--cover-pos, 50% 50%);
    transform: scale(1.04);
    animation: hero-zoom 18s ease-in-out infinite alternate;
    z-index: -2;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(18, 34, 56, 0.05) 0%, rgba(18, 34, 56, 0.25) 40%, rgba(18, 34, 56, 0.86) 100%),
        linear-gradient(90deg, rgba(18, 34, 56, 0.35), transparent 60%);
    z-index: -1;
}

@keyframes hero-zoom {
    from { transform: scale(1.04) translate(0, 0); }
    to { transform: scale(1.12) translate(-1.5%, -1%); }
}

.hero__contenuto {
    position: relative;
    padding: 24px 22px 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

.hero__titolo {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(28px, 8vw, 44px);
    line-height: 1.04;
    letter-spacing: -0.015em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
}

.hero__testo {
    margin: 0;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    max-width: 46ch;
}

.hero__testo strong { color: #fff; }

.hero__contenuto .btn { margin-top: 6px; }

.hero__eyebrow .viaggio-card__stato { position: static; }

.hero__pulsante {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #62e08a;
    box-shadow: 0 0 0 0 rgba(98, 224, 138, 0.7);
    animation: pulsa 1.8s ease-out infinite;
}

.hero__pulsante--inline { display: inline-block; margin-right: 6px; vertical-align: middle; }

@keyframes pulsa {
    0% { box-shadow: 0 0 0 0 rgba(98, 224, 138, 0.7); }
    100% { box-shadow: 0 0 0 10px rgba(98, 224, 138, 0); }
}

.hero__indietro {
    position: absolute;
    top: calc(14px + env(safe-area-inset-top, 0px));
    left: 14px;
    z-index: 2;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(18, 34, 56, 0.45);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.hero__numeri {
    display: flex;
    flex-wrap: wrap;
    /* Senza align-items la pillola dei chilometri si stirerebbe per tutta l'altezza della riga e
       le altre tre voci resterebbero appese in alto. */
    align-items: center;
    gap: 8px 14px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}

.hero__numeri strong { color: #fff; font-weight: 800; }

/* La pillola dei chilometri: vetro sopra la foto, la stessa ricetta di .countdown__blocco, che
   vive sullo stesso tipo di sfondo scuro. Sta in fila con "12 giorni" e "23 tappe" e si stacca
   appena — quel tanto che basta a dire che è il numero nuovo. Niente icona: il vetro fa già
   tutto il lavoro, e la zampa in questa schermata è già altrove. */
.hero__numeri-km {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 4px 12px 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(10px);
    white-space: nowrap;
}

.hero__numeri-km strong { font-variant-numeric: tabular-nums; }

.hero--viaggio {
    min-height: 380px;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    margin: 0 0 4px;
    box-shadow: none;
}

.hero--viaggio .hero__contenuto { padding: 28px var(--gutter) 26px; }

.hero--vuoto::before { background-position: center 30%; }

/* ---------- Countdown ---------- */

.countdown {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0 4px;
}

.countdown__blocco {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 58px;
    padding: 8px 6px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.countdown__numero {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 26px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.countdown__etichetta {
    margin-top: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.8;
}

.countdown__duepunti {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    opacity: 0.6;
    animation: lampeggia 1s steps(2) infinite;
}

@keyframes lampeggia { to { opacity: 0.2; } }

.countdown__messaggio {
    margin: 0;
    font-family: var(--font-display);
    font-size: 22px;
}

/* ---------- Stat row ---------- */

.stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px 8px;
    border-radius: var(--radius-md);
    background: var(--paper);
    box-shadow: var(--shadow-card);
}

.stat strong {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 28px;
    line-height: 1;
    color: var(--denim);
}

.stat span {
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-mute);
    line-height: 1.2;
}

/* ---------- Chilometri: il primato in home ----------

   Prende il posto della fila di contatori che c'era qui: un numero solo, ma che si racconta.

   NON riusa la classe .stat di proposito: .stat strong e .stat span imporrebbero la loro
   tipografia a ogni pezzo qui dentro, contatore compreso, e nel @media 1024 lo ridurrebbero a
   13px. Ne prende però la carta: bianca come le altre card della home, perché l'unica superficie
   speciale di quella schermata dev'essere il bigliettino del taccuino. */

.primato {
    position: relative;
    display: grid;
    justify-items: start;
    padding: 20px 18px 18px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: var(--shadow-card);
    background: var(--paper);
}

.primato__eyebrow { margin: 0 0 12px; }

/* Mentre il gatto e' in giro l'occhiello porta il pallino che pulsa, lo stesso delle card
   dei viaggi in corso: dice che quel numero e' vivo. */
.primato--adesso .primato__eyebrow {
    display: flex;
    align-items: center;
    gap: 7px;
}

.primato--adesso .viaggio-card__pulsante {
    flex: 0 0 auto;
    background: var(--success);
}

/* La misura la decide qui; il resto della faccia arriva da .numero-grosso. */
.primato__cifra {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    font-size: clamp(46px, 15vw, 62px);
}

.primato__unita {
    font-family: var(--font-display);
    font-size: 0.36em;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--denim);
}

.primato__dove { margin-top: 12px; }

.primato__luogo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.2;
    color: var(--denim-ink);
}

/* Solo la misura: il filo che stacca la bandiera dalla carta chiara ce l'ha già .bandiera. */
.primato__luogo .bandiera { width: 22px; }

.primato__nota {
    margin: 5px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--ink-mute);
}

/* La rotta: da casa alla zampa, con in mezzo il tratteggio della spina della timeline girato in
   orizzontale (.filo-tratteggiato). Le due estremità sono emoji e non bandiere: le bandiere sul
   sito escono solo dalle macro SVG. */
.primato__rotta {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin-top: 18px;
    font-size: 15px;
    line-height: 1;
}

.primato__filo {
    flex: 1;
    animation: rotta-scorre 2.4s linear infinite;
}

@keyframes rotta-scorre {
    to { background-position: 16px 0; }
}

.primato__link {
    margin-top: 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--denim);
    text-decoration: none;
    transition: color var(--transizione);
}

.primato__link:hover { text-decoration: underline; }

.primato__link:focus-visible {
    outline: 2px solid var(--sky-deep);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* ---------- Card viaggio ---------- */

.scroller {
    display: flex;
    gap: 14px;
    margin: 0 calc(-1 * var(--gutter));
    padding: 4px var(--gutter) 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.scroller::-webkit-scrollbar { display: none; }

.scroller > * {
    flex: 0 0 min(78vw, 300px);
    scroll-snap-align: start;
}

.griglia-viaggi {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.viaggio-card {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    text-decoration: none;
    color: inherit;
    transition: transform var(--transizione), box-shadow var(--transizione);
}

.viaggio-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-float);
}

.viaggio-card__cover {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--denim-deep) var(--cover) var(--cover-pos, 50% 50%) / cover no-repeat;
    overflow: hidden;
}

.viaggio-card__cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(18, 34, 56, 0.05), rgba(18, 34, 56, 0.35));
}

.viaggio-card--grande .viaggio-card__cover { aspect-ratio: 16 / 9; }

.viaggio-card__stato {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(18, 34, 56, 0.55);
    backdrop-filter: blur(8px);
}

.viaggio-card__stato--in_corso { background: rgba(63, 143, 90, 0.9); }
.viaggio-card__stato--programmato { background: rgba(111, 163, 214, 0.9); }
.viaggio-card__stato--concluso { background: rgba(18, 34, 56, 0.55); }

.viaggio-card__stato--bozza { background: rgba(217, 130, 58, 0.92); }

.viaggio-card__pulsante {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c8ffd9;
    animation: pulsa 1.8s ease-out infinite;
}

.viaggio-card__bandiera {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 1;
    display: grid;
    place-items: center;
    padding: 4px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.viaggio-card__bandiera { gap: 4px; grid-auto-flow: column; }

.viaggio-card__bandiera .bandiera { width: 30px; vertical-align: 0; border-radius: 4px; box-shadow: none; }

.hero__eyebrow .bandiera + .bandiera { margin-left: 3px; }

.viaggio-card__corpo {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 16px 16px;
}

.viaggio-card__paese {
    margin: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--leather);
}

.viaggio-card__titolo {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 21px;
    line-height: 1.15;
    color: var(--denim-ink);
}

.viaggio-card--grande .viaggio-card__titolo { font-size: 26px; }

.viaggio-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--ink-soft);
}

.viaggio-card__progresso {
    height: 6px;
    margin-top: 10px;
    border-radius: 999px;
    background: var(--sky-soft);
    overflow: hidden;
}

.viaggio-card__progresso span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sky-deep), var(--success));
}

/* ---------- Timbri / passaporto ---------- */

.passaporto {
    padding: 20px 18px 22px;
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 100% 0%, rgba(240, 163, 94, 0.18), transparent 40%),
        linear-gradient(180deg, #fffdf8 0%, var(--sand) 100%);
    border: 1px solid rgba(139, 90, 43, 0.18);
    box-shadow: var(--shadow-card);
}

.passaporto__intestazione {
    display: flex;
    gap: 16px;
    align-items: center;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px dashed rgba(139, 90, 43, 0.35);
}

.passaporto__foto {
    width: 74px;
    height: 74px;
    border-radius: 12px;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.passaporto__etichetta {
    margin: 0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--leather);
}

.passaporto__valore {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--denim-ink);
}

.passaporto__valore:last-child { margin-bottom: 0; }

.stamp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.stamp-grid--compatta { grid-template-columns: repeat(2, 1fr); gap: 10px; }

.stamp {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px 10px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.55);
    transform: rotate(var(--rotazione, 0deg));
    transition: transform var(--transizione);
}

.stamp:hover { transform: rotate(0deg) scale(1.03); }

.stamp__cerchio {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: 3px double var(--denim);
    background: var(--paper);
    box-shadow: inset 0 0 0 4px #fff, 0 6px 16px rgba(27, 51, 82, 0.15);
    overflow: hidden;
}

.stamp--sbloccato .stamp__cerchio { animation: timbrata 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both; }

@keyframes timbrata {
    from { transform: scale(1.4); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.stamp__image { width: 100%; height: 100%; object-fit: cover; }

/* Bandiera dentro il timbro: tonda, leggermente desaturata come un inchiostro da timbro, con un
   anello interno che la stacca dal bordo doppio. */
.stamp__cerchio .stamp__flag {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    object-fit: cover;
    filter: saturate(0.8) contrast(0.95);
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 0 2px rgba(43, 79, 126, 0.25);
}

.stamp__bandiera { font-size: 40px; line-height: 1; }

.stamp__lucchetto {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--paper);
    font-size: 13px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.stamp__cerchio { position: relative; overflow: visible; }

.stamp--locked .stamp__cerchio .stamp__flag { filter: grayscale(1) opacity(0.6); }

/* Bandiere SVG inline (macro m.bandiera): sostituiscono le emoji, che Windows non disegna. */
.bandiera {
    display: inline-block;
    width: 1.35em;
    height: auto;
    vertical-align: -0.2em;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.bandiera--tonda { border-radius: 50%; }

.stamp__luogo {
    margin-top: 10px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    color: var(--denim-ink);
}

.stamp__data {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-mute);
}

.stamp__nota { margin-top: 2px; font-size: 12px; color: var(--ink-soft); font-style: italic; }

.stamp__link {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--denim);
    text-decoration: none;
}

.stamp--locked { opacity: 0.55; filter: grayscale(1); }

.stamp--locked .stamp__cerchio { border-style: dashed; border-color: var(--ink-mute); }

/* ---------- Instagram / box link ---------- */

.ig-box,
.gpt-box {
    display: flex;
    align-items: center;
    gap: 14px;
    color: inherit;
    transition: transform var(--transizione), box-shadow var(--transizione);
}

.ig-box:hover, .gpt-box:hover { transform: translateY(-2px); box-shadow: var(--shadow-float); }

.ig-box__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);
}

.ig-box__icon svg { width: 24px; height: 24px; }

.ig-box__text, .gpt-box__text { display: flex; flex-direction: column; gap: 2px; }

.ig-box__handle, .gpt-box__titolo { font-weight: 800; color: var(--denim-ink); }

.ig-box__hint, .gpt-box__hint { font-size: 13px; color: var(--ink-soft); }

.gpt-box__avatar {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--sky);
}

.instagram-posts__griglia {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.instagram-embed-wrap {
    border-radius: var(--radius-md);
    overflow: hidden;
    min-height: 120px;
    background: var(--sky-soft);
}

.instagram-embed-wrap .instagram-media { min-width: 0 !important; }

/* ---------- Empty state ---------- */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 30px 18px;
    color: var(--ink-soft);
}

.empty-state--piccolo { padding: 12px 0; }

.empty-state__icon { font-size: 40px; line-height: 1; }

.empty-state__title {
    margin: 6px 0 0;
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--denim-ink);
}

.empty-state p { margin: 0; }

/* ---------- Mappa ---------- */

/* isolation: isolate perché .mappa-didascalia sta a z-index 500 e .mappa-wrap, essendo
   position: relative SENZA z-index, non era un contesto di impilamento: quel 500 saliva fino alla
   radice e passava davanti alla lightbox. Adesso la didascalia resta alta, ma dentro casa sua. */
.mappa-wrap { position: relative; isolation: isolate; }

/* La mappa e la riga onesta sotto: il contenitore serve perché .mappa-didascalia è in
   position:absolute col bottom sul bordo della cartina, e allungando .mappa-wrap finirebbe a
   galleggiare sopra il testo invece che sulla mappa. */
.mappa-blocco {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mappa-nota {
    margin: 0;
    padding: 0 2px;
    max-width: 64ch;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.55;
    color: var(--ink-mute);
}

.mappa-nota strong {
    font-weight: 800;
    color: var(--denim);
}

.map-card {
    height: 300px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    background: var(--sky-soft);
}

.leaflet-container { font-family: var(--font-body); }

.mappa-didascalia {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 500;
    display: flex;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.mappa-didascalia.is-visibile { opacity: 1; transform: none; }

.mappa-didascalia__testo {
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(27, 51, 82, 0.85);
    backdrop-filter: blur(10px);
    color: #fff;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
}

.mappa-didascalia__testo.is-comparsa { animation: didascalia-pop 0.35s ease-out; }

@keyframes didascalia-pop {
    from { transform: scale(0.9); opacity: 0.4; }
    to { transform: scale(1); opacity: 1; }
}

.mappa-marker-wrap { background: transparent; border: 0; }

.mappa-marker {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid #fff;
    background: var(--sky-deep);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.mappa-marker--done { background: var(--denim); }
.mappa-marker--current { background: var(--success); animation: pulsa 1.6s ease-out infinite; }

.mappa-marker-wrap--attivo .mappa-marker { transform: scale(1.5); background: var(--sunset); }

.mappa-popup .leaflet-popup-content-wrapper {
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-float);
}

.mappa-popup .leaflet-popup-content { margin: 0; width: 220px !important; }

.map-popup__foto {
    position: relative;
    height: 120px;
    background-size: cover;
    background-position: center;
}

.map-popup__fascia {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: linear-gradient(180deg, transparent, rgba(18, 34, 56, 0.9));
    color: #fff;
    text-decoration: none;
}

.map-popup__titolo { font-family: var(--font-display); font-weight: 600; font-size: 15px; }

.map-popup__freccia { font-weight: 800; }

/* ---------- Timeline ---------- */

.timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-left: 30px;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 10px;
    width: 2px;
    background: repeating-linear-gradient(180deg, var(--sky-deep) 0 8px, transparent 8px 16px);
    opacity: 0.6;
}

.timeline-day-row {
    position: relative;
    display: flex;
    /* align-items e gap servono ai chilometri del giorno, che stanno accanto alla data. */
    align-items: center;
    gap: 8px;
    margin: 6px 0 -6px;
}

/* Compagna della pillola della data: quella è denim pieno, questa è il suo negativo leggero.
   Il bordo tratteggiato cita la spina della timeline, ed è anche il modo in cui la pagina dice
   "questo numero è in linea d'aria" senza scriverlo dodici volte. */
.timeline-km {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px dashed rgba(111, 163, 214, 0.8);
    background: rgba(111, 163, 214, 0.1);
    color: var(--denim);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.timeline-day {
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--denim-deep);
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.timeline-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: var(--radius-lg);
    background: var(--paper);
    box-shadow: var(--shadow-card);
}

.timeline-item__dot {
    position: absolute;
    left: -30px;
    top: 14px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--paper);
    border: 3px solid var(--sky-deep);
    font-size: 11px;
    box-shadow: 0 0 0 4px var(--sand-soft);
}

.timeline-item--done .timeline-item__dot { border-color: var(--denim); background: var(--denim); }
.timeline-item--current .timeline-item__dot { border-color: var(--success); background: var(--success); animation: pulsa 1.6s ease-out infinite; }
.timeline-item--current { box-shadow: 0 0 0 2px rgba(63, 143, 90, 0.5), var(--shadow-card); }
.timeline-item--upcoming { opacity: 0.92; }

/* Arrivo da una card "tappa" di GattoGPT: un anello color tramonto che lampeggia una volta sola
   e si spegne, per dire "è questa". Stesso gesto del pulsante che pulsa sulle card dei viaggi. */
.timeline-item.is-arrivo::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    animation: arrivo 2s ease-out both;
}

@keyframes arrivo {
    0% { box-shadow: 0 0 0 0 rgba(240, 163, 94, 0); }
    12% { box-shadow: 0 0 0 4px rgba(240, 163, 94, 0.65); }
    60% { box-shadow: 0 0 0 4px rgba(240, 163, 94, 0.65); }
    100% { box-shadow: 0 0 0 10px rgba(240, 163, 94, 0); }
}

/* Il corpo: la colonna che impila quello che la tappa ha davvero. */
.timeline-item__corpo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

/* Le cose da fare, sempre in fondo e sempre sulla stessa riga: cartolina e mappa. Vanno a capo da
   sole se non ci stanno, e si allineano al centro fra loro perché il bottone è alto il doppio del
   link. */
.timeline-item__azioni {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-top: 2px;
}

/* Il bottone della cartolina porta align-self: flex-start, che gli serve quando sta da solo in
   una colonna. Dentro la riga delle azioni comanda la riga. */
.timeline-item__azioni .cartolina-avvio { align-self: auto; }

.timeline-item__testo { margin: 0; padding: 0 4px; color: var(--ink); }

.timeline-item__mappa {
    align-self: flex-start;
    padding: 0 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--denim);
    text-decoration: none;
}

/* Copertina di tappa con Ken Burns quando in vista (tappa_cover_controller) */
.tappa-cover {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 170px;
    border-radius: var(--radius-md);
    overflow: hidden;
    color: #fff;
    background: var(--denim-deep);
    isolation: isolate;
}

.tappa-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--tappa-immagine) var(--cover-pos, 50% 50%) / cover no-repeat;
    transform: scale(1.02);
    z-index: -2;
}

.tappa-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(18, 34, 56, 0) 30%, rgba(18, 34, 56, 0.85) 100%);
    z-index: -1;
}

.tappa-cover.is-in-vista::before { animation: kb 14s ease-in-out infinite alternate; }
.tappa-cover--kb-1.is-in-vista::before { animation-name: kb-1; }
.tappa-cover--kb-2.is-in-vista::before { animation-name: kb-2; }
.tappa-cover--kb-3.is-in-vista::before { animation-name: kb-3; }

@keyframes kb { from { transform: scale(1.02); } to { transform: scale(1.12) translate(-2%, -1%); } }
@keyframes kb-1 { from { transform: scale(1.02); } to { transform: scale(1.12) translate(2%, 1%); } }
@keyframes kb-2 { from { transform: scale(1.1) translate(1%, 2%); } to { transform: scale(1.02); } }
@keyframes kb-3 { from { transform: scale(1.02) translate(-1%, 0); } to { transform: scale(1.12) translate(1%, -2%); } }

.tappa-cover__title {
    position: relative;
    padding: 14px 16px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.1;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.tappa-cover__badges {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 6px;
}

.tappa-badge {
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(18, 34, 56, 0.55);
    backdrop-filter: blur(8px);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tappa-badge--done { background: rgba(43, 79, 126, 0.85); }
/* ---------- Il taccuino di bordo ----------

   Un bigliettino di carta con sopra una riga scritta dal gatto in prima persona. Esiste solo se la
   nota c'e': il template non stampa niente quando manca, e qui dentro non c'e' nessuno stato vuoto.

   La rotazione e il raddrizzarsi col mouse sopra arrivano da .carta-ruotata; qui c'e' solo la
   carta, il nastro adesivo e la voce. */

.taccuino {
    align-self: flex-start;
    max-width: 34ch;
    margin: 0;
    padding: 13px 16px 14px;
    border-radius: var(--radius-sm);
    /* Carta calda, non foglio bianco: sotto c'e' il --paper della .timeline-item, e due bianchi
       farebbero un blocco unico. */
    background: linear-gradient(180deg, var(--sand-soft) 0%, var(--sand) 100%);
    /* La barretta arancione e' dentro l'ombra e non e' un border-left, cosi' non mangia il raggio
       dell'angolo. */
    box-shadow: var(--shadow-card), inset 3px 0 0 rgba(240, 163, 94, 0.6);
}

/* Il nastro adesivo: sporge in alto e finisce sulla foto della copertina, ed e' li' che si legge.
   Sulla carta resta appena un riflesso, ed e' voluto. */
.taccuino::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 20px;
    width: 62px;
    height: 20px;
    border-radius: 2px;
    background: rgba(214, 231, 247, 0.55);
    box-shadow: 0 1px 3px rgba(27, 51, 82, 0.18);
    transform: rotate(-4deg);
}

/* .carta-ruotata:hover rifa' la box-shadow da zero e si porterebbe via la barretta arancione:
   qui si riscrive intera. */
.taccuino:hover { box-shadow: var(--shadow-float), inset 3px 0 0 rgba(240, 163, 94, 0.6); }

.taccuino__firma {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    margin: 0 0 6px;
}

.taccuino__quando { font-weight: 700; letter-spacing: 0.06em; }

.taccuino__testo {
    margin: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 16.5px;
    line-height: 1.45;
    color: var(--denim-ink);
}

/* I caporali stanno nel CSS, non a database: il testo salvato resta pulito e riusabile altrove
   (la cartolina lo ridisegna su canvas con le stesse virgolette). */
.taccuino__testo::before { content: '«'; margin-right: 1px; color: var(--sunset-deep); }
.taccuino__testo::after { content: '»'; margin-left: 1px; color: var(--sunset-deep); }

/* Nella timeline sta appoggiato sull'angolo in basso a DESTRA della copertina: il margine
   negativo fa scavalcare al bigliettino il bordo della foto, quanto basta perché il nastro adesivo
   si veda contro l'immagine. A destra e non a sinistra perché a sinistra, in fondo alla foto, c'è
   il nome della città (.tappa-cover__title) e il bigliettino glielo copriva.
   Funziona solo se è il PRIMO figlio del corpo, cioè subito sotto la copertina. */
.timeline-item__corpo > .taccuino:first-child {
    align-self: flex-end;
    margin: -30px 12px 0 0;
}

/* Il nome della citta' sta in fondo alla foto, a sinistra, e con un nome lungo ("Bryce Canyon
   City") finirebbe sotto il bigliettino. Nessun selettore puo' guardare avanti, quindi e' il
   template a dire che quella tappa ha una nota. */
.timeline-item--con-nota .tappa-cover__title { max-width: 60%; }

/* Nell'hero della home: l'ultima cosa che ha detto il gatto. */
.taccuino--hero {
    max-width: 40ch;
    margin: 4px 0 2px;
    box-shadow: var(--shadow-float), inset 3px 0 0 var(--sunset);
    /* backwards e non both: con "both" lo stato finale dell'animazione batterebbe il transform
       del :hover e il bigliettino non si raddrizzerebbe piu'. */
    animation: taccuino-appoggia 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) backwards;
}

.taccuino--hero::before { background: rgba(255, 255, 255, 0.5); }

.taccuino--hero .taccuino__testo { font-size: 17px; }

/* Si appoggia sul tavolo rimbalzando appena: e' il gesto del timbro che si stampa, stessa
   elastica. Parte ruotato tre volte tanto e si assesta sulla sua inclinazione. */
@keyframes taccuino-appoggia {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96) rotate(calc(var(--rotazione, -2deg) * 3));
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(var(--rotazione, -2deg));
    }
}
.tappa-badge--current { background: rgba(63, 143, 90, 0.9); }

.tappa-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.photo-thumb {
    position: relative;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--sky-soft);
}

.photo-thumb img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    cursor: zoom-in;
    transition: transform 0.4s ease;
}

.photo-thumb:hover img { transform: scale(1.05); }

.photo-thumb__share,
.photo-thumb__scarica {
    position: absolute;
    right: 6px;
    bottom: 6px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 0;
    background: rgba(18, 34, 56, 0.6);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(6px);
}

.photo-thumb__share svg { width: 14px; height: 14px; }

.photo-thumb__scarica { right: 40px; }

.photo-thumb__share.is-copiato { background: var(--success); }

/* ---------- Lightbox ---------- */

/* Tutta la ricetta sta in .velo (in cima al foglio): qui resta solo il piano su cui si apre.
   Ci ha guadagnato le safe area, che prima non aveva — con un notch in orizzontale la ✕ finiva
   sotto la tacca. */
.lightbox { z-index: 200; }

.lightbox__image {
    max-width: min(92vw, 820px);
    max-height: 72vh;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
}

/* .lightbox__close vive su .velo__chiudi: qui non resta niente di suo. */

.lightbox__actions { display: flex; gap: 10px; }

/* ---------- Cartolina da… ----------

   Sta attaccata alla lightbox apposta: sono la stessa stanza — stesso velo, stessa ✕, stessa
   entrata — e chi tocca una deve vedere l'altra. */

/* Il bottone nasce da .btn--outline ma ricolorato nella famiglia cuoio invece che nel denim: la
   cartolina è carta e francobolli, non cielo. È la stessa famiglia delle sovratitolazioni. */
.btn--outline.cartolina-avvio {
    align-self: flex-start;
    gap: 7px;
    padding: 9px 16px;
    font-size: 13px;
    border-color: rgba(139, 90, 43, 0.35);
    background: rgba(244, 236, 223, 0.6);
    color: var(--leather-deep);
}

.btn--outline.cartolina-avvio:hover {
    background: var(--sand);
    border-color: rgba(139, 90, 43, 0.55);
    transform: translateY(-1px);
    box-shadow: var(--shadow-card);
}

.btn--outline.cartolina-avvio:focus-visible {
    outline: 2px solid var(--sunset-deep);
    outline-offset: 2px;
}

.cartolina-avvio__icona { font-size: 15px; line-height: 1; }

/* Il pannello vive su .velo: qui resta solo il piano, un gradino sopra la lightbox, così se una
   foto è già aperta la cartolina le finisce davanti. */
.cartolina-overlay { z-index: 210; }

/* La tela entra come le impronte che si stampano: sembra timbrata. */
.cartolina-overlay__tela {
    width: auto;
    height: auto;
    max-width: min(88vw, 400px);
    max-height: calc(var(--altezza-reale, 100svh) * 0.58);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
    background: var(--sand-soft);
    animation: stampa 0.55s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.cartolina-overlay__attesa {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 700;
}

.cartolina-overlay__zampa {
    font-size: 40px;
    line-height: 1;
    animation: galleggia 1.4s ease-in-out infinite;
}

.cartolina-overlay__azioni {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

/* Misura e colore arrivano da .sovratitolo--chiaro: qui resta solo l'ingombro. */
.cartolina-overlay__nota {
    margin: 0;
    max-width: 320px;
    text-align: center;
}

.cartolina-overlay__errore {
    margin: 0;
    max-width: 320px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

/* ---------- Croccantini ---------- */

.croccantini-chip {
    position: absolute;
    top: calc(14px + env(safe-area-inset-top, 0px));
    right: 14px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-card);
    font-size: 13px;
    color: var(--denim-ink);
    cursor: pointer;
}

.croccantini-chip strong { font-weight: 800; font-variant-numeric: tabular-nums; }

.croccantini-info {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
    background: rgba(18, 34, 56, 0.55);
    backdrop-filter: blur(6px);
}

.croccantini-info__pannello {
    width: 100%;
    max-width: 440px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 22px 20px 20px;
    border-radius: var(--radius-xl);
    background: var(--paper);
    box-shadow: var(--shadow-pop);
    animation: sale 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes sale {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

.croccantini-info__titolo { margin: 0 0 8px; font-family: var(--font-display); font-size: 24px; color: var(--denim-ink); }

.croccantini-info__testo { margin: 0 0 8px; font-size: 14px; color: var(--ink); }

.croccantini-info__lista { margin: 0 0 12px; padding-left: 18px; font-size: 14px; color: var(--ink); }

.croccantini-info__lista li { margin-bottom: 4px; }

.croccantini-info__nota { margin: 0 0 14px; font-size: 12px; color: var(--ink-mute); }

.croccantini-toast {
    position: absolute;
    top: calc(58px + env(safe-area-inset-top, 0px));
    right: 14px;
    z-index: 61;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--sunset);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 6px 16px rgba(217, 130, 58, 0.4);
    animation: toast-in 0.3s cubic-bezier(0.2, 1.3, 0.4, 1);
}

.croccantini-toast.is-uscita { animation: toast-out 0.35s ease-in forwards; }

@keyframes toast-in { from { transform: translateY(-8px) scale(0.8); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toast-out { to { transform: translateY(-10px); opacity: 0; } }

/* ---------- Impronte ---------- */

.impronte-bottone {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-top: 6px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: var(--paper);
    box-shadow: var(--shadow-card);
    color: var(--denim);
    cursor: pointer;
}

.impronte-bottone__icona svg { width: 22px; height: 22px; }

.impronte-bottone__puntino {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--sunset);
    border: 2px solid var(--paper);
    animation: pulsa 1.6s ease-out infinite;
}

.impronte-overlay {
    position: fixed;
    inset: 0;
    z-index: 160;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(18, 34, 56, 0.6);
    backdrop-filter: blur(6px);
}

.impronte-pannello {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 28px 22px 22px;
    border-radius: var(--radius-xl);
    background: var(--paper);
    box-shadow: var(--shadow-pop);
    text-align: center;
    opacity: 0;
    transform: translateY(20px) scale(0.96);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.impronte-pannello.is-visibile { opacity: 1; transform: none; }

.impronte-chiudi {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 0;
    background: var(--sky-soft);
    color: var(--denim);
    cursor: pointer;
}

.impronte-stage { display: flex; flex-direction: column; gap: 12px; }

.impronte-stampa {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--sky-soft);
    color: var(--denim);
}

.impronte-stampa__zampa svg { width: 54px; height: 54px; }

.impronte-stampa.is-stampata { animation: stampa 0.55s cubic-bezier(0.2, 1.4, 0.4, 1); }

@keyframes stampa {
    0% { transform: scale(1.8) rotate(-12deg); opacity: 0; }
    60% { transform: scale(0.95) rotate(2deg); opacity: 1; }
    100% { transform: none; }
}

.impronte-titolo { margin: 0; font-family: var(--font-display); font-size: 26px; color: var(--denim-ink); }

.impronte-sottotitolo { margin: 0; color: var(--ink-soft); font-size: 14px; }

.impronte-striscia-wrap {
    margin: 4px calc(-1 * 22px);
    padding: 6px 22px;
    overflow-x: auto;
    scrollbar-width: none;
}

.impronte-striscia-wrap::-webkit-scrollbar { display: none; }

.impronte-striscia { display: flex; gap: 10px; width: max-content; }

.impronta { display: flex; flex-direction: column; align-items: center; gap: 4px; }

.impronta__cerchio {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--sky-soft);
    color: var(--ink-mute);
}

.impronta__cerchio svg { width: 24px; height: 24px; }

.impronta--presa .impronta__cerchio { background: var(--denim); color: #fff; }

.impronta--nuova .impronta__cerchio { background: var(--sunset); box-shadow: 0 0 0 4px rgba(240, 163, 94, 0.3); }

.impronta--futura .impronta__cerchio { border: 2px dashed var(--line-strong); background: transparent; }

.impronta--cliccabile { cursor: pointer; }

.impronta__badge {
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: 16px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.impronta__data { font-size: 11px; font-weight: 700; color: var(--ink-mute); white-space: nowrap; }

.impronte-prossimo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    background: var(--sky-soft);
    text-align: left;
}

.impronte-prossimo__icona { font-size: 22px; }

.impronte-prossimo__testo { margin: 0; font-size: 14px; color: var(--denim-ink); }

.impronte-regalo-annuncio {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #fff2e3, #ffe6cc);
}

.impronte-regalo-annuncio__testo { margin: 0; font-weight: 800; color: var(--leather-deep); }

.impronte-regalo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }

.impronte-regalo__scatola-wrap { height: 110px; display: grid; place-items: center; }

.impronte-regalo__scatola { font-size: 76px; line-height: 1; transition: transform 0.3s ease; }

.impronte-regalo__scatola.is-scuote { animation: scuoti 0.7s ease-in-out; }

.impronte-regalo__scatola.is-aperta { transform: scale(1.15) translateY(-8px); filter: drop-shadow(0 12px 20px rgba(240, 163, 94, 0.5)); }

@keyframes scuoti {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-12deg); }
    40% { transform: rotate(12deg); }
    60% { transform: rotate(-8deg); }
    80% { transform: rotate(8deg); }
}

.impronte-confetti { position: absolute; top: 60px; left: 50%; pointer-events: none; }

.impronte-confetti__pezzo {
    position: absolute;
    width: 8px;
    height: 12px;
    border-radius: 2px;
    animation: confetto var(--durata, 1.6s) ease-out var(--ritardo, 0s) forwards;
}

@keyframes confetto {
    0% { transform: translate(0, 0) rotate(0); opacity: 1; }
    100% { transform: translate(var(--x, 0), 260px) rotate(var(--rot, 0)); opacity: 0; }
}

.impronte-regalo__contenuto {
    width: 100%;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.impronte-regalo__contenuto.is-visibile { opacity: 1; transform: none; }

.impronte-regalo__eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }

.impronte-regalo__titolo { margin: 0; display: flex; flex-direction: column; gap: 2px; }

.impronte-regalo__importo { font-family: var(--font-display); font-size: 40px; font-weight: 700; color: var(--denim-ink); line-height: 1; }

.impronte-regalo__dettaglio { font-size: 16px; font-weight: 700; color: var(--leather); }

.impronte-regalo__testo { margin: 10px 0 0; font-size: 14px; color: var(--ink-soft); }

.impronte-codice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 12px auto 0;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    border: 2px dashed var(--line-strong);
    font-family: 'Courier New', monospace;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.06em;
    color: var(--denim-ink);
    cursor: pointer;
    user-select: all;
}

/* ---------- Cat nudge ---------- */

.cat-nudge {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 12px);
    z-index: 70;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 999px;
    background: var(--denim-deep);
    color: #fff;
    box-shadow: var(--shadow-float);
    cursor: pointer;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cat-nudge.is-visible { opacity: 1; transform: none; pointer-events: auto; }

.cat-nudge__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--sky-deep); }

.cat-nudge__text { flex: 1; margin: 0; font-size: 13.5px; font-weight: 600; }

.cat-nudge__close { width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; }

/* ---------- Bottom nav ---------- */

.bottom-nav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr; /* una colonna per voce, qualunque sia il numero */
    height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
}

.bottom-nav__indicatore {
    position: absolute;
    top: 6px;
    left: 0; /* offsetLeft degli item include già il padding della barra */
    height: calc(var(--bottom-nav-h) - 12px);
    width: 0;
    border-radius: 16px;
    background: var(--sky-soft);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.35s ease, opacity 0.2s ease;
}

.bottom-nav__item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ink-mute);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--transizione);
}

.bottom-nav__item svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--transizione);
}

.bottom-nav__item--active { color: var(--denim); }

.bottom-nav__item--active svg { transform: translateY(-1px); }

/* ---------- Sidebar (desktop) ---------- */

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    text-decoration: none;
    color: inherit;
}

.sidebar__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--sky);
}

.sidebar__brand-testo { display: flex; flex-direction: column; }

.sidebar__brand-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }

.sidebar__brand-nome { font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--denim-ink); }

.sidebar__nav { display: flex; flex-direction: column; gap: 4px; margin-top: 18px; }

.sidebar__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 15px;
    color: var(--ink-soft);
    text-decoration: none;
    transition: background var(--transizione), color var(--transizione), transform var(--transizione);
}

.sidebar__item svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.sidebar__item:hover { background: rgba(255, 255, 255, 0.7); color: var(--denim); }

.sidebar__item--active { background: var(--paper); color: var(--denim); box-shadow: var(--shadow-card); }

.sidebar__footer { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px; }

.sidebar__social {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--denim);
    text-decoration: none;
}

.sidebar__admin { font-size: 12px; color: var(--ink-mute); text-decoration: none; }

/* ---------- Chat ---------- */

.chat-page {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
}

.chat-header__testo { min-width: 0; }

.chat-header__avatar {
    position: relative;
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.chat-header__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--paper);
    box-shadow: var(--shadow-card);
}

.chat-header__avatar.is-pensa { animation: pensa 1.4s ease-in-out infinite; }

@keyframes pensa {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(5deg) translateY(-2px); }
}

.chat-header__avatar.is-risposta { animation: salta 0.6s cubic-bezier(0.2, 1.4, 0.4, 1); }

@keyframes salta {
    0% { transform: scale(1); }
    40% { transform: scale(1.12) translateY(-6px); }
    100% { transform: scale(1); }
}

.chat-header__avatar-punti {
    position: absolute;
    left: -10px;
    top: -6px;
    display: none;
    gap: 3px;
    padding: 6px 8px;
    border-radius: 999px;
    background: var(--paper);
    box-shadow: var(--shadow-card);
}

.chat-header__avatar.is-pensa .chat-header__avatar-punti { display: flex; }

.chat-header__avatar-punti i { width: 5px; height: 5px; border-radius: 50%; background: var(--denim); animation: typing 1s infinite; }
.chat-header__avatar-punti i:nth-child(2) { animation-delay: 0.15s; }
.chat-header__avatar-punti i:nth-child(3) { animation-delay: 0.3s; }

.chat-header__avatar-flash {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: #fff;
    opacity: 0;
    pointer-events: none;
}

.chat-header__avatar.is-flash .chat-header__avatar-flash { animation: flash 1.1s ease-out infinite; }

@keyframes flash { 0% { opacity: 0; } 8% { opacity: 0.9; } 30% { opacity: 0; } 100% { opacity: 0; } }

.chat-log {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 6px var(--gutter) 12px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.bubble-row { display: flex; align-items: flex-end; gap: 8px; max-width: 88%; }

.bubble-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }

.bubble {
    padding: 11px 14px;
    border-radius: 18px;
    font-size: 15px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    animation: bolla 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes bolla { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }

.bubble--cat { background: var(--paper); color: var(--ink); border-bottom-left-radius: 6px; box-shadow: var(--shadow-card); }

.bubble--user {
    align-self: flex-end;
    max-width: 88%;
    background: linear-gradient(135deg, var(--denim), var(--denim-deep));
    color: #fff;
    border-bottom-right-radius: 6px;
}

.bubble--typing { display: flex; gap: 4px; padding: 14px 16px; }

.typing-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-mute); animation: typing 1s infinite; }
.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

.bubble-photo { width: min(70vw, 300px); aspect-ratio: 1; object-fit: cover; border-radius: 16px; cursor: zoom-in; }

.bubble-row .photo-thumb { border-radius: 16px; box-shadow: var(--shadow-card); }

.bubble-photo-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 300px;
    padding: 12px 14px;
    border-radius: 18px;
    border-bottom-left-radius: 6px;
    background: var(--paper);
    box-shadow: var(--shadow-card);
    font-size: 13px;
    color: var(--ink-soft);
}

.bubble-photo-loading__icon { font-size: 22px; animation: pensa 1.2s ease-in-out infinite; }

.chat-suggestions {
    display: flex;
    gap: 8px;
    padding: 4px var(--gutter) 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

.chat-suggestions::-webkit-scrollbar { display: none; }

.chat-chip {
    flex: 0 0 auto;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: var(--paper);
    color: var(--denim);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transizione), transform var(--transizione);
}

.chat-chip:hover { background: var(--sky-soft); }
.chat-chip:active { transform: scale(0.96); }
.chat-chip:disabled { opacity: 0.5; cursor: default; }

.chat-chip--foto { border-color: transparent; background: linear-gradient(135deg, #fff2e3, #ffe2c4); color: var(--leather-deep); }

.chat-error {
    margin: 0 var(--gutter) 8px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: #fdecea;
    color: var(--danger);
    font-size: 13px;
    font-weight: 600;
}

.chat-form {
    display: flex;
    gap: 8px;
    padding: 8px var(--gutter) 12px;
    background: linear-gradient(180deg, rgba(251, 248, 242, 0), var(--sand-soft) 40%);
}

.chat-form input {
    flex: 1;
    min-width: 0;
    padding: 13px 18px;
    border-radius: 999px;
    border: 1.5px solid var(--line-strong);
    background: var(--paper);
    color: var(--ink);
    outline: none;
    transition: border-color var(--transizione), box-shadow var(--transizione);
}

.chat-form input:focus { border-color: var(--sky-deep); box-shadow: 0 0 0 4px rgba(111, 163, 214, 0.25); }

.chat-form__send {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 0;
    background: linear-gradient(135deg, var(--sunset), var(--sunset-deep));
    color: #fff;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(217, 130, 58, 0.35);
    transition: transform var(--transizione), opacity var(--transizione);
}

.chat-form__send:active { transform: scale(0.94); }
.chat-form__send:disabled { opacity: 0.5; cursor: default; }

/* ---------- Le mete che il gatto tira fuori (GattoGPT) ----------
   Stessa famiglia di .viaggio-card e .articolo-card (carta bianca, --shadow-card, copertina come
   custom property, titolo in Fraunces, sovratitolazione cuoio), ma in formato conversazione:
   orizzontale e bassa, così non spegne la bolla che sta sopra. Si allineano sotto la bolla del
   gatto e non al bordo del log: 30px di avatar + 8px di gap di .bubble-row = 38px. */

.gatto-mete {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* -2px contro i 10px di gap del .chat-log: le card distano 8px dalla bolla, cioè il ritmo
       interno del gruppo, e si leggono come un unico oggetto attaccato alla risposta. */
    margin: -2px 0 2px 38px;
    max-width: 440px;
    /* Nessun keyframe nuovo: è la bolla che rifà il suo gesto un attimo dopo aver parlato. */
    animation: bolla 0.38s cubic-bezier(0.2, 0.7, 0.2, 1) 0.12s both;
}

/* La misura della sovratitolazione la porta .sovratitolo (e il grigio .sovratitolo--sistema:
   è voce di sistema, il sito che parla di sé). Qui resta solo il margine. */
.gatto-mete__eyebrow { margin: 0 0 1px 2px; }

.gatto-meta {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding-right: 10px;
    background: var(--paper);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    text-decoration: none;
    color: inherit;
    transition: transform var(--transizione), box-shadow var(--transizione);
}

/* La prima card raccoglie la coda della bolla del gatto: 6px, lo stesso identico valore del
   border-bottom-left-radius di .bubble--cat. A 8px la mancava di due pixel e si vedeva. */
.gatto-meta:first-of-type { border-top-left-radius: 6px; }

.gatto-meta:hover { transform: translateY(-3px); box-shadow: var(--shadow-float); }
.gatto-meta:active { transform: scale(0.985); }
.gatto-meta:focus-visible { outline: 2px solid var(--denim); outline-offset: 2px; }

.gatto-meta__cover {
    position: relative;
    align-self: stretch;
    min-height: 84px;
    background: var(--denim-deep) var(--cover) var(--cover-pos, 50% 50%) / cover no-repeat;
}

/* Un filo d'ombra sul lato del testo: stacca la foto dalla carta senza spegnerla. */
.gatto-meta__cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(18, 34, 56, 0.16), rgba(18, 34, 56, 0) 60%);
}

.gatto-meta__testo {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 11px 0;
}

/* Misura e colore arrivano da .sovratitolo / .sovratitolo--cuoio: qui solo la riga in fila. */
.gatto-meta__tipo {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Il racconto è l'unico che non è "posto": parla la famiglia denim, non il cuoio. */
.gatto-meta--articolo .gatto-meta__tipo { color: var(--denim); }

/* Il pallino pulsante è quello di .viaggio-card, che lì vive su una pastiglia scura: su carta
   bianca il suo verde chiarissimo (#c8ffd9) sparirebbe. Questa riga non è cosmetica. */
.gatto-meta__tipo .viaggio-card__pulsante { background: var(--success); }

/* Solo la misura: il filo 0 0 0 1px di .bandiera resta e serve, altrimenti su carta bianca la
   bandiera del Giappone diventa un puntino rosso che galleggia. */
.gatto-meta__tipo .bandiera { width: 15px; }

.gatto-meta__titolo {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    line-height: 1.18;
    color: var(--denim-ink);
}

.gatto-meta__riga {
    overflow: hidden;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--ink-soft);
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Non è un bottone: è il segnale che la card è un link. */
.gatto-meta__freccia {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--sky-soft);
    color: var(--denim);
    font-size: 14px;
    font-weight: 800;
    transition: background var(--transizione), transform var(--transizione);
}

.gatto-meta:hover .gatto-meta__freccia { background: var(--sky); transform: translateX(2px); }

/* ---------- In arrivo (gioca) ---------- */

.in-arrivo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 30px 22px;
    text-align: center;
}

.in-arrivo__scena { position: relative; margin-bottom: 8px; }

.in-arrivo__gatto {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--sky);
    animation: galleggia 3s ease-in-out infinite;
}

@keyframes galleggia { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.in-arrivo__bolla {
    position: absolute;
    right: -30px;
    top: -6px;
    padding: 8px 12px;
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    background: var(--paper);
    box-shadow: var(--shadow-card);
    font-size: 13px;
    font-weight: 700;
    color: var(--denim-ink);
    white-space: nowrap;
}

.in-arrivo__titolo { margin: 0; font-family: var(--font-display); font-size: 26px; color: var(--denim-ink); }

.in-arrivo__testo { margin: 0 0 8px; max-width: 44ch; color: var(--ink-soft); }

/* ---------- Splash ---------- */

.splash {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100%;
    padding: calc(24px + env(safe-area-inset-top, 0px)) 24px calc(28px + env(safe-area-inset-bottom, 0px));
    color: #fff;
    background:
        linear-gradient(180deg, rgba(18, 34, 56, 0.1) 0%, rgba(18, 34, 56, 0.55) 55%, rgba(18, 34, 56, 0.95) 100%),
        var(--splash-sfondo) center 20% / cover no-repeat,
        var(--denim-deep);
    overflow: hidden;
}

.splash__cielo { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.splash__nuvola {
    position: absolute;
    width: 220px;
    height: 70px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    filter: blur(14px);
    animation: nuvola 40s linear infinite;
}

.splash__nuvola--1 { top: 10%; left: -240px; }
.splash__nuvola--2 { top: 24%; left: -300px; width: 300px; animation-duration: 55s; animation-delay: -20s; }
.splash__nuvola--3 { top: 40%; left: -200px; width: 180px; animation-duration: 48s; animation-delay: -35s; }

@keyframes nuvola { to { transform: translateX(calc(100vw + 340px)); } }

.splash__aereo {
    position: absolute;
    top: 8%;
    left: -60px;
    width: 34px;
    height: 34px;
    color: rgba(255, 255, 255, 0.7);
    transform: rotate(35deg);
    animation: aereo 14s ease-in-out infinite;
    animation-delay: 1s;
}

@keyframes aereo {
    0% { transform: translate(0, 0) rotate(35deg); opacity: 0; }
    10% { opacity: 1; }
    50% { transform: translate(60vw, -30px) rotate(35deg); opacity: 1; }
    70% { transform: translate(110vw, -70px) rotate(35deg); opacity: 0; }
    100% { transform: translate(110vw, -70px) rotate(35deg); opacity: 0; }
}

.splash__contenuto {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    max-width: 480px;
    margin: 0 auto;
}

.splash__ritratto {
    width: 128px;
    height: 128px;
    padding: 4px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sunset), var(--sky-deep));
    box-shadow: var(--shadow-pop);
    animation: galleggia 4s ease-in-out infinite;
}

.splash__ritratto img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center 25%; }

.splash__eyebrow { margin: 6px 0 0; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }

.splash__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(40px, 11vw, 64px);
    line-height: 0.98;
    letter-spacing: -0.02em;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.35);
}

.splash__subtitle { margin: 4px 0 0; font-size: 15px; color: rgba(255, 255, 255, 0.88); max-width: 40ch; }

.splash__numeri {
    display: flex;
    gap: 10px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.splash__numeri li {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
    padding: 8px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.splash__numeri strong { font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1; }

.splash__numeri span { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; margin-top: 3px; }

.splash__cta { margin-top: 14px; }

.splash__social {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

/* ---------- Login ---------- */

.app-shell--auth .app-shell__main { display: grid; place-items: center; padding: 24px; }

.login-card {
    width: 100%;
    max-width: 400px;
    padding: 28px 24px;
    border-radius: var(--radius-xl);
    background: var(--paper);
    box-shadow: var(--shadow-float);
    text-align: center;
}

.login-card__avatar { width: 72px; height: 72px; margin: 0 auto 12px; border-radius: 50%; object-fit: cover; border: 3px solid var(--sky); }

.login-card__titolo { margin: 0; font-family: var(--font-display); font-size: 28px; color: var(--denim-ink); }

.login-card__testo { margin: 4px 0 18px; font-size: 14px; color: var(--ink-soft); }

.login-card form { display: flex; flex-direction: column; gap: 12px; text-align: left; }

.campo { display: flex; flex-direction: column; gap: 5px; }

.login-card__ricordami { display: flex; align-items: center; gap: 9px; margin: 14px 0 4px; cursor: pointer; font-size: 14px; color: var(--ink-soft); }

.login-card__ricordami input { width: 18px; height: 18px; accent-color: var(--denim); cursor: pointer; flex: none; }

.campo label { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }

.campo input {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1.5px solid var(--line-strong);
    background: var(--sand-soft);
    outline: none;
}

.campo input:focus { border-color: var(--sky-deep); box-shadow: 0 0 0 4px rgba(111, 163, 214, 0.25); }

.login-card__error { margin: 14px 0 0; color: var(--danger); font-weight: 600; font-size: 14px; }

/* ==========================================================================
   Tablet
   ========================================================================== */

@media (min-width: 640px) {
    :root { --gutter: 26px; }

    .griglia-viaggi { grid-template-columns: repeat(2, 1fr); }
    .stamp-grid { grid-template-columns: repeat(3, 1fr); }
    .stamp-grid--compatta { grid-template-columns: repeat(4, 1fr); }
    .tappa-gallery { grid-template-columns: repeat(4, 1fr); }
    .map-card { height: 380px; }
    .hero { min-height: 400px; }
    .hero--viaggio { min-height: 440px; }
    .instagram-posts__griglia { grid-template-columns: repeat(2, 1fr); }
    .scroller > * { flex-basis: 320px; }
    .cartolina-overlay__tela { max-width: min(70vw, 430px); }
.gatto-mete { max-width: 520px; }
    .gatto-meta { grid-template-columns: 104px minmax(0, 1fr) auto; gap: 12px; padding-right: 12px; }
    .gatto-meta__cover { min-height: 100px; }
    .gatto-meta__titolo { font-size: 18px; }
    .gatto-meta__freccia { width: 26px; height: 26px; }
}

/* ==========================================================================
   Desktop: sidebar a sinistra, contenuto centrato, niente bottom nav
   ========================================================================== */

@media (min-width: 1024px) {
    :root { --gutter: 40px; }

    .app-shell { flex-direction: row; }

    .sidebar {
        display: flex;
        flex-direction: column;
        flex: 0 0 var(--sidebar-w);
        padding: 22px 14px 18px;
        border-right: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.35);
        backdrop-filter: blur(10px);
    }

    .app-shell__main { padding-bottom: 32px; }
    .app-shell--chat .app-shell__main { padding-bottom: 0; }

    .bottom-nav { display: none; }

    .cat-nudge { left: auto; right: 28px; bottom: 28px; max-width: 380px; }

    .croccantini-chip { top: 22px; right: 28px; }
    .croccantini-toast { top: 66px; right: 28px; }
    .croccantini-info { align-items: center; }

    .page-header,
    .page-content {
        width: 100%;
        max-width: var(--content-max);
        margin-left: auto;
        margin-right: auto;
    }

    .page-header { padding-top: 40px; }
    /* Spazio per il chip croccantini in alto a destra, solo quando la funzione è attiva. */
    .app-shell--con-chip .page-header:not(.chat-header) { padding-right: 120px; }
    .page-content { gap: 26px; padding-top: 20px; }

    .hero { min-height: 460px; }
    .hero__contenuto { padding: 40px 40px 38px; max-width: 640px; }
    .hero__titolo { font-size: 52px; }

    .hero--viaggio {
        width: calc(100% - 2 * var(--gutter));
        max-width: calc(var(--content-max) - 2 * var(--gutter));
        margin: 24px auto 0;
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-float);
    }

    .hero__indietro { top: 20px; left: 20px; }

    .griglia-2 { grid-template-columns: 1.1fr 0.9fr; align-items: stretch; gap: 26px; }
    .pila { gap: 26px; }

    .scroller {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin: 0;
        padding: 4px 0 4px;
        overflow: visible;
    }

    .scroller > * { flex-basis: auto; }

    .griglia-viaggi { grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .griglia-viaggi .viaggio-card--grande { grid-column: span 2; }

    .stat-row { gap: 16px; }
    .stat { flex-direction: row; justify-content: center; gap: 12px; padding: 18px; text-align: left; }
    .stat strong { font-size: 34px; }
    .stat span { margin-top: 0; font-size: 13px; }

    /* Il primato si apre in due: a sinistra la cifra, a destra il luogo.
       Sta DOPO le regole di .stat apposta: a parità di specificità vince chi viene dopo. */
    .primato {
        grid-template-columns: auto 1fr;
        column-gap: 34px;
        align-items: center;
        padding: 26px 30px 24px;
        border-radius: var(--radius-xl);
    }

    .primato__eyebrow,
    .primato__rotta,
    .primato__link { grid-column: 1 / -1; }

    .primato__cifra { font-size: 72px; }

    .primato__dove { margin-top: 0; }

    .primato__luogo { font-size: 21px; }

    .primato__nota { font-size: 13px; }

    .primato__rotta { margin-top: 20px; }

    .timeline { padding-left: 40px; gap: 22px; }
    .timeline::before { left: 14px; }

    /* DUE COLONNE VERE: la copertina a sinistra, tutto il resto impilato a destra.
       Non è una riga che va a capo con una tabella di order — lo è stata, e con contenuti che
       cambiano da tappa a tappa ogni pezzo mancante spostava tutti gli altri. Qui la colonna di
       destra ha semplicemente meno figli, e niente si muove. */
    .timeline-item {
        display: grid;
        grid-template-columns: 300px minmax(0, 1fr);
        padding: 14px;
        gap: 14px;
    }

    .timeline-item__dot { left: -40px; width: 30px; height: 30px; }

    /* Qui il bigliettino non sta piu' sulla foto: il nome della citta' riprende tutto lo spazio. */
    .timeline-item--con-nota .tappa-cover__title { max-width: none; }
    .timeline-item .tappa-cover { min-height: 190px; }
    .timeline-item__corpo { gap: 12px; }
    .timeline-item__testo { padding: 2px 4px 0; }
    .timeline-item .tappa-gallery { grid-template-columns: repeat(6, 1fr); }

    /* Qui il bigliettino non e' piu' appoggiato sulla foto: sta in cima alla sua colonna, a
       sinistra come tutto il resto. Il selettore ricalca quello del telefono perche' se no quello
       vince per specificita' e la nota esce dal bordo della scheda. */
    .timeline-item__corpo > .taccuino:first-child,
    .timeline-item .taccuino {
        align-self: flex-start;
        max-width: 42ch;
        margin: 0;
    }

    .taccuino--hero { max-width: 44ch; }

    .map-card { height: 460px; }

    .cartolina-overlay { gap: 18px; }

    .cartolina-overlay__tela {
        max-width: 420px;
        max-height: calc(var(--altezza-reale, 100svh) * 0.66);
    }

    .stamp-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
    .stamp-grid--compatta { grid-template-columns: repeat(4, 1fr); }
    .passaporto { padding: 28px; }

    .chat-page { max-width: var(--content-max); width: 100%; margin: 0 auto; }
    .bubble-row, .bubble--user { max-width: 640px; }
    .chat-header { padding-top: 40px; }
    .chat-log { padding-bottom: 20px; }
    .chat-form { padding-bottom: 24px; }
    .bubble-photo { width: 320px; }
.gatto-mete { max-width: 560px; }

    .splash { padding: 60px; justify-content: center; }
    .splash__contenuto { max-width: 560px; }
    .splash__ritratto { width: 160px; height: 160px; }
}

@media (min-width: 1400px) {
    :root { --content-max: 1220px; }
}