/* ==========================================================================
   INSCENA Kiosk - pagina del servizio (in-scena.com/<lingua>/kiosk/)

   Stessa grafica del portale: le sezioni 1 e 3 sono copiate da
   /opt/inscena-kiosk-admin/static/css/base.css (10/10/2026, copia di
   riferimento in reference/portale/base.css). Se cambia il portale, si
   riallineano qui.

   Stesse regole del portale: pochi elementi, tutti uguali (un bottone .btn
   con .btn-ghost, una .card, l'etichetta .label); i testi usano solo i tipi
   della sezione 1. Unica aggiunta del sito: --font-display, il titolo grande
   della pagina, che nel portale non serve.

   La sezione 3D NON e' qui: e' il modulo <inscena-kiosk-3d>, con il suo stile
   incorporato in /assets/kiosk-3d/kiosk-3d.js.

   Sezioni:  1 Variabili   2 Pagina   3 Componenti (dal portale)
             4 Blocchi della pagina   5 Schermi stretti
             6 Blocchi di home e pagina Kiosk (con i loro schermi stretti)

   Usato da /it/ (home) e /it/kiosk/.
   ========================================================================== */

/* 1. Variabili ----------------------------------------------------------- */
:root {
    --bg:#050505;
    --panel:#111111;
    --purple:#6C00FF;
    --purple-mid:#B57FFF;
    --purple-dark:#34235A;
    --white:#FFFFFF;
    --text:#F4F0FF;
    --muted:#9f95b8;
    --border:rgba(181,127,255,0.22);
    --btn-border:rgba(181,127,255,0.5);
    --accent-gradient:linear-gradient(90deg, var(--purple), var(--purple-mid));

    --radius:10px;
    --radius-lg:18px;
    --font:Arial, sans-serif;

    --font-text:bold 14px/1.35 var(--font);
    --font-plain:normal 14px/1.35 var(--font);
    --font-small:normal 12px/1.35 var(--font);
    --font-title:bold 20px/1.2 var(--font);
    /* solo sito: titolo grande in apertura e titoli dei blocchi */
    --font-display:bold clamp(34px, 5vw, 60px)/1.04 var(--font);

    --ctl-h:42px;
    --ctl-gap:10px;

    /* colonna della pagina: la stessa del portale (card 880 + 28 + menu 248) */
    --page-w:1156px;
    --page-pad:42px;
}
@media (max-width: 760px) {
    :root { --ctl-h:46px; --page-pad:18px; }
}

/* 2. Pagina --------------------------------------------------------------- */
* { box-sizing:border-box; }
html {
    background:
        radial-gradient(circle at top left, rgba(108,0,255,0.24), transparent 34%),
        radial-gradient(circle at bottom right, rgba(181,127,255,0.14), transparent 30%),
        var(--bg);
    background-attachment:fixed;
}
body {
    margin:0;
    min-height:100vh;
    font:var(--font-plain);
    color:var(--text);
    /* sfondo su html: la tela animata (.pg-bg) sta tra lo sfondo e i contenuti */
    background:transparent;
    overflow-x:hidden;
}
::selection { color:var(--white); background:var(--purple); }
/* Aggancio dello scroll (lo attiva il modulo 3D sull'html): ogni blocco
   della pagina e' un punto di arrivo. */
main > section { scroll-snap-align:start; }
.logo {
    height:54px;
    width:auto;
    display:block;
}

/* 3. Componenti (dal portale) ---------------------------------------------- */
.card {
    background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:24px;
    box-shadow:0 20px 70px rgba(0,0,0,0.35);
}
.label {
    margin:0 0 8px 0;
    color:var(--purple-mid);
    font:var(--font-text);
}
.link {
    color:var(--purple-mid);
    text-decoration:none;
    font:var(--font-text);
}
.link:hover { text-decoration:underline; }
.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:var(--ctl-h);
    padding:0 20px;
    margin:0;
    cursor:pointer;
    border:1px solid transparent;
    border-radius:var(--radius);
    font:var(--font-text);
    line-height:1;
    background:var(--accent-gradient);
    color:var(--white);
    text-decoration:none;
    white-space:nowrap;
}
.btn:hover { filter:brightness(1.12); }
.btn-ghost {
    background:transparent;
    border-color:var(--btn-border);
    color:var(--text);
}
.btn-ghost:hover {
    filter:none;
    border-color:var(--purple-mid);
    background:rgba(108,0,255,0.16);
}
.btn:focus-visible,
.link:focus-visible,
.pg-brand:focus-visible,
.pg-scroll:focus-visible {
    outline:2px solid var(--purple-mid);
    outline-offset:2px;
}

/* 4. Blocchi della pagina --------------------------------------------------- */
.pg-wrap,
.pg-header,
.pg-hero-body {
    width:100%;
    max-width:calc(var(--page-w) + 2 * var(--page-pad));
    margin:0 auto;
    padding:0 var(--page-pad);
}

/* Apertura: alta esattamente uno schermo (il modulo 3D lo usa come punto di
   arrivo della rotella). */
.pg-hero {
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:100svh;
}
.pg-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--ctl-gap);
    padding-top:var(--page-pad);
}
.pg-brand { display:block; border-radius:var(--radius); }
.pg-hero-body {
    display:flex;
    flex-direction:column;
    justify-content:center;
    flex:1;
    padding-top:48px;
    padding-bottom:96px;
}
.pg-eyebrow {
    color:var(--purple-mid);
    font:var(--font-text);
}
.pg-display {
    max-width:820px;
    margin:16px 0 22px 0;
    color:var(--white);
    font:var(--font-display);
}
.pg-lead {
    max-width:620px;
    margin:0;
    color:var(--muted);
    font:var(--font-plain);
}
.pg-actions {
    display:flex;
    flex-wrap:wrap;
    gap:var(--ctl-gap);
    margin-top:30px;
}
.pg-scroll {
    position:absolute;
    left:50%;
    bottom:28px;
    transform:translateX(-50%);
    color:var(--muted);
    font:var(--font-small);
    text-decoration:none;
}

.pg-section { padding:110px 0; }
.pg-title,
.card .pg-title {
    max-width:720px;
    margin:0 0 40px 0;
    color:var(--white);
    font:var(--font-display);
}
.card h3 {
    margin:0 0 10px 0;
    color:var(--white);
    font:var(--font-title);
}
.card p {
    margin:0;
    color:var(--muted);
    font:var(--font-plain);
}
.pg-grid {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:16px;
}
.pg-steps {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:16px;
    margin:0;
    padding:0;
    list-style:none;
}
.pg-num {
    display:block;
    margin-bottom:28px;
    color:var(--purple-mid);
    font:var(--font-text);
}
.pg-cta { padding:40px; }
.pg-cta .pg-title { margin-bottom:14px; }

/* Ultimo blocco: contatti + pie' di pagina, alto almeno uno schermo cosi'
   l'aggancio finale lo mostra intero. */
.pg-end {
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:100svh;
    padding-bottom:0;
}
.pg-footer {
    margin-top:auto;
    padding:28px var(--page-pad) 22px;
    text-align:center;
    color:#888;
    font:var(--font-small);
}
.pg-footer a { color:#888; }

/* 5. Schermi stretti -------------------------------------------------------- */
@media (max-width: 1050px) {
    .pg-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .logo { height:auto; width:150px; }
    .pg-hero-body { padding-top:32px; padding-bottom:80px; }
    .pg-actions .btn { flex:1 1 auto; }
    .pg-section { padding:72px 0; }
    .pg-title { margin-bottom:28px; }
    .pg-grid,
    .pg-steps { grid-template-columns:1fr; }
    .pg-cta { padding:24px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
}

/* 6. Blocchi aggiunti per la home e la nuova pagina Kiosk (18/10/2026) ------ */

/* Menu in alto */
.pg-nav {
    display:flex;
    align-items:center;
    gap:22px;
}
.pg-nav-link {
    color:var(--text);
    font:var(--font-text);
    text-decoration:none;
}
.pg-nav-link:hover { color:var(--purple-mid); }
.pg-nav-link:focus-visible { outline:2px solid var(--purple-mid); outline-offset:4px; border-radius:4px; }

/* Apertura con video a tutto schermo */
.pg-hero-video { overflow:hidden; isolation:isolate; }
.pg-hero-media {
    position:absolute;
    inset:0;
    z-index:-2;
    width:100%;
    height:100%;
    object-fit:cover;
}
.pg-hero-video::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:
        linear-gradient(90deg, rgba(5,5,5,0.88) 0%, rgba(5,5,5,0.55) 45%, rgba(5,5,5,0.15) 100%),
        linear-gradient(0deg, var(--bg) 0%, rgba(5,5,5,0) 30%);
}
.pg-hero-video .pg-lead { color:var(--text); }

/* Griglie */
.pg-grid-2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.pg-grid-4 { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.pg-steps-5 { grid-template-columns:repeat(5, minmax(0, 1fr)); }
.pg-card-link { display:inline-block; margin-top:16px; }
.pg-note {
    margin:20px 0 0 0;
    color:var(--muted);
    font:var(--font-plain);
}

/* Foto e video */
.pg-media { margin:0; }
.pg-media img,
.pg-media video {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    background:var(--panel);
}
.pg-media figcaption {
    margin-top:10px;
    color:var(--muted);
    font:var(--font-small);
}

/* Ultimo blocco senza aggancio dello scroll (home): alto quanto il contenuto */
.pg-end-auto { min-height:0; }
.pg-end-auto .pg-footer { margin-top:80px; }

/* Carrellata dei lavori: striscia orizzontale a tutta larghezza, allineata
   a sinistra con la colonna della pagina; si scorre col dito, col trackpad
   o con le frecce. */
.pg-row-head {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
}
.pg-carousel-nav { display:flex; gap:var(--ctl-gap); margin-bottom:40px; }
.pg-arrow { width:var(--ctl-h); padding:0; font-size:18px; }
.pg-carousel {
    --edge:max(var(--page-pad), calc((100vw - var(--page-w)) / 2));
    display:flex;
    gap:16px;
    overflow-x:auto;
    padding:0 var(--edge) 12px;
    scroll-padding-inline:var(--edge);
    scroll-snap-type:x mandatory;
    scrollbar-width:thin;
    scrollbar-color:var(--purple-dark) transparent;
}
.pg-carousel:focus-visible { outline:2px solid var(--purple-mid); outline-offset:-2px; }
.pg-slide { flex:0 0 auto; scroll-snap-align:start; }
.pg-slide img,
.pg-slide video {
    width:auto;
    height:min(520px, 64svh);
}
.pg-slide video { aspect-ratio:9 / 16; }
.pg-slide figcaption { max-width:44ch; }
.pg-slide figcaption strong { color:var(--text); font-weight:bold; }

/* Contatti: a sinistra i passi, a destra i canali */
.pg-contact {
    display:grid;
    grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);
    gap:48px;
    padding:40px;
}
.pg-contact .pg-title { margin-bottom:28px; }
.pg-mini-steps {
    display:grid;
    gap:14px;
    margin:0;
    padding:0;
    list-style:none;
    color:var(--text);
    font:var(--font-plain);
}
.pg-mini-steps li { display:flex; gap:14px; align-items:baseline; }
.pg-mini-steps span { color:var(--purple-mid); font:var(--font-text); }
.pg-contact-side {
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:12px;
}
.pg-contact-row {
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:18px 20px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    color:var(--text);
    text-decoration:none;
    background:rgba(255,255,255,0.02);
}
.pg-contact-row:hover { border-color:var(--purple-mid); background:rgba(108,0,255,0.12); }
.pg-contact-row:focus-visible { outline:2px solid var(--purple-mid); outline-offset:2px; }
.pg-contact-kind { color:var(--muted); font:var(--font-small); }
.pg-contact-value { color:var(--white); font:var(--font-title); }
.pg-contact-note { margin:4px 0 0 0; color:var(--muted); font:var(--font-small); }
.pg-area {
    display:grid;
    grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);
    gap:48px;
    margin-top:16px;
    padding:20px 40px;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
}
.pg-area > div { display:flex; flex-direction:column; gap:4px; }
.pg-area-value { color:var(--text); font:var(--font-plain); }
@media (max-width: 760px) {
    .pg-area { grid-template-columns:1fr; gap:14px; padding:18px 24px; }
}

@media (max-width: 760px) {
    .pg-carousel-nav { display:none; }
    .pg-slide img,
    .pg-slide video { height:min(440px, 60svh); }
    .pg-contact { grid-template-columns:1fr; gap:28px; padding:24px; }
}

/* Domande */
.pg-faq {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
    align-items:start;
}
.pg-faq details { padding:20px 24px; }
.pg-faq summary {
    cursor:pointer;
    color:var(--white);
    font:var(--font-text);
    list-style:none;
}
.pg-faq summary::-webkit-details-marker { display:none; }
.pg-faq summary { display:flex; align-items:center; justify-content:space-between; gap:16px; }
/* freccia e apertura come le tendine del portale (base.css: .select-arrow,
   .select-list): 0,26 s, l'altezza passa da 0fr a 1fr mentre il testo compare */
.pg-faq summary::after {
    content:"";
    flex:0 0 auto;
    width:8px;
    height:8px;
    margin:-4px 3px 0 0;
    border-right:2px solid var(--muted);
    border-bottom:2px solid var(--muted);
    transform:rotate(45deg);
    transition:transform 0.26s ease, margin 0.26s ease;
}
.pg-faq details.is-open summary::after { margin-top:4px; transform:rotate(225deg); }
html.js .pg-faq-panel {
    display:grid;
    grid-template-rows:0fr;
    opacity:0;
    transition:grid-template-rows 0.26s ease, opacity 0.26s ease;
}
html.js .pg-faq details.is-open .pg-faq-panel { grid-template-rows:1fr; opacity:1; }
.pg-faq-inner { min-height:0; overflow:hidden; }
@media (prefers-reduced-motion: reduce) {
    .pg-faq summary::after, html.js .pg-faq-panel { transition:none; }
}
.pg-faq details p { margin-top:12px; }
.pg-faq summary:focus-visible { outline:2px solid var(--purple-mid); outline-offset:4px; border-radius:4px; }

@media (max-width: 1050px) {
    .pg-grid-4 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .pg-steps-5 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .pg-nav { gap:14px; }
    .pg-nav-link { display:none; }
    .pg-nav .btn { padding:0 14px; }
    .pg-hero-video::before {
        background:
            linear-gradient(0deg, rgba(5,5,5,0.92) 0%, rgba(5,5,5,0.6) 55%, rgba(5,5,5,0.35) 100%);
    }
    .pg-grid-2,
    .pg-grid-4,
    .pg-faq { grid-template-columns:1fr; }
    .pg-steps-5 .card { padding:18px; }
    .pg-steps-5 .pg-num { margin-bottom:14px; }
}

/* 7. Etichette in maiuscolo spaziato (18/10/2026) ------------------------- */
.label,
.pg-eyebrow { letter-spacing:0.14em; text-transform:uppercase; font-size:12px; }

/* 8. Pagine di testo (privacy) ---------------------------------------------- */
.pg-legal { padding-top:0; }
.pg-legal-body { max-width:calc(760px + 2 * var(--page-pad)); margin:0; margin-inline:auto; padding-top:72px; }
.pg-legal-body .pg-title { margin-bottom:20px; }
.pg-legal-body h3 { margin:36px 0 10px 0; color:var(--white); font:var(--font-title); }
.pg-legal-body p { margin:0 0 12px 0; color:var(--muted); font:var(--font-plain); line-height:1.6; }
.pg-legal-body strong { color:var(--text); }
.pg-legal .pg-footer { margin-top:80px; }

/* 9. Elenco tecnico (pagina Kiosk) ------------------------------------------ */
.pg-specs {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:0 48px;
    margin:0;
    padding:0;
    list-style:none;
}
.pg-specs li {
    padding:18px 0;
    border-top:1px solid var(--border);
    color:var(--text);
    font:var(--font-plain);
}
@media (max-width: 760px) {
    .pg-specs { grid-template-columns:1fr; }
    .pg-specs li { padding:14px 0; }
}

/* 10. Sfondo animato (/assets/sito/sfondo.js) ------------------------------- */
.pg-bg {
    position:fixed;
    inset:-48px;               /* piu' grande dello schermo: la sfocatura non scurisce i bordi */
    z-index:-1;
    width:calc(100% + 96px);
    height:calc(100% + 96px);
    pointer-events:none;
    filter:blur(22px);         /* toglie i "gradini" della sfumatura ingrandita */
}

/* Scia a cometa che segue il mouse o il tocco (sopra i contenuti, fusione schiarente) */
.pg-scia {
    position:fixed;
    inset:0;
    z-index:50;
    width:100%;
    height:100%;
    pointer-events:none;
    mix-blend-mode:screen;
    filter:blur(5px);
}
/* telefono: fusione normale e niente sfocatura (vedi sfondo.js, "leggera") */
.pg-scia.pg-scia-leggera { mix-blend-mode:normal; filter:none; }

/* Schede come vetro: lo sfondo animato dietro appare piu' luminoso.
   (La scia del mouse fa lo stesso dentro le schede, in sfondo.js.) */
.card {
    -webkit-backdrop-filter:brightness(1.55) saturate(1.25);
    backdrop-filter:brightness(1.55) saturate(1.25);
}

/* 11. Selettore di lingua (generato da tools/lingue.py) ------------------------ */
.pg-lang { display:inline-flex; gap:2px; }
.pg-lang a {
    padding:6px 7px;
    border-radius:6px;
    color:var(--muted);
    font:var(--font-small);
    font-weight:bold;
    letter-spacing:0.06em;
    text-decoration:none;
}
.pg-lang a:hover { color:var(--text); }
.pg-lang a[aria-current="page"] { color:var(--white); background:rgba(181,127,255,0.14); }
.pg-lang a:focus-visible { outline:2px solid var(--purple-mid); outline-offset:1px; }
@media (max-width: 430px) {
    /* telefono stretto: logo + lingue; il bottone resta raggiungibile nella pagina */
    .pg-nav .btn { display:none; }
    .logo { width:132px; }
}

/* 12. Menu per telefono (assets/sito/menu.js, 19/10/2026) ----------------------
   Stessa animazione del menu del portale (reference/portale/base.css, .menu):
   chiuso e' un quadrato alto quanto un bottone; aperto si allarga, le tre
   linee diventano una X e le voci scendono (griglia 0fr -> 1fr). */
:root { --menu-time:0.26s; }
.pg-menu-slot { display:none; }
@media (max-width: 760px) {
    html.pg-menu-ready .pg-nav { display:none; }
    html.pg-menu-ready .pg-menu-slot {
        display:block;
        position:relative;
        flex:0 0 auto;
        width:var(--ctl-h);
        height:var(--ctl-h);
    }
}
.pg-menu {
    --menu-w:248px;
    position:absolute;
    top:0;
    right:0;
    z-index:60;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    width:var(--ctl-h);
    overflow:hidden;
    background:transparent;
    border:1px solid var(--btn-border);
    border-radius:var(--radius);
    box-shadow:none;
    contain:layout paint;      /* l'animazione ricalcola solo il menu, non la pagina */
    transition:
        width var(--menu-time) ease,
        border-radius var(--menu-time) ease,
        background-color var(--menu-time) ease,
        box-shadow var(--menu-time) ease,
        border-color var(--menu-time) ease;
}
html.pg-menu-open .pg-menu {
    width:var(--menu-w);
    background:var(--panel);
    border-color:var(--border);
    border-radius:var(--radius-lg);
    box-shadow:0 20px 70px rgba(0,0,0,0.45);
}
.pg-menu-toggle {
    position:relative;
    display:flex;
    flex:0 0 auto;
    align-items:center;
    justify-content:flex-end;
    width:100%;
    height:calc(var(--ctl-h) - 2px);
    padding:0 calc((var(--ctl-h) - 22px) / 2);
    margin:0;
    background:transparent;
    border:0;
    color:var(--text);
    font:var(--font-text);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
.pg-menu-toggle:hover { background:rgba(108,0,255,0.16); }
.pg-menu-toggle:focus-visible { outline:2px solid var(--purple-mid); outline-offset:-2px; }
.pg-menu-label {
    position:absolute;
    left:24px;
    top:50%;
    transform:translateY(-50%);
    white-space:nowrap;
    color:var(--muted);
    opacity:0;
    transition:opacity var(--menu-time) ease;
}
html.pg-menu-open .pg-menu-label { opacity:1; }
.pg-menu-icon { position:relative; flex:0 0 20px; width:20px; height:14px; }
.pg-menu-icon span {
    position:absolute;
    left:0;
    width:20px;
    height:2px;
    border-radius:2px;
    background:var(--text);
    transition:transform var(--menu-time) ease, top var(--menu-time) ease, opacity 0.15s ease;
}
.pg-menu-icon span:nth-child(1) { top:0; }
.pg-menu-icon span:nth-child(2) { top:6px; }
.pg-menu-icon span:nth-child(3) { top:12px; }
html.pg-menu-open .pg-menu-icon span:nth-child(1) { top:6px; transform:rotate(45deg); }
html.pg-menu-open .pg-menu-icon span:nth-child(2) { opacity:0; }
html.pg-menu-open .pg-menu-icon span:nth-child(3) { top:6px; transform:rotate(-45deg); }
.pg-menu-panel {
    display:grid;
    grid-template-rows:0fr;
    flex:0 0 auto;
    transition:grid-template-rows var(--menu-time) ease;
}
html.pg-menu-open .pg-menu-panel { grid-template-rows:1fr; }
.pg-menu-inner {
    min-height:0;
    overflow:hidden;
    visibility:hidden;
    opacity:0;
    transition:opacity var(--menu-time) ease, visibility 0s linear var(--menu-time);
}
html.pg-menu-open .pg-menu-inner {
    visibility:visible;
    opacity:1;
    transition:opacity var(--menu-time) ease, visibility 0s linear 0s;
}
/* larghezza fissa: mentre il riquadro si allarga le voci non si reimpaginano */
.pg-menu-list {
    display:flex;
    flex-direction:column;
    gap:6px;
    width:calc(var(--menu-w) - 2px);
    padding:4px 12px 12px 12px;
}
.pg-menu-lang { display:flex; padding:0 0 6px 0; }
.pg-menu-lang a { flex:1; text-align:center; }
.pg-menu-item {
    display:flex;
    align-items:center;
    width:100%;
    height:var(--ctl-h);
    padding:0 12px;
    border:1px solid transparent;
    border-radius:var(--radius);
    color:var(--text);
    font:var(--font-text);
    line-height:1;
    text-decoration:none;
}
.pg-menu-item:hover { border-color:var(--border); background:rgba(108,0,255,0.16); }
.pg-menu-item[aria-current="page"] { border-color:var(--border); background:rgba(108,0,255,0.22); color:var(--white); }
.pg-menu-item:focus-visible { outline:2px solid var(--purple-mid); outline-offset:-2px; }
.pg-menu-sep { height:1px; margin:4px 0; background:var(--border); }
.pg-menu-login { width:100%; }
@media (prefers-reduced-motion: reduce) {
    .pg-menu, .pg-menu-panel, .pg-menu-inner, .pg-menu-label, .pg-menu-icon span { transition:none; }
}

/* 13. Respiro del testo sul telefono (19/10/2026) -------------------------------
   Sul computer i testi sono gia' giusti. Sul telefono lo stesso interlinea
   stretto (1.04 / 1.35) con colonne strette fa sembrare tutto compresso:
   piu' interlinea e piu' spazio fra i blocchi, stesse dimensioni e colori. */
@media (max-width: 760px) {
    .label,
    .pg-eyebrow { line-height:1.7; }
    .label { margin-bottom:14px; }
    .pg-display { margin:18px 0 26px 0; line-height:1.12; }
    .pg-title { line-height:1.14; margin-bottom:32px; }
    .pg-lead { font-size:15px; line-height:1.6; }
    .pg-actions { margin-top:36px; gap:12px; }
    .pg-section { padding:88px 0; }
    .pg-grid { gap:18px; }
    .card h3 { margin-bottom:12px; line-height:1.3; }
    .card p,
    .pg-note { line-height:1.6; }
}

/* 14. Sottotitolo della home sul telefono: sotto il video (19/10/2026) ----------
   Il testo e' nella pagina due volte: .pg-solo-largo nell'apertura (computer),
   .pg-intro-telefono subito dopo il video (telefono). Se ne vede sempre uno. */
.pg-intro-telefono { display:none; }
@media (max-width: 760px) {
    .pg-solo-largo { display:none; }
    .pg-hero-video .pg-display { margin-bottom:0; }
    .pg-intro-telefono { display:block; padding-top:56px; }
    .pg-intro-telefono .pg-lead { font-size:17px; line-height:1.6; color:var(--text); }
    .pg-intro-telefono + .pg-section { padding-top:72px; }
}

/* 15. Apertura della home sul telefono: tre zone (19/10/2026) -------------------
   Etichetta in alto, titolo al centro, bottoni in basso sopra "Scorri". Il video resta libero tra un blocco e l'altro. */
@media (max-width: 760px) {
    /* via di mezzo: i tre blocchi si allontanano ma non toccano i bordi */
    .pg-hero-video .pg-hero-body {
        justify-content:flex-start;
        padding-top:max(64px, 14svh);
        padding-bottom:max(84px, 13svh);
    }
    .pg-hero-video .pg-display { margin:auto 0; padding:28px 0; }
    .pg-hero-video .pg-actions { margin-top:0; }
}

/* 16. Animazioni della pagina (assets/sito/animazioni.js, 19/10/2026) -----------
   html.pg-anim la mette lo scriptino in <head>, solo se il movimento e'
   permesso. Solo opacita' e spostamento. Stessa curva morbida ovunque. */
:root { --entra-time:0.6s; --entra-curva:cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes pg-sale {
    from { opacity:0; transform:translateY(16px); }
    to   { opacity:1; transform:none; }
}
/* apertura: etichetta, titolo (parola per parola), poi testo e bottoni */
html.pg-anim .pg-hero .pg-eyebrow { animation:pg-sale var(--entra-time) var(--entra-curva) 0.1s both; }
html.pg-anim .pg-hero .pg-display { animation:pg-sale var(--entra-time) var(--entra-curva) 0.2s both; }
html.pg-anim .pg-hero .pg-display.pg-parole { animation:none; }
.pg-parola { display:inline-block; }
html.pg-anim .pg-parola {
    animation:pg-sale var(--entra-time) var(--entra-curva) both;
    animation-delay:calc(0.2s + var(--i) * 0.07s);
}
html.pg-anim .pg-hero .pg-lead,
html.pg-anim .pg-hero .pg-actions,
html.pg-anim .pg-hero .pg-scroll { animation:pg-sale var(--entra-time) var(--entra-curva) 0.75s both; }
html.pg-anim .pg-hero .pg-actions { animation-delay:0.85s; }
html.pg-anim .pg-hero .pg-scroll { animation-name:pg-compare; animation-delay:1.1s; }
@keyframes pg-compare { from { opacity:0; } to { opacity:1; } }
/* .pg-scroll e' centrato con translateX: niente spostamento verticale */

/* entrate allo scorrimento */
html.pg-anim .pg-attesa {
    opacity:0;
    transform:translateY(14px);
    transition:opacity var(--entra-time) var(--entra-curva), transform var(--entra-time) var(--entra-curva);
    transition-delay:var(--ritardo, 0ms);
}
html.pg-anim .pg-attesa.pg-entra { opacity:1; transform:none; }

/* 17. Footer su tre righe sul telefono, fine pagina senza vuoto (19/10/2026) --- */
.pg-footer { text-wrap:balance; }
.pg-footer-links { white-space:nowrap; }
@media (max-width: 760px) {
    .pg-end { padding-bottom:0; }
    .pg-footer { padding:32px var(--page-pad) calc(28px + env(safe-area-inset-bottom, 0px)); line-height:1.7; }
    .pg-footer-legal,
    .pg-footer-links { display:block; }
    .pg-footer-links { white-space:normal; margin-top:4px; }
    .pg-footer-sep { display:none; }
}