/* =========================================================
   IL BRONTOLONE — FESTE E RICORRENZE
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@400;500;600&display=swap');


:root {

    --blu: #15516d;
    --viola: #4c2554;
    --giallo: #eab341;
    --salvia: #a1c0b8;

    --sfondo: #f8f6f1;
    --bianco: #ffffff;
    --testo: #303030;

}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}


html {

    margin: 0;
    padding: 0;

    scroll-behavior: smooth;

}


body {

    margin: 0;
    padding: 0;

    width: 100%;

    background: var(--sfondo);

    color: var(--testo);

    font-family:
        "Open Sans",
        Arial,
        sans-serif;

    overflow-x: hidden;

}


img {
    max-width: 100%;
}


/* =========================================================
   BARRA SUPERIORE
   ========================================================= */

.top-bar {

    position: fixed;

    top: 0;
    left: 0;

    z-index: 1000;

    width: 100%;
    height: 58px;

    padding:
        0
        25px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    background:
        rgba(248, 246, 241, 0.95);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    border-bottom:
        1px solid
        rgba(21, 81, 109, 0.08);

}


.home-link,
.home-link:visited {

    color: var(--blu);

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 2px;

    text-decoration: none;

}


.home-link:hover {
    opacity: 0.6;
}


.logo-top {

    display: block;

    width: 52px;
    height: auto;

}


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

.hero-proposta {

    position: relative;

    width: 100%;
    min-height: 700px;

    padding:
        120px
        30px
        80px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: var(--sfondo);

    overflow: hidden;

}


.hero-contenuto {

    position: relative;

    z-index: 5;

    width:
        min(
            850px,
            100%
        );

    margin: 0 auto;

    text-align: center;

}


.sopratitolo {

    margin:
        0
        0
        18px;

    color: var(--blu);

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 3px;

}


.hero-proposta h1 {

    margin:
        0
        0
        30px;

    color: var(--blu);

    font-family:
        "TeX Gyre Termes",
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            65px,
            9vw,
            105px
        );

    font-weight: 400;

    line-height: 0.88;

}


.hero-frase {

    margin: 0 auto;

    color: var(--viola);

    font-family:
        "TeX Gyre Termes",
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            26px,
            3.5vw,
            38px
        );

    font-style: italic;

    line-height: 1.25;

}


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

.forma {

    position: absolute;

    pointer-events: none;

}


.forma-viola {

    width: 390px;
    height: 220px;

    top: -110px;
    left: -90px;

    background: var(--viola);

    border-radius:
        45% 55% 40% 60%
        /
        55% 40% 60% 45%;

    transform:
        rotate(-10deg);

}


.forma-gialla {

    width: 340px;
    height: 430px;

    top: 170px;
    right: -220px;

    background: var(--giallo);

    border-radius:
        52% 48% 55% 45%
        /
        38% 55% 45% 62%;

    transform:
        rotate(9deg);

}


.forma-salvia {

    width: 330px;
    height: 240px;

    bottom: -135px;
    left: -145px;

    background: var(--salvia);

    border-radius:
        50% 50% 38% 62%
        /
        55% 40% 60% 45%;

}


/* =========================================================
   RACCONTO
   ========================================================= */

.racconto-proposta {

    width: 100%;

    padding:
        110px
        30px;

    background: var(--bianco);

}


.racconto-contenuto {

    width:
        min(
            900px,
            100%
        );

    margin: 0 auto;

}


.numero-sezione {

    margin:
        0
        0
        12px;

    color: var(--salvia);

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 3px;

}


.etichetta-sezione {

    margin:
        0
        0
        16px;

    color: var(--blu);

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 3px;

}


.racconto-proposta h2 {

    margin:
        0
        0
        50px;

    color: var(--blu);

    font-family:
        "TeX Gyre Termes",
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            48px,
            6vw,
            74px
        );

    font-weight: 400;

    line-height: 0.98;

}


.testo-proposta {

    width:
        min(
            650px,
            100%
        );

    margin-left: auto;

}


.testo-proposta p {

    margin:
        0
        0
        22px;

    font-size: 13px;

    line-height: 1.85;

}


.testo-proposta strong {
    color: var(--blu);
}


.firma-proposta {

    margin-top:
        40px !important;

    padding-left: 22px;

    border-left:
        3px solid
        var(--giallo);

    color: var(--viola);

    font-family:
        "TeX Gyre Termes",
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        24px !important;

    font-style: italic;

    line-height:
        1.45 !important;

}


.firma-proposta strong {
    color: var(--viola);
}


/* =========================================================
   GALLERIA FESTE
   ========================================================= */

.galleria-feste {

    width: 100%;

    padding:
        95px
        30px
        105px;

    background: var(--sfondo);

}


/* INTRO */

.galleria-feste-intro {

    width:
        min(
            780px,
            100%
        );

    margin:
        0 auto
        50px;

    text-align: center;

}


.galleria-feste-label {

    margin:
        0
        0
        15px;

    color: var(--salvia);

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 3px;

}


.galleria-feste-intro h2 {

    margin:
        0
        0
        22px;

    color: var(--viola);

    font-family:
        "TeX Gyre Termes",
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            45px,
            6vw,
            68px
        );

    font-weight: 400;

    font-style: italic;

    line-height: 1;

}


.galleria-feste-intro > p:last-child {

    width:
        min(
            540px,
            100%
        );

    margin: 0 auto;

    font-size: 12px;

    line-height: 1.8;

}


/* =========================================================
   GRIGLIA DELLE 6 FOTO
   ========================================================= */

.galleria-feste-griglia {

    width:
        min(
            1100px,
            100%
        );

    margin: 0 auto;

    display: grid;

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

    gap: 18px;

    align-items: start;

}


/* =========================================================
   SINGOLA FOTO
   ========================================================= */

.foto-festa {

    width: 100%;

    overflow: hidden;

    background: var(--bianco);

}


/*
   IMPORTANTE:

   niente altezza fissa
   niente aspect-ratio
   niente object-fit cover

   La fotografia viene semplicemente
   ridotta alla dimensione della colonna.
*/

.foto-festa img {

    display: block;

    width: 100%;
    height: auto;

    margin: 0;

    transition:
        transform 0.5s ease;

}


.foto-festa:hover img {

    transform:
        scale(1.02);

}


/* =========================================================
   IDEE MENÙ
   ========================================================= */

.idee-menu-feste {

    position: relative;

    width: 100%;

    padding:
        110px
        30px;

    background: var(--viola);

    color: var(--bianco);

    text-align: center;

    overflow: hidden;

}


.idee-menu-feste-contenuto {

    position: relative;

    z-index: 5;

    width:
        min(
            720px,
            100%
        );

    margin: 0 auto;

}


.idee-menu-feste-label {

    margin:
        0
        0
        15px;

    color: var(--giallo);

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 3px;

}


.idee-menu-feste h2 {

    margin:
        0
        0
        30px;

    color: var(--bianco);

    font-family:
        "TeX Gyre Termes",
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            48px,
            6vw,
            72px
        );

    font-weight: 400;

    font-style: italic;

    line-height: 1;

}


.idee-menu-feste-contenuto
> p:not(.idee-menu-feste-label) {

    width:
        min(
            580px,
            100%
        );

    margin: 0 auto;

    color:
        rgba(
            255,
            255,
            255,
            0.78
        );

    font-size: 12px;

    line-height: 1.8;

}


/* PULSANTE */

.idee-menu-feste-btn,
.idee-menu-feste-btn:visited {

    display: inline-block;

    margin-top: 38px;

    padding:
        14px
        26px;

    border:
        1px solid
        var(--giallo);

    color: var(--giallo);

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 2px;

    text-decoration: none;

    transition:
        background-color 0.3s ease,
        color 0.3s ease;

}


.idee-menu-feste-btn:hover {

    background: var(--giallo);

    color: var(--viola);

}


/* FORME IDEE */

.forma-idee {

    position: absolute;

    pointer-events: none;

}


.forma-idee-gialla {

    width: 300px;
    height: 220px;

    top: -145px;
    right: -130px;

    background: var(--giallo);

    border-radius:
        50% 50% 40% 60%
        /
        55% 40% 60% 45%;

}


.forma-idee-salvia {

    width: 270px;
    height: 210px;

    bottom: -145px;
    left: -125px;

    background: var(--salvia);

    border-radius:
        55% 45% 60% 40%
        /
        45% 60% 40% 55%;

}


/* =========================================================
   CONTATTI FESTE
   ========================================================= */

.contatti-feste {

    width: 100%;

    padding:
        100px
        30px;

    background: var(--giallo);

    color: var(--viola);

    text-align: center;

}


.contatti-feste-contenuto {

    width:
        min(
            700px,
            100%
        );

    margin: 0 auto;

}


.contatti-label {

    margin:
        0
        0
        15px;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 3px;

}


.contatti-feste h2 {

    margin:
        0
        0
        25px;

    font-family:
        "TeX Gyre Termes",
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            45px,
            6vw,
            66px
        );

    font-weight: 400;

    font-style: italic;

    line-height: 1;

}


.contatti-testo {

    width:
        min(
            520px,
            100%
        );

    margin:
        0 auto;

    font-size: 12px;

    line-height: 1.8;

}


.contatti-pulsanti {

    margin-top: 35px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

}


.pulsante-contatto,
.pulsante-contatto:visited {

    display: inline-block;

    padding:
        14px
        24px;

    border:
        1px solid
        var(--viola);

    color: var(--viola);

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.5px;

    text-decoration: none;

    transition:
        background-color 0.3s ease,
        color 0.3s ease;

}


.pulsante-contatto:hover {

    background: var(--viola);

    color: var(--bianco);

}


/* =========================================================
   FOOTER
   ========================================================= */

.footer-brontolone {

    position: relative;

    width: 100%;

    background: var(--blu);

    color: var(--bianco);

    overflow: hidden;

}


.footer-info {

    width:
        min(
            1280px,
            100%
        );

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1.25fr
        1fr
        1fr
        1.25fr;

}


.footer-box {

    position: relative;

    min-height: 190px;

    padding:
        38px
        32px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    color: var(--bianco);

    text-decoration: none;

    border-right:
        1px solid
        rgba(
            255,
            255,
            255,
            0.16
        );

}


.footer-box:last-child {
    border-right: none;
}


a.footer-box:hover {

    background:
        rgba(
            255,
            255,
            255,
            0.07
        );

}


.footer-label {

    margin-bottom: 16px;

    color: var(--salvia);

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 3px;

}


.footer-title,
.footer-title:visited {

    color: var(--bianco);

    font-family:
        "TeX Gyre Termes",
        Georgia,
        "Times New Roman",
        serif;

    font-size: 23px;

    line-height: 1.2;

    text-decoration: none;

}


.footer-small,
.footer-small:visited {

    margin-top: 5px;

    color:
        rgba(
            255,
            255,
            255,
            0.72
        );

    font-size: 11px;

    text-decoration: none;

}


.footer-action {

    margin-top: 25px;

    color:
        rgba(
            255,
            255,
            255,
            0.65
        );

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 8px;
    font-weight: 600;

    letter-spacing: 1.5px;

}


.footer-phone {

    display: block;

    width: fit-content;

    text-decoration: none;

}


.footer-call,
.footer-call:visited,
.footer-call:active {

    display: inline-block;

    width: fit-content;

    color:
        rgba(
            255,
            255,
            255,
            0.65
        );

    text-decoration: none;

}


.footer-call:hover {
    color: var(--giallo);
}


.footer-riposo {

    margin-top: 14px;

    color: var(--giallo);

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


/* PRENOTAZIONE */

.footer-prenota {

    background: var(--giallo);

    color: var(--viola);

}


.footer-prenota .footer-label {

    color: var(--viola);

    opacity: 0.7;

}


.footer-prenota-title {

    color: var(--viola);

    font-family:
        "TeX Gyre Termes",
        Georgia,
        "Times New Roman",
        serif;

    font-size: 36px;

    font-style: italic;

    line-height: 1;

}


.footer-prenota .footer-action {

    color: var(--viola);

    opacity: 0.8;

}


.footer-prenota:hover {

    background:
        var(--salvia) !important;

}


/* FASCIA FINALE */

.footer-bottom {

    width: 100%;
    min-height: 100px;

    padding:
        27px
        40px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 40px;

    background: var(--viola);

}


.footer-brand {

    color: var(--bianco);

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 2px;

}


.footer-brand span {

    display: block;

    margin-top: 5px;

    color:
        rgba(
            255,
            255,
            255,
            0.55
        );

    font-size: 7px;

    letter-spacing: 3px;

}


.footer-bottom p {

    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.75
        );

    font-family:
        "TeX Gyre Termes",
        Georgia,
        "Times New Roman",
        serif;

    font-size: 16px;

    font-style: italic;

}


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

@media (max-width: 900px) {


    .galleria-feste-griglia {

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

        gap: 14px;

    }


    .footer-info {

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

    }

}


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

@media (max-width: 600px) {


    /* TOP */

    .top-bar {

        height: 54px;

        padding:
            0
            16px;

    }


    .logo-top {
        width: 45px;
    }


    .home-link {

        font-size: 9px;

        letter-spacing: 1.4px;

    }


    /* HERO */

    .hero-proposta {

        min-height: 600px;

        padding:
            100px
            18px
            65px;

    }


    .hero-proposta h1 {

        font-size: 56px;

    }


    .hero-frase {

        font-size: 24px;

    }


    .forma-viola {

        width: 220px;
        height: 130px;

        top: -70px;
        left: -100px;

    }


    .forma-gialla {

        width: 190px;
        height: 270px;

        top: 180px;
        right: -145px;

    }


    .forma-salvia {

        width: 190px;
        height: 150px;

        bottom: -90px;
        left: -110px;

    }


    /* RACCONTO */

    .racconto-proposta {

        padding:
            75px
            20px;

    }


    .racconto-proposta h2 {

        margin-bottom: 35px;

        font-size: 44px;

    }


    .testo-proposta {

        margin-left: 0;

    }


    .testo-proposta p {

        font-size: 12px;

    }


    .firma-proposta {

        font-size:
            21px !important;

    }


    /* GALLERIA */

    .galleria-feste {

        padding:
            70px
            18px
            75px;

    }


    .galleria-feste-intro {

        margin-bottom: 35px;

    }


    .galleria-feste-intro h2 {

        font-size: 42px;

    }


    .galleria-feste-griglia {

        grid-template-columns: 1fr;

        gap: 12px;

    }


    .foto-festa img {

        width: 100%;
        height: auto;

    }


    .foto-festa:hover img {

        transform: none;

    }


    /* IDEE MENÙ */

    .idee-menu-feste {

        padding:
            80px
            20px;

    }


    .idee-menu-feste h2 {

        font-size: 44px;

    }


    /* CONTATTI */

    .contatti-feste {

        padding:
            80px
            20px;

    }


    .contatti-feste h2 {

        font-size: 43px;

    }


    .contatti-pulsanti {

        flex-direction: column;

    }


    .pulsante-contatto {

        width: 100%;

        max-width: 300px;

    }


    /* FOOTER */

    .footer-info {

        grid-template-columns: 1fr;

    }


    .footer-box {

        min-height: 150px;

        padding:
            28px
            25px;

        border-right: none;

        border-bottom:
            1px solid
            rgba(
                255,
                255,
                255,
                0.15
            );

    }


    .footer-bottom {

        padding:
            27px
            25px;

        flex-direction: column;

        align-items: flex-start;

        gap: 18px;

    }

}