/* Foglio di stile principale di www.burraconline.com.
   Palette e font ripresi dal sito originale (WordPress/Elementor):
   verde scuro, arancione, font Poppins (corpo) e un font tondeggiante per i titoli.
   Obiettivo: aspetto fedele al brand ma codice pulito e leggero. */

:root {
    --verde: #003000;
    --verde-chiaro: #146E00;
    --verde-pallido: #EEF6EE;
    --verde-panno: #195000;
    --arancio: #FF9600;
    --arancio-scuro: #F47907;
    --arancio-ombra: #c45e00;
    --rosso: #d20d1c;
    --panna: #F9F6F3;
    --bianco: #ffffff;
    --testo: #003000;
    --testo-tenue: #4c5a4c;
    /* Testo chiaro per il tema su panno verde scuro */
    --testo-chiaro: #f2f7f1;
    --testo-chiaro-tenue: #cfe0cc;
    --larghezza-massima: 1140px;
    --raggio: 14px;
    --font-titoli: "Quicksand", "Poppins", system-ui, sans-serif;
    --font-corpo: "Poppins", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
    /* Larghezza della striscia visibile di ogni carta nelle file sovrapposte.
       Modificare questo valore per regolare la sovrapposizione in tutta la pagina. */
    --scorrimento-carta: 20px;
    /* Altezza della carta a 68px di larghezza (rapporto ~1.40 delle carte originali) */
    --altezza-carta: 95px;
    /* Altezza barra header (logo sinistra + padding verticale) */
    --altezza-logo-header: 88px;
    --altezza-header: calc(var(--altezza-logo-header) + 6px);
    /* Larghezza massima della barra header (logo + menu + lingua), centrata nella pagina */
    --larghezza-barra-header: 1366px;
    /* Offset scroll per ancore: header sticky + respiro sotto la barra */
    --offset-ancora-header: calc(var(--altezza-header) + var(--f-small));
    /* Scala tipografica: 3 livelli testo + 2 titoli */
    --f-small: 0.88rem;                   /* note, legale minuto */
    --f-body:  calc(1rem + 1pt);          /* testo corrente, nav, bottoni, email */
    --f-intro: 1.2rem;                    /* sottotitoli, intro in evidenza */
    --f-h2:    clamp(1.5rem, 3vw, 2rem);  /* H2 di sezione */
    --f-h1:    clamp(1.25rem, 4vw, 1.875rem); /* H1 di pagina - max ~30px desktop */
    /* Spessore del contorno verde sui testi */
    --stroke-ui: calc(2px + 1pt);   /* nav, lang-switch, link piccoli */
    --stroke-h2: calc(4px + 1pt);   /* H2, titoli medi, simboli */
    --stroke-h1: calc(5px + 1pt);   /* tutti gli H1 */
    /* Contorno testo in stile originale (tecnica "text-border"): 12 ombre
       disposte ogni 30 gradi attorno al glifo. Il contorno e' disegnato fuori
       dalle lettere, quindi resta sempre leggibile (al contrario di
       -webkit-text-stroke). Una variante per ogni spessore (ui/h2/h1), tutte
       in verde scuro. Sull'elemento: text-shadow: var(--contorno-h2).
       Nota: lo spessore e' incorporato nella lista perche' un var() annidato
       sovrascritto a livello di elemento non verrebbe risolto correttamente.
       --two e --point-two sono i divisori per le componenti a 30 e 60 gradi. */
    --two: 2;
    --point-two: 1.2;
    /* Raggio dell'anello di ombre: meta' del token di stroke, cosi' il contorno
       resta sottile e tondo (col raggio pieno l'anello era troppo largo e, con
       soli 12 punti, si vedeva "a scaglie"). */
    --cr-ui: calc(var(--stroke-ui) / var(--two));
    --cr-h2: calc(var(--stroke-h2) / var(--two));
    --cr-h1: calc(var(--stroke-h1) / var(--two));
    --contorno-ui:
        0 var(--cr-ui) var(--verde),
        calc(var(--cr-ui) / var(--point-two)) calc(var(--cr-ui) / var(--two) * -1) var(--verde),
        calc(var(--cr-ui) / var(--two)) calc(var(--cr-ui) / var(--point-two) * -1) var(--verde),
        var(--cr-ui) 0 var(--verde),
        calc(var(--cr-ui) / var(--two)) calc(var(--cr-ui) / var(--point-two)) var(--verde),
        calc(var(--cr-ui) / var(--point-two)) calc(var(--cr-ui) / var(--two)) var(--verde),
        0 calc(var(--cr-ui) * -1) var(--verde),
        calc(var(--cr-ui) / var(--point-two) * -1) calc(var(--cr-ui) / var(--two)) var(--verde),
        calc(var(--cr-ui) / var(--two) * -1) calc(var(--cr-ui) / var(--point-two)) var(--verde),
        calc(var(--cr-ui) * -1) 0 var(--verde),
        calc(var(--cr-ui) / var(--two) * -1) calc(var(--cr-ui) / var(--point-two) * -1) var(--verde),
        calc(var(--cr-ui) / var(--point-two) * -1) calc(var(--cr-ui) / var(--two) * -1) var(--verde);
    --contorno-h2:
        0 var(--cr-h2) var(--verde),
        calc(var(--cr-h2) / var(--point-two)) calc(var(--cr-h2) / var(--two) * -1) var(--verde),
        calc(var(--cr-h2) / var(--two)) calc(var(--cr-h2) / var(--point-two) * -1) var(--verde),
        var(--cr-h2) 0 var(--verde),
        calc(var(--cr-h2) / var(--two)) calc(var(--cr-h2) / var(--point-two)) var(--verde),
        calc(var(--cr-h2) / var(--point-two)) calc(var(--cr-h2) / var(--two)) var(--verde),
        0 calc(var(--cr-h2) * -1) var(--verde),
        calc(var(--cr-h2) / var(--point-two) * -1) calc(var(--cr-h2) / var(--two)) var(--verde),
        calc(var(--cr-h2) / var(--two) * -1) calc(var(--cr-h2) / var(--point-two)) var(--verde),
        calc(var(--cr-h2) * -1) 0 var(--verde),
        calc(var(--cr-h2) / var(--two) * -1) calc(var(--cr-h2) / var(--point-two) * -1) var(--verde),
        calc(var(--cr-h2) / var(--point-two) * -1) calc(var(--cr-h2) / var(--two) * -1) var(--verde);
    --contorno-h1:
        0 var(--cr-h1) var(--verde),
        calc(var(--cr-h1) / var(--point-two)) calc(var(--cr-h1) / var(--two) * -1) var(--verde),
        calc(var(--cr-h1) / var(--two)) calc(var(--cr-h1) / var(--point-two) * -1) var(--verde),
        var(--cr-h1) 0 var(--verde),
        calc(var(--cr-h1) / var(--two)) calc(var(--cr-h1) / var(--point-two)) var(--verde),
        calc(var(--cr-h1) / var(--point-two)) calc(var(--cr-h1) / var(--two)) var(--verde),
        0 calc(var(--cr-h1) * -1) var(--verde),
        calc(var(--cr-h1) / var(--point-two) * -1) calc(var(--cr-h1) / var(--two)) var(--verde),
        calc(var(--cr-h1) / var(--two) * -1) calc(var(--cr-h1) / var(--point-two)) var(--verde),
        calc(var(--cr-h1) * -1) 0 var(--verde),
        calc(var(--cr-h1) / var(--two) * -1) calc(var(--cr-h1) / var(--point-two) * -1) var(--verde),
        calc(var(--cr-h1) / var(--point-two) * -1) calc(var(--cr-h1) / var(--two) * -1) var(--verde);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Le ancore (#sezione-N, FAQ, Elite...) restano visibili sotto l'header sticky */
    scroll-padding-top: var(--offset-ancora-header);
}

body {
    margin: 0;
    font-family: var(--font-corpo);
    color: var(--testo-chiaro);
    /* Sfondo: panno del tavolo da gioco, piastrellato e fisso su tutta la pagina
       (come l'originale: nessuno stacco bianco, tutto sul verde). */
    background-color: var(--verde-panno);
    background-image: url("/assets/img/background-table-dark.png");
    background-size: 60px;
    background-repeat: repeat;
    background-attachment: fixed;
    line-height: 1.65;
    font-size: 17px;
}

h1, h2, h3, h4 {
    font-family: var(--font-titoli);
    font-weight: 600;
    line-height: 1.15;
    color: var(--testo-chiaro);
}

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

.container {
    width: 100%;
    max-width: var(--larghezza-massima);
    margin: 0 auto;
    padding: 0 24px;
}

a {
    color: var(--arancio);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Pulsanti a pillola in stile originale (arancione con ombra inferiore) */
.btn {
    display: inline-block;
    background: var(--arancio);
    color: var(--bianco);
    font-family: var(--font-titoli);
    font-weight: 600;
    font-size: var(--f-intro);
    padding: 14px 34px;
    border-radius: 999px;
    border: none;
    box-shadow: 0 5px 0 var(--arancio-ombra);
    cursor: pointer;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.btn:hover {
    text-decoration: none;
    color: var(--bianco);
    transform: translateY(2px);
    box-shadow: 0 3px 0 var(--arancio-ombra);
}

.btn-piccolo {
    font-size: var(--f-body);
    padding: 10px 22px;
    box-shadow: 0 4px 0 var(--arancio-ombra);
}

/* Header galleggiante: resta in cima durante lo scroll, sfondo verde semitrasparente
   cosi' il panno della pagina traspare sotto. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--verde) 93%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--testo-chiaro) 10%, transparent);
}

/* Sfondo header a tutta larghezza; contenuto nella traccia centrata */
.header-inner {
    width: 100%;
    padding: 3px 0;
}

/* Traccia 1366px (100% sotto quella soglia): logo | menu | lingua */
.header-track {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    max-width: var(--larghezza-barra-header);
    margin: 0 auto;
    padding: 0 var(--f-body) 0 10px;
    min-height: var(--altezza-header);
}

.logo {
    display: inline-block;
    flex-shrink: 0;
    line-height: 0;
    position: relative;
    z-index: 2;
}

.logo img {
    height: var(--altezza-logo-header);
    width: auto;
}

/* Su desktop il pannello non crea un box: nav e lingua partecipano al flex di header-track */
.header-panel {
    display: contents;
}

/* Solo switch lingua a destra */
.header-track .lang-switch {
    margin-left: auto;
    position: relative;
    z-index: 2;
}

/* Centro geometrico della traccia (logo e lingua ai lati) */
.header-track .main-nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: max-content;
    max-width: calc(100% - var(--altezza-logo-header) * 4);
}

.main-nav ul,
.footer-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
}

.main-nav a {
    color: var(--testo-chiaro);
    font-weight: 500;
    /* Contornino verde scuro attorno alle voci di menu */
    text-shadow: var(--contorno-ui);
}

.main-nav a:hover {
    color: var(--arancio);
    text-decoration: none;
}

.lang-switch {
    color: var(--testo-chiaro-tenue);
    font-weight: 600;
    font-size: var(--f-body);
    white-space: nowrap;
}

.lang-switch a {
    color: var(--testo-chiaro);
    text-shadow: var(--contorno-ui);
}

.lang-switch a:hover {
    color: var(--arancio);
    text-decoration: none;
}

.lang-switch .attiva {
    color: var(--arancio);
}

/* Hamburger: nascosto su desktop, visibile su mobile */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    cursor: pointer;
    border-radius: 10px;
}

.hamburger span {
    display: block;
    height: 3px;
    width: 100%;
    background: var(--testo-chiaro);
    border-radius: 3px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Hero trasparente: sta direttamente sul panno verde della pagina */
.hero {
    position: relative;
    background: transparent;
    color: var(--bianco);
    overflow: hidden;
    padding: 90px 0 110px;
}

.hero .container {
    position: relative;
    z-index: 2;
    max-width: 820px;
    text-align: center;
}

.hero h1 {
    color: var(--panna);
    /* Su mobile --f-h1 scende a 1.25rem mentre --f-intro resta 1.2rem: forziamo
       almeno il rapporto desktop (1.875 / 1.2 = 1.5625) rispetto al sottotitolo. */
    font-size: max(var(--f-h1), calc(var(--f-intro) * 1.5625));
    margin: 0 0 18px;
    /* Contorno verde scuro (tecnica text-border) + ombra portata sotto al testo,
       combinati in un'unica text-shadow. */
    text-shadow: var(--contorno-h1), 0 3px 4px rgba(0, 0, 0, 0.35);
}

.hero p {
    font-size: var(--f-intro);
    max-width: 680px;
    margin: 0 auto 16px;
    color: rgba(255, 255, 255, 0.95);
}

.hero .claim {
    font-weight: 600;
    color: var(--arancio);
    margin-bottom: 30px;
}

/* Variante CTA "Scarica il gioco!": bordino verde, font piu' grande della base
   ma bottone piu' compatto della versione hero precedente. Usato in hero e
   nella sezione "Semplice e gratuito". */
.btn-cta {
    font-size: var(--f-h2);
    padding: 8px 28px;
    text-shadow: var(--contorno-h2);
}

/* Mani di carte a ventaglio decorative, una per ciascun angolo dell'hero
   (come nel sito originale). Ogni mano e' un ventaglio di 4 carte dritte che
   ruotano attorno a un perno comune: in basso per le mani inferiori (ventaglio
   verso l'alto), in alto per le mani superiori (ventaglio verso il basso). */
.mano {
    position: absolute;
    z-index: 1;
    width: 200px;
    height: 250px;
    pointer-events: none;
}

.mano .carta {
    position: absolute;
    left: 25px;
    width: 150px;
    /* Niente border-radius: i nuovi PNG hanno gia' gli angoli stondati.
       drop-shadow (non box-shadow) per antialiasing corretto sulle carte ruotate. */
    filter: drop-shadow(0 9px 14px rgba(0, 0, 0, 0.4));
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Mani superiori: perno in alto, le carte scendono ad arco */
.mano.alto-sinistra .carta,
.mano.alto-destra .carta {
    top: 0;
    transform-origin: 50% -65%;
}

/* Mani inferiori: perno in basso, le carte salgono ad arco */
.mano.basso-sinistra .carta,
.mano.basso-destra .carta {
    bottom: 0;
    transform-origin: 50% 165%;
}

/* Il perno sotto (basso) e il perno sopra (alto) invertono la direzione
   della rotazione rispetto al centro: per aprire il ventaglio verso il
   centro della pagina le mani in alto usano segno opposto a quelle in basso.
   Le carte descrivono un arco col perno (centro del ventaglio) all'angolo
   reale dello schermo, aprendosi verso l'interno della pagina. */

/* Basso-sinistra: perno sotto, rotazioni positive aprono verso destra */
.mano.basso-sinistra .carta:nth-child(1) { transform: rotate(15deg); }
.mano.basso-sinistra .carta:nth-child(2) { transform: rotate(40deg); }
.mano.basso-sinistra .carta:nth-child(3) { transform: rotate(65deg); }

/* Alto-sinistra: perno sopra, rotazioni negative aprono verso destra */
.mano.alto-sinistra .carta:nth-child(1) { transform: rotate(-15deg); }
.mano.alto-sinistra .carta:nth-child(2) { transform: rotate(-40deg); }
.mano.alto-sinistra .carta:nth-child(3) { transform: rotate(-65deg); }

/* Basso-destra: perno sotto, rotazioni negative aprono verso sinistra */
.mano.basso-destra .carta:nth-child(1) { transform: rotate(-65deg); }
.mano.basso-destra .carta:nth-child(2) { transform: rotate(-40deg); }
.mano.basso-destra .carta:nth-child(3) { transform: rotate(-15deg); }

/* Alto-destra: perno sopra, rotazioni positive aprono verso sinistra */
.mano.alto-destra .carta:nth-child(1) { transform: rotate(65deg); }
.mano.alto-destra .carta:nth-child(2) { transform: rotate(40deg); }
.mano.alto-destra .carta:nth-child(3) { transform: rotate(15deg); }

/* Posizionamento nei quattro angoli (speculari fra loro).
   Riferimento: basso-destra a bottom:-10px / right:-130px; gli altri tre sono
   il suo specchio orizzontale e/o verticale, cosi' il perno/centro del
   ventaglio cade all'angolo reale dello schermo. */
.mano.alto-sinistra {
    top: -10px;
    left: -130px;
}

.mano.alto-destra {
    top: -10px;
    right: -130px;
}

.mano.basso-sinistra {
    bottom: -10px;
    left: -130px;
}

.mano.basso-destra {
    bottom: -10px;
    right: -130px;
}

/* Sezioni di contenuto */
.sezione {
    padding: 64px 0;
}

/* Sezione "chiara": leggera velatura piu' scura per alternare le sezioni,
   sempre sul verde (nessun pannello bianco). */
.sezione.chiara {
    background: rgba(0, 0, 0, 0.18);
}

.sezione h2 {
    font-size: var(--f-h2);
    margin-top: 0;
    margin-bottom: 18px;
}

.sezione.centrata {
    text-align: center;
}

.sezione p {
    color: var(--testo-chiaro-tenue);
}

/* Fascia bianca a tutta larghezza (bordo a bordo): immagine a sinistra,
   testo verde su bianco a destra (sezione "Burraco Italiano Gratis",
   come nell'originale). Niente contenitore centrato, niente angoli/ombre. */
.banda-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    background: var(--bianco);
}

/* Altezza fissa: e' l'immagine a determinare l'altezza della sezione,
   esattamente come nell'originale. Il pannello testo si adatta in stretch. */
.pannello-img img {
    width: 100%;
    height: 600px;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.pannello-testo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 36px;
    color: var(--verde);
}

.pannello-testo h2 {
    font-size: var(--f-h2);
    color: var(--arancio);
    text-shadow: var(--contorno-h2);
    margin-top: 0;
    margin-bottom: 0.6em;
}

.pannello-testo p {
    color: #2c4a2c;
    margin-top: 0;
    margin-bottom: 0;
}

/* Sezione "Come si gioca a Burraco":
   box arrotondato su panno, ventaglio di 4 assi a sinistra + testo a destra.
   Struttura e transforms fedeli all'originale Elementor. */
.come-si-gioca {
    padding: 44px 0;
}

.come-si-gioca-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
    background: rgba(249, 246, 243, 0.086);
    border-radius: 12px;
    overflow: visible;
}

/* Le carte escono di 40px sopra e sotto il box (margini negativi come nell'originale). */
.ventaglio-assi {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    flex-shrink: 0;
    overflow: visible;
    padding: 40px 0;
    margin-top: -40px;
    margin-bottom: -40px;
    margin-left: -20px;
}

/* Tutti e 4 gli assi: 150px di larghezza (come le carte dell'hero),
   drop-shadow per evitare bordi scalettati. */
.asso {
    width: 150px;
    display: block;
    flex-shrink: 0;
    filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.4));
}

/* Rotazioni e sovrapposizioni (translateY prima di rotate = comportamento
   Elementor). Margini e translateY scalati a 0.75 rispetto ai 200px originali. */
.asso:nth-child(1) { transform: translateY(68px) rotate(-30deg); margin-left: -38px; }
.asso:nth-child(2) { transform: translateY(30px) rotate(-20deg); margin-left: -90px; }
.asso:nth-child(3) { transform: translateY(8px) rotate(-10deg); margin-left: -90px; }
.asso:nth-child(4) { margin-left: -90px; }

.come-si-gioca-testo {
    flex: 1;
    padding: 20px 20px 20px 55px;
}

.come-si-gioca-testo h2 {
    font-size: var(--f-h2);
    color: var(--bianco);
    text-shadow: var(--contorno-h2);
    margin-top: 0;
    margin-bottom: 0.5em;
}

.come-si-gioca-testo p {
    color: var(--testo-chiaro-tenue);
    margin: 0 0 1.2em;
}

/* Pulsante panna con bordo chiaro (stile originale, diverso dal btn arancione). */
.btn-regole {
    display: inline-block;
    background: var(--panna);
    color: var(--verde);
    border: 2px solid rgba(238, 246, 238, 0.7);
    border-radius: 12px;
    padding: 11px 24px 13px;
    font-weight: 600;
    font-size: var(--f-intro);
    text-decoration: none;
    transition: background 0.15s;
}

.btn-regole:hover {
    background: var(--bianco);
    text-decoration: none;
}

/* Sezione "Semplice e gratuito": box panna con SVG a sinistra e testo a destra,
   fedele all'originale Elementor (sfondo panna, border-radius 12px, gap 10px). */
.semplice-gratuito {
    padding: 44px 0;
}

.semplice-box {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    max-width: 800px;
    margin: 0 auto;
    background: var(--panna);
    border-radius: 12px;
    overflow: hidden;
    gap: 10px;
}

.semplice-img {
    flex: 0 0 48%;
    overflow: hidden;
}

.semplice-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.semplice-testo {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
    gap: 14px;
}

.semplice-testo h2 {
    font-size: var(--f-h2);
    color: var(--arancio);
    text-shadow: var(--contorno-h2);
    margin: 0;
}

.semplice-testo p {
    color: var(--verde);
    margin: 0;
    line-height: 1.6;
}

/* Pulsanti piattaforme di download */
.piattaforme {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.sezione.centrata .piattaforme {
    justify-content: center;
}

.piattaforma {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--verde);
    color: var(--bianco);
    font-weight: 600;
    padding: 12px 22px;
    border-radius: 999px;
    transition: background 0.15s ease;
}

.piattaforma:hover {
    background: var(--verde-chiaro);
    color: var(--bianco);
    text-decoration: none;
}

/* Griglia "Hanno parlato di noi" */
.griglia-citazioni {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 26px;
    margin-top: 30px;
}

.card {
    background: var(--bianco);
    border-radius: var(--raggio);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.card h3 {
    font-family: var(--font-corpo);
    font-size: var(--f-body);
    margin: 0;
    padding: 18px 20px;
    text-align: center;
    color: var(--verde);
}

/* Card video YouTube: thumbnail + pulsante play in overlay, link a YouTube */
.card-video {
    display: block;
    text-decoration: none;
    color: inherit;
}

.card-video:hover {
    text-decoration: none;
    color: inherit;
}

.video-thumb {
    position: relative;
    overflow: hidden;
}

.video-thumb img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease;
}

.card-video:hover .video-thumb img {
    transform: scale(1.04);
}

/* Pulsante play in stile YouTube (rosso, triangolo bianco) */
.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 44px;
    background: rgba(200, 0, 0, 0.88);
    border-radius: 12px;
    pointer-events: none;
    transition: background 0.15s;
}

.play-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    border-left: 20px solid #fff;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}

.card-video:hover .play-btn {
    background: rgba(200, 0, 0, 1);
}

/* Footer: sul panno verde, separato solo da una linea sottile */
.site-footer {
    background: #003000;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--testo-chiaro-tenue);
    padding: 44px 0;
    font-size: var(--f-body);
}

.footer-nav ul {
    justify-content: center;
    margin-bottom: 18px;
}

.site-footer a {
    color: #e6f0e6;
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--arancio);
    text-decoration: none;
}

.footer-logo {
    text-align: center;
    margin-bottom: 12px;
}

.footer-logo img {
    opacity: 0.85;
    margin: 0 auto;
    display: block;
}

.copyright {
    text-align: center;
    margin: 10px 0;
    color: #e6f0e6;
}

.gioco-responsabile {
    text-align: center;
    color: #9ab39a;
    max-width: 720px;
    margin: 10px auto 0;
    font-size: var(--f-small);
}

/* Adattamento tablet/mobile */

/* Breakpoint banda-split uguale all'originale (1022px):
   passa a colonna singola e riduce l'immagine come nell'originale. */
@media (max-width: 1022px) {
    .banda-split {
        grid-template-columns: 1fr;
    }

    .pannello-img img {
        height: 385px;
    }
}

@media (max-width: 1180px) {
    /* Su tablet teniamo i ventagli ma piu' piccoli. Riduciamo la larghezza
       reale delle carte (non con transform: scale) cosi' il browser le
       ricampiona con un antialiasing pulito, senza effetto scalettato. */
    .mano {
        width: 150px;
        height: 190px;
    }

    .mano .carta {
        width: 112px;
        left: 19px;
    }
}

@media (max-width: 1024px) {
    .mano {
        width: 116px;
        height: 150px;
    }

    .mano .carta {
        width: 86px;
        left: 15px;
    }
}

@media (max-width: 820px) {
    .mano {
        width: 96px;
        height: 124px;
    }

    .mano .carta {
        width: 70px;
        left: 13px;
    }
}

/* Mobile: "Come si gioca" passa a colonna (carte sopra, testo sotto) */
@media (max-width: 767px) {
    .come-si-gioca-box {
        flex-direction: column;
        align-items: stretch;
    }

    /* Reset margini negativi desktop: su mobile il fan e' centrato nel box.
       padding-bottom generoso per dare spazio alle carte che escono in basso
       tramite translateY (card 1 scende di ~46px). */
    .ventaglio-assi {
        margin: 0;
        padding: 20px 0 60px;
        justify-content: center;
    }

    /* Carte piu' piccole su mobile (scala 0.67 rispetto a 150px desktop) */
    .asso { width: 100px; }
    .asso:nth-child(1) { transform: translateY(46px) rotate(-30deg); margin-left: -26px; }
    .asso:nth-child(2) { transform: translateY(20px) rotate(-20deg); margin-left: -60px; }
    .asso:nth-child(3) { transform: translateY(5px)  rotate(-10deg); margin-left: -60px; }
    .asso:nth-child(4) { margin-left: -60px; }

    /* Il pannello testo prende tutta la larghezza; rimuove il padding-left
       di 55px che serviva solo affiancato alle carte */
    .come-si-gioca-testo {
        padding: 16px 24px 28px;
    }

    /* Mobile: "Semplice e gratuito" passa a colonna (SVG sopra, testo sotto) */
    .semplice-box {
        flex-direction: column;
    }

    .semplice-img {
        flex: none;
        height: 200px;
    }
}

/* Sui telefoni nascondiamo del tutto le carte: l'hero resta pulito */
@media (max-width: 680px) {
    :root {
        --altezza-logo-header: 76px;
    }

    .mano {
        display: none;
    }
}

/* =====================================================
   Pagina "Scarica il gioco"
   ===================================================== */
.scarica-header {
    padding: 72px 0 40px;
    text-align: center;
}

.scarica-header h1 {
    font-size: var(--f-h1);
    color: var(--panna);
    text-shadow: var(--contorno-h1), 0 3px 4px rgba(0, 0, 0, 0.35);
    margin: 0 0 20px;
}

.scarica-header p {
    font-size: var(--f-intro);
    max-width: 640px;
    margin: 0 auto;
    color: var(--testo-chiaro-tenue);
}

.scarica-header strong {
    color: var(--testo-chiaro);
}

/* Sezione griglia pulsanti di download */
.scarica-piattaforme {
    padding: 0 0 80px;
}

/* Griglia 2x2 delle card di download */
.download-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 700px;
    margin: 0 auto;
}

/* Card singola: sfondo panna, flex-row, bordi stondati */
.download-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    background: var(--panna);
    border-radius: 14px;
    padding: 18px 22px;
    text-decoration: none;
    color: var(--verde);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.download-card:hover {
    text-decoration: none;
    color: var(--verde);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}

/* Icona piattaforma */
.download-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
}

.download-icon svg {
    width: 56px;
    height: 56px;
    display: block;
}

/* Testi della card */
.download-testo {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.download-nome {
    font-family: var(--font-titoli);
    font-weight: 600;
    font-size: var(--f-intro);
    color: var(--verde);
}

.download-versione {
    font-size: var(--f-small);
    color: var(--testo-tenue);
}

/* Nota a pié di griglia */
.scarica-nota {
    text-align: center;
    font-size: var(--f-body);
    color: var(--testo-chiaro-tenue);
    margin: 28px auto 0;
    max-width: 560px;
}

/* Mobile: griglia a colonna singola */
@media (max-width: 540px) {
    .download-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   Pagina "Come si gioca"
   ===================================================== */

/* =====================================================
   Include "Semplice e gratuito" (usato in home e in come-si-gioca)
   ===================================================== */
.box-semplice-gratuito {
    display: flex;
    align-items: center;
    gap: 24px;
    background: var(--panna);
    border-radius: 14px;
    padding: 20px 24px;
    max-width: 640px;
    margin: 40px auto;
    position: relative;
}

.bsg-favicon {
    width: 132px;
    flex-shrink: 0;
    display: block;
}

.bsg-testo {
    flex: 1;
    min-width: 0;
}

.bsg-titolo {
    font-family: var(--font-titoli);
    color: var(--arancio);
    font-size: clamp(1.7rem, 3.2vw, 2.2rem);
    margin: 0 0 8px;
    text-shadow: var(--contorno-h2);
}

.bsg-testo p {
    color: var(--verde);
    font-size: var(--f-intro);
    margin: 0 0 14px;
    line-height: 1.55;
}

.bsg-kicon {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 26px;
    opacity: 1;
}

@media (max-width: 500px) {
    .box-semplice-gratuito {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px 18px;
    }
    .bsg-favicon { width: 80px; }
}

/* Quando il box è dentro un layout su sfondo panna (come-si-gioca),
   forziamo sfondo bianco per distinguerlo e lo centriamo nel contenuto */
.regole-main .box-semplice-gratuito {
    background: var(--bianco);
    margin: 36px auto 0;
}

@media (max-width: 500px) {
    .regole-main .box-semplice-gratuito {
        align-items: center;
    }

    .regole-main .bsg-testo {
        text-align: center;
    }
}

/* ===================================================== */

/* Wrapper centrato per il pulsante CTA sotto il riquadro intro */
.regole-cta-top {
    text-align: center;
    margin: 20px 0 28px;
}

/* Layout due colonne (EN/ES: sidebar a destra; IT: classe .regole-indice-inizio) */
.regole-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    align-items: start;
    gap: 0;
    max-width: var(--larghezza-massima);
    margin: 32px auto 60px;
    padding: 0 24px;
}

/* IT: indice in cima al contenuto, colonna unica a tutta larghezza */
.regole-layout.regole-indice-inizio {
    grid-template-columns: 1fr;
}

.regole-layout.regole-indice-inizio .regole-main {
    border-radius: var(--raggio);
}

/* Contenuto principale */
.regole-main {
    background: var(--panna);
    border-radius: 12px 0 0 12px;
    padding: 36px 40px;
    color: var(--verde);
    min-width: 0;
}

.regole-titolo {
    font-family: var(--font-titoli);
    color: var(--arancio);
    font-size: var(--f-h1);
    margin: 0 0 6px;
    text-shadow: var(--contorno-h1);
}

.regole-sottotitolo {
    font-family: var(--font-titoli);
    color: var(--verde);
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    font-weight: 600;
    margin: 0 0 22px;
    line-height: 1.3;
}

.regole-intro-box {
    background: #fff3cc;
    border: 2px solid var(--arancio);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 18px;
    font-weight: 600;
    color: var(--verde);
    font-size: var(--f-body);
    line-height: 1.6;
}

.regole-foto-intro {
    width: 100%;
    border-radius: 8px;
    margin: 18px 0 0;
    display: block;
}

/* Sezioni numerate */
.regole-sezione {
    margin-top: 32px;
    padding-top: 26px;
    border-top: 1px solid rgba(0, 48, 0, 0.12);
}

.regole-sotto {
    margin-top: 20px;
    padding-top: 16px;
}

.regole-main p,
.regole-main li {
    color: var(--testo);
    line-height: 1.7;
    font-size: var(--f-body);
}

.regole-main p { margin: 0 0 10px; }

.regole-main ul,
.regole-main ol {
    padding-left: 22px;
    margin: 0 0 12px;
}

.regole-main li { margin-bottom: 6px; }

.sezione-titolo {
    font-family: var(--font-titoli);
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: clamp(1.1rem, 2.2vw, 1.45rem);
    color: var(--verde);
    margin: 0 0 12px;
}

.sezione-titolo-h3 {
    font-size: clamp(1rem, 2vw, 1.25rem);
}

.sezione-titolo-h4 {
    font-family: var(--font-titoli);
    font-size: var(--f-body);
    color: var(--verde);
    margin: 14px 0 6px;
}

.sezione-num {
    color: var(--arancio);
    font-weight: 700;
    font-size: 1.3em;
    line-height: 1;
    flex-shrink: 0;
    text-shadow: var(--contorno-h2);
}

/* Fila carte VERTICALE con sovrapposizione, come sul tavolo da gioco.
   Ogni carta scende sotto la precedente mostrando --scorrimento-carta px del valore.
   Il testo va nel wrapper .esempio-v (colonna sinistra: carte, destra: testo). */
.fila-carte {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 10px 0 14px;
    overflow: visible;
}

/* Singola carta negli esempi */
.carta-reg {
    width: 68px;
    flex-shrink: 0;
    display: block;
    border-radius: 4px;
    filter: drop-shadow(1px 2px 4px rgba(0, 0, 0, 0.22));
    position: relative;
}

/* Dalla seconda carta in poi: scorrimento negativo verso il basso */
.fila-carte .carta-reg + .carta-reg {
    margin-top: calc(var(--scorrimento-carta) - var(--altezza-carta, 95px));
}

/* Stacking: ogni carta sopra la precedente in z-order */
.fila-carte .carta-reg:nth-child(1)  { z-index: 1; }
.fila-carte .carta-reg:nth-child(2)  { z-index: 2; }
.fila-carte .carta-reg:nth-child(3)  { z-index: 3; }
.fila-carte .carta-reg:nth-child(4)  { z-index: 4; }
.fila-carte .carta-reg:nth-child(5)  { z-index: 5; }
.fila-carte .carta-reg:nth-child(6)  { z-index: 6; }
.fila-carte .carta-reg:nth-child(7)  { z-index: 7; }
.fila-carte .carta-reg:nth-child(8)  { z-index: 8; }
.fila-carte .carta-reg:nth-child(9)  { z-index: 9; }
.fila-carte .carta-reg:nth-child(10) { z-index: 10; }
.fila-carte .carta-reg:nth-child(11) { z-index: 11; }
.fila-carte .carta-reg:nth-child(12) { z-index: 12; }
.fila-carte .carta-reg:nth-child(13) { z-index: 13; }
.fila-carte .carta-reg:nth-child(14) { z-index: 14; }

/* Carta ruotata di 90 gradi (ultima carta di un burraco chiuso).
   translateX(14px) ≈ (altezza - larghezza) / 2 allinea il bordo sinistro alla colonna.
   will-change e backface-visibility forzano il compositing GPU per evitare
   lo sgranamento che si ottiene con la rotazione renderizzata via CPU. */
.carta-reg.ruotata {
    transform: translateX(14px) rotate(90deg) translateZ(0);
    transform-origin: center center;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Layout: colonna carte a sinistra + testo a destra */
.esempio-v {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    margin: 14px 0;
}

.esempio-v .fila-carte {
    margin: 0;
    flex-shrink: 0;
}

/* Carta inline nella tabella */
.carta-inline {
    width: 38px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
}

/* Fan di 3 carte sovrapposte in ventaglio */
.fan-carte {
    position: relative;
    width: 110px;
    height: 90px;
    flex-shrink: 0;
}

.fan-carte .carta-reg {
    position: absolute;
    bottom: 0;
    width: 68px;
    transform-origin: 50% 115%;
}

.fan-carte .carta-reg:nth-child(1) { left: 0;    transform: rotate(-18deg); }
.fan-carte .carta-reg:nth-child(2) { left: 16px; transform: rotate(0deg); }
.fan-carte .carta-reg:nth-child(3) { left: 32px; transform: rotate(18deg); }

/* Layout esempio: fan + testo */
.esempio-2col {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 14px 0;
    background: rgba(0, 48, 0, 0.04);
    border-radius: 8px;
    padding: 14px 16px;
    min-height: 110px;
}

.esempio-testo {
    flex: 1;
    font-size: var(--f-body);
    color: var(--testo);
    margin: 0;
    line-height: 1.55;
}

/* Layout prima → dopo (gruppi di carte verticali affiancati con freccia) */
.esempio-prima-dopo {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 10px 0 14px;
    flex-wrap: wrap;
}

.esempio-colonna {
    flex-direction: column;
    align-items: flex-start;
}

.freccia-dx,
.simbolo-op {
    font-size: var(--f-h2);
    color: var(--verde);
    flex-shrink: 0;
    line-height: 1;
    font-weight: 700;
    align-self: flex-start;
    padding-top: 14px;
}

.freccia-giu {
    font-size: var(--f-h2);
    color: var(--verde);
    line-height: 1;
    align-self: flex-start;
    padding-left: 20px;
}

/* Tabella valori carte */
.tabella-vp {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0 14px;
    font-size: var(--f-body);
}

.tabella-vp th,
.tabella-vp td {
    border: 1px solid rgba(0, 48, 0, 0.18);
    padding: 7px 12px;
    text-align: left;
    color: var(--verde);
    vertical-align: middle;
}

.tabella-vp th {
    background: var(--verde-pallido);
    font-weight: 600;
}

.lista-vp {
    columns: 2;
    gap: 24px;
}

/* Sidebar indice */
.regole-sidebar {
    background: var(--verde);
    border-radius: 0 12px 12px 0;
    padding: 24px 18px;
    position: sticky;
    top: 20px;
    align-self: start;
    color: var(--testo-chiaro);
}

.indice-titolo {
    font-family: var(--font-titoli);
    font-size: var(--f-intro);
    color: var(--bianco);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.indice-titolo img {
    width: 28px;
    flex-shrink: 0;
}

.indice-lista {
    list-style: none;
    padding: 0;
    margin: 0;
}

.indice-lista li {
    margin-bottom: 8px;
    font-size: var(--f-body);
    line-height: 1.35;
}

.indice-lista a {
    color: var(--testo-chiaro-tenue);
    text-decoration: none;
    display: block;
}

.indice-lista a:hover {
    color: var(--arancio);
    text-decoration: none;
}

.indice-num {
    color: var(--arancio);
    font-weight: 700;
    margin-right: 2px;
}

.indice-sub {
    margin-top: 6px;
    padding-left: 14px;
}

/* Indice in cima (IT come-si-gioca): sotto il pulsante Scarica */
.regole-indice-top {
    background: var(--verde);
    border-radius: var(--raggio);
    padding: 24px 22px;
    margin: 0 0 28px;
    color: var(--testo-chiaro);
}

.regole-indice-top > .indice-lista {
    columns: 2;
    column-gap: 28px;
}

.regole-indice-top > .indice-lista > li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

@media (max-width: 680px) {
    .regole-indice-top > .indice-lista {
        columns: 1;
    }
}

/* CTA finale nell'articolo */
.regole-cta {
    background: var(--bianco);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 26px;
    margin: 36px 0 0;
    position: relative;
    overflow: hidden;
}

.regole-cta-img {
    width: 150px;
    flex-shrink: 0;
    display: block;
}

.regole-cta-testo h3 {
    font-family: var(--font-titoli);
    color: var(--arancio);
    font-size: var(--f-h2);
    margin: 0 0 8px;
    text-shadow: var(--contorno-ui);
}

.regole-cta-testo p {
    color: var(--verde);
    margin: 0 0 14px;
    font-size: var(--f-body);
    line-height: 1.55;
}

.regole-cta-icon {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 28px;
    opacity: 0.65;
}

/* Responsive */
@media (max-width: 900px) {
    .regole-layout {
        grid-template-columns: 1fr;
        margin: 20px auto 40px;
    }

    .regole-main {
        border-radius: 12px;
        padding: 26px 24px;
        order: 2;
    }

    .regole-sidebar {
        border-radius: 12px;
        position: static;
        order: 1;
    }

    .lista-vp { columns: 1; }
}

@media (max-width: 560px) {
    .esempio-2col {
        flex-direction: column;
        align-items: flex-start;
        min-height: 0;
    }

    .fan-carte {
        margin-bottom: 8px;
    }

    .regole-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px 20px;
    }

    .regole-cta-img { width: 100px; }

    .carta-reg { width: 52px; }

    /* Su mobile le carte sono 52px (h ~73px): ricalcolo la sovrapposizione verticale */
    .fila-carte .carta-reg + .carta-reg {
        margin-top: calc(var(--scorrimento-carta) - 73px);
    }

    .fan-carte { width: 110px; height: 92px; }
    .fan-carte .carta-reg { width: 70px; }
}

/* ===================================================== */

/* =====================================================
   Pagina "Profili Standard / Elite"
   ===================================================== */

/* Accento arancio inline nei titoli */
.testo-arancio {
    color: var(--arancio);
}

/* Intestazione centrata sul panno verde */
.elite-header {
    padding: 64px 0 36px;
    text-align: center;
}

.elite-header h1 {
    font-size: var(--f-h1);
    color: var(--panna);
    text-shadow: var(--contorno-h1), 0 3px 4px rgba(0, 0, 0, 0.35);
    margin: 0;
}

/* Barra di navigazione interna con anchor link */
.elite-ancre {
    display: flex;
    justify-content: center;
    margin-bottom: 52px;
}

.elite-ancre-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    background: var(--verde);
    border-radius: 10px;
    overflow: hidden;
}

.elite-ancre-inner a {
    color: var(--testo-chiaro);
    font-family: var(--font-titoli);
    font-weight: 600;
    font-size: var(--f-body);
    padding: 11px 22px;
    display: block;
    transition: background 0.15s;
    white-space: nowrap;
}

.elite-ancre-inner a:hover {
    background: var(--verde-chiaro);
    color: var(--bianco);
    text-decoration: none;
}

/* Contenuto principale: centrato, padding inferiore */
.elite-content {
    padding-bottom: 80px;
}

/* Sezione generica */
.elite-sezione {
    margin-bottom: 60px;
}

.elite-sezione > h2 {
    font-size: var(--f-h2);
    color: var(--testo-chiaro);
    text-align: center;
    margin: 0 0 24px;
}

.elite-sezione > p {
    color: var(--testo-chiaro-tenue);
    text-align: center;
    max-width: 780px;
    margin: 0 auto 10px;
    font-size: var(--f-body);
}

/* ===== Tabelle Punti livello ===== */
.punti-tables {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.punti-table-wrap {
    display: flex;
    flex-direction: column;
}

.punti-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--f-body);
}

.punti-table thead th {
    background: var(--verde);
    color: var(--testo-chiaro);
    font-family: var(--font-titoli);
    font-weight: 600;
    padding: 10px 12px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Riga del sottotitolo (nome colonna punti) */
.punti-table-subtitle th {
    background: rgba(0, 0, 0, 0.35);
    font-size: var(--f-small);
    letter-spacing: 0.03em;
    padding: 7px 12px;
}

.punti-table-subtitle-elite th {
    background: rgba(0, 0, 0, 0.45);
}

.punti-table tbody tr:nth-child(odd) {
    background: rgba(0, 0, 0, 0.18);
}

.punti-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.30);
}

.punti-table td {
    padding: 8px 14px;
    text-align: center;
    color: var(--testo-chiaro);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

/* Nota esplicativa a pie' di tabella */
.punti-table tfoot td {
    background: transparent;
    border: none;
    padding: 14px 4px 0;
    color: var(--testo-chiaro-tenue);
    font-size: var(--f-small);
    line-height: 1.55;
    text-align: left;
}

/* ===== Box regole abbandoni ===== */
.abbandoni-box {
    background: var(--panna);
    border-radius: 16px;
    padding: 32px 36px 28px;
    margin-bottom: 60px;
}

.abbandoni-titolo {
    font-family: var(--font-titoli);
    font-size: var(--f-h2);
    color: var(--arancio);
    text-align: center;
    margin: 0 0 4px;
    text-shadow: var(--contorno-ui);
}

.abbandoni-sottotitolo {
    text-align: center;
    font-size: var(--f-body);
    color: var(--verde);
    margin: 0 0 24px;
    font-weight: 600;
}

.abbandoni-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.abbandoni-col h4 {
    font-family: var(--font-titoli);
    font-size: var(--f-body);
    color: var(--verde);
    margin: 0 0 8px;
}

.abbandoni-col ul {
    padding-left: 20px;
    margin: 0 0 16px;
}

.abbandoni-col li {
    color: var(--testo);
    font-size: var(--f-body);
    line-height: 1.65;
    margin-bottom: 6px;
}

.abbandoni-nb {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 48, 0, 0.15);
    text-align: center;
    font-size: var(--f-small);
    color: var(--testo-tenue);
    margin-bottom: 0;
}

/* ===== Tabella comparazione Standard / Elite ===== */
.compare-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: var(--f-body);
}

.compare-table thead th {
    background: var(--verde);
    color: var(--testo-chiaro);
    font-family: var(--font-titoli);
    font-weight: 600;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.compare-table thead th.col-elite {
    color: var(--arancio);
}

.compare-table tbody tr:nth-child(odd) {
    background: rgba(0, 0, 0, 0.18);
}

.compare-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.30);
}

.compare-table td {
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: var(--testo-chiaro);
    vertical-align: middle;
}

.compare-table td.col-feature {
    font-size: var(--f-body);
    color: var(--testo-chiaro-tenue);
}

.compare-table td.col-val {
    text-align: center;
    font-weight: 700;
    font-size: var(--f-intro);
    width: 16%;
}

/* Numeri (30 / infinito) in dimensione piu' contenuta */
.compare-table td.col-num {
    font-size: var(--f-body);
}

/* Icona di negazione (×): rossa */
.icona-no {
    color: var(--rosso);
    font-size: var(--f-intro);
    font-weight: 700;
    line-height: 1;
}

/* Icona di conferma (segno di spunta): verde brillante */
.icona-si {
    color: #3db857;
    font-size: var(--f-intro);
    font-weight: 700;
    line-height: 1;
}

/* ===== FAQ due colonne ===== */
.faq-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.faq-col h2 {
    font-size: var(--f-h2);
    color: var(--testo-chiaro);
    text-align: left;
    margin: 0 0 14px;
}

.faq-col p {
    color: var(--testo-chiaro-tenue);
    font-size: var(--f-body);
    line-height: 1.65;
    margin: 0 0 10px;
    text-align: left;
}

.faq-col a {
    color: var(--arancio);
}

.faq-col ul {
    padding-left: 20px;
    margin: 0;
}

.faq-col li {
    color: var(--testo-chiaro-tenue);
    font-size: var(--f-body);
    line-height: 1.65;
    margin-bottom: 8px;
}

/* ===== Sezione livelli ===== */
.elite-livelli > h2 {
    margin-bottom: 10px;
}

.elite-livelli > p {
    margin-bottom: 24px;
}

/* Contenitore immagine livelli: bordo arancio su sfondo arancio (come originale) */
.elite-livelli-img {
    max-width: 860px;
    margin: 0 auto;
    background: var(--arancio);
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35);
}

.elite-livelli-img img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

/* ===== Responsive ===== */
@media (max-width: 760px) {
    .punti-tables {
        grid-template-columns: 1fr;
    }

    .abbandoni-cols {
        grid-template-columns: 1fr;
    }

    .faq-cols {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .compare-table td.col-val {
        width: auto;
    }

    .abbandoni-box {
        padding: 24px 20px 20px;
    }
}

@media (max-width: 540px) {
    .elite-ancre-inner {
        border-radius: 10px;
    }

    .elite-ancre-inner a {
        padding: 10px 14px;
        font-size: var(--f-small);
    }

    .compare-table td.col-feature {
        font-size: var(--f-small);
    }
}

/* ===================================================== */

/* Sotto i 900px: menu a tendina con hamburger */
@media (max-width: 900px) {
    .header-track {
        padding: 0 56px 0 10px;
    }

    .hamburger {
        display: flex;
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
    }

    .header-panel {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 18px;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        /* Pannello menu mobile: stesso verde semitrasparente dell'header */
        background: color-mix(in srgb, var(--verde) 88%, transparent);
        border-bottom: 1px solid color-mix(in srgb, var(--testo-chiaro) 12%, transparent);
        box-shadow: 0 14px 24px color-mix(in srgb, var(--verde) 40%, transparent);
        padding: 0 24px;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
    }

    .nav-toggle:checked ~ .header-panel {
        max-height: 70vh;
        opacity: 1;
        padding: 18px 24px 26px;
        overflow-y: auto;
    }

    .header-track .main-nav {
        position: static;
        transform: none;
        width: 100%;
        max-width: none;
    }

    .header-track .lang-switch {
        margin-left: 0;
    }

    .main-nav ul {
        flex-direction: column;
        gap: 14px;
        width: 100%;
    }

    .main-nav a {
        display: block;
        padding: 4px 0;
        font-size: var(--f-body);
    }

    /* Hamburger animato in "X" quando il menu e' aperto */
    .nav-toggle:checked ~ .hamburger span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .nav-toggle:checked ~ .hamburger span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle:checked ~ .hamburger span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .nav-toggle:checked ~ .hamburger {
        transform: translateY(-50%);
    }

    .hero {
        padding-bottom: 70px;
    }
}

/* =====================================================
   Blog - Indice e pagina articolo
   ===================================================== */

/* ---- Indice ---- */

.blog-header {
    padding: 64px 0 28px;
    text-align: center;
}

.blog-header h1 {
    font-size: var(--f-h1);
    color: var(--panna);
    text-shadow: var(--contorno-h1), 0 3px 4px rgba(0, 0, 0, 0.35);
    margin: 0 0 16px;
}

.blog-intro {
    font-size: var(--f-body);
    color: var(--testo-chiaro-tenue);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.65;
}

/* Testo introduttivo - colonna singola */
.blog-testo-intro {
    padding: 24px 0 16px;
}

.blog-testo-cols {
    max-width: 860px;
    margin: 0 auto;
}

.blog-testo-cols p {
    color: var(--testo-chiaro-tenue);
    font-size: var(--f-body);
    line-height: 1.65;
    margin: 0 0 10px;
}

.blog-testo-cols a {
    color: var(--arancio);
}

/* Griglia articoli */
.blog-lista {
    padding: 32px 0 80px;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

/* Card singolo articolo */
.blog-card {
    background: var(--panna);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.blog-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.32);
}

.blog-card-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.blog-card-link:hover {
    text-decoration: none;
    color: inherit;
}

.blog-card-img-wrap {
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.blog-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease;
}

.blog-card:hover .blog-card-img {
    transform: scale(1.04);
}

.blog-card-body {
    padding: 18px 20px 22px;
    flex: 1;
}

.blog-card-titolo {
    font-family: var(--font-titoli);
    font-size: var(--f-body);
    color: var(--verde);
    margin: 0 0 10px;
    line-height: 1.3;
}

.blog-card-estratto {
    font-size: var(--f-small);
    color: var(--testo-tenue);
    line-height: 1.6;
    margin: 0;
}

/* ---- Pagina articolo ---- */

/* Immagine hero a tutta larghezza contenuta */
.post-hero {
    max-width: 600px;
    margin: 40px auto 0;
    padding: 0 24px;
}

.post-hero-img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    display: block;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

/* Corpo articolo su sfondo panna */
.post-corpo {
    padding: 0 0 0;
}

.post-breadcrumb {
    font-size: var(--f-small);
    color: var(--testo-chiaro-tenue);
    margin: 32px 0 16px;
    text-align: center;
}

.post-breadcrumb a {
    color: var(--arancio);
}

.post-titolo {
    font-size: var(--f-h1);
    color: var(--testo-chiaro);
    margin: 0 0 28px;
    line-height: 1.2;
    text-align: center;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

/* Contenuto dell'articolo su sfondo panna */
.post-contenuto {
    background: var(--panna);
    border-radius: 14px;
    padding: 36px 44px;
    color: var(--testo);
    max-width: 860px;
    margin: 0 auto;
}

.post-contenuto p {
    margin: 0 0 14px;
    line-height: 1.75;
    font-size: var(--f-body);
    color: var(--testo);
}

.post-contenuto h2 {
    font-family: var(--font-titoli);
    font-size: clamp(1.25rem, 2.5vw, 1.65rem);
    color: var(--verde);
    margin: 26px 0 10px;
}

.post-contenuto h3 {
    font-family: var(--font-titoli);
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    color: var(--verde);
    margin: 20px 0 8px;
}

.post-contenuto ul,
.post-contenuto ol {
    padding-left: 22px;
    margin: 0 0 14px;
}

.post-contenuto li {
    line-height: 1.7;
    font-size: var(--f-body);
    margin-bottom: 6px;
    color: var(--testo);
}

.post-contenuto strong {
    color: var(--verde);
}

.post-footer {
    margin-top: 32px;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Riduce lo spazio sopra il box "Semplice e gratuito" nel contesto del post */
.post-articolo .semplice-gratuito {
    padding-top: 0;
}

/* Contorno verde sul testo del pulsante "Torna al Blog" */
.post-footer .btn {
    text-shadow: var(--contorno-h2);
    font-size: var(--f-intro);
}
        grid-template-columns: repeat(2, 1fr);
    }

    .blog-testo-cols {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

@media (max-width: 560px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }

    .post-contenuto {
        padding: 24px 20px;
    }

    .post-hero {
        padding: 0 12px;
    }
}

/* =====================================================
   Pagina FAQ
   ===================================================== */

.faq-page-content {
    padding-bottom: 80px;
}

.faq-sezione {
    margin-bottom: 56px;
}

.faq-sezione > h2 {
    font-size: var(--f-h2);
    color: var(--arancio);
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(255, 150, 0, 0.28);
}

.faq-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq-item {
    background: var(--panna);
    border-radius: 10px;
    overflow: hidden;
}

.faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    cursor: pointer;
    padding: 15px 20px;
    font-family: var(--font-titoli);
    font-weight: 600;
    font-size: var(--f-body);
    color: var(--verde);
    list-style: none;
    gap: 14px;
    line-height: 1.4;
    transition: background 0.15s;
    user-select: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "+";
    font-size: var(--f-h2);
    font-weight: 400;
    color: var(--arancio-scuro);
    flex-shrink: 0;
    transition: transform 0.2s;
    line-height: 1;
    margin-top: 1px;
}

.faq-item[open] > summary {
    background: var(--verde-pallido);
}

.faq-item[open] > summary::after {
    transform: rotate(45deg);
}

.faq-item-risposta {
    padding: 2px 20px 18px;
    background: var(--panna);
}

.faq-item-risposta p {
    margin: 10px 0 0;
    color: var(--testo);
    font-size: var(--f-body);
    line-height: 1.72;
}

.faq-item-risposta ol {
    margin: 10px 0 0;
    padding-left: 22px;
}

.faq-item-risposta ul {
    margin: 10px 0 0;
    padding-left: 20px;
}

.faq-item-risposta li {
    color: var(--testo);
    font-size: var(--f-body);
    line-height: 1.65;
    margin-bottom: 6px;
}

.faq-item-risposta a {
    color: var(--arancio-scuro);
    font-weight: 600;
}

.faq-item-risposta strong {
    color: var(--verde);
}

@media (max-width: 560px) {
    .faq-item summary {
        font-size: var(--f-body);
        padding: 13px 16px;
    }

    .faq-item-risposta {
        padding: 2px 16px 16px;
    }
}

/* =====================================================
   Pagina Contatti
   ===================================================== */

.contatti-intro {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 52px;
    color: var(--testo-chiaro-tenue);
    font-size: var(--f-body);
    line-height: 1.7;
}

.contatti-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 780px;
    margin: 0 auto;
    padding-bottom: 80px;
}

.contatti-card {
    background: var(--panna);
    border-radius: 14px;
    padding: 32px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contatti-card h2 {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    color: var(--verde);
    margin: 0;
    line-height: 1.3;
}

.contatti-mail {
    display: inline-block;
    margin-top: 4px;
    color: var(--arancio-scuro);
    font-weight: 600;
    font-size: var(--f-small);
    white-space: nowrap;
}

.contatti-mail:hover {
    color: var(--verde-chiaro);
}

@media (max-width: 560px) {
    .contatti-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .contatti-card {
        padding: 24px 20px 22px;
    }
}

/* =====================================================
   Pagine legali (imprint, privacy, cookie, termini, regolamento)
   Layout riusabile: box panna centrato sul panno verde.
   ===================================================== */

.pagina-legale {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 20px 80px;
}

.pagina-legale-contenuto {
    background: var(--panna);
    border-radius: 14px;
    padding: 40px 48px;
    color: var(--testo);
}

.pagina-legale-contenuto h2 {
    font-family: var(--font-titoli);
    font-size: clamp(1.2rem, 2.5vw, 1.55rem);
    color: var(--verde);
    margin: 32px 0 10px;
}

.pagina-legale-contenuto h2:first-child {
    margin-top: 0;
}

.pagina-legale-contenuto p {
    font-size: var(--f-body);
    line-height: 1.75;
    margin: 0 0 12px;
    color: var(--testo);
}

.pagina-legale-contenuto ul,
.pagina-legale-contenuto ol {
    padding-left: 22px;
    margin: 0 0 14px;
}

.pagina-legale-contenuto li {
    font-size: var(--f-body);
    line-height: 1.7;
    margin-bottom: 6px;
    color: var(--testo);
}

.pagina-legale-contenuto strong {
    color: var(--verde);
}

.pagina-legale-contenuto a,
.pagina-legale-contenuto .doc-ref {
    color: var(--arancio-scuro);
    font-weight: 600;
}

.pagina-legale-dati {
    margin: 16px 0 24px;
    padding: 20px 24px;
    background: var(--verde-pallido);
    border-radius: 10px;
    border-left: 4px solid var(--verde-chiaro);
}

.pagina-legale-dati p {
    margin: 0 0 6px;
}

.pagina-legale-dati p:last-child {
    margin: 0;
}

.pagina-legale-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--f-small);
    margin: 16px 0 24px;
}

.pagina-legale-table th {
    background: var(--verde);
    color: var(--testo-chiaro);
    font-family: var(--font-titoli);
    font-weight: 600;
    text-align: left;
    padding: 10px 14px;
}

.pagina-legale-table td {
    padding: 9px 14px;
    border-bottom: 1px solid #dde8dd;
    color: var(--testo);
    vertical-align: top;
    line-height: 1.55;
}

.pagina-legale-table tr:nth-child(even) td {
    background: var(--verde-pallido);
}

@media (max-width: 560px) {
    .pagina-legale-table thead {
        display: none;
    }
    .pagina-legale-table td {
        display: block;
        padding: 6px 10px;
    }
    .pagina-legale-table td:first-child {
        padding-top: 12px;
        font-weight: 600;
        color: var(--verde);
    }
    .pagina-legale-table td:last-child {
        padding-bottom: 12px;
        border-bottom: 2px solid #c8dcc8;
    }
}

@media (max-width: 640px) {
    .pagina-legale-contenuto {
        padding: 28px 22px;
    }
}

/* =====================================================
   Pagina 404
   ===================================================== */

.errore-404 {
    text-align: center;
    padding: 60px 20px 140px;
    max-width: 640px;
    margin: 0 auto;
}

.errore-404-codice {
    font-family: var(--font-titoli);
    font-size: clamp(6rem, 20vw, 10rem);
    font-weight: 700;
    color: var(--arancio);
    text-shadow: var(--contorno-h1);
    line-height: 1;
    margin: 0 0 16px;
}

.errore-404-testo {
    color: var(--testo-chiaro);
    font-size: var(--f-intro);
    margin: 0 0 48px;
    line-height: 1.6;
}