/* Vivai Isgrò Salvatore — home (step 5, fedele al design della versione 9)
   Colori misurati dal design (confronta-design.py --colori e campioni per zona), caratteri serviti dal sito. */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
@font-face { font-family: "Cormorant Riserva"; src: local("Georgia"), local("Times New Roman"); size-adjust: 88.5%; ascent-override: 104.5%; descent-override: 32.4%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Riserva"; src: local("Arial"), local("Helvetica"); size-adjust: 98.5%; ascent-override: 108.2%; descent-override: 30.4%; line-gap-override: 0%; }

:root {
  --avorio: #FDF9F3;
  --bianco: #FEFEFE;
  --verde: #0B4116;
  --verde-2: #0E4B1C;
  --nero: #141414;
  --testo: #272726;
  --grigio: #5B5955;
  --grigio-2: #77736F;
  --linea: #E3E3DD;
  --linea-2: #D9D9D6;
  --salvia: #91A691;
  --salvia-chiaro: #BCCDBC;
  --verde-medio: #658766;
  --sole: #FBB20D;
  --box: #F2EEEA;
  --disco: #FAF5EE;
  --errore: #B3261E;

  --f-titoli: "Cormorant Garamond", "Cormorant Riserva", Georgia, serif;
  --f-testo: "Manrope", "Manrope Riserva", Arial, sans-serif;
  --raggio: 16px;
  --testata-h: 82px;
  --bordo-pagina: clamp(20px, 5.5vw, 80px);
  /* le due curve del movimento (Emil Kowalski, 09 § 0-bis-2): entrate e uscite, cose che si spostano */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--testata-h) + 12px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--avorio);
  color: var(--testo);
  font: 400 17px/1.6 var(--f-testo);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
html.menu-aperto { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 500; }

.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.salta {
  position: fixed; left: 16px; top: -60px; z-index: 100; padding: 12px 18px; border-radius: 8px;
  background: var(--verde); color: var(--bianco); font-weight: 700; text-decoration: none;
}
.salta:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; border-radius: 4px; }

.contenitore { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--bordo-pagina); }

/* titoli */
h1, h2 {
  font-family: var(--f-titoli);
  font-weight: 500;
  color: var(--nero);
  letter-spacing: -0.012em;
  line-height: 1.03;
}
h1 em, h2 em { font-style: normal; color: var(--verde); }
h2 { font-size: clamp(2.15rem, 1.15rem + 2.5vw, 3.45rem); }
.numero {
  display: flex; align-items: center; gap: .65em;
  margin-bottom: 14px;
  font: 800 12.5px/1.2 var(--f-testo);
  letter-spacing: .17em; text-transform: uppercase; color: var(--nero);
}

/* pulsanti */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .65em;
  min-height: 48px; padding: 0 24px;
  border: 1.5px solid transparent; border-radius: 8px;
  font: 700 15px/1.1 var(--f-testo); letter-spacing: .005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .16s var(--ease-out), box-shadow .2s ease;
}
.btn:active { transform: scale(.97); }
.btn-verde { background: var(--verde); color: var(--bianco); }
.btn-chiaro { background: rgba(254, 254, 254, .9); border-color: var(--verde); color: var(--verde); box-shadow: 0 8px 24px -14px rgba(11, 65, 22, .45); }
.btn-bordo { background: transparent; border-color: var(--verde); color: var(--verde); }
.btn-bianco { background: var(--bianco); color: var(--verde); }
@media (hover: hover) and (pointer: fine) {
  .btn-verde:hover { background: var(--verde-2); box-shadow: 0 10px 22px -12px rgba(11, 65, 22, .6); }
  .btn-chiaro:hover, .btn-bordo:hover { background: var(--verde); color: var(--bianco); }
  .btn-bianco:hover { background: var(--avorio); }
  .btn:hover .freccia { transform: translate(2px, -2px); }
}
.freccia {
  display: inline-block; width: 13px; height: 13px; flex: none;
  background-color: currentColor;
  -webkit-mask: url("../img/icone/freccia-esterna.png") center / contain no-repeat;
  mask: url("../img/icone/freccia-esterna.png") center / contain no-repeat;
  transition: transform .2s var(--ease-out);
}

/* ───────── testata ───────── */
.testata { position: fixed; inset: 0 0 auto 0; z-index: 50; pointer-events: none; }
.testata-pannello {
  pointer-events: auto;
  display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px);
  width: min(1180px, 100% - 15vw); height: var(--testata-h);
  padding: 0 clamp(18px, 2vw, 30px) 0 clamp(20px, 3.3vw, 48px);
  background: var(--bianco);
  border-bottom-right-radius: 18px;
  box-shadow: 0 12px 32px -22px rgba(20, 20, 20, .35);
  transition: box-shadow .3s ease;
}
.testata.scorre .testata-pannello { box-shadow: 0 14px 36px -18px rgba(20, 20, 20, .32); }
.testata-logo { flex: none; display: block; touch-action: manipulation; }
.testata-logo img { height: 54px; width: auto; }
.menu { flex: 1; display: flex; justify-content: center; }
.menu-voci { display: flex; gap: clamp(20px, 3vw, 46px); }
.menu-voci a {
  position: relative; display: inline-block; padding: 8px 0;
  font: 600 15px/1 var(--f-testo); color: var(--nero); text-decoration: none;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.menu-voci a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: var(--verde);
  transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .menu-voci a:hover::after { transform: scaleX(1); } }
.menu-cta-telefono { display: none; }
.testata-separatore { width: 1px; height: 30px; background: var(--linea-2); flex: none; }
.lingue { display: flex; align-items: center; gap: 7px; font: 700 15px/1 var(--f-testo); color: var(--nero); flex: none; }
.lingua-dopo { color: var(--grigio-2); }
.lingue-barra { color: var(--grigio-2); font-weight: 500; }
.testata-cta { flex: none; min-height: 44px; padding: 0 20px; font-size: 14.5px; }
.menu-apri { display: none; }

/* ───────── hero ───────── */
.hero {
  position: relative; overflow: hidden;
  height: clamp(640px, 100svh, 980px);
  background: var(--avorio);
  isolation: isolate;
}
.hero-fondo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%;
}
.hero-ramo { position: absolute; z-index: 1; pointer-events: none; height: auto; }
.hero-ramo--limoni { top: 64px; left: -1.6%; width: clamp(170px, 25vw, 380px); }
.hero-ramo--arance { top: -24px; right: -1.8%; width: clamp(180px, 27.5vw, 410px); }
.hero-testo {
  position: relative; z-index: 3;
  max-width: 820px; margin: 0 auto;
  padding: clamp(128px, 17vh, 168px) 24px 0;
  text-align: center;
}
.occhiello { margin-bottom: 18px; font: 800 13.5px/1.2 var(--f-testo); letter-spacing: .22em; text-transform: uppercase; color: var(--nero); }
.hero h1 { font-size: clamp(2.55rem, 1.05rem + 3.7vw, 4.15rem); line-height: 1.02; }
.hero-sotto { margin: 22px auto 30px; font: 500 clamp(1.05rem, .92rem + .45vw, 1.34rem)/1.5 var(--f-testo); color: var(--nero); }
.hero-prato {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  width: 100%; height: clamp(120px, 19.5vw, 290px); object-fit: cover; object-position: 50% 0%;
  pointer-events: none;
}
.hero-piante { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hero-pianta { position: absolute; bottom: 5%; transform: translateX(-50%); }
.hero-pianta img { height: 100%; width: auto; max-width: none; position: relative; z-index: 1; }
.hero-pianta::after {
  content: ""; position: absolute; left: 50%; bottom: -1.2%; z-index: 0;
  width: var(--ombra, 58%); height: 5%; min-height: 10px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(28, 40, 14, .42), rgba(28, 40, 14, 0));
}
.hero-pianta--limone { left: 19%; height: 46%; --ombra: 62%; }
.hero-pianta--mandarino { left: 39.5%; height: 44%; --ombra: 50%; }
.hero-pianta--kumquat { left: 60%; height: 37%; --ombra: 46%; }
.hero-pianta--ulivo { left: 80.5%; height: 51%; --ombra: 64%; }

/* ───────── fascia delle tre voci ───────── */
.fascia { background: var(--avorio); border-bottom: 1px solid var(--linea); position: relative; z-index: 1; }
.fascia-voci { display: grid; grid-template-columns: repeat(3, 1fr); padding-block: 26px; }
.fascia-voci li {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  font: 600 17px/1.25 var(--f-testo); color: var(--nero);
}
.fascia-voci li + li { border-left: 1px solid var(--linea-2); }
.fascia-voci img { width: 46px; height: 46px; object-fit: contain; }

/* ───────── sezioni ───────── */
.sezione { position: relative; padding-block: clamp(38px, 4vw, 58px); overflow-x: clip; }
.sezione + .sezione > .contenitore { position: relative; }
.sezione + .sezione > .contenitore::before {
  content: ""; position: absolute; top: calc(-1 * clamp(38px, 4vw, 58px)); left: var(--bordo-pagina); right: var(--bordo-pagina);
  height: 1px; background: var(--linea);
}
.domande > .contenitore::before { display: none; }
.sezione-testa { margin-bottom: clamp(28px, 3vw, 40px); }
.ramo { position: absolute; z-index: 2; pointer-events: none; height: auto; }

/* 01 · le piante */
.piante { padding-top: clamp(40px, 3.8vw, 56px); }
.piante .sezione-testa { margin-bottom: 18px; }
.piante-fila { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 1.8vw, 26px); }
.pianta { text-align: center; }
.pianta-foto { position: relative; height: clamp(230px, 21.5vw, 310px); }
.pianta-foto::before {
  content: ""; position: absolute; left: 3%; right: 3%; bottom: 0; height: 17%; max-height: 54px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--bianco) 0%, var(--disco) 52%, var(--box) 100%);
  box-shadow: 0 18px 26px -16px rgba(70, 58, 36, .32), inset 0 -3px 8px rgba(140, 118, 84, .12);
}
.pianta-foto img {
  position: absolute; left: 50%; bottom: 8%;
  height: 91%; width: auto; max-width: 112%; object-fit: contain; object-position: 50% 100%;
  transform: translateX(-50%);
  filter: drop-shadow(0 10px 8px rgba(40, 34, 20, .16));
}
.pianta h3 { margin: 18px 0 12px; font: 500 clamp(1.5rem, 1.1rem + .7vw, 1.9rem)/1.1 var(--f-titoli); color: var(--nero); }
.pianta-dati { display: inline-grid; gap: 7px; justify-items: start; text-align: left; font-size: 14.5px; line-height: 1.35; color: var(--grigio); }
.pianta-dati li { display: flex; align-items: center; gap: 9px; }
.pianta-dati img { width: 20px; height: 20px; object-fit: contain; flex: none; }
.piante-piede {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(24px, 3vw, 44px);
  margin-top: clamp(36px, 3.6vw, 52px);
}
.piante-elenco {
  padding: 4px clamp(24px, 3vw, 44px);
  border-left: 1px solid var(--linea-2); border-right: 1px solid var(--linea-2);
  font-size: 15px; line-height: 2; color: var(--testo);
}
.elenco-taglio { display: block; overflow: hidden; }
.elenco-voci { display: block; margin-left: -1.3em; text-wrap: balance; }
.elenco-voci > span { display: inline-block; white-space: nowrap; }
.elenco-voci > span::before { content: "·"; display: inline-block; width: 1.3em; text-align: center; color: var(--grigio-2); }
.piante-nuove { font: 800 15px/1.35 var(--f-testo); color: var(--nero); }

/* 02 · forme e misure */
.forme .sezione-testa { max-width: 60%; }
.ramo--limone { top: -64px; right: -34px; width: clamp(150px, 19vw, 300px); transform: rotate(-24deg); }
.forme-griglia { display: grid; grid-template-columns: 2.3fr 1fr 1fr 1fr; align-items: end; }
.forme-gruppo {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 16px;
  padding: 4px 20px; font: 700 15.5px/1.2 var(--f-testo); color: var(--nero); text-align: center;
}
.forme-gruppo + .forme-gruppo { border-left: 1px solid var(--linea-2); }
.forme-gruppo--forme ul { display: flex; gap: clamp(24px, 3.6vw, 54px); justify-content: center; align-items: flex-end; }
.forme-gruppo--forme li { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.forme-gruppo img { height: 68px; width: auto; }
.forme-gruppo--forme li:nth-child(3) img { height: 38px; margin-top: 30px; }

/* 03 · il vivaio */
.ramo--zagara { top: -54px; right: -26px; width: clamp(120px, 13.5vw, 205px); }
.vivaio-griglia { display: grid; grid-template-columns: 1.22fr 1.5fr 0.95fr; grid-template-rows: 1fr 1fr; gap: 16px 20px; }
.vivaio h2 { font-size: clamp(2.05rem, 1.05rem + 2.15vw, 3.05rem); }
.vivaio-testo { grid-column: 1; grid-row: 1 / span 2; padding-right: clamp(0px, 1.6vw, 24px); }
.vivaio-testo > p:not(.numero) { margin-top: 22px; max-width: 33ch; font-size: 17px; line-height: 1.55; color: var(--testo); }
.vivaio-icone { display: flex; gap: 30px; margin-top: 26px; }
.vivaio-icone img { height: 34px; width: auto; }
.vivaio-foto { overflow: hidden; border-radius: var(--raggio); background: var(--box); }
.vivaio-foto img { width: 100%; height: 100%; object-fit: cover; }
.vivaio-foto--grande { grid-column: 2; grid-row: 1 / span 2; min-height: clamp(240px, 21vw, 310px); }
.vivaio-foto--alta { grid-column: 3; grid-row: 1; }
.vivaio-foto--bassa { grid-column: 3; grid-row: 2; }

/* 04 · qualità documentata */
.qualita { padding-block: clamp(32px, 3.2vw, 46px); }
.qualita-riga { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px; }
.qualita-testa .numero { margin-bottom: 10px; }
.qualita-voci { display: flex; align-items: center; }
.qualita-voci li { display: flex; align-items: center; gap: 22px; padding: 4px clamp(20px, 2.8vw, 40px); }
.qualita-voci li:last-child { padding-right: 0; }
.qualita-voci li + li { border-left: 1px solid var(--linea-2); }
.qualita-marchio { display: grid; place-items: center; width: 132px; height: 72px; border-radius: 12px; background: var(--box); flex: none; }
.qualita-marchio img { height: 32px; width: auto; }
.qualita-voci p { max-width: 21ch; font-size: 16px; line-height: 1.38; color: var(--testo); }
.qualita-voci strong { display: block; margin-top: 4px; font-size: 18px; font-weight: 800; color: var(--nero); letter-spacing: .01em; }

/* 05 · come lavoriamo */
.ramo--kumquat-sx { top: 36px; left: -70px; width: clamp(140px, 13vw, 210px); transform: scaleX(-1) rotate(-22deg); }
.fornitura-griglia { display: grid; grid-template-columns: 1fr clamp(250px, 23vw, 330px); gap: clamp(32px, 4vw, 60px); align-items: center; }
.fornitura .sezione-testa { margin-bottom: 6px; }
.percorso { position: relative; height: 205px; }
.percorso-linea { position: absolute; left: 0; top: 0; width: 100%; height: 120px; overflow: visible; }
.percorso-linea path { fill: none; stroke: var(--verde-medio); stroke-width: 1.6; vector-effect: non-scaling-stroke; opacity: .55; }
.passi { position: absolute; inset: 0; }
.passo { position: absolute; width: 27%; }
.passo--1 { left: calc(12% - 26px); top: calc(70px - 23px); }
.passo--2 { left: calc(45% - 26px); top: calc(52px - 23px); }
.passo--3 { left: calc(75% - 26px); top: calc(50px - 23px); }
.passo-segno { position: relative; display: block; width: 46px; height: 46px; margin-bottom: 14px; }
.passo-numero {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--avorio); border: 1.5px solid var(--verde);
  font: 700 17px/1 var(--f-testo); color: var(--verde);
}
.passo-icona { position: absolute; left: 62px; top: -34px; height: 30px; width: auto; }
.passo--1 .passo-icona { left: 74px; top: -24px; }
.passo h3 { font: 800 16px/1.3 var(--f-testo); color: var(--nero); margin-bottom: 4px; }
.passo p { font-size: 14.5px; line-height: 1.45; color: var(--grigio); max-width: 24ch; }
.fornitura-foto { position: relative; }
.fornitura-cornice { overflow: hidden; border-radius: var(--raggio); aspect-ratio: 4 / 3.1; background: var(--box); }
.fornitura-cornice img { width: 100%; height: 100%; object-fit: cover; }
.fornitura-foto figcaption {
  position: absolute; top: 14px; left: 14px; right: 14px;
  padding: 10px 16px; border-radius: 12px;
  background: rgba(254, 254, 254, .92);
  font: 500 19px/1.2 var(--f-titoli); color: var(--nero); text-align: center;
}
.fornitura-pianta { position: absolute; left: -44px; bottom: -18px; height: clamp(120px, 11vw, 160px); width: auto; filter: drop-shadow(0 10px 10px rgba(40, 34, 20, .22)); }

/* 06 · dalla Sicilia all'Europa */
.destinazioni-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.destinazioni-testo > p:not(.numero) { margin-top: 18px; font-size: 18px; color: var(--nero); }
.mappa-europa svg { width: 100%; max-width: 300px; height: auto; margin-inline: auto; overflow: visible; }
.mappa-terre path { fill: rgba(254, 254, 254, .55); stroke: var(--salvia); stroke-width: 1.25; stroke-linejoin: round; }
.mappa-rotte path { fill: none; stroke: var(--verde); stroke-width: 1.7; stroke-linecap: round; }
.mappa-punti circle { fill: var(--verde); }
.mappa-pin path { fill: var(--sole); }
.mappa-pin circle { fill: var(--bianco); }
.mappa-nomi text { font: 700 15px var(--f-testo); fill: var(--nero); }

/* fascia verde: quali piante cerchi */
.richiesta { position: relative; overflow: hidden; background: var(--verde); color: var(--bianco); }
.richiesta-riga { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 80px); padding-block: clamp(36px, 3.4vw, 50px); }
.richiesta h2 { color: var(--bianco); font-size: clamp(2rem, 1.05rem + 2.15vw, 3.15rem); line-height: 1.06; }
.richiesta-scelte { position: relative; z-index: 3; display: flex; flex-wrap: wrap; gap: 12px 14px; max-width: 380px; }
.pillola { position: relative; display: inline-flex; }
.pillola::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 12px; height: 8px; transform: translateY(-50%);
  background-color: var(--bianco); pointer-events: none;
  -webkit-mask: url("../img/icone/freccia-menu.png") center / contain no-repeat;
  mask: url("../img/icone/freccia-menu.png") center / contain no-repeat;
}
.pillola select {
  appearance: none; -webkit-appearance: none;
  min-height: 44px; min-width: 142px; padding: 0 42px 0 22px;
  border: 1.5px solid var(--salvia-chiaro); border-radius: 9px;
  background: transparent; color: var(--bianco);
  font: 600 15.5px/1 var(--f-testo); cursor: pointer;
  touch-action: manipulation; transition: background-color .2s ease, border-color .2s ease;
}
.pillola select option, .pillola select optgroup { color: var(--nero); background: var(--bianco); }
.pillola select.scelto { background: rgba(254, 254, 254, .14); border-color: var(--bianco); }
@media (hover: hover) and (pointer: fine) { .pillola select:hover { background: rgba(254, 254, 254, .1); } }
.pillola select:focus-visible { outline: 2px solid var(--bianco); outline-offset: 2px; }
.richiesta .btn-bianco { min-width: 300px; }
.ramo--kumquat { top: 50%; right: -56px; width: clamp(240px, 27vw, 420px); transform: translateY(-50%) rotate(-6deg); }

/* domande */
.domande { padding-block: clamp(38px, 4vw, 58px); }
.domande-griglia { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.domanda { border-bottom: 1px solid var(--linea); }
.domanda h3 { font: inherit; }
.domanda button {
  display: flex; align-items: center; gap: 22px; width: 100%;
  padding: 15px 0; border: 0; background: none; text-align: left; cursor: pointer;
  font: 700 16.5px/1.35 var(--f-testo); color: var(--nero);
  touch-action: manipulation;
}
.segno {
  position: relative; width: 18px; height: 18px; flex: none;
  background-color: var(--nero);
  -webkit-mask: url("../img/icone/piu.png") center / contain no-repeat;
  mask: url("../img/icone/piu.png") center / contain no-repeat;
}
.domanda.aperta .segno {
  -webkit-mask-image: url("../img/icone/meno.png"); mask-image: url("../img/icone/meno.png");
}
.risposta { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s var(--ease-out); }
.risposta > div { overflow: hidden; }
.domanda.aperta .risposta { grid-template-rows: 1fr; }
.risposta p { padding: 0 0 16px 40px; font-size: 15.5px; line-height: 1.5; color: var(--grigio-2); }

/* 07 · contatti */
.contatti-griglia { display: grid; grid-template-columns: 1.1fr 1fr; }
.contatti-info { padding-right: clamp(28px, 4vw, 60px); border-right: 1px solid var(--linea-2); }
.contatti .sezione-testa { margin-bottom: 10px; }
.contatti h2 { font-size: clamp(2.05rem, 1.1rem + 2.2vw, 3.1rem); }
.contatti-dove { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px; align-items: end; }
.contatti-dove address { font-style: normal; font-size: 16px; line-height: 1.6; color: var(--testo); padding-bottom: 4px; }
.contatti-mappa { position: relative; min-height: 150px; }
.mappa-sicilia { width: 100%; max-width: 300px; height: auto; margin-left: auto; }
.mappa-sicilia-terra { fill: rgba(254, 254, 254, .6); stroke: var(--salvia); stroke-width: 1.8; stroke-linejoin: round; }
.contatti-mappa .thk-al-clic { margin-top: 10px; text-align: center; }
.thk-al-clic p { font-size: 11.5px; line-height: 1.4; color: var(--grigio); }
.thk-al-clic p + p { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; }
.thk-al-clic a { color: var(--verde); }
.thk-al-clic [data-thk-carica] {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  border: 1.5px solid var(--verde); border-radius: 8px; background: var(--bianco);
  font: 700 13.5px/1 var(--f-testo); color: var(--verde); cursor: pointer; touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
  transition: background-color .2s ease, color .2s ease, transform .16s var(--ease-out);
}
.thk-al-clic [data-thk-carica]:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .thk-al-clic [data-thk-carica]:hover { background: var(--verde); color: var(--bianco); } }
.contatti-mappa iframe { display: block; width: 100%; height: 250px; border: 0; border-radius: 14px; background: var(--box); }
.contatti-recapiti { margin: 18px 0 20px; font: 800 17px/1.5 var(--f-testo); color: var(--nero); }
.contatti-recapiti a { text-decoration: none; }
.contatti-recapiti .sep { margin: 0 14px; font-weight: 400; color: var(--grigio-2); }
@media (hover: hover) and (pointer: fine) { .contatti-recapiti a:hover { color: var(--verde); } }
.contatti-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 44px; }
.link-forte {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px;
  font: 800 16px/1 var(--f-testo); color: var(--nero); text-decoration: none;
  border-bottom: 2px solid var(--verde); min-height: 0; padding: 6px 0;
  touch-action: manipulation;
}
.modulo { display: grid; gap: 10px; align-content: start; padding-left: clamp(28px, 4vw, 60px); }
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo textarea {
  width: 100%; min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--linea-2); border-radius: 6px; background: var(--bianco);
  font: 500 16px/1.4 var(--f-testo); color: var(--nero);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.campo textarea { min-height: 92px; resize: vertical; }
.campo ::placeholder { color: var(--grigio); opacity: 1; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(11, 65, 22, .14); }
.campo.sbagliato input, .campo.sbagliato textarea { border-color: var(--errore); }
.campo-errore { margin-top: 5px; font-size: 13.5px; color: var(--errore); }
.thk-avviso-modulo { margin-top: 6px; max-width: 46ch; font-size: 13.5px; line-height: 1.5; color: var(--grigio); }
.thk-avviso-modulo a { color: var(--verde); font-weight: 600; }
.modulo-invia { justify-self: start; margin-top: 6px; min-width: 210px; }
.modulo-esito { font-size: 14.5px; color: var(--verde); }
.modulo-esito:empty { display: none; }

/* ───────── piè di pagina ───────── */
.piede { border-top: 1px solid var(--linea); padding-block: 34px 26px; }
.piede-riga { display: grid; grid-template-columns: auto auto auto 1fr; align-items: center; }
.piede-logo img { height: 60px; width: auto; }
.piede-descr {
  margin-left: clamp(24px, 3vw, 44px); padding: 2px clamp(24px, 3vw, 44px);
  border-left: 1px solid var(--linea-2); border-right: 1px solid var(--linea-2);
  font-size: 15px; line-height: 1.6; color: var(--verde-2);
}
.piede-link { padding-left: clamp(24px, 3vw, 44px); font-size: 15px; line-height: 1.75; color: var(--testo); }
.piede-link a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .piede-link a:hover, .credit a:hover { color: var(--verde); text-decoration: underline; } }
.lingue--piede { justify-self: end; }
.piede-legale {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px;
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--linea);
  font-size: 13px; line-height: 1.6; color: var(--grigio);
}
.piede-legale a { color: inherit; }
.credit a { color: var(--verde); font-weight: 700; text-decoration: none; }

/* ───────── pagine di servizio: privacy, cookie, note legali, 404 ───────── */
.servizio { padding-block: calc(var(--testata-h) + clamp(40px, 5vw, 72px)) clamp(56px, 6vw, 96px); }
.servizio-corpo { max-width: 900px; }
.legale h1, .pagina-404 h1 { font-size: clamp(2.4rem, 1.4rem + 2.6vw, 3.6rem); margin-bottom: 12px; }
.legale h1 + p { font-size: 14px; color: var(--grigio); margin-bottom: 24px; }
.legale h2 { margin: 38px 0 12px; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); }
.legale p, .legale li { font-size: 16.5px; line-height: 1.65; color: var(--testo); }
.legale p + p { margin-top: 12px; }
.legale ul { list-style: disc; padding-left: 1.3em; margin-top: 10px; display: grid; gap: 6px; }
.legale a { color: var(--verde); }
.legale table { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.legale th, .legale td { padding: 12px 14px; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.legale th { font-weight: 800; color: var(--nero); background: var(--box); }
.pagina-404 { padding-block: 24px 40px; }
.pagina-404 > p:not(.numero) { margin: 8px 0 28px; font-size: 18px; }

/* ───────── computer piccolo e tablet ───────── */
@media (max-width: 1199px) {
  .testata-pannello { width: min(1180px, 100% - 8vw); }
  .menu-voci { gap: 22px; }
  .testata-logo img { height: 48px; }
  .piante-piede { grid-template-columns: auto 1fr; }
  .piante-nuove { grid-column: 1 / -1; }
  .qualita-riga { grid-template-columns: 1fr; }
}

@media (max-width: 1023px) {
  :root { --testata-h: 66px; }
  .testata-pannello { width: 100%; height: var(--testata-h); border-radius: 0 0 16px 16px; gap: 14px; padding: 0 12px 0 18px; }
  .testata-logo img { height: 42px; }
  .testata-separatore, .testata-cta { display: none; }
  .lingue { margin-left: auto; }
  .menu-apri {
    display: grid; place-content: center; gap: 7px; width: 44px; height: 44px; padding: 0;
    border: 0; border-radius: 10px; background: transparent; cursor: pointer; touch-action: manipulation;
  }
  .menu-apri span { display: block; width: 24px; height: 2px; border-radius: 2px; background: var(--nero); transition: transform .25s var(--ease-out); }
  .menu-apri:active { background: var(--box); }
  .menu-apri[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
  .menu-apri[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
  .menu {
    position: fixed; left: 0; right: 0; top: var(--testata-h); height: calc(100dvh - var(--testata-h));
    flex-direction: column; justify-content: flex-start; gap: 28px;
    padding: 28px var(--bordo-pagina) 40px; background: var(--avorio);
    overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s var(--ease-out), visibility 0s linear .22s;
  }
  .menu.aperto { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .3s var(--ease-out), visibility 0s; }
  .menu-voci { flex-direction: column; gap: 0; }
  .menu-voci li { border-bottom: 1px solid var(--linea); }
  .menu-voci a { display: block; padding: 18px 0; font: 500 30px/1.1 var(--f-titoli); }
  .menu-voci a::after { display: none; }
  .menu-cta-telefono { display: inline-flex; align-self: flex-start; }
  .vivaio-griglia { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .vivaio-testo { grid-column: 1 / -1; grid-row: auto; margin-bottom: 8px; }
  .vivaio-foto--grande { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 10; min-height: 0; }
  .vivaio-foto--alta, .vivaio-foto--bassa { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
  .fornitura-griglia { grid-template-columns: 1fr; }
  .fornitura-foto { max-width: 420px; margin-left: 48px; }
  .richiesta-riga { grid-template-columns: 1fr; }
  .domande-griglia { grid-template-columns: 1fr; }
  .contatti-griglia { grid-template-columns: 1fr; }
  .contatti-info { padding-right: 0; border-right: 0; }
  .modulo { padding-left: 0; margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--linea); }
  .piede-riga { grid-template-columns: auto 1fr; gap: 22px 0; }
  .piede-descr { border-right: 0; }
  .piede-link { padding-left: 0; }
  .lingue--piede { justify-self: start; margin-left: 0; }
}

/* ───────── telefono ───────── */
@media (max-width: 767px) {
  body { font-size: 16px; }
  .hero { height: max(680px, 100svh); }
  .hero-fondo { object-position: 50% 54%; }
  .hero-testo { padding-top: 168px; }
  .occhiello { font-size: 12px; letter-spacing: .2em; margin-bottom: 14px; }
  .hero h1 { font-size: clamp(2.3rem, 1.2rem + 5.6vw, 3rem); }
  .hero-sotto { margin: 16px auto 24px; font-size: 1.02rem; }
  .hero-ramo--limoni { top: 52px; left: -10px; width: 34vw; }
  .hero-ramo--arance { top: 40px; right: -12px; width: 36vw; }
  .hero-prato { height: 17%; object-position: 50% 0; }
  .hero-pianta { bottom: 5.2%; }
  .hero-pianta--limone { left: 14%; height: 27%; }
  .hero-pianta--mandarino { left: 38%; height: 26%; }
  .hero-pianta--kumquat { left: 62%; height: 21%; }
  .hero-pianta--ulivo { left: 86%; height: 30%; }

  .fascia-voci { padding-block: 18px; }
  .fascia-voci li { flex-direction: column; gap: 10px; padding: 0 6px; font-size: 13.5px; text-align: center; }
  .fascia-voci img { width: 36px; height: 36px; }

  .piante-fila {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 47%;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--bordo-pagina)); padding: 0 var(--bordo-pagina) 10px; scroll-padding-inline: var(--bordo-pagina);
    scrollbar-width: none;
  }
  .piante-fila::-webkit-scrollbar { display: none; }
  .pianta { scroll-snap-align: start; }
  .pianta-foto { height: 240px; }
  .pianta h3 { font-size: 1.6rem; margin: 14px 0 10px; }
  .pianta-dati { font-size: 13.5px; }
  .piante-piede { grid-template-columns: 1fr; gap: 18px; }
  .piante-piede .btn { justify-self: start; }
  .piante-elenco { padding: 14px 0; border: 0; border-top: 1px solid var(--linea-2); border-bottom: 1px solid var(--linea-2); font-size: 14px; line-height: 1.9; }
  .piante-nuove { grid-column: auto; }

  .forme .sezione-testa { max-width: 72%; }
  .ramo--limone { top: -40px; right: -30px; width: 150px; }
  .forme-griglia { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
  .forme-gruppo { padding: 4px 8px; font-size: 14px; gap: 12px; }
  .forme-gruppo--forme { grid-column: 1 / -1; padding-bottom: 26px; border-bottom: 1px solid var(--linea-2); }
  .forme-gruppo--forme ul { gap: 36px; }
  .forme-gruppo:nth-child(2) { border-left: 0; }
  .forme-gruppo img { height: 54px; }
  .forme-gruppo--forme li:nth-child(3) img { height: 30px; margin-top: 24px; }

  .ramo--zagara { top: -34px; right: -24px; width: 120px; }
  .vivaio-testo > p:not(.numero) { font-size: 16px; }

  .qualita-voci { flex-direction: column; align-items: stretch; }
  .qualita-voci li { padding: 16px 0; }
  .qualita-voci li + li { border-left: 0; border-top: 1px solid var(--linea-2); }
  .qualita-marchio { width: 96px; height: 64px; }

  .ramo--kumquat-sx { top: 26px; left: auto; right: -58px; width: 150px; transform: rotate(-16deg); }
  .percorso { height: auto; padding: 8px 0 0; }
  .percorso-linea { display: none; }
  .passi { position: relative; display: grid; gap: 26px; }
  .passi::before { content: ""; position: absolute; left: 22px; top: 24px; bottom: 30px; width: 1.5px; background: var(--salvia-chiaro); }
  .passo { position: relative; left: auto; top: auto; width: auto; display: grid; grid-template-columns: 46px 1fr; column-gap: 18px; }
  .passo--1, .passo--2, .passo--3 { left: auto; top: auto; }
  .passo-segno { grid-row: 1 / span 2; margin: 0; }
  .passo-icona, .passo--1 .passo-icona { left: auto; right: -8px; top: 4px; position: absolute; }
  .passo h3, .passo p { grid-column: 2; }
  .passo h3 { padding-top: 2px; padding-right: 46px; }
  .passo-segno .passo-icona { display: none; }
  .fornitura-foto { max-width: none; margin: 8px 0 0 30px; }

  .destinazioni-griglia { grid-template-columns: 1fr; }
  .mappa-europa svg { max-width: 330px; }

  .richiesta-riga { padding-block: 40px 44px; gap: 24px; }
  .richiesta h2 { position: relative; z-index: 3; max-width: 78%; }
  .ramo--kumquat { top: -26px; right: -80px; width: 230px; transform: rotate(-10deg); }
  .richiesta-scelte { max-width: none; }
  .pillola { flex: 1 1 calc(50% - 7px); }
  .pillola select { width: 100%; min-width: 0; }
  .richiesta .btn-bianco { min-width: 0; width: 100%; }

  .domanda button { font-size: 16px; gap: 16px; }
  .risposta p { padding-left: 34px; font-size: 15px; }

  .contatti-dove { grid-template-columns: 1fr; gap: 18px; }
  .mappa-sicilia { margin: 0 auto; max-width: 320px; }
  .contatti-recapiti { display: grid; gap: 4px; }
  .contatti-recapiti .sep { display: none; }
  .modulo-invia { width: 100%; }

  .piede-riga { grid-template-columns: 1fr; }
  .piede-descr { margin-left: 0; padding: 0; border: 0; }
  .piede-legale { flex-direction: column; }
}

@media (max-width: 380px) {
  .fascia-voci li { font-size: 12.5px; }
  .pillola { flex-basis: 100%; }
}

/* «riduci animazioni»: niente reset globale, ogni movimento ha la sua regola (blocco 5-bis in fondo) */

/* ───────── giro 1 di correzione (thk-confronto-visivo) ───────── */
/* testata: da ferma come nel design, scorrendo copre tutta la larghezza (5-bis: con transform, in fondo) */
html.menu-aperto .testata-pannello { border-radius: 0; box-shadow: none; }
/* hero: pulsante più grande, titolo e sottotitolo più pieni */
.hero h1 { font-weight: 600; }
.hero-sotto { font-weight: 600; }
.hero .btn-chiaro { min-height: 56px; min-width: 265px; padding: 0 34px; font-size: 17px; font-weight: 800; }
.hero .btn-chiaro .freccia { width: 15px; height: 15px; }
/* 01 · piedistalli con spessore, bordo netto e ombra; il vaso appoggia sul piano */
.pianta-foto::before {
  left: 5%; right: 5%; bottom: 14px; height: 40px; max-height: none;
  background: linear-gradient(180deg, var(--bianco) 0%, var(--disco) 70%, var(--box) 100%);
  border: 1px solid rgba(160, 140, 110, .22);
  box-shadow: 0 7px 0 -1px #E4DCCF, 0 8px 0 -1px rgba(160, 140, 110, .28), 0 22px 22px -10px rgba(70, 58, 36, .30);
}
.pianta-foto img { bottom: 32px; height: calc(100% - 40px); }
/* testi piccoli più scuri e più grandi */
.pianta-dati { font-size: 15px; color: var(--testo); }
.passo p { font-size: 15.5px; color: var(--testo); }
.risposta p { font-size: 16px; color: var(--testo); }
/* 02 · il ramo di limone grande e orizzontale accanto al titolo */
.ramo--limone { top: 6px; right: -36px; width: clamp(220px, 26vw, 390px); transform: rotate(40deg); }
/* 03 · il mosaico basso: la grande 3:2, le due piccole larghe, alte quanto il testo */
@media (min-width: 1024px) { .vivaio-griglia { grid-template-columns: 1fr 1.45fr 0.95fr; grid-template-rows: auto auto; align-items: stretch; } }
.vivaio-foto { position: relative; }
.vivaio-foto img { position: absolute; inset: 0; }
.vivaio-foto--grande { aspect-ratio: 3 / 2; min-height: 0; height: auto; }
.vivaio-foto--alta, .vivaio-foto--bassa { min-height: 0; }
/* 05 · il ramo di kumquat più in basso sul bordo, accanto al passo 1, lontano dai testi */
.ramo--kumquat-sx { top: 236px; left: -96px; width: clamp(130px, 11vw, 165px); transform: scaleX(-1) rotate(-14deg); }
/* 06 · la mappa grande e centrale, contorni salvia, nomi grandi */
@media (min-width: 768px) { .destinazioni-griglia { grid-template-columns: 0.85fr 1.15fr; } }
.mappa-europa svg { max-width: 440px; }
.mappa-terre path { fill: none; stroke: var(--salvia); stroke-width: 2; }
.mappa-rotte path { stroke-width: 2.2; }
.mappa-nomi text { font-size: 20px; font-weight: 800; }
/* fascia verde: Agrumi e Ulivi sulla prima riga, Forma e vaso sotto */
.richiesta-scelte { max-width: 340px; }
.pillola:nth-child(1) select { width: 168px; }
.pillola:nth-child(2) select { width: 158px; }
.pillola:nth-child(3) select { width: 200px; }
/* piè di pagina: descrizione grigio scuro e la linea prima di IT / EN */
.piede-descr { color: #27382C; }
.lingue--piede { padding-left: clamp(24px, 3vw, 44px); border-left: 1px solid var(--linea-2); align-self: stretch; }

@media (max-width: 1023px) {
  .lingue--piede { border-left: 0; padding-left: 0; }
}
@media (max-width: 767px) {
  .hero { height: max(720px, 100svh); }
  .hero-testo { padding-top: 156px; }
  .hero-ramo--limoni { top: 18px; left: -12px; width: 26vw; }
  .hero-ramo--arance { top: 10px; right: -14px; width: 27vw; }
  .hero .btn-chiaro { min-width: 240px; min-height: 52px; font-size: 16px; }
  .ramo--limone { top: 0; right: -64px; width: 170px; transform: rotate(40deg); }
  .ramo--zagara { right: -54px; }
  .ramo--kumquat-sx { display: none; }
  .ramo--kumquat { top: -24px; right: -84px; width: 170px; }
  .richiesta h2 { max-width: 70%; }
  .richiesta-scelte { max-width: none; }
  .pillola:nth-child(1) select, .pillola:nth-child(2) select, .pillola:nth-child(3) select { width: 100%; }
  .vivaio-griglia { grid-template-rows: auto; }
  .vivaio-foto--grande { aspect-ratio: 16 / 10; }
  .vivaio-foto--alta, .vivaio-foto--bassa { aspect-ratio: 4 / 3; }
  .elenco-taglio { overflow-x: auto; scrollbar-width: none; }
  .elenco-taglio::-webkit-scrollbar { display: none; }
  .elenco-voci { white-space: nowrap; text-wrap: nowrap; }
  .pianta-dati { font-size: 14px; }
}

/* ───────── ritocchi dopo il giro 2 ───────── */
.piante-piede > * { min-width: 0; }
.piante-elenco { min-width: 0; }
.ramo--limone { top: -46px; right: -30px; width: clamp(170px, 16vw, 230px); }
.forme-griglia { position: relative; z-index: 3; }
.contatti-dove { align-items: start; }
@media (max-width: 767px) {
  .piante-piede { grid-template-columns: minmax(0, 1fr); }
  .elenco-taglio { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .ramo--limone { top: -10px; right: -60px; width: 150px; }
}

/* ═════════════════ 5-bis · il sito vivo (09 § 0-bis-2, con le regole di Emil Kowalski) ═════════════════
   Una brezza leggera muove rami e piante; la prima schermata entra al caricamento, col solo CSS; le sezioni
   arrivano mentre si scorre (.reveal e [data-reveal] → .in, main.js); quello che si preme risponde anche al dito.
   Si muovono solo transform (anche translate, rotate, scale) e opacity; clip-path e il tratto delle linee servono
   solo a svelare. Nascosto c'è solo con html.anima, che mette lo script in <head>: senza JavaScript si vede tutto,
   e se main.js non arriva il «salvagente» mostra tutto dopo 3 secondi. «Riduci animazioni»: restano le
   dissolvenze, spariscono gli spostamenti. */

/* ── la brezza: movimenti continui, lenti, mai in sincrono ── */
@keyframes brezza { to { rotate: 1.4deg; } }
@keyframes brezza-inversa { to { rotate: -1.4deg; } }
@keyframes brezza-lieve { to { rotate: .7deg; } }
@keyframes brezza-lieve-inversa { to { rotate: -.7deg; } }

/* ── la prima schermata ── */
@keyframes sale { from { opacity: 0; translate: 0 30px; } }
@keyframes appare { from { opacity: 0; } }
@keyframes respiro { from { scale: 1.06; } }
@keyframes ramo-da-sinistra { from { opacity: 0; translate: -8% -10%; rotate: -6deg; } }
@keyframes ramo-da-destra { from { opacity: 0; translate: 8% -10%; rotate: 6deg; } }
@keyframes pianta-sale { from { opacity: 0; translate: 0 36px; scale: .96; } }

@media (prefers-reduced-motion: no-preference) {
  /* il mare non sparisce mai: si assesta appena, mentre entrano titolo, rami e piante */
  .hero-fondo { transform-origin: 50% 56%; animation: respiro 2s var(--ease-out) backwards; }
  .hero-testo > * { animation: sale .9s var(--ease-out) backwards; }
  .hero-testo > :nth-child(1) { animation-delay: .12s; }
  .hero-testo > :nth-child(2) { animation-delay: .22s; }
  .hero-testo > :nth-child(3) { animation-delay: .36s; }
  .hero-testo > :nth-child(4) { animation-delay: .5s; }
  /* i rami crescono dal loro angolo, poi restano appesi alla brezza */
  .hero-ramo--limoni { transform-origin: 0 0; animation: ramo-da-sinistra 1.4s var(--ease-out) .05s backwards, brezza 4.6s var(--ease-in-out) 1.45s infinite alternate; }
  .hero-ramo--arance { transform-origin: 100% 0; animation: ramo-da-destra 1.4s var(--ease-out) .12s backwards, brezza-inversa 5.4s var(--ease-in-out) 1.52s infinite alternate; }
  /* le quattro piante salgono sul prato una dopo l'altra (il perno è la base del vaso) */
  .hero-pianta { transform-origin: 0 100%; animation: pianta-sale 1.1s var(--ease-out) backwards; }
  .hero-pianta--limone { animation-delay: .55s; }
  .hero-pianta--mandarino { animation-delay: .63s; }
  .hero-pianta--kumquat { animation-delay: .71s; }
  .hero-pianta--ulivo { animation-delay: .79s; }
  .hero-pianta img { transform-origin: 50% 100%; animation: brezza-lieve 4.2s var(--ease-in-out) -1s infinite alternate; }
  .hero-pianta--mandarino img { animation-name: brezza-lieve-inversa; animation-duration: 4.9s; animation-delay: -2.6s; }
  .hero-pianta--kumquat img { animation-duration: 3.9s; animation-delay: -.4s; }
  .hero-pianta--ulivo img { animation-name: brezza-lieve-inversa; animation-duration: 5.4s; animation-delay: -3.3s; }

  /* le piante sui dischi: la brezza, e col mouse si sollevano dal disco */
  .pianta-foto img { transform-origin: 0 100%; animation: brezza-lieve 4.6s var(--ease-in-out) -1.2s infinite alternate; transition: translate .28s ease, scale .28s ease; }
  .pianta:nth-child(2) .pianta-foto img { animation-name: brezza-lieve-inversa; animation-duration: 5.2s; animation-delay: -3.1s; }
  .pianta:nth-child(3) .pianta-foto img { animation-duration: 4.1s; animation-delay: -.5s; }
  .pianta:nth-child(4) .pianta-foto img { animation-name: brezza-lieve-inversa; animation-duration: 5.7s; animation-delay: -2.2s; }
  .pianta:nth-child(5) .pianta-foto img { animation-duration: 4.9s; animation-delay: -3.8s; }
  .fornitura-pianta { transform-origin: 50% 100%; animation: brezza-lieve 4.4s var(--ease-in-out) -1.4s infinite alternate; }

  /* i rami delle sezioni: la brezza li muove sempre lontano dai testi e dalle icone */
  .ramo { animation: brezza 5.6s var(--ease-in-out) -2s infinite alternate; }
  .ramo--limone { animation-name: brezza-inversa; animation-duration: 5.2s; animation-delay: -1.6s; }
  .ramo--zagara { transform-origin: 100% 35%; animation-duration: 6.1s; animation-delay: -2.3s; }
  .ramo--kumquat-sx { animation-name: brezza-inversa; animation-duration: 5.8s; animation-delay: -.8s; }
  .ramo--kumquat { animation-duration: 6.4s; animation-delay: -3.4s; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-testo > *, .hero-ramo, .hero-pianta { animation: appare .6s ease backwards; }
  .hero-testo > :nth-child(n+3), .hero-pianta { animation-delay: .15s; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .pianta:hover .pianta-foto img { translate: 0 -10px; scale: 1.03; }
}

/* ── le entrate allo scroll: un ritmo solo, 0,8-0,9 s, 26-30 px, uno dopo l'altro a 70 ms ── */
.reveal { transition: opacity .8s var(--ease-out), translate .9s var(--ease-out); }
.ramo.reveal { transition: opacity 1s var(--ease-out), translate 1.3s var(--ease-out); }
html.anima .reveal:not(.in) { opacity: 0; }

[data-reveal="gruppo"] > * { transition: opacity .75s var(--ease-out) var(--d, 0s), translate .85s var(--ease-out) var(--d, 0s); }
html.anima [data-reveal="gruppo"]:not(.in) > * { opacity: 0; }
[data-reveal="gruppo"] > :nth-child(2) { --d: .07s; }
[data-reveal="gruppo"] > :nth-child(3) { --d: .14s; }
[data-reveal="gruppo"] > :nth-child(4) { --d: .21s; }
[data-reveal="gruppo"] > :nth-child(5) { --d: .28s; }
[data-reveal="gruppo"] > :nth-child(6) { --d: .35s; }
[data-reveal="gruppo"] > :nth-child(7) { --d: .42s; }
[data-reveal="gruppo"] > :nth-child(8) { --d: .49s; }
.modulo[data-reveal] > :nth-child(2) { --d: .05s; }
.modulo[data-reveal] > :nth-child(3) { --d: .1s; }
.modulo[data-reveal] > :nth-child(4) { --d: .15s; }
.modulo[data-reveal] > :nth-child(5) { --d: .2s; }
.modulo[data-reveal] > :nth-child(6) { --d: .25s; }
.modulo[data-reveal] > :nth-child(7) { --d: .3s; }
/* chi ha già le sue transizioni (pulsanti, scelte) le tiene */
.richiesta-scelte[data-reveal] > .pillola { transition: opacity .75s var(--ease-out) var(--d, 0s), translate .85s var(--ease-out) var(--d, 0s), transform .16s var(--ease-out); }
[data-reveal="gruppo"] > .btn { transition: opacity .75s var(--ease-out) var(--d, 0s), translate .85s var(--ease-out) var(--d, 0s), background-color .2s ease, color .2s ease, border-color .2s ease, transform .16s var(--ease-out), box-shadow .2s ease; }

/* 02 · le forme una dopo l'altra, da sinistra: cespuglio, alberello, ciotola, poi le misure */
html.anima .forme-griglia[data-reveal]:not(.in) > .forme-gruppo--forme { opacity: 1; translate: none; }
.forme-gruppo--forme li { transition: opacity .75s var(--ease-out) var(--d, 0s), translate .85s var(--ease-out) var(--d, 0s); }
html.anima .forme-griglia[data-reveal]:not(.in) .forme-gruppo--forme li { opacity: 0; }
.forme-gruppo--forme li:nth-child(2) { --d: .07s; }
.forme-gruppo--forme li:nth-child(3) { --d: .14s; }
.forme-griglia > .forme-gruppo:nth-child(2) { --d: .21s; }
.forme-griglia > .forme-gruppo:nth-child(3) { --d: .28s; }
.forme-griglia > .forme-gruppo:nth-child(4) { --d: .35s; }

/* 03 e 05 · le foto si svelano dal basso, come una pianta che cresce, e si assestano */
/* il valore d'arrivo del ritaglio è scritto: da inset() a none il browser salterebbe senza movimento */
.vivaio-foto[data-reveal] > img, .fornitura-foto[data-reveal] .fornitura-cornice > img {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.1s var(--ease-out) var(--d, 0s), scale 1.5s var(--ease-out) var(--d, 0s), opacity .8s var(--ease-out) var(--d, 0s), transform .28s ease;
}
.vivaio-foto--alta { --d: .12s; }
.vivaio-foto--bassa { --d: .24s; }
.vivaio-foto[data-reveal].in, .fornitura-foto[data-reveal].in .fornitura-cornice { transition: background-color 0s linear 1.2s; }
.fornitura-foto[data-reveal] figcaption { transition: opacity .7s var(--ease-out) .45s, translate .8s var(--ease-out) .45s; }
.fornitura-foto[data-reveal] .fornitura-pianta { transition: opacity .8s var(--ease-out) .6s, translate 1s var(--ease-out) .6s; }
html.anima .fornitura-foto[data-reveal]:not(.in) :is(figcaption, .fornitura-pianta) { opacity: 0; }

/* 05 · la linea del percorso si disegna, e i passi arrivano quando li raggiunge */
.percorso[data-reveal] .percorso-linea { clip-path: inset(0 0 0 0); transition: clip-path 1.6s var(--ease-in-out) .1s, opacity .8s var(--ease-out); }
.percorso[data-reveal] .passo { transition: opacity .7s var(--ease-out) var(--d, 0s), translate .8s var(--ease-out) var(--d, 0s); }
.passo--1 { --d: .5s; }
.passo--2 { --d: .78s; }
.passo--3 { --d: 1s; }
html.anima .percorso[data-reveal]:not(.in) .passo { opacity: 0; }

/* 06 · dalla Sicilia partono le rotte, poi si accendono le mete */
.mappa-europa[data-reveal] .mappa-terre { transition: opacity .9s var(--ease-out); }
.mappa-europa[data-reveal] .pin-salto { transition: opacity .5s var(--ease-out) .3s, transform .7s var(--ease-out) .3s; }
.mappa-europa[data-reveal] .mappa-rotte path { stroke-dasharray: var(--l, none); }
.mappa-europa[data-reveal].in .mappa-rotte path { transition: stroke-dashoffset 1.3s var(--ease-in-out) var(--d, .5s), opacity .8s var(--ease-out) .4s; }
.mappa-rotte path:nth-child(2) { --d: .62s; }
.mappa-rotte path:nth-child(3) { --d: .74s; }
.mappa-europa[data-reveal] :is(.mappa-punti circle, .mappa-nomi text) { transition: opacity .5s var(--ease-out) var(--d, 0s); }
.mappa-punti circle:nth-child(1) { --d: 1.6s; }
.mappa-punti circle:nth-child(2) { --d: 1.72s; }
.mappa-punti circle:nth-child(3) { --d: 1.82s; }
.mappa-nomi text:nth-child(1) { --d: 1.7s; }
.mappa-nomi text:nth-child(2) { --d: 1.82s; }
.mappa-nomi text:nth-child(3) { --d: .45s; }
html.anima .mappa-europa[data-reveal]:not(.in) :is(.mappa-terre, .pin-salto, .mappa-punti circle, .mappa-nomi text) { opacity: 0; }

/* 07 · il segnaposto del vivaio cade sulla Sicilia */
.contatti-dove.reveal .pin-salto { transition: opacity .5s var(--ease-out) .4s, transform .7s var(--ease-out) .4s; }
html.anima .contatti-dove.reveal:not(.in) .pin-salto { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  html.anima .reveal:not(.in) { translate: 0 30px; }
  html.anima .ramo.reveal:not(.in) { translate: 48px 0; }
  html.anima .ramo--kumquat-sx.reveal:not(.in) { translate: -48px 0; }
  html.anima [data-reveal="gruppo"]:not(.in) > * { translate: 0 26px; }
  html.anima .forme-griglia[data-reveal]:not(.in) .forme-gruppo--forme li { translate: 0 26px; }
  html.anima .vivaio-foto[data-reveal]:not(.in) > img,
  html.anima .fornitura-foto[data-reveal]:not(.in) .fornitura-cornice > img { clip-path: inset(100% 0 0 0); scale: 1.14; }
  html.anima .vivaio-foto[data-reveal]:not(.in),
  html.anima .fornitura-foto[data-reveal]:not(.in) .fornitura-cornice { background-color: transparent; }
  html.anima .fornitura-foto[data-reveal]:not(.in) figcaption { translate: 0 -14px; }
  html.anima .fornitura-foto[data-reveal]:not(.in) .fornitura-pianta { translate: 0 28px; }
  html.anima .percorso[data-reveal]:not(.in) .percorso-linea { clip-path: inset(0 100% 0 0); }
  html.anima .percorso[data-reveal]:not(.in) .passo { translate: 0 22px; }
  html.anima .mappa-europa[data-reveal]:not(.in) .pin-salto { transform: translateY(-16px); }
  html.anima .mappa-europa[data-reveal]:not(.in) .mappa-rotte path { stroke-dashoffset: var(--l, 0); }
  html.anima .contatti-dove.reveal:not(.in) .pin-salto { transform: translateY(-18px); }
}
@media (prefers-reduced-motion: reduce) {
  html.anima .vivaio-foto[data-reveal]:not(.in) > img,
  html.anima .fornitura-foto[data-reveal]:not(.in) .fornitura-cornice > img,
  html.anima .percorso[data-reveal]:not(.in) .percorso-linea,
  html.anima .mappa-europa[data-reveal]:not(.in) .mappa-rotte path { opacity: 0; }
}
@media (max-width: 767px) {
  .percorso[data-reveal] .passi::before { clip-path: inset(0 0 0 0); transition: clip-path 1.2s var(--ease-in-out) .1s, opacity .8s var(--ease-out); }
  .passo--1 { --d: .1s; }
  .passo--2 { --d: .3s; }
  .passo--3 { --d: .5s; }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  html.anima .percorso[data-reveal]:not(.in) .passi::before { clip-path: inset(0 0 100% 0); }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  html.anima .percorso[data-reveal]:not(.in) .passi::before { opacity: 0; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .vivaio-foto:hover > img, .fornitura-foto:hover .fornitura-cornice > img { transform: scale(1.04); }
}

/* il salvagente: se main.js non arriva, dopo 3 secondi si vede tutto */
@keyframes salvagente { to { opacity: 1; translate: none; clip-path: none; stroke-dashoffset: 0; } }
@keyframes salvagente-segnaposto { to { opacity: 1; transform: none; } }
html.anima:not(.anima-pronta) :is(.reveal, [data-reveal], [data-reveal] *) { animation: salvagente .01s 3s forwards; }
html.anima:not(.anima-pronta) .passi::before { animation: salvagente .01s 3s forwards; }
html.anima:not(.anima-pronta) .pin-salto { animation: salvagente-segnaposto .01s 3s forwards; }

/* ── quello che si preme risponde subito, anche al dito ── */
.testata-logo, .piede-logo, .link-forte { transition: transform .16s var(--ease-out), color .2s ease; }
.piede-logo { display: inline-block; touch-action: manipulation; }
.testata-logo:active, .piede-logo:active, .link-forte:active, .pillola:active { transform: scale(.97); }
.menu-voci a:active, .contatti-recapiti a:active, .piede-link a:active, .domanda button:active { color: var(--verde); }
.domanda button .segno { transition: rotate .25s var(--ease-out), scale .12s var(--ease-out), background-color .2s ease; }
.domanda:not(.aperta) button .segno { transition-duration: .18s, .12s, .2s; }
.domanda button:active .segno { scale: .82; }
@media (hover: hover) and (pointer: fine) {
  .domanda button { transition: color .2s ease; }
  .domanda button:hover, .link-forte:hover { color: var(--verde); }
  .domanda button:hover .segno { background-color: var(--verde); }
  .link-forte:hover .freccia { transform: translate(2px, -2px); }
}

/* domande: la risposta si apre e il testo arriva; si chiude più in fretta di come si apre */
.risposta p { transition: opacity .15s ease, translate .15s var(--ease-out); }
.domanda:not(.aperta) .risposta p { opacity: 0; }
.domanda.aperta .risposta p { transition: opacity .22s ease .06s, translate .25s var(--ease-out) .05s; }
.domanda:not(.aperta) .risposta { transition-duration: .18s; }
html:not(.anima) .risposta { grid-template-rows: 1fr; }
html:not(.anima) .risposta p { opacity: 1; translate: none; }
@media (prefers-reduced-motion: no-preference) {
  .domanda.aperta .segno { rotate: 180deg; }
  .domanda:not(.aperta) .risposta p { translate: 0 -6px; }
}
@media (prefers-reduced-motion: reduce) {
  .risposta { transition: none; }
}

/* ── la testata ──
   computer: da ferma è il pannello del design; scorrendo il bianco arriva a tutta larghezza. Si spostano lo strato
   bianco e le voci (transform), la misura del pannello non cambia mai. */
@media (min-width: 1024px) {
  .testata { --taglio: max(calc(100vw - 1180px), 15vw); }
  .testata-pannello { position: relative; isolation: isolate; width: 100%; background: none; box-shadow: none; border-radius: 0; transition: none; }
  .testata.scorre .testata-pannello { box-shadow: none; }
  .testata-pannello::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--bianco); border-bottom-right-radius: 18px;
    box-shadow: 0 12px 32px -22px rgba(20, 20, 20, .35);
    transform: translateX(calc(-1 * var(--taglio)));
    transition: transform .45s var(--ease-in-out), border-radius .25s ease, box-shadow .3s ease;
  }
  .menu { translate: calc(-.5 * var(--taglio)) 0; transition: translate .45s var(--ease-in-out); }
  /* il menu spostato a sinistra copriva metà del logo: «Isgrò Salvatore» non portava alla home (trovato al 6-ter, 07/11/2026) */
  .testata-logo { position: relative; z-index: 1; }
  .testata-separatore, .lingue { translate: calc(-1 * var(--taglio)) 0; transition: translate .45s var(--ease-in-out); }
  .testata-cta { translate: calc(-1 * var(--taglio)) 0; transition: translate .45s var(--ease-in-out), background-color .2s ease, color .2s ease, border-color .2s ease, transform .16s var(--ease-out), box-shadow .2s ease; }
  .testata.scorre .testata-pannello::before { transform: none; border-bottom-right-radius: 0; box-shadow: 0 14px 36px -18px rgba(20, 20, 20, .32); }
  .testata.scorre :is(.menu, .testata-separatore, .lingue, .testata-cta) { translate: none; }
}
@media (min-width: 1024px) and (max-width: 1199px) { .testata { --taglio: 8vw; } }
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .testata-pannello::before { transition: box-shadow .3s ease; }
  .menu, .testata-separatore, .lingue { transition: none; }
  .testata-cta { transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .16s var(--ease-out), box-shadow .2s ease; }
}

/* telefono: la testata si fa da parte mentre si legge scendendo, e torna appena si risale (main.js) */
@media (max-width: 1023px) {
  .testata { transition: transform .34s var(--ease-out); }
  .testata.via { transform: translateY(calc(-100% - 28px)); transition-duration: .24s; }
  /* il menu a tutto schermo: le voci arrivano una dopo l'altra; alla chiusura vanno via tutte insieme, più in fretta */
  .menu-voci li { opacity: 0; transition: opacity .15s ease, translate .15s var(--ease-out); }
  .menu.aperto .menu-voci li { opacity: 1; translate: none; transition: opacity .4s var(--ease-out) var(--d, 0s), translate .5s var(--ease-out) var(--d, 0s); }
  .menu-voci li:nth-child(1) { --d: .06s; }
  .menu-voci li:nth-child(2) { --d: .11s; }
  .menu-voci li:nth-child(3) { --d: .16s; }
  .menu-voci li:nth-child(4) { --d: .21s; }
  .menu-cta-telefono { opacity: 0; transition: opacity .15s ease, translate .15s var(--ease-out), background-color .2s ease, color .2s ease, transform .16s var(--ease-out); }
  .menu.aperto .menu-cta-telefono { opacity: 1; translate: none; transition: opacity .4s var(--ease-out) .27s, translate .5s var(--ease-out) .27s, background-color .2s ease, color .2s ease, transform .16s var(--ease-out); }
}
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .menu-voci li, .menu-cta-telefono { translate: 0 16px; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .menu, .menu.aperto { transform: none; }
  .testata { transition: none; }
}

/* ═════════════════ step 6 · il copy al posto dei testi del design (09 § 0-ter) ═════════════════
   Il copy si adatta alla grafica: stesse sezioni, stesse schede, stessi spazi. Qui solo quello che serve perché i
   testi nuovi stiano nei blocchi del design. */
/* hero: il marchio dell'H1 sta nel posto dell'occhiello, sopra il titolo grande; la riga grande comincia maiuscola */
.hero h1 > .occhiello, .hero h1 > .hero-titolo { display: block; }
.hero-titolo::first-letter { text-transform: uppercase; }
@media (prefers-reduced-motion: no-preference) {
  /* gli stessi tempi del 5-bis: occhiello, titolo, sottotitolo, pulsante */
  .hero-testo > h1 { animation: none; }
  .hero-testo > h1 > :is(.occhiello, .hero-titolo) { animation: sale .9s var(--ease-out) .12s backwards; }
  .hero-testo > h1 > .hero-titolo { animation-delay: .22s; }
  .hero-testo > .hero-sotto { animation-delay: .36s; }
  .hero-testo > .btn { animation-delay: .5s; }
}
/* 01: «Vedi gli ulivi» nel posto della scritta in grassetto, accanto all'elenco */
.piante-piede .piante-nuove.link-forte { justify-self: start; white-space: nowrap; font-size: 15px; }
/* 03: tre paragrafi brevi e il rimando alla storia */
.vivaio-testo > p:not(.numero) + p { margin-top: 10px; }
.vivaio-testo > p.vivaio-rimando:not(.numero) { margin-top: 16px; }
.vivaio-rimando .link-forte { font-size: 15.5px; }
/* 04: il nome del Servizio Fitosanitario in tre righe */
.qualita-voci p { max-width: 25ch; }
/* 05: i passi con le frasi intere del copy */
.passo p { max-width: none; }
.passo p a { color: inherit; text-underline-offset: 2px; }
.fornitura-foto figcaption { font-size: 18px; line-height: 1.22; }
/* 07: indirizzo, orari e rimando; i recapiti uno sotto l'altro */
.contatti-dove address p + p { margin-top: 10px; }
.contatti-orari strong { font-weight: 800; color: var(--nero); }
.contatti-orari a { color: var(--verde); font-weight: 700; }
.contatti-rimando .link-forte { font-size: 15px; }
.contatti-recapiti { display: grid; justify-items: start; gap: 2px; }
.contatti-recapiti .etichetta { font-weight: 500; color: var(--testo); }
/* piè di pagina: i recapiti col numero da toccare */
.piede-descr a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .piede-descr a:hover { color: var(--verde); text-decoration: underline; } }
/* 404: i due rimandi sotto il pulsante */
.pagina-404-link { display: flex; flex-wrap: wrap; gap: 14px 32px; margin-top: 26px; }
/* step 6 · niente parole sole in fondo ai blocchi, e i pulsanti lunghi stanno nel telefono */
.vivaio-testo > p, .passo p, .risposta p, .contatti-dove address p, .destinazioni-testo > p,
.thk-avviso-modulo, .thk-al-clic p { text-wrap: pretty; }
.piante h2, .qualita-voci p, .passo h3, .fornitura-foto figcaption { text-wrap: balance; }
@media (max-width: 767px) {
  .hero .btn-chiaro { min-width: 0; max-width: 100%; padding: 0 22px; font-size: 15px; }
  /* i due titoli del catalogo, una riga ciascuno come le due righe del design */
  .piante h2 { font-size: min(2.15rem, 8.1vw); }
}
@media (max-width: 380px) {
  .btn { white-space: normal; text-align: center; padding-block: 10px; }
}

/* ═════════════════ 6-bis · le pagine interne (09 § 0-quater): la base comune, poi /agrumi e /ulivi ═════════════════
   Coi pezzi della home e con le sue classi (sezione, numero, destinazioni, fornitura-foto, vivaio-foto, piante e
   pianta, forme-griglia, passi e passo, richiesta, btn, link-forte): nessuna classe nuova. Testata e piè di pagina
   sono quelli della home, uguali. Qui c'è solo come si dispongono nelle pagine interne, sotto body.pagina-interna e
   gli attributi data-* delle sezioni (data-testa, data-forme, data-catalogo, data-frutti, data-caratteristiche,
   data-coltivazione, data-cta): la home non cambia. Il movimento è quello del 5-bis, con le stesse curve. */

/* ── base comune: i titoli, e la testa della pagina sotto la testata fissa ── */
.pagina-interna h2 { font-size: clamp(2.05rem, 1.05rem + 2.15vw, 3.05rem); }
.pagina-interna .sezione-testa h2 + p { margin-top: 16px; max-width: 60ch; font-size: 17px; line-height: 1.55; color: var(--testo); text-wrap: pretty; }
.pagina-interna [data-testa] {
  padding-top: calc(var(--testata-h) + clamp(30px, 4.4vw, 64px));
  padding-bottom: clamp(48px, 5.2vw, 76px);
}
.pagina-interna [data-testa] .destinazioni-griglia { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(36px, 5vw, 84px); }
/* le briciole: la forma dell'occhiello e dei numeri del kit («VIVAI ISGRÒ SALVATORE — AGRUMI»), il marchio porta alla home */
.pagina-interna [data-testa] .numero { flex-wrap: wrap; gap: .35em .65em; margin-bottom: 20px; }
.pagina-interna [data-testa] .numero a { color: inherit; text-decoration: none; transition: color .2s ease; touch-action: manipulation; }
.pagina-interna [data-testa] .numero [aria-current] { color: var(--verde); }
.pagina-interna [data-testa] .numero a:active { color: var(--verde); }
@media (hover: hover) and (pointer: fine) { .pagina-interna [data-testa] .numero a:hover { color: var(--verde); } }
.pagina-interna [data-testa] h1 { font-size: clamp(2.3rem, 1.15rem + 2.85vw, 3.7rem); font-weight: 600; line-height: 1.03; }
@media (min-width: 1024px) { .pagina-interna [data-testa] h1 em { display: block; } }
.pagina-interna [data-testa] .destinazioni-testo > p:not(.numero) {
  margin: 22px 0 30px; max-width: 34ch;
  font: 600 clamp(1.05rem, .95rem + .4vw, 1.28rem)/1.5 var(--f-testo); color: var(--nero); text-wrap: pretty;
}
.pagina-interna [data-testa] .btn-verde { min-height: 54px; padding: 0 30px; font-size: 16px; }
/* la foto del vivaio in cornice, con la sua pianta «in 3D» davanti, come nella 05 della home, e il ramo sull'angolo */
.pagina-interna [data-testa] .fornitura-foto { width: 100%; max-width: 640px; margin: 0 0 0 auto; }
.pagina-interna [data-testa] .fornitura-cornice { aspect-ratio: 4 / 3.2; }
.pagina-interna [data-testa] .fornitura-pianta { left: -14%; bottom: -9%; height: 74%; width: auto; z-index: 2; }
.pagina-interna [data-testa] .hero-ramo { top: -58px; right: -44px; left: auto; width: clamp(130px, 15vw, 230px); z-index: 3; }
@media (prefers-reduced-motion: no-preference) {
  /* la testa entra al caricamento, come la hero della home: briciole, titolo, sottotitolo, pulsante */
  .pagina-interna [data-testa] .destinazioni-testo > * { animation: sale .9s var(--ease-out) backwards; }
  .pagina-interna [data-testa] .destinazioni-testo > :nth-child(1) { animation-delay: .08s; }
  .pagina-interna [data-testa] .destinazioni-testo > :nth-child(2) { animation-delay: .18s; }
  .pagina-interna [data-testa] .destinazioni-testo > :nth-child(3) { animation-delay: .32s; }
  .pagina-interna [data-testa] .destinazioni-testo > :nth-child(4) { animation-delay: .46s; }
}
@media (prefers-reduced-motion: reduce) {
  .pagina-interna [data-testa] .destinazioni-testo > * { animation: appare .6s ease backwards; }
}

/* ── i blocchi di testo e foto (vivaio-griglia della 03) ── */
/* agrumi · forme e vasi: il testo e due foto, una per forma */
@media (min-width: 1024px) {
  .pagina-interna [data-forme] .vivaio-griglia { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; align-items: start; gap: clamp(16px, 1.8vw, 24px); }
  .pagina-interna [data-forme] .vivaio-testo { grid-column: 1; grid-row: 1; }
  .pagina-interna [data-forme] .vivaio-foto--alta { grid-column: 2; grid-row: 1; }
  .pagina-interna [data-forme] .vivaio-foto--bassa { grid-column: 3; grid-row: 1; }
}
.pagina-interna [data-forme] .vivaio-foto--alta, .pagina-interna [data-forme] .vivaio-foto--bassa { aspect-ratio: 4 / 5; }
.pagina-interna [data-forme] .vivaio-testo > p:not(.numero) { max-width: 38ch; }
.pagina-interna [data-forme] .pianta-dati { display: grid; gap: 10px; margin-top: 14px; font-size: 16.5px; line-height: 1.4; color: var(--testo); }
.pagina-interna [data-forme] .pianta-dati img { width: 24px; height: 24px; }
/* agrumi · fiori e frutti: il mosaico della 03, con una foto in più sotto il testo */
@media (min-width: 1024px) {
  .pagina-interna [data-frutti] .vivaio-griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, .95fr); grid-template-rows: auto auto; }
  .pagina-interna [data-frutti] .vivaio-testo { grid-column: 1; grid-row: 1; padding-bottom: 8px; }
  .pagina-interna [data-frutti] .vivaio-foto--grande { grid-column: 2; grid-row: 1 / span 2; aspect-ratio: auto; min-height: 440px; }
  .pagina-interna [data-frutti] .vivaio-foto--alta { grid-column: 3; grid-row: 1; }
  .pagina-interna [data-frutti] .vivaio-foto--bassa { grid-column: 3; grid-row: 2; }
  .pagina-interna [data-frutti] .vivaio-griglia > .vivaio-foto:last-child { grid-column: 1; grid-row: 2; min-height: 200px; }
}
@media (max-width: 1023px) {
  .pagina-interna [data-frutti] .vivaio-griglia > .vivaio-foto:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
}
/* ulivi · le caratteristiche: le voci a due colonne, etichetta e valore, accanto alla chioma */
.pagina-interna [data-caratteristiche] .destinazioni-griglia { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 80px); }
.pagina-interna [data-caratteristiche] dl { margin: 26px 0 0; border-top: 1px solid var(--linea); }
.pagina-interna [data-caratteristiche] dl > div {
  display: grid; grid-template-columns: minmax(0, 15.5em) minmax(0, 1fr); gap: 4px 20px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--linea);
}
.pagina-interna [data-caratteristiche] dt { display: flex; align-items: center; gap: 14px; font-size: 15.5px; line-height: 1.35; color: var(--grigio); }
.pagina-interna [data-caratteristiche] dt img { width: 26px; height: 26px; object-fit: contain; flex: none; }
.pagina-interna [data-caratteristiche] dd { margin: 0; font: 700 16.5px/1.35 var(--f-testo); color: var(--nero); }
.pagina-interna [data-caratteristiche] .vivaio-foto { position: relative; width: 100%; max-width: 470px; aspect-ratio: 4 / 5; justify-self: end; }

/* ── il catalogo: le schede della serie «Piante», come le piante sui dischi della 01 ── */
.pagina-interna [data-catalogo] { padding-bottom: clamp(52px, 5.4vw, 80px); }
.pagina-interna [data-catalogo] .sezione-testa { margin-bottom: clamp(26px, 3vw, 40px); }
.pagina-interna [data-catalogo] .piante-fila { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(44px, 4.2vw, 64px) clamp(14px, 1.8vw, 26px); }
.pagina-interna [data-catalogo][data-colonne="3"] .piante-fila { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pagina-interna [data-catalogo] .pianta { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.pagina-interna [data-catalogo] .pianta-foto { width: 100%; max-width: 320px; height: clamp(236px, 20.5vw, 300px); }
.pagina-interna [data-catalogo] .pianta h3 { margin: 16px 0 3px; text-wrap: balance; }
.pagina-interna [data-catalogo] .pianta > p { margin: 0 0 12px; font: italic 500 15px/1.35 var(--f-testo); color: var(--grigio); }
.pagina-interna [data-catalogo] .pianta-dati { margin-bottom: 20px; }
.pagina-interna [data-catalogo] .pianta .btn {
  margin-top: auto; width: 100%; max-width: 290px; min-height: 46px; padding: 9px 16px;
  font-size: 14.5px; line-height: 1.25; white-space: normal; text-align: center;
}
/* ulivi: le tre misure del catalogo nella striscia delle forme della 02 */
.pagina-interna [data-catalogo] .forme-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.pagina-interna [data-catalogo] .forme-griglia + p { margin: 32px 0 clamp(30px, 3.4vw, 46px); max-width: 60ch; font-size: 17px; line-height: 1.55; color: var(--testo); text-wrap: pretty; }
.pagina-interna [data-catalogo] .forme-gruppo { justify-content: flex-start; text-wrap: balance; }
.pagina-interna [data-catalogo] .forme-gruppo img { height: 62px; }
.pagina-interna [data-catalogo] .forme-gruppo:nth-child(2) img { height: 34px; margin-block: 14px; }
/* le entrate: una scheda alla volta, mentre si scende, colonna dopo colonna */
.pagina-interna [data-catalogo] .pianta.reveal:nth-child(4n+2) { transition-delay: .07s; }
.pagina-interna [data-catalogo] .pianta.reveal:nth-child(4n+3) { transition-delay: .14s; }
.pagina-interna [data-catalogo] .pianta.reveal:nth-child(4n+4) { transition-delay: .21s; }
.pagina-interna [data-catalogo][data-colonne="3"] .pianta.reveal:nth-child(n) { transition-delay: 0s; }
.pagina-interna [data-catalogo][data-colonne="3"] .pianta.reveal:nth-child(3n+2) { transition-delay: .07s; }
.pagina-interna [data-catalogo][data-colonne="3"] .pianta.reveal:nth-child(3n+3) { transition-delay: .14s; }
@media (prefers-reduced-motion: no-preference) {
  /* la brezza, mai in sincrono anche con tante schede */
  .pagina-interna [data-catalogo] .pianta:nth-child(4n+1) .pianta-foto img { animation-name: brezza-lieve; animation-duration: 4.6s; animation-delay: -1.2s; }
  .pagina-interna [data-catalogo] .pianta:nth-child(4n+2) .pianta-foto img { animation-name: brezza-lieve-inversa; animation-duration: 5.2s; animation-delay: -3.1s; }
  .pagina-interna [data-catalogo] .pianta:nth-child(4n+3) .pianta-foto img { animation-name: brezza-lieve; animation-duration: 4.1s; animation-delay: -.5s; }
  .pagina-interna [data-catalogo] .pianta:nth-child(4n+4) .pianta-foto img { animation-name: brezza-lieve-inversa; animation-duration: 5.7s; animation-delay: -2.2s; }
  .pagina-interna [data-catalogo] .pianta:nth-child(3n+2) .pianta-foto img { animation-delay: -3.8s; }
  .pagina-interna [data-catalogo] .pianta:nth-child(5n+3) .pianta-foto img { animation-duration: 4.9s; }
}
/* le foto in cornice (LEGGIMI.txt delle piante scontornate): la migliorata intera, al posto del disco */
.pagina-interna .pianta-foto::before { transition: opacity .3s ease; }
.pagina-interna .pianta-foto[data-cornice]::before { opacity: 0; }
.pagina-interna [data-catalogo] .pianta .pianta-foto img[data-cornice] {
  left: 6%; right: auto; top: 0; bottom: 0; width: 88%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 50%; border-radius: var(--raggio); background: var(--box);
  transform: none; filter: none; animation: none;
}
/* le schede con più foto: i numeri del kit a destra del disco, e la foto cambia al tocco; la cornice lascia loro il posto */
.pagina-interna [data-catalogo] .pianta .pianta-foto:has([data-scegli-foto]) img[data-cornice] { left: 2%; width: 80%; }
.pagina-interna .pianta-foto img[data-foto] { transition: opacity .45s var(--ease-out), translate .28s ease, scale .28s ease; }
.pagina-interna .pianta-foto img[data-foto]:not([data-attiva]) { opacity: 0; }
.pagina-interna [data-scegli-foto] { position: absolute; right: 0; top: 50%; z-index: 3; display: grid; justify-items: center; gap: 9px; translate: 0 -62%; }
.pagina-interna [data-catalogo] .pianta .pianta-foto [data-scegli-foto] > img { position: static; width: 20px; height: auto; max-width: none; transform: none; filter: none; animation: none; translate: none; scale: none; opacity: .9; }
.pagina-interna [data-scegli-foto] .passo-numero {
  position: relative; width: 30px; height: 30px; padding: 0; font-size: 13px; cursor: pointer;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: background-color .2s ease, color .2s ease, transform .16s var(--ease-out);
}
.pagina-interna [data-scegli-foto] .passo-numero::after { content: ""; position: absolute; inset: -7px; }
.pagina-interna [data-scegli-foto] .passo-numero[aria-pressed="true"] { background: var(--verde); color: var(--bianco); }
.pagina-interna [data-scegli-foto] .passo-numero:active { transform: scale(.9); }
.pagina-interna [data-scegli-foto] .passo-numero:focus-visible { outline-offset: 2px; border-radius: 50%; }
@media (hover: hover) and (pointer: fine) {
  .pagina-interna [data-scegli-foto] .passo-numero:not([aria-pressed="true"]):hover { background: var(--bianco); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .pagina-interna .pianta:hover .pianta-foto img[data-cornice] { translate: 0 -6px; scale: 1.02; }
}

/* ── la scheda di coltivazione: la cura e il rinvaso affiancati, coi passi della 05 in colonna ── */
.pagina-interna [data-coltivazione] .fornitura-griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.pagina-interna [data-coltivazione] .fornitura-percorso > p { margin-top: 16px; max-width: 44ch; font-size: 17px; line-height: 1.55; color: var(--testo); }
.pagina-interna :is([data-coltivazione], [data-storia]) .passi { position: relative; inset: auto; display: grid; gap: 22px; margin-top: 28px; }
.pagina-interna :is([data-coltivazione], [data-storia]) .passi::before { content: ""; position: absolute; left: 22px; top: 24px; bottom: 24px; width: 1.5px; background: var(--salvia-chiaro); }
.pagina-interna :is([data-coltivazione], [data-storia]) .passo { position: relative; left: auto; top: auto; width: auto; display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 18px; align-items: center; }
.pagina-interna :is([data-coltivazione], [data-storia]) .passo-segno { position: static; grid-row: auto; margin: 0; }
.pagina-interna :is([data-coltivazione], [data-storia]) .passo p { grid-column: 2; max-width: none; font-size: 16px; line-height: 1.5; color: var(--testo); text-wrap: pretty; }
/* la cura: il simbolino del kit dentro il cerchio */
.pagina-interna :is([data-coltivazione], [data-storia]) .passo-numero .passo-icona { display: block; position: static; width: auto; height: 22px; }
/* il rinvaso: il numero nel cerchio e il simbolino a destra, come i passi della home (da telefono, come lì, non c'è) */
.pagina-interna [data-coltivazione] ol .passo { padding-right: 52px; }
.pagina-interna [data-coltivazione] ol .passo-segno > .passo-icona { position: absolute; left: auto; right: 0; top: 50%; height: 30px; width: auto; translate: 0 -50%; }
/* la linea che unisce i cerchi si disegna dall'alto, come quella dei passi della home da telefono */
.pagina-interna :is([data-coltivazione], [data-storia]) .passi[data-reveal]::before { clip-path: inset(0 0 0 0); transition: clip-path 1.2s var(--ease-in-out) .1s, opacity .8s var(--ease-out); }
@media (prefers-reduced-motion: no-preference) {
  html.anima .pagina-interna :is([data-coltivazione], [data-storia]) .passi[data-reveal]:not(.in)::before { clip-path: inset(0 0 100% 0); }
}
@media (prefers-reduced-motion: reduce) {
  html.anima .pagina-interna :is([data-coltivazione], [data-storia]) .passi[data-reveal]:not(.in)::before { opacity: 0; }
}

/* ── la fascia verde in fondo alla pagina: il testo, il pulsante e il rimando all'altra pagina ── */
.pagina-interna [data-cta] .richiesta-riga { padding-block: clamp(44px, 4.4vw, 64px); }
.pagina-interna [data-cta] h2 { color: var(--bianco); font-size: clamp(2rem, 1.05rem + 2.15vw, 3.15rem); max-width: 12ch; }
.pagina-interna [data-cta] .richiesta-scelte { display: grid; justify-items: start; gap: 14px; max-width: 520px; }
.pagina-interna [data-cta] .richiesta-scelte p { font-size: 17px; line-height: 1.55; color: rgba(254, 254, 254, .92); text-wrap: pretty; }
.pagina-interna [data-cta] .richiesta-scelte .btn { margin-top: 10px; }
.pagina-interna [data-cta] .link-forte { color: var(--bianco); border-bottom-color: var(--salvia-chiaro); }
.pagina-interna [data-cta] .link-forte:active { color: var(--salvia-chiaro); }
@media (hover: hover) and (pointer: fine) { .pagina-interna [data-cta] .link-forte:hover { color: var(--salvia-chiaro); } }

/* ── computer piccolo e tablet ── */
@media (max-width: 1199px) {
  .pagina-interna [data-catalogo] .piante-fila { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pagina-interna [data-catalogo] .pianta.reveal:nth-child(n) { transition-delay: 0s; }
  .pagina-interna [data-catalogo] .pianta.reveal:nth-child(3n+2) { transition-delay: .07s; }
  .pagina-interna [data-catalogo] .pianta.reveal:nth-child(3n+3) { transition-delay: .14s; }
}
@media (max-width: 1023px) {
  .pagina-interna [data-testa] .fornitura-foto { max-width: 560px; }
  .pagina-interna [data-caratteristiche] .destinazioni-griglia { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
  .pagina-interna [data-caratteristiche] dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0; }
  .pagina-interna [data-caratteristiche] dd { padding-left: 40px; }
}

/* ── telefono ── */
@media (max-width: 767px) {
  .pagina-interna [data-testa] { padding-top: calc(var(--testata-h) + 26px); padding-bottom: 46px; }
  .pagina-interna [data-testa] .destinazioni-griglia { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .pagina-interna [data-testa] .numero { margin-bottom: 14px; }
  .pagina-interna [data-testa] h1 { font-size: clamp(2.1rem, 1.25rem + 3.6vw, 2.6rem); }
  .pagina-interna [data-testa] .destinazioni-testo > p:not(.numero) { margin: 16px 0 24px; font-size: 1.02rem; }
  .pagina-interna [data-testa] .btn-verde { min-height: 52px; padding: 0 22px; font-size: 15px; }
  .pagina-interna [data-testa] .fornitura-foto { width: auto; max-width: none; margin: 0 0 0 30px; }
  .pagina-interna [data-testa] .fornitura-pianta { left: -46px; bottom: -6%; height: 58%; }
  .pagina-interna [data-testa] .hero-ramo { top: -40px; right: -34px; width: 118px; }

  .pagina-interna [data-forme] .vivaio-griglia { gap: 12px; }

  .pagina-interna [data-caratteristiche] .destinazioni-griglia { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pagina-interna [data-caratteristiche] .vivaio-foto { max-width: none; aspect-ratio: 4 / 3; justify-self: stretch; }
  .pagina-interna [data-caratteristiche] .vivaio-foto img { object-position: 50% 30%; }
  .pagina-interna [data-caratteristiche] dt { font-size: 14.5px; }
  .pagina-interna [data-caratteristiche] dd { font-size: 16px; }

  .pagina-interna [data-catalogo] .piante-fila,
  .pagina-interna [data-catalogo][data-colonne="3"] .piante-fila {
    grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto;
    overflow: visible; margin-inline: 0; padding: 0; scroll-snap-type: none; gap: 36px 12px;
  }
  .pagina-interna [data-catalogo] .pianta.reveal:nth-child(n) { transition-delay: 0s; }
  .pagina-interna [data-catalogo] .pianta.reveal:nth-child(2n) { transition-delay: .08s; }
  .pagina-interna [data-catalogo] .pianta-foto { height: 212px; }
  .pagina-interna [data-catalogo] .pianta h3 { margin-top: 12px; font-size: 1.4rem; }
  .pagina-interna [data-catalogo] .pianta > p { margin-bottom: 10px; font-size: 13.5px; }
  .pagina-interna [data-catalogo] .pianta-dati { margin-bottom: 14px; font-size: 13.5px; }
  .pagina-interna [data-catalogo] .pianta-dati img { width: 18px; height: 18px; }
  .pagina-interna [data-catalogo] .pianta .btn { min-height: 44px; padding: 8px 10px; font-size: 13px; gap: .45em; }
  .pagina-interna [data-catalogo] .pianta .btn .freccia { width: 11px; height: 11px; }
  .pagina-interna [data-scegli-foto] { right: -4px; gap: 8px; }
  .pagina-interna [data-scegli-foto] .passo-numero { width: 28px; height: 28px; font-size: 12.5px; }
  .pagina-interna [data-catalogo] .forme-griglia { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .pagina-interna [data-catalogo] .forme-gruppo,
  .pagina-interna [data-catalogo] .forme-gruppo:nth-child(2) {
    flex-direction: row; justify-content: flex-start; gap: 16px; padding: 14px 0; text-align: left; font-size: 15px;
    border-left: 0; border-top: 1px solid var(--linea-2);
  }
  .pagina-interna [data-catalogo] .forme-gruppo:first-child { border-top: 0; padding-top: 0; }
  .pagina-interna [data-catalogo] .forme-gruppo img { flex: none; width: 46px; height: 40px; object-fit: contain; }
  .pagina-interna [data-catalogo] .forme-gruppo:nth-child(2) img { height: 40px; margin-block: 0; }
  .pagina-interna [data-catalogo] .forme-griglia + p { margin-top: 22px; }

  .pagina-interna [data-coltivazione] .fornitura-griglia { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .pagina-interna :is([data-coltivazione], [data-storia]) .passo { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; }
  .pagina-interna :is([data-coltivazione], [data-storia]) .passo-numero { width: 40px; height: 40px; font-size: 15.5px; }
  .pagina-interna :is([data-coltivazione], [data-storia]) .passo-numero .passo-icona { height: 19px; }
  .pagina-interna :is([data-coltivazione], [data-storia]) .passi::before { left: 19px; top: 20px; bottom: 20px; }
  .pagina-interna :is([data-coltivazione], [data-storia]) .passo p { font-size: 15px; }
  .pagina-interna [data-coltivazione] ol .passo { padding-right: 0; }

  .pagina-interna [data-cta] h2 { max-width: 70%; }
}
/* la scheda che resterebbe sola nell'ultima riga si distende su tutta la riga: la foto a sinistra; nome, forma,
   vaso e pulsante a destra (mai un elemento solo in una riga: 09 § 0-bis-3) */
@media (min-width: 1200px) {
  .pagina-interna [data-catalogo]:not([data-colonne="3"]) .pianta:last-child:nth-child(4n+1) {
    grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto auto 1fr;
    column-gap: clamp(14px, 3vw, 40px); justify-items: start; align-items: center; text-align: left;
  }
  .pagina-interna [data-catalogo]:not([data-colonne="3"]) .pianta:last-child:nth-child(4n+1) > .pianta-foto { grid-column: 1; grid-row: 1 / -1; }
  .pagina-interna [data-catalogo]:not([data-colonne="3"]) .pianta:last-child:nth-child(4n+1) > h3 { grid-column: 2; grid-row: 2; margin-top: 0; }
  .pagina-interna [data-catalogo]:not([data-colonne="3"]) .pianta:last-child:nth-child(4n+1) > p { grid-column: 2; grid-row: 3; }
  .pagina-interna [data-catalogo]:not([data-colonne="3"]) .pianta:last-child:nth-child(4n+1) > .pianta-dati { grid-column: 2; grid-row: 4; }
  .pagina-interna [data-catalogo]:not([data-colonne="3"]) .pianta:last-child:nth-child(4n+1) > .btn { grid-column: 2; grid-row: 5; margin-top: 0; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .pagina-interna [data-catalogo]:not([data-colonne="3"]) .pianta:last-child:nth-child(3n+1) {
    grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto auto 1fr;
    column-gap: clamp(14px, 3vw, 40px); justify-items: start; align-items: center; text-align: left;
  }
  .pagina-interna [data-catalogo]:not([data-colonne="3"]) .pianta:last-child:nth-child(3n+1) > .pianta-foto { grid-column: 1; grid-row: 1 / -1; }
  .pagina-interna [data-catalogo]:not([data-colonne="3"]) .pianta:last-child:nth-child(3n+1) > h3 { grid-column: 2; grid-row: 2; margin-top: 0; }
  .pagina-interna [data-catalogo]:not([data-colonne="3"]) .pianta:last-child:nth-child(3n+1) > p { grid-column: 2; grid-row: 3; }
  .pagina-interna [data-catalogo]:not([data-colonne="3"]) .pianta:last-child:nth-child(3n+1) > .pianta-dati { grid-column: 2; grid-row: 4; }
  .pagina-interna [data-catalogo]:not([data-colonne="3"]) .pianta:last-child:nth-child(3n+1) > .btn { grid-column: 2; grid-row: 5; margin-top: 0; }
}
@media (min-width: 768px) {
  .pagina-interna [data-catalogo][data-colonne="3"] .pianta:last-child:nth-child(3n+1) {
    grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto auto 1fr;
    column-gap: clamp(14px, 3vw, 40px); justify-items: start; align-items: center; text-align: left;
  }
  .pagina-interna [data-catalogo][data-colonne="3"] .pianta:last-child:nth-child(3n+1) > .pianta-foto { grid-column: 1; grid-row: 1 / -1; }
  .pagina-interna [data-catalogo][data-colonne="3"] .pianta:last-child:nth-child(3n+1) > h3 { grid-column: 2; grid-row: 2; margin-top: 0; }
  .pagina-interna [data-catalogo][data-colonne="3"] .pianta:last-child:nth-child(3n+1) > p { grid-column: 2; grid-row: 3; }
  .pagina-interna [data-catalogo][data-colonne="3"] .pianta:last-child:nth-child(3n+1) > .pianta-dati { grid-column: 2; grid-row: 4; }
  .pagina-interna [data-catalogo][data-colonne="3"] .pianta:last-child:nth-child(3n+1) > .btn { grid-column: 2; grid-row: 5; margin-top: 0; }
}
@media (max-width: 767px) {
  .pagina-interna [data-catalogo] .pianta:last-child:nth-child(odd) {
    grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto auto 1fr;
    column-gap: clamp(14px, 3vw, 40px); justify-items: start; align-items: center; text-align: left;
  }
  .pagina-interna [data-catalogo] .pianta:last-child:nth-child(odd) > .pianta-foto { grid-column: 1; grid-row: 1 / -1; }
  .pagina-interna [data-catalogo] .pianta:last-child:nth-child(odd) > h3 { grid-column: 2; grid-row: 2; margin-top: 0; }
  .pagina-interna [data-catalogo] .pianta:last-child:nth-child(odd) > p { grid-column: 2; grid-row: 3; }
  .pagina-interna [data-catalogo] .pianta:last-child:nth-child(odd) > .pianta-dati { grid-column: 2; grid-row: 4; }
  .pagina-interna [data-catalogo] .pianta:last-child:nth-child(odd) > .btn { grid-column: 2; grid-row: 5; margin-top: 0; }
}

/* ═════════════════ 6-bis · /chi-siamo e /contatti, sulla base comune di /agrumi e /ulivi ═════════════════
   Le stesse classi della home, nessuna nuova: le varianti stanno sotto body.pagina-interna[data-pagina] e negli
   attributi data-* delle sezioni (chi siamo: data-storia, data-crescono, data-controllo, data-certificazioni,
   data-clienti; contatti: data-recapiti, data-richiesta, data-dal-catalogo, data-arrivare). I passi della storia
   usano le regole della scheda di coltivazione di /agrumi (qui sopra, :is()). Il movimento è quello del 5-bis. */

/* ── i titoli delle sezioni nuove vanno a capo bilanciati (mai una parola sola sulla seconda riga) ── */
.pagina-interna :is([data-storia], [data-crescono], [data-controllo], [data-certificazioni], [data-clienti], [data-recapiti], [data-richiesta], [data-dal-catalogo], [data-arrivare]) h2 { text-wrap: balance; }

/* ── il menu e il piè di pagina segnano la pagina in cui sei (aria-current) ── */
.menu-voci a[aria-current="page"] { color: var(--verde); }
@media (min-width: 1024px) { .menu-voci a[aria-current="page"]::after { transform: scaleX(1); } }
.piede-link a[aria-current="page"] { color: var(--verde); font-weight: 700; }

/* ── la testa: le due righe sotto il titolo (chi siamo), il pulsante e il link affiancati (contatti) ── */
.pagina-interna [data-testa] .destinazioni-testo > p:not(.numero) + p:not(.numero) { margin-top: -14px; font-weight: 500; color: var(--testo); }
.pagina-interna[data-pagina="chi-siamo"] [data-testa] h1 em { display: inline; }
.pagina-interna[data-pagina="chi-siamo"] [data-testa] .destinazioni-testo > p:not(.numero) { max-width: 40ch; }
.pagina-interna[data-pagina="chi-siamo"] [data-testa] .fornitura-cornice img { object-position: 50% 14%; }
.pagina-interna[data-pagina="chi-siamo"] [data-testa] .fornitura-pianta { height: 70%; }
.pagina-interna[data-pagina="contatti"] [data-testa] h1 { text-wrap: balance; }
.pagina-interna [data-testa] .contatti-azioni { gap: 18px 34px; }
/* il ramo di limoni della hero nasce a sinistra: qui, sull'angolo destro della foto, si specchia sul posto */
.pagina-interna[data-pagina="contatti"] [data-testa] .hero-ramo { transform-origin: 100% 0; transform: translateX(-100%) scaleX(-1); }

/* ── chi siamo · la nostra storia: la foto a sinistra da computer, i passi della 05 in colonna a destra ── */
.pagina-interna [data-storia] .fornitura-griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
@media (min-width: 1024px) { .pagina-interna [data-storia] .fornitura-foto { order: -1; } }
.pagina-interna [data-storia] .fornitura-foto { width: 100%; max-width: none; margin: 0; }
.pagina-interna [data-storia] .fornitura-cornice { aspect-ratio: 4 / 3.3; }
.pagina-interna [data-storia] .passo p { max-width: 44ch; font-size: 16.5px; }

/* ── chi siamo · dove crescono le piante: il testo coi simbolini, poi due foto sfalsate ── */
@media (min-width: 1024px) {
  .pagina-interna [data-crescono] .vivaio-griglia { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; align-items: start; gap: clamp(16px, 1.8vw, 24px); }
  .pagina-interna [data-crescono] .vivaio-testo { grid-column: 1; grid-row: 1; }
  .pagina-interna [data-crescono] .vivaio-foto--alta { grid-column: 2; grid-row: 1; }
  .pagina-interna [data-crescono] .vivaio-foto--bassa { grid-column: 3; grid-row: 1; margin-top: clamp(56px, 6vw, 92px); }
}
.pagina-interna [data-crescono] .vivaio-foto--alta, .pagina-interna [data-crescono] .vivaio-foto--bassa { aspect-ratio: 4 / 5; }
.pagina-interna [data-crescono] .vivaio-testo > p:not(.numero) { max-width: 44ch; }

/* ── chi siamo · il controllo prima del carico: la foto a sinistra da computer, con la pianta davanti ── */
.pagina-interna [data-controllo] .destinazioni-griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); }
@media (min-width: 768px) { .pagina-interna [data-controllo] .fornitura-foto { order: -1; } }
.pagina-interna [data-controllo] .fornitura-foto { width: auto; max-width: 600px; margin: 0 0 0 clamp(36px, 4vw, 60px); }
.pagina-interna [data-controllo] .fornitura-cornice { aspect-ratio: 4 / 3.2; }
.pagina-interna [data-controllo] .fornitura-pianta { left: -13%; bottom: -9%; height: 52%; z-index: 2; }
.pagina-interna :is([data-controllo], [data-clienti]) .destinazioni-testo > p:not(.numero) {
  margin-top: 12px; max-width: 44ch; font-size: 17px; line-height: 1.55; color: var(--testo); text-wrap: pretty;
}
.pagina-interna :is([data-controllo], [data-clienti]) .destinazioni-testo > h2 + p { margin-top: 22px; }

/* ── chi siamo · le certificazioni: la 04 della home, le due voci affiancate, il riquadro del marchio sopra il testo ── */
.pagina-interna [data-certificazioni] { padding-block: clamp(40px, 4vw, 58px); }
.pagina-interna [data-certificazioni] .qualita-riga { grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: start; }
@media (min-width: 1024px) { .pagina-interna [data-certificazioni] .qualita-riga { grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: clamp(32px, 4vw, 64px); } }
.pagina-interna [data-certificazioni] .qualita-voci { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.pagina-interna [data-certificazioni] .qualita-voci li { flex-direction: column; align-items: flex-start; gap: 18px; padding: 0 clamp(20px, 3vw, 44px); }
.pagina-interna [data-certificazioni] .qualita-voci li:first-child { padding-left: 0; }
.pagina-interna [data-certificazioni] .qualita-voci p { max-width: 38ch; font-size: 16.5px; line-height: 1.55; text-wrap: pretty; }
.pagina-interna [data-certificazioni] .qualita-voci strong { display: inline; margin: 0; font-size: inherit; white-space: nowrap; }

/* ── chi siamo · i nostri clienti: il testo con le due voci, accanto la mappa della 06 ── */
.pagina-interna [data-clienti] .destinazioni-griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); }
.pagina-interna [data-clienti] .destinazioni-testo > h2 + p { font-weight: 700; color: var(--nero); }
.pagina-interna [data-clienti] .destinazioni-testo ul { margin-top: 14px; max-width: 46ch; border-top: 1px solid var(--linea); }
.pagina-interna [data-clienti] .destinazioni-testo li { position: relative; padding: 12px 0 12px 26px; border-bottom: 1px solid var(--linea); font-size: 17px; line-height: 1.5; color: var(--testo); text-wrap: pretty; }
.pagina-interna [data-clienti] .destinazioni-testo li::before { content: ""; position: absolute; left: 3px; top: calc(12px + .75em - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--verde-medio); }
.pagina-interna [data-clienti] .destinazioni-testo > ul + p { margin-top: 18px; }
.pagina-interna [data-clienti] .mappa-europa svg { max-width: 400px; }

/* ── contatti · i recapiti: il titolo a sinistra, i quattro recapiti in due colonne coi filetti della home ── */
.pagina-interna [data-recapiti] .contatti-griglia { grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.pagina-interna [data-recapiti] .sezione-testa { margin: 0; }
.pagina-interna [data-recapiti] .contatti-info { padding: 0; border: 0; }
.pagina-interna [data-recapiti] .contatti-recapiti { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); justify-items: stretch; gap: 0; margin: 0; border-top: 1px solid var(--linea); }
.pagina-interna [data-recapiti] .contatti-recapiti li { display: grid; align-content: start; gap: 4px; padding: 18px 24px 18px 0; border-bottom: 1px solid var(--linea); }
.pagina-interna [data-recapiti] .contatti-recapiti li:nth-child(even) { padding: 18px 0 18px clamp(20px, 3vw, 40px); border-left: 1px solid var(--linea); }
.pagina-interna [data-recapiti] .etichetta { font: 500 15px/1.4 var(--f-testo); color: var(--grigio); }
.pagina-interna [data-recapiti] .etichetta a { color: var(--verde); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.pagina-interna [data-recapiti] .contatti-recapiti li > a { justify-self: start; font: 800 clamp(1.1rem, .9rem + .45vw, 1.32rem)/1.3 var(--f-testo); color: var(--nero); overflow-wrap: anywhere; }
.pagina-interna [data-recapiti] .contatti-info > p { margin-top: 18px; font-size: 17px; line-height: 1.55; color: var(--testo); text-wrap: pretty; }

/* ── contatti · cosa indicare nella richiesta, coi simbolini del kit, e il modulo accanto ── */
.pagina-interna [data-richiesta] .contatti-griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.pagina-interna [data-richiesta] .sezione-testa { margin-bottom: 22px; }
.pagina-interna [data-richiesta] .sezione-testa h2 + p { max-width: 42ch; }
.pagina-interna [data-richiesta] .pianta-dati { display: grid; justify-items: stretch; gap: 0; max-width: 460px; border-top: 1px solid var(--linea); font-size: 16.5px; line-height: 1.4; color: var(--testo); }
.pagina-interna [data-richiesta] .pianta-dati li { gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.pagina-interna [data-richiesta] .pianta-dati img { width: 28px; height: 28px; }
.pagina-interna [data-richiesta] .modulo > h3 { margin-bottom: 6px; font: 500 clamp(1.75rem, 1.25rem + 1vw, 2.25rem)/1.1 var(--f-titoli); color: var(--nero); }
.pagina-interna [data-richiesta] .thk-avviso-modulo { margin-top: 2px; }
.pagina-interna .modulo[data-reveal] > :nth-child(8) { --d: .35s; }
.pagina-interna .modulo[data-reveal] > :nth-child(9) { --d: .4s; }
.pagina-interna .modulo[data-reveal] > :nth-child(10) { --d: .45s; }

/* ── contatti · le richieste dal catalogo: il testo e le due famiglie sui dischi della 01 ── */
.pagina-interna [data-dal-catalogo] .destinazioni-griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.pagina-interna [data-dal-catalogo] .sezione-testa { margin: 0; }
.pagina-interna [data-dal-catalogo] .piante-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 40px); }
.pagina-interna [data-dal-catalogo] .pianta { display: grid; justify-items: center; gap: 20px; }
.pagina-interna [data-dal-catalogo] .pianta-foto { width: 100%; max-width: 300px; height: clamp(230px, 20vw, 290px); }

/* ── contatti · come arrivare: indirizzo, percorso e orari; la mappa grande, al clic; la copertina con l'insegna ── */
.pagina-interna [data-arrivare] .contatti-griglia { grid-template-columns: minmax(0, .95fr) minmax(0, 1.3fr) minmax(0, .6fr); gap: clamp(24px, 2.6vw, 40px); align-items: stretch; }
.pagina-interna [data-arrivare] .contatti-info { padding: 0; border: 0; }
.pagina-interna [data-arrivare] .sezione-testa { margin-bottom: 18px; }
.pagina-interna [data-arrivare] address { font-style: normal; font-size: 17px; line-height: 1.55; color: var(--testo); }
.pagina-interna [data-arrivare] address strong { font-weight: 800; color: var(--nero); }
.pagina-interna [data-arrivare] address p + p { margin-top: 10px; text-wrap: pretty; }
.pagina-interna [data-arrivare] .contatti-azioni { margin-top: 22px; }
.pagina-interna [data-arrivare] .contatti-orari { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--linea); }
.pagina-interna [data-arrivare] .contatti-orari h2 { font-size: clamp(1.6rem, 1.15rem + .95vw, 2.1rem); }
.pagina-interna [data-arrivare] .contatti-orari p { margin-top: 10px; font-size: 16.5px; line-height: 1.55; color: var(--testo); text-wrap: pretty; }
.pagina-interna [data-arrivare] .contatti-mappa {
  position: relative; display: grid; align-content: center; justify-items: center; gap: 22px;
  min-height: clamp(380px, 33vw, 500px); padding: clamp(22px, 2.6vw, 40px);
  border-radius: var(--raggio); background: var(--box); overflow: hidden;
}
.pagina-interna [data-arrivare] .mappa-sicilia { max-width: 430px; margin: 0 auto; }
.pagina-interna [data-arrivare] .contatti-mappa .thk-al-clic { margin: 0; max-width: 46ch; }
.pagina-interna [data-arrivare] .thk-al-clic p { font-size: 13px; }
.pagina-interna [data-arrivare] .contatti-mappa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.pagina-interna [data-arrivare] .vivaio-foto img { object-position: 50% 30%; }
/* il segnaposto del vivaio cade sulla Sicilia quando arriva la mappa, come nella 07 della home */
.pagina-interna [data-arrivare] .contatti-mappa.reveal .pin-salto { transition: opacity .5s var(--ease-out) .4s, transform .7s var(--ease-out) .4s; }
html.anima .pagina-interna [data-arrivare] .contatti-mappa.reveal:not(.in) .pin-salto { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  html.anima .pagina-interna [data-arrivare] .contatti-mappa.reveal:not(.in) .pin-salto { transform: translateY(-18px); }
}

/* ── computer piccolo e tablet ── */
@media (max-width: 1199px) {
  .pagina-interna [data-recapiti] .contatti-griglia { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 1023px) {
  .pagina-interna [data-storia] .fornitura-griglia { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .pagina-interna [data-storia] .fornitura-foto { max-width: 560px; }
  .pagina-interna [data-richiesta] .contatti-griglia { grid-template-columns: minmax(0, 1fr); }
  .pagina-interna [data-arrivare] .contatti-griglia { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
  .pagina-interna [data-arrivare] .contatti-info { grid-column: 1 / -1; }
  .pagina-interna [data-arrivare] .contatti-mappa { min-height: 340px; }
}

/* ── telefono ── */
@media (max-width: 767px) {
  .pagina-interna [data-testa] .destinazioni-testo > p:not(.numero) + p:not(.numero) { margin-top: -10px; }
  .pagina-interna [data-testa] .contatti-azioni { gap: 16px 28px; }

  .pagina-interna :is([data-controllo], [data-clienti], [data-dal-catalogo]) .destinazioni-griglia { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .pagina-interna [data-controllo] .fornitura-foto { margin: 4px 0 0 30px; max-width: none; }
  .pagina-interna [data-controllo] .fornitura-pianta { left: -40px; height: 46%; }
  .pagina-interna [data-crescono] .vivaio-griglia { gap: 12px; }
  .pagina-interna [data-crescono] .ramo { display: none; }
  .pagina-interna [data-storia] .passo p { font-size: 15.5px; }

  .pagina-interna [data-certificazioni] .qualita-voci { grid-template-columns: minmax(0, 1fr); }
  .pagina-interna [data-certificazioni] .qualita-voci li,
  .pagina-interna [data-certificazioni] .qualita-voci li:first-child { gap: 14px; padding: 18px 0; }
  .pagina-interna [data-certificazioni] .qualita-voci li:first-child { padding-top: 0; }
  .pagina-interna [data-certificazioni] .qualita-voci p { font-size: 16px; }

  .pagina-interna [data-clienti] .destinazioni-testo li { font-size: 16px; }

  .pagina-interna [data-recapiti] .contatti-recapiti { grid-template-columns: minmax(0, 1fr); }
  .pagina-interna [data-recapiti] .contatti-recapiti li,
  .pagina-interna [data-recapiti] .contatti-recapiti li:nth-child(even) { padding: 14px 0; border-left: 0; }
  .pagina-interna [data-recapiti] .contatti-info > p { font-size: 16px; }

  .pagina-interna [data-richiesta] .pianta-dati { font-size: 16px; }

  .pagina-interna [data-dal-catalogo] .piante-fila {
    grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto;
    overflow: visible; margin-inline: 0; padding: 0; scroll-snap-type: none; gap: 14px;
  }
  .pagina-interna [data-dal-catalogo] .pianta-foto { height: 210px; }

  .pagina-interna [data-arrivare] .contatti-griglia { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .pagina-interna [data-arrivare] .contatti-mappa { min-height: 320px; padding: 20px 16px; gap: 14px; }
  .pagina-interna [data-arrivare] .vivaio-foto { aspect-ratio: 4 / 3; }
  .pagina-interna [data-arrivare] .vivaio-foto img { object-position: 50% 12%; }
}

/* ═════════════════ 6-quater · il salto di livello (Design/SALTO-DI-LIVELLO.md) ═════════════════
   Stessa struttura, stesso copy, stesso kit: cambia la qualità grafica. Via i filetti fra le sezioni (le separano aria e
   fondi), i simbolini in medaglioni, le piante in nicchia sul piedistallo di travertino, le foto col passe-partout, le
   fasce verdi come tavole dentro il margine con il frutto che esce dall'angolo. I toni nuovi sono misurati dal kit:
   la pedana del catalogo (hero/10-pedana-catalogo.png), il sole del logo, la texture verde (fondi/03-texture-verde.png).
   Il movimento resta quello del 5-bis; da telefono niente testi più grandi né colonne più strette (3 righe al massimo). */
:root {
  --oro: #CC9C0C;            /* il sole del logo */
  --travertino: #F6F1E9;     /* la pedana del kit: il bordo chiaro */
  --travertino-2: #DBD0BF;   /* la pedana del kit: lo spessore */
  --travertino-3: #C8C1B7;
  --verde-fondo: #094015;    /* la texture verde del kit, il tono più scuro */
  --raggio-grande: 26px;
  --ombra-lunga: 0 36px 64px -36px rgba(40, 34, 20, .45), 0 14px 26px -20px rgba(40, 34, 20, .24);
  --ombra-tavola: 0 30px 60px -40px rgba(40, 34, 20, .34), 0 0 0 1px rgba(160, 140, 110, .11);
}

/* ── il ritmo: niente filetti fra le sezioni, più aria ── */
.sezione + .sezione > .contenitore::before { display: none; }
.sezione { padding-block: clamp(46px, 4.8vw, 68px); }
.piante { padding-top: clamp(56px, 5vw, 72px); }
.qualita { padding-block: clamp(34px, 3vw, 42px); }
.domande { padding-block: clamp(46px, 4.8vw, 68px); }
.vivaio { padding-block: clamp(42px, 4.2vw, 60px); }

/* ── i numeri delle sezioni e le briciole: il trattino diventa un filetto color sole ── */
.numero > span[aria-hidden="true"] {
  display: inline-block; flex: none; width: 26px; height: 1.5px; overflow: hidden;
  background: var(--oro); color: transparent; font-size: 0; vertical-align: middle;
}

/* ── i titoli: una scala sola per le sezioni, più ampia da computer ── */
@media (min-width: 1024px) {
  h2, .vivaio h2, .contatti h2, .pagina-interna h2 { font-size: clamp(2.3rem, 1.1rem + 2.75vw, 3.5rem); letter-spacing: -.016em; }
  .richiesta h2, .pagina-interna [data-cta] h2 { font-size: clamp(2.1rem, 1.05rem + 2.3vw, 3.3rem); }
}

/* ── i pulsanti: più netti; la freccia si sposta al passaggio ── */
.btn { border-radius: 10px; letter-spacing: .01em; }
.btn-verde { box-shadow: 0 14px 26px -18px rgba(9, 64, 21, .7); }

/* ═══ HOME ═══ */
/* hero: la luce dietro il titolo e l'ora d'oro in alto a destra; il pulsante bianco pieno, deciso sul mare */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 42% at 50% 26%, rgba(253, 249, 243, .66), rgba(253, 249, 243, 0) 72%),
    radial-gradient(38% 48% at 94% 2%, rgba(251, 178, 13, .24), rgba(251, 178, 13, 0) 70%),
    linear-gradient(180deg, rgba(253, 249, 243, .28) 0%, rgba(253, 249, 243, 0) 22%);
}
.hero h1 > .occhiello { display: flex; align-items: center; justify-content: center; }
.hero .occhiello::before, .hero .occhiello::after { content: ""; flex: none; width: 34px; height: 1.5px; margin: 0 16px; background: var(--oro); }
.hero .btn-chiaro {
  background: var(--bianco); border-color: transparent;
  box-shadow: 0 22px 40px -20px rgba(9, 64, 21, .55), 0 0 0 1px rgba(11, 65, 22, .22);
}
@media (min-width: 768px) {
  .hero-testo { max-width: 1060px; }
  .hero h1 { font-size: clamp(2.8rem, .9rem + 4.4vw, 5rem); line-height: .98; letter-spacing: -.02em; }
  .hero-sotto { margin-top: 26px; }
  .hero-testo { z-index: 5; padding-top: clamp(118px, 15.5vh, 156px); }
  .hero-pianta { bottom: calc(5% + 22px); }
}

/* fascia: una tavola bianca che galleggia sul bordo della hero, coi simbolini nei medaglioni */
.fascia { background: transparent; border-bottom: 0; margin-top: -48px; z-index: 6; }
.fascia-voci {
  width: calc(100% - 2 * var(--bordo-pagina)); max-width: 1280px; padding: 20px 0;
  background: var(--bianco); border-radius: 22px;
  box-shadow: 0 28px 54px -30px rgba(40, 34, 20, .38), 0 0 0 1px rgba(160, 140, 110, .12);
}
.fascia-voci li + li { border-left-color: var(--linea); }
.fascia-voci img {
  width: 60px; height: 60px; padding: 13px; border-radius: 50%; object-fit: contain;
  background: var(--avorio); box-shadow: inset 0 0 0 1px var(--salvia-chiaro);
}

/* le piante sul piedistallo, premium: la nicchia ad arco con la luce dall'alto, il travertino col filo dorato */
.pianta-foto { isolation: isolate; }
.pianta-foto::after {
  content: ""; position: absolute; z-index: -1; left: 11%; right: 11%; top: 0; bottom: 30px;
  border-radius: 999px 999px 16px 16px;
  background:
    radial-gradient(80% 52% at 50% 10%, rgba(255, 255, 255, .98), rgba(255, 255, 255, 0) 74%),
    linear-gradient(180deg, #FBF7F1 0%, var(--travertino) 100%);
  box-shadow: inset 0 0 0 1px rgba(160, 140, 110, .13);
  transition: opacity .3s ease;
}
.pianta-foto::before {
  left: 6%; right: 6%; bottom: 16px; height: 38px;
  background: radial-gradient(72% 92% at 50% 26%, #FFFFFF 0%, #FDFAF4 52%, var(--travertino) 100%);
  border: 1px solid rgba(204, 156, 12, .34);
  box-shadow:
    0 3px 0 -1px #EFE7DB,
    0 6px 0 -1px #E7DDCF,
    0 9px 0 -1px var(--travertino-2),
    0 12px 0 -1px #D3C9BB,
    0 13px 0 -1px rgba(150, 130, 100, .38),
    0 36px 30px -16px rgba(70, 58, 36, .34);
}
.pianta-foto img { filter: drop-shadow(0 12px 10px rgba(40, 34, 20, .18)); }
.pianta h3 { letter-spacing: .01em; }
.elenco-voci > span::before { color: var(--oro); }

/* 02 · forme e vasi: la tavola bianca coi medaglioni; il ramo di limone esce dall'angolo */
.forme-griglia {
  padding: clamp(24px, 2.6vw, 36px) clamp(10px, 1.6vw, 24px);
  background: var(--bianco); border-radius: var(--raggio-grande); box-shadow: var(--ombra-tavola);
}
.forme-gruppo { gap: 14px; }
.forme-gruppo + .forme-gruppo { border-left-color: var(--linea); }
.forme-gruppo img,
.forme-gruppo--forme li:nth-child(3) img {
  width: 92px; height: 92px; margin: 0; padding: 19px; border-radius: 50%; object-fit: contain;
  background: var(--avorio); box-shadow: inset 0 0 0 1px rgba(145, 166, 145, .45);
}
.forme-gruppo--forme li:nth-child(3) img { padding: 24px 20px; }
.forme-gruppo img { flex: none; max-width: none; }
@media (min-width: 768px) and (max-width: 1199px) {
  .forme-gruppo img, .forme-gruppo--forme li:nth-child(3) img { width: 76px; height: 76px; padding: 15px; }
  .forme-gruppo--forme li:nth-child(3) img { padding: 20px 16px; }
  .forme-gruppo--forme ul { gap: clamp(14px, 2.4vw, 36px); }
}
.ramo--limone { z-index: 4; }
@media (min-width: 768px) { body:not(.pagina-interna) .ramo--limone { top: 40px; right: -22px; } }

/* 03 · chi siamo: le due foto piccole col passe-partout si sovrappongono alla grande; i simbolini nei medaglioni */
.vivaio-icone { gap: 14px; }
.vivaio-icone img {
  width: 50px; height: 50px; padding: 12px; border-radius: 50%; object-fit: contain;
  background: var(--bianco); box-shadow: inset 0 0 0 1px var(--salvia-chiaro), 0 10px 20px -14px rgba(40, 34, 20, .35);
}
.vivaio-foto { border-radius: 20px; }
@media (min-width: 1024px) {
  body:not(.pagina-interna) .vivaio-foto--grande { box-shadow: var(--ombra-lunga); }
  body:not(.pagina-interna) .vivaio-foto--alta,
  body:not(.pagina-interna) .vivaio-foto--bassa {
    z-index: 3; margin-left: -46px; border: 7px solid var(--bianco); box-shadow: var(--ombra-lunga);
  }
}

/* 04 · certificazioni: la fascia di travertino, due tessere bianche col sigillo e il codice in evidenza */
.qualita { background: var(--travertino); }
.qualita-voci { gap: 16px; align-items: stretch; }
.qualita-voci li,
.qualita-voci li:last-child {
  gap: 18px; padding: 16px 24px 16px 16px;
  background: var(--bianco); border-radius: 18px; box-shadow: var(--ombra-tavola);
}
.qualita-voci li + li { border-left: 0; border-top: 0; }
.pagina-interna [data-certificazioni] .qualita-voci { align-items: stretch; }
.qualita-marchio {
  width: 66px; height: 66px; border-radius: 50%; background: var(--avorio);
  box-shadow: inset 0 0 0 1.5px var(--oro), inset 0 0 0 5px var(--bianco), inset 0 0 0 6px rgba(11, 65, 22, .5);
}
.qualita-marchio img { height: 26px; }
.qualita-voci strong { color: var(--verde); font-size: 19px; letter-spacing: .06em; }

/* 05 · come si ordina: i numeri nei medaglioni con l'anello dorato; la foto col passe-partout e la didascalia
   smerigliata; il mandarino davanti più grande e più fuori dalla cornice */
.passo-numero {
  background: var(--bianco);
  box-shadow: 0 0 0 4px var(--avorio), 0 0 0 5px rgba(204, 156, 12, .55), 0 14px 22px -12px rgba(40, 34, 20, .38);
}
.percorso-linea path { opacity: .45; }
.fornitura-cornice { border: 8px solid var(--bianco); border-radius: 22px; box-shadow: var(--ombra-lunga); }
.fornitura-foto figcaption {
  top: 20px; left: 20px; right: 20px;
  background: rgba(254, 254, 254, .7); border: 1px solid rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15);
  box-shadow: 0 12px 26px -18px rgba(0, 0, 0, .45);
}
.fornitura-pianta { left: -62px; bottom: -30px; height: clamp(150px, 13.5vw, 200px); z-index: 2; filter: drop-shadow(0 20px 14px rgba(40, 34, 20, .3)); }

/* 06 · le piante viaggiano: i cerchi sottili che partono dalla Sicilia, dietro la mappa (anche in chi siamo) */
.mappa-europa svg {
  background:
    linear-gradient(180deg, rgba(253, 249, 243, 0) 68%, var(--avorio) 99%),
    linear-gradient(270deg, rgba(253, 249, 243, 0) 70%, var(--avorio) 99%),
    linear-gradient(90deg, rgba(253, 249, 243, 0) 80%, var(--avorio) 100%),
    radial-gradient(circle at 80.1% 90%, rgba(253, 249, 243, 0) 8%, var(--avorio) 78%),
    repeating-radial-gradient(circle at 80.1% 90%, rgba(145, 166, 145, .42) 0 1px, rgba(145, 166, 145, 0) 1.6px 54px);
}

/* fascia verde: una tavola arrotondata dentro il margine, con la luce in alto a sinistra; il frutto esce dall'angolo */
.richiesta { background: transparent; color: var(--bianco); overflow: visible; overflow-x: clip; padding-block: clamp(14px, 2.2vw, 30px); }
.richiesta-riga {
  position: relative; z-index: 1;
  width: calc(100% - 2 * var(--bordo-pagina)); max-width: 1280px; padding-inline: clamp(24px, 4.6vw, 68px);
  border-radius: var(--raggio-grande);
  background: radial-gradient(120% 160% at 0% 0%, var(--verde-2) 0%, var(--verde) 48%, var(--verde-fondo) 100%);
  box-shadow: 0 40px 70px -42px rgba(9, 64, 21, .6);
}
.richiesta > .ramo { z-index: 3; }
.richiesta > .ramo--kumquat { top: -38px; right: calc(var(--bordo-pagina) - 70px); width: clamp(220px, 24vw, 360px); transform: rotate(-10deg); }
.pillola select { border-radius: 10px; border-color: rgba(188, 205, 188, .7); }
/* le pagine interne: ogni fascia col suo frutto o la sua pianta (agrumi: i limoni; ulivi: l'ulivo; chi siamo: il mandarino) */
.richiesta > .ramo[data-ramo="limoni"] { top: -64px; right: calc(var(--bordo-pagina) - 34px); width: clamp(150px, 15vw, 230px); transform: scaleX(-1); transform-origin: 50% 0; }
.richiesta > .ramo[data-ramo="ulivo"],
.richiesta > .ramo[data-ramo="mandarino"] {
  top: auto; bottom: clamp(4px, 1.2vw, 18px); right: calc(var(--bordo-pagina) + clamp(18px, 6vw, 96px)); width: auto;
  transform: none; filter: drop-shadow(0 22px 16px rgba(0, 0, 0, .28));
}
.richiesta > .ramo[data-ramo="ulivo"] { height: clamp(220px, 25vw, 360px); }
.richiesta > .ramo[data-ramo="mandarino"] { height: clamp(240px, 27vw, 390px); }
@media (prefers-reduced-motion: no-preference) {
  .richiesta > .ramo[data-ramo="ulivo"], .richiesta > .ramo[data-ramo="mandarino"] {
    transform-origin: 50% 100%; animation-name: brezza-lieve; animation-duration: 5.2s;
  }
  html.anima .richiesta > .ramo[data-ramo="ulivo"].reveal:not(.in),
  html.anima .richiesta > .ramo[data-ramo="mandarino"].reveal:not(.in) { translate: 0 30px; }
}

/* domande: a sinistra, sotto il titolo, l'arancio sul piedistallo; il più e il meno nei cerchi */
@media (min-width: 1024px) {
  .domande .pianta-foto { grid-column: 1; grid-row: 2; width: min(100%, 250px); height: 300px; margin-top: 12px; align-self: start; }
  .domande .fisarmonica { grid-column: 2; grid-row: 1 / span 2; }
  .domande-griglia { row-gap: 0; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .domande .pianta-foto { position: absolute; top: -12px; right: calc(var(--bordo-pagina) - 10px); width: 170px; height: 220px; }
}
.domanda button { position: relative; padding-block: 17px; }
.domanda button::before {
  content: ""; position: absolute; left: -8px; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--salvia-chiaro); transition: background-color .2s ease, box-shadow .2s ease;
}
.domanda.aperta button::before { background: var(--verde); box-shadow: none; }
.domanda.aperta .segno { background-color: var(--bianco); }

/* 07 · contatti: il modulo su una tavola bianca */
.contatti-info { border-right: 0; }
.modulo { align-self: start; padding: clamp(24px, 2.8vw, 38px); border-top: 0; background: var(--bianco); border-radius: var(--raggio-grande); box-shadow: var(--ombra-tavola); }
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo textarea { min-height: 48px; border-radius: 10px; background: var(--avorio); border-color: var(--linea); }
.campo input:focus, .campo textarea:focus { background: var(--bianco); }
.contatti-recapiti { font-size: 18px; }

/* piè di pagina: la stessa forma, il fondo bianco che chiude la pagina */
.piede { background: var(--bianco); border-top-color: var(--linea); }

/* ═══ PAGINE INTERNE ═══ */
/* la testa: più aria; la foto col passe-partout e una tavola sfalsata dietro; la pianta davanti esce di più */
.pagina-interna [data-testa] { padding-top: calc(var(--testata-h) + clamp(34px, 5.2vw, 78px)); padding-bottom: clamp(60px, 6.6vw, 98px); }
.pagina-interna [data-testa] .fornitura-foto { isolation: isolate; }
.pagina-interna [data-testa] .fornitura-foto::before {
  content: ""; position: absolute; z-index: -1; inset: 13% -28px -30px 18%; border-radius: 30px;
  background: linear-gradient(160deg, var(--travertino) 0%, #EFE7DB 100%);
}
.pagina-interna [data-testa] .fornitura-cornice { border-width: 9px; border-radius: 24px; aspect-ratio: 4 / 3.3; }
.pagina-interna [data-testa] .fornitura-pianta { height: 80%; left: -15%; bottom: -10%; filter: drop-shadow(0 24px 16px rgba(40, 34, 20, .32)); }
.pagina-interna[data-pagina="chi-siamo"] [data-testa] .fornitura-pianta { height: 76%; }

/* agrumi · forme e vasi: il testo al centro delle foto, l'elenco come una scheda tecnica, la seconda foto sfalsata */
@media (min-width: 1024px) {
  .pagina-interna [data-forme] .vivaio-griglia { align-items: center; }
  .pagina-interna [data-forme] .vivaio-foto--bassa { margin-top: 72px; }
  .pagina-interna [data-forme] .vivaio-foto--alta { margin-bottom: 72px; }
}
.pagina-interna [data-forme] .vivaio-foto, .pagina-interna [data-crescono] .vivaio-foto { border: 7px solid var(--bianco); box-shadow: var(--ombra-lunga); }
.pagina-interna [data-forme] .pianta-dati { gap: 0; max-width: 440px; margin-top: 18px; border-top: 1px solid var(--linea); }
.pagina-interna [data-forme] .pianta-dati li { gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--linea); }
.pagina-interna [data-forme] .pianta-dati img,
.pagina-interna [data-richiesta] .pianta-dati img,
.pagina-interna [data-caratteristiche] dt img {
  width: 40px; height: 40px; padding: 9px; border-radius: 50%; object-fit: contain;
  background: var(--bianco); box-shadow: inset 0 0 0 1px var(--salvia-chiaro);
}
.pagina-interna [data-frutti] .vivaio-foto { box-shadow: 0 26px 46px -34px rgba(40, 34, 20, .4); }

/* il catalogo: la nicchia sparisce sotto le foto in cornice; il selettore delle foto come una pillola di galleria */
.pagina-interna .pianta-foto[data-cornice]::after { opacity: 0; }
.pagina-interna [data-catalogo] .pianta .pianta-foto img[data-cornice] { box-shadow: var(--ombra-lunga); }
.pagina-interna [data-catalogo] .pianta .pianta-foto:has([data-scegli-foto]) img[data-cornice] { left: 6%; width: 88%; }
.pagina-interna [data-scegli-foto] {
  top: 6px; right: 4px; translate: none; grid-auto-flow: column; align-items: center; gap: 2px;
  padding: 4px 5px 4px 10px; border-radius: 999px; background: rgba(254, 254, 254, .9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 10px 20px -12px rgba(40, 34, 20, .4), 0 0 0 1px rgba(160, 140, 110, .18);
}
.pagina-interna [data-catalogo] .pianta .pianta-foto [data-scegli-foto] > img { width: 15px; margin-right: 4px; opacity: .75; }
.pagina-interna [data-scegli-foto] .passo-numero {
  width: 24px; height: 24px; border-color: transparent; background: transparent; box-shadow: none;
  font-size: 11.5px; color: var(--grigio);
}
.pagina-interna [data-scegli-foto] .passo-numero[aria-pressed="true"] { background: var(--verde); color: var(--bianco); }
@media (hover: hover) and (pointer: fine) {
  .pagina-interna [data-scegli-foto] .passo-numero:not([aria-pressed="true"]):hover { background: var(--avorio); color: var(--verde); }
}

/* ulivi · le caratteristiche: la scheda tecnica su una tavola bianca */
.pagina-interna [data-catalogo] .forme-gruppo img,
.pagina-interna [data-catalogo] .forme-gruppo:nth-child(2) img { width: 84px; height: 84px; margin-block: 0; padding: 17px; }
.pagina-interna [data-catalogo] .forme-gruppo:nth-child(2) img { padding: 23px 16px; }
.pagina-interna [data-caratteristiche] dl { padding: 4px clamp(16px, 2.2vw, 30px); border-top: 0; background: var(--bianco); border-radius: 22px; box-shadow: var(--ombra-tavola); }
.pagina-interna [data-caratteristiche] dl > div:last-child { border-bottom: 0; }
.pagina-interna [data-caratteristiche] .vivaio-foto { border: 8px solid var(--bianco); box-shadow: var(--ombra-lunga); }
@media (max-width: 1023px) { .pagina-interna [data-caratteristiche] dd { padding-left: 54px; } }

/* chi siamo · il controllo: i carrelli nei medaglioni (gli stessi di sole, goccia e foglia) */
.pagina-interna [data-controllo] .fornitura-pianta { height: 58%; left: -14%; bottom: -10%; }

/* chi siamo · le certificazioni: le tessere col sigillo, una accanto all'altra */
.pagina-interna [data-certificazioni] .qualita-voci { gap: 18px; }
.pagina-interna [data-certificazioni] .qualita-voci li,
.pagina-interna [data-certificazioni] .qualita-voci li:first-child { padding: 22px 24px; }
.pagina-interna [data-certificazioni] .qualita-voci strong { font-size: 1.08em; }

/* contatti · i recapiti su una tavola bianca, i numeri più grandi */
.pagina-interna [data-recapiti] .contatti-recapiti { padding: 6px clamp(18px, 2.6vw, 34px); border-top: 0; background: var(--bianco); border-radius: 22px; box-shadow: var(--ombra-tavola); }
.pagina-interna [data-recapiti] .contatti-recapiti li:nth-last-child(-n+2) { border-bottom: 0; }
.pagina-interna [data-recapiti] .contatti-recapiti li > a { font-size: clamp(1.15rem, .9rem + .6vw, 1.45rem); }
.pagina-interna [data-richiesta] .pianta-dati li { padding: 10px 0; }
.pagina-interna [data-arrivare] .contatti-mappa { background: var(--travertino); }
.pagina-interna [data-arrivare] .vivaio-foto { border: 7px solid var(--bianco); box-shadow: var(--ombra-lunga); }

/* ═══ 404 e pagine legali: la cornice comune ═══ */
.pagina-404 .numero { margin-bottom: 6px; font: 500 clamp(5.5rem, 3.6rem + 6vw, 9rem)/.9 var(--f-titoli); letter-spacing: -.02em; color: var(--oro); }
.legale {
  padding: clamp(24px, 5vw, 64px); background: var(--bianco); border-radius: var(--raggio-grande); box-shadow: var(--ombra-tavola);
}
.legale h1 + p { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--avorio); border: 1px solid var(--linea); }
.legale h2 { padding-top: 30px; border-top: 1px solid var(--linea); }
.legale ul { list-style: none; padding-left: 0; }
.legale ul > li { position: relative; padding-left: 22px; }
.legale ul > li::before { content: ""; position: absolute; left: 4px; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--oro); }
.legale a { text-underline-offset: 3px; }
.legale table { border-radius: 14px; }

/* ═══ telefono ═══ */
@media (max-width: 1023px) {
  .contatti-griglia { gap: 0; }
}
@media (max-width: 767px) {
  .hero-pianta { bottom: calc(5.2% + 26px); }
  .hero-pianta--limone { height: 29%; }
  .hero-pianta--mandarino { height: 28%; }
  .hero-pianta--kumquat { height: 23%; }
  .hero-pianta--ulivo { height: 32%; }
  .hero .occhiello::before, .hero .occhiello::after { width: 20px; margin: 0 10px; }
  .fascia { margin-top: -32px; }
  .fascia-voci { width: calc(100% - 32px); padding: 16px 0; border-radius: 18px; }
  .fascia-voci img { width: 48px; height: 48px; padding: 10px; }
  .forme-griglia { padding: 22px 8px 20px; border-radius: 20px; }
  .forme-gruppo img, .forme-gruppo--forme li:nth-child(3) img { width: 70px; height: 70px; padding: 14px; }
  .forme-gruppo--forme li:nth-child(3) img { padding: 19px 15px; }
  .qualita-voci { gap: 12px; }
  .qualita-voci li, .qualita-voci li:last-child { padding: 14px 16px 14px 12px; }
  .qualita-marchio { width: 58px; height: 58px; }
  .fornitura-pianta { left: -40px; bottom: -22px; height: 140px; }
  .fornitura-foto figcaption { top: 16px; left: 16px; right: 16px; }
  .richiesta { padding-block: 26px 14px; }
  .richiesta-riga { width: calc(100% - 32px); padding-inline: 22px; border-radius: 22px; }
  .richiesta > .ramo--kumquat { top: -6px; right: -30px; width: 150px; transform: rotate(-10deg); }
  .richiesta > .ramo[data-ramo="limoni"] { top: -34px; right: 0; width: 118px; }
  .richiesta > .ramo[data-ramo="ulivo"], .richiesta > .ramo[data-ramo="mandarino"] { top: -40px; bottom: auto; right: 18px; height: 168px; }
  .domande .pianta-foto { position: absolute; top: -10px; right: 4px; width: 128px; height: 172px; margin: 0; }
  .domande h2 { margin-bottom: 18px; }
  .modulo { margin-top: 34px; padding: 22px 18px; border-top: 0; border-radius: 22px; }
  .contatti-recapiti { font-size: 17px; }

  .pagina-interna [data-testa] .fornitura-foto::before { inset: 14% -10px -14px 20%; border-radius: 22px; }
  .pagina-interna [data-testa] .fornitura-cornice { border-width: 6px; border-radius: 20px; }
  .pagina-interna [data-testa] .fornitura-pianta { left: -44px; bottom: -7%; height: 62%; }
  .pagina-interna [data-forme] .vivaio-foto, .pagina-interna [data-crescono] .vivaio-foto { border-width: 5px; }
  .pagina-interna [data-catalogo] .piante-fila { margin-inline: -8px; column-gap: 10px; }
  .pagina-interna [data-catalogo] .pianta .btn { padding: 8px 6px; font-size: 12px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
  .pagina-interna [data-catalogo] .pianta .btn .freccia { display: none; }
  .pagina-interna [data-scegli-foto] { top: 4px; right: 0; padding: 3px 3px 3px 8px; }
  .pagina-interna [data-scegli-foto] .passo-numero { width: 23px; height: 23px; font-size: 11px; }
  .pagina-interna [data-catalogo] .forme-griglia { padding: 6px 18px; }
  .pagina-interna [data-catalogo] .forme-gruppo img, .pagina-interna [data-catalogo] .forme-gruppo:nth-child(2) img { width: 46px; height: 46px; padding: 9px; }
  .pagina-interna [data-certificazioni] .qualita-voci li, .pagina-interna [data-certificazioni] .qualita-voci li:first-child { padding: 18px; }
  .pagina-interna [data-recapiti] .contatti-recapiti li:nth-last-child(2) { border-bottom: 1px solid var(--linea); }
  .legale { border-radius: 20px; }
}
@media (max-width: 369px) {
  .pagina-interna [data-catalogo] .pianta .btn { white-space: normal; }
}

/* ═══ step 7 · le correzioni del collaudo (05/11/2026) ═══ */
/* il fuoco e il campo sbagliato tornano sopra il bordo della tavola bianca (stessa specificità, dopo) */
.campo input[type="text"]:focus, .campo input[type="email"]:focus, .campo input[type="tel"]:focus, .campo textarea:focus { border-color: var(--verde); }
.campo.sbagliato input[type="text"], .campo.sbagliato input[type="email"], .campo.sbagliato input[type="tel"], .campo.sbagliato textarea { border-color: var(--errore); }
/* i due messaggi dopo l'invio, uno per riga */
.modulo-esito > span { display: block; }
.modulo-esito > span + span { margin-top: 4px; }
/* i menu della home a 16 px: sotto, l'iPhone ingrandisce la pagina al tocco */
.pillola select { font-size: 16px; }
/* piè di pagina: i link della riga legale non si spezzano («Note legali») */
.piede-legale a { white-space: nowrap; }
@media (max-width: 767px) {
  /* le pagine legali da telefono: il foglio bianco a tutta larghezza, così la tabella dei cookie ha lo spazio di prima */
  .legale { margin-inline: calc(-1 * var(--bordo-pagina)); padding: 28px var(--bordo-pagina) 32px; border-radius: 0; box-shadow: none; }
  .legale th, .legale td { padding: 10px; }
  /* la riga delle varietà scorre: lo dice la sfumatura a destra; in fondo l'ultima voce esce dalla sfumatura */
  .elenco-voci { display: inline-block; padding-right: 40px; }
  .elenco-taglio { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
}

/* ═════════════════ 2 e 3 Step · il catalogo unico (05/11/2026, Resources/3 Step/MODIFICHE-DA-FARE.md) ═════════════════
   La home con «Piante in vaso all'ingrosso», un catalogo solo, il video e le foto dei carrelli; la pagina Coltivazione al
   posto delle cure di /agrumi e /ulivi. Le classi sono quelle di sempre, le varianti negli attributi data-*. */

/* hero: «all'ingrosso» sulla sua riga, più grande del resto e nel verde del design (voci 9 e 17); le altre due righe un
   poco più piccole, perché il titolo resti alto quanto quello di prima */
.hero-titolo { font-size: .8em; text-wrap: balance; }
.hero-titolo em { display: block; font-size: 1.56em; line-height: .9; letter-spacing: -.025em; margin: .03em 0 .07em; }
@media (min-width: 768px) {
  /* il titolo ha una riga in più: il blocco sale e si stringe, così sottotitolo e pulsante restano sopra le piante */
  .hero-testo { padding-top: clamp(98px, 12.2vh, 124px); }
  .hero-titolo { font-size: .77em; }
  .hero-sotto { margin: 16px auto 22px; }
}

/* 01 · un catalogo solo (voce 10): il pulsante «Vedi il catalogo» e la riga delle varietà; ogni scheda porta alla pagina
   della pianta della foto (il nome è il link, e copre tutta la scheda) */
@media (min-width: 768px) {
  .piante-piede { grid-template-columns: auto minmax(0, 1fr); }
  .piante-piede > .piante-elenco:last-child { border-right: 0; padding-right: 0; }
}
.piante[data-vetrina] .pianta { position: relative; }
.piante[data-vetrina] .pianta h3 a { color: inherit; text-decoration: none; transition: color .2s ease; touch-action: manipulation; }
.piante[data-vetrina] .pianta h3 a::after { content: ""; position: absolute; inset: 0 -4px; z-index: 3; border-radius: 18px; }
.piante[data-vetrina] .pianta h3 a:focus-visible { outline: none; }
.piante[data-vetrina] .pianta h3 a:focus-visible::after { outline: 2px solid var(--verde); outline-offset: 4px; }
.piante[data-vetrina] .pianta h3 a:active { color: var(--verde); }
@media (hover: hover) and (pointer: fine) { .piante[data-vetrina] .pianta:hover h3 a { color: var(--verde); } }

/* 05 · il video dei carrelli al posto della foto che teneva il posto (voce 14): verticale come il video, muto, in loop,
   senza controlli; la didascalia resta sopra. Si svela come le foto (5-bis) */
.fornitura-foto[data-video] .fornitura-cornice { aspect-ratio: 3 / 4; }
.fornitura-cornice video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--box); }
.fornitura-foto[data-reveal] .fornitura-cornice > video {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.1s var(--ease-out) var(--d, 0s), scale 1.5s var(--ease-out) var(--d, 0s), opacity .8s var(--ease-out) var(--d, 0s), transform .28s ease;
}
@media (prefers-reduced-motion: no-preference) {
  html.anima .fornitura-foto[data-reveal]:not(.in) .fornitura-cornice > video { clip-path: inset(100% 0 0 0); scale: 1.14; }
}
@media (prefers-reduced-motion: reduce) {
  html.anima .fornitura-foto[data-reveal]:not(.in) .fornitura-cornice > video { opacity: 0; }
}
html.anima:not(.anima-pronta) .fornitura-cornice > video { animation: salvagente .01s 3s forwards; }

/* 06 · le foto dei carrelli (voce 13): da computer tutte e sette in una riga, sotto il testo e la mappa; da tablet in due
   righe (4 e 3); da telefono una riga che scorre col dito, con il bordo della foto dopo sempre in vista */
.destinazioni [data-serie="carrelli"] {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(10px, 1.15vw, 18px);
  margin-top: clamp(22px, 2.6vw, 40px);
}
.destinazioni [data-serie="carrelli"] > .vivaio-foto {
  aspect-ratio: 3 / 4; border: 6px solid var(--bianco); border-radius: 18px;
  box-shadow: 0 24px 38px -28px rgba(40, 34, 20, .5), 0 0 0 1px rgba(160, 140, 110, .12);
}
.destinazioni [data-serie="carrelli"] > .vivaio-foto:nth-child(even) { margin-top: clamp(14px, 2vw, 30px); }
@media (min-width: 768px) and (max-width: 1023px) {
  .destinazioni [data-serie="carrelli"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .destinazioni [data-serie="carrelli"] > .vivaio-foto:nth-child(even) { margin-top: 0; }
}
@media (max-width: 767px) {
  .destinazioni [data-serie="carrelli"] {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 26px calc(-1 * var(--bordo-pagina)) 0; padding: 4px var(--bordo-pagina) 22px; scroll-padding-inline: var(--bordo-pagina);
    scrollbar-width: none;
  }
  .destinazioni [data-serie="carrelli"]::-webkit-scrollbar { display: none; }
  .destinazioni [data-serie="carrelli"] > .vivaio-foto { scroll-snap-align: start; border-width: 5px; }
  .destinazioni [data-serie="carrelli"] > .vivaio-foto:nth-child(even) { margin-top: 0; }
}

/* domande frequenti: sotto le risposte, il rimando alla pagina Coltivazione */
.domande .fisarmonica > [data-rimando] { margin-top: 24px; }
.domande .fisarmonica > [data-rimando] .link-forte { font-size: 15.5px; }

/* ═══ /coltivazione (2 Step, voce 4; 3 Step, voce 7): le cure di agrumi e ulivi delle pagine di prima, una volta sola ═══
   Coi pezzi di sempre: la testa delle pagine interne, i passi della 05, la scheda tecnica dell'ulivo, la fascia verde.
   Le due parti si aprono con l'occhiello (filetto color sole e il nome della famiglia) e hanno le àncore #agrumi e #ulivi. */
/* la testa: i due salti alle parti della pagina, piccoli, coi simbolini del kit */
.pagina-interna[data-pagina="coltivazione"] [data-testa] .contatti-azioni { gap: 12px; }
.pagina-interna[data-pagina="coltivazione"] [data-testa] .contatti-azioni .btn { min-height: 46px; padding: 0 22px 0 14px; gap: .55em; font-size: 15px; }
.pagina-interna[data-pagina="coltivazione"] [data-testa] .contatti-azioni .btn img { width: 26px; height: 26px; object-fit: contain; flex: none; transition: filter .2s ease; }
@media (hover: hover) and (pointer: fine) {
  .pagina-interna[data-pagina="coltivazione"] [data-testa] .contatti-azioni .btn:hover img { filter: brightness(0) invert(1); }
}
.pagina-interna[data-pagina="coltivazione"] [data-testa] .fornitura-cornice img { object-position: 50% 38%; }

/* agrumi · fiori e frutti: il titolo a sinistra e il testo a destra, poi le foto in una riga, ognuna nella sua forma */
.pagina-interna [data-frutti] .sezione-testa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px clamp(32px, 6vw, 96px); align-items: end; }
.pagina-interna [data-frutti] .sezione-testa p:not(.numero) { max-width: 46ch; font-size: 17px; line-height: 1.55; color: var(--testo); text-wrap: pretty; }
.pagina-interna [data-frutti] .sezione-testa p:not(.numero) + p { margin-top: 10px; }
.pagina-interna [data-galleria] { display: flex; align-items: flex-start; gap: clamp(16px, 1.7vw, 26px); }
.pagina-interna [data-frutti] [data-galleria] > .vivaio-foto {
  flex: var(--r) 1 0; min-width: 0; aspect-ratio: var(--r); border-radius: 18px;
  box-shadow: 0 0 0 6px var(--bianco), 0 28px 42px -30px rgba(40, 34, 20, .5);
}

/* le schede di coltivazione: i titoli un poco più piccoli, perché stiano in colonna; l'ulivo ha la sua foto accanto */
@media (min-width: 1024px) {
  .pagina-interna[data-pagina="coltivazione"] [data-coltivazione] h2 { font-size: clamp(2rem, 1rem + 1.9vw, 2.8rem); text-wrap: balance; }
  .pagina-interna [data-coltivazione="ulivi"] .fornitura-griglia { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); }
}
.pagina-interna [data-coltivazione="ulivi"] .fornitura-foto { width: 100%; max-width: 440px; margin: 0; }
.pagina-interna [data-coltivazione="ulivi"] .fornitura-cornice { aspect-ratio: 3 / 4; }
@media (min-width: 768px) and (max-width: 1023px) {
  .pagina-interna [data-coltivazione="ulivi"] .fornitura-griglia { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); }
  .pagina-interna [data-coltivazione="ulivi"] .fornitura-foto { grid-row: 1 / span 2; }
}

@media (max-width: 767px) {
  .pagina-interna[data-pagina="coltivazione"] [data-testa] .contatti-azioni .btn { min-height: 44px; padding: 0 18px 0 12px; font-size: 14.5px; }
  .pagina-interna [data-frutti] .sezione-testa { grid-template-columns: minmax(0, 1fr); }
  .pagina-interna [data-frutti] .sezione-testa p:not(.numero) { font-size: 16px; }
  .pagina-interna [data-galleria] {
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; gap: 16px;
    margin-inline: calc(-1 * var(--bordo-pagina)); padding: 8px var(--bordo-pagina) 24px; scroll-padding-inline: var(--bordo-pagina);
    scrollbar-width: none;
  }
  .pagina-interna [data-galleria]::-webkit-scrollbar { display: none; }
  .pagina-interna [data-frutti] [data-galleria] > .vivaio-foto { flex: none; height: 250px; width: auto; max-width: 80vw; scroll-snap-align: start; }
  .pagina-interna [data-coltivazione="ulivi"] .fornitura-percorso:nth-of-type(1) { order: 1; }
  .pagina-interna [data-coltivazione="ulivi"] .fornitura-foto { order: 2; max-width: none; }
  .pagina-interna [data-coltivazione="ulivi"] .fornitura-percorso:nth-of-type(2) { order: 3; }
}
/* i titoli delle schede in due righe, il nero e il verde, come i titoli della home; da telefono i titoli vanno a capo
   bilanciati (mai una parola sola sulla seconda riga) */
.pagina-interna[data-pagina="coltivazione"] [data-coltivazione] h2 em { display: block; }
.pagina-interna[data-pagina="coltivazione"] :is([data-testa] h1, [data-frutti] h2, [data-caratteristiche] h2, [data-cta] h2) { text-wrap: balance; }

/* chi siamo · il controllo prima del carico: la foto del carrello di limoni (voce 15) è verticale, la cornice si fa
   quadrata perché il carrello stia tutto */
.pagina-interna [data-controllo] .fornitura-foto { max-width: 540px; }
.pagina-interna [data-controllo] .fornitura-cornice { aspect-ratio: 1 / 1; }
.pagina-interna [data-controllo] .fornitura-cornice img { object-position: 50% 56%; }

/* contatti · le richieste dal catalogo: un rimando solo, «Vedi il catalogo», sotto il testo */
.pagina-interna [data-dal-catalogo] .sezione-testa p + p { margin-top: 22px; }

/* le foto delle righe nuove (carrelli, fiori e frutti): col mouse si avvicinano piano, come le altre foto del sito */
.destinazioni [data-serie="carrelli"] > .vivaio-foto > img,
.pagina-interna [data-galleria] > .vivaio-foto > img { transition: transform .45s var(--ease-out); }

/* ═════════════════ 4 Step · le richieste del cliente del 06/11/2026 (Resources/4 Step/MODIFICHE-DA-FARE.md) ═════════════════ */

/* hero (voci 1 e 2): quattro righe con le parole del cliente, «all'ingrosso» in grande e in verde; sotto, a chi si
   vende. La hero diventa una colonna: il testo in alto e, nello spazio che resta, le piante sul prato. Le due piante del
   centro non salgono mai oltre quello spazio, così non coprono il testo nemmeno sui portatili bassi; quelle ai lati
   possono salire un poco di più, accanto alle righe del titolo. */
.hero { --hero-h: clamp(640px, 100svh, 980px); display: flex; flex-direction: column; }
.hero-testo { flex: none; }
.hero-titolo > [data-riga] { display: block; font-size: .5em; line-height: 1.14; letter-spacing: -.005em; }
.hero-titolo > [data-riga="prima"] { margin-bottom: .06em; }
.hero-titolo em { margin: .04em 0 .1em; }
.hero-sotto { text-wrap: balance; }
.hero-piante { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; }
.hero-pianta {
  --piede: calc(var(--hero-h) * .05 + 22px);
  bottom: var(--piede);
  height: min(var(--alta), calc(100% - var(--piede) - 18px + var(--sale, 0px)));
}
.hero-pianta--limone { --alta: calc(var(--hero-h) * .46); --sale: calc(var(--hero-h) * .16); }
.hero-pianta--mandarino { --alta: calc(var(--hero-h) * .44); }
.hero-pianta--kumquat { --alta: calc(var(--hero-h) * .37); }
.hero-pianta--ulivo { --alta: calc(var(--hero-h) * .51); --sale: calc(var(--hero-h) * .16); }
@media (min-width: 768px) and (max-height: 760px) {
  /* i portatili bassi (come quello del cliente, 1366-1536 × 650-700): meno aria sopra il titolo */
  .hero-testo { padding-top: clamp(92px, 13.6vh, 112px); }
  .hero .occhiello { margin-bottom: 10px; }
  .hero-sotto { margin: 12px auto 18px; }
}
@media (max-width: 767px) {
  .hero { --hero-h: max(720px, 100svh); }
  .hero-titolo > [data-riga] { font-size: .6em; line-height: 1.16; }
  .hero-pianta { --piede: calc(var(--hero-h) * .052); }
  .hero-pianta--limone { --alta: calc(var(--hero-h) * .27); --sale: calc(var(--hero-h) * .06); }
  .hero-pianta--mandarino { --alta: calc(var(--hero-h) * .26); }
  .hero-pianta--kumquat { --alta: calc(var(--hero-h) * .21); }
  .hero-pianta--ulivo { --alta: calc(var(--hero-h) * .30); --sale: calc(var(--hero-h) * .06); }
}

/* certificazioni (voce 24): il marchio MPS ufficiale al posto del simbolino, alto quanto la riga */
.qualita-marchio[data-marchio="mps"] { width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; }
.qualita-marchio[data-marchio="mps"] img { height: 92px; width: auto; }
@media (max-width: 767px) {
  .qualita-marchio[data-marchio="mps"] img { height: 76px; }
}

/* chi siamo, la fascia verde (voce 26): l'arancio arcobaleno al posto del mandarino, alto come lui */
.richiesta > .ramo[data-ramo="arancio"] {
  top: auto; bottom: clamp(4px, 1.2vw, 18px); right: calc(var(--bordo-pagina) + clamp(10px, 5vw, 84px)); width: auto;
  height: clamp(240px, 27vw, 390px); transform: none; filter: drop-shadow(0 22px 16px rgba(0, 0, 0, .28));
}
@media (prefers-reduced-motion: no-preference) {
  .richiesta > .ramo[data-ramo="arancio"] { transform-origin: 50% 100%; animation-name: brezza-lieve; animation-duration: 5.2s; }
  html.anima .richiesta > .ramo[data-ramo="arancio"].reveal:not(.in) { translate: 0 30px; }
}
@media (max-width: 767px) {
  .richiesta > .ramo[data-ramo="arancio"] { top: -40px; bottom: auto; right: 18px; height: 168px; }
}

/* chi siamo · dal seme all'innesto (voce 27, secondo giro): le schede restano quelle bianche della fascia (col loro
   margine); il «95%» resta nella frase, in verde, senza andare a capo da solo */
.pagina-interna [data-seme] .qualita-voci p { text-wrap: pretty; }
.pagina-interna [data-seme] .qualita-voci strong { display: inline; margin: 0; font-size: inherit; white-space: nowrap; }

/* ═════════════════ 5 Step · le richieste del cliente del 06/11/2026, sera (Resources/5 Step/MODIFICHE-DA-FARE.md) ═════════════════ */

/* hero (voci 1-3): la frase del cliente su tre righe, «all'ingrosso» in corsivo, grande e verde; sotto, subito il pulsante */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
}
.hero-titolo > [data-riga] { font-size: .66em; line-height: 1.1; }
.hero-titolo > [data-riga="prima"] { margin-bottom: 0; }
.hero-titolo em { font-style: italic; font-weight: 500; letter-spacing: -.012em; line-height: .96; margin: .01em 0 .06em; }
.hero-testo > .btn { margin-top: clamp(20px, 3.2vh, 30px); }
@media (min-width: 768px) and (max-height: 760px) {
  .hero-testo > .btn { margin-top: 18px; }
}
@media (max-width: 767px) {
  .hero-titolo > [data-riga] { font-size: .68em; line-height: 1.12; }
  .hero-testo > .btn { margin-top: 20px; }
}


/* 28 § 17: gli orari del vivaio, quando l'azienda li scrive nel pannello (finché sono vuoti non compaiono) */
.orari-settimana { list-style: none; margin: 10px 0 0; padding: 0; }
.orari-settimana li { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--linea); font-size: 16px; line-height: 1.4; }
.orari-settimana li span { font-weight: 700; color: var(--nero); }
.thk-orari-eccezioni p { margin-top: 8px; }

/* 7-bis (N12): un'email o un indirizzo lungo va a capo, non allarga la pagina. Con i dati normali non si muove niente
   (provato elemento per elemento su 10 pagine a 16 larghezze). */
body { overflow-wrap: break-word; }
.legale ul { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 767px) {
  .piede-riga > *, .piede-legale > * { min-width: 0; }
  .piede-descr, .piede-link, .piede-legale-riga, .contatti-recapiti, .contatti-recapiti a, .contatti-recapiti li > a, .legale p a, .legale li a { overflow-wrap: anywhere; }
}

/* 9-ter (09/11/2026), IT + EN: il menù a tendina delle lingue del kit (sito-thk/lingue.css, details.lingue) nello stile del sito, al
   posto del segnaposto «IT / EN» dello step 5: in testata dopo la linea, nel piè di pagina dopo la sua linea (il contenitore
   .lingue--piede tiene l'impaginazione di prima). Chiuso si vede solo la sigla della pagina con la freccia; aperto IT · Italiano e
   EN · English, alla stessa pagina. Il pulsante è alto 44 px (il dito); in fondo alla pagina l'elenco si apre verso l'alto. */
details.lingue {
  --thk-lingue-pulsante-testo: var(--nero);
  --thk-lingue-pulsante-fondo: transparent;
  --thk-lingue-bordo: var(--linea-2);
  --thk-lingue-raggio: 999px;
  --thk-lingue-fondo: var(--bianco);
  --thk-lingue-testo: var(--nero);
  --thk-lingue-evidenza: var(--box);
  --thk-lingue-fuoco: var(--verde);
  --thk-lingue-raggio-elenco: 14px;
  font: 700 15px/1 var(--f-testo);
  color: var(--nero);
}
details.lingue > summary { gap: 8px; padding: 0 14px 0 16px; letter-spacing: .06em; transition: border-color .2s ease, background-color .2s ease; }
details.lingue > summary::after { width: 6px; height: 6px; border-width: 0 1.5px 1.5px 0; margin-left: 0; }
@media (hover: hover) and (pointer: fine) { details.lingue > summary:hover { border-color: var(--verde); } }
details.lingue[open] > summary { border-color: var(--verde); background: var(--avorio); }
details.lingue > ul { min-width: 168px; padding: 6px; font-size: 15px; font-weight: 600; letter-spacing: .02em; border: 1px solid var(--linea); box-shadow: 0 18px 40px -18px rgba(20, 20, 20, .35); }
details.lingue > ul a { color: var(--testo); }
details.lingue > ul a[aria-current="true"] { color: var(--verde); }
.lingue--piede details.lingue > ul { top: auto; bottom: calc(100% + 6px); }
@media (max-width: 1023px) {
  .testata details.lingue > summary { padding: 0 12px 0 14px; }
}
.legale-prevale { margin-bottom: 18px; padding: 12px 16px; border-left: 3px solid var(--verde); background: var(--box); font-size: 15px; line-height: 1.55; color: var(--testo); }