/* =====================================================================
   M.T.M. S.r.l. — foglio di stile del sito
   Tutto servito dal sito: niente librerie esterne, niente font da Google.
   ===================================================================== */

/* ---------- Font (licenza SIL OFL 1.1, file in /font) ---------- */
@font-face { font-family: "Archivo"; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(../font/archivo-latin-wdth-normal.woff2) format("woff2-variations"), url(../font/archivo-latin-wdth-normal.woff2) format("woff2"); }
@font-face { font-family: "Plex"; font-weight: 400; font-display: swap; src: url(../font/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Plex"; font-weight: 500; font-display: swap; src: url(../font/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Plex"; font-weight: 600; font-display: swap; src: url(../font/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "PlexMono"; font-weight: 400; font-display: swap; src: url(../font/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "PlexMono"; font-weight: 500; font-display: swap; src: url(../font/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); }

/* ---------- Palette: il verde del marchio, il grigio delle lastre, l'ambra del fuso ---------- */
:root {
  --lastra: #f2f5f3;        /* fondo pagina: grigio acciaio con un filo di verde */
  --bianco: #ffffff;
  --inchiostro: #0f2a1c;    /* testo */
  --grigio: #566e60;        /* testo secondario */
  --filo: #d5e0d9;          /* linee */
  --verde: #009845;         /* verde M.T.M., il colore esatto del logo */
  --verde-scuro: #007336;   /* link e testo verde su chiaro */
  --abisso: #062d1b;        /* fondi scuri: la finestra del ciclo, le fasce */
  --menta: #9be3b5;         /* verde chiaro su fondo scuro */
  --fuso: #f2a43a;          /* ambra: il fronte della plastica fusa. Usata pochissimo */
  --ok: #1f7a4d;
  --errore: #b42318;

  --display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --testo: "Plex", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "PlexMono", ui-monospace, Consolas, monospace;
  /* riserve per cinese e giapponese: i nostri caratteri non contengono gli ideogrammi,
     quindi si indicano le famiglie di sistema piu' diffuse su Windows, Android, iOS e Mac */
  --cjk: "Noto Sans SC", "Noto Sans JP", "Source Han Sans SC", "Hiragino Sans", "Yu Gothic", "Microsoft YaHei", "PingFang SC", sans-serif;

  --larghezza: 76rem;
  --gronda: clamp(1rem, 4vw, 2.5rem);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--lastra); color: var(--inchiostro); font: 400 1.0625rem/1.65 var(--testo); }
img, svg, canvas { max-width: 100%; display: block; }
a { color: var(--verde-scuro); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; text-wrap: balance; }

.contenitore { width: 100%; max-width: var(--larghezza); margin-inline: auto; padding-inline: var(--gronda); }
.salta { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--verde); color: #fff; padding: .6rem 1rem; }
.salta:focus { left: 0; }

/* tipografia di progetto */
/* le parole lunghe (tedesco: Kunststoffspritzgiessen) devono andare a capo, non uscire dal riquadro.
   ATTENZIONE: qui c'era "hyphens: auto" ed era un errore (tolto il 15/09/2026).
   Quella riga dava al browser il permesso di spezzare col trattino QUALSIASI
   parola a fine sillaba, anche quando lo spazio c'era: nei titoli usciva roba
   come "La se-conda generazione". Resta solo overflow-wrap, che non mette
   trattini e interviene soltanto se una parola e' davvero piu' larga del
   riquadro - il caso dei composti tedeschi, che era il motivo vero. */
body { overflow-wrap: break-word; }
.titolone, .titolo-sezione, .titolo-voce, h1, h2, h3 { overflow-wrap: break-word; hyphens: manual; }
.titolone { font-family: var(--display); font-stretch: 125%; font-weight: 800; letter-spacing: -.02em; line-height: .98; font-size: clamp(2.4rem, 5.6vw, 4.6rem); }
.titolo-sezione { font-family: var(--display); font-stretch: 118%; font-weight: 750; letter-spacing: -.015em; line-height: 1.05; font-size: clamp(1.8rem, 3.6vw, 2.9rem); }
.titolo-voce { font-family: var(--display); font-stretch: 108%; font-weight: 650; line-height: 1.2; font-size: 1.3rem; }
.etichetta { display: inline-flex; align-items: center; gap: .6rem; font: 500 .78rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--verde-scuro); }
.etichetta::before { content: ""; width: 1.6rem; height: 2px; background: currentColor; }
.introduzione { font-size: clamp(1.08rem, 1.7vw, 1.28rem); line-height: 1.6; color: var(--grigio); max-width: 38rem; margin: 0; }
.sezione { padding-block: clamp(4rem, 9vw, 7.5rem); }
.sezione-testa { display: grid; gap: 1rem; max-width: 48rem; margin-bottom: clamp(2.2rem, 5vw, 3.5rem); }

/* ---------- Pulsanti ---------- */
.pulsante { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 50px; padding: .75rem 1.35rem; border: 2px solid transparent; border-radius: 2px; font: 600 1rem/1.2 var(--testo); text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s, transform .15s; }
.pulsante:active { transform: translateY(1px); }
/* verde scuro: con il testo bianco il verde del logo arriva a contrasto 3,8:1, sotto il minimo 4,5:1 (leggibilita al sole) */
.pulsante-pieno { background: var(--verde-scuro); color: #fff; }
.pulsante-pieno:hover { background: var(--abisso); }
.pulsante-bordo { border-color: var(--inchiostro); color: var(--inchiostro); background: transparent; }
.pulsante-bordo:hover { background: var(--inchiostro); color: #fff; }
.pulsante .freccia { transition: transform .15s; }
.pulsante:hover .freccia { transform: translateX(3px); }
.pulsanti { display: flex; flex-wrap: wrap; gap: .75rem; }
.link-freccia { font-weight: 600; text-decoration: none; display: inline-flex; gap: .5rem; align-items: center; }
.link-freccia:hover { text-decoration: underline; }

/* ---------- Testata ---------- */
.testata { position: sticky; top: 0; z-index: 50; background: rgba(242,245,243,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--filo); }
.testata-riga { display: flex; align-items: center; gap: 1rem; min-height: 74px; }
.marchio { margin-right: auto; display: block; width: 172px; line-height: 0; }
.marchio svg { width: 100%; height: auto; }
.navigazione ul { display: flex; align-items: center; gap: .15rem; }
.navigazione a { display: block; padding: .55rem .85rem; color: var(--inchiostro); text-decoration: none; font-weight: 500; }
.navigazione a:hover { color: var(--verde-scuro); }
.navigazione a[aria-current="page"] { color: var(--verde-scuro); box-shadow: inset 0 -2px 0 var(--verde); }
.testata .pulsante { min-height: 44px; padding: .5rem 1rem; }

.lingue { position: relative; }
.lingue summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .4rem .7rem; border: 1px solid var(--filo); background: var(--bianco); font: 500 .82rem var(--mono); letter-spacing: .06em; }
.lingue summary::-webkit-details-marker { display: none; }
.lingue summary::after { content: ""; width: .4rem; height: .4rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.lingue ul { position: absolute; right: 0; top: calc(100% + 6px); min-width: 11rem; padding: .3rem; background: var(--bianco); border: 1px solid var(--filo); box-shadow: 0 16px 40px rgba(6,45,27,.14); z-index: 60; }
.lingue li a { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .7rem; color: var(--inchiostro); text-decoration: none; }
.lingue li a:hover { background: var(--lastra); }
.lingue li a[aria-current="true"] { color: var(--verde-scuro); font-weight: 600; }
.lingue li a span { font: .78rem var(--mono); color: var(--grigio); }

.apri-menu { display: none; }
.navigazione .solo-mobile { display: none; }
@media (max-width: 900px) {
  .marchio { width: 134px; }
  .apri-menu { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .4rem .8rem; background: var(--bianco); border: 1px solid var(--filo); font: 500 .95rem var(--testo); color: var(--inchiostro); cursor: pointer; }
  .apri-menu .barre, .apri-menu .barre::before, .apri-menu .barre::after { content: ""; display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
  .apri-menu .barre::before { position: absolute; top: -6px; }
  .apri-menu .barre::after { position: absolute; top: 6px; }
  .testata-riga { flex-wrap: wrap; }
  .navigazione { order: 5; width: 100%; display: none; padding-bottom: .8rem; }
  .testata.menu-aperto .navigazione { display: block; }
  .navigazione ul { flex-direction: column; align-items: stretch; gap: 0; }
  .navigazione a { padding: .95rem .2rem; border-top: 1px solid var(--filo); font-size: 1.15rem; }
  .navigazione a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--verde); padding-left: .8rem; }
  .navigazione .solo-mobile { display: block; }
  .testata .pulsante-testata { display: none; }
  .no-js .navigazione { display: block; }
}

/* ---------- Apertura ---------- */
.apertura { position: relative; overflow: hidden; border-bottom: 1px solid var(--filo);
  background-image: linear-gradient(var(--filo) 1px, transparent 1px), linear-gradient(90deg, var(--filo) 1px, transparent 1px);
  background-size: 48px 48px; background-position: -1px -1px; }
.apertura::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--lastra) 30%, rgba(242,245,243,.55) 62%, rgba(242,245,243,0)); pointer-events: none; }
.apertura-griglia { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; padding-block: clamp(3rem, 7vw, 6rem); }
/* la colonna implicita di questa griglia si dimensionava sul testo piu' lungo (in tedesco 480px su uno
   schermo da 360): con minmax(0,1fr) la colonna resta larga quanto il contenitore e il testo va a capo */
.apertura-testo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; justify-items: start; min-width: 0; }
/* senza questi due limiti una parola lunghissima allarga la colonna della griglia oltre lo schermo */
.apertura-griglia > * { min-width: 0; }
.apertura-testo > * { max-width: 100%; }
.apertura .titolone span { display: block; font-stretch: 100%; font-weight: 500; letter-spacing: -.01em; font-size: .46em; line-height: 1.15; color: var(--verde-scuro); margin-top: .55em; }
.apertura .introduzione { color: #2d4843; }
@media (max-width: 900px) {
  .apertura-griglia { grid-template-columns: 1fr; }
  .apertura::after { background: linear-gradient(180deg, var(--lastra) 45%, rgba(242,245,243,.6)); }
}

/* la finestra del ciclo di stampaggio */
.ciclo { margin: 0; background: var(--abisso); color: #dff3e6; border: 1px solid #0f4a2c; box-shadow: 0 30px 70px -30px rgba(6,45,27,.55); }
.ciclo-barra { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem .95rem; border-bottom: 1px solid #0f4a2c; font: 500 .72rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--menta); }
.ciclo-barra .tempo { color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ciclo canvas { width: 100%; height: auto; aspect-ratio: 600 / 430; }
.ciclo-fasi { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #0f4a2c; }
.ciclo-fasi li { position: relative; padding: .65rem .7rem .75rem; font: 500 .7rem/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: #6fa582; border-left: 1px solid #0f4a2c; }
.ciclo-fasi li:first-child { border-left: 0; }
.ciclo-fasi li::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: var(--avanzamento, 0%); background: var(--menta); }
.ciclo-fasi li.attiva { color: #fff; }
.ciclo-legenda { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1.2rem; padding: .6rem .95rem .75rem; border-top: 1px solid #0f4a2c; font: .7rem/1.2 var(--mono); color: #8fbca0; }
.ciclo-legenda span { display: inline-flex; align-items: center; gap: .45rem; }
.ciclo-legenda i { width: 18px; height: 6px; display: inline-block; }
@media (max-width: 480px) { .ciclo-fasi li { font-size: .58rem; padding-inline: .4rem; letter-spacing: 0; } }

/* ---------- Scheda tecnica ---------- */
.scheda { background: var(--abisso); color: #fff; }
.scheda dl { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.scheda dl > div { padding: 1.7rem 1.4rem 1.8rem; border-left: 1px solid #124d30; display: grid; gap: .35rem; align-content: start; }
.scheda dl > div:first-child { border-left: 0; padding-left: 0; }
.scheda dt { font: 500 .74rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--menta); }
.scheda dd { margin: 0; font-family: var(--display); font-stretch: 125%; font-weight: 750; font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.05; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .scheda dl { grid-template-columns: 1fr 1fr; }
  .scheda dl > div { border-left: 0; border-top: 1px solid #124d30; padding: 1.2rem 1rem 1.3rem 0; }
  .scheda dl > div:nth-child(-n+2) { border-top: 0; }
  .scheda dl > div:nth-child(even) { padding-left: 1rem; border-left: 1px solid #124d30; }
  /* sul telefono il carattere largo non sta in mezza colonna: piu' piccolo e mai a capo */
  /* Niente "white-space: nowrap" qui (tolto il 15/09/2026): serviva a non
     spezzare "50-160 t", ma in finlandese il valore e' "vuodesta 1971" e,
     non potendo andare a capo, allargava la colonna facendo sbordare la
     pagina di 2 px sul telefono. Il "min-width: 0" sul riquadro serve
     perche' le caselle di una griglia, se non glielo si dice, si rifiutano
     di stringersi sotto la larghezza del loro contenuto. */
  .scheda dl > div { min-width: 0; }
  .scheda dd { font-size: clamp(1.25rem, 5.6vw, 1.7rem); font-stretch: 112%; }
}

/* ---------- Servizi ---------- */
.servizi-griglia { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.servizi-griglia .sezione-testa { position: sticky; top: 110px; margin: 0; }
@media (max-width: 900px) { .servizi-griglia { grid-template-columns: 1fr; } .servizi-griglia .sezione-testa { position: static; } }
.gruppo + .gruppo { margin-top: 2.8rem; }
.gruppo-titolo { font: 500 .78rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--grigio); padding-bottom: .8rem; border-bottom: 2px solid var(--inchiostro); }
.voci-base li { display: grid; gap: .45rem; padding: 1.5rem 0; border-bottom: 1px solid var(--filo); }
.voci-base p { margin: 0; color: var(--grigio); max-width: 34rem; }
.voci-plus { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; }
.voci-plus li { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; padding: 1.15rem 0; border-bottom: 1px solid var(--filo); }
.voci-plus li::before { content: "+"; grid-row: span 2; font: 600 1.35rem/1 var(--mono); color: var(--verde); }
.voci-plus strong { font-weight: 600; }
.voci-plus span { color: var(--grigio); font-size: .95rem; }
@media (max-width: 560px) { .voci-plus { grid-template-columns: 1fr; } }

/* ---------- Processo ---------- */
.processo { background: var(--bianco); border-block: 1px solid var(--filo); }
.passi { display: grid; grid-template-columns: repeat(5, 1fr); counter-reset: passo; }
.passo { position: relative; padding: 2.4rem 1.4rem 0 0; }
.passo::before { counter-increment: passo; content: counter(passo, decimal-leading-zero); position: absolute; top: 0; left: 0; z-index: 1; padding-right: .6rem; background: var(--bianco); font: 500 .8rem var(--mono); color: var(--verde-scuro); }
.passo::after { content: ""; position: absolute; top: .55rem; left: 2.4rem; right: 1rem; height: 2px; background: repeating-linear-gradient(90deg, var(--verde) 0 8px, transparent 8px 14px); }
.passo:last-child::after { right: 40%; }
.passo h3 { margin-bottom: .45rem; }
.passo p { margin: 0; color: var(--grigio); font-size: .98rem; }
@media (max-width: 960px) {
  .passi { grid-template-columns: 1fr; }
  .passo { padding: 0 0 1.8rem 3.2rem; }
  .passo::after { top: 1.8rem; bottom: .4rem; left: .7rem; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--verde) 0 8px, transparent 8px 14px); }
  .passo:last-child::after { bottom: 60%; }
  .passo::before { padding: .2rem 0; }
}

/* ---------- Storia ---------- */
.storia { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); border-top: 2px solid var(--inchiostro); }
.storia li { padding: 1.3rem 1.2rem 1.5rem 0; border-bottom: 1px solid var(--filo); display: grid; gap: .45rem; align-content: start; }
.storia .anno { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: clamp(2rem, 3.4vw, 2.7rem); line-height: 1; color: var(--verde); font-variant-numeric: tabular-nums; }
.storia h3 { font: 600 1.05rem/1.3 var(--testo); }
.storia p { margin: 0; color: var(--grigio); font-size: .95rem; }
.storia-verticale { grid-template-columns: 1fr; }
.storia-verticale li { grid-template-columns: 10rem 1fr; column-gap: 2rem; padding: 1.6rem 0; }
.storia-verticale .anno { grid-row: span 2; }
@media (max-width: 560px) {
  .storia-verticale li { grid-template-columns: 1fr; } .storia-verticale .anno { grid-row: auto; }
  /* una colonna sola: parole lunghe come "Aujourd'hui" non escono dallo schermo */
  .storia { grid-template-columns: 1fr; }
  .storia .anno { font-size: clamp(1.6rem, 6.5vw, 2.2rem); overflow-wrap: break-word; }
}

/* ---------- Settori ---------- */
.settori { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1rem; }
.settore { background: var(--bianco); border: 1px solid var(--filo); padding: 1.4rem 1.3rem 1.5rem; display: grid; gap: .8rem; align-content: start; }
.settore h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.settore h3 span { font: 400 .78rem var(--mono); color: var(--grigio); }
.pezzi { display: flex; flex-wrap: wrap; gap: .35rem; }
.pezzi li { font-size: .9rem; padding: .18rem .55rem; border: 1px solid var(--filo); background: var(--lastra); }
.nota-materiali { margin-top: 1.6rem; color: var(--grigio); }
/* materiali: stesse etichette dei particolari, ma piu' grandi */
.elenco-materiali { gap: .6rem; }
.elenco-materiali li { font-size: 1.02rem; font-weight: 500; padding: .5rem .9rem; background: var(--bianco); border-color: var(--verde); }
.sigle-materiali { margin-top: 1.4rem; color: var(--grigio); }
.sigle-materiali strong { font: 500 .95rem var(--mono); color: var(--inchiostro); letter-spacing: .02em; }

/* ---------- Invito ---------- */
.invito { position: relative; overflow: hidden; background: var(--verde); color: #fff; }
.invito::before { content: ""; position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 48px 48px; }
.invito .contenitore { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem; align-items: end; padding-block: clamp(3.5rem, 8vw, 6rem); }
.invito .titolo-sezione { margin-bottom: .9rem; }
.invito p { margin: 0; color: #e3f6ea; max-width: 36rem; font-size: 1.1rem; }
.invito .pulsanti { justify-content: flex-end; }
.invito .pulsante-pieno { background: var(--abisso); }
.invito .pulsante-pieno:hover { background: #000; }
.invito .pulsante-bordo { border-color: #fff; color: #fff; }
.invito .pulsante-bordo:hover { background: #fff; color: var(--abisso); }
@media (max-width: 760px) { .invito .contenitore { grid-template-columns: 1fr; } .invito .pulsanti { justify-content: flex-start; } }

/* ---------- Pagine interne ---------- */
.testa-pagina { position: relative; overflow: hidden; border-bottom: 1px solid var(--filo); background-image: linear-gradient(var(--filo) 1px, transparent 1px), linear-gradient(90deg, var(--filo) 1px, transparent 1px); background-size: 48px 48px; }
.testa-pagina::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--lastra) 35%, rgba(242,245,243,.4)); }
.testa-pagina .contenitore { position: relative; z-index: 1; display: grid; gap: 1.2rem; justify-items: start; padding-block: clamp(3rem, 8vw, 6rem); }
.testa-pagina .titolone { font-size: clamp(2.1rem, 5.2vw, 4.2rem); max-width: 18ch; }
.due-colonne { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 900px) { .due-colonne { grid-template-columns: 1fr; } }
.testo-lungo p { font-size: 1.12rem; max-width: 40rem; }
.perche { border-top: 2px solid var(--inchiostro); }
.perche li { padding: 1.3rem 0; border-bottom: 1px solid var(--filo); display: grid; gap: .3rem; }
.perche p { margin: 0; color: var(--grigio); }

.servizio-esteso { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem 3rem; padding: 2rem 0; border-bottom: 1px solid var(--filo); }
.servizio-esteso:first-child { border-top: 2px solid var(--inchiostro); }
.servizio-esteso p { margin: 0; color: var(--grigio); }
.servizio-esteso .breve { color: var(--inchiostro); font-weight: 500; margin-bottom: .5rem; }
@media (max-width: 760px) { .servizio-esteso { grid-template-columns: 1fr; } }

/* ---------- Contatti ---------- */
.contatti-griglia { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (max-width: 900px) { .contatti-griglia { grid-template-columns: 1fr; } .recapiti { order: -1; } }
.recapiti { background: var(--abisso); color: #fff; padding: 1.6rem; }
.recapiti dl { margin: 0; display: grid; gap: 1.2rem; }
.recapiti dt { font: 500 .72rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--menta); }
.recapiti dd { margin: .2rem 0 0; font-size: 1.05rem; }
.recapiti a { color: #fff; }
.recapiti .pulsanti { margin-top: 1.5rem; }
.recapiti .pulsante { flex: 1 1 auto; }
.recapiti .pulsante-bordo { border-color: #fff; color: #fff; }
.recapiti .pulsante-bordo:hover { background: #fff; color: var(--abisso); }

.modulo { background: var(--bianco); border: 1px solid var(--filo); padding: clamp(1.25rem, 3vw, 2.2rem); }
.modulo fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.modulo legend { font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: 1.45rem; margin-bottom: 1.3rem; padding: 0; }
.campi { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; }
.campo { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.campo-intero { grid-column: 1 / -1; }
@media (max-width: 600px) { .campi { grid-template-columns: 1fr; } }
.campo label { font-weight: 500; font-size: .95rem; }
.campo .aiuto { font-size: .85rem; color: var(--grigio); }
.obbligatorio { color: var(--verde-scuro); }
.modulo input[type=text], .modulo input[type=email], .modulo input[type=tel], .modulo select, .modulo textarea { width: 100%; min-height: 50px; padding: .75rem .85rem; font: 400 1rem/1.4 var(--testo); color: var(--inchiostro); background: var(--lastra); border: 1px solid #b9cbbf; border-radius: 2px; }
.modulo textarea { min-height: 9rem; resize: vertical; }
.modulo input:focus, .modulo select:focus, .modulo textarea:focus { outline: 2px solid var(--verde); outline-offset: 0; border-color: var(--verde); background: #fff; }
.modulo input[type=file] { font: inherit; font-size: .95rem; padding: .5rem 0; max-width: 100%; }
.spunta { display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem; }
.spunta input { width: 22px; height: 22px; margin: .15rem 0 0; accent-color: var(--verde); flex: none; }
.trappola { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.modulo-piede { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.6rem; }
.modulo-piede small { color: var(--grigio); }
.esito { margin-top: 1.25rem; padding: 1rem 1.1rem; font-weight: 500; }
.esito[data-tipo="ok"] { background: #e3f4ec; color: var(--ok); border: 1px solid #b7dcc7; }
.esito[data-tipo="errore"] { background: #fdecea; color: var(--errore); border: 1px solid #f3c1bc; }
.modulo button[disabled] { opacity: .65; cursor: progress; }

.mappa { margin-top: clamp(3rem, 7vw, 5rem); display: grid; gap: 1.2rem; }
.mappa-riquadro { position: relative; min-height: 360px; display: grid; place-items: center; text-align: center; padding: 2rem 1.25rem; overflow: hidden; background-color: var(--abisso); color: #fff; background-image: linear-gradient(rgba(155,227,181,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(155,227,181,.08) 1px, transparent 1px); background-size: 32px 32px; }
.mappa-riquadro iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mappa-segnaposto { position: relative; max-width: 34rem; display: grid; gap: 1rem; justify-items: center; }
.mappa-segnaposto svg { width: 44px; height: 44px; color: var(--menta); }
.mappa-segnaposto address { font-style: normal; font-size: 1.2rem; }
.mappa-segnaposto p { margin: 0; color: #9cc5ab; font-size: .92rem; }
.mappa-segnaposto .pulsanti { justify-content: center; }
.mappa-riquadro .pulsante-bordo { border-color: #fff; color: #fff; }
.mappa-riquadro .pulsante-bordo:hover { background: #fff; color: var(--abisso); }

/* ---------- Privacy ---------- */
.informativa { max-width: 46rem; }
.informativa h2 { font-family: var(--display); font-stretch: 110%; font-weight: 700; font-size: 1.35rem; margin: 2.2rem 0 .7rem; }
.informativa ul { list-style: disc; padding-left: 1.2rem; margin-bottom: 1em; }

/* ---------- Piede ---------- */
.piede { background: var(--abisso); color: #b6d3c1; font-size: .95rem; padding-block: 3.5rem 2rem; }
.piede a { color: #fff; }
.piede-griglia { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
.piede .marchio { width: 180px; margin: 0 0 1.2rem; }  /* solo il verde del logo, senza riquadro bianco */
.piede h2 { font: 500 .72rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--menta); margin-bottom: .9rem; }
.piede ul { display: grid; gap: .45rem; }
.piede address { font-style: normal; }
.piede-fondo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; margin-top: 3rem; padding-top: 1.3rem; border-top: 1px solid #124d30; font-size: .85rem; color: #86aa93; }
@media (max-width: 760px) { .piede-griglia { grid-template-columns: 1fr; } }

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


/* ---------- Cinese e giapponese ---------- */
:lang(zh), :lang(ja) {
  --display: "Archivo", var(--cjk);
  --testo: "Plex", var(--cjk);
  --mono: "PlexMono", var(--cjk);
}
/* gli ideogrammi non vanno allargati ne' spaziati come le lettere latine */
:lang(zh) .titolone, :lang(ja) .titolone,
:lang(zh) .titolo-sezione, :lang(ja) .titolo-sezione,
:lang(zh) .anno, :lang(ja) .anno { font-stretch: normal; letter-spacing: 0; }
:lang(zh) .etichetta, :lang(ja) .etichetta,
:lang(zh) .ciclo-barra, :lang(ja) .ciclo-barra,
:lang(zh) .ciclo-fasi li, :lang(ja) .ciclo-fasi li,
:lang(zh) .scheda dt, :lang(ja) .scheda dt { letter-spacing: .02em; text-transform: none; }