/* Nuovo sito generato da Studio Esagono Insights. Colori e carattere dalla mappa (sito.colore, sito.colore_scuro,
   sito.carattere); ritocchi del singolo sito in tema/style.css. */
:root {
  --colore: #1982BB;
  --scuro: #152E49;
  --testo: #1b2333;
  --tenue: #566074;
  --linea: #e1e6ee;
  --sfondo-tenue: #f3f6fb;
  --tinta: color-mix(in srgb, var(--colore) 10%, white);
  --larghezza: 75rem;
  --misura: 46rem;
  --raggio: .75rem;
  --carattere: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; color: var(--testo); background: #fff; font: 400 1.0625rem/1.7 var(--carattere); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--colore); text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--colore); outline-offset: 3px; }
.contenitore { max-width: var(--larghezza); margin: 0 auto; padding: 0 1.5rem; }
.salta { position: absolute; left: -9999px; }
.salta:focus { left: 1rem; top: 1rem; background: #fff; padding: .5rem 1rem; z-index: 10; }
h1, h2, h3 { line-height: 1.2; color: var(--scuro); font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); margin: 0 0 1.1rem; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0 0 .8rem; }
h3 { font-size: 1.2rem; margin: 0 0 .4rem; }
.icona { width: 1.5rem; height: 1.5rem; flex: none; }
.icona-piccola { width: 1rem; height: 1rem; vertical-align: -.15em; margin-left: .2rem; }

/* Pulsanti */
.pulsante, .modulo button {
  display: inline-flex; align-items: center; gap: .35rem; background: var(--colore); color: #fff; border: 1.5px solid var(--colore);
  border-radius: 999px; padding: .75rem 1.5rem; font: inherit; font-size: .95rem; font-weight: 500; text-decoration: none; cursor: pointer;
  transition: background .15s, color .15s;
}
.pulsante:hover, .modulo button:hover { background: var(--scuro); border-color: var(--scuro); }
.pulsante-chiaro { background: #fff; color: var(--scuro); border-color: var(--scuro); }
.pulsante-chiaro:hover { background: var(--scuro); color: #fff; }
.pulsante-bordo { background: transparent; border-color: #fff; color: #fff; }
.pulsante-bordo:hover { background: #fff; color: var(--scuro); border-color: #fff; }
.pulsante-piccolo { padding: .55rem 1.2rem; font-size: .9rem; }
.pulsanti { display: flex; flex-wrap: wrap; gap: .9rem; margin: 1.8rem 0; }
.leggi { display: inline-flex; align-items: center; gap: .2rem; font-weight: 500; font-size: .95rem; text-decoration: none; }
.leggi:hover { text-decoration: underline; }

/* Barra dei contatti sopra la testata (sito.barra_contatti); da telefono c'è già il menu, come sui siti che la usano */
.barra { background: #fff; color: var(--tenue); font-size: .8rem; border-bottom: 1px solid var(--linea); }
.barra-riga { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem 1.5rem; min-height: 2.5rem; }
.barra p { margin: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.8rem; }
.barra .icona-piccola { color: var(--colore); margin: 0 .2rem 0 0; }
.barra a { color: var(--testo); text-decoration: none; }
.barra a:hover { color: var(--colore); }
.barra .social { gap: .4rem; }
.barra .social svg { width: 1rem; height: 1rem; }
.barra-destra { display: flex; align-items: center; gap: 1rem; }
.barra .lingue a { min-height: 2rem; }
@media (max-width: 60rem) { .barra { display: none; } }
@media (min-width: 60.01rem) { .con-barra .testata .lingue { display: none; } }  /* la lingua sta nella barra */

/* Testata */
.testata { background: #fff; border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 5; }
.testata-riga { display: flex; align-items: center; gap: 1rem 2.5rem; min-height: 4.75rem; flex-wrap: wrap; padding-top: .6rem; padding-bottom: .6rem; }
/* selettore della lingua (siti in più lingue, M19) */
.lingue { display: flex; gap: .15rem; list-style: none; margin: 0; padding: 0; font-size: .85rem; font-weight: 500; }
.lingue a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; min-height: 2.25rem;
  border-radius: .35rem; color: var(--tenue); text-decoration: none; }
.lingue a:hover { color: var(--testo); background: var(--sfondo-tenue); }
.lingue a[aria-current="true"] { color: var(--testo); background: var(--sfondo-tenue); }
.marchio { display: inline-flex; align-items: center; gap: .7rem; color: var(--scuro); text-decoration: none; }
.marchio-segno { width: 2.6rem; height: 2.6rem; color: var(--colore); }
.marchio-testo { display: grid; line-height: 1.15; }
.marchio-nome { font-size: 1.45rem; font-weight: 500; letter-spacing: -.01em; }
.marchio-slogan { font-size: .78rem; color: var(--tenue); margin-top: .15rem; }
.logo { height: 3rem; max-width: 15rem; width: auto; object-fit: contain; object-position: left center; }
.logo-piede { filter: brightness(0) invert(1); }  /* sul blu scuro del piè di pagina il logo diventa bianco */
.menu { margin-left: auto; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.8rem; }
.menu a { color: var(--testo); text-decoration: none; font-size: .95rem; padding: .35rem 0; border-bottom: 2px solid transparent; }
.menu a:hover { color: var(--colore); }
.menu a[aria-current="page"] { color: var(--colore); border-bottom-color: var(--colore); font-weight: 500; }
/* Da telefono: pulsante «Menu» che apre l'elenco (details/summary, senza JavaScript) */
.menu-mobile { display: none; }
.menu-mobile summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem 1rem; border: 1px solid var(--linea); border-radius: 999px; font-weight: 500; color: var(--scuro); }
.menu-mobile summary::-webkit-details-marker { display: none; }
.menu-mobile[open] summary { border-color: var(--colore); color: var(--colore); }
.menu-mobile ul { list-style: none; margin: 0; padding: .5rem 1.5rem 1.25rem; position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-bottom: 1px solid var(--linea); box-shadow: 0 18px 30px -20px rgba(18, 40, 76, .35); }
.menu-mobile li a { display: block; padding: .8rem 0; border-bottom: 1px solid var(--linea); color: var(--testo);
  text-decoration: none; font-size: 1.05rem; }
.menu-mobile li a[aria-current="page"] { color: var(--colore); font-weight: 500; }
.menu-mobile .menu-invito a { display: inline-flex; margin-top: 1rem; border-bottom: 0; color: #fff; padding: .75rem 1.5rem; }

/* Apertura della home */
.apertura { background: linear-gradient(115deg, #f7f9fd 0%, #eef3fb 55%, var(--tinta) 100%); overflow: hidden; }
.apertura-griglia { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; padding-top: 4.5rem; padding-bottom: 4.5rem; }
.occhiello { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 600; color: var(--colore); margin: 0 0 .9rem; }
.evidenza { color: var(--colore); }
.apertura-sommario { font-size: 1.12rem; color: var(--tenue); max-width: 36rem; }
.punti { list-style: none; padding: 0; margin: 2.2rem 0 0; display: flex; flex-wrap: wrap; gap: 1.2rem 2.2rem; }
.punti li { display: flex; align-items: center; gap: .7rem; font-size: .9rem; color: var(--tenue); max-width: 11rem; line-height: 1.35; }
.punti .icona { color: var(--scuro); }
.apertura-figura img { border-radius: var(--raggio); box-shadow: 0 30px 60px -25px rgba(18, 40, 76, .35); }
.decoro { width: 100%; max-width: 30rem; margin-left: auto; display: block; }
.decoro path { fill: none; stroke: var(--colore); stroke-width: 3; stroke-linejoin: round; }
.decoro .d1 { fill: color-mix(in srgb, var(--colore) 8%, transparent); stroke-width: 5; }
.decoro .d2, .decoro .d5 { opacity: .45; }
.decoro .d3 { opacity: .3; }
.decoro .d4 { fill: var(--colore); opacity: .14; stroke: none; }

/* Fasce */
.fascia { padding: 5rem 0; }
.fascia-tenue { background: var(--sfondo-tenue); }
.fascia-sommario { color: var(--tenue); max-width: 38rem; margin: 0 0 2.5rem; }
.schede { display: grid; gap: 1.5rem; }
.schede-servizi { grid-template-columns: repeat(3, 1fr); gap: 2.5rem 0; }
.schede-servizi .scheda { border: 0; border-left: 1px solid var(--linea); border-radius: 0; padding: .5rem 2rem 1rem; background: none; }
.schede-servizi .scheda:nth-child(3n+1) { border-left: 0; padding-left: 0; }
.scheda { background: #fff; border: 1px solid var(--linea); border-radius: var(--raggio); padding: 1.5rem; }
.scheda p { color: var(--tenue); font-size: .95rem; margin: .4rem 0 1rem; }
.scheda h3 a, .scheda h2 a { color: var(--scuro); text-decoration: none; }
.scheda h3 a:hover, .scheda h2 a:hover { color: var(--colore); }
.scheda-sottotitolo { color: var(--scuro) !important; font-weight: 500; font-size: .92rem !important; margin-top: 0 !important; }
.scheda-immagine { border-radius: .5rem; margin-bottom: 1.2rem; aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.distintivo { display: inline-grid; place-items: center; width: 3.6rem; height: 3.6rem; background: var(--tinta); color: var(--colore);
  border-radius: 50%; margin-bottom: 1.1rem; }
.marchio-esagono .distintivo { border-radius: 0; clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
.distintivo .icona { width: 1.7rem; height: 1.7rem; }

/* Perché sceglierci */
.fascia-scura { background: linear-gradient(120deg, var(--scuro) 0%, color-mix(in srgb, var(--scuro) 80%, var(--colore)) 100%); color: #dfe7f5; }
.fascia-scura h2, .fascia-scura h3 { color: #fff; }
.fascia-scura .occhiello { color: #9cc0ff; }
.perche-griglia { display: grid; grid-template-columns: .9fr 1.4fr; gap: 3rem; align-items: start; }
.motivi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.motivi li { padding: .25rem 1.4rem; border-left: 1px solid rgba(255, 255, 255, .16); }
.motivi p { font-size: .9rem; color: #c8d4ea; margin: .4rem 0 0; }
.motivi-foto { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-top: 1rem; border-radius: .4rem; }
.fascia-scura .distintivo { background: rgba(255, 255, 255, .08); color: #8db5ff; }
/* Ultimi articoli con foto (sezioni.blog) */
.schede-blog { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.scheda-articolo h3 { font-size: 1rem; }

/* Lavori */
.lavori-griglia { display: grid; grid-template-columns: .75fr 2fr; gap: 3rem; align-items: start; }
.schede-lavori { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.scheda-lavoro { padding: 0; border: 0; background: none; }
.scheda-lavoro .scheda-immagine { box-shadow: 0 18px 40px -22px rgba(18, 40, 76, .45); }
.scheda-segnaposto { display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: .5rem; background: var(--sfondo-tenue);
  color: var(--colore); margin-bottom: 1.2rem; }
.scheda-segnaposto .icona { width: 2.5rem; height: 2.5rem; opacity: .6; }
.etichetta { color: var(--colore) !important; font-size: .8rem !important; font-weight: 500; margin: 0 0 .2rem !important; }

/* Invito finale */
.invito { background: linear-gradient(110deg, var(--scuro) 0%, color-mix(in srgb, var(--scuro) 70%, var(--colore)) 100%); color: #dfe7f5; padding: 3.5rem 0; }
.invito h2 { color: #fff; margin-bottom: .4rem; }
.invito .occhiello { color: #9cc0ff; }
.invito p { margin: 0; }
.invito-riga { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.invito-riga > div { max-width: 40rem; }

/* Pagine interne */
.testata-pagina { background: linear-gradient(115deg, #f7f9fd 0%, var(--tinta) 100%); padding: 3rem 0 2.5rem; }
.testata-pagina .sommario { font-size: 1.15rem; color: var(--tenue); max-width: var(--misura); margin: 0; }
/* fascia con la foto della pagina (page.fascia): foto sotto, velo scuro, testo chiaro */
.testata-pagina.con-foto { position: relative; isolation: isolate; color: #fff; }
.testata-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.testata-pagina.con-foto::before { content: ""; position: absolute; inset: 0; background: rgba(10, 20, 40, .5); z-index: -1; }
.testata-pagina.con-foto :is(h1, .testata-etichetta, .sommario, .data-pagina, .percorso ol, .percorso a) { color: #fff; }
.data-pagina { margin: .9rem 0 0; font-size: .9rem; color: var(--tenue); }
/* sito.testata_articoli: la scritta nella fascia degli articoli, il titolo sotto la foto con la data nel riquadro */
.testata-etichetta { margin: 0; font-size: clamp(1.6rem, 3.4vw, 2.5rem); font-weight: 600; line-height: 1.2;
  color: var(--scuro); }
.articolo-titolo { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.2rem; align-items: start;
  max-width: var(--misura); margin: 0 0 1.6rem; }
.articolo-titolo > * { grid-column: 2; }
.articolo-titolo h1 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: .35rem 0 0; }
.articolo-titolo .sommario { margin: .6rem 0 0; color: var(--tenue); }
.data-riquadro { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
.data-riquadro time { display: flex; flex-direction: column; align-items: center; }
.data-giorno { min-width: 3rem; padding: .55rem .4rem; background: var(--colore); color: #fff; font-weight: 700;
  font-size: 1.35rem; line-height: 1; text-align: center; }
.data-mese { margin-top: .45rem; font-size: .72rem; letter-spacing: .35em; text-transform: uppercase; color: var(--testo); }
.percorso ol { list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; font-size: .88rem; color: var(--tenue); }
.percorso li + li::before { content: "›"; margin: 0 .45rem 0 .2rem; }
.percorso a { color: var(--tenue); display: inline-block; padding: .15rem 0; }
.corpo { padding-top: 2.5rem; padding-bottom: 4rem; }
.testo { max-width: var(--misura); }
.testo h2 { margin-top: 2.4rem; }
.testo h3 { margin-top: 1.8rem; }
.testo li { margin-bottom: .35rem; }
.faq { margin-top: 2.8rem; padding: .4rem 1.6rem 1.4rem; background: var(--sfondo-tenue); border-radius: var(--raggio); }
.faq h2 { margin-top: 1.4rem; }
.faq h3 { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--linea); font-size: 1.08rem; }
.faq h2 + h3 { border-top: 0; padding-top: 0; }
blockquote { margin: 1.6rem 0; padding: .3rem 1.4rem; border-left: 4px solid var(--colore); color: var(--tenue); }
figure { margin: 1.8rem 0; }
figure img { border-radius: .5rem; }
/* gallerie: due o più immagini di seguito nel testo (le collezioni di un catalogo); un clic apre la foto grande. Sul
   telefono due per riga: una sotto l'altra, 30 foto di una collezione allungavano la pagina di 8.000 pixel (M19).
   auto-fit: con poche foto le colonne vuote si chiudono e le foto riempiono la riga (COCOA di Higold, 2 foto) */
.galleria { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(calc(50% - .375rem), 14rem), 1fr));
  gap: .75rem; margin: 1.8rem 0; }
.galleria-foto { display: block; overflow: hidden; border-radius: .5rem; aspect-ratio: 4 / 3; background: var(--tinta); }
.galleria-foto img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .galleria-foto img { transition: transform .35s ease; }
  .galleria-foto:hover img, .galleria-foto:focus-visible img { transform: scale(1.04); }
}
.galleria-foto:focus-visible { outline: 3px solid var(--colore); outline-offset: 2px; }
/* video del sito nel testo (file in /media/, si scarica solo con play) */
.video { margin: 1.5rem 0; }
.video video { display: block; width: 100%; height: auto; background: #000; border-radius: .5rem; }
/* griglia di foto con il titolo sotto (progetti, collezioni: tre o più coppie «foto, titolo» nel testo) */
.griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1.6rem 1rem;
  margin: 1.5rem 0 2rem; }
.griglia-voce :is(h2, h3, h4, h5, h6) { font-size: 1rem; margin: .6rem 0 0; line-height: 1.35; }
/* sezione chiusa nel testo (titolo con «{.chiusa}»): si apre con un clic, il testo resta nella pagina per Google */
.sezione-chiusa { margin: 1.5rem 0; border: 1px solid var(--linea); background: var(--tinta); }
.sezione-chiusa > summary { cursor: pointer; list-style: none; padding: .8rem 1rem; font-weight: 600; }
.sezione-chiusa > summary::-webkit-details-marker { display: none; }
.sezione-chiusa > summary::before { content: "+"; display: inline-block; width: 1.2em; }
.sezione-chiusa[open] > summary::before { content: "\2212"; }
.sezione-chiusa > summary:focus-visible { outline: 3px solid var(--colore); outline-offset: 2px; }
.sezione-chiusa > div { padding: 0 1rem 1rem; background: #fff; }
.copertina { max-width: var(--misura); margin: 0 0 2rem; }
.copertina img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--tinta); }
.schede-elenco { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); margin-top: 2.5rem; }
.schede-elenco .con-immagine { padding-top: 1rem; }
.schede-elenco h2 { font-size: 1.2rem; margin: 0 0 .3rem; }
.scheda .data-scheda { font-size: .85rem; margin: 0 0 .5rem; color: var(--tenue); }
.collegati, .servizio-collegato { max-width: var(--misura); margin-top: 2.5rem; }
.torna { margin: 2.5rem 0 0; }
.torna a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; text-decoration: none; }
.torna a:hover { text-decoration: underline; }
/* articolo precedente e successivo dello stesso elenco */
.vicini { display: flex; justify-content: space-between; gap: 1.5rem; margin: 2rem 0 0; padding-top: 1.2rem;
  border-top: 1px solid var(--linea); }
.vicini a { display: block; max-width: 46%; text-decoration: none; font-size: .95rem; line-height: 1.4; }
.vicini a:hover { text-decoration: underline; }
.vicini span { display: block; margin-bottom: .3rem; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tenue); }
.vicino-successivo { margin-left: auto; text-align: right; }
.icona-indietro { transform: rotate(180deg); margin: 0; }
/* schede di un elenco: il link del titolo copre tutta la scheda */
.scheda-cliccabile { position: relative; cursor: pointer; }
.scheda-cliccabile .scheda-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.scheda-cliccabile:hover { border-color: color-mix(in srgb, var(--colore) 40%, var(--linea)); }
.scheda-cliccabile:hover h2 a { color: var(--colore); }
.scheda-cliccabile:focus-within { outline: 3px solid var(--colore); outline-offset: 3px; }
.scheda-cliccabile .scheda-link:focus-visible { outline: none; }
.scheda-cliccabile .leggi { color: var(--colore); }
.servizio-collegato { background: var(--sfondo-tenue); border-radius: var(--raggio); padding: 1rem 1.4rem; }

/* Servizi, pagine, articoli e lavori: testo a sinistra, colonna laterale con contatti e servizi. Il testo resta
   leggibile (righe non troppo lunghe) e la pagina usa tutta la larghezza. */
.corpo-con-laterale { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 3.5rem; align-items: start; }
.corpo-con-laterale :is(.testo, .copertina, .collegati, .servizio-collegato) { max-width: 50rem; }
.laterale { display: grid; gap: 1.25rem; }
.laterale-box { border: 1px solid var(--linea); border-radius: var(--raggio); padding: 1.3rem 1.4rem; background: #fff; }
.laterale-contatti { background: var(--sfondo-tenue); border-color: transparent; }
.laterale-contatti .occhiello { margin-bottom: .5rem; }
.laterale-titolo { font-size: 1.15rem; font-weight: 600; color: var(--scuro); margin: 0 0 .5rem; line-height: 1.25; }
.laterale-contatti .pulsante { margin: .5rem 0 .9rem; width: 100%; justify-content: center; padding: .7rem 1rem;
  font-size: .9rem; white-space: nowrap; }
.laterale .dati { margin: 0; gap: .45rem; font-size: .92rem; }
.laterale .dati .icona { width: 1.15rem; height: 1.15rem; }
.laterale-servizi ul { list-style: none; margin: 0; padding: 0; }
.laterale-servizi a { display: flex; align-items: center; gap: .55rem; padding: .42rem 0; border-bottom: 1px solid var(--linea);
  color: var(--testo); text-decoration: none; font-size: .93rem; line-height: 1.3; }
.laterale-servizi li:last-child a { border-bottom: 0; }
.laterale-servizi a:hover, .laterale-servizi a[aria-current="page"] { color: var(--colore); }
.laterale-servizi a[aria-current="page"] { font-weight: 500; }
.laterale-servizi .icona-piccola { margin: 0; color: var(--colore); }
/* ultimi articoli nella colonna laterale (sito.piede_articoli) */
.laterale-articoli ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.laterale-articoli a { display: flex; gap: .7rem; align-items: center; min-height: 24px; color: var(--testo);
  text-decoration: none; font-size: .9rem; line-height: 1.35; }
.laterale-articoli a:hover { color: var(--colore); }
.laterale-foto { width: 3.5rem; height: 3.5rem; flex: none; object-fit: cover; border-radius: .35rem; }
.laterale-articoli time { display: block; margin-top: .2rem; font-size: .78rem; color: var(--tenue); }
/* ferma mentre si legge, se ci sta nello schermo */
@media (min-width: 60rem) and (min-height: 50rem) { .laterale { position: sticky; top: 6.5rem; } }
.corpo-team { padding-bottom: 4rem; }
.corpo-team .team { margin-top: 0; }

/* Pagine elenco (servizi, blog, portfolio): l'introduzione è breve, va su due colonne per usare tutta la larghezza
   senza righe troppo lunghe; da telefono una colonna */
.tipo-elenco .testo { max-width: none; columns: 2 24rem; column-gap: 3.5rem; }
.tipo-elenco .testo > * { break-inside: avoid; }
.tipo-elenco .testo > :first-child { margin-top: 0; }
.tipo-elenco .testo :is(h2, h3) { break-after: avoid; }

/* Portfolio (sezioni.portfolio): schede dei lavori con la schermata del sito e i filtri per servizio */
.portfolio { margin-top: 2.5rem; }
.portfolio-filtri { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2rem; }
.portfolio-filtri input { position: absolute; opacity: 0; pointer-events: none; }
.portfolio-filtri label { cursor: pointer; padding: .45rem 1rem; border: 1px solid var(--linea); border-radius: 999px;
  font-size: .92rem; color: var(--scuro); background: #fff; }
.portfolio-filtri label span { color: var(--tenue); font-size: .85em; margin-left: .2rem; }
.portfolio-filtri input:checked + label { background: var(--colore); border-color: var(--colore); color: #fff; }
.portfolio-filtri input:checked + label span { color: rgba(255, 255, 255, .8); }
.portfolio-filtri input:focus-visible + label { outline: 3px solid var(--colore); outline-offset: 2px; }
.lavori-elenco { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: 2rem 1.5rem; }
.lavoro-link { display: grid; gap: .15rem; text-decoration: none; color: var(--scuro); }
.lavoro-link img, .lavoro-segnaposto { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top;
  border-radius: .5rem; border: 1px solid var(--linea); margin-bottom: .75rem; background: var(--sfondo-tenue);
  box-shadow: 0 16px 34px -24px rgba(18, 40, 76, .5); transition: transform .3s ease, box-shadow .3s ease; }
.lavoro-segnaposto { display: grid; place-items: center; color: var(--colore); }
.lavoro-segnaposto .icona { width: 2.4rem; height: 2.4rem; opacity: .5; }
.lavoro-link:hover img { transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgba(18, 40, 76, .55); }
.lavoro-nome { font-weight: 600; font-size: 1.05rem; line-height: 1.3; }
.lavoro-link:hover .lavoro-nome { color: var(--colore); }
.lavoro-sito { font-size: .88rem; color: var(--tenue); text-decoration: none; }
a.lavoro-sito:hover { color: var(--colore); text-decoration: underline; }
.lavoro p { color: var(--tenue); font-size: .92rem; margin: .4rem 0 0; }
.lavoro-servizi { list-style: none; margin: .55rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.lavoro-servizi li { font-size: .78rem; padding: .15rem .6rem; border-radius: 999px; background: var(--tinta); color: var(--scuro); }
@media (max-width: 40rem) {  /* da telefono due schede per riga: il portfolio non diventa una lista infinita */
  .lavori-elenco { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem .9rem; }
  .lavoro-link img, .lavoro-segnaposto { margin-bottom: .5rem; }
  .lavoro-nome { font-size: .95rem; }
  .lavoro-sito { font-size: .78rem; overflow-wrap: anywhere; }
  .lavoro p { font-size: .82rem; line-height: 1.45; }
  .lavoro-servizi li { font-size: .7rem; padding: .1rem .45rem; }
}

/* Team */
.team { margin-top: 3rem; }
.persone { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 2rem 1.25rem; }
.persone img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; background: var(--tinta); margin-bottom: .9rem; }
.marchio-esagono .persone img { border-radius: 0; clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
.persona-segnaposto { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--tinta);
  color: var(--colore); margin-bottom: .9rem; }
.marchio-esagono .persona-segnaposto { border-radius: 0; clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
.persona-segnaposto .icona { width: 30%; height: 30%; opacity: .7; }
.persona-nome { font-weight: 600; color: var(--scuro); margin: 0; text-align: center; }
.persona-ruolo { color: var(--colore); font-size: .9rem; margin: .15rem 0 0; text-align: center; }
.persona-testo { color: var(--tenue); font-size: .9rem; margin: .5rem 0 0; text-align: center; }

/* Contatti */
.contatti { max-width: var(--misura); margin-top: 1rem; }
.modulo-pagina { max-width: var(--misura); margin: 3rem 0 1rem; }  /* sezioni.modulo, sotto il testo di una pagina */
/* sezioni.landing: nella testata logo e titolo, senza menu; il testo comincia subito sotto */
.landing-titolo { margin: 0; font-size: clamp(1.2rem, 2.4vw, 1.6rem); text-align: right; }
.landing .corpo { padding-top: 2rem; }
.dati { list-style: none; padding: 0; display: grid; gap: .8rem; }
.dati li { display: flex; gap: .8rem; align-items: center; }
.dati .icona { color: var(--colore); }
.dati a { display: inline-block; padding: .2rem 0; }  /* telefono ed email alti almeno 24px da toccare col dito */
.modulo { display: grid; gap: 1rem; margin-top: 2rem; }
.modulo label { display: grid; gap: .35rem; font-weight: 500; font-size: .95rem; }
.modulo input, .modulo textarea { font: inherit; padding: .7rem .85rem; border: 1px solid #c3cbd8; border-radius: .5rem; }
.modulo .consenso { display: block; font-weight: 400; }
.modulo .consenso input { margin-right: .45rem; }
.modulo button { justify-self: start; }
.modulo .trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Contatti a tutta larghezza, senza colonna laterale (Nicola, 21/10/2026): recapiti affiancati, modulo su tre colonne */
.tipo-contatti :is(.testo, .contatti) { max-width: none; }
@media (min-width: 48rem) {
  .tipo-contatti .dati { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
  .tipo-contatti .modulo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tipo-contatti .modulo :is(label:has(textarea), .consenso, .esito) { grid-column: 1 / -1; }
}
.esito { display: none; margin: 1.5rem 0 0; padding: 1rem 1.2rem; border-radius: var(--raggio); font-weight: 500; }
.esito:target { display: block; scroll-margin-top: 7rem; }  /* sotto la testata fissa */
.esito-ok { background: color-mix(in srgb, #1f9d55 12%, white); color: #14532d; }
.esito-errore { background: color-mix(in srgb, #d14343 12%, white); color: #7f1d1d; }

/* Piè di pagina */
.piede { background: var(--scuro); color: #c8d4ea; padding: 3rem 0; font-size: .9rem; }
.piede a { color: #e6edf9; text-decoration: none; }
.piede a:hover { text-decoration: underline; }
.piede-riga { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: flex-start; justify-content: space-between; }
.piede .marchio { color: #fff; }
.piede .marchio-segno { color: #fff; }
.piede .marchio-slogan { color: #a9b8d3; }
.piede-marchio p { margin: .4rem 0; }
.piede-testo { max-width: 26rem; line-height: 1.6; }
/* ultimi articoli nel piè di pagina (sito.piede_articoli) */
.piede-titolo { color: #fff; font-weight: 600; margin: 0 0 .5rem; }
.piede-articoli { max-width: 22rem; }
.piede-articoli ul { list-style: none; margin: 0; padding: 0; }
.piede-articoli a { display: block; padding: .45rem 0; border-bottom: 1px solid rgba(255, 255, 255, .12); line-height: 1.45; }
/* contatti in una colonna loro (sito.piede_contatti) */
.piede-contatti { max-width: 22rem; }
.piede-contatti ul { list-style: none; margin: 0; padding: 0; }
.piede-contatti li { padding: .4rem 0; border-bottom: 1px solid rgba(255, 255, 255, .12); line-height: 1.45; }
.piede-contatti span { color: var(--colore-chiaro, #9cc0ff); font-weight: 600; margin-right: .3rem; }
.piede-contatti a { display: inline-block; padding: .15rem 0; }
.piede-menu ul, .social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; }
.piede-menu a { display: inline-block; padding: .2rem 0; }  /* almeno 24px d'altezza da toccare col dito */
.social { gap: 1rem; }
.social a { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; min-height: 2rem; }
.copyright { width: 100%; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 1.2rem; margin: .5rem 0 0; font-size: .82rem; color: #a9b8d3; }

/* Pulsante di WhatsApp, sempre in basso a destra (sotto il banner dei cookie quando c'è) */
.whatsapp-fisso { position: fixed; z-index: 40; right: 1.1rem; bottom: 1.1rem; width: 3.5rem; height: 3.5rem;
  display: grid; place-items: center; border-radius: 50%; background: #25D366; color: #fff;
  box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .45); transition: transform .2s; }
.whatsapp-fisso:hover, .whatsapp-fisso:focus-visible { transform: scale(1.07); color: #fff; }
.whatsapp-fisso .icona { width: 1.9rem; height: 1.9rem; stroke-width: 1.6; }
@media print { .whatsapp-fisso { display: none; } }

/* Banner dei cookie (consenso.js): «Accetta» e «Rifiuta» con lo stesso peso */
.consenso-cookie { position: fixed; z-index: 50; left: 1rem; right: 1rem; bottom: 1rem; max-width: 34rem; margin-left: auto;
  background: #fff; color: var(--testo); border: 1px solid var(--linea); border-radius: var(--raggio);
  box-shadow: 0 18px 50px -20px rgba(18, 40, 76, .5); padding: 1.2rem 1.4rem 1.1rem; font-size: .92rem; }
.consenso-cookie p { margin: 0 1.6rem .9rem 0; }
.consenso-azioni { display: flex; gap: .7rem; flex-wrap: wrap; }
.consenso-azioni .pulsante { flex: 1 1 8rem; justify-content: center; text-align: center; }
.consenso-chiudi { position: absolute; top: .4rem; right: .5rem; border: 0; background: none; font-size: 1.5rem; line-height: 1;
  padding: .3rem .5rem; color: var(--tenue); cursor: pointer; }

/* Nastro di parole sotto l'apertura (sezioni.nastro) */
.nastro { overflow: hidden; padding: 1.5rem 0 1.3rem; background: #fff; border-bottom: 1px solid var(--linea);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.nastro-riga { display: flex; width: max-content; }
.nastro-riga span { display: inline-flex; align-items: center; gap: 2.6rem; padding-right: 2.6rem; white-space: nowrap;
  font-size: clamp(1.15rem, 2.4vw, 1.75rem); font-weight: 500; color: var(--scuro); letter-spacing: -.01em; }
.nastro-riga span::after { content: ""; width: .5em; height: .56em; background: var(--colore); opacity: .8;
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
.nastro-riga .nastro-evidenza { color: var(--colore); }
.nastro-riga-2 { margin-top: .5rem; }
.nastro-riga-2 span { font-size: clamp(.9rem, 1.4vw, 1.05rem); font-weight: 400; color: var(--tenue); gap: 2rem; padding-right: 2rem; }
.nastro-riga-2 span::after { opacity: .35; }

/* Immagine accanto al testo della home (copertina della home) */
.testo-con-figura { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: 4rem; align-items: start; }
.figura-laterale { margin: 0; position: sticky; top: 7rem; z-index: 0; }
.figura-laterale img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--raggio);
  box-shadow: 0 30px 60px -28px rgba(18, 40, 76, .45); }
.figura-laterale::before { content: ""; position: absolute; z-index: -1; top: -1.6rem; right: -1.6rem; width: 8rem; aspect-ratio: 1;
  background: var(--colore); opacity: .14; clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }

/* Scheda con foto e icona: l'icona si appoggia sull'angolo della foto */
.scheda-immagine + .distintivo { position: relative; margin: -2.6rem 0 .9rem 1rem; }


@media (max-width: 60rem) {
  .corpo-con-laterale { grid-template-columns: 1fr; gap: 2.5rem; }
  .laterale-contatti { display: none; }  /* da telefono l'invito è già in fondo alla pagina */
  .testo-con-figura { grid-template-columns: 1fr; gap: 2.5rem; }
  .figura-laterale { position: relative; top: 0; max-width: 26rem; }
  .figura-laterale::before { top: -.8rem; right: -.8rem; width: 5rem; }  /* resta dentro lo schermo */
  .apertura-griglia, .perche-griglia, .lavori-griglia { grid-template-columns: 1fr; }
  .apertura-griglia { padding-top: 3rem; padding-bottom: 3rem; }
  .decoro { display: none; }  /* da telefono il titolo viene prima della decorazione */
  .schede-servizi { grid-template-columns: 1fr; gap: 0; }
  .schede-servizi .scheda, .schede-servizi .scheda:nth-child(3n+1) { border-left: 0; border-top: 1px solid var(--linea); padding: 1.5rem 0; }
  .schede-servizi .scheda:first-child { border-top: 0; }
  .motivi li { border-left: 0; padding: 1rem 0; }
  .menu { display: none; }
  .menu-mobile { display: block; margin-left: auto; }
  .testata-riga { flex-wrap: nowrap; }
  .testata-invito { display: none; }  /* l'invito è dentro il menu */
}
@media (max-width: 40rem) {
  body { font-size: 1rem; }
  .fascia { padding: 3.5rem 0; }
  .marchio-nome { font-size: 1.25rem; white-space: nowrap; }
  .testata .marchio-slogan { display: none; }  /* testata su una riga: lo slogan resta nel piè di pagina */
  .marchio-segno { width: 2.2rem; height: 2.2rem; }
  .logo { height: 2.5rem; max-width: 11rem; }
}