/*
 * Foglio di stile del sito. Stessi colori, font e "sensazione" dell'app
 * AI Album Studio (vedi tema.py nel repo lr-ai-server-v2): sfondo scuro,
 * accento arancione, font Poppins, card con bordo sottile e angoli
 * arrotondati. Tutto il colore passa dalle variabili qui sotto: per
 * cambiare la palette del sito basta modificare questo blocco, non serve
 * toccare il resto del file.
 */

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins.ttf') format('truetype');
    font-display: swap;
}

:root {
    --bg: #0b0d13;
    --carta: #161925;
    --carta2: #10121a;
    --bordo: #262a3a;
    --testo: #e7e9f3;
    --testo-muto: #9298b3;
    --accento: #f5f5f5;
    --accento-scuro: #f97316;
    --accento-scuro-hover: #ea580c;
    --successo: #fb923c;

    --larghezza-contenuto: 1120px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    background:
        radial-gradient(circle at 20% 15%, rgba(129, 140, 248, 0.14), transparent 45%),
        radial-gradient(circle at 80% 85%, rgba(192, 132, 252, 0.12), transparent 45%),
        var(--bg);
    color: var(--testo);
    line-height: 1.6;
}

.contenitore {
    max-width: var(--larghezza-contenuto);
    margin: 0 auto;
    padding: 0 24px;
}

/* Scala tipografica ricalcata sulle dimensioni misurate sul sito online
   attuale (WordPress/Kadence) - stessi px, non una stima: H1 65px/800,
   H2 "da sezione" 32px/700 centrato (vedi Features), H3 35px/400 per
   sottotitoli e titoli delle card. Qui restano solo i valori di DEFAULT;
   le eccezioni piu' grandi (i titoli "How It Works in 3 steps" da 60px e
   l'enorme scritta sottile "AI Album Studio" da 70px) hanno le loro classi
   dedicate qui sotto (.titolo-grande, .titolo-enorme) perche' il sito
   online le usa solo in punti specifici, non come H2 di default. */
h1, h2, h3, h4 { color: #ffffff; margin: 0 0 16px; }
h1 { font-size: 65px; font-weight: 800; line-height: 1.12; }
h2, .titolo-come-h2 { font-size: 32px; font-weight: 700; line-height: 1.25; }
h3 { font-size: 35px; font-weight: 400; line-height: 1.3; }

.titolo-grande { font-size: 46px; font-weight: 700; line-height: 1.15; color: #d3d7e0; }
.titolo-enorme { font-size: 64px; font-weight: 200; line-height: 1.1; color: #ffffff; margin: 0 0 8px; }

p { color: var(--testo-muto); margin: 0 0 16px; font-size: 16px; }
p.testo-grande { color: var(--testo); font-size: 18px; }

a { color: var(--accento); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Piccola etichetta sopra i titoli di sezione (es. "3 Steps from Raw
   Selection..." sopra "How It Works in 3 steps"): sul sito online e' un H6
   di 14px peso 400, non maiuscolo - qui peso 600 per restare leggibile
   sullo sfondo scuro (sul sito online sta su sfondo chiaro). */
.etichetta-sezione {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--accento-scuro);
    margin-bottom: 10px;
}

/* ===== Pulsanti ===== */
.btn-cta, .btn-cta-header {
    display: inline-block;
    background: var(--accento-scuro);
    color: #ffffff;
    border: none;
    padding: 14px 26px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}
.btn-cta:hover, .btn-cta-header:hover {
    background: var(--accento-scuro-hover);
    text-decoration: none;
}
.btn-cta-header { padding: 10px 20px; font-size: 14px; white-space: nowrap; }

/* ===== Header / navigazione ===== */
.intestazione {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(11, 13, 19, 0.85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--bordo);
}
.intestazione-interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 24px;
}
.logo-link { display: flex; align-items: center; flex-shrink: 0; }
.logo { height: 34px; width: auto; display: block; }

.nav-principale {
    display: flex;
    gap: 28px;
    flex: 1;
    justify-content: center;
}
.nav-principale a {
    white-space: nowrap;
    color: var(--testo);
    font-weight: 600;
    font-size: 14.5px;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
}
.nav-principale a:hover { text-decoration: none; color: #ffffff; }
.nav-principale a.attivo { color: #ffffff; border-bottom-color: var(--accento-scuro); }

/* Sottomenu a tendina (es. "Funzionalità" -> Editor / Integrazione
   Lightroom): i link restano nell'HTML di ogni pagina indipendentemente
   dallo stile, quindi hanno lo stesso valore per l'indicizzazione di una
   voce di menu diretta - qui e' solo una questione di spazio visivo nella
   barra. :focus-within oltre a :hover cosi' resta raggiungibile anche da
   tastiera, non solo col mouse. */
/* display:flex + align-items:center: senza questo il link dentro il div
   resta allineato in alto invece che centrato come le altre voci dirette
   del menu (che sono <a> semplici, non un <div> che le racchiude) - .nav-
   principale stira i suoi figli diretti ad altezza piena (stretch di
   default), e senza un centraggio esplicito qui dentro il contenuto del
   div non eredita quello delle voci sorelle. */
.nav-dropdown { position: relative; display: flex; align-items: center; }
/* Ponte invisibile che copre lo spazio vuoto tra la voce di menu e il
   riquadro sottostante: senza questo, spostare il mouse in verticale verso
   il sottomenu attraversa una zona che non fa parte di .nav-dropdown,
   l'hover si perde a metà strada e il menu si chiude prima di essere
   raggiungibile. */
.nav-dropdown::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 14px;
}
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 14px;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: 10px;
    padding: 8px;
    min-width: 210px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    z-index: 50;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--testo);
    white-space: nowrap;
    border-bottom: none;
}
.nav-dropdown-menu a:hover { background: var(--carta2); color: #ffffff; text-decoration: none; }

.intestazione-destra { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

/* Selettore lingua (IT/EN) nell'header: pillola discreta accanto al
   pulsante "Try it for FREE" — porta alla STESSA pagina nell'altra lingua
   (vedi $mappa_pagine negli header-*.php), non sempre alla home. */
.selettore-lingua {
    color: var(--testo-muto);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border: 1px solid var(--bordo);
    border-radius: 999px;
    padding: 6px 12px;
}
.selettore-lingua:hover { color: #ffffff; border-color: var(--accento-scuro); text-decoration: none; }

/* Selettore di lingua a tendina (IT / EN / ES / PT): come il sottomenu di
   "Funzionalita'", si apre al passaggio del mouse o con la tastiera. */
.selettore-lingue { position: relative; }
.selettore-lingue .selettore-lingua { display: inline-block; cursor: pointer; }
.selettore-lingue::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
.selettore-lingue-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 150px;
    padding: 6px;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    z-index: 60;
}
.selettore-lingue:hover .selettore-lingue-menu,
.selettore-lingue:focus-within .selettore-lingue-menu { display: block; }
.selettore-lingue-menu a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--testo); font-size: 14px; font-weight: 600; white-space: nowrap; }
.selettore-lingue-menu a:hover { background: var(--carta2); color: #ffffff; text-decoration: none; }

/* Pulsante "menu" (tre linee) e link che compaiono solo nel menu del
   telefono: nascosti sui computer. */
.pulsante-menu { display: none; }
.nav-solo-mobile { display: none; }

/* Computer con schermo stretto (1101-1320px): con quattro lingue le voci del
   menu in spagnolo e portoghese sono piu' lunghe, quindi gli spazi si
   stringono e le voci non vanno mai a capo. */
@media (min-width: 1101px) and (max-width: 1320px) {
    .intestazione-interno { gap: 14px; padding-left: 16px; padding-right: 16px; }
    .nav-principale { gap: 16px; }
    .nav-principale a { font-size: 13.5px; white-space: nowrap; }
    .intestazione-destra { gap: 8px; }
    .intestazione-destra .selettore-lingua { padding-left: 10px; padding-right: 10px; }
    .btn-cta-header { padding: 10px 14px; font-size: 13px; }
}

/* Menu su telefono e tablet (fino a 1100px, dove le 6 voci + lingua + area
   clienti + pulsante non stanno piu' in una riga): nella barra restano
   logo, "Provalo GRATIS" e il pulsante menu; le voci si aprono in un
   pannello sotto la barra. Senza JavaScript (classe .js assente su <html>,
   vedi header-*.php) il pannello resta sempre aperto, impilato. */
@media (max-width: 1100px) {
    .intestazione-interno { flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
    .logo { height: 30px; }
    .intestazione-destra { margin-left: auto; gap: 10px; }
    .intestazione-destra .selettore-lingua, .intestazione-destra .selettore-lingue { display: none; }
    .pulsante-menu {
        display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
        width: 44px; height: 44px; padding: 0 11px;
        background: var(--carta); border: 1px solid var(--bordo); border-radius: 10px;
        cursor: pointer;
    }
    .pulsante-menu span { display: block; height: 2px; background: var(--testo); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
    .menu-aperto .pulsante-menu span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .menu-aperto .pulsante-menu span:nth-child(2) { opacity: 0; }
    .menu-aperto .pulsante-menu span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .nav-principale {
        order: 3; flex: 1 1 100%;
        flex-direction: column; align-items: stretch; gap: 0;
        padding: 6px 0 10px;
        max-height: calc(100vh - 70px); overflow-y: auto;
    }
    .js .nav-principale { display: none; }
    .js .menu-aperto .nav-principale { display: flex; }
    .nav-principale a { font-size: 16px; padding: 12px 4px; border-bottom: 1px solid var(--bordo); }
    .nav-principale a.attivo { border-bottom-color: var(--bordo); color: var(--accento-scuro); }
    /* Niente hover sul touch: le voci di "Funzionalità" stanno sempre in
       vista, rientrate sotto la voce principale. */
    .nav-dropdown { display: flex; flex-direction: column; align-items: stretch; }
    .nav-dropdown::after { display: none; }
    .nav-dropdown-menu {
        display: flex; flex-direction: column;
        position: static; margin: 0; padding: 0 0 0 16px;
        background: none; border: none; box-shadow: none; min-width: 0;
    }
    .nav-dropdown-menu a { padding: 10px 4px; font-size: 15px; color: var(--testo-muto); white-space: normal; border-radius: 0; }
    .nav-solo-mobile { display: flex; gap: 10px; padding-top: 14px; }
    .nav-solo-mobile a.selettore-lingua { border: 1px solid var(--bordo); padding: 8px 16px; font-size: 14px; }
}

@media (max-width: 380px) {
    .btn-cta-header { padding: 10px 14px; font-size: 13px; }
    .logo { height: 26px; }
}

/* ===== Sezioni generiche =====
   Il sito online e' per lo piu' allineato a sinistra, a piena larghezza
   (non centrato): .sezione-testo-centrato resta disponibile solo per i
   punti che l'originale centra davvero (il sottotitolo di Features, i CTA
   finali) - le sezioni normali usano direttamente .contenitore. */
.sezione { padding: 72px 0; }
.sezione-alternata { background: var(--carta2); border-top: 1px solid var(--bordo); border-bottom: 1px solid var(--bordo); }
.sezione-testo-centrato { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.blocco-sezione { max-width: 900px; margin-bottom: 48px; }

/* ===== Hero (immagine a tutta larghezza, testo sovrapposto) =====
   Stesso principio del sito online: uno screenshot grande dell'editor da
   parte a parte dello schermo, con un velo scuro sopra (il gradiente qui
   sotto) per far restare leggibile il testo bianco sovrapposto, qualunque
   sia il contenuto dell'immagine in quel punto. */
.sezione-hero {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(100deg, rgba(11,13,19,0.93) 0%, rgba(11,13,19,0.8) 38%, rgba(11,13,19,0.35) 68%, rgba(11,13,19,0.6) 100%),
        url('../img/schermata1.jpg') center/cover no-repeat;
    /* Browser moderni: WebP (120 KB invece di 340), sul telefono la
       versione da 900 px (36 KB). Il JPG sopra resta per i browser vecchi. */
    background-image:
        linear-gradient(100deg, rgba(11,13,19,0.93) 0%, rgba(11,13,19,0.8) 38%, rgba(11,13,19,0.35) 68%, rgba(11,13,19,0.6) 100%),
        image-set(url('../img/schermata1.webp') type('image/webp'), url('../img/schermata1.jpg') type('image/jpeg'));
}
@media (max-width: 900px) {
    .sezione-hero {
        background-image:
            linear-gradient(100deg, rgba(11,13,19,0.93) 0%, rgba(11,13,19,0.8) 38%, rgba(11,13,19,0.35) 68%, rgba(11,13,19,0.6) 100%),
            image-set(url('../img/schermata1-900.webp') type('image/webp'), url('../img/schermata1.jpg') type('image/jpeg'));
    }
}
.hero-testo { position: relative; z-index: 1; max-width: 620px; padding: 60px 0; }
.hero-testo .sottotitolo { font-weight: 600; color: var(--testo); margin-bottom: 28px; }

@media (max-width: 860px) {
    .sezione-hero { min-height: 460px; }
    h1 { font-size: 38px; }
    .titolo-grande { font-size: 34px; }
    .titolo-enorme { font-size: 42px; }
}

/* Telefono: titoli, spazi e margini ridotti in proporzione, testi lunghi
   che vanno a capo invece di allargare la pagina. */
@media (max-width: 640px) {
    .contenitore { padding: 0 16px; }
    .sezione { padding: 48px 0; }
    h1 { font-size: 32px; }
    h2, .titolo-come-h2 { font-size: 25px; }
    h3 { font-size: 24px; }
    .titolo-grande { font-size: 28px; }
    .titolo-enorme { font-size: 34px; }
    .card-passo h3 { font-size: 21px; }
    .card, .card-passo, .card-download, .card-risorsa { padding: 22px; }
    .sezione-hero { min-height: 0; }
    .hero-testo { padding: 44px 0; }
    .sezione-testo-centrato, .blocco-sezione { margin-bottom: 32px; }
    .servizi-extra { padding: 26px 20px; }
    .articolo h2 { font-size: 22px; margin-top: 32px; }
    h1, h2, h3, p, li, a { overflow-wrap: anywhere; }
}

/* ===== Card generiche (passi, feature) ===== */
.card {
    background: linear-gradient(160deg, var(--carta), var(--carta2));
    border: 1px solid var(--bordo);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.griglia-passi {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 12px;
}
.card-passo { background: linear-gradient(160deg, var(--carta), var(--carta2)); border: 1px solid var(--bordo); border-radius: 16px; padding: 30px; }
/* Il numero sta dentro il titolo stesso ("1. Allena il tuo stile"), come
   sul sito online (H4 "1. Train Your Style") - niente pallino separato. */
.card-passo h3 { font-size: 25px; font-weight: 400; }

/* Animazione che illustra il passo, come sul sito online (stessi 3 video,
   scaricati da li'): loop muto senza controlli, quadrato come l'originale. */
.video-passo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--bordo);
    background: var(--carta2);
    margin: 14px 0 18px;
}

.griglia-feature {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 12px;
}
/* minmax(0, 1fr): senza, una parola lunga in un titolo (es.
   "Ridimensionamento") allarga la colonna oltre lo schermo sui tablet. */
.griglia-passi, .griglia-feature { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-feature h3 { font-size: 24px; font-weight: 600; }
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
.card-feature ul { margin: 12px 0 0; padding-left: 20px; }
.card-feature li { color: var(--testo-muto); margin-bottom: 8px; }

@media (max-width: 860px) {
    .griglia-passi, .griglia-feature { grid-template-columns: 1fr; }
}

/* Blocco dettagliato di "How It Works": stessa struttura a due colonne del
   sito online (colonna stretta con "Step N" in grande, colonna larga con
   titolo/testo/elenco), non piu' un cerchio col numero. Elenco puntato con
   segno di spunta arancione al posto del pallino di default. */
.blocco-step {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 24px;
    padding: 40px 0;
    border-bottom: 1px solid var(--bordo);
}
.blocco-step:last-of-type { border-bottom: none; }
.blocco-step .numero-passo-grande {
    font-size: 42px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
}
.blocco-step ul { list-style: none; margin: 16px 0 0; padding: 0; }
.blocco-step li { position: relative; padding-left: 26px; margin-bottom: 12px; color: var(--testo-muto); }
.blocco-step li::before { content: "✓"; position: absolute; left: 0; color: var(--accento-scuro); font-weight: 700; }
.blocco-step li strong { color: var(--testo); }

@media (max-width: 640px) {
    .blocco-step { grid-template-columns: 1fr; }
}

/* ===== Card prezzi =====
   3 pacchetti (Personal/Professional/Studio - "Modello C", deciso
   2026-09-17: niente piu' pacchetto Base, prezzi reali con sconto 50% dal
   listino), una card per pacchetto invece di una tabella comparativa. */
.griglia-prezzi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 24px;
    margin-top: 12px;
    align-items: stretch;
}
.card-prezzo {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, var(--carta), var(--carta2));
    border: 1px solid var(--bordo);
    border-radius: 16px;
    padding: 34px 26px 28px;
    text-align: center;
}
.card-prezzo-evidenziata { border-color: var(--accento-scuro); box-shadow: 0 0 0 1px var(--accento-scuro); }
.badge-consigliato {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accento-scuro);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 16px;
    border-radius: 999px;
    white-space: nowrap;
}
.card-prezzo h3 { font-size: 22px; font-weight: 700; margin-bottom: 14px; }
.prezzo-importo { margin: 4px 0 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.prezzo-listino { font-size: 14px; color: var(--testo-muto); text-decoration: line-through; opacity: 0.7; }
.prezzo-finale { font-size: 46px; font-weight: 800; color: #ffffff; line-height: 1; }
.prezzo-periodo { font-size: 15px; font-weight: 600; color: var(--testo-muto); margin-left: 2px; }
.prezzo-annuale-parentesi { font-size: 13px; color: var(--testo-muto); }
/* Prezzi IVA esclusa (05/10/2026): "+ IVA" sotto il prezzo; il costo per
   album e' uno solo, "a partire da", sotto il titolo della pagina. */
.prezzo-iva { font-size: 13px; color: var(--testo-muto); }
.prezzo-minimo-album { margin: 14px 0 0; font-size: 18px; font-weight: 700; color: var(--accento-scuro); }
.prezzo-minimo-album span { font-size: 14px; font-weight: 600; color: var(--testo-muto); }

/* ===== Tabella comparativa dei pacchetti (sotto le card) =====
   Stesse card scure del listino; la colonna del pacchetto "Piu' scelto" e'
   evidenziata in arancione come la sua card. Su schermi stretti la tabella
   scorre di lato dentro il suo riquadro, la pagina no. */
.confronto-pacchetti { margin: 56px auto 0; max-width: 960px; }
.confronto-pacchetti h2 { text-align: center; margin-bottom: 22px; }
.confronto-scorrimento {
    overflow-x: auto;
    background: linear-gradient(160deg, var(--carta), var(--carta2));
    border: 1px solid var(--bordo);
    border-radius: 16px;
}
.tabella-confronto { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14.5px; }
.tabella-confronto th, .tabella-confronto td { padding: 14px 18px; border-bottom: 1px solid var(--bordo); text-align: center; vertical-align: middle; }
.tabella-confronto tbody tr:last-child th, .tabella-confronto tbody tr:last-child td { border-bottom: none; }
.tabella-confronto thead th { font-size: 17px; font-weight: 700; color: #ffffff; }
.tabella-confronto thead th:first-child { text-align: left; color: var(--testo-muto); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.tabella-confronto tbody th { text-align: left; font-weight: 500; color: var(--testo); width: 40%; }
.tabella-confronto .confronto-evidenziato { background: rgba(249, 115, 22, 0.08); }
.tabella-confronto thead .confronto-evidenziato { color: var(--accento-scuro); }
.confronto-si { color: var(--accento-scuro); font-weight: 700; font-size: 18px; }
.confronto-no { color: var(--testo-muto); opacity: 0.6; }
.confronto-nota { display: block; font-size: 12px; color: var(--testo-muto); margin-top: 2px; }
.tabella-confronto strong + .confronto-nota { display: inline; }
@media (max-width: 640px) {
    /* Sul telefono la colonna delle funzioni resta ferma mentre i pacchetti scorrono. */
    .tabella-confronto { font-size: 13px; min-width: 460px; }
    .tabella-confronto th, .tabella-confronto td { padding: 12px 10px; }
    .tabella-confronto tbody th, .tabella-confronto thead th:first-child {
        position: sticky; left: 0; z-index: 1; width: 36%; background: var(--carta);
        box-shadow: 1px 0 0 var(--bordo);
    }
}
.nota-iva-listino { text-align: center; max-width: 640px; margin: 20px auto 0; font-size: 13px; color: var(--testo-muto); }
.badge-sconto {
    display: inline-block;
    background: rgba(251, 146, 60, 0.15);
    color: var(--successo);
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
}
.prezzo-tagline { font-size: 14px; font-weight: 700; color: var(--accento-scuro); margin-bottom: 22px; }
.prezzo-lista { list-style: none; margin: 0 0 26px; padding: 0; text-align: left; flex: 1; }
.prezzo-lista li { position: relative; padding-left: 26px; margin-bottom: 10px; color: var(--testo); font-size: 14px; }
.prezzo-lista li::before { content: "✓"; position: absolute; left: 0; color: var(--accento-scuro); font-weight: 700; }
.card-prezzo .btn-cta { width: 100%; }
.prezzo-nota { font-size: 12px; color: var(--testo-muto); margin: 12px 0 0; }
.prezzo-impegno { font-style: italic; margin: 0 0 14px; }

/* ===== Servizi extra (sotto le card prezzi) =====
   Card a se' stante (bordo arancione, sfondo pieno) invece di testo nudo
   nella pagina: l'utente ha chiesto piu' visibilita', un blocco piatto si
   perdeva sotto le 3 card prezzo molto piu' vistose sopra. */
.servizi-extra {
    max-width: 720px;
    margin: 48px auto 0;
    text-align: center;
    background: linear-gradient(160deg, var(--carta), var(--carta2));
    border: 1px solid var(--accento-scuro);
    border-radius: 16px;
    padding: 32px 36px;
}
.etichetta-servizi-extra { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accento-scuro); margin-bottom: 10px; }
.servizi-extra h3 { font-size: 19px; margin-bottom: 18px; }
.servizi-extra ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; }
.servizi-extra li { color: var(--testo-muto); font-size: 14.5px; }
.servizi-extra li strong { color: #ffffff; }

/* ===== Wizard scelta pacchetto (pagina Prezzi) =====
   Mini-quiz a passi (JS puro, nessuna libreria): una domanda alla volta,
   ogni click su un'opzione salva la risposta e passa al passo successivo;
   all'ultimo passo calcola il pacchetto consigliato invece di mostrare
   un'altra domanda. Vedi lo script in fondo a pricing.php per la logica. */
.wizard-pacchetto {
    max-width: 640px;
    margin: 0 auto;
    background: linear-gradient(160deg, var(--carta), var(--carta2));
    border: 1px solid var(--bordo);
    border-radius: 16px;
    padding: 40px 32px;
    text-align: center;
}
.wizard-domanda { font-size: 19px; font-weight: 600; color: #ffffff; margin-bottom: 24px; }
.wizard-opzioni { display: flex; flex-direction: column; gap: 12px; max-width: 420px; margin: 0 auto; }
.wizard-opzione {
    background: var(--carta2);
    border: 1px solid var(--bordo);
    color: var(--testo);
    padding: 14px 20px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.wizard-opzione:hover { border-color: var(--accento-scuro); background: var(--carta); }
.wizard-indietro {
    display: block;
    width: auto;
    margin: 20px auto 0;
    background: none;
    border: none;
    color: var(--testo-muto);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
}
.wizard-indietro:hover { color: var(--testo); }
.wizard-risultato-etichetta { color: var(--testo-muto); font-size: 14px; margin-bottom: 6px; }
.wizard-risultato-nome { font-size: 32px; font-weight: 800; color: #ffffff; margin-bottom: 6px; }
.wizard-risultato-prezzo { font-size: 20px; font-weight: 700; color: var(--accento-scuro); margin-bottom: 24px; }
.wizard-ricomincia {
    display: block;
    width: auto;
    margin: 16px auto 0;
    background: none;
    border: none;
    color: var(--testo-muto);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}
.wizard-ricomincia:hover { color: var(--testo); }

@media (max-width: 640px) {
    .wizard-pacchetto { padding: 32px 22px; }
}

/* ===== CTA finale ===== */
.sezione-cta-finale { text-align: center; }
.sezione-cta-finale p { max-width: 620px; margin-left: auto; margin-right: auto; }

/* ===== Footer ===== */
.piede { border-top: 1px solid var(--bordo); background: var(--carta2); padding: 56px 0 24px; margin-top: 40px; }
.piede-interno { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding-bottom: 32px; }
.piede-nav { display: flex; flex-direction: column; gap: 8px; }
.piede-nav a { color: var(--testo-muto); font-size: 14px; font-weight: 600; }
.piede-nav a:hover { color: var(--testo); }
.logo-piede { height: 28px; width: auto; margin-bottom: 16px; }
/* Titoletto del piede: un <p> e non un <h4>, per non spezzare la
   gerarchia dei titoli della pagina (H2 -> H4) che Google legge. */
.piede-colonna h4, .piede-titolo { font-size: 14px; font-weight: 700; color: #ffffff; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 14px; }
.piede-social { display: flex; gap: 16px; flex-wrap: wrap; }
.piede-social a { color: var(--testo-muto); font-size: 14px; font-weight: 600; }
.piede-social a:hover { color: var(--testo); }

.piede-legale {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--bordo);
    font-size: 13px;
    color: var(--testo-muto);
}
.piede-link-legali { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.piede-link-legali a { color: var(--testo-muto); font-size: 13px; }
.piede-link-legali a:hover { color: var(--testo); }

@media (max-width: 640px) {
    .piede-interno { grid-template-columns: 1fr; }
}

/* ===== Link "scopri di più" dentro una card (es. verso lightroom.php dalla
   card Lightroom in features.php) ===== */
.link-approfondisci { display: inline-block; margin-top: 14px; font-size: 13.5px; font-weight: 600; }

/* ===== Articolo (guide/risorse): colonna di lettura piu' stretta delle
   sezioni marketing, pensata per testo lungo invece che per card affiancate. */
.articolo { max-width: 760px; }
.articolo h2 { margin-top: 42px; font-size: 26px; font-weight: 700; }
.articolo h2:first-child { margin-top: 0; }
.articolo p { color: var(--testo); }
.articolo ol, .articolo ul { padding-left: 22px; margin: 0 0 20px; }
.articolo ol li, .articolo ul li { color: var(--testo); margin-bottom: 10px; line-height: 1.55; }
.articolo .aiuto { color: var(--testo-muto); font-size: 14px; }
.riquadro-nota {
    background: var(--carta2);
    border: 1px solid var(--bordo);
    border-left: 3px solid var(--accento-scuro);
    border-radius: 10px;
    padding: 16px 20px;
    margin: 24px 0;
    font-size: 14.5px;
    color: var(--testo);
}
.riquadro-nota strong { color: #ffffff; }

/* ===== Griglia risorse (hub Risorse/Resources) ===== */
.griglia-risorse { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; margin-top: 12px; }
.card-risorsa {
    display: block;
    background: linear-gradient(160deg, var(--carta), var(--carta2));
    border: 1px solid var(--bordo);
    border-radius: 16px;
    padding: 26px;
    transition: transform .15s ease, border-color .15s ease;
}
.card-risorsa:hover { transform: translateY(-3px); border-color: var(--accento-scuro); text-decoration: none; }
.card-risorsa .etichetta-risorsa { display: inline-block; font-size: 12px; font-weight: 700; color: var(--accento-scuro); margin-bottom: 10px; }
.card-risorsa h3 { font-size: 19px; font-weight: 600; margin-bottom: 8px; }
.card-risorsa p { font-size: 14px; margin-bottom: 0; }

/* ===== Pagina download (it/scarica.php, en/download.php) ===== */
.griglia-download { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin: 24px 0 40px; }
.card-download {
    background: linear-gradient(160deg, var(--carta), var(--carta2));
    border: 1px solid var(--bordo);
    border-radius: 16px;
    padding: 28px;
}
.card-download.consigliato { border-color: var(--accento-scuro); }
.card-download .etichetta-risorsa { display: inline-block; font-size: 12px; font-weight: 700; color: var(--accento-scuro); margin-bottom: 10px; }
.card-download .etichetta-risorsa[hidden] { display: none; }
.card-download h3 { font-size: 22px; font-weight: 600; margin-bottom: 8px; }
.card-download p { font-size: 14.5px; margin-bottom: 20px; }
/* "Mandami il link per il computer" (account/invia_link_download.php): sul
   telefono lo script della pagina lo sposta prima dei download e lo
   evidenzia (.in-evidenza). */
.manda-link {
    background: linear-gradient(160deg, var(--carta), var(--carta2));
    border: 1px solid var(--bordo);
    border-radius: 16px;
    padding: 26px 28px;
    margin: 0 0 32px;
    scroll-margin-top: 90px; /* il ritorno su #manda-link non finisce sotto la barra in alto */
}
.manda-link.in-evidenza { border-color: var(--accento-scuro); margin-top: 24px; }
.manda-link h2 { font-size: 22px; margin-bottom: 8px; }
.manda-link-modulo { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.manda-link-modulo input[type="email"] {
    flex: 1 1 240px; min-width: 0;
    padding: 13px 14px; font-size: 16px; font-family: inherit;
    color: var(--testo); background: var(--carta2);
    border: 1px solid var(--bordo); border-radius: 10px;
}
.manda-link-modulo input[type="email"]:focus { outline: 2px solid var(--accento-scuro); outline-offset: 1px; }
.manda-link-modulo .btn-cta { flex: 0 0 auto; }
@media (max-width: 480px) { .manda-link-modulo .btn-cta { flex: 1 1 100%; } }
.manda-link-esito { padding: 10px 14px; border-radius: 8px; font-size: 14.5px; }
.manda-link-successo { background: rgba(74, 222, 128, 0.12); color: #4ade80; }
.manda-link-errore { background: rgba(248, 113, 113, 0.12); color: #f87171; }
/* Campo trappola per i robot: fuori dallo schermo, non "display:none"
   (alcuni robot saltano i campi nascosti in quel modo). */
.campo-trappola { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
/* Testo letto dai lettori di schermo ma invisibile a video. */
.nascosto-a-vista { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.passi-download { margin: 12px 0 28px; padding-left: 22px; }
.passi-download li { margin-bottom: 10px; line-height: 1.55; }

/* Video di presentazione in home, sotto il titolo "Un design che parla...":
   a tutta larghezza del contenitore, con comandi, formato 1920x1040. */
.video-home {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 1040;
    border-radius: 16px;
    border: 1px solid var(--bordo);
    background: var(--carta2);
    margin: 8px 0 28px;
}