/* ==========================================================================
   Agriturismo dei Grippi — aspetto del sito
   Ricostruito dal sito di prima (Elementor): stessi colori, caratteri, misure.
   Punti di rottura come Elementor: tablet ≤ 1024 px, telefono ≤ 767 px.
   ========================================================================== */

@font-face { font-family: "Lumina"; src: url("../font/lumina.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Didact Gothic"; src: url("../font/didact-gothic-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../font/montserrat-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../font/montserrat-var-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  --verde: #7a9379;
  --verde-piede: #617a5e;
  --verde-notte: #526950;
  --giallo: #e9d986;
  --testo: #1b1b1b;
  --bianco: #fff;
  --titoli: "Lumina", Georgia, serif;
  --corpo: "Didact Gothic", "Helvetica Neue", Arial, sans-serif;
  --etichette: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --lato: 120px;      /* margine laterale delle fasce (20 + 100 del sito di prima) */
  --largo: 1200px;
  --grana: url("../img/noisebg.png");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 170px; }
body {
  margin: 0; background: var(--verde) var(--grana); color: var(--giallo);
  font-family: var(--corpo); font-size: 18px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

/* la grana di carta del sito di prima: sopra il colore, sotto il contenuto */
.grana { position: relative; isolation: isolate; }
.grana::before { content: ""; position: absolute; inset: 0; background: var(--grana); pointer-events: none; z-index: -1; }

.salta { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--giallo); color: var(--verde-notte); padding: 10px 16px; }
.salta:focus { left: 10px; top: 10px; }
.vis-nascosto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--giallo); outline-offset: 3px; }

/* ---------- titoli e testi comuni ---------- */
.tit { font-family: var(--titoli); font-weight: 600; font-size: 50px; line-height: 1; color: var(--giallo); }
.tit--m { font-size: 25px; line-height: 1; }
.testo { font-family: var(--corpo); font-size: 18px; line-height: 27px; }
.testo a { text-decoration: underline; }
.testo strong, .testo b { font-weight: 700; }
.testo ul { list-style: disc; padding-left: 1.2em; margin: 0 0 18px; }
.etichetta { font-family: var(--etichette); font-size: 15px; line-height: 22.5px; letter-spacing: 1.3px; }

/* ---------- bottoni ---------- */
.bottoni { display: grid; grid-template-columns: repeat(2, minmax(0, 240px)); gap: 20px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 12px 24px; border: 1px solid var(--verde); background: var(--giallo); color: var(--verde);
  font: 600 12px/12px var(--etichette); letter-spacing: 1px; text-transform: uppercase; text-align: center;
  transition: transform .3s;
}
.btn:hover { transform: scale(1.1); }
.btn__ico { width: 7px; height: 14px; fill: currentColor; flex: none; }
.btn--verde { background: var(--verde); color: var(--giallo); border-color: var(--verde); }
.btn--link {
  width: auto; padding: 10px 0 2px; border: 0; border-bottom: 1px solid currentColor; background: none; color: var(--giallo);
  font: 500 11px/11px var(--etichette); letter-spacing: 1.4px;
}
.btn--link:hover { transform: none; opacity: .85; }
.btn--link .btn__ico { display: none; }

/* ==========================================================================
   Testata
   ========================================================================== */
.testa { position: sticky; top: 0; z-index: 1000; background: var(--verde) var(--grana); padding: 25px 100px; }
.admin-bar .testa { top: 32px; }
.testa__in { display: flex; justify-content: space-between; align-items: center; min-height: 112px; }
.testa__sx { display: flex; align-items: center; gap: 10px; width: 75%; padding: 10px; }
.testa__logo { flex: none; width: 108px; }
.testa__logo img { width: 108px; height: auto; }
.menu__lista { display: flex; flex-wrap: wrap; }
.menu__voce { position: relative; }
.menu__voce > a {
  display: flex; align-items: center; gap: 10px; padding: 13px 9px;
  font: 600 13px/20px var(--etichette); letter-spacing: 1.3px; text-transform: uppercase; color: var(--giallo);
}
.menu__freccia { width: 9px; height: 14px; fill: currentColor; }
.menu__sotto {
  position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--giallo); z-index: 10;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .25s, transform .25s, visibility .25s;
}
.menu__voce:hover > .menu__sotto, .menu__voce:focus-within > .menu__sotto { opacity: 1; visibility: visible; transform: none; }
.menu__sotto a {
  display: block; padding: 13px 20px; color: var(--verde);
  font: 600 12px/1.4 var(--etichette); letter-spacing: 1.2px; text-transform: uppercase;
}
.menu__sotto a:hover { background: var(--verde); color: var(--giallo); }
.testa__dx { display: flex; justify-content: flex-end; align-items: center; padding: 10px; }
.testa__icone { display: flex; gap: 14px; }
.testa__icone a { display: block; color: var(--giallo); }
.testa__icone svg { width: 23px; height: 23px; fill: currentColor; }
.testa__shop {
  margin-left: 27px; padding: 12px 24px; border: 1px solid #af2d2c; color: #af2d2c; background: var(--giallo);
  font: 600 12px/12px var(--etichette); letter-spacing: 1px; text-transform: uppercase;
}
.lingue { display: flex; gap: 10px; margin-left: 27px; width: 86px; justify-content: flex-end; }
.lingue a { display: block; padding: 13px 0; }
.lingue img { width: 18px; height: 12px; }
.testa__burger { display: none; background: none; border: 0; padding: 4px 0 0; cursor: pointer; }
.testa__burger img { width: 34px; height: auto; }

/* menu del telefono, a tutto schermo */
.menu-tel {
  position: fixed; inset: 0; z-index: 2000; background: var(--verde) var(--grana); overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; padding: 25px 20px 50px;
  opacity: 0; transition: opacity .6s;
}
.menu-tel[hidden] { display: none; }
.menu-tel.aperto { opacity: 1; }
.menu-tel__chiudi { position: absolute; top: 10px; right: 16px; background: none; border: 0; color: var(--giallo); font-size: 37px; line-height: 1; cursor: pointer; padding: 6px; }
.menu-tel__logo { width: 125px; margin: 0 0 20px; }
.menu-tel__voci { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 75vh; padding: 50px 0; }
.menu-tel__voci a { font: 700 25px/1 var(--titoli); color: var(--giallo); padding: 12px 24px; }

/* ==========================================================================
   Fasce
   ========================================================================== */
.pagina { display: block; }
.fascia { padding: 100px var(--lato); }
.fascia--centro { text-align: center; }
.fascia__testa { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 0 var(--lato); }
.fascia__testa .tit { flex: 1; }
.fascia__testa .bottoni { flex: 1; display: block; }
.fascia__testa .btn { border-color: var(--giallo); }

/* ---------- testata con la foto (hero) ---------- */
.hero { padding: 0 20px; }
.hero__foto {
  position: relative; min-height: 82vh; padding: 100px; display: flex; align-items: center;
  background-color: var(--verde); background-size: cover; background-position: center;
}
.hero__box {
  width: 50%; min-height: 70vh; padding: 50px; display: flex; flex-direction: column; justify-content: center; gap: 20px;
  background: var(--verde) var(--grana);
}
.hero--corta .hero__box { min-height: 0; align-self: stretch; }
.hero__icona img { width: 117px; height: auto; }
.hero__tit { font: 600 60px/1 var(--titoli); color: var(--giallo); }
.hero--corta .hero__tit { font-size: 50px; }
.hero__sotto { font: 400 18px/18px var(--corpo); color: var(--giallo); }
.hero--home .hero__sotto { font: 600 35px/35px var(--titoli); }
.hero .bottoni { margin-top: 0; grid-template-rows: repeat(2, auto); grid-auto-flow: column; justify-content: start; }

/* ---------- presentazione centrata ---------- */
.intro { padding: 100px var(--lato); text-align: center; }
.intro__in { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 10px; }
.intro__testo { max-width: 826px; font-size: 18px; line-height: 27px; }
.intro--forte .intro__testo:first-child { font-weight: 600; max-width: 590px; }
.intro__tit { font: 600 50px/1 var(--titoli); max-width: 860px; }
.intro__testo2 { max-width: 826px; padding-top: 30px; }
.intro--stretta { padding-bottom: 50px; }
.intro--piccola .intro__tit { font-size: 43px; }

/* ---------- righe testo + foto ---------- */
.righe { padding: 0 var(--lato) 0; }
.riga { display: flex; align-items: center; padding: 0 36px 100px; }
.riga--sinistra { flex-direction: row-reverse; }
.riga__testo { width: 50%; padding-right: 50px; display: flex; flex-direction: column; gap: 20px; }
.riga--sinistra .riga__testo { padding-right: 50px; }
.riga__logo img { width: 114px; height: auto; }
.riga__tit { font: 600 50px/1 var(--titoli); }
.riga__corpo { max-width: 463px; text-align: justify; }
.riga__dopo { font: 600 25px/1 var(--titoli); }
.riga__foto { width: 50%; padding-right: 50px; }
.riga__foto img { width: 100%; height: auto; }
.riga .bottoni { grid-template-columns: minmax(0, 360px); }
/* foto «alta»: riempie la colonna come sfondo */
.riga--alta { align-items: stretch; }
.riga--alta .riga__foto { padding: 0; background-size: cover; background-position: center; min-height: 500px; }
.riga--alta .riga__testo { padding: 50px 50px 50px 0; }
.riga--alta.riga--sinistra .riga__testo { padding: 50px 0 50px 50px; }

/* ---------- fascia gialla ---------- */
.fascia-gialla { padding: 50px var(--lato) 100px; }
.fascia-gialla__in { background: var(--giallo) var(--grana); color: var(--verde); padding: 100px 0; text-align: center; position: relative; }
.fascia-gialla__in > * + * { margin-top: 20px; }
.fascia-gialla .tit { color: var(--verde); }
.fascia-gialla__testo { max-width: 600px; margin-left: auto; margin-right: auto; font: 400 15px/22.5px var(--etichette); letter-spacing: 1.3px; }
.fascia-gialla__voci { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-top: 20px; }
.voce { width: 480px; max-width: 100%; padding: 25px; display: flex; flex-direction: column; align-items: center; gap: 20px; color: var(--verde); }
.voce__ico { width: 50px; height: 56px; display: flex; align-items: center; justify-content: center; }
.voce__ico svg { width: 50px; height: 50px; fill: var(--verde); }
.voce__ico img { max-height: 56px; width: auto; }
.voce__sopra { font: 400 15px/22.5px var(--etichette); letter-spacing: 1.3px; }
.voce__tit { font: 600 25px/1 var(--titoli); }
.fascia-gialla__codice { padding: 0 0; }
.fascia-gialla__codice iframe { width: 100%; min-height: 800px; border: 0; }
.fascia-gialla .bottoni { justify-content: center; grid-template-columns: repeat(2, 240px); }
.fascia-gialla .btn { background: var(--verde); color: var(--giallo); border-color: var(--verde); }
.fascia-gialla__tit2 { margin-top: 60px !important; }
.fascia-gialla__testo2 { font: 400 18px/27px var(--corpo); }
/* varianti: piccola (contatti / esperienze), voci in fila con bottone */
.fascia-gialla--icone .voce { width: auto; min-width: 150px; padding: 10px 25px; }
.fascia-gialla--icone .voce__ico svg, .fascia-gialla--icone .voce__ico img { width: 60px; height: 60px; max-height: 60px; }
.fascia-gialla--bottoni .fascia-gialla__voci { gap: 20px; }
.fascia-gialla--bottoni .voce { width: 240px; padding: 10px; }
.fascia-gialla--bottoni .voce__ico img { max-height: 100px; height: 100px; width: auto; }
.fascia-gialla--bottoni .voce__tit { font-size: 35px; }
.voce .btn { background: var(--giallo); color: var(--verde); border-color: var(--verde); }

/* ==========================================================================
   Home
   ========================================================================== */
.card-grandi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px 38px; padding: 100px var(--lato) 100px; }
.card-grande {
  position: relative; min-height: 450px; display: flex; flex-direction: column; justify-content: flex-end;
  background-size: cover; background-position: center; color: var(--verde); transition: transform .4s;
}
.card-grande:hover { transform: translateY(-4px); }
.card-grande__box { background: var(--giallo) var(--grana); padding: 30px 30px 30px; min-height: 150px; }
.card-grande__tit { font: 600 50px/50px var(--titoli); letter-spacing: -.3px; color: var(--verde); margin-bottom: 0; }
.card-grande__testo { font: 400 18px/18px var(--corpo); letter-spacing: -.5px; color: var(--verde); margin-top: 0; }

.esperienze { padding: 50px var(--lato) 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.esperienza__foto { padding: 10px; }
.esperienza__foto img { width: 280px; height: 280px; object-fit: cover; }
.esperienza__testo { padding: 10px 10px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.esperienza__tit { font: 600 25px/1 var(--titoli); color: var(--giallo); }

.news-home { padding: 100px 0 20px; }
.fascia__testa--news { padding: 0; }
.fascia__testa--esp { padding: 0 var(--lato); }

.prodotti { padding: 20px var(--lato) 50px; }
.prodotti__lista { background: var(--giallo); display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 60px) / 4); gap: 20px; overflow-x: auto; padding: 20px; scroll-snap-type: x mandatory; }
.prodotto { scroll-snap-align: start; color: var(--verde); text-align: center; }
.prodotto img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.prodotto__nome { font: 600 20px/1.1 var(--titoli); margin-top: 10px; }

/* ---------- news (griglia, uguale in home e nella pagina News) ---------- */
.news-griglia { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 0 var(--lato); }
.news-card { display: flex; flex-direction: column; color: var(--verde); }
.news-card__foto { display: block; height: 400px; padding: 0 10px; background: var(--bianco); }
.news-card__foto img { width: 100%; height: 100%; object-fit: cover; }
.news-card__box { background: var(--giallo) var(--grana); padding: 0 20px 35px; min-height: 160px; }
.news-card__riga { display: flex; justify-content: space-between; gap: 20px; min-height: 57px; align-items: center; }
.news-card__data { font: 500 12px/18px var(--etichette); letter-spacing: 1.4px; text-transform: uppercase; width: 109px; }
.news-card__riga .btn--link { color: var(--verde); }
.news-card__tit { font: 600 25px/1 var(--titoli); color: var(--verde); }
.pagina-news .news-griglia { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pagina-news .news-card__foto { height: 340px; }
.news-elenco { padding: 0 var(--lato) 100px; }
.news-elenco .tit { margin: 0 0 30px; }
.pagina-archivio { padding-top: 100px; }
.mappa .testo ul { margin: 0 0 30px; padding-left: 20px; }
.mappa .testo li { margin: 6px 0; }
.paginazione { display: flex; justify-content: center; gap: 10px; margin-top: 40px; font: 600 13px/1 var(--etichette); }
.paginazione a, .paginazione span { padding: 10px 14px; border: 1px solid var(--giallo); }
.paginazione .current { background: var(--giallo); color: var(--verde); }

/* ==========================================================================
   Camere
   ========================================================================== */
.camere { padding: 50px var(--lato) 100px; display: grid; grid-template-columns: repeat(12, 1fr); }
.camera { padding: 10px; grid-column: span 4; display: flex; flex-direction: column; gap: 20px; }
.camera:nth-child(n+4) { grid-column: span 3; }
.camere > .camera:nth-child(4) { margin-top: 100px; }
.camere > .camera:nth-child(n+5) { margin-top: 100px; }
.camera__foto { position: relative; min-height: 522px; margin: 0 10px; overflow: hidden; background: var(--verde-notte); }
.camera__testo { min-height: 400px; padding: 10px 20px 10px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.camera__tit { font: 600 50px/1 var(--titoli); text-align: center; }
.camera__corpo { text-align: justify; }
.camera .bottoni { display: block; }

/* slideshow: le foto si alternano in dissolvenza */
.giro { position: absolute; inset: 0; }
.giro img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.giro img.on { opacity: 1; }
.giro--kb img.on { animation: grp-kb 6s linear both; }
@keyframes grp-kb { from { transform: scale(1); } to { transform: scale(1.15); } }

.servizi { padding: 100px var(--lato); text-align: center; }
.servizi .tit { margin-bottom: 40px; }
.servizi__lista { display: grid; grid-template-columns: repeat(4, 1fr); gap: 50px 20px; }
.servizio { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 10px; }
.servizio__ico img { width: 80px; height: auto; }
.servizio__tit { font: 600 25px/1 var(--titoli); }
.servizio__testo { font: 400 15px/22.5px var(--etichette); letter-spacing: 1.3px; text-align: left; }

.info { display: grid; grid-template-columns: 1fr 1fr; padding: 100px var(--lato); }
.info__box { background: var(--giallo) var(--grana); color: var(--verde); padding: 100px 50px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
.info__box .tit { color: var(--verde); }
.info__testo { font: 400 15px/22.5px var(--etichette); letter-spacing: 1.3px; }
.info__testo a { text-decoration: underline; font-weight: 600; }
.info__box .bottoni { display: block; width: 100%; max-width: 360px; }
.info__box .btn { background: var(--verde); color: var(--giallo); }
.info__foto { position: relative; min-height: 700px; }

/* ==========================================================================
   Piscina
   ========================================================================== */
.prezzi { padding: 50px var(--lato) 0; }
.prezzi .tit { padding: 10px; }
.prezzi__in { display: flex; padding: 50px 20px 0; }
.prezzi__nota { width: 320px; flex: none; background: var(--bianco); color: var(--verde); padding: 30px 20px; min-height: 567px; }
.prezzi__nota .testo { color: var(--verde); }
.prezzi__tabella { flex: 1; align-self: flex-start; background: var(--bianco); }
.prezzi__riga { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 10px 20px; background: var(--giallo); color: var(--verde); }
.prezzi__riga--chiara { background: rgba(255, 255, 255, .91); }
.prezzi__cella { padding: 10px; text-align: center; display: flex; flex-direction: column; gap: 20px; }
.prezzi__cella .tit { font-size: 25px; color: var(--verde); padding: 0; }
.prezzi__cella .etichetta { color: var(--verde); }
.prezzi__ultima { grid-template-columns: 1fr 1fr; align-items: center; }

.orari { display: flex; gap: 0; padding: 100px var(--lato) 0; align-items: flex-start; }
.orari__testo { width: 35%; padding: 10px; }
.orari__blocco + .orari__blocco { padding-top: 59px; }
.orari__voce .etichetta { display: block; }
.orari__voce .tit--m { display: block; }
.orari__foto { flex: 1; position: relative; min-height: 567px; margin: 10px; }

.fascia-gialla--chiusura { padding: 270px var(--lato) 110px; }

/* ==========================================================================
   Azienda agricola
   ========================================================================== */
.vini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 0 var(--lato) 50px; }
.vino { color: var(--verde); display: flex; flex-direction: column; }
.vino img { width: 100%; height: 300px; object-fit: cover; }
.vino__box { background: var(--giallo) var(--grana); padding: 30px 20px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.vino__nome { font: 600 40px/1 var(--titoli); }
.vino__tipo { font: 600 18px/1.1 var(--titoli); }
.vino__testo { font: 400 15px/22.5px var(--etichette); letter-spacing: 1px; }
.vini-btn { padding: 0 var(--lato) 50px; display: flex; justify-content: center; }
.vini-btn .bottoni { display: block; width: 360px; }
.galleria3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 0 var(--lato) 100px; }
.galleria3 div { min-height: 450px; background-size: cover; background-position: center; }

/* ==========================================================================
   Ristorante, Contatti, Eventi, Newsletter
   ========================================================================== */
.menu-box { padding: 50px var(--lato) 50px; }
.menu-box .fascia-gialla__in { padding: 80px 50px; }
.menu-box .bottoni { margin-left: auto; margin-right: auto; grid-template-columns: repeat(2, 120px); gap: 20px; }

.dove { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 100px var(--lato); align-items: center; }
.dove__mappa iframe { width: 100%; height: 450px; border: 0; display: block; }
.dove__testo { padding: 0 50px; display: flex; flex-direction: column; gap: 20px; }
.dove__testo .testo-piccolo { font: 600 12px/18px var(--etichette); letter-spacing: 1.3px; text-transform: uppercase; }
.dove__testo .testo-come { font: 400 15px/22.5px var(--etichette); letter-spacing: 1.3px; }
.dove__testo .testo-come a { font-weight: 700; text-decoration: underline; }

.modulo-fascia { padding: 0 var(--lato) 100px; }
.modulo-fascia .fascia-gialla__in { padding: 60px 50px; text-align: center; }
.modulo { text-align: left; }
.modulo--grande { max-width: 1050px; margin: 30px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 30px; }
.modulo--grande .modulo__campo--largo, .modulo--grande .modulo__privacy, .modulo--grande .modulo__invia, .modulo--grande .modulo__esito { grid-column: 1 / -1; }
.modulo input[type=text], .modulo input[type=email], .modulo input[type=tel], .modulo input[type=date], .modulo select, .modulo textarea {
  width: 100%; border: 0; border-bottom: 2px solid var(--verde); background: transparent; color: var(--verde);
  padding: 12px 16px; font: 500 11px/1.4 var(--etichette); letter-spacing: 1.1px; text-transform: uppercase; border-radius: 0;
}
.modulo textarea { min-height: 90px; text-transform: none; }
.modulo ::placeholder { color: var(--verde); opacity: .9; }
.modulo__privacy { display: flex; flex-direction: column; gap: 6px; font: 600 9px/1.2 var(--etichette); letter-spacing: .6px; text-transform: uppercase; color: var(--verde); }
.modulo__privacy input { width: 14px; height: 14px; margin: 0; accent-color: var(--verde); }
.modulo__invia {
  border: 0; background: var(--verde); color: var(--giallo); cursor: pointer; padding: 0 24px; min-height: 40px;
  font: 500 13px/13px var(--etichette); letter-spacing: 1.1px; text-transform: uppercase;
}
.modulo__esito { font: 600 13px/1.4 var(--etichette); color: var(--verde); margin: 0; min-height: 0; }
.modulo__esito:empty { display: none; }
.grp-trappola { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* newsletter del piede */
.newsletter { background: var(--giallo) var(--grana); color: var(--verde); padding: 25px; display: flex; align-items: center; gap: 20px; }
.newsletter__tit { font: 600 25px/1 var(--titoli); width: 202px; flex: none; }
.modulo--newsletter { flex: 1; display: flex; flex-direction: column; gap: 25px; }
.modulo--newsletter .modulo__riga { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 10px; align-items: start; }
.modulo--newsletter .modulo__invia { width: 127px; }

/* pagina Newsletter: foto a tutta pagina e riquadro verde */
.nl-pagina { min-height: 100vh; background-size: cover; background-position: center; padding: 50px 100px; display: flex; align-items: center; }
.nl-pagina__box { background: var(--verde) var(--grana); padding: 40px 30px; width: 500px; max-width: 100%; display: flex; flex-direction: column; gap: 14px; }
.nl-pagina__box img.logo { width: 120px; }
.nl-pagina__tit { font: 600 40px/1 var(--titoli); }
.nl-pagina__sotto { font: 400 15px/1.4 var(--etichette); }
body.pagina-newsletter .testa, body.pagina-newsletter .piede__alto { display: none; }

/* ---------- articolo ---------- */
.articolo { padding: 100px var(--lato); max-width: calc(900px + 2 * var(--lato)); margin: 0 auto; }
.articolo__data { font: 500 12px/18px var(--etichette); letter-spacing: 1.4px; text-transform: uppercase; }
.articolo__tit { font: 600 50px/1 var(--titoli); margin: 20px 0 30px; }
.articolo__corpo { font: 400 18px/27px var(--corpo); }
.articolo__corpo img { height: auto; margin: 20px 0; }
.articolo .bottoni { margin-top: 40px; grid-template-columns: repeat(2, 240px); }

.vuota { padding: 150px var(--lato); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }

/* ==========================================================================
   Piede
   ========================================================================== */
.piede__alto { background: var(--verde-piede); padding: 100px 100px 0; display: flex; gap: 20px; }
.piede__azienda { width: 248px; flex: none; padding: 10px; display: flex; flex-direction: column; gap: 20px; }
.piede__logo img { width: 114px; }
.piede__dati { font: 600 12px/18px var(--etichette); letter-spacing: 1.3px; text-transform: uppercase; }
.piede__dati p { margin: 0 0 18px; }
.piede__loghi img { width: 228px; }
.piede__destra { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 20px; }
.piede__colonne { display: flex; justify-content: space-around; padding: 10px; }
.piede__col { padding: 10px; display: flex; flex-direction: column; gap: 20px; }
.piede__tit { font: 600 25px/1 var(--titoli); color: var(--giallo); max-width: 165px; }
.piede__col a { display: block; padding: 4px 0; font: 600 12px/20px var(--etichette); letter-spacing: 1.3px; text-transform: uppercase; max-width: 150px; }
.piede__basso { background: var(--verde-notte); padding: 15px 110px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.piede__copy { font: 600 11px/16.5px var(--etichette); letter-spacing: 1.3px; text-transform: uppercase; }
.piede__social { display: flex; gap: 40px; padding-right: 30px; }
.piede__social svg { width: 18px; height: 18px; fill: var(--giallo); }

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width: 1024px) {
  :root { --lato: 40px; }
  html { scroll-padding-top: 160px; }
  .testa { padding: 20px; }
  .testa__in { min-height: 0; }
  .menu { display: none; }
  .testa__sx { width: auto; }
  .testa__burger { display: block; margin-left: 20px; }
  .hero__foto { padding: 60px; }
  .hero__box { width: 70%; }
  .card-grandi { grid-template-columns: repeat(2, 1fr); }
  .esperienze { grid-template-columns: repeat(2, 1fr); }
  .news-griglia, .pagina-news .news-griglia { grid-template-columns: repeat(2, 1fr); }
  .camere { grid-template-columns: repeat(2, 1fr); }
  .camera, .camera:nth-child(n+4) { grid-column: auto; }
  .camere > .camera:nth-child(n+4) { margin-top: 0; }
  .servizi__lista { grid-template-columns: repeat(2, 1fr); }
  .riga { padding: 0 0 80px; }
  .prezzi__in { flex-direction: column; }
  .prezzi__nota { width: auto; min-height: 0; }
  .orari { flex-direction: column; }
  .orari__testo { width: auto; }
  .orari__foto { width: 100%; }
  .piede__alto { flex-direction: column; padding: 60px 20px 0; }
  .piede__azienda { width: auto; }
  .piede__colonne { flex-wrap: wrap; justify-content: flex-start; }
  .piede__basso { padding: 15px 20px; }
}

/* ==========================================================================
   Telefono
   ========================================================================== */
@media (max-width: 767px) {
  :root { --lato: 20px; }
  html { scroll-padding-top: 150px; }
  body { font-size: 18px; }
  .tit { font-size: 30px; }
  .testa { padding: 15px 5px 0; }
  .testa__in { flex-direction: column; }
  .testa__sx { justify-content: center; padding: 0; }
  .testa__logo, .testa__logo img { width: 102px; }
  .testa__dx { width: 100%; justify-content: space-evenly; padding: 0; min-height: 60px; }
  .testa__icone { gap: 24px; }
  .lingue { margin-left: 0; width: 103px; padding-right: 8px; }
  .testa__burger { margin: 0; }
  .testa__shop { margin: 0; padding: 10px 14px; }

  .hero__foto { min-height: 0; padding: 30px; }
  .hero__box { width: 100%; min-height: 70vh; padding: 20px; }
  .hero__tit { font-size: 37px; line-height: 37px; }
  .hero--corta .hero__tit { font-size: 30px; line-height: 30px; }
  .hero--home .hero__sotto { font-size: 18px; line-height: 18px; }
  .hero .bottoni { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }

  .intro { padding: 100px var(--lato) 0; }
  .intro__in { padding: 10px; }
  .intro__tit, .intro--piccola .intro__tit { font-size: 30px; }

  .righe { padding: 0 var(--lato); }
  .riga, .riga--sinistra { flex-direction: column-reverse; padding: 50px 0 0; gap: 50px; align-items: stretch; }
  .riga__testo, .riga__foto { width: 100%; }
  .riga__testo { padding-right: 50px; }
  .riga--sinistra .riga__testo { padding-right: 50px; }
  .riga__tit { font-size: 30px; }
  .riga__foto { padding: 0; }
  .riga--alta .riga__foto { min-height: 350px; }
  .riga--alta .riga__testo, .riga--alta.riga--sinistra .riga__testo { padding: 0 50px 0 0; }

  .fascia__testa, .fascia__testa--esp { flex-direction: column; align-items: center; text-align: center; padding: 0 var(--lato) 20px; }
  .fascia__testa .tit { font-size: 30px; }
  .fascia__testa .bottoni { display: flex; justify-content: center; }
  .fascia__testa .btn { width: auto; }
  .card-grandi { grid-template-columns: 1fr; gap: 60px; padding: 60px var(--lato); }
  .card-grande { min-height: 591px; }
  .card-grande__tit { font-size: 30px; line-height: 30px; padding-bottom: 15px; }
  .esperienze { grid-template-columns: 1fr; padding: 30px var(--lato) 0; gap: 30px; }
  .esperienza__foto img { width: 100%; height: auto; aspect-ratio: 1; }
  .news-griglia, .pagina-news .news-griglia { grid-template-columns: 1fr; padding: 0 var(--lato); }
  .news-home { padding: 60px 0 20px; }

  .camere { grid-template-columns: 1fr; padding: 0 var(--lato) 60px; }
  .camera__tit { font-size: 30px; }
  .servizi { padding: 60px var(--lato); }
  .servizi__lista { grid-template-columns: 1fr; }
  .info { grid-template-columns: 1fr; padding: 60px var(--lato); }
  .info__box { padding: 60px 25px; }
  .info__foto { min-height: 400px; }

  .fascia-gialla { padding: 50px var(--lato); }
  .fascia-gialla__in { padding: 60px 20px; }
  .fascia-gialla .bottoni { grid-template-columns: 1fr; }
  .voce { width: 100%; }
  .fascia-gialla--bottoni .voce { width: 45%; }
  .fascia-gialla--bottoni .voce__tit { font-size: 25px; }

  .prezzi { padding: 50px var(--lato) 0; }
  .prezzi__in { padding: 30px 0 0; }
  .prezzi__riga { grid-template-columns: 1fr; gap: 0; }
  .prezzi__ultima { grid-template-columns: 1fr; }
  .orari { padding: 60px var(--lato) 0; }
  .orari__foto { min-height: 350px; margin: 10px 0; }
  .fascia-gialla--chiusura { padding: 100px var(--lato); }

  .vini { grid-template-columns: 1fr; }
  .galleria3 { grid-template-columns: 1fr; }
  .dove { grid-template-columns: 1fr; padding: 60px var(--lato); gap: 40px; }
  .dove__testo { padding: 0; }
  .modulo--grande { grid-template-columns: 1fr; }

  .newsletter { flex-direction: column; align-items: stretch; }
  .newsletter__tit { width: auto; }
  .modulo--newsletter .modulo__riga { grid-template-columns: 1fr; }
  .modulo--newsletter .modulo__invia { width: 100%; }
  .piede__alto { padding: 40px 20px 0; }
  .piede__colonne { flex-direction: column; padding: 0 10px; }
  .piede__tit { max-width: none; }
  .piede__col a { max-width: none; }
  .piede__basso { flex-direction: column-reverse; align-items: flex-start; padding: 25px 20px; }
  .piede__social { align-self: center; padding: 0; }
  .nl-pagina { padding: 30px 20px; }
  .articolo { padding: 60px var(--lato); }
  .articolo__tit { font-size: 30px; }
}

/* ---------- animazioni di comparsa (dalla prova A «Morbida»): dissolvenza che sale, foto grande che si assesta ---------- */
.anim-on { --ease: cubic-bezier(.22,.61,.36,1); }
@keyframes grp-sale { from { opacity: 0; transform: translateY(28px); } }
@keyframes grp-scende { from { opacity: 0; transform: translateY(-16px); } }
@keyframes grp-zoom { from { transform: scale(1.12); } }
@keyframes grp-luce { from { opacity: 0; } }

.anim-on .hero__foto { overflow: hidden; }
.anim-on .hero__foto::before { content: ""; position: absolute; inset: 0; background: inherit; }
.anim-on .hero__box { position: relative; }

.anim-on:not(.aperta) .ap, .anim-on .rv:not(.vista) { opacity: 0; }
.anim-on.aperta .testa { animation: grp-scende .8s var(--ease) backwards; }
.anim-on.aperta .hero__foto::before { animation: grp-zoom 2.6s var(--ease) backwards; }
.anim-on.aperta .hero__foto { animation: grp-luce 1s ease backwards; }
.anim-on.aperta .hero__box .ap { animation: grp-sale .9s var(--ease) backwards; animation-delay: calc(var(--rit, 0ms) + 250ms); }
.anim-on .rv.vista { animation: grp-sale .9s var(--ease) backwards; animation-delay: var(--rit, 0ms); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Ritocchi dal confronto con il sito di prima
   ========================================================================== */
.fascia-gialla--larga { padding: 50px 20px 0; }
.fascia-gialla--larga .fascia-gialla__in { padding: 100px; }
.fascia-gialla--icone .fascia-gialla__testo { font: 500 11px/16.5px var(--etichette); text-transform: uppercase; letter-spacing: 0; }
.fascia-gialla--icone .fascia-gialla__voci { padding: 25px; gap: 20px; margin-top: 0; }
.fascia-gialla--icone .voce { width: 201px; min-width: 0; padding: 10px; gap: 5px; }
.fascia-gialla--icone .voce__ico, .fascia-gialla--icone .voce__ico svg, .fascia-gialla--icone .voce__ico img { height: 56px; width: auto; max-height: 56px; }
.fascia-gialla--icone .voce__ico svg { width: 56px; }
.fascia-gialla--verde .fascia-gialla__in { background: none; color: var(--giallo); }
.fascia-gialla--verde .fascia-gialla__in::before { display: none; }
.fascia-gialla--verde .tit, .fascia-gialla--verde .voce { color: var(--giallo); }
.fascia-gialla--verde .voce__ico svg { fill: var(--giallo); }
.servizio__ico { width: 100%; }
.servizio__ico img { width: 100%; height: 151px; object-fit: contain; }
.servizio__testo { font: 400 18px/27px var(--corpo); letter-spacing: 0; }
.servizi { padding: 50px var(--lato) 102px; }
.servizi__lista { gap: 25px 0; }
.info { padding: 50px var(--lato) 80px; }
.info__box { padding: 100px 50px; min-height: 700px; }
.info__testo { font: 400 18px/27px var(--corpo); letter-spacing: 0; max-width: 300px; }
.info__testo a { font-weight: 400; }
.info__box .bottoni { max-width: 336px; }
@media (max-width: 767px) {
  .fascia-gialla--larga { padding: 50px 0 0; }
  .fascia-gialla--larga .fascia-gialla__in { padding: 60px 20px; }
  .fascia-gialla--icone .voce { width: 45%; }
  .info__box { min-height: 0; padding: 60px 25px; }
}
/* Azienda agricola: righe con la foto alta, vini, tre foto */
.riga--alta { padding: 0 0 100px; gap: 50px; align-items: stretch; }
.riga--alta .riga__testo, .riga--alta.riga--sinistra .riga__testo { width: 346px; flex: none; padding: 10px; align-items: center; justify-content: center; }
.riga--alta .riga__logo img { width: 195px; max-height: 134px; object-fit: contain; }
.riga--alta .riga__tit { font-size: 25px; text-align: center; }
.riga--alta .riga__corpo { font-weight: 600; max-width: none; }
.riga--alta .riga__foto { flex: 1; width: auto; min-height: 495px; }
.riga--alta.riga--sinistra .riga__foto { min-height: 630px; }
.vini { gap: 24px; padding: 50px var(--lato) 102px; }
.vino { padding: 2px; }
.vino img { height: 380px; }
.vino__box { min-height: 350px; padding: 44px 25px 30px; justify-content: flex-start; gap: 20px; }
.vino__nome { font-size: 50px; }
.vino__tipo { font-size: 25px; line-height: 1; }
.vino__testo { font: 500 18px/27px var(--corpo); letter-spacing: 0; text-align: justify; }
.galleria3 { gap: 30px; padding: 50px var(--lato) 200px; }
.galleria3 div { min-height: 567px; background-clip: content-box; padding: 10px; }
@media (max-width: 767px) {
  .riga--alta, .riga--alta.riga--sinistra { flex-direction: column; gap: 30px; padding-bottom: 60px; }
  .riga--alta .riga__testo, .riga--alta.riga--sinistra .riga__testo { width: 100%; padding: 10px; }
  .riga--alta .riga__foto, .riga--alta.riga--sinistra .riga__foto { min-height: 400px; }
  .galleria3 { padding-bottom: 80px; }
  .galleria3 div { min-height: 450px; }
  .vino__nome { font-size: 40px; }
}
/* bottoni delle righe: larghi quanto la colonna del testo */
.riga .bottoni { grid-template-columns: 1fr; max-width: 514px; }
/* contatti: quattro voci con icona grande e bottone */
.fascia-gialla--bottoni .fascia-gialla__in { padding: 100px 0; }
.fascia-gialla--bottoni .fascia-gialla__voci { gap: 0; }
.fascia-gialla--bottoni .voce { width: 290px; padding: 10px; gap: 20px; }
.fascia-gialla--bottoni .voce__ico { width: 100%; height: 151px; }
.fascia-gialla--bottoni .voce__ico img { width: 100%; height: 151px; max-height: none; object-fit: contain; }
.fascia-gialla--bottoni .voce__tit { font-size: 40px; }
.fascia-gialla--bottoni .voce .btn { width: 100%; }
/* modulo degli eventi: fascia gialla a tutta larghezza fino al piede */
.modulo-fascia { padding: 100px 0 0; }
.modulo-fascia .fascia-gialla__in { background: var(--giallo) var(--grana); color: var(--verde); padding: 100px 160px; }
.modulo-fascia .tit { color: var(--verde); }
.modulo-fascia .modulo--grande { max-width: none; margin-top: 40px; }
.modulo-fascia .modulo input, .modulo-fascia .modulo textarea { font: 400 18px/1.2 var(--corpo); text-transform: none; letter-spacing: 0; border-bottom-width: 1px; }
.modulo-fascia .modulo__privacy { flex-direction: row; align-items: center; font: 400 15px/1.3 var(--corpo); text-transform: none; letter-spacing: 0; }
.modulo-fascia .modulo__invia { font: 400 18px/1 var(--corpo); text-transform: none; }
@media (max-width: 767px) {
  .fascia-gialla--bottoni .voce { width: 50%; }
  .fascia-gialla--bottoni .voce__ico, .fascia-gialla--bottoni .voce__ico img { height: 100px; }
  .fascia-gialla--bottoni .voce__tit { font-size: 25px; }
  .modulo-fascia .fascia-gialla__in { padding: 60px 20px; }
}
/* pagina News: testata bassa, calendario degli eventi locali, griglia a tre */
.hero--news .hero__foto { min-height: 35vh; }
.hero--news .hero__box { min-height: 31vh; }
.eventi-locali { padding: 100px var(--lato) 0; }
.eventi-locali .tit { padding: 10px; margin-bottom: 20px; }
.eventi-locali__codice { background: var(--giallo); border-radius: 20px; padding: 30px; min-height: 250px; }
.news-elenco { padding: 100px var(--lato); }
.pagina-news .news-griglia { gap: 60px 30px; }
.pagina-news .news-card__foto { height: 400px; }
/* pagina Newsletter */
.nl-pagina { padding: 50px 120px; }
.nl-pagina__box { padding: 50px; width: 600px; min-height: 70vh; justify-content: center; }
.nl-pagina__tit { font-size: 50px; }
@media (max-width: 767px) {
  .eventi-locali__codice { padding: 10px; border-radius: 10px; }
  .nl-pagina__box { padding: 25px; min-height: 0; }
  .nl-pagina__tit { font-size: 30px; }
}
.info__foto, .orari__foto { overflow: hidden; }
@media (max-width: 1024px) {
  .prezzi__tabella { width: 100%; align-self: stretch; }
}
@media (max-width: 767px) {
  .hero__box, .hero--corta .hero__box { min-height: 522px; }
  .hero--news .hero__box { min-height: 31vh; }
  .fascia-gialla--bottoni .voce { width: 100%; padding: 30px 10px; }
  .fascia-gialla--bottoni .voce__ico, .fascia-gialla--bottoni .voce__ico img { height: 120px; }
  .fascia-gialla--bottoni .voce__tit { font-size: 40px; }
}
@media (max-width: 767px) { .fascia-gialla--icone .voce { width: 100%; } }