/* =========================================================
   Sementi Conti — foglio di stile unico.

   Palette: il rosso-bruno della terra delle colline di Corinaldo, con
   il verde della medica in appoggio. Nel settore sementiero i marchi sono
   quasi tutti verdi e tutti uguali; la terra si riconosce a colpo d'occhio
   in una fiera e regge anche stampata sulla carta dei sacchi.

   Tutti i colori stanno nelle variabili qui sotto: cambiarli qui
   cambia tutto il sito.

   Il sito è scritto in logical properties (inline-start / inline-end)
   invece di left/right, così la versione araba si specchia da sola
   senza un secondo foglio di stile.
   ========================================================= */

:root {
  --terra:        #A2482A;   /* accento: la terra di Corinaldo */
  --terra-scuro:  #7E3520;
  --terra-chiaro: #F6E9E3;
  --foglia:       #3F6B36;   /* verde di appoggio, mai protagonista */
  --foglia-chiaro:#E7EEDE;
  --seme:         #8F6316;   /* oro del seme: avvisi e dati da confermare */
  --seme-chiaro:  #F6EEDC;

  --fondo:        #F4F5F0;   /* neutro con una punta di verde */
  --carta:        #FFFFFF;
  --fondo-alt:    #EBEDE5;
  --scuro:        #1D2118;

  --inchiostro:   #191C17;
  --inchiostro-2: #4A4F45;
  --tenue:        #767C6E;
  --linea:        #D8DBCF;
  --linea-tenue:  #E6E8DE;

  --titoli: Georgia, "Times New Roman", serif;
  --testo: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --dati: ui-monospace, SFMono-Regular, Consolas, monospace;

  /* Larghezza e respiro laterale crescono insieme allo schermo. Erano
     fissi: a 1280 il testo toccava i bordi, a 2560 stava in una striscia
     in mezzo a due deserti. */
  --larghezza: 1600px;
  --respiro: clamp(20px, 3.4vw, 72px);
  --raggio: 6px;
  --ombra: 0 1px 2px rgba(25,28,23,.05), 0 8px 24px -14px rgba(25,28,23,.22);
}

*, *::before, *::after { box-sizing: border-box; }

/* Sugli schermi davvero grandi (4K a scala 100%) anche 1600 px lasciano
   un deserto per lato. La larghezza sale a scalini, non in continuo: le
   colonne di testo restano comunque limitate in caratteri, quindi a
   crescere sono solo schede, tabelle e fasce. */
@media (min-width: 2200px) { :root { --larghezza: 1800px; } }
@media (min-width: 3000px) { :root { --larghezza: 2100px; } }

/* La misura di riferimento cresce con lo schermo. Sta su html e non su body
   perche' i rem si calcolano da qui: cambiarla sul corpo faceva scalare il
   testo e lasciava ferme le voci di menu, i pulsanti e le etichette. */
html { font-size: clamp(16px, 0.19vw + 13.6px, 22px); }

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--inchiostro);
  font-family: var(--testo);
  font-size: 1.06rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

.contenitore { max-width: var(--larghezza); margin-inline: auto; padding-inline: var(--respiro); }
.contenitore.stretto { max-width: 72ch; }
.contenitore.centrato { text-align: center; }

h1, h2, h3 { font-family: var(--titoli); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 2.9vw, 4rem); }
h2 { font-size: clamp(1.5rem, 1.9vw, 2.6rem); }
h3 { font-size: 1.12rem; font-family: var(--testo); font-weight: 700; letter-spacing: 0; }
p { margin: 0 0 1rem; }

a { color: var(--terra); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; border-radius: 3px; }

.salta { position: absolute; inset-inline-start: -9999px; }
.salta:focus { inset-inline-start: 12px; top: 12px; z-index: 100; background: var(--carta); padding: 10px 16px; border-radius: var(--raggio); }

/* --------------------------------------------------------- testata */
.testata { background: var(--carta); border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 50; }
.testata-riga { display: flex; align-items: center; gap: 24px; min-height: 68px; flex-wrap: wrap; }

.marchio { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.marchio-testo { display: flex; flex-direction: column; line-height: 1.15; }
.marchio-testo strong { font-family: var(--titoli); font-size: 1.06rem; letter-spacing: .01em; }
.marchio-testo small { font-size: 0.6562rem; color: var(--tenue); font-family: var(--dati); letter-spacing: .06em; }

.menu { display: flex; align-items: center; gap: 22px; margin-inline-start: auto; flex-wrap: wrap; }
.menu a { color: var(--inchiostro-2); text-decoration: none; font-size: 0.9375rem; }
.menu a:hover { color: var(--terra); }
.menu a[aria-current="page"] { color: var(--terra); font-weight: 600; }

.bottone-piccolo { border: 1px solid var(--terra); color: var(--terra) !important; padding: 6px 14px; border-radius: 100px; font-weight: 600; }
.bottone-piccolo:hover { background: var(--terra); color: #fff !important; }

/* --------------------------------------------------------- lingue */
.selettore-lingua { position: relative; }
.selettore-lingua > button {
  background: none; border: 1px solid var(--linea); border-radius: 100px;
  padding: 6px 14px; font: inherit; font-size: 0.875rem; color: var(--inchiostro-2); cursor: pointer;
}
.selettore-lingua > button:hover { border-color: var(--terra); color: var(--terra); }
#elenco-lingue {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px);
  background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio);
  box-shadow: var(--ombra); list-style: none; margin: 0; padding: 6px; min-width: 170px; z-index: 60;
}
#elenco-lingue a { display: block; padding: 7px 12px; border-radius: 4px; text-decoration: none; color: var(--inchiostro-2); font-size: 0.9375rem; }
#elenco-lingue a:hover { background: var(--terra-chiaro); color: var(--terra-scuro); }
#elenco-lingue a[aria-current="true"] { font-weight: 700; color: var(--terra); }
.lingue-in-arrivo { display: none; }
.lingua-corta { display: none; }

/* --------------------------------------------------------- testata compatta
   Su telefono la testata deve stare in UNA riga. Prima ne occupava tre:
   marchio, pulsante del menu e selettore della lingua andavano a capo uno
   sotto l'altro e mangiavano un quarto dello schermo prima del contenuto.
   Rimedi: marchio piu' piccolo, la riga "Corinaldo · Italia" sparisce, la
   lingua diventa il solo codice (IT, EN) e il menu resta un'icona. */
.apri-menu { display: none; }

@media (max-width: 880px) {
  .testata-riga { min-height: 56px; gap: 8px; flex-wrap: wrap; }
  .marchio { gap: 8px; margin-inline-end: auto; }
  .marchio img { width: 28px; height: 28px; }
  .marchio-testo strong { font-size: 1rem; }
  .apri-menu {
    display: inline-flex; align-items: center; gap: 7px;
    order: 2; flex: none;
    background: none; border: 1px solid var(--linea); border-radius: 100px;
    padding: 6px 12px; font: inherit; font-size: 0.875rem; color: var(--inchiostro-2); cursor: pointer;
  }
  .apri-menu:hover { border-color: var(--terra); color: var(--terra); }
  .selettore-lingua { order: 3; flex: none; }
  .selettore-lingua > button { padding: 6px 11px; font-size: 0.875rem; }
  .lingua-lunga { display: none; }
  .lingua-corta { display: inline; font-family: var(--dati); letter-spacing: .04em; }
  .menu {
    order: 4; flex-basis: 100%; margin-inline-start: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    border-top: 1px solid var(--linea-tenue); padding: 6px 0 12px;
  }
  .menu[hidden] { display: none; }
  .menu a { padding: 11px 2px; font-size: 1rem; border-bottom: 1px solid var(--linea-tenue); }
  .menu a:last-child { border-bottom: none; }
  .menu .bottone-piccolo {
    margin-top: 10px; text-align: center; padding: 11px 14px; border-radius: var(--raggio);
  }
}

/* Sotto i 420 px non ci sta nemmeno la parola "Menù": resta l'icona sola,
   e il nome dell'azienda perde il sottotitolo. */
@media (max-width: 420px) {
  .marchio-testo small { display: none; }
  .marchio-testo strong { font-size: 0.95rem; }
  .menu-etichetta { display: none; }
  .apri-menu { padding: 7px 11px; }
}

/* --------------------------------------------------------- apertura
   Fotografia a tutta larghezza con il testo sopra. La sfumatura scura
   parte dal lato d'inizio: senza, il testo bianco sul verde del campo
   non si legge, e nessun peso del carattere lo salva. */
.apertura {
  position: relative;
  border-bottom: 1px solid var(--linea);
  background: var(--scuro);
  overflow: hidden;
  isolation: isolate;
}
.apertura-sfondo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: center 60%;
}
.apertura::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right,
    rgba(15,20,12,.92) 0%, rgba(15,20,12,.80) 42%, rgba(15,20,12,.35) 72%, rgba(15,20,12,.18) 100%);
}
body.rtl .apertura::after { background: linear-gradient(to left,
    rgba(15,20,12,.92) 0%, rgba(15,20,12,.80) 42%, rgba(15,20,12,.35) 72%, rgba(15,20,12,.18) 100%); }

.apertura-griglia {
  display: grid; grid-template-columns: 1fr;
  align-items: center;
  min-height: clamp(420px, 62vh, 780px);
  /* padding-BLOCK, non padding: la forma abbreviata azzererebbe il
     padding-inline di .contenitore e il testo finirebbe sul bordo. */
  padding-block: clamp(44px, 7vw, 96px);
}
.apertura-testo { max-width: min(46rem, 58%); color: #F1F2EC; }
.apertura h1 { color: #FFFFFF; }
.apertura .occhiello { color: #E8A98C; }
.apertura .sommario { color: #DCE0D4; }
.apertura .rassicurazione { color: #AEB5A4; }
.apertura .bottone.secondario { color: #FFFFFF; border-color: rgba(255,255,255,.45); }
.apertura .bottone.secondario:hover { background: rgba(255,255,255,.12); border-color: #FFFFFF; }
.apertura mark.dc { background: rgba(217,166,78,.22); color: #E9C48A; border-bottom-color: rgba(233,196,138,.6); }

/* Sotto i 900 px la foto non ha piu' spazio a destra: il testo prende tutto. */
@media (max-width: 900px) { .apertura-testo { max-width: 100%; } }

.occhiello { font-family: var(--dati); font-size: 0.7188rem; letter-spacing: .14em; text-transform: uppercase; color: var(--terra); margin-bottom: 14px; }
.sommario { font-size: 1.14rem; color: var(--inchiostro-2); max-width: 54ch; }
.rassicurazione { font-size: 0.875rem; color: var(--tenue); margin-top: 18px; }

.azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.azioni.centrate { justify-content: center; }
.bottone {
  display: inline-block; background: var(--terra); color: #fff; text-decoration: none;
  padding: 12px 24px; border-radius: 100px; font-weight: 600; font-size: 0.9375rem;
  transition: background .15s ease;
}
.bottone:hover { background: var(--terra-scuro); }
.bottone.secondario { background: transparent; color: var(--terra); border: 1px solid var(--linea); }
.bottone.secondario:hover { background: var(--terra-chiaro); border-color: var(--terra); }


/* --------------------------------------------------------- numeri */
.numeri { background: var(--scuro); color: #E9EBE3; padding: clamp(26px, 2.4vw, 46px) 0; }
.numeri-griglia {
  display: grid; gap: clamp(24px, 3vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  text-align: center;
  max-width: min(1240px, 80%); margin-inline: auto;
}
/* Il valore non deve mai spezzarsi: "oltre 60" su due righe non e' un
   numero, e' un errore che si vede. */
.numero strong { display: block; white-space: nowrap; font-family: var(--titoli); font-size: clamp(1.9rem, 1.6vw, 2.8rem); color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; }
.numero span { font-size: 0.8438rem; color: #A9B09F; }

/* --------------------------------------------------------- sezioni */
.sezione { padding: clamp(44px, 6vw, 76px) 0; }
.fondo-alternato { background: var(--fondo-alt); }
.fondo-scuro { background: var(--scuro); color: #DDE0D6; }
.fondo-scuro h2 { color: #fff; }
.fondo-scuro .grande { font-size: 1.16rem; color: #E9EBE3; }
.introduzione { color: var(--inchiostro-2); max-width: 68ch; margin-bottom: 28px; }
.postilla { font-size: 0.875rem; color: var(--tenue); margin-top: 16px; max-width: 70ch; }
.collegamento { font-weight: 600; text-decoration: none; }
.collegamento:hover { text-decoration: underline; }

/* --------------------------------------------------------- schede */
.schede { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(266px, 1fr)); margin-bottom: 24px; }
.scheda { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 22px 24px; box-shadow: var(--ombra); }
.scheda p { max-width: 46ch; }
.scheda h3 { margin-bottom: 2px; }
.latino { font-style: italic; color: var(--foglia); font-size: 0.875rem; margin-bottom: 12px; }

/* --------------------------------------------------------- tabella */
.tabella-scorrevole { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--raggio); background: var(--carta); }
.parametri { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 0.9375rem; }
.parametri th {
  text-align: start; font-family: var(--dati); font-size: 0.6562rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tenue); font-weight: 600;
  padding: 12px 16px; border-bottom: 1px solid var(--linea); background: var(--fondo-alt);
}
.parametri td { padding: 13px 16px; border-bottom: 1px solid var(--linea-tenue); }
.parametri tr:last-child td { border-bottom: none; }
.parametri .cifre { font-family: var(--dati); font-variant-numeric: tabular-nums; font-weight: 600; }
.parametri .nota { color: var(--tenue); font-size: 0.875rem; }

/* --------------------------------------------------------- passaggi */
.passaggi { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 0; }
.passaggi li { display: grid; grid-template-columns: 52px 1fr; gap: 20px; padding: 22px 0; border-top: 1px solid var(--linea-tenue); }
.passaggi li:first-child { border-top: none; }
.passaggio-numero {
  font-family: var(--titoli); font-size: 1.7rem; color: var(--terra); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.passaggi h3 { margin-bottom: 4px; }
.passaggi p { margin: 0; color: var(--inchiostro-2); max-width: 64ch; }

/* --------------------------------------------------------- richiamo finale */
.richiamo { background: var(--terra-chiaro); }

/* --------------------------------------------------------- dati da confermare */
mark.dc {
  background: var(--seme-chiaro);
  color: var(--seme);
  border-bottom: 1px dashed var(--seme);
  padding: 0 3px;
  border-radius: 2px;
  font-style: normal;
}
mark.dc::before { content: "⌁ "; opacity: .7; }
.in-lavorazione { color: var(--tenue); }

/* --------------------------------------------------------- piè di pagina */
.pie { background: var(--carta); border-top: 1px solid var(--linea); padding: 44px 0 22px; font-size: 0.9375rem; }
.pie-griglia { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pie h2 { font-family: var(--dati); font-size: 0.6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); font-weight: 600; margin-bottom: 10px; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 6px; }
.pie a { color: var(--inchiostro-2); text-decoration: none; }
.pie a:hover { color: var(--terra); text-decoration: underline; }
.pie-lingue { columns: 2; }
.pie-basso { border-top: 1px solid var(--linea-tenue); margin-top: 32px; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.dati-fiscali { font-size: 0.8125rem; color: var(--tenue); margin: 0; }

/* --------------------------------------------------------- arabo
   Nessuna regola speculare a mano: il layout usa già le proprietà
   logiche. Qui si corregge solo quello che la direzione non risolve. */
body.rtl .passaggio-numero { text-align: end; }
body.rtl mark.dc::before { content: " ⌁"; }

/* =========================================================
   Pagine interne — Sementi, Qualità, Export, Azienda,
   Contatti, Privacy.
   ========================================================= */

.intestazione {
  background: var(--carta);
  border-bottom: 1px solid var(--linea);
  padding: clamp(34px, 5vw, 60px) 0 clamp(30px, 4vw, 48px);
}
.intestazione h1 { max-width: 20ch; }
.intestazione .sommario { margin-bottom: 0; }

/* --------------------------------------------------------- due colonne
   Una colonna di testo e una di appoggio. Su schermo stretto vanno
   in fila: il riquadro laterale non è mai indispensabile alla lettura. */
.due-colonne { display: grid; gap: 34px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .due-colonne { grid-template-columns: 1.15fr .85fr; gap: 48px; } }

.riquadro {
  background: var(--carta); border: 1px solid var(--linea);
  border-radius: var(--raggio); padding: 22px 24px; box-shadow: var(--ombra);
}
.riquadro h2, .riquadro h3 { margin-top: 0; }
.riquadro p:last-child { margin-bottom: 0; }
.fondo-alternato .riquadro { background: var(--carta); }

/* Un riquadro che avverte, non che informa: bordo oro sul lato d'inizio. */
.avviso-riquadro { border-inline-start: 3px solid var(--seme); }

/* --------------------------------------------------------- specie */
.specie { display: grid; gap: 34px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .specie { grid-template-columns: 1.1fr .9fr; gap: 48px; } }
.specie-testo h2 { margin-bottom: 2px; }
.specie-testo .latino { margin-bottom: 18px; }

.parametri caption {
  text-align: start; padding: 12px 16px; background: var(--fondo-alt);
  border-bottom: 1px solid var(--linea);
  font-family: var(--dati); font-size: 0.6562rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tenue); font-weight: 600;
}
.parametri th[scope="row"] {
  text-align: start; font-family: var(--testo); font-size: 0.9375rem;
  letter-spacing: 0; text-transform: none; color: var(--inchiostro);
  font-weight: 400; background: transparent;
  border-bottom: 1px solid var(--linea-tenue); white-space: normal;
}
.parametri tbody tr:last-child th { border-bottom: none; }

/* --------------------------------------------------------- elenchi */
.elenco-fitto { padding-inline-start: 1.15em; }
.elenco-fitto li { margin-bottom: 5px; }

.elenco-segni { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; max-width: 70ch; }
.elenco-segni li {
  padding-inline-start: 26px; position: relative; margin: 0;
}
.elenco-segni li::before {
  content: "—"; position: absolute; inset-inline-start: 0; color: var(--terra); font-weight: 700;
}

/* --------------------------------------------------------- foto */
.foto-laterale { margin: 0; }
.foto-laterale img {
  width: 100%; height: auto; display: block;
  border-radius: var(--raggio); background: var(--fondo-alt);
}
.foto-laterale figcaption { font-size: 0.8125rem; color: var(--tenue); margin-top: 10px; }

/* --------------------------------------------------------- modulo */
.modulo { max-width: 46rem; }
.campi { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .campi { grid-template-columns: 1fr 1fr; } }
.campo { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.campo-largo { grid-column: 1 / -1; }
.campo label { font-size: 0.875rem; font-weight: 600; color: var(--inchiostro-2); }
.obbligatorio { color: var(--terra); font-weight: 700; }

.campo input, .campo textarea {
  font: inherit; font-size: 1rem; color: var(--inchiostro);
  background: var(--carta); border: 1px solid var(--linea);
  border-radius: var(--raggio); padding: 10px 12px; width: 100%;
}
.campo textarea { resize: vertical; min-height: 7rem; }
.campo input:focus-visible, .campo textarea:focus-visible {
  outline: 2px solid var(--terra); outline-offset: 1px; border-color: var(--terra);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--tenue); }

/* La trappola per i robot: fuori dallo schermo, non display:none, perché
   alcuni robot ignorano i campi nascosti con display. */
.trappola { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consensi { border: 1px solid var(--linea); border-radius: var(--raggio); padding: 18px 20px; margin: 26px 0 22px; }
.consensi legend {
  font-family: var(--dati); font-size: 0.6562rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tenue); font-weight: 600; padding-inline: 8px;
}
.consenso { display: flex; gap: 11px; align-items: flex-start; margin: 0 0 12px; }
.consenso input { margin-top: .32em; width: 17px; height: 17px; accent-color: var(--terra); flex: none; }
.consenso label { font-size: 0.9375rem; color: var(--inchiostro-2); line-height: 1.5; }
.nota-consenso { font-size: 0.8438rem; color: var(--tenue); margin: 14px 0 0; }

.esito { border-radius: var(--raggio); padding: 18px 22px; margin-bottom: 28px; }
.esito h2 { margin-top: 0; font-size: 1.2rem; }
.esito p:last-child { margin-bottom: 0; }
.esito.ok { background: var(--foglia-chiaro); border-inline-start: 3px solid var(--foglia); }
.esito.errore { background: var(--terra-chiaro); border-inline-start: 3px solid var(--terra); }

/* --------------------------------------------------------- recapiti */
.recapiti-elenco { margin: 0; }
.recapiti-elenco dt {
  font-family: var(--dati); font-size: 0.6562rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tenue); font-weight: 600; margin-top: 16px;
}
.recapiti-elenco dt:first-child { margin-top: 0; }
.recapiti-elenco dd { margin: 4px 0 0; font-size: 0.9375rem; }

/* --------------------------------------------------------- avviso bozza */
.avviso-bozza {
  border-inline-start: 3px solid var(--seme); background: var(--seme-chiaro);
  padding: 16px 20px; border-radius: 0 var(--raggio) var(--raggio) 0; margin-bottom: 34px;
}
.avviso-bozza .lab {
  font-family: var(--dati); font-size: 0.6562rem; letter-spacing: .12em; text-transform: uppercase;
  display: block; margin-bottom: 6px; font-weight: 700; color: var(--seme);
}
.avviso-bozza p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------- fascia fotografica
   Una striscia a tutta larghezza fra intestazione e contenuto. Serve a
   spezzare il muro di testo delle pagine tecniche: senza, sono elenchi
   e tabelle dall'inizio alla fine. */
.fascia-foto { margin: 0; }
.fascia-foto img {
  display: block; width: 100%;
  height: clamp(180px, 22vw, 420px);
  object-fit: cover; object-position: center 55%;
  background: var(--fondo-alt);
}

/* --------------------------------------------------------- parole chiave
   Nel titolo due parole cambiano colore: la specie e il termine
   commerciale. Due, non cinque: oltre quel numero il titolo diventa un
   ritaglio di giornale e non si legge piu' niente.
   I marcatori stanno nei file di lingua (*specie* e _commerciale_), cosi'
   chi traduce sposta l'evidenziazione sulla parola giusta della sua lingua
   senza toccare il codice. Vedi ricco() in _i18n.php */
.chiave-a, .chiave-b { font-style: normal; }
.chiave-a { color: var(--terra); }
.chiave-b { color: var(--foglia); }

/* Sopra la fotografia servono versioni schiarite. La seconda parola NON
   puo' restare verde: la foto e' un campo verde e la parola ci sparisce
   dentro. Diventa oro, che sul verde stacca e resta nella famiglia calda
   del marchio. */
.apertura .chiave-a { color: #F2A07A; }
.apertura .chiave-b { color: #EFD3A0; }

/* --------------------------------------------------------- colonna laterale
   Sulla pagina contatti i riquadri di appoggio stanno incolonnati nello
   stesso posto della griglia: la griglia ha due colonne, un terzo elemento
   finirebbe sotto il modulo invece che accanto. */
.colonna-laterale { display: grid; gap: 16px; align-content: start; }

/* Il riquadro per chi scrive dall'estero: sta in evidenza ma non urla. */
.stranieri { border-inline-start: 3px solid var(--terra); background: var(--terra-chiaro); }
.stranieri h2 { font-size: 1.25rem; }
.stranieri p { font-size: 0.9375rem; }
.stranieri .invito { margin-bottom: 0; font-weight: 600; color: var(--terra-scuro); }

/* =========================================================
   Assistente

   Tutto in proprieta' logiche: in arabo il widget si specchia da solo,
   e la bolla passa dall'angolo destro al sinistro senza una riga in piu'.
   ========================================================= */

.chat-apri {
  position: fixed; inset-block-end: 18px; inset-inline-end: 18px; z-index: 80;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--terra); color: #fff; border: none;
  border-radius: 100px; padding: 13px 20px;
  font: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 22px -8px rgba(25,28,23,.5);
}
.chat-apri:hover { background: var(--terra-scuro); }
.chat-apri:focus-visible { outline: 3px solid var(--terra); outline-offset: 3px; }

.chat {
  position: fixed; inset-block-end: 78px; inset-inline-end: 18px; z-index: 81;
  width: min(400px, calc(100vw - 36px));
  max-height: min(640px, calc(100vh - 110px));
  display: none; flex-direction: column;
  background: var(--carta); color: var(--inchiostro);
  border: 1px solid var(--linea); border-radius: 10px;
  box-shadow: 0 18px 50px -18px rgba(25,28,23,.55);
  overflow: hidden;
}
.chat.chat-aperta { display: flex; }
.chat-rtl { direction: rtl; }

.chat-testata {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; background: var(--scuro); color: #fff;
}
.chat-testata strong { font-family: var(--titoli); font-size: 1rem; font-weight: 600; }
.chat-chiudi {
  background: none; border: none; color: #C9CEC0; font-size: 1.5rem;
  line-height: 1; cursor: pointer; padding: 0 4px;
}
.chat-chiudi:hover { color: #fff; }

/* L'informativa sta in ALTO, prima di qualunque scambio: e' il punto in
   cui va detto, non in fondo dopo aver raccolto i dati. */
.chat-informativa {
  margin: 0; padding: 10px 16px; font-size: 0.75rem; line-height: 1.5;
  color: var(--tenue); background: var(--fondo-alt);
  border-block-end: 1px solid var(--linea-tenue);
}

.chat-messaggi {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--fondo);
}
.chat-bolla {
  max-width: 85%; padding: 10px 14px; border-radius: 12px;
  font-size: 0.9375rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
}
.chat-bot {
  background: var(--carta); border: 1px solid var(--linea);
  align-self: flex-start; border-start-start-radius: 3px;
}
.chat-me {
  background: var(--terra); color: #fff;
  align-self: flex-end; border-end-end-radius: 3px;
}
.chat-attesa { color: var(--tenue); letter-spacing: .2em; }

.chat-riga {
  display: flex; gap: 8px; align-items: flex-end;
  padding: 12px; border-block-start: 1px solid var(--linea); background: var(--carta);
}
.chat-etichetta { position: absolute; inset-inline-start: -9999px; }
.chat-riga textarea {
  flex: 1; font: inherit; font-size: 1rem; line-height: 1.45;
  border: 1px solid var(--linea); border-radius: 8px;
  padding: 9px 11px; resize: none; max-height: 130px; color: var(--inchiostro);
  background: var(--carta);
}
.chat-riga textarea:focus-visible { outline: 2px solid var(--terra); outline-offset: 1px; }
.chat-riga button {
  background: var(--terra); color: #fff; border: none; border-radius: 8px;
  padding: 10px 16px; font: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer;
}
.chat-riga button:hover { background: var(--terra-scuro); }
.chat-riga button:disabled { opacity: .5; cursor: default; }

.chat-consenso {
  background: var(--terra-chiaro); border: 1px solid var(--linea);
  border-radius: 10px; padding: 14px 16px; font-size: 0.875rem;
}
.chat-consenso-riga { display: flex; gap: 9px; align-items: flex-start; margin: 0 0 10px; }
.chat-consenso-riga input { margin-top: .25em; width: 16px; height: 16px; accent-color: var(--terra); flex: none; }
.chat-consenso-riga label { line-height: 1.45; }
.chat-consenso-nota { margin: 0 0 12px; font-size: 0.8125rem; }
.chat-consenso button {
  background: var(--terra); color: #fff; border: none; border-radius: 8px;
  padding: 9px 16px; font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer;
}
.chat-consenso button:disabled { opacity: .45; cursor: default; }

@media (max-width: 520px) {
  .chat {
    inset: auto 0 0 0; width: 100%; max-height: 88vh;
    border-radius: 12px 12px 0 0; border-inline: none; border-block-end: none;
  }
  .chat-apri { inset-block-end: 14px; inset-inline-end: 14px; padding: 12px 18px; }
}