/* ================================================
   GLOBAL.CSS — White Oak Vineyards
   CSS unico per tutte le pagine del sito
================================================ */

/* ========================
   VARIABILI
======================== */
:root {
    --wov-primary: #E5DDD3;
    --wov-secondary: #5E2E35;
    --wov-third: white;
    --wov-fourth: rgb(57, 90, 57);
    --wov-dark: #171717;
    --wov-bg: #030303;
}

/* ========================
   RESET
======================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ========================
   FONT
======================== */

@font-face {
    font-family: 'Bodoni 72 Oldstyle';
    src: url('../fonts/BodoniSvtyTwoOSITCTT-BookIt.woff2') format('woff2'),
         url('../fonts/BodoniSvtyTwoOSITCTT-BookIt.woff') format('woff'),
         url('../fonts/BodoniSvtyTwoOSITCTT-BookIt.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Bodoni 72 Oldstyle';
    src: url('../fonts/BodoniSvtyTwoOSITCTT-Bold.woff2') format('woff2'),
         url('../fonts/BodoniSvtyTwoOSITCTT-Bold.woff') format('woff'),
         url('../fonts/BodoniSvtyTwoOSITCTT-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bodoni 72 Oldstyle';
    src: url('../fonts/BodoniSvtyTwoOSITCTT-Book.woff2') format('woff2'),
         url('../fonts/BodoniSvtyTwoOSITCTT-Book.woff') format('woff'),
         url('../fonts/BodoniSvtyTwoOSITCTT-Book.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Underwood1913';
    src: url('../fonts/Underwood1913Normal.woff2') format('woff2'),
         url('../fonts/Underwood1913Normal.woff') format('woff'),
         url('../fonts/Underwood1913Normal.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Courier New';
    src: url('../fonts/CourierNewPS-BoldMT.woff2') format('woff2'),
         url('../fonts/CourierNewPS-BoldMT.woff') format('woff'),
         url('../fonts/CourierNewPS-BoldMT.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Courier New';
    src: url('../fonts/CourierNewPSMT.woff2') format('woff2'),
         url('../fonts/CourierNewPSMT.woff') format('woff'),
         url('../fonts/CourierNewPSMT.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.courier{
    font-family: 'Courier New';
    line-height: 1;
}

.bodoni-book {
    font-family: 'Bodoni 72 Oldstyle Book';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
}
.underwood{
    font-family: 'Underwood1913';
    font-weight: normal;
    font-style: normal;  
    line-height: 1;
}
.img-bw {
  filter: grayscale(100%);
  transition: filter 0.8s ease;
}

.img-bw:hover {
  filter: grayscale(0%);
}
.img-bw-background::after {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: grayscale(100%);
  transition: backdrop-filter 0.4s ease;
  pointer-events: none;
}

.img-bw-background:hover::after {
  backdrop-filter: grayscale(0%);
}

a.link-footer{
    color: var(--wov-primary);
}
a.link-footer:hover{
    opacity: 0.7;
}

/* ========================
   BODY
======================== */
body {
    font-family: 'Courier New' !important;
    font-weight: normal !important;
    font-style: normal;
    margin: 0;
    height: auto;
    z-index: 2;
    background-color: #030303;
    color: var(--wov-primary);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ========================
   PAGE TRANSITION
======================== */
/*#pageTransition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #030303;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

#pageTransition.show {
    opacity: 1;
    pointer-events: all;
}*/

/* ========================
   PARALLAX
======================== */
.parallax {
    will-change: transform;
    backface-visibility: hidden;
}

/* ========================
   ANIMAZIONI SLIDE IMMAGINI
======================== */
.slide-sinistra {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.slide-destra {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.slide-sinistra.visible,
.slide-destra.visible {
    opacity: 1;
    transform: translateX(0);
}

/* ========================
   NAVBAR (HEADER)
======================== */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3% 4% 0;
    z-index: 20;
}

.navbar-left { 
    flex: 1; 
}

.navbar-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

.navbar-center img {
    width: 80px;
    height: auto;
}

.navbar-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.hamburger {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}
.hamburger .svg-light{
    stroke: var(--wov-primary);
}

.hamburger .svg-dark{
    stroke: var(--wov-dark);
}

.image-container {
    width: 100%;
    height: auto;
    background-color: transparent;
    transition: background-color 0.4s ease;
    max-height: 270px;
}

.container-header {
    display: flex;
    justify-content: space-between;
    padding: 1%;
}

.container-logo {
    flex: 4;
    display: flex;
    justify-content: center;
    padding: 2%;
}

.container-menu-header {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container-fake {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo {
    width: 100%;
    height: auto;
    max-width: 130px;
}

/* Navbar Home (specifica) */
.container-navbar {
    flex: 4;
    justify-content: center;
    padding: 2.5%;
}

.container-navbar nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
}

.container-navbar li {
    font-size: 1.2rem;
    list-style-type: none;
    padding: 10px;
    transition: 0.2s;
    border-bottom: solid transparent 1px;
}

.container-navbar a {
    text-decoration: none;
    color: var(--wov-primary);
    padding: 0 5px 5px 5px;
}

.container-navbar li:hover {
    transition: 0.2s ease-in-out;
    border-bottom: solid white 1px;
}

/* ========================
   MENU OVERLAY
======================== */
.menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background-color: #1D1D1D;
    z-index: 999;
    flex-direction: column;
    overflow-y: auto;
}

.menu-overlay.aperto {
    display: flex;
}

.menu-header {
    display: flex;
    justify-content: right;
    align-items: center;
    padding: 4% 5%;
}

.menu-header .circle:hover {
    cursor: pointer;
}

.menu-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    padding: 0 5%;
}

.menu-lista ul {
    list-style: none;
}

.menu-lista li {
    line-height: 1.2;
}

.menu-lista ul li a {
    font-size: clamp(1.8rem, 5vw, 3.5rem);
    letter-spacing: 4px;
    color: var(--wov-primary);
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 400;
}
.menu-lista.footer-custom ul li a {
    font-size: 20px;
}
.menu-lista ul li a:hover {
    text-decoration: underline;
}

.menu-logo img {
    height: auto;
}

.menu-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 40px 5%;
}

.menu-footer-left {
    display: flex;
    align-items: center;
    color: var(--wov-primary);
    font-size: 11px;
    letter-spacing: 2px;
    width: 20%;
}

.menu-footer-left .social-menu {
    display: flex;
    gap: 10px;
}

.menu-footer-left .social-menu .facebook,
.menu-footer-left .social-menu .instagram {
    color: var(--wov-primary);
    font-size: 20px;
    cursor: pointer;
}

.menu-footer-right {
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--wov-primary);
    text-align: right;
    line-height: 1.2;
}

/* ========================
   HERO - HOME
======================== */
.container {
    padding-top: 5%;
    background-color: #030303;
    background-image: linear-gradient(rgba(0,0,0,0.83), rgba(0,0,0,0.83)), url(https://whiteoakvineyards.com/wp-content/uploads/2025/12/header-home.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    margin-top: -270px;
}

.container h2 {
    color: var(--wov-primary);
    text-align: center;
}

.container h3 {
    font-size: 300%;
}

.inner-content {
    background-color: #030303;
    margin-top: 0px;
    padding: 80px 10%;
    gap: 80px;
    display: flex;
    flex-direction: column;
}

.content-header-img {
    display: flex;
    justify-content: center;
    align-content: center;
    margin-bottom: 5%;
}
.titolo-hero-home {
    font-size: 300%;
    text-transform: uppercase;
    color: var(--wov-primary);
}
.titolo {
    font-size: 300%;
    color: var(--wov-primary);
}

/* Home specifica */
.innert-content-header-home {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* ========================
   SCROLL INDICATOR
======================== */
.scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2%;
    gap: 8px;
}

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px dotted white;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wov-primary);
    font-size: 11px;
    letter-spacing: 2px;
    z-index: 2;
    position: relative;
}

/* Bordo puntinato custom (Home) */
.circle::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, white 1px, transparent 1px);
    background-size: 8px 8px;
    -webkit-mask: radial-gradient(circle, transparent 48px, black 49px);
    mask: radial-gradient(circle, transparent 48px, black 49px);
}

.circle-punto {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 1px dotted white;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wov-primary);
    font-size: 11px;
    letter-spacing: 2px;
    z-index: 2;
    position: relative;
}

.circle-plus {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 1px dotted var(--wov-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.circle-plus svg{
    width: 30px; 
    height: 30px;
}

.plus-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.line-top {
    margin-bottom: -25px;
    animation-name: sorvolo-top;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}

.line-bottom {
    margin-top: -25px;
    animation-name: sorvolo-bottom;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}

.line-top, .line-bottom {
    width: 1px;
    height: 40px;
    border-left: 1px dotted white;
    z-index: 1;
}

.circle p {
    animation-name: opacity;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes sorvolo-top {
    from { transform: translateY(0px); }
    to   { transform: translateY(-8px); }
}

@keyframes sorvolo-bottom {
    from { transform: translateY(0px); }
    to   { transform: translateY(8px); }
}

@keyframes opacity {
    from { opacity: 1; }
    to   { opacity: 0.5; }
}

/* ========================
   VIDEO LUPO (HOME)
======================== */
.container-lupo-home {
    width: 100%;
    height: 80vh;
    margin-top: -10vh;
    clip-path: polygon(58% 17%, 84% 8%, 100% 19%, 100% 100%, 0 100%, 0 24%, 41% 11%);
}

.container-lupo-home video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ========================
   SEZIONI INNER HOME
======================== */
.container-title {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 50px 0;
    gap: 50px;
}

.container-title-espressioni {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 100px;
}

.title h3.home{
    font-size: 60px;
    color: var(--wov-secondary); 
    justify-content: right; 
    display: flex;
    line-height: 1;
}

.title p.home-desc{
    color: var(--wov-primary);
    letter-spacing: 5px;
}

.title .abruzzo {
    font-size: 200% !important;
}

.title .abruzzo-desc {
    font-size: 100% !important;
}

.title-espressioni {
    margin-right: 50px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.title-espressioni .text-title-desc{
    display: flex;
    flex-direction: column;
}
.enotopia-container {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    position: relative;
    height: 90vh;
    background-image: url("https://whiteoakvineyards.com/wp-content/uploads/2026/04/enotopia-home-1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    object-fit: contain;
}

.container-didascalia {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    z-index: 3;
    gap: 20px;
    background-color: #030303;
    padding: 40px 160px;
    width: 70%;
}

.container-didascalia h3{
    color: var(--wov-secondary);
}
.container-didascalia p{
    color: var(--wov-primary);
}

.materia-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    height: 90vh;
    background-image: url("https://whiteoakvineyards.com/wp-content/uploads/2026/04/materia-home.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    object-fit: contain;
}

.container-didascalia-2 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    z-index: 3;
    gap: 20px;
    background-color: #030303;
    padding: 40px 0px 40px 350px;
    width: 70%;
}

.container-didascalia-2 .testo h3{
    color: var(--wov-secondary);
    font-size: 300%;
}

.testo p{
    color: var(--wov-primary);
}

.origini-container {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    position: relative;
    height: 90vh;
    background-image: url("https://whiteoakvineyards.com/wp-content/uploads/2026/04/origini-home.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    object-fit: contain;
}

.container-didascalia-3 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    z-index: 3;
    gap: 20px;
    background-color: #030303;
    padding: 40px 160px;
    width: 70%;
}

.container-didascalia-3 h3{
    color: var(--wov-secondary);
}

.espressioni-container {
    display: block;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 685px;
    background-color: #030303;
}

.vini {
    width: 100%;
    background-color: var(--wov-bg);
}

.equilibrio-padding{
    padding: 0 5%;
}

.equilibrio-container{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    height: 90vh;
    background-image: url("https://whiteoakvineyards.com/wp-content/uploads/2026/04/img-footer-espressioni.png");
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 5%;
    width: 100%;
    object-fit: contain;
}

.container-didascalia-4 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    z-index: 3;
    gap: 20px;
    background-color: #030303;
    padding: 40px 0px 40px 350px;
    width: 70%;
}

.container-didascalia-4 .testo h3{
    color: var(--wov-secondary);
    font-size: 300%;
}

/* ========================
   FOOTER
======================== */
.container-footer {
    display: flex;
    justify-content: space-between;
    padding: 1%;
    padding-top: 5%;
    padding-bottom: 5%;
    background-color: var(--wov-bg);
}

.column-1 {
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    border-right: solid #5E2E35 1px;
}

.column-2 {
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.container-column {
    padding: 5%;
}

.container-column a {
    color: var(--wov-primary);
    list-style-type: none;
    text-decoration: none;
}

.container-column p {
    margin-top: 40px;
    color: var(--wov-primary);
}

.container-column-2 {
    padding: 5%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

.container-column-2 p {
    color: var(--wov-primary);
    height: auto;
    width: 100%;
}

.div1 {
    grid-area: 1 / 1 / 2 / 5;
    padding: 2%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.div2 {
    grid-area: 2 / 1 / 4 / 3;
    padding: 2%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}

.div3 {
    grid-area: 2 / 3 / 4 / 5;
    padding: 2%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
}

.social {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}

.social a {
    width: 20%;
}

.facebook, .instagram {
    font-size: 24px;
    cursor: pointer;
    margin-right: 15px;
    width: 100%;
}

.facebook:hover, .instagram:hover {
    opacity: 0.7;
}

/* ========================
   HERO GENERICO (pagine interne)
======================== */
.hero-shape {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background-color: #030303;
    clip-path: polygon(0 60%, 20% 20%, 38% 55%, 50% 0%, 62% 55%, 80% 20%, 100% 60%, 100% 100%, 0 100%);
    z-index: 3;
}

/* ========================
   HERO ABRUZZO
======================== */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    background-image: url('https://whiteoakvineyards.com/wp-content/uploads/2026/04/immagine-hero-abruzzo.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 0px;
    z-index: -1;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.hero-subtitle {
    font-size: 50px;
    color: var(--wov-primary);
    margin-bottom: -8px;
}

.hero-title {
    font-size: 16px;
    font-weight: 400;
    color: var(--wov-primary);
    line-height: 1;
}

.hero-shape-abruzzo {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background-color: #030303;
    clip-path: polygon(0 60%, 20% 20%, 38% 55%, 50% 0%, 62% 55%, 80% 20%, 100% 60%, 100% 100%, 0 100%);
    z-index: 3;
}

/* ========================
   ABRUZZO — SEZIONI
======================== */
.intro-section {
    background-color: #030303;
    padding: 20px 10%;
    text-align: center;
}

.intro-section p {
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    line-height: 1.7;
    color: var(--wov-primary);
    font-style: italic;
    max-width: 1000px;
    margin: 0 auto;
}

.images-section-1 {
    background-color: #030303;
    padding: 40px 5% 20px;
    position: relative;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-overlap-container {
    width: 100%;
    height: auto;
}

.img-main-1 {
    width: 100%;
    height: 40vh;
    object-fit: cover;
    z-index: 2;
}

.img-secondary-1 {
    width: 100%;
    height: 40vh;
    object-fit: cover;
    z-index: 1;
}

.caption {
    background-color: #030303;
    padding: 20px 10%;
    text-align: center;
    width: 100%;
}

.caption p {
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    letter-spacing: 2px;
    color: var(--wov-primary);
    font-style: italic;
    line-height: 1.8;
    padding: 0 0 10%;
}

.images-section-2 {
    background-color: #030303;
    padding: 0 5%;
    position: relative;
    height: 40vh;
}

.img-overlap-container-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40vh;
    flex-direction: row;
}

.img-main-2 {
    width: 45%;
    height: 40vh;
    object-fit: cover;
    z-index: 1;
}

.img-secondary-2 {
    width: 45%;
    height: 40vh;
    object-fit: cover;
    z-index: 2;
    filter: grayscale(100%);
}

.mappa-italia-section {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

.mappa-italia {
    width: 100%;
    max-width: 1440px;
    height: auto;
}

.punto-abruzzo {
    position: absolute;
    top: 56%;
    left: 56%;
}

.map-svg {
    width: 280px;
    height: auto;
}

.map-svg path {
    fill: none;
    stroke: rgba(255,255,255,0.3);
    stroke-width: 1;
}

.map-svg .abruzzo-dot {
    fill: #5E2E35;
}

.origini-section {    
    max-width: 1920px;
    background-color: #030303;
    display: flex;
    align-items: center;
    position: relative;
}

.origini-left {
    flex: 1;
    z-index: 2;
    text-align: center;
    gap: 30px;
}

.origini-right {
    
}
.origini-title {
    font-size: 80px;
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--wov-secondary);
    line-height: 1;
}

.origini-desc {
    font-size: 30px;
    letter-spacing: 1px;
    color: var(--wov-primary);
    line-height: 1.8;
    width: 100%;
}

.relative-map{
    position: relative;
}

.mappa-abruzzo-svg {
    width: 100%;
    height: auto;
}
.puntino-2{
    position: absolute;
    top: 18%;
    right: 48%;
} 
.puntino-3{
    position: absolute;
    top: 40%;
    right: 46%;
}
.puntino-2 p,
.puntino-3 p {
    font-size: 16px;
    line-height: 1;
    letter-spacing: 1px;
    color: var(--wov-primary);
    white-space: nowrap;
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.plus-indicator-mappa-abruzzo-2 {    
    position: absolute;
    top: 70%;
    left: -50%;
}

.puntino-2 .punto-2 {
}

.plus-indicator-mappa-abruzzo-3 {
    position: absolute;
    top: 70%;
    right: -48%;
}

.puntino-3 .punto-3 {
}

/* Onde - Abruzzo */
.onde-abruzzo {
    height: 200px;
    width: 40%;
    position: absolute;
    left: 60%;
    top: 0;
}

.onde-abruzzo .onda1 { position: absolute; top: 20%; }
.onde-abruzzo .onda2 { position: absolute; top: 5%; left: 40%; }
.onde-abruzzo .onda3 { position: absolute; top: 45%; left: 30%; }
.onde-abruzzo .onda4 { position: absolute; top: 45%; left: 80%; }
.onde-abruzzo .onda5 { position: absolute; top: 90%; left: 60%; }

/* ========================
   ENOTOPIA
======================== */
.hero-enotopia {
    position: relative;
    width: 100%;
    height: 100vh;
    background-image: url('https://whiteoakvineyards.com/wp-content/uploads/2026/03/Immagine-trattore-enotopia.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: -20px;
    z-index: -1;
}

.hero-enotopia::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 70%, rgba(0,0,0,0.85) 100%);
    z-index: 1;
}

.hero-content-enotopia {
    position: relative;
    z-index: 2;
    padding: 0 5% 12%;
    width: 100%;
    text-align: center;
    margin-top: 200px;
}

.hero-subtitle-enotopia {
    font-size: 50px;
    letter-spacing: 4px;
    color: var(--wov-primary);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.hero-title-enotopia {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--wov-primary);
    line-height: 1;
    width: 100%;
}

.hero-shape-enotopia {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background-color: #030303;
    clip-path: polygon(0 60%, 20% 20%, 38% 55%, 50% 0%, 62% 55%, 80% 20%, 100% 60%, 100% 100%, 0 100%);
    z-index: 3;
}

.intro-enotopia {
    background-color: #030303;
    padding: 80px 10%;
    text-align: center;
}

.intro-title-enotopia {
    font-size: 70px;
    font-weight: 400;
    color: var(--wov-primary);
    margin-bottom: 25px;
    letter-spacing: 2px;
}

.intro-text-enotopia {
    font-size: 20px;
    line-height: 1;
    color: var(--wov-primary);
    max-width: 900px;
    margin: 0 auto;
    letter-spacing: 1px;
}

.images-enotopia {
    background-color: #030303;
    padding: 20px 5% 0;
    height: 700px;
}

.img-overlap-enotopia {
    width: 100%;
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-main-enotopia {
    width: 40%;
    height: 80vh;
    object-fit: cover;
    z-index: 1;
}

.img-secondary-enotopia {
    width: 40%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    margin-top: 100px;
}

.caption-enotopia {
    background-color: #030303;
    padding: 10%;
    text-align: center;
}

.caption-enotopia p {
    font-size: 20px;
    letter-spacing: 1px;
    color: var(--wov-primary);
    font-style: italic;
    line-height: 1;
}

.citazione-section {
    width: 100%;
    position: relative;
}

.citazione-img-wrapper {
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.citazione-img {
    width: 80%;
    height: 100%;
}

.img-gustav {
}

.citazione-testo {
    position: absolute;
    top: 20%;
    right: 4%;
}

.citazione-quote {
    font-size: 25px;
    color: var(--wov-secondary);
    line-height: 1;
    letter-spacing: 1px;
    font-style: italic;
}

.testo-centrale-enotopia {
    background-color: #030303;
    padding: 70px 15%;
    text-align: center;
}

.testo-centrale-enotopia p {
    font-size: 19px;
    line-height: 1;
    color: var(--wov-primary);
    letter-spacing: 1px;
    max-width: 1000px;
    margin: 0 auto;
}

/* ========================
   MATERIA
======================== */
.hero-materia {
    position: relative;
    width: 100%;
    height: 100vh;
    background-image: url('https://whiteoakvineyards.com/wp-content/uploads/2026/03/Immagine-vigneto-enotopia.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: -20px;
    z-index: -1;
}

.hero-materia::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.85) 100%);
    z-index: 1;
}

.hero-content-materia {
    position: relative;
    z-index: 2;
    padding: 0 5% 12%;
    width: 100%;
    margin-top: 10%;
    text-align: center;
}

.hero-subtitle-materia {
    font-size: 50px;
    letter-spacing: 4px;
    color: var(--wov-primary);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.hero-title-materia {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--wov-primary);
    line-height: 1;
}

.hero-shape-materia {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background-color: #030303;
    clip-path: polygon(0 60%, 20% 20%, 38% 55%, 50% 0%, 62% 55%, 80% 20%, 100% 60%, 100% 100%, 0 100%);
    z-index: 3;
}

.uva{
    clip-path: polygon(0 0, 100% 0, 100% 75%, 31% 75%, 31% 100%, 0 100%);
    width: 80%;
    margin-left: 100px;
}

.img-col-materia-uva {
    display: flex;
    flex-direction: column;
}

.intro-materia {
    background-color: #030303;
    padding: 20px 10%;
    text-align: center;
}

.intro-text-materia {
    font-size: 20px;
    line-height: 1;
    color: var(--wov-primary);
    letter-spacing: 1px;
    font-style: italic;
    opacity: 0.5;
}

.img-larga-materia {
    background-color: #030303;
    padding: 0 5%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-grande-materia {
    width: 70%;
    height: 500px;
    object-fit: cover;
    display: block;
    clip-path: polygon(0 0, 100% 0, 100% 84%, 20% 84%, 20% 100%, 0 100%);
}

.due-immagini-materia {
    background-color: #030303;
    display: flex;
    gap: 40px;
    padding: 0 5%;
    margin-bottom: 80px;
    align-items: flex-start;
}

.img-col-materia {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.img-doppia {
    width: 100%;
    height: 600px;
    object-fit: cover;
    margin-bottom: 15px;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 80%, 50% 100%, 0 100%);
}

.caption-doppia {
    font-size: 20px;
    letter-spacing: 1px;
    color: var(--wov-primary);
    opacity: 0.5;
    line-height: 1;
    padding: 10px 5px 0;
    margin-top: -120px;
    margin-right: 10px;
    position: relative;
    z-index: 2;
    width: 45%;
    align-self: flex-end;
}

.caption-doppia-materia-h2{
    font-size: 50px;
    letter-spacing: 1px;
    color: var(--wov-secondary);
    line-height: 1;
    padding: 10px 5px 0;
    margin-top: -120px;
    margin-right: 200px;
    position: relative;
    z-index: 2;
    width: 45%;
    align-self: flex-end;
}

.testo-titolo-materia {
    background-color: #030303;
    display: flex;
    align-items: center;
    padding: 60px 5%;
    gap: 60px;
    min-height: 300px;
    margin-left: 10%;
    margin-top: 10%;
}

.wine-crafting-section {
    margin-top: 20px;
    margin-bottom: 10%;
}

.testo-col-materia {
    flex: 1.1;
    position: relative;
    max-height: 250px;       
    overflow: hidden;
}

.testo-lungo-materia {
    font-size: 18px;
    line-height: 1.5;
    color: var(--wov-primary);
    letter-spacing: 1px;
    max-width: 500px;
    text-align: end;
}

.titolo-col-materia {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.linea-verticale {
    width: 2px;
    height: 250px;
    background-color: rgba(255,255,255,0.3);
    flex-shrink: 0;
    margin-right: 0;
    position: relative;
}

.linea-verticale-spessa {
    width: 15px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-50%); 
    border-radius: 4px;
    cursor: grab;
    transition: top 0.1s ease-out;
}

.linea-verticale-spessa.rosso { background-color: #5E2E35; }
.linea-verticale-spessa.verde { background-color: #5E6043; }

.titolo-grande-materia {
    font-size: clamp(2rem, 5vw, 4.5rem);
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--wov-fourth);
    line-height: 1.05;
}

.titolo-grande-materia.rosso { color: var(--wov-secondary); }

/* ========================
   ORIGINI
======================== */
.hero-origini {
    position: relative;
    width: 100%;
    height: 100vh;
    background-image: url('https://whiteoakvineyards.com/wp-content/uploads/2026/03/Immagine-hero-origini.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: -20px;
    z-index: -1;
}

.hero-origini::before {
    content: '';
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.85) 100%);
    z-index: 1;
}

.hero-content-origini {
    position: relative;
    z-index: 2;
    padding: 0 5% 12%;
    margin-top: 10%;
}

.hero-subtitle-origini {
    font-size: 50px;
    letter-spacing: 4px;
    color: var(--wov-primary);
    text-transform: uppercase;
    margin-bottom: 6px;
    text-align: center;
}

.hero-title-origini {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--wov-primary);
    line-height: 1.1;    
    text-align: center;
}

.hero-shape-origini {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background-color: #030303;
    clip-path: polygon(0 60%, 20% 20%, 38% 55%, 50% 0%, 62% 55%, 80% 20%, 100% 60%, 100% 100%, 0 100%);
    z-index: 3;
}

.intro-origini {
    background-color: #030303;
    padding: 70px 15%;
    text-align: center;
}

.intro-text-origini {
    font-size: 22px;
    line-height: 1;
    color: var(--wov-primary);
    letter-spacing: 1px;
    margin: 0 auto;
}

.mappa-section {
    background-color: #030303;
    display: flex;
    justify-content: center;
    padding: 20px 10% 60px;
    position: relative;
    z-index: 1;
}

.mappa-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}
/* MAPPA TENUTA (override safe) */
.mappa-wrapper {
    position: relative;
    width: 100%;
}

.mappa-img {
    width: 100%;
    height: auto;
    opacity: 0.7;
    display: block;
    z-index: 0;
    position: relative;
}
/* MAPPA TENUTA (override safe) */
.mappa-img {
    width: 100%;
    opacity: 0.7;
    display: block;
}

/* Onde - Origini */
.onde-origini {
    height: 350px;
    width: 40%;
    position: absolute;
    left: 60%;
    top: 0;
}

.onde-origini .onda1 { position: absolute; top: 20%; }
.onde-origini .onda2 { position: absolute; top: 5%; left: 40%; }
.onde-origini .onda3 { position: absolute; top: 45%; left: 30%; }
.onde-origini .onda4 { position: absolute; top: 35%; left: 80%; }
.onde-origini .onda5 { position: absolute; top: 70%; left: 60%; }

.marker {
    position: absolute;
    display: block;
    align-items: flex-start;
    gap: 6px;
}
/* marker già esiste → aggiungo solo varianti */
.marker {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.marker-gallo { top: 28%; left: 48%; }
.marker-scongiuri { top: 42%; left: 50%; }
/* MAPPA TENUTA (override safe) */
.marker-gallo {
    top: 15%;
    left: 40%;
}

.marker-label {
    font-size: 20px;
    letter-spacing: 1px;
    color: var(--wov-primary);
    white-space: nowrap;
    text-align: center;
    margin-left: -40px;
    margin-bottom: 10px;
}
/* MAPPA TENUTA (override safe) */
.marker-label {
    font-size: 20px;
    line-height: 1;
    color: var(--wov-primary);
    text-align: center;
}

.collage-section {
    background-color: #030303;
    display: flex;
    gap: 0;
    padding: 1% 4%;
    align-items: flex-start;
    z-index: 1;
    position: relative;
}

.collage-col {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.collage-imgs-left {
    position: relative;
    width: 100%;
    margin-left: 20%;
    margin-top: -200px;
    z-index: 1;
}

.collage-img-tl {
    width: 75%;
    height: 70%;
    z-index: 1;
    clip-path: polygon(0 0, 44% 0, 44% 20%, 100% 20%, 100% 100%, 0 100%);
}

.collage-img-bl {
    position: relative;
    margin-left:3%;
    bottom: 10%;    
    width: 70%;
    height: 45%;
    margin-top: -50px;
    z-index: 2;
}

.collage-imgs-right {
    position: relative;
    height: 500px;
    margin-left: -40px;
}

.collage-img-tr {
    position: absolute;
    bottom: 110%;
    right: 10%;
    width: 68%;
    height: 58%;
    z-index: 2;
}

.collage-img-br {
    position: absolute;
    bottom: 1%;
    right: 5%;
    width: 80%;
    height: 130%;
    z-index: 1;
}

.collage-didascalia {
    padding: 20px 5% 0;
    width: 80%;
    margin-left: 15%;
}

.collage-didascalia-2 {
    padding: 20px 5% 0;
    width: 80%;
    margin-left: 5%;
}

.collage-title {
    font-size: 60px;
    font-weight: 400;
    color: white;
    letter-spacing: 2px;
    margin-bottom: 12px;
    line-height: 1;
}

.collage-desc {
    font-size: 20px;
    letter-spacing: 1px;
    color: var(--wov-primary);
    line-height: 1.1;
}

.collage-desc.troncato {
    max-height: 85px;
    overflow: hidden;
    transition: max-height 0.6s ease;
}

.collage-desc.espanso {
    max-height: 500px;
    overflow: hidden;
    transition: max-height 0.6s ease;
}

.show-more-btn {
    background: none;
    border: none;
    color: var(--wov-primary);
    letter-spacing: 1px;
    cursor: pointer;
    padding: 8px 0 0;
    font-family: 'zai Olivetti Lettera 22 Typewriter';
    text-decoration: underline;
}

.testo-centrale-origini {
    background-color: #030303;
    padding: 80px 10%;
    text-align: center;
}

.testo-grande-origini {
    font-size: 40px;
    line-height: 1.1;
    color: var(--wov-fourth);
    font-style: italic;
    letter-spacing: 1px;
}

.img-larga-origini {
    background-color: #030303;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    clip-path: polygon(100% 0, 100% 95%, 86% 88%, 56% 95%, 40% 89%, 0 100%, 0 0);
}
.img-larga{
    width: 100%;
}
.img-grande-origini {
    width: 80%;
    height: 700px;
    display: block;
    clip-path: polygon(0 0, 100% 0, 100% 96%, 83% 90%, 56% 98%, 35% 94%, 0 100%);
}

/* ========================
   hero-equilibrio
======================== */
.hero-equilibrio {
    position: relative;
    width: 100%;
    height: 100vh;
    background-image: url('https://whiteoakvineyards.com/wp-content/uploads/2026/04/img-footer-espressioni.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    overflow: hidden;
    margin-top: -220px;
    z-index: -1;
}

.hero-shape-equilibrio {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background-color: #030303;
    clip-path: polygon(0 60%, 20% 20%, 38% 55%, 50% 0%, 62% 55%, 80% 20%, 100% 60%, 100% 100%, 0 100%);
    z-index: 3;
}

/* ========================
   ESPRESSIONI
======================== */
.hero-espressioni {
    position: relative;
    width: 100%;
    height: 100vh;
    
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    overflow: hidden;
    margin-top: -220px;
    z-index: -1;
}
.fosso {
    background-image: url('https://whiteoakvineyards.com/wp-content/uploads/2026/04/header-espressioni.jpg');
}
.scongiuri {
    background-image: url('https://whiteoakvineyards.com/wp-content/uploads/2026/04/header-scongiuri.jpg');
}
.hero-shape-espressioni {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background-color: #030303;
    clip-path: polygon(0 60%, 20% 20%, 38% 55%, 50% 0%, 62% 55%, 80% 20%, 100% 60%, 100% 100%, 0 100%);
    z-index: 3;
}

.tenuta-intro-section {
    background-color: #030303;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 60px 6%;
    gap: 20px;
}

.tenuta-intro-left { flex: 2; }

.tenuta-intro-title {
    font-size: 70px;
    font-weight: 400;
    color: var(--wov-primary);
    letter-spacing: 2px;
    line-height: 1.2;
    margin-bottom: 20px;
}

.tenuta-intro-desc {
    font-size: 20px;
    letter-spacing: 1px;
    color: var(--wov-primary);
    line-height: 1;
    max-width: 650px;
}

.tenuta-intro-right {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    padding-top: 10px;
    margin-top: 14%;
}

.tenuta-luogo {
    font-size: 25px;
    letter-spacing: 2px;
    color: var(--wov-primary);
    line-height: 1;
    text-align: left;
}

.bottiglie-section-espressioni {
    background-color: #030303;
    display: flex;
    align-items: flex-end;
    justify-content: left;
    padding: 20px 6% 60px;
    gap: 30px;
    padding-left: 10%;
}

.bottiglia-item {
    object-fit: contain;
    width: auto;
    height: 500px;
    margin-left: 20px;
}

.bottiglia-tall { height: 550px; }
.bottiglia-speciale { height: 500px; }

.bottiglie-scongiuri-2 { padding-top: 0; padding-bottom: 80px; }
.bottiglie-scongiuri-2 .bottiglia-item { height: 500px; }

.due-immagini-section {
    background-color: #030303;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    padding: 0 5% 80px;
}

.immagine-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
}

.immagine-doppia {
    width: 90%;
    height: 550px;
    object-fit: cover;
    margin-bottom: -90px;
    clip-path: polygon(0 0, 100% 0, 100% 78%, 44% 78%, 44% 100%, 0 100%);
}

.immagine-caption {
    font-size: 18px;
    letter-spacing: 1px;
    color: var(--wov-primary);
    line-height: 1;
    padding: 0 5px;
    align-self: flex-end;
    width: 40%;
    height: auto;
    position: relative;
    z-index: 2;
    margin-right: 15%;
}

/* ========================
   TENUTA FOSSO DEL GALLO / TENUTA DEGLI SCONGIURI
======================== */
.tenuta-section {
    background-color: #030303;
    display: flex;
    align-items: flex-start;
    padding: 60px 5%;
    gap: 60px;
}

.tenuta-left {
    flex: 1;
    position: relative;
}

.tenuta-right {
    flex: 1;
    padding-top: 20px;
}

.tenuta-title {
    font-size: 80px;
    font-weight: 400;
    color: var(--wov-primary);
    letter-spacing: 2px;
    line-height: 1.2;
    margin-bottom: 25px;
}

.tenuta-desc {
    font-size: 20px;
    letter-spacing: 1px;
    color: var(--wov-primary);
    line-height: 1;
    max-width: 550px;
}

/* Onde - Tenute */
.onde-tenuta {
    height: 250px;
    width: 50%;
    position: absolute;
    left: 55%;
    top: 0;
}

.onde-tenuta .onda1 { position: absolute; top: 20%; }
.onde-tenuta .onda2 { position: absolute; top: 5%; left: 40%; }
.onde-tenuta .onda3 { position: absolute; top: 45%; left: 30%; }
.onde-tenuta .onda4 { position: absolute; top: 45%; left: 80%; }
.onde-tenuta .onda5 { position: absolute; top: 90%; left: 60%; }

.mappa-wrapper-tenuta {
    position: relative;
    width: 100%;
}

.marker-tenuta {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.marker-label-tenuta {
    font-size: 20px;
    letter-spacing: 1px;
    color: var(--wov-primary);
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
}

.marker-gallo-tenuta { top: 15%; left: 40%; }
.marker-scongiuri-tenuta { top: 35%; left: 42%; }

.img-overlay-section {
    background-color: #030303;
    padding: 10% 5% 0 0;
    margin-bottom: 20px;
}
/* OVERLAY IMAGE */
.img-overlay-section {
    padding-top: 10%;
}

.img-overlay-wrapper {
    position: relative;
    width: 100%;
}
/* OVERLAY IMAGE */
.img-overlay-wrapper {
    position: relative;
}

.img-overlay {
    width: 100%;
    height: 650px;
    object-fit: cover;
    display: block;
    clip-path: polygon(0 0, 44% 0, 44% 20%, 100% 20%, 100% 100%, 0 100%);
}

/* overlay testo - posizione diversa per le due tenute */
.overlay-text-box-gallo {
    position: absolute;
    top: 10%;
    right: 15%;
    transform: translateY(-50%);
    text-align: center;
}

.overlay-text-box-scongiuri {
    position: absolute;
    top: 10%;
    right: 3%;
    transform: translateY(-50%);
    text-align: center;
}

.overlay-text {
    font-size: 30px;
    letter-spacing: 3px;
    color: var(--wov-primary);
    line-height: 1;
    text-transform: uppercase;
}
/* OVERLAY IMAGE */
.overlay-text-box {
    position: absolute;
    top: 10%;
    right: 0;
    transform: translateY(-50%);
}

.col-img-piccola {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 700px;
    margin-top: 12%;
}
/* BLOCCO IMG PICCOLA */
.col-img-piccola {
    margin-top: 12%;
    max-width: 700px;
}

.img-piccola-esp {
    width: 100%;
    height: 400px;
    object-fit: cover;
    margin: 10% 0 10% 0;
}
/* BLOCCO IMG PICCOLA */
.img-piccola-esp {
    width: 100%;
    height: 400px;
    object-fit: cover;
    margin: 10% 0;
}

.caption-piccola-esp {
    font-size: 20px;
    letter-spacing: 1px;
    color: var(--wov-primary);
    line-height: 1;
}
/* BLOCCO IMG PICCOLA */
.caption-piccola-esp {
    font-size: 20px;
    color: var(--wov-primary);
}

.col-testo-piccolo {
    flex: 1;
    padding-top: 10px;
}

.testo-piccolo {
    font-size: 20px;
    letter-spacing: 1px;
    color: var(--wov-primary);
    line-height: 1;
}
/* TESTO PICCOLO */
.testo-piccolo {
    font-size: 20px;
    color: var(--wov-primary);
}

/* Bottiglie Fosso del Gallo */
.bottiglie-section-gallo {
    position: relative;
    width: 100%;
    height: 300vh;
    overflow: hidden;
    background-color: #030303;
    margin-bottom: 80px;
}

.bottiglie-bg-wrapper-gallo {
    position: absolute;
    inset: 0;
    z-index: 1;
    left: 10%;
    top: 55%;
}

.bottiglie-bg-gallo {
    width: 90%;
    height: 90%;
    object-fit: cover;
    clip-path: polygon(0 0, 100% 0, 100% 96%, 83% 90%, 56% 98%, 35% 94%, 0 100%);
}

/* Bottiglie Degli Scongiuri */
.bottiglie-section-scongiuri {
    position: relative;
    width: 100%;
    height: 430vh;
    overflow: hidden;
    background-color: #030303;
    margin-bottom: 80px;
}

.bottiglie-bg-wrapper-scongiuri {
    position: absolute;
    inset: 0;
    z-index: 1;
    left: 5%;
    top: 70%;
    height: auto;
}

.bottiglie-bg-scongiuri {
    width: 95%;
    height: auto;
    object-fit: cover;
    clip-path: polygon(0 0, 100% 0, 100% 96%, 83% 90%, 56% 98%, 35% 94%, 0 100%);
}

.bottiglie-container {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0 5% 0;
}

.bottiglia {
    object-fit: contain;
    width: 100%;
}

.bottiglia-sx {  margin-top: 20%; }
.bottiglia-cx-1 { margin-top: 100%;  }
.bottiglia-cx-2 { margin-top: 0; }
.bottiglia-dx { margin-top: 100%; }

/* ========================
   BOTTIGLIE GENERICHE
======================== */
.bottiglie-section {
    position: relative;
    height: 200vh;
    overflow: hidden;
}

.bottiglie-bg-wrapper {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.bottiglie-bg {
    width: 100%;
    height: 50%;
    object-fit: cover;
    clip-path: polygon(0 0, 100% 0, 100% 96%, 83% 90%, 56% 98%, 35% 94%, 0 100%);
}

.scongiuri-section {
    background-color: #030303;
    display: flex;
    align-items: center;
    padding: 0% 10% 80px 15%;
    gap: 0;
    position: relative;
}
/* SCONGIURI BASE */
.scongiuri-section {
    display: flex;
    align-items: center;
    padding: 0 10% 80px 15%;
    position: relative;
}

.scongiuri-left { flex: 1; }

.scongiuri-img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
}
/* SCONGIURI BASE */
.scongiuri-img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}

.scongiuri-divider {
    width: 2px;
    height: 150px;
    background-color: rgba(255,255,255,0.25);
    margin: 0 40px;
    flex-shrink: 0;
}

.scongiuri-right {
    flex: 1;
    margin-left: 10%;
}
/* SCONGIURI BASE */
.scongiuri-right {
    margin-left: 10%;
}

/* Titolo scongiuri - colore diverso nelle due pagine */
.scongiuri-title-gallo {
    font-size: 80px;
    font-weight: 400;
    color: var(--wov-fourth);
    letter-spacing: 2px;
    line-height: 1;
    margin-bottom: 20px;
}

.scongiuri-title-scongiuri {
    font-size: 80px;
    font-weight: 400;
    color: var(--wov-primary);
    letter-spacing: 2px;
    line-height: 1;
    margin-bottom: 20px;
}

/* SCONGIURI BASE */
.scongiuri-title {
    font-size: 80px;
    color: #5E6043;
    margin-bottom: 20px;
}

.scongiuri-desc {
    font-size: 20px;
    letter-spacing: 1px;
    color: var(--wov-primary);
    line-height: 1;
    max-width: 450px;
}

/* ========================
   ONDE DECORATIVE
======================== */
.onde {
    position: absolute;
    left: 55%;
    top: 0;
    width: 50%;
    height: 250px;
}

.onde svg {
    position: absolute;
}

/* ========================
   GLOBAL — Max-width schermi grandi
======================== */
.container.scroll-section,
.container-footer {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

/* Hero e video full-width su schermi grandi */
.container.scroll-section:has(> .innert-content-header-home),
.container.scroll-section:has(> .container-lupo-home) {
    max-width: 100%;
}

/* Enotopia / Materia / Origini / Equilibrio / Espressioni - contenimento */
.enotopia-container,
.materia-container,
.origini-container,
.espressioni-container {
    overflow: hidden !important;
}

/* ========================
   HAMBURGER / NAVBAR DESKTOP
======================== */
button.hamburger-home {
    background-color: transparent;
    border: 0;
}

.hamburger-desktop{
    background-color: transparent;
    border: 0;
}

.hamburger-home svg{
    stroke: var(--wov-primary) !important;
    color: var(--wov-primary);
}

/* ========================
   ESPRESSIONI — FIX colore titolo
======================== */
/* FIX 40: !important necessario per battere inline style */
.espressioni-container h2.underwood {
    color: var(--wov-secondary) !important;
}


/* ================================================
   MEDIA QUERIES
================================================ */

/* ========================
   DESKTOP LARGE (min-width: 1281px)
======================== */
@media (min-width: 1281px) {
    /* FIX 38: Navbar homepage fade-in al hover */
    .container-navbar nav ul li {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease;
    }
    .container-header:hover .container-navbar nav ul li {
        opacity: 1;
        pointer-events: auto;
    }

    /* FIX 39: Hamburger desktop FUORI dall'<ul> */
    .container-navbar {
        position: relative;
    }
    .container-navbar > .hamburger-home.hamburger-desktop {
        display: inline-flex !important;
        position: absolute;
        right: 2.5%;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        padding: 8px;
        cursor: pointer;
        color: var(--wov-primary);
        opacity: 1;
        pointer-events: auto;
        z-index: 5;
    }
    .container-navbar > .hamburger-home.hamburger-desktop svg {
        display: block;
        stroke: var(--wov-primary);
    }
    .container-navbar > .hamburger-home.hamburger-desktop:hover {
        opacity: 0.7;
    }
}

/* ========================
   TABLET/DESKTOP (min-width: 769px)
======================== */
@media (min-width: 769px) {
    /* FIX 21: Altezze fisse -> min-height */
    .materia-container { height: auto; min-height: 750px; }
    .origini-container { height: auto; min-height: 850px; }
    .espressioni-container { height: auto; min-height: 685px; }

    /* FIX 27: Titoli sezioni uniformi 60px */
    .title h2.home,
    .container-didascalia h3,
    .container-didascalia-2 h3,
    .container-didascalia-3 h3,
    .testo h3.underwood,
    .espressioni-container h2.underwood {
        font-size: 60px !important;
        line-height: 1;
    }

    /* FIX 28: Sottotitoli sezioni uniformi */
    .container-didascalia p,
    .container-didascalia-2 p,
    .container-didascalia-3 p {
        font-size: 22px;
        letter-spacing: 5px;
    }
}

/* ========================
   TABLET LANDSCAPE (min-width: 769px) and (max-width: 1024px)
======================== */
@media (min-width: 769px) and (max-width: 1024px) {
    /* FIX 22: Breakpoint tablet landscape */
    .container-navbar nav ul {
        gap: 12px;
    }
    .container-navbar li {
        font-size: 1.1rem;
        padding: 5px;
    }
    .materia-container {
        height: auto;
        min-height: 500px;
    }
    .origini-container {
        height: auto;
        min-height: 550px;
    }
    .espressioni-container {
        height: auto;
        min-height: 450px;
    }
    .container-didascalia-2 {
        left: 5%;
        right: 30%;
    }
    .container-didascalia-3 {
        left: 10%;
        max-width: 500px;
    }
    .container-footer {
        flex-wrap: wrap;
    }
    .column-1 {
        flex-basis: 45%;
    }
    .column-2 {
        flex-basis: 100%;
        border-top: solid #5E2E35 1px;
        padding-top: 30px;
    }
}

/* ========================
   FINO A 1280px (navbar mobile/tablet)
======================== */
@media (max-width: 1280px) {
    /* FIX 12b: Navbar nascosta + hamburger visibile */
    .container-navbar {
        display: none !important;
    }
    .container-menu-header {
        display: flex !important;
        position: fixed;
        top: 15px;
        right: 15px;
        z-index: 999;
    }
    .hamburger-home {
        display: block !important;
    }
    .logged-in .container-menu-header {
        top: 62px;
    }

    /* FIX 13: Hamburger styling */
    .hamburger-home {
        background: none !important;
        border: none !important;
        cursor: pointer;
        padding: 8px;
        outline: none;
        z-index: 1000;
    }
    .img-overlap-container-2{ 
        flex-direction: column;
    }
    .img-main-2{
        width: 100%;
    }
    .img-secondary-2{
        width: 100%;
    }  
    .mappa-italia-section{
        margin-top: -5%;
    }
}

/* ========================
   MOBILE (max-width: 768px)
======================== */
@media (max-width: 768px) {
    .hero, .hero-enotopia, .hero-materia, .hero-origini, .hero-espressioni, .hero-equilibrio {        
        background-attachment: scroll;
        height: 70vh;        
        margin-top: 0;
    }
    /* Header */
    .container-header { padding-top: 8%; margin-bottom: 10%; }
    .logo { max-width: 90px; }
    .menu-header{padding: 0 5%}
    .circle-plus{width: 40px; height: 40px;}
    .circle-plus svg{width: 20px; height: 20px;}

    /* Hero Home */
    .image-container h2 { font-size: 130%; padding: 4%; }
    .container-lupo-home { 
        min-height: auto !important;
        transform: none !important;  
        height: auto !important;
        min-height: 50vh;
        overflow: hidden;
    }

    /* Titoli Home */
    .container-title { 
        flex-direction: row; 
        align-items: center; 
        gap: 20px;
        height: auto !important;
        min-height: auto;
        padding: 20px;
    }
    .title { margin-right: 0; text-align: center; }
    .title h1 { font-size: 180%; }
    .title h3.home{
        justify-content: center;
    }

    /* Enotopia container */
    .enotopia-container {
        height: 45vh;
    }
    .container-didascalia { position: static; flex-direction: row; text-align: center; gap: 15px; padding: 0; }

    /* Materia container */
    .materia-container { 
        height: 45vh;
    }
    .trattore { position: static; width: 100%; clip-path: none; }
    .cassette { position: static; width: 100%; height: 250px; object-fit: cover; }
    .container-didascalia-2 { 
        position: static; 
        flex-direction: row;  
        text-align: center;  
    }
    .uva{
        clip-path: unset;
        width: 100%;
        margin: 0;
    }
    /* Origini container */
    .origini-container { 
        height: 45vh;
    }
    .panorama { position: static; width: 100%; clip-path: none; }
    .container-didascalia-3 { 
        position: static; 
        align-items: center; 
        text-align: center;  
    }
    .origini-container p { position: static; font-size: 15px; text-align: center; padding: 0 5%; }

    /* Espressioni container */
    .espressioni-container { height: auto; position: static; display: flex; flex-direction: column; align-items: center; padding: 5%; margin-top: 40px; }

    /* Menu */
    .menu-nav { flex-direction: column-reverse; height: auto; padding: 5%; align-items: flex-start; justify-content: center;}
    .menu-lista { font-size: 150%; justify-content: flex-start; }
    .menu-lista ul { list-style: none; }
    .menu-logo { justify-content: center; padding-bottom: 5%; }
    .menu-footer { flex-direction: column; gap: 20px; padding: 5%; align-items: flex-start;}
    .menu-footer-right { margin-right: 0; text-align: left; }

    /* Footer */
    .container-footer { flex-direction: column; padding: 8%; gap: 30px; }
    .column-1 { border-right: none; border-bottom: solid #5E2E35 1px; padding-bottom: 30px; width: 100%; justify-content: flex-start; }
    .column-2 { width: 100%; }
    .container-column-2 { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
    .div1 { grid-area: 1 / 1 / 2 / 3; }
    .div2 { grid-area: 2 / 1 / 3 / 2; }
    .div3 { grid-area: 2 / 2 / 3 / 3; }

    /* Abruzzo */
    .origini-section {
        flex-direction: column;
        align-items: center;
        gap: 40px;
        padding: 40px 20px;
    }

    .origini-left,
    .origini-right {
        width: 100%;
    }
    .images-section-1, .images-section-2 { height: auto; min-height: 400px; }
    .origini-title{ font-size: 50px;}
    .origini-desc{ font-size: 20px;}
    .circle-punto { width: 50px; height: 50px;}

    /* Enotopia */
    .hero-title-enotopia { font-size: 1.6rem; }
    .hero-content-enotopia { padding: 0 6% 18%; }
    .intro-enotopia { padding: 50px 6%; }
    .images-enotopia { height: auto; min-height: 400px; position: static; display: flex; flex-direction: column; align-items: center; padding: 5%; gap: 15px; }
    .img-overlap-enotopia { position: static; display: flex; flex-direction: column; gap: 15px; height: auto; }
    .img-main-enotopia, .img-secondary-enotopia { position: static; width: 100%; height: 250px; margin:0; }
    .citazione-img-wrapper { height: auto; }
    .citazione-testo { position: static; transform: none; padding: 20px 10px; text-align: center; }
    .citazione-img{ width: 100%; }
    .testo-centrale-enotopia{
        padding: 30px;
    }

    /* Materia */
    .hero-title-materia { font-size: 1.6rem; }
    .hero-content-materia { padding: 0 6% 18%; }
    .img-grande-materia { height: 250px; }
    .due-immagini-materia { flex-direction: column; gap: 30px; }
    .img-doppia { height: 260px; }
    .testo-titolo-materia { flex-direction: column; gap: 30px; padding: 40px 6%; }
    .titolo-grande-materia { font-size: 2.5rem; }
    .linea-verticale { height: 60px; }
    .caption-doppia{ margin-top: 0; width: 100%}
    .caption-doppia-materia-h2{ margin: 0; width: 100%; font-size: 40px; line-height: 1; }
    .img-larga-materia{ height: auto; }

    /* Origini */
    .hero-title-origini { font-size: 1.5rem; }
    .hero-content-origini { padding: 0 6% 18%; }
    .collage-title{ font-size: 40px;}
    .intro-origini { padding: 50px 6%; }
    .mappa-section { padding: 20px 5% 40px; }
    .collage-section { flex-direction: column; gap: 60px; padding: 0 5%; }
    .collage-imgs-left, .collage-imgs-right { height: auto; margin: 0; width: 100%; position: relative; }
    .collage-img-tl { width: 100%; height: 30vh; clip-path: unset; }
    .collage-img-tr { width: 100%; height: 30vh; position: relative; bottom: 0; right: 0;}
    .collage-img-bl { width: 100%; height: 30vh; margin-left: 0px; bottom: 0; margin-top: 0; }
    .collage-img-br { width: 100%; height: 30vh; margin-left: 0px; bottom: 0; margin-top: 0; position: relative; bottom: 0; right: 0;}
    .testo-grande-origini { font-size: 1rem; }
    .img-grande-origini { height: 280px; }
    .collage-didascalia, .collage-didascalia-2 {width: 100%; margin: 0;}
     
    /* Espressioni */
    .tenuta-intro-title{ font-size: 40px; line-height: 1;}
    .tenuta-intro-section { flex-direction: column; gap: 20px; padding: 40px 6%; }
    .tenuta-intro-right { justify-content: flex-start; }
    .tenuta-luogo { text-align: left; }
    .bottiglie-section-espressioni { flex-wrap: wrap; gap: 5px; padding: 10px 0 40px; }
    .bottiglia-item { height: 220px; }
    .bottiglia-tall { height: 270px; }
    .bottiglia-speciale { height: 250px; }
    .bottiglie-scongiuri-2 .bottiglia-item { height: 200px; }
    .due-immagini-section { flex-direction: column; gap: 50px; padding: 0 5% 50px; }
    .immagine-doppia { height: 260px;  width: 100%;  clip-path: unset; margin: 0 !important;}
    .immagine-caption { width: 100%; align-self: flex-end; margin:0; padding: 10px; }

    /* Tenute */
    .tenuta-section { flex-direction: column; gap: 40px; padding: 40px 6%; }
    .img-overlay-section {  }
    .overlay-text-box { position: static; transform: translateY(0);}   
    .img-overlay { height: 220px; clip-path: unset; }
    .img-piccola-esp { height: 220px; }
    .bottiglie-section { height: auto; margin-bottom: 30px;}
    .bottiglie-bg-wrapper{
        display: none;
    }
/*    .bottiglie-container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    .bottiglie-container > * {
        width: 45%;
    }*/

    .bottiglie-section-gallo, .bottiglie-section-scongiuri { height: 450px; }
    .bottiglia-sx { height: 40%; }
    .bottiglia-cx-1 { height: 45%; }
    .bottiglia-cx-2 { height: 58%; }
    .bottiglia-dx { height: 52%; }
    .scongiuri-section { flex-direction: column; gap: 30px; padding: 0 5% 50px; }
    .scongiuri-divider { width: 60px; height: 2px; margin: 0; }
    .tenuta-title, .scongiuri-title{ font-size: 40px;}
    .scongiuri-right{margin: 0;}
    
    /* Equilibrio */
    .equilibrio-container{ height: 30vh;}
    .container-didascalia-4 {
         padding: 0;
    }

    /* Overflow */
    .overflow-hidden{
        overflow-x: hidden;
    }

    /* Inner content */
    .inner-content {
        overflow: hidden;
        gap: 20px;
        padding: 20px 10%;
    }

    /* Espressioni altezza */
    .espressioni-container {
        height: auto !important;
        min-height: auto;
        padding: 40px 20px;
        overflow: hidden;
    }

    /* Immagini responsive */
    .vitigno,
    .trattore,
    .panorama {
        width: 100% !important;
        height: auto !important;
        max-height: 300px;
        object-fit: cover;
        position: relative !important;
    }
    .espressioni-container .vini {
        width: 100%;
        height: 300px;
        object-fit: cover;
    }
    .container-didascalia,
    .container-didascalia-2,
    .container-didascalia-3 {
        padding: 20px 5%;
    }
    .plus-indicator,
    .plus-btn {
        transform: none !important;
    }

    /* Tipografia */
    .title h1 {
        font-size: clamp(1.8rem, 6vw, 3rem) !important;
    }
    .testo h3 {
        font-size: clamp(1.5rem, 5vw, 2.5rem) !important;
    }
    .testo p {
        font-size: clamp(0.9rem, 3vw, 1.1rem) !important;
    }
    .container-didascalia h3,
    .container-didascalia-2 h3,
    .container-didascalia-3 h3 {
        font-size: clamp(1.2rem, 4vw, 1.8rem) !important;
    }

    /* H2 pagine interne */
    .image-container h2 {
        font-size: clamp(2rem, 8vw, 3.5rem) !important;
        padding: 0 20px;
        text-align: center;
    }

    /* FIX 18: Titoli sezioni uniformi */
    .title h2.home,
    .container-didascalia h3,
    .container-didascalia-2 h3,
    .container-didascalia-3 h3,
    .testo h3.underwood,
    .container-title h2,
    .container-title h3 {
        font-size: clamp(1.8rem, 8vw, 2.5rem) !important;
    }

    /* FIX 19: "Una terra selvaggia" piu' piccola */
    .title h2.home-desc {
        font-size: clamp(1.1rem, 5vw, 1.5rem) !important;
    }

    /* FIX container-fake e container-header */
    .container-fake {
        display: none !important;
    }
    .container-header {
        height: auto !important;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
    }
    .image-container {
        position: relative;
        overflow: visible !important;
    }
    .container.scroll-section {
        margin-top: 0 !important;
    }

    /* FIX CRITICO 2: image-container */
    .image-container {
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }

    /* FIX CRITICO 4: image-container full height solo pagine interne */
    .image-container:has(h2) {
        height: 100vh !important;
        min-height: 100vh !important;
        overflow: hidden !important;
    }

    /* FIX CRITICO 5: navbar pagine interne */
    .navbar-left img{
        max-width: 130px;
        padding: 20px;
    }
    .navbar-center {
        display: none !important;
    }
    .navbar-right {
        pointer-events: auto;
    }
    .hamburger {
        display: flex !important;
        top: 15px !important;
        right: 15px !important;
        z-index: 999 !important;
        pointer-events: auto;
        padding: 8px;
    }

    /* FIX CRITICO 6: pagine interne */
    .img-overlap-container,
    .img-overlap-container-2 {
        height: auto !important;
    }
    .images-section-1,
    .images-section-2 {
        height: auto !important;
        min-height: auto !important;
    }
    .mappa-italia-section {
        min-height: auto !important;
        height: auto !important;
    }


    /* FIX 9: Gap tra video e sezione ABRUZZO */
    .container-lupo-home video {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
    }

    /* FIX 11: Immagini centrate su mobile */
    .vitigno, .trattore, .panorama {
        left: 0 !important;
        right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }

    /* FIX 25: Footer piu' compatto */
    .container-footer {
        padding: 5%;
        gap: 20px;
    }
    .container-column-2 a,
    .footer-custom ul li a,
    .column-2 a {
        font-size: 1.3rem !important;
    }

    /* FIX 31: Sottotitoli sezioni su mobile */
    .container-didascalia p,
    .container-didascalia-2 p,
    .container-didascalia-3 p {
        font-size: 14px !important;
        letter-spacing: 2px;
    }

    /* FIX 32: Spazi sezioni mobile */
    .container-title .title {
        margin-top: 10px;
    }
    
    /* Menu overlay */
    .menu-overlay {
        padding: 20px;
    }
    .menu-lista ul li a {
        font-size: clamp(1.2rem, 5vw, 2rem) !important;
    }
    .menu-logo img {
        max-width: 120px;
    }
    .menu-footer {
        flex-direction: column;
        gap: 15px;
    }

    /* ESPRESSIONI titolo non tagliato */
    .espressioni-container .title-espressioni h2 {
        font-size: 250% !important;
        padding-left: 5%;
    }
    .espressioni-container .container-title {
        padding: 0 5%;
        width: 100%;
    }
    .container-title-espressioni h2 {
        font-size: 250% !important;
    }

    /* STEP 2: Hero homepage */
    .innert-content-header-home {
        height: 70vh;
        overflow: hidden;
    }
    .content-header {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 0 20px;
        text-align: center;
    }
    .titolo-hero-home {
        font-size: clamp(1.5rem, 6vw, 2.5rem) !important;
        text-align: center;
        width: 100%;
        word-break: normal;
        overflow-wrap: break-word;
    }
    .container-logo {
        max-width: 150px;
        margin: 0 auto;
        max-height: 150px;
        height: auto !important;
        overflow: hidden;
    }
    .container-logo img {
        max-width: 100%;
        height: auto;
        max-height: 150px;
        width: auto;
    }
    .scroll-indicator {
        transform: scale(0.7);
    }
     .circle {
        width: 50px;
        height: 50px;
    }

    .plus-wrapper {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .plus-wrapper a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    .ico-plus {
        width: 30px;
        height: 30px;
        transform: none !important;
    }
}

/* ========================
   MOBILE PICCOLO (max-width: 480px)
======================== */
@media (max-width: 480px) {
    .espressioni-container .title-espressioni h2 {
        font-size: 180% !important;
    }
    .container-title-espressioni h2 {
        font-size: 180% !important;
    }

    .titolo-hero-home {
        font-size: clamp(1.2rem, 5.5vw, 2rem) !important;
    }
    .container-logo {
        max-width: 120px;
    }
    .container-lupo-home video {
        height: 40vh;
    }
    .image-container h2 {
        font-size: clamp(1.5rem, 7vw, 2.5rem) !important;
    }
    .vitigno,
    .trattore,
    .panorama {
        max-height: 220px;
    }
}

/* ========================
   MOBILE MOLTO PICCOLO (max-width: 420px)
======================== */

@media (max-width: 420px) {
    .image-container h2 { font-size: 100%; }
    .title h1 { font-size: 140%; }
    .menu-lista ul li a { font-size: 1.4rem; }

    /* Abruzzo */
    .hero-title { font-size: 2rem; }

    /* Enotopia */
    .hero-title-enotopia { font-size: 1.3rem; }
    .intro-title-enotopia { font-size: 1.3rem; }

    /* Materia */
    .hero-title-materia { font-size: 1.3rem; }
    .titolo-grande-materia { font-size: 2rem; }

    /* Origini */
    .hero-title-origini { font-size: 1.2rem; }
    .collage-title { font-size: 1.2rem; }

    /* Tenute */
    .tenuta-title { font-size: 1.4rem; }
    .bottiglie-section {
        height: 50vh;
    }
    .scongiuri-title-gallo, .scongiuri-title-scongiuri { font-size: 1.4rem; }
    .bottiglie-section-gallo, .bottiglie-section-scongiuri { height: 320px; }
    .bottiglia-item { height: 160px; }
    .bottiglia-tall { height: 200px; }
    .immagine-doppia { height: 200px; }

    .innert-content-header-home{ height: 50vh;}
    .container-didascalia{
        margin-top: 50px;
    }
    .container-didascalia-2{
        justify-content: flex-end;
    }
}

/* ========================
   MONITOR GRANDE 1920px+
======================== */
@media (min-width: 1920px) {
    /* FIX 23 */
    .container.scroll-section {
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
    }
    .container-navbar nav ul {
        gap: 40px;
    }
    .container-navbar li {
        font-size: 1.8rem;
    }
    .titolo-hero-home {
        font-size: 4rem;
    }
}

/* ========================
   MONITOR MOLTO GRANDE 1921px+
======================== */
@media (min-width: 1921px) {
    /* FIX 16b: Ridimensiona immagini + posiziona didascalia origini */
    .vitigno, .trattore, .panorama, .vini {
/*        max-width: 1600px;
        display: block;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;*/
    }
    .container-didascalia-3 {
        left: 10%;
        bottom: 3%;
    }

    /* FIX 29: Fix origini container */
    .origini-container {
        min-height: 850px;
    }
}

/* ========================
   MONITOR QHD 2560px+
======================== */
@media (min-width: 2560px) {
    /* FIX 24 */
    .container-header {
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
    }
    .container-navbar nav ul {
        gap: 50px;
    }
    .container-navbar li {
        font-size: 1.8rem;
    }
    .titolo-hero-home {
        font-size: 4.5rem;
    }
    .container-footer {
        padding: 3% 5%;
    }

    /* FIX 30: Altezze + raggruppamento sezioni */
    .innert-content-header-home {
        height: 100vh;
    }
    .container-lupo-home {
        height: 80vh;
    }
    .container-title {
        margin-bottom: 40px;
    }
    .container-title .title {
        margin-top: 30px;
    }
    .enotopia-container {
        margin-top: 120px;
        padding-bottom: 40px;
    }
    .materia-container {
        margin-top: 120px;
        padding-bottom: 40px;
    }
    .origini-container {
        margin-top: 120px;
    }
    .espressioni-container {
        margin-top: 120px;
    }
}