/* =====================================================================
   Metal Serramenti S.r.l. — foglio di stile unico del sito vetrina
   Mobile-first. Riferimento desktop: design a 1440 px (contenitore 1200).
   Punti di rottura: 601 px (tablet), 901 px (desktop), 1100 px (menu esteso).
   Nessuno stile inline nelle pagine: tutto passa da queste classi.
   ===================================================================== */

/* ---------- Font locali (sottoinsieme latin) ---------- */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/fonts/barlow-300.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/barlow-700.woff2") format("woff2"); }
@font-face { font-family: "Caladea"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("/assets/fonts/caladea-700.woff2") format("woff2"); }
@font-face { font-family: "Caladea"; font-style: italic; font-weight: 600 700; font-display: swap; src: url("/assets/fonts/caladea-700-italic.woff2") format("woff2"); }

/* ---------- Variabili del design ---------- */
:root {
  --inchiostro: #1F2A29;      /* testo principale, fondo barra urgenza e CTA finale */
  --ardesia: #31403F;         /* verde-grigio scuro: bande e riquadri scuri */
  --ardesia-scura: #253130;
  --oro: #BB9F29;             /* bottoni principali, numeri dei passi */
  --oro-chiaro: #C9AD34;      /* hover del bottone oro */
  --oro-luce: #D9C25A;        /* oro su fondo scuro */
  --oro-testo: #7A6614;       /* oro leggibile su fondo chiaro (occhielli, link) */
  --carta: #F7F4EA;           /* fondo crema */
  --bianco: #FFFFFF;
  --salvia: #EAF0EF;          /* fondo sezione "perché noi" */
  --bordo: #E4DFCB;
  --testo: #3A4847;
  --testo-tenue: #4A5857;
  --testo-nota: #55625F;
  --su-scuro: #E7ECEB;
  --su-scuro-tenue: #C7D4D3;
  --su-scuro-medio: #DCE3E2;
  --font-testo: "Barlow", Arial, sans-serif;
  --font-titoli: "Caladea", Cambria, Georgia, serif;
  --ombra-bottone: 0 10px 24px rgba(31, 42, 41, .22);
  --raggio: 6px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 110px; }
body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--font-testo);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--oro-testo); }
a:hover { color: var(--ardesia); }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; }
strong, b { font-weight: 600; }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; }
.su-scuro :focus-visible, .barra-urgenza :focus-visible { outline-color: var(--oro-luce); }

.salta-contenuto {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  background: var(--inchiostro); color: var(--bianco);
  padding: 12px 18px; border-radius: 4px; font-weight: 600; text-decoration: none;
}
.salta-contenuto:focus { top: 12px; color: var(--bianco); }

.solo-lettori {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Contenitori e griglie ---------- */
.contenitore { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.contenitore--stretto { max-width: 880px; }
.contenitore--medio { max-width: 900px; }
.pila { display: flex; flex-direction: column; gap: 16px; }
.pila--piccola { gap: 10px; }
.pila--media { gap: 22px; }
.pila--grande { gap: 32px; }
.pila--enorme { gap: 44px; }
.pila--centrata { align-items: center; text-align: center; }

.griglia-2, .griglia-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: center; }
.griglia-2--fondo { align-items: end; }
.griglia-2--alto { align-items: start; }
.griglia-3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.griglia-4 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }

@media (min-width: 601px) {
  .contenitore { padding-left: 32px; padding-right: 32px; }
  .griglia-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 901px) {
  .griglia-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
  .griglia-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; }
  .griglia-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .griglia-3--due { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 66%; margin-inline: auto; }
  .griglia-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Sezioni ---------- */
.sezione { padding-top: 64px; padding-bottom: 64px; }
.sezione--carta { background: var(--carta); }
.sezione--bianca { background: var(--bianco); }
.sezione--salvia { background: var(--salvia); }
.sezione--ardesia { background: var(--ardesia); color: var(--bianco); }
.sezione--notte { background: var(--inchiostro); color: var(--bianco); }
@media (min-width: 901px) {
  .sezione { padding-top: 96px; padding-bottom: 96px; }
  .sezione--compatta { padding-top: 80px; padding-bottom: 80px; }
  .sezione--media { padding-top: 88px; padding-bottom: 88px; }
  .sezione--ampia { padding-top: 100px; padding-bottom: 100px; }
}

/* ---------- Tipografia ---------- */
.occhiello {
  font-size: 14px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: var(--oro-testo);
}
.occhiello--chiaro { color: var(--oro-luce); }
.occhiello--grande { font-size: 28px; color: var(--oro-luce); line-height: 1.2; }
@media (min-width: 901px) { .occhiello--grande { font-size: 40px; } }

.titolo-hero {
  font-family: var(--font-titoli); font-weight: 600; font-size: 38px; line-height: 1.02;
  color: var(--inchiostro);
}
.titolo-hero em, .titolo-sezione em { color: var(--oro-testo); font-style: italic; }
.titolo-sezione {
  font-family: var(--font-titoli); font-weight: 600; font-size: 36px; line-height: 1.08;
}
.titolo-sezione--grande { font-size: 36px; line-height: 1.06; }
.titolo-sezione--centrato { text-align: center; }
.titolo-blocco { font-family: var(--font-titoli); font-weight: 600; font-size: 28px; line-height: 1.15; }
.titolo-scheda { font-size: 19px; font-weight: 600; line-height: 1.4; }
.evidenza-oro { color: var(--oro-testo); }
.sezione--ardesia .evidenza-oro, .sezione--notte .evidenza-oro { color: var(--oro-luce); }
@media (min-width: 601px) { .titolo-hero { font-size: 44px; } }
@media (min-width: 901px) {
  .titolo-hero { font-size: 64px; }
  .titolo-sezione { font-size: 48px; }
  .titolo-sezione--grande { font-size: 54px; }
  .titolo-blocco { font-size: 34px; }
}

.paragrafo-guida { font-size: 20px; line-height: 1.55; color: var(--testo); max-width: 540px; }
.paragrafo-guida b { color: var(--inchiostro); }
.testo-tenue { color: var(--testo); }
.testo-su-scuro { color: var(--su-scuro); font-size: 19px; }
.testo-su-scuro--medio { color: var(--su-scuro-medio); }
.testo-largo { max-width: 680px; }
.testo-piccolo { font-size: 15px; }
.nota-sotto { font-size: 15px; color: var(--su-scuro-tenue); }

/* Prosa: paragrafi, elenchi e titoletti dentro testi lunghi */
.prosa { display: flex; flex-direction: column; gap: 16px; color: var(--testo); }
.prosa h2 { font-family: var(--font-titoli); font-weight: 600; font-size: 30px; line-height: 1.12; color: var(--inchiostro); margin-top: 12px; }
.prosa h3 { font-size: 20px; font-weight: 600; line-height: 1.35; color: var(--inchiostro); margin-top: 8px; }
.prosa ul, .prosa ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.prosa strong { color: var(--inchiostro); }
.prosa a { text-underline-offset: 3px; }
@media (min-width: 901px) { .prosa h2 { font-size: 36px; } }

/* ---------- Bottoni ---------- */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 24px; border-radius: 4px; border: 0;
  font-family: var(--font-testo); font-weight: 700; font-size: 18px; line-height: 1.3;
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.bottone:hover { transform: translateY(-2px); box-shadow: var(--ombra-bottone); }
.bottone svg { flex: none; width: 20px; height: 20px; }
.bottone--oro { background: var(--oro); color: var(--inchiostro); }
.bottone--oro:hover { background: var(--oro-chiaro); color: var(--inchiostro); }
.bottone--ardesia { background: var(--ardesia); color: var(--bianco); font-weight: 600; }
.bottone--ardesia:hover { background: var(--ardesia-scura); color: var(--bianco); }
.bottone--contorno { background: transparent; color: var(--ardesia); box-shadow: inset 0 0 0 2px var(--ardesia); font-weight: 600; }
.bottone--contorno:hover { color: var(--ardesia); background: var(--bianco); }
.bottone--chiaro { background: transparent; color: var(--bianco); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); font-weight: 600; }
.bottone--chiaro:hover { color: var(--oro-luce); box-shadow: inset 0 0 0 2px var(--oro-luce), var(--ombra-bottone); }
.bottone--grande { padding: 18px 28px; font-size: 19px; }
.bottone--grande svg { width: 22px; height: 22px; }
.bottone--hero { padding: 20px 30px; font-size: 21px; }
.bottone--hero svg { width: 24px; height: 24px; }
.bottone--enorme { padding: 22px 34px; font-size: 23px; margin-top: 10px; }
.bottone--enorme svg { width: 26px; height: 26px; }
.bottoni { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
@media (max-width: 420px) {
  .bottone--hero, .bottone--enorme { padding: 18px 22px; font-size: 19px; }
}

@keyframes pulsa {
  0% { box-shadow: 0 0 0 0 rgba(187, 159, 41, .55); }
  70% { box-shadow: 0 0 0 14px rgba(187, 159, 41, 0); }
  100% { box-shadow: 0 0 0 0 rgba(187, 159, 41, 0); }
}
.bottone--pulsa { animation: pulsa 2.2s infinite; }
@media (prefers-reduced-motion: reduce) {
  .bottone--pulsa { animation: none; }
  .bottone, .faq__piu { transition: none; }
  .bottone:hover { transform: none; }
}

/* Link con freccia (card, "scopri di più") */
.link-freccia { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--oro-testo); text-decoration: underline; text-underline-offset: 4px; }
.link-freccia svg { width: 18px; height: 18px; flex: none; }

/* ---------- Barra urgenza (sopra l'header) ---------- */
.barra-urgenza { background: var(--inchiostro); color: var(--carta); font-size: 15px; }
.barra-urgenza__interno {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 20px; padding-top: 10px; padding-bottom: 10px; text-align: center;
}
.barra-urgenza strong { color: var(--oro-luce); font-weight: 600; }
.barra-urgenza a { color: var(--bianco); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.barra-urgenza a:hover { color: var(--oro-luce); }

/* ---------- Header e navigazione ---------- */
.testata-sito { background: var(--bianco); border-bottom: 1px solid var(--bordo); position: sticky; top: 0; z-index: 20; }
.testata-sito__interno { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; padding-bottom: 12px; position: relative; }
.logo { display: flex; align-items: center; text-decoration: none; flex: none; }
.logo img { width: 120px; height: 51px; object-fit: contain; }
.testata-sito__azioni { display: flex; align-items: center; gap: 8px; }
.testata-sito__chiama { padding: 12px 14px; font-size: 17px; letter-spacing: .3px; }
.testata-sito__chiama .numero-esteso { display: none; }

.menu-bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 48px; height: 48px; padding: 0 10px; border-radius: 4px;
  background: transparent; border: 1px solid var(--bordo); color: var(--inchiostro);
  font: 600 15px/1 var(--font-testo); cursor: pointer;
}
.menu-bottone svg { width: 24px; height: 24px; }
.menu-bottone .icona-chiudi { display: none; }
.menu-bottone[aria-expanded="true"] .icona-apri { display: none; }
.menu-bottone[aria-expanded="true"] .icona-chiudi { display: block; }

/* Menu: pannello a tendina sotto i 1100 px */
.menu {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--bianco); border-bottom: 1px solid var(--bordo);
  box-shadow: 0 18px 30px rgba(31, 42, 41, .14);
  max-height: calc(100vh - 80px); overflow-y: auto;
  padding: 8px 16px 20px;
}
.menu-aperto .menu { display: block; }
.menu__lista, .menu__sotto { list-style: none; margin: 0; padding: 0; }
.menu__voce { border-bottom: 1px solid var(--bordo); }
.menu__link {
  display: flex; align-items: center; min-height: 52px;
  color: var(--inchiostro); font-weight: 600; font-size: 18px; text-decoration: none;
}
.menu__link:hover, .menu__link[aria-current="page"] { color: var(--oro-testo); }
.menu__riga { display: flex; align-items: center; justify-content: space-between; }
.menu__apri { display: none; }
.menu__sotto { padding: 0 0 12px 14px; border-left: 3px solid var(--oro); margin-bottom: 12px; }
.menu__sotto a {
  display: flex; align-items: center; min-height: 44px;
  color: var(--testo); font-weight: 500; text-decoration: none;
}
.menu__sotto a:hover, .menu__sotto a[aria-current="page"] { color: var(--oro-testo); }
.menu__sotto .menu__tutti { font-weight: 600; color: var(--oro-testo); text-decoration: underline; text-underline-offset: 4px; }
.menu__extra { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; }
.menu__extra .bottone { width: 100%; }
.menu__nota { font-size: 14px; color: var(--testo-tenue); text-align: center; }

@media (min-width: 420px) {
  .testata-sito__chiama .numero-esteso { display: inline; }
  .testata-sito__chiama .numero-breve { display: none; }
}
@media (min-width: 601px) {
  .logo img { width: 160px; height: 68px; }
  .testata-sito__interno { gap: 16px; padding-top: 14px; padding-bottom: 14px; }
  .testata-sito__chiama { padding: 13px 22px; }
  .menu { padding-left: 32px; padding-right: 32px; }
}

/* Menu esteso in linea (desktop) */
@media (min-width: 1100px) {
  .menu-bottone { display: none; }
  .menu {
    display: block; position: static; background: none; border: 0; box-shadow: none;
    max-height: none; overflow: visible; padding: 0; margin-left: auto;
  }
  .menu__lista { display: flex; align-items: center; gap: 2px; }
  .menu__voce { border: 0; position: relative; }
  .menu__voce--mobile, .menu__extra { display: none; }
  .menu__link { min-height: 44px; padding: 0 10px; font-size: 16px; border-radius: 4px; }
  .menu__link[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--oro); text-decoration-thickness: 2px; text-underline-offset: 8px; color: var(--inchiostro); }
  .menu__apri {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 44px; margin-left: -6px; padding: 0;
    background: none; border: 0; color: var(--inchiostro); cursor: pointer; border-radius: 4px;
  }
  .menu__apri svg { width: 16px; height: 16px; transition: transform .2s ease; }
  .menu__voce--sotto.aperto .menu__apri svg { transform: rotate(180deg); }
  .menu__sotto {
    display: none;
    position: absolute; top: 100%; left: 0; z-index: 30;
    min-width: 290px; margin: 0; padding: 10px;
    background: var(--bianco); border: 1px solid var(--bordo); border-top: 3px solid var(--oro);
    border-radius: 0 0 var(--raggio) var(--raggio);
    box-shadow: 0 18px 36px rgba(31, 42, 41, .16);
  }
  .menu__voce--sotto:hover .menu__sotto,
  .menu__voce--sotto:focus-within .menu__sotto,
  .menu__voce--sotto.aperto .menu__sotto { display: block; }
  .menu__sotto a { min-height: 40px; padding: 0 10px; border-radius: 4px; font-size: 16px; }
  .menu__sotto a:hover { background: var(--carta); }
  .menu__sotto .menu__tutti { margin-top: 4px; border-top: 1px solid var(--bordo); border-radius: 0; padding-top: 6px; }
  .testata-sito__azioni { margin-left: 8px; }
}
@media (min-width: 1280px) {
  .menu__link { padding: 0 12px; }
}

/* ---------- Hero della home ---------- */
.hero { padding-top: 48px; padding-bottom: 64px; background: var(--carta); }
.hero__testo { display: flex; flex-direction: column; gap: 22px; }
.hero__bottoni { margin-top: 6px; }
.hero__foto { position: relative; margin-bottom: 28px; }
.hero__foto img {
  width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: var(--raggio);
  box-shadow: 0 30px 60px rgba(31, 42, 41, .18);
}
.hero__badge {
  position: absolute; left: 12px; bottom: -28px;
  background: var(--ardesia); color: var(--bianco);
  padding: 16px 18px; border-radius: var(--raggio);
  box-shadow: 0 16px 36px rgba(31, 42, 41, .3);
  display: flex; align-items: center; gap: 14px; max-width: 290px;
}
.hero__badge-cifra { font-family: var(--font-titoli); font-size: 44px; font-weight: 700; line-height: 1; color: var(--oro-luce); }
.hero__badge-testo { font-size: 14px; line-height: 1.35; }
@media (min-width: 901px) {
  .hero { padding-top: 72px; padding-bottom: 88px; }
  .hero__foto { margin-bottom: 0; }
  .hero__badge { left: -18px; padding: 18px 22px; }
  .hero__badge-cifra { font-size: 52px; }
}

/* Riga con spunta ("Sopralluogo e preventivo...") */
.riga-spunta { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--testo-tenue); }
.riga-spunta svg { flex: none; width: 18px; height: 18px; color: var(--oro-testo); }
.riga-spunta strong { color: var(--inchiostro); }

/* Pillole (badge arrotondati) */
.pillole { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; padding: 0; list-style: none; }
.pillola {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  background: var(--bianco); border: 1px solid var(--bordo); border-radius: 40px;
  font-size: 14px; font-weight: 500;
}
.pillola svg { flex: none; width: 16px; height: 16px; color: var(--oro-testo); }

/* ---------- Riquadro conto alla rovescia ---------- */
.conto {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px;
  background: var(--carta); border-radius: var(--raggio); margin-top: 4px;
}
.conto__numero { font-family: var(--font-titoli); font-size: 44px; font-weight: 700; line-height: 1; color: var(--ardesia); flex: none; }
.conto__testo { font-size: 15px; line-height: 1.4; color: var(--testo); }
.conto__testo strong { color: var(--inchiostro); }
.sezione--carta .conto { background: var(--bianco); }

/* ---------- Riquadro esempio (detrazione) ---------- */
.esempio {
  background: var(--ardesia); color: var(--bianco); border-radius: 8px;
  padding: 28px 22px; display: flex; flex-direction: column; gap: 22px;
}
.etichetta {
  align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--inchiostro); background: var(--oro-luce); padding: 5px 10px; border-radius: 3px;
}
.esempio__voce { display: flex; flex-direction: column; gap: 6px; }
.esempio__label { font-size: 16px; color: var(--su-scuro-tenue); }
.esempio__importo { font-family: var(--font-titoli); font-size: 44px; font-weight: 600; line-height: 1; }
.esempio__importo--grande { font-size: 52px; font-weight: 700; color: var(--oro-luce); }
.esempio__divisore { height: 1px; background: rgba(199, 212, 211, .3); }
.esempio__confronto {
  display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px;
  background: rgba(255, 255, 255, .07); border-radius: 4px; font-size: 15px;
}
.esempio__confronto span { color: var(--su-scuro-tenue); }
.esempio__nota { font-size: 13px; color: var(--su-scuro-tenue); line-height: 1.45; }
@media (min-width: 901px) {
  .esempio { padding: 40px; }
  .esempio__importo--grande { font-size: 64px; }
}

/* ---------- Passi numerati (01-04) ---------- */
.passo {
  background: var(--bianco); border-radius: var(--raggio); padding: 28px 24px;
  display: flex; flex-direction: column; gap: 10px; border-top: 3px solid var(--oro);
}
.passo__numero { font-family: var(--font-titoli); font-size: 40px; font-weight: 700; color: var(--oro); line-height: 1; }
.passo__titolo { font-size: 19px; font-weight: 600; line-height: 1.4; }
.passo__testo { font-size: 16px; color: var(--testo-tenue); }
.passo--scuro { background: var(--ardesia); color: var(--bianco); }
.passo--scuro .passo__numero { color: var(--oro-luce); }
.passo--scuro .passo__testo { color: var(--su-scuro); }
.sezione--bianca .passo:not(.passo--scuro) { background: var(--carta); }
.passi { list-style: none; margin: 0; padding: 0; }

/* ---------- Blocco testo + immagine ---------- */
.testo-immagine {
  display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--bianco); border-radius: 8px; overflow: hidden;
}
.testo-immagine__media img, .testo-immagine__media picture { width: 100%; height: 100%; }
.testo-immagine__media img { min-height: 260px; object-fit: cover; }
.testo-immagine__testo { padding: 28px 22px; display: flex; flex-direction: column; gap: 16px; }
.testo-immagine__testo p { color: var(--testo); }
.sezione--bianca .testo-immagine { background: var(--carta); }
@media (min-width: 901px) {
  .testo-immagine { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .testo-immagine__media img { min-height: 320px; }
  .testo-immagine__testo { padding: 44px; justify-content: center; }
  .testo-immagine--invertito .testo-immagine__media { order: 2; }
}
/* Variante "aperta": testo e immagine senza riquadro bianco */
.testo-immagine--aperto { background: none; border-radius: 0; overflow: visible; gap: 36px; }
.sezione--bianca .testo-immagine--aperto { background: none; }
.testo-immagine--aperto .testo-immagine__testo { padding: 0; }
.testo-immagine--aperto .testo-immagine__media img { border-radius: var(--raggio); }
@media (min-width: 901px) { .testo-immagine--aperto { gap: 56px; align-items: center; } }

/* Inquadratura delle foto ritagliate da object-fit: cover */
.foto-pos-50-70 { object-position: 50% 70%; }
.foto-pos-65-50 { object-position: 65% 50%; }
.foto-pos-sinistra { object-position: 0 50%; }

/* ---------- Card prodotto ---------- */
.card-prodotto {
  display: flex; flex-direction: column; gap: 16px;
  color: var(--inchiostro); text-decoration: none;
}
.card-prodotto:hover { color: var(--inchiostro); }
.card-prodotto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--raggio); transition: transform .25s ease, box-shadow .25s ease; }
a.card-prodotto:hover img { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(31, 42, 41, .16); }
.card-prodotto__titolo { font-family: var(--font-titoli); font-size: 28px; font-weight: 600; line-height: 1.1; }
.card-prodotto__testo { color: var(--testo-tenue); font-size: 16px; }
.card-prodotto .link-freccia { margin-top: auto; }
a.card-prodotto:hover .link-freccia { color: var(--ardesia); }
/* card con disegno tecnico al posto della foto */
.card-prodotto--disegno img { aspect-ratio: 4 / 3; object-fit: contain; padding: 18px; }
/* Foto prodotto nelle card: intera e mai ingrandita (molte sono piccole), sul riquadro 4:3 dei disegni.
   Il riquadro resta trasparente: i margini prendono il colore della sezione. */
.card-prodotto--foto img { aspect-ratio: 4 / 3; object-fit: contain; }
/* senza riquadro visibile l'ombra al passaggio del mouse resterebbe staccata dalla foto */
a.card-prodotto--foto:hover img, a.card-prodotto--disegno:hover img { box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .card-prodotto img { transition: none; } a.card-prodotto:hover img { transform: none; } }

/* ---------- Foto prodotto (immagini illustrative dei fornitori, mai ingrandite oltre la loro larghezza) ---------- */
.foto-prodotto { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; }
.foto-prodotto img { width: auto; max-height: 520px; border-radius: var(--raggio); }
.foto-prodotto figcaption { font-size: 14px; line-height: 1.4; color: var(--testo-tenue); text-align: center; }
.foto-prodotti { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 28px; }
.foto-prodotti img { width: auto; max-height: 420px; }

/* ---------- Elenco di caratteristiche con spunta ---------- */
.elenco-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.elenco-check li { position: relative; padding-left: 36px; color: var(--testo); }
.elenco-check li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 24px; height: 24px;
  border-radius: 50%; background: var(--salvia);
}
.elenco-check li::after {
  content: ""; position: absolute; left: 8px; top: 7px; width: 7px; height: 12px;
  border: solid var(--oro-testo); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.elenco-check strong { color: var(--inchiostro); }
.elenco-check--colonne { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 32px; }
@media (min-width: 901px) { .elenco-check--colonne { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sezione--salvia .elenco-check li::before { background: var(--bianco); }

/* ---------- Punti di forza con icona ("perché noi") ---------- */
.punto { display: flex; flex-direction: column; gap: 10px; }
.punto svg { width: 34px; height: 34px; color: var(--ardesia); }
.punto__titolo { font-size: 19px; font-weight: 600; line-height: 1.4; }
.punto__testo { font-size: 16px; color: var(--testo); }
.cifra-grande { font-family: var(--font-titoli); font-size: 56px; font-weight: 700; line-height: 1; color: var(--ardesia); }
@media (min-width: 901px) { .cifra-grande { font-size: 72px; } }

/* ---------- Banda scura (finanziamento) ---------- */
.banda__titolo { color: var(--bianco); }

/* ---------- FAQ ---------- */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--bordo); }
.faq__voce { border-bottom: 1px solid var(--bordo); padding: 22px 4px; }
.faq__domanda {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-size: 18px; font-weight: 600; line-height: 1.4; cursor: pointer; list-style: none;
}
.faq__domanda::-webkit-details-marker { display: none; }
.faq__piu { font-size: 28px; font-weight: 300; color: var(--oro-testo); transition: transform .2s ease; line-height: 1; flex: none; }
.faq__voce[open] .faq__piu { transform: rotate(45deg); }
.faq__risposta { margin: 12px 0 0; color: var(--testo); }
.faq__risposta p + p { margin-top: 10px; }
@media (min-width: 601px) { .faq__domanda { font-size: 20px; } }

/* ---------- CTA finale ---------- */
.cta-finale { text-align: center; align-items: center; display: flex; flex-direction: column; gap: 22px; }
.cta-finale .titolo-sezione { color: var(--bianco); }
.avviso-riquadro {
  margin-top: 26px; padding: 18px 22px; border: 1px solid rgba(199, 212, 211, .35); border-radius: var(--raggio);
  display: flex; align-items: center; gap: 14px; text-align: left; max-width: 620px;
  font-size: 15px; color: var(--su-scuro-medio);
}
.avviso-riquadro svg { flex: none; width: 28px; height: 28px; color: var(--oro-luce); }
.avviso-riquadro strong { color: var(--bianco); }
.cta-finale__contatti { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 16px; }
.cta-finale__contatti a { color: var(--bianco); text-underline-offset: 3px; }
.cta-finale__contatti a:hover { color: var(--oro-luce); }

/* ---------- Pagine interne: briciole e testata ---------- */
.briciole { font-size: 14px; color: var(--testo-tenue); }
.briciole ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.briciole li { display: inline-flex; align-items: center; }
.briciole li + li::before { content: "/"; margin: 0 10px; color: var(--oro); }
.briciole a { color: var(--testo-tenue); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--bordo); }
.briciole a:hover { color: var(--oro-testo); text-decoration-color: currentColor; }
.briciole [aria-current="page"] { color: var(--inchiostro); font-weight: 600; }

.testata-pagina { background: var(--carta); padding-top: 24px; padding-bottom: 48px; border-bottom: 1px solid var(--bordo); }
.testata-pagina__griglia { margin-top: 28px; }
.testata-pagina__testo { display: flex; flex-direction: column; gap: 18px; }
.testata-pagina .titolo-hero { font-size: 36px; line-height: 1.06; }
.testata-pagina__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--raggio); box-shadow: 0 24px 48px rgba(31, 42, 41, .16); }
.testata-pagina__media--disegno img { object-fit: contain; border: 1px solid var(--bordo); padding: 24px; box-shadow: none; }
.testata-pagina__media--foto img { width: auto; max-width: 100%; max-height: 460px; aspect-ratio: auto; margin-inline: auto; display: block; }
/* Prodotto scontornato (trasparenza vera): prende il fondo della testata, quindi niente ombra né angoli */
.testata-pagina__media--prodotto img { width: auto; max-width: 100%; max-height: 460px; aspect-ratio: auto; margin-inline: auto; display: block; box-shadow: none; border-radius: 0; }
@media (min-width: 601px) { .testata-pagina .titolo-hero { font-size: 42px; } }
@media (min-width: 901px) {
  .testata-pagina { padding-top: 28px; padding-bottom: 72px; }
  .testata-pagina__griglia { margin-top: 40px; }
  .testata-pagina .titolo-hero { font-size: 52px; }
}
/* testata senza immagine */
.testata-pagina--solo-testo .testata-pagina__testo { max-width: 780px; }

/* ---------- Tabella ---------- */
.tabella-scorri { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--bianco); }
.tabella { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 520px; }
.tabella caption { text-align: left; padding: 14px 16px; font-weight: 600; color: var(--inchiostro); caption-side: top; }
.tabella th, .tabella td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--bordo); }
.tabella thead th { background: var(--ardesia); color: var(--bianco); font-weight: 600; font-size: 15px; }
.tabella tbody th { font-weight: 600; color: var(--inchiostro); }
.tabella tbody td { color: var(--testo); }
.tabella tbody tr:nth-child(even) { background: var(--carta); }
.tabella tbody tr:last-child th, .tabella tbody tr:last-child td { border-bottom: 0; }
.nota-tabella { font-size: 14px; color: var(--testo-nota); margin-top: 10px; }

/* ---------- Nota / riquadro informativo ---------- */
.riquadro-nota {
  padding: 18px 20px; background: var(--bianco); border-left: 4px solid var(--oro);
  border-radius: 0 var(--raggio) var(--raggio) 0; color: var(--testo); font-size: 16px;
}
.sezione--bianca .riquadro-nota { background: var(--carta); }
.riquadro-nota strong { color: var(--inchiostro); }
.data-aggiornamento { font-size: 14px; color: var(--testo-nota); }

/* ---------- Footer ---------- */
.piede { background: var(--bianco); padding-top: 48px; padding-bottom: 100px; font-size: 15px; color: var(--testo); }
.piede__griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.piede__azienda { display: flex; flex-direction: column; gap: 6px; }
.piede__azienda img { width: 160px; height: 68px; object-fit: contain; margin-bottom: 6px; }
.piede__azienda strong { color: var(--inchiostro); }
.piede__titolo { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--oro-testo); margin-bottom: 10px; }
.piede__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.piede__lista a { color: var(--testo); text-decoration: none; display: inline-flex; min-height: 32px; align-items: center; }
.piede__lista a:hover { color: var(--oro-testo); text-decoration: underline; text-underline-offset: 3px; }
.piede__contatti { display: flex; flex-direction: column; gap: 6px; }
.piede__telefono { font-weight: 600; font-size: 20px; color: var(--inchiostro); text-decoration: none; }
.piede__telefono:hover { color: var(--oro-testo); }
.piede__legale {
  margin-top: 32px; border-top: 1px solid var(--bordo); padding-top: 22px;
  display: flex; flex-direction: column; gap: 12px; font-size: 13px; line-height: 1.55; color: var(--testo-nota);
}
.piede__legale a { color: var(--testo-nota); }
.piede__legale a:hover { color: var(--oro-testo); }
@media (min-width: 601px) { .piede__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .piede__griglia { grid-template-columns: 1.2fr 1fr 0.8fr 1fr; gap: 32px; } }

/* ---------- Barra chiamata fissa (solo telefono) ---------- */
.barra-chiama {
  display: flex; position: sticky; bottom: 0; z-index: 30;
  align-items: center; justify-content: center; gap: 10px;
  padding: 18px 16px; font-weight: 700; font-size: 19px; text-decoration: none;
  background: var(--oro); color: var(--inchiostro);
  box-shadow: 0 -6px 20px rgba(31, 42, 41, .2);
}
.barra-chiama:hover { background: var(--oro-chiaro); color: var(--inchiostro); }
.barra-chiama svg { width: 22px; height: 22px; flex: none; }
@media (min-width: 601px) { .barra-chiama { display: none; } }

/* ---------- Pagina 404 ---------- */
.pagina-errore { text-align: center; align-items: center; }
.pagina-errore__codice { font-family: var(--font-titoli); font-size: 96px; font-weight: 700; line-height: 1; color: var(--oro); }
.pagina-errore .bottoni { justify-content: center; }

/* ---------- Utilità ---------- */
.allinea-centro { text-align: center; }
.margine-su { margin-top: 8px; }
.su-scuro { color: var(--bianco); }

/* ===== Pagine istituzionali ===== */
/* ---------- Pagine istituzionali (contatti): blocco NAP in <address> ---------- */
.istituzionali-nap { font-style: normal; line-height: 1.7; align-self: start; }
.istituzionali-nap a { text-underline-offset: 3px; }

/* ---------- Aggiunte SEO della home (occhiello nell'H1, link ai prodotti, comuni) ---------- */
.titolo-hero__occhiello { display: block; margin-bottom: 22px; font-family: var(--font-testo); font-style: normal; line-height: 1.5; }
.link-prodotti { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; font-size: 16px; }
.link-prodotti__titolo { font-weight: 600; color: var(--inchiostro); }
.link-prodotti__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.link-prodotti__lista a { text-underline-offset: 3px; }
.link-prodotti__tutti { font-weight: 600; }
.punto__testo--nota { font-size: 15px; color: var(--testo-tenue); }
.avviso-riquadro a { color: var(--oro-luce); text-underline-offset: 3px; }
.avviso-riquadro a:hover { color: var(--bianco); }

/* Riquadro avviso su fondo chiaro (nato per la CTA scura) */
.sezione:not(.su-scuro) .avviso-riquadro { border-color: var(--oro); background: var(--bianco); color: var(--testo); }
.sezione:not(.su-scuro) .avviso-riquadro svg { color: var(--oro); }
.sezione:not(.su-scuro) .avviso-riquadro strong { color: var(--inchiostro); }

/* Foto prodotto su fondo bianco e disegni tecnici (fondo bianco nel file SVG):
   col "multiply" il bianco prende il colore della striscia su cui stanno, bianca o crema */
img.foto-scontornata,
a.card-prodotto:hover img.foto-scontornata { mix-blend-mode: multiply; background: transparent; box-shadow: none; border-radius: 0; }
.card-prodotto--disegno img,
.testata-pagina__media--disegno img { mix-blend-mode: multiply; }