/* =========================================================
   CINGILAPAI — LEGAL SYSTEM V2
   Privacy / Termini / Crediti e licenze
   2026-08-14
   ========================================================= */


/* =========================================================
   HERO
   ========================================================= */

.legal-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    padding: 92px 0 78px;

    background:
        radial-gradient(
            circle at 78% 40%,
            rgba(216,166,77,.14),
            transparent 30%
        ),
        radial-gradient(
            circle at 12% 0%,
            rgba(37,145,112,.10),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #061b15 0%,
            #08271f 58%,
            #061b15 100%
        );

    border-bottom:
        1px solid
        rgba(216,166,77,.16);
}


.legal-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );

    background-size: 96px 100%;

    opacity: .32;
}


.legal-hero::after {
    content: "";

    position: absolute;

    right: -170px;
    top: 50%;

    width: 560px;
    height: 560px;

    border-radius: 50%;

    transform: translateY(-50%);

    background:
        radial-gradient(
            circle,
            rgba(216,166,77,.08) 0%,
            rgba(216,166,77,.025) 44%,
            transparent 72%
        );

    pointer-events: none;
}


.legal-hero-inner {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(320px, .72fr);

    column-gap: 72px;

    align-items: center;

    width: 100%;
    max-width: none;
}


.legal-hero-inner > .eyebrow {
    grid-column: 1;
    grid-row: 1;
}


.legal-hero h1 {
    grid-column: 1;
    grid-row: 2;

    margin: 9px 0 20px;

    max-width: 760px;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(
            3.15rem,
            6.2vw,
            5.65rem
        );

    line-height: .98;

    letter-spacing: -.035em;
}


.legal-lead {
    grid-column: 1;
    grid-row: 3;

    max-width: 680px;

    margin: 0;

    color:
        rgba(244,239,226,.84);

    font-size: 1.12rem;

    line-height: 1.72;
}


/* =========================================================
   DOCUMENTO PRE-LANCIO
   ========================================================= */

.legal-draft-notice {
    grid-column: 2;
    grid-row: 1 / span 3;

    align-self: center;

    margin: 0;

    padding: 27px 28px;

    border:
        1px solid
        rgba(216,166,77,.27);

    border-left:
        4px solid
        var(--gold);

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(216,166,77,.105),
            rgba(255,255,255,.025)
        );

    box-shadow:
        0 20px 48px
        rgba(0,0,0,.14);

    backdrop-filter:
        blur(5px);
}


.legal-draft-notice strong {
    display: block;

    color:
        var(--gold-light);

    font-family:
        Georgia,
        serif;

    font-size: 1.18rem;
}


.legal-draft-notice p {
    margin: 10px 0 0;

    color:
        rgba(244,239,226,.78);

    line-height: 1.62;
}


/* =========================================================
   AREA DOCUMENTO
   ========================================================= */

.legal-content {
    position: relative;

    padding:
        68px
        0
        105px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(216,166,77,.07),
            transparent 28%
        ),
        var(--cream, #f3eee2);

    color:
        var(--text-dark, #17342b);
}


.legal-layout {
    display: grid;

    grid-template-columns:
        286px
        minmax(0, 1fr);

    gap: 58px;

    align-items: start;
}


/* =========================================================
   INDICE
   ========================================================= */

.legal-index {
    position: sticky;
    top: 116px;

    display: grid;

    gap: 4px;

    padding: 22px 18px;

    border:
        1px solid
        rgba(216,166,77,.23);

    border-radius: 17px;

    background:
        linear-gradient(
            160deg,
            #0a2b22,
            #071f19
        );

    box-shadow:
        0 18px 40px
        rgba(9,35,28,.11);
}


.legal-index strong {
    display: block;

    margin:
        2px
        10px
        13px;

    padding-bottom: 13px;

    border-bottom:
        1px solid
        rgba(216,166,77,.20);

    color:
        var(--gold-light);

    font-family:
        Georgia,
        serif;

    font-size: 1.18rem;
}


.legal-index a {
    display: block;

    padding:
        9px
        10px;

    border-radius: 9px;

    color:
        rgba(244,239,226,.78);

    font-size: .88rem;

    line-height: 1.32;

    text-decoration: none;

    transition:
        color .18s ease,
        background .18s ease,
        transform .18s ease;
}


.legal-index a:hover {
    color:
        var(--cream, #f3eee2);

    background:
        rgba(216,166,77,.105);

    transform:
        translateX(3px);
}


.legal-index a:focus-visible {
    outline:
        3px solid
        var(--gold);

    outline-offset: 2px;

    color:
        var(--cream, #f3eee2);

    background:
        rgba(216,166,77,.12);
}


/* =========================================================
   DOCUMENTO / FOGLIO
   ========================================================= */

.legal-document {
    width: 100%;

    max-width: 900px;

    padding:
        46px
        52px;

    border:
        1px solid
        rgba(9,35,28,.10);

    border-radius: 19px;

    background:
        rgba(255,255,255,.54);

    box-shadow:
        0 18px 45px
        rgba(9,35,28,.055);
}


.legal-document section {
    position: relative;

    scroll-margin-top: 130px;

    padding:
        0
        0
        46px;

    margin:
        0
        0
        46px;

    border-bottom:
        1px solid
        rgba(9,35,28,.11);
}


.legal-document section::before {
    content: "";

    position: absolute;

    left: 0;
    top: -4px;

    width: 36px;
    height: 2px;

    border-radius: 999px;

    background:
        var(--gold);
}


.legal-document section:last-child {
    padding-bottom: 0;

    margin-bottom: 0;

    border-bottom: 0;
}


.legal-document section:last-child::before {
    display: block;
}


.legal-document section:target {
    scroll-margin-top: 130px;
}


.legal-document h2 {
    margin:
        0
        0
        20px;

    padding-top: 15px;

    color:
        #173c30;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(
            1.65rem,
            3vw,
            2.35rem
        );

    line-height: 1.18;

    letter-spacing: -.018em;
}


.legal-document p {
    margin:
        0
        0
        17px;

    color:
        #354a42;

    line-height: 1.78;
}


.legal-document p:last-child {
    margin-bottom: 0;
}


.legal-document a:not(.legal-email) {
    color:
        #8d651f;

    text-decoration-thickness: 1px;

    text-underline-offset: 3px;
}


/* =========================================================
   BOX DA COMPLETARE / DA VERIFICARE
   ========================================================= */

.legal-pending {
    position: relative;

    margin:
        24px
        0;

    padding:
        21px
        23px;

    border:
        1px solid
        rgba(184,132,38,.22);

    border-left:
        4px solid
        var(--gold);

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            rgba(216,166,77,.115),
            rgba(216,166,77,.055)
        );
}


.legal-pending strong {
    display: block;

    color:
        #795719;

    font-family:
        Georgia,
        serif;

    font-size: 1.04rem;
}


.legal-pending p {
    margin:
        8px
        0
        0;

    color:
        #4a5147;
}


/* =========================================================
   CONTATTO
   ========================================================= */

.legal-email {
    display: inline-flex;

    align-items: center;

    min-height: 43px;

    padding:
        9px
        15px;

    border:
        1px solid
        rgba(154,114,42,.25);

    border-radius: 999px;

    background:
        rgba(216,166,77,.09);

    color:
        #76551d;

    font-weight: 750;

    text-decoration: none;

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease;
}


.legal-email:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(154,114,42,.42);

    background:
        rgba(216,166,77,.15);
}


.legal-email:focus-visible {
    outline:
        3px solid
        var(--gold);

    outline-offset: 3px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .legal-hero-inner {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(280px, .72fr);

        column-gap: 42px;
    }


    .legal-layout {
        grid-template-columns:
            235px
            minmax(0, 1fr);

        gap: 38px;
    }


    .legal-document {
        padding:
            40px
            38px;
    }

}


@media (max-width: 820px) {

    .legal-hero {
        padding:
            76px
            0
            62px;
    }


    .legal-hero-inner {
        grid-template-columns:
            1fr;

        gap: 0;
    }


    .legal-hero-inner > .eyebrow,
    .legal-hero h1,
    .legal-lead,
    .legal-draft-notice {
        grid-column: 1;
        grid-row: auto;
    }


    .legal-draft-notice {
        margin-top: 32px;

        max-width: 660px;
    }


    .legal-layout {
        grid-template-columns:
            1fr;

        gap: 30px;
    }


    .legal-index {
        position: static;

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap: 5px;
    }


    .legal-index strong {
        grid-column:
            1 / -1;
    }


    .legal-document {
        max-width: none;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 560px) {

    .legal-hero {
        padding:
            66px
            0
            48px;
    }


    .legal-hero h1 {
        margin-top: 7px;

        font-size:
            clamp(
                2.7rem,
                14vw,
                4.2rem
            );
    }


    .legal-lead {
        font-size: 1rem;

        line-height: 1.62;
    }


    .legal-draft-notice {
        margin-top: 26px;

        padding:
            21px
            19px;
    }


    .legal-content {
        padding:
            34px
            0
            72px;
    }


    /*
       Indice compatto orizzontale.
       Evita una lista verticale lunghissima
       prima del documento.
    */
    .legal-index {
        display: flex;

        gap: 8px;

        width: 100%;

        padding: 12px;

        overflow-x: auto;

        overscroll-behavior-inline:
            contain;

        scrollbar-width: thin;

        border-radius: 13px;
    }


    .legal-index strong {
        display: none;
    }


    .legal-index a {
        flex:
            0
            0
            auto;

        padding:
            9px
            12px;

        border:
            1px solid
            rgba(216,166,77,.15);

        background:
            rgba(255,255,255,.025);

        white-space: nowrap;

        font-size: .82rem;
    }


    .legal-document {
        padding:
            30px
            21px;

        border-radius: 14px;
    }


    .legal-document section {
        padding-bottom: 36px;

        margin-bottom: 36px;

        scroll-margin-top: 105px;
    }


    .legal-document h2 {
        font-size:
            clamp(
                1.45rem,
                7.2vw,
                1.95rem
            );
    }


    .legal-document p {
        line-height: 1.7;
    }


    .legal-pending {
        padding:
            18px
            17px;
    }

}


/* =========================================================
   RIDUZIONE MOVIMENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .legal-index a,
    .legal-email {
        transition: none;
    }

}


/* =========================================================
   LEGAL V2.1 — HERO CONTAINER ALIGNMENT
   ========================================================= */

@media (min-width: 821px) {

    .legal-hero-inner {
        width: min(1180px, calc(100% - 48px));
        max-width: 1180px;

        margin-left: auto;
        margin-right: auto;
    }

}