@font-face {

    font-family: "TreRose";

    src: url("../font/Flow.otf") format("opentype");

    font-weight: normal;

    font-style: normal;

}



@font-face {

    font-family: "TreRose";

    src: url("../font/Flow_B.otf") format("opentype");

    font-weight: bold;

    font-style: normal;

}



body, html {

    font-family: "TreRose", Arial, sans-serif !important;

}



.hero.piccolo {

    height: 40vh;

    background: #4f200d;

    color: #fff2ab;

    display: flex;

    align-items: center;

    justify-content: center;

}



.filtri {

    text-align: center;

    padding: 40px;

}



.filtri input, .filtri select {

    padding: 10px;

    font-size: 16px;

    margin: 5px;

}



.filtri button {

    padding: 10px 20px;

    background: #9e6a00;

    color: white;

    border: none;

    cursor: pointer;

}



.lista-vini {

    padding: 80px 10%;

}



.vino {

    display: flex;

    gap: 40px;

    margin-bottom: 80px;

    align-items: center;

}



.vino.dx {

    flex-direction: row-reverse;

}



.vino img {

    width: 280px;

    height: auto;

    border-radius: 12px;

    box-shadow: 0 10px 25px rgba(0,0,0,0.25);

}



.vino .info {

    max-width: 500px;

}



.vino h2 {

    font-size: 28px;

    color: #3a1f1f;

    margin-bottom: 10px;

}



.vino p {

    font-size: 16px;

    line-height: 1.6;

}



/* DA QUI INIZIA IL CODICE IDENTICO A HOME.CSS */



/* BODY */

body {

    margin: 0;

    font-family: Arial, sans-serif;

    background: #fff2ab;

    color: #333;

}



/* HERO */

.hero {

    background: url("../imm/home/home_1.jpg") no-repeat center center/cover;

    height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    color: white;

    position: relative;

}



.overlay {

    position: absolute;

    inset: 0;

    background: rgba(0,0,0,0.66);

}



.introVini{

    display: flex;

    gap: 40px;

    padding: 80px 10%;

    align-items: center;

}



.introVini img {

    width: 220px;

    border-radius: 10px;

}



.introVini p {

    font-size: 1.4rem;

    line-height: 1.6;

    text-align: justify;

    padding-left: 50px;

    padding-right: 50px;

}



/* FOOTER */

footer {

    background: #4f200d;

    color: #fff2ab;

    padding: 30px 0;

    text-align: center;

}



/* WHATSAPP E FACEBOOK */

#whatsapp, #facebook {

    width: 80px;

    cursor: pointer;

    transition: transform 0.3s ease, opacity 0.3s ease;

    position: fixed;

}



#whatsapp {

    right: 20px;

    bottom: 20px;

    z-index: 1000;

}



#facebook {

    left: 20px;

    bottom: 20px;

    z-index: 1000;

}



#whatsapp:hover, #facebook:hover {

    transform: scale(1.15);

}



/* ANIMAZIONI */

.animato {

    opacity: 0;

    transition: all 1s ease;

}



.animato.attivo {

    opacity: 1;

    transform: translate(0, 0);

}



.from-left { transform: translateX(-80px); }

.from-right { transform: translateX(80px); }

.from-top { transform: translateY(-80px); }

.from-bottom { transform: translateY(80px); }



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

   RESPONSIVE – MOBILE & TABLET

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



@media (max-width: 900px) {



    /* LISTA VINI: da affiancato a colonna */

    .lista-vini {

        padding: 50px 6%;

    }



    .vino,

    .vino.dx {

        flex-direction: column;

        gap: 20px;

        text-align: center;

        margin-bottom: 50px;

    }



    .vino img {

        width: 100%;

        max-width: 280px;

        margin: 0 auto;

    }



    .vino .info {

        max-width: 100%;

    }



    /* FILTRI */

    .filtri input,

    .filtri select,

    .filtri button {

        width: 90%;

        max-width: 340px;

        display: block;

        margin: 8px auto;

    }



    /* HERO piccolo */

    .hero.piccolo {

        height: 28vh;

    }



    /* FOOTER MAPPA */

    .footer-mappa iframe {

        height: 220px;

    }

}