/* 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); }
  .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 [data-coltivazione] .passi { position: relative; inset: auto; display: grid; gap: 22px; margin-top: 28px; }
.pagina-interna [data-coltivazione] .passi::before { content: ""; position: absolute; left: 22px; top: 24px; bottom: 24px; width: 1.5px; background: var(--salvia-chiaro); }
.pagina-interna [data-coltivazione] .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 [data-coltivazione] .passo-segno { position: static; grid-row: auto; margin: 0; }
.pagina-interna [data-coltivazione] .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 [data-coltivazione] .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 [data-coltivazione] .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 [data-coltivazione] .passi[data-reveal]:not(.in)::before { clip-path: inset(0 0 100% 0); }
}
@media (prefers-reduced-motion: reduce) {
  html.anima .pagina-interna [data-coltivazione] .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 [data-coltivazione] .passo { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; }
  .pagina-interna [data-coltivazione] .passo-numero { width: 40px; height: 40px; font-size: 15.5px; }
  .pagina-interna [data-coltivazione] .passo-numero .passo-icona { height: 19px; }
  .pagina-interna [data-coltivazione] .passi::before { left: 19px; top: 20px; bottom: 20px; }
  .pagina-interna [data-coltivazione] .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; }
}