/* Foglio di stile del sito alfianco.app.
   Prima stava dentro index.html: e' uscito il 23/10/2026 perche' le pagine
   nuove (chi siamo, FAQ, supporto, cookie) devono avere lo stesso aspetto
   senza ricopiarsi addosso trecento righe a testa.
   Privacy e Termini NON lo usano: stanno su un altro dominio
   (app.alfianco.app) e restano due file a se' stanti. */
:root {
    /* Palette del marchio: fondo azzurro #CFE6E8, teal ufficiale del logo #21808D.
       I nomi delle variabili restano quelli di prima per non toccare 700 righe di CSS. */
    --cream-50:  #CFE6E8;   /* fondo della pagina */
    --cream-100: #FBFAF7;   /* card e superfici appoggiate sopra */
    --sand-100:  #F3F0E9;   /* fascia della sezione Piani */
    --slate-500: #44666A;   /* testo secondario */
    --slate-900: #16343A;   /* testo corrente */
    --teal-100:  #F2FAFB;   /* tono chiarissimo del marchio */
    --teal-300:  #7BAFB0;
    --teal-400:  #45939B;
    --teal-500:  #21808D;   /* teal del logo: bottoni, titoli, accenti */
    --teal-600:  #17717D;   /* hover dei bottoni */
    --teal-700:  #035460;   /* tono scuro del marchio */
    --teal-ink:  var(--teal-700);
    --amber:     #FFB347;   /* ambra del marchio: il cuore del logo */
    --amber-hover: #FFA51F;
    --amber-50:  #F8EADB;   /* fondo della coppia ambra, dalla tavola ICONE */
    --red-500:   #EF5241;   /* rosso della tavola ICONE */
    --red-50:    #F4E0DD;   /* fondo della coppia rossa */
    --border:    #A9CFD3;
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --font-base: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Red Hat Display', 'Plus Jakarta Sans', sans-serif;
    --shadow-sm: 0 1px 2px rgba(20,40,38,0.06);
    --shadow-md: 0 8px 24px rgba(20,40,38,0.10);
    --shadow-lg: 0 20px 48px rgba(20,40,38,0.16);
    --header-bg: rgba(207,230,232,0.85);
    --ease-out: cubic-bezier(0.22, 0.7, 0.24, 1);
}

/* Il tema scuro automatico è sospeso: il sito ha un aspetto solo, quello chiaro
   del marchio. Finché restava attivo, chi ha il sistema in dark mode vedeva la
   versione precedente invece della palette approvata. Per riattivarlo basta
   togliere i commenti qui sotto e riportare i valori sulla nuova palette. */
/*
@media (prefers-color-scheme: dark) {
    :root {
        --cream-50:  #14201F;
        --cream-100: #1B2A28;
        --slate-500: rgba(166,178,175,0.85);
        --slate-900: #F3F0E9;
        --teal-100:  rgba(123,175,176,0.14);
        --teal-ink:  var(--teal-300);
        --border:    rgba(166,178,175,0.18);
        --shadow-sm: 0 1px 4px rgba(0,0,0,0.3);
        --shadow-md: 0 8px 24px rgba(0,0,0,0.35);
        --shadow-lg: 0 20px 48px rgba(0,0,0,0.45);
        --header-bg: rgba(20,32,31,0.85);
    }
}
*/
:root[data-theme="dark"] {
    --cream-50:  #14201F;
    --cream-100: #1B2A28;
    --sand-100:  #1B2A28;
    --slate-500: rgba(166,178,175,0.85);
    --slate-900: #F3F0E9;
    --teal-100:  rgba(123,175,176,0.14);
    --teal-ink:  var(--teal-300);
    --border:    rgba(166,178,175,0.18);
    --shadow-sm: 0 1px 4px rgba(0,0,0,0.3);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.35);
    --shadow-lg: 0 20px 48px rgba(0,0,0,0.45);
    --header-bg: rgba(20,32,31,0.85);
}
:root[data-theme="light"] {
    --cream-50:  #CFE6E8;
    --cream-100: #FBFAF7;
    --sand-100:  #F3F0E9;
    --slate-500: #44666A;
    --slate-900: #16343A;
    --teal-100:  #F2FAFB;
    --teal-ink:  var(--teal-700);
    --border:    #A9CFD3;
    --shadow-sm: 0 1px 2px rgba(20,40,38,0.06);
    --shadow-md: 0 8px 24px rgba(20,40,38,0.10);
    --shadow-lg: 0 20px 48px rgba(20,40,38,0.16);
    --header-bg: rgba(207,230,232,0.85);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-base);
    background: var(--cream-50);
    color: var(--slate-900);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--teal-500); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* I titoli portano il teal del logo; il corpo del testo resta sul verde scuro,
   che alla dimensione di un paragrafo si legge e il teal no. */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0; letter-spacing: -0.01em; color: var(--teal-500); }

.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--teal-ink); background: var(--teal-100);
    padding: 6px 14px; border-radius: 999px;
}

/* ---------- Header ---------- */
/* Barra teal piena come nel mockup del 23/10: il logo e' un'immagine col
   proprio fondo #21808D, quindi la barra deve avere ESATTAMENTE quel teal,
   altrimenti si vede il rettangolo del logo stagliarsi sulla barra. */
.site-header {
    position: sticky; top: 0; z-index: 40;
    background: var(--teal-500);
    border-bottom: 1px solid transparent;
    transition: box-shadow 0.25s;
}
.site-header.scrolled { box-shadow: var(--shadow-md); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 12px; padding-bottom: 12px; }
.brand { display: flex; align-items: center; text-decoration: none; }
.brand-logo { height: 38px; width: auto; transition: transform 0.4s var(--ease-out); }
.brand:hover .brand-logo { transform: scale(1.04); }
.main-nav { display: flex; align-items: center; gap: 30px; }
.main-nav a { position: relative; text-decoration: none; font-weight: 600; font-size: 0.95rem; color: rgba(255,255,255,0.9); transition: color 0.15s; }
/* le barrette verticali fra una voce e l'altra, come nel mockup */
.main-nav a + a::before { content: ""; position: absolute; left: -16px; top: 50%; transform: translateY(-50%); width: 1px; height: 15px; background: rgba(255,255,255,0.35); }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 2px; background: #fff; border-radius: 2px; transition: right 0.28s var(--ease-out); }
.main-nav a:hover { color: #fff; }
.main-nav a:hover::after { right: 0; }
.main-nav { display: none; }
@media (min-width: 860px) { .main-nav { display: flex; } }
.site-header :focus-visible { outline-color: #fff; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-base); font-weight: 700; font-size: 0.95rem;
    padding: 12px 22px; border-radius: var(--radius-md); border: none; cursor: pointer;
    text-decoration: none; white-space: nowrap;
    transition: transform 0.18s var(--ease-out), box-shadow 0.18s, background 0.18s, border-color 0.18s;
}
.btn:active { transform: translateY(1px) scale(0.98); }
.btn-primary { background: var(--teal-500); color: white; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--teal-600); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--teal-ink); border: 1.5px solid var(--border); }
.btn-ghost:hover { border-color: var(--teal-500); transform: translateY(-2px); }
.btn-small { padding: 9px 16px; font-size: 0.88rem; }
/* Bottone chiaro: serve sul teal della testata e del footer, dove il bottone
   teal sparirebbe nel fondo. */
.btn-chiaro { background: var(--cream-100); color: var(--teal-700); box-shadow: var(--shadow-sm); }
.btn-chiaro:hover { background: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn svg { width: 18px; height: 18px; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 72px 0 64px; }
.hero-blobs {
    position: absolute; inset: -10% -10% auto -10%; height: 640px; z-index: 0; pointer-events: none;
    background:
        radial-gradient(closest-side, rgba(123,175,176,0.42), transparent 72%) 78% 18% / 55% 90% no-repeat,
        radial-gradient(closest-side, rgba(255,179,71,0.24), transparent 72%) 18% 55% / 42% 60% no-repeat;
    filter: blur(6px);
}
.hero-grid { position: relative; z-index: 1; display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 40px; } }

.hero-copy > * { animation: heroIn 0.75s var(--ease-out) backwards; }
.hero-copy > *:nth-child(1) { animation-delay: 0.05s; }
.hero-copy > *:nth-child(2) { animation-delay: 0.14s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.23s; }
.hero-copy > *:nth-child(4) { animation-delay: 0.32s; }
.hero-copy > *:nth-child(5) { animation-delay: 0.41s; }

.hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.08; margin: 18px 0 20px; }
.hero h1 em { font-style: normal; color: var(--teal-ink); }
.hero .lede { font-size: 1.12rem; color: var(--slate-500); max-width: 46ch; margin-bottom: 30px; }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 14px; }
.hero-trust { font-size: 0.88rem; color: var(--slate-500); }
.hero-trust strong { color: var(--slate-900); }

.hero-visual { position: relative; min-height: 430px; }
.preview-stack { position: relative; width: 100%; max-width: 360px; height: 480px; margin: 0 auto; transition: transform 0.4s var(--ease-out); will-change: transform; }
.preview-card {
    position: absolute; width: 74%; background: var(--cream-100); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 18px 20px;
    animation: fadeIn 0.7s var(--ease-out) backwards, float var(--fdur, 6s) ease-in-out var(--fdelay, 0.7s) infinite backwards;
}
.preview-card.card-1 { top: 0; left: 0; --rot: -6deg; --fdur: 6.5s; --fdelay: 0.55s; z-index: 1; animation-delay: 0.45s, 0.55s; }
.preview-card.card-2 { top: 150px; right: 0; left: auto; --rot: 4deg; --fdur: 7.5s; --fdelay: 0.9s; z-index: 2; background: var(--teal-500); color: white; border-color: transparent; animation-delay: 0.58s, 0.9s; }
.preview-card.card-3 { top: 305px; left: 6%; --rot: -2deg; --fdur: 6.9s; --fdelay: 1.2s; z-index: 3; animation-delay: 0.7s, 1.2s; }
.preview-icon { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; background: var(--cream-50); color: var(--teal-ink); }
.card-2 .preview-icon { background: rgba(255,255,255,0.2); color: white; }
.preview-icon.rosso { background: var(--red-50); color: var(--red-500); }
.preview-card .pv-title { font-weight: 700; font-size: 0.98rem; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.preview-card .pv-sub { font-size: 0.82rem; color: var(--slate-500); }
.card-2 .pv-sub { color: rgba(255,255,255,0.8); }
.preview-icon svg { width: 22px; height: 22px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal-500); flex-shrink: 0; animation: pulse 2.2s ease-out infinite; }

/* ---------- Sections generic ---------- */
section { padding: 88px 0; }
.section-head { max-width: 640px; margin: 0 auto 52px; text-align: center; }
.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 14px 0 12px; }
.section-head p { color: var(--slate-500); font-size: 1.05rem; }

/* ---------- Schermate dell'app ---------- */
/* Su telefono si affiancano due colonne strette: meglio una sola immagine
   grande e leggibile, e le altre scorrendo. */
.schermate { display: grid; gap: 34px; justify-items: center; }
@media (min-width: 700px) { .schermate { grid-template-columns: repeat(2, 1fr); align-items: start; } }
@media (min-width: 1100px) { .schermate { grid-template-columns: repeat(4, 1fr); } }
.schermata { margin: 0; max-width: 300px; text-align: center; }
.schermata img {
  width: 100%; height: auto; display: block;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
}
.schermata figcaption { margin-top: 14px; color: var(--slate-500); font-size: 0.95rem; }


/* ---------- Video di presentazione ---------- */
/* Niente riproduzione automatica: parte al clic, con i comandi in vista.
   Un video che si avvia da solo con l'audio, su una pagina che parla di
   assistenza, ottiene l'effetto opposto a quello che serve. */
.video-cornice {
  position: relative; /* ancora il comando dei sottotitoli sovrapposto al video */
  max-width: 880px; margin: 0 auto;
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  background: #000;
}
.video-cornice video { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; }

/* ---------- Come funziona: video e quattro passaggi ---------- */
.video-didascalia { text-align: center; color: var(--slate-500); max-width: 60ch; margin: 24px auto 0; font-size: 1.02rem; }

/* Le quattro tinte sono scure apposta: sul teal chiaro del mockup il testo
   bianco non si legge (sotto 3:1). Qui la piu' chiara e' il teal del logo,
   che col bianco sta a 4,6:1 e passa. */
.flusso { display: grid; gap: 18px; margin-top: 54px; }
@media (min-width: 700px)  { .flusso { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .flusso { grid-template-columns: repeat(4, 1fr); gap: 30px; } }
.flusso-card {
    position: relative; background: var(--tinta); color: #fff;
    border-radius: var(--radius-lg); padding: 30px 22px 28px; text-align: center;
    transition: transform 0.2s var(--ease-out), box-shadow 0.2s;
}
.flusso-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.flusso-card h3 { color: #fff; font-family: var(--font-base); font-size: 0.98rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; }
.flusso-card p { color: rgba(255,255,255,0.9); font-size: 0.92rem; margin: 0; }
.flusso-icona { width: 74px; height: 74px; border-radius: 50%; background: #fff; color: var(--tinta); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.flusso-icona svg { width: 36px; height: 36px; }
/* la punta verso il passaggio successivo, solo quando stanno in fila */
@media (min-width: 1060px) {
    .flusso-card::after { content: ""; position: absolute; top: 50%; right: -30px; transform: translateY(-50%); border: 15px solid transparent; border-left-color: var(--tinta); }
    .flusso-card:last-child::after { display: none; }
}

/* ---------- Funzionalità grid ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .feature-grid { grid-template-columns: repeat(4, 1fr); } }
.feature-tile {
    background: var(--cream-100); border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: 22px 18px; transition: transform 0.2s var(--ease-out), box-shadow 0.2s, border-color 0.2s;
}
.feature-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--teal-300); }
.tile-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; transition: transform 0.25s var(--ease-out); }
.feature-tile:hover .tile-icon { transform: scale(1.1) rotate(-4deg); }
.tile-icon svg { width: 23px; height: 23px; }
.tile-icon.teal { background: var(--cream-50); color: var(--teal-ink); }
.tile-icon.amber { background: var(--amber-50); color: var(--amber); }
.tile-icon.red { background: var(--red-50); color: var(--red-500); }
.feature-tile h3 { font-family: var(--font-base); font-size: 1rem; font-weight: 700; margin-bottom: 5px; }
.feature-tile p { font-size: 0.87rem; color: var(--slate-500); margin: 0; }

/* ---------- Piani ---------- */
.piani { background: var(--sand-100); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.trial-banner {
    display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center;
    background: var(--teal-500); color: white; border-radius: var(--radius-md);
    padding: 16px 24px; margin: 0 auto 44px; max-width: 640px; font-weight: 600; font-size: 0.95rem;
}
.plans-grid { display: grid; gap: 24px; max-width: 1040px; margin: 0 auto; }
@media (min-width: 700px) { .plans-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .plans-grid { grid-template-columns: repeat(3, 1fr); } }
.plan-card { background: var(--cream-50); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 32px 28px; transition: transform 0.2s var(--ease-out), box-shadow 0.2s; }
.plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.plan-card.featured { border-color: var(--amber); border-width: 2px; box-shadow: var(--shadow-md); position: relative; }
.plan-badge { position: absolute; top: -13px; right: 24px; background: var(--amber); color: var(--teal-700); font-size: 0.75rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.plan-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; }
.plan-price { font-size: 2rem; font-weight: 800; font-family: var(--font-display); margin-bottom: 2px; }
.plan-price span { font-size: 0.95rem; font-weight: 600; color: var(--slate-500); }
.plan-note { font-size: 0.82rem; color: var(--slate-500); font-weight: 600; margin-bottom: 20px; }
.plan-note.evidenza { color: var(--teal-ink); font-weight: 700; }
.plan-list { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 11px; }
.plan-list li { display: flex; gap: 10px; font-size: 0.94rem; align-items: flex-start; }
.plan-list li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--teal-500); }
.plan-card.featured .plan-list li svg { color: var(--amber); }
.plan-card .btn { width: 100%; }

/* ---------- CTA finale ---------- */
.cta-final { text-align: center; }
.cta-final h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: 16px; }
.cta-final p { color: var(--slate-500); max-width: 46ch; margin: 0 auto 32px; font-size: 1.05rem; }

/* ---------- Fascia con la fotografia ---------- */
/* L'originale e' largo 1280 px: tenendo la fascia bassa non si vede sgranata
   nemmeno sugli schermi grandi. */
.fascia-foto { padding: 0; }
.fascia-foto img { width: 100%; height: clamp(200px, 30vw, 360px); object-fit: cover; object-position: center 45%; }

/* ---------- Badge degli store (spenti) ---------- */
/* Niente loghi ufficiali finche' le app non sono pubblicate: sono marchi
   registrati con regole d'uso precise, e un badge vero che non porta allo
   store sarebbe anche una promessa falsa. */
.store { text-align: center; margin-top: 54px; }
.store-nota { color: var(--slate-500); max-width: 58ch; margin: 0 auto 24px; }
.store-badge { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 26px; }
.badge-spento {
    display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.25;
    padding: 9px 20px; border-radius: var(--radius-sm);
    border: 1.5px dashed var(--border); color: var(--slate-500); cursor: default;
}
.badge-su { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; }
.badge-nome { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--teal-500); color: rgba(255,255,255,0.88); padding: 54px 0 30px; }
.footer-top { display: grid; gap: 32px; }
@media (min-width: 760px) { .footer-top { grid-template-columns: 1.5fr 1fr 1.2fr 1fr; gap: 28px; } }
.footer-col { display: flex; flex-direction: column; gap: 11px; font-size: 0.9rem; align-items: flex-start; }
.footer-col a { text-decoration: none; color: rgba(255,255,255,0.85); transition: color 0.15s; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-marchio p { margin: 0; font-size: 0.86rem; color: rgba(255,255,255,0.78); }
.site-footer .brand-logo { height: 34px; width: auto; }
.site-footer .badge-spento { border-color: rgba(255,255,255,0.4); color: rgba(255,255,255,0.8); }
.site-footer :focus-visible { outline-color: #fff; }
/* Instagram. LinkedIn manca di proposito: l'indirizzo non c'e' ancora, e
   un'icona che non porta da nessuna parte e' peggio di nessuna icona. */
.footer-social { display: flex; gap: 12px; margin-top: 6px; }
.footer-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.38); color: rgba(255,255,255,0.9);
    transition: background 0.18s, color 0.18s, transform 0.18s var(--ease-out);
}
.footer-social a:hover { background: rgba(255,255,255,0.14); color: #fff; transform: translateY(-2px); }
.footer-social svg { width: 19px; height: 19px; }
.footer-note {
    text-align: center; font-size: 0.8rem; color: rgba(255,255,255,0.78);
    margin: 34px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.18);
}
.footer-note a { color: inherit; text-decoration: none; }
.footer-note a:hover { color: #fff; text-decoration: underline; }

/* ---------- Pagine di testo (chi siamo, FAQ, supporto, cookie) ---------- */
.pagina { padding: 54px 0 78px; }
.pagina .wrap { max-width: 760px; }
.pagina h1 { font-size: clamp(1.9rem, 3.6vw, 2.5rem); margin-bottom: 12px; }
.pagina h2 { font-size: 1.22rem; margin: 36px 0 12px; }
.pagina p, .pagina li { font-size: 1.03rem; }
.pagina p { margin: 0 0 16px; }
.pagina ul { padding-left: 22px; margin: 0 0 18px; }
.pagina li { margin-bottom: 9px; }
.pagina a { color: var(--teal-ink); text-decoration: underline; text-underline-offset: 3px; }
.pagina a:hover { color: var(--teal-500); }
.pagina .sottotitolo { font-size: 1.12rem; color: var(--slate-500); margin-bottom: 26px; }
.pagina .data { font-size: 0.85rem; color: var(--slate-500); margin-bottom: 26px; }
.briciole { font-size: 0.85rem; color: var(--slate-500); margin-bottom: 20px; }
.briciole a { color: inherit; text-decoration: none; }
.briciole a:hover { color: var(--teal-ink); }
.firma { margin-top: 34px; font-family: var(--font-display); font-weight: 700; color: var(--teal-500); }
.firma span { display: block; font-family: var(--font-base); font-weight: 500; font-size: 0.9rem; color: var(--slate-500); }

/* una domanda delle FAQ */
.domanda { background: var(--cream-100); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px 24px; margin-bottom: 14px; }
.domanda h2 { margin: 0 0 8px; font-size: 1.06rem; font-family: var(--font-base); font-weight: 800; color: var(--teal-ink); }
.domanda p:last-child { margin-bottom: 0; }

/* il riquadro con l'indirizzo dell'assistenza */
.scatola-contatto { background: var(--teal-500); color: #fff; border-radius: var(--radius-lg); padding: 30px 26px; text-align: center; margin: 28px 0 10px; }
.scatola-contatto p { margin: 0; }
.contatto-etichetta { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.8); }
.contatto-indirizzo { font-family: var(--font-display); font-size: clamp(1.15rem, 3.4vw, 1.6rem); font-weight: 700; margin: 6px 0 8px !important; }
.pagina .scatola-contatto a { color: #fff; }
.contatto-nota { font-size: 0.9rem; color: rgba(255,255,255,0.85); }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out); transition-delay: calc(var(--i, 0) * 75ms); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Keyframes ---------- */
@keyframes heroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); } 50% { transform: translateY(-12px) rotate(var(--rot, 0deg)); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(47,158,107,0.5); } 70% { box-shadow: 0 0 0 8px rgba(47,158,107,0); } 100% { box-shadow: 0 0 0 0 rgba(47,158,107,0); } }
@keyframes flow { to { stroke-dashoffset: -24; } }

/* Il comando sta SOPRA il video, in alto a destra: la barra dei controlli è
   disegnata dal browser e non è estendibile, e su Safari iOS inline non offre
   nemmeno il selettore dei sottotitoli. In alto e non in basso per non finire
   sotto i controlli nativi, che compaiono al passaggio del mouse. */
.btn-sottotitoli {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    font: inherit; font-size: .85rem; cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px; border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, .35);
    background: rgba(12, 20, 20, .6);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: #fff;
    transition: background .2s, border-color .2s, opacity .2s;
}
.btn-sottotitoli .cc-sigla {
    font-size: .7rem; font-weight: 700; letter-spacing: .04em;
    border: 1.5px solid currentColor; border-radius: 4px; padding: 0 4px;
}
/* Spento: resta leggibile ma si vede che è disattivo. */
.btn-sottotitoli[aria-pressed="false"] { color: rgba(255, 255, 255, .65); border-color: rgba(255, 255, 255, .2); }
.btn-sottotitoli:hover { background: rgba(12, 20, 20, .8); border-color: rgba(255, 255, 255, .6); }
.btn-sottotitoli:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* Su schermi stretti l'etichetta sparisce: resta la sigla CC, che basta. */
@media (max-width: 560px) {
    .btn-sottotitoli { top: 8px; right: 8px; padding: 6px 9px; }
    .btn-sottotitoli .cc-testo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .reveal { opacity: 1; transform: none; }
    .preview-card { animation: none; }
    .preview-card.card-1 { transform: rotate(-6deg); }
    .preview-card.card-2 { transform: rotate(4deg); }
    .preview-card.card-3 { transform: rotate(-2deg); }
}