:root{


  --mattone:#a87344;


  --mattone-dark:#7d5533;


  --cream:#fffdf7;


  --olive:#afc182; /* tuo verde brand */


}





/* ================== BASE SEZIONE ================== */


.int-v2{


  position:relative; isolation:isolate;


  color:var(--cream);


  background:


    radial-gradient(1200px 800px at 14% 12%, rgba(255,255,255,.08), transparent 60%),


    radial-gradient(900px 600px at 86% 84%, rgba(0,0,0,.18), transparent 60%),


    linear-gradient(180deg, var(--mattone) 0%, var(--mattone-dark) 100%);


  /* IMPORTANT: visibile per far “uscire” l’onda e coprire il bordo */


  overflow:visible;


  margin:0;


}





.intv2-bg{ position:absolute; inset:0; z-index:0; }


.intv2-noise{


  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.12;


  background-image:


    repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 2px),


    repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 1px, transparent 1px 2px);


  mix-blend-mode:multiply;


}





/* dots + curve */


.intv2-dots{


  position:absolute; inset:0; z-index:1; pointer-events:none;


  opacity:.22; mix-blend-mode:soft-light;


}


.intv2-curve{


  position:absolute; left:-5%; top:10%; width:110%; height:auto; z-index:1; pointer-events:none;


}


.intv2-curve path{


  fill:none; stroke:rgba(255,255,255,.28); stroke-width:5.5; stroke-linecap:round; stroke-linejoin:round;


  stroke-dasharray:900; stroke-dashoffset:900;


  filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));


  transition:stroke-dashoffset 1.2s ease .1s;


}





/* contenuto */


.intv2-inner{


  position:relative; z-index:2;


  padding: clamp(80px, 10vw, 150px) 6vw;


  min-height:min(66svh, 820px);


  display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.1rem;


}





.intv2-claim{


  font-family: var(--font-title, "Playfair Display", Georgia, serif);


  font-weight:700; letter-spacing:.2px; line-height:1.15; margin:0;


  max-width:1100px;


}


.intv2-claim .txt{


  display:inline-block;


  font-size:clamp(1.6rem, 4.4vw, 3rem);


  text-shadow:0 2px 10px rgba(0,0,0,.35);


}


.nowrap{ white-space:nowrap; }





/* chip evidenziate */


.chip{


  position:relative; display:inline-block; padding:0 .18em; border-radius:.18em;


  --pill: rgba(175,193,130,.34);


  background:linear-gradient(to top, var(--pill) 0 62%, rgba(175,193,130,0) 62%) no-repeat;


  background-size:0% 100%;


  background-position:0 100%;


  transition:background-size .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms);


}


.chip .chip-label{ position:relative; z-index:2; }


.chip-scribble{


  position:absolute; left:-.2em; right:-.2em; bottom:-.1em; height:1.2em; z-index:1; opacity:.55;


}


.chip-scribble path{


  fill:none; stroke:rgba(255,255,255,.7); stroke-width:6.5;


  stroke-linecap:round; stroke-linejoin:round;


  stroke-dasharray:220; stroke-dashoffset:220;


  filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));


  transition:stroke-dashoffset 900ms ease var(--d,0ms);


}





/* sub */


.intv2-sub{


  max-width:820px; margin:.25rem 0 0;


  font-size:clamp(1.05rem, 2.2vw, 1.25rem);


  opacity:.96; font-weight:500; letter-spacing:.15px;


}





/* reveal laterali */


.io-left{ opacity:0; transform:translateX(-22px); will-change:transform,opacity; }


.io-right{ opacity:0; transform:translateX(22px);  will-change:transform,opacity; }


.io-left.in, .io-right.in{ opacity:1; transform:translateX(0); transition:opacity .75s ease, transform .75s ease; }





/* preferenze utente */


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


  .io-left, .io-right { opacity:1; transform:none; }


  .intv2-curve path, .chip-scribble path { transition:none; stroke-dashoffset:0; }


  .chip{ background-size:100% 100%; }


}





/* ================== ONDA “ATTACCATA” (interna) ================== */


.wave-bottom{


  position:absolute; left:0; right:0; bottom:-1px; /* -1px anti-aliasing */


  line-height:0; font-size:0; z-index:3;          /* sopra allo sfondo */


}


.wave-bottom .chi-wave{


  display:block; width:100%; height:100px; vertical-align:bottom;


}


.wave-bottom .wave-path{ fill:#35392a; } /* colore della sezione successiva */





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


@media (max-width: 768px){


  .intv2-inner{ padding: clamp(56px, 9vw, 72px) 5vw clamp(60px, 8vw, 72px); min-height:54svh; gap:.85rem; }


  .intv2-claim{ line-height:1.12; }


  .intv2-claim .txt{ font-size: clamp(1.25rem, 5.2vw, 1.85rem); }


  .intv2-sub{ margin-top:.1rem; font-size:clamp(0.98rem, 3.2vw, 1.1rem); }


  .chip{ background:linear-gradient(to top, var(--pill) 0 56%, rgba(175,193,130,0) 56%) no-repeat; }


  .chip-scribble path{ stroke-width:5.5; }


}


@media (max-width: 480px){


  .intv2-inner{ padding-top:48px; padding-bottom:56px; min-height:50svh; gap:.7rem; }


  .intv2-claim .txt{ font-size:clamp(1.15rem, 5.4vw, 1.7rem); }


}


@media (max-width: 360px){


  .intv2-inner{ padding-top:44px; padding-bottom:50px; min-height:46svh; }


}





/* ================== COLLA TRA SEZIONI ================== */


.int-v2{ margin-bottom:0; }


section.int-v2 + section{ margin-top:0; } /* nessun gradino tra le due */





/* ========== (OPZIONALE) VARIANTE ESTERNA ALLA SEZIONE ========== */


/* Se preferisci tenere l’onda come DIV separato subito dopo .int-v2,


   usa .wave-separator3 e rimuovi/ignora .wave-bottom nell’HTML. */


.wave-separator3{


  position:relative; width:100%; margin:0; padding:0; line-height:0; font-size:0;


  margin-bottom:-1px; /* chiude la micro-fenditura */


}


.wave-separator3 .chi-wave{ display:block; width:100%; height:100px; vertical-align:bottom; }


.wave-separator3 .wave-path{ fill:#35392a; } /* colore della sezione successiva */