/* Agenzia Narducci — home (step 5, design v3 del kit)
   Colori misurati sul design con confronta-design.py --colori e sui pezzi HD. */

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2-variations");
}

:root {
  --carta: #FAF9F5;
  --carta-chiara: #FCFAF6;
  --sabbia: #F2EFEA;
  --antracite: #1E2120;
  --inchiostro: #0E151C;
  --testo: #23272B;
  --testo-tenue: #474B52;
  --giallo: #EDB412;
  --giallo-vivo: #F9C908;
  --oro: #86621F;   /* 23/10/2026, collaudo P6: 4,8:1 sul sabbia (era #8F6A24, 4,3:1); nel tema scuro resta #D9AD4F */
  --bianco: #FFFFFF;
  --linea: rgba(30, 33, 32, .14);
  --linea-chiara: rgba(255, 255, 255, .28);
  --ombra-scheda: rgba(14, 21, 28, .08);

  --font-titoli: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-testo: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --gutter: clamp(16px, 4.2vw, 60px);
  --largo: 1320px;
  --raggio: 6px;
  --altezza-testata: 116px;
}

/* ── base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altezza-testata) + 8px);
}
html.menu-aperto { overflow: hidden; }
body {
  margin: 0;
  background: var(--carta);
  color: var(--testo);
  font-family: var(--font-testo);
  font-size: 17px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
a { color: inherit; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-titoli);
  color: var(--inchiostro);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.04;
}
h1 { font-size: clamp(36px, 3.75vw, 54px); }
h2 { font-size: clamp(32px, 3.4vw, 48px); }
h3 { font-size: 22px; letter-spacing: -0.02em; line-height: 1.2; font-weight: 700; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--giallo); outline-offset: 3px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.contenitore {
  width: min(var(--largo), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.salta {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--antracite); color: var(--bianco);
  padding: 10px 16px; border-radius: var(--raggio); text-decoration: none;
}
.salta:focus { top: 12px; }

/* ── elementi comuni ──────────────────────────────────────────────────── */
.occhiello {
  font-family: var(--font-titoli);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--inchiostro);
  margin-bottom: 14px;
}
.hero .occhiello { color: var(--oro); letter-spacing: .12em; }
.occhiello__scuro { color: var(--inchiostro); }
.occhiello--giallo { color: var(--giallo-vivo); }

.trattino { display: block; width: 84px; height: 4px; background: var(--giallo); border-radius: 2px; margin: 26px 0 24px; }

.freccia { width: 18px; height: 18px; flex: none; transition: transform .2s var(--ease-out); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 52px; padding: 0 26px;
  border-radius: 4px; border: 0;
  font-family: var(--font-titoli); font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: background-color .18s ease, transform .14s var(--ease-out), box-shadow .18s ease;
}
.btn--giallo { background: var(--giallo); color: var(--inchiostro); }
.btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .btn--giallo:hover { background: var(--giallo-vivo); box-shadow: 0 8px 22px -12px rgba(143, 106, 36, .7); }
  .btn:hover .freccia, .link-freccia:hover .freccia, .elenco-frecce a:hover .freccia { transform: translateX(4px); }
}

.link-freccia {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-titoli); font-weight: 700; font-size: 16px; color: var(--inchiostro);
  text-decoration: none; padding: 6px 0 5px;
  border-bottom: 2px solid var(--giallo);
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: color .18s ease;
}
.link-freccia--giallo { color: var(--giallo); }
.link-freccia:active { opacity: .7; }

.etichette { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 26px 0 30px; }
.etichette li {
  position: relative;
  font-family: var(--font-titoli); font-weight: 700; font-size: 16px; color: var(--inchiostro);
  padding-bottom: 8px; min-width: 96px;
}
.etichette li::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--giallo);
}
.etichette--quattro li { min-width: 100px; }

.sezione { padding: 40px 0; }
.fondo-sabbia { background: var(--sabbia); }

.intesta { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 30px; }
.intesta__nota {
  flex: none; width: min(410px, 36%);
  border-left: 2px solid var(--giallo);
  padding: 4px 0 4px 32px;
  font-size: 19px; line-height: 1.4; color: var(--testo);
  align-self: center;
}
.intesta--bassa { align-items: center; }
.intesta--bassa .intesta__nota { font-size: 17px; width: min(470px, 40%); }

/* ── testata ──────────────────────────────────────────────────────────── */
.testata {
  position: sticky; top: 0; z-index: 50;
  background: var(--carta);
  padding-top: env(safe-area-inset-top, 0px);
  transition: box-shadow .25s ease, transform .3s var(--ease-out);
}
.testata.nascosta { transform: translateY(-100%); transition: box-shadow .25s ease, transform .22s var(--ease-in-out); }
.testata.scorsa { box-shadow: 0 1px 0 var(--linea), 0 10px 30px -24px rgba(14, 21, 28, .5); }
.testata__riga {
  display: flex; align-items: center; gap: 32px;
  min-height: var(--altezza-testata);
}
.testata__logo { flex: none; display: block; width: 156px; margin-left: -2px; }
.testata__logo img { width: 100%; }
.testata__centro { margin-left: auto; margin-right: auto; padding-left: 2%; }
.testata__luogo {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-titoli); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--testo-tenue); margin-bottom: 10px;
}
.testata__luogo img { width: 15px; height: 15px; }
.menu { display: flex; gap: 28px; }
.menu a {
  font-family: var(--font-titoli); font-weight: 600; font-size: 16px; color: var(--inchiostro);
  text-decoration: none; padding: 6px 0; position: relative; white-space: nowrap;
  touch-action: manipulation;
}
.menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--giallo);
  transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .menu a:hover::after { transform: scaleX(1); } }
.menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu-telefono nav a[aria-current="page"] { color: var(--oro); }
.testata__cta { flex: none; min-height: 48px; padding: 0 22px; font-size: 15px; gap: 12px; }
.testata__apri { display: none; }

/* menu del telefono */
.menu-telefono {
  position: fixed; inset: 0; z-index: 40;
  background: var(--carta);
  padding: calc(76px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; justify-content: space-between;
}
.menu-telefono[hidden] { display: none; }
.menu-telefono { opacity: 0; transition: opacity .18s ease; }
.menu-telefono.aperto { opacity: 1; transition: opacity .28s var(--ease-out); }
.menu-telefono li, .menu-telefono__fondo {
  opacity: 0; transform: translateY(14px);
  transition: opacity .15s ease, transform .15s ease;
}
.menu-telefono.aperto li, .menu-telefono.aperto .menu-telefono__fondo {
  opacity: 1; transform: none;
  transition: opacity .4s var(--ease-out), transform .5s var(--ease-out);
}
.menu-telefono.aperto li:nth-child(1) { transition-delay: 40ms; }
.menu-telefono.aperto li:nth-child(2) { transition-delay: 85ms; }
.menu-telefono.aperto li:nth-child(3) { transition-delay: 130ms; }
.menu-telefono.aperto li:nth-child(4) { transition-delay: 175ms; }
.menu-telefono.aperto li:nth-child(5) { transition-delay: 220ms; }
.menu-telefono.aperto .menu-telefono__fondo { transition-delay: 270ms; }
.menu-telefono li { border-bottom: 1px solid var(--linea); }
.menu-telefono nav a {
  display: block; padding: 18px 2px;
  font-family: var(--font-titoli); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; color: var(--inchiostro);
  text-decoration: none; touch-action: manipulation;
}
.menu-telefono nav a:active { color: var(--oro); }
.menu-telefono__fondo { display: grid; gap: 16px; padding-top: 28px; }
.menu-telefono__fondo .btn { width: 100%; }
.menu-telefono__fondo p { font-size: 15px; color: var(--testo-tenue); text-align: center; }

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero { padding: 4px 0 22px; }
.hero__griglia { display: grid; grid-template-columns: 40.5% 1fr; gap: 3.2%; align-items: center; }
.hero__testo { padding-top: 26px; }
.hero h1 .riga { display: block; }
.hero__lead { font-size: 19px; line-height: 1.5; color: var(--testo); }
.hero__azioni { display: flex; align-items: center; gap: 34px; margin-top: 34px; flex-wrap: wrap; }
.hero__foto { border-radius: var(--raggio); overflow: hidden; aspect-ratio: 1.95 / 1; background: var(--sabbia); }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 45%; }

/* ── punti di forza ───────────────────────────────────────────────────── */
.punti__lista {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
  padding: 18px 0;
}
.punti__lista li {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  font-family: var(--font-titoli); font-weight: 600; font-size: 17px; color: var(--inchiostro);
  min-height: 46px;
}
.punti__lista li + li { border-left: 2px solid var(--giallo); }
.punti__lista img { width: 42px; height: 42px; }

/* ── servizi ──────────────────────────────────────────────────────────── */
.servizi { padding-top: 26px; padding-bottom: 30px; }
.servizi__griglia { display: grid; grid-template-columns: 1fr .94fr 1fr; gap: 18px; }
.scheda {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 26px 44px 26px 48px; border-radius: 4px; min-height: 282px;
  position: relative;
  transition: opacity .7s var(--ease-out), transform .8s var(--ease-out), translate .3s var(--ease-out), scale .14s var(--ease-out), box-shadow .3s ease;
}
.scheda .link-freccia::after { content: ""; position: absolute; inset: 0; border-radius: 4px; }
.scheda:active { scale: .98; }
.scheda--scura { background: var(--antracite); color: var(--bianco); }
.scheda--scura h3 { color: var(--bianco); }
.scheda--sabbia { background: var(--sabbia); }
.scheda--chiara { background: var(--carta-chiara); border: 1.5px solid var(--linea); }
.scheda__numero { font-family: var(--font-titoli); font-weight: 700; font-size: 15px; letter-spacing: .04em; margin-bottom: 12px; }
.scheda__icona { width: 54px; height: 54px; margin-bottom: 12px; transition: transform .35s var(--ease-out); }
.scheda h3 { font-size: 27px; margin-bottom: 8px; }
.scheda p { font-size: 19px; line-height: 1.35; }
.scheda__extra { margin-top: 12px; }
.scheda .link-freccia { margin-top: auto; padding-top: 16px; }
.scheda--scura .scheda__extra, .scheda--scura p { color: rgba(255, 255, 255, .92); }
@media (hover: hover) and (pointer: fine) {
  .scheda:hover { translate: 0 -5px; box-shadow: 0 22px 40px -26px rgba(14, 21, 28, .6); }
  .scheda:hover .scheda__icona { transform: translateY(-3px); }
}

/* ── assicurazioni ────────────────────────────────────────────────────── */
.assicurazioni { padding-top: 26px; padding-bottom: 34px; }
.riga-foto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 22px; }
.foto-scheda__img { border-radius: var(--raggio); overflow: hidden; margin-bottom: 14px; background: var(--sabbia); }
.foto-scheda img {
  width: 100%; aspect-ratio: 1.82 / 1; object-fit: cover;
  transition: transform .7s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .foto-scheda:hover img { transform: scale(1.05); }
}
.foto-scheda h3 { font-size: 22px; margin-bottom: 4px; }
.foto-scheda p { font-size: 16px; color: var(--testo-tenue); }

/* ── affiancati: foto e testo ─────────────────────────────────────────── */
.affiancati { display: grid; grid-template-columns: 54% 1fr; gap: 5.5%; align-items: center; }
.affiancati--inverso { grid-template-columns: 1fr 51%; gap: 4%; }
.affiancati__foto { border-radius: var(--raggio); overflow: hidden; background: var(--sabbia); }
.affiancati__foto img { width: 100%; height: 100%; object-fit: cover; }
.affiancati__testo p { font-size: 17px; line-height: 1.5; }
.affiancati__testo h2 { margin-bottom: 10px; }
.sottotitolo { font-size: 18px; margin-bottom: 14px; }

.pratiche { padding-top: 10px; padding-bottom: 14px; }
.pratiche__foto { aspect-ratio: 1.72 / 1; margin-left: -28px; }
.pratiche__foto img { object-position: 40% 50%; }
.elenco-frecce { border-top: 1px solid var(--linea); margin-bottom: 26px; }
.elenco-frecce li { border-bottom: 1px solid var(--linea); }
.elenco-frecce a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 0; text-decoration: none;
  font-family: var(--font-titoli); font-weight: 700; font-size: 16px; color: var(--inchiostro);
  touch-action: manipulation;
  transition: color .18s ease;
}
.elenco-frecce a:active { color: var(--oro); }

/* ── fascia scura: sportello telematico ───────────────────────────────── */
.fascia-scura { background: var(--antracite); color: var(--bianco); padding: 34px 0 30px; }
.fascia-scura .contenitore { padding-inline: 4%; }
.fascia-scura h2 { color: var(--bianco); margin-bottom: 14px; }
.fascia-scura__griglia { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; }
.fascia-scura__testo { font-size: 19px; line-height: 1.45; color: rgba(255, 255, 255, .92); margin-bottom: 28px; }
.fascia-scura__icona { width: 260px; height: auto; margin-right: 6%; }
.passi { display: flex; align-items: center; gap: 24px; margin-top: 34px; font-size: 18px; }
.passi li { display: flex; align-items: center; gap: 24px; flex: none; white-space: nowrap; }
.passi li:not(:last-child) { flex: 1; }
.passi li:not(:last-child)::after { content: ""; flex: 1; height: 1px; background: var(--linea-chiara); min-width: 40px; }
.fascia-scura__icona { animation: fluttua 7s ease-in-out infinite; }
@keyframes fluttua { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -8px; rotate: -1.5deg; } }
.passi b { font-family: var(--font-titoli); font-weight: 700; }

/* ── imprese ──────────────────────────────────────────────────────────── */
.imprese { padding: 20px 0 22px; }
.imprese__foto { aspect-ratio: 2.13 / 1; }
.imprese .etichette { margin: 22px 0 28px; }

/* ── pagamenti ────────────────────────────────────────────────────────── */
.pagamenti { padding: 14px 0; }
.pagamenti .affiancati { grid-template-columns: 49% 1fr; gap: 6%; }
.pagamenti__foto { aspect-ratio: 2.2 / 1; margin-left: -28px; }
.pagamenti .etichette { margin: 22px 0 24px; gap: 14px 46px; }

/* ── l'agenzia ────────────────────────────────────────────────────────── */
.agenzia { padding: 14px 0 22px; }
.agenzia .affiancati { grid-template-columns: 50% 1fr; gap: 6%; }
.agenzia__foto { aspect-ratio: 2.2 / 1; }
.agenzia__foto img { object-position: 50% 40%; }
.agenzia .etichette { margin: 22px 0 18px; gap: 14px 64px; }

/* ── domande frequenti ────────────────────────────────────────────────── */
.faq { padding: 20px 0 16px; }
.faq__griglia { display: grid; grid-template-columns: 38% 1fr; gap: 4%; align-items: start; }
.faq__elenco { display: grid; gap: 12px; }
.domanda { border: 1.5px solid var(--linea); border-radius: var(--raggio); background: var(--carta-chiara); }
.domanda summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px 22px; cursor: pointer; list-style: none;
  font-family: var(--font-titoli); font-weight: 700; font-size: 17px; color: var(--inchiostro);
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.domanda summary::-webkit-details-marker { display: none; }
.domanda__segno { position: relative; width: 18px; height: 18px; flex: none; }
.domanda__segno img { position: absolute; inset: 0; width: 18px; height: 18px; transition: opacity .2s ease, transform .3s var(--ease-out); }
.domanda__meno { opacity: 0; transform: rotate(-90deg); }
.domanda[open] .domanda__meno { opacity: 1; transform: none; }
.domanda[open] .domanda__piu { opacity: 0; transform: rotate(90deg); }
.domanda { transition: border-color .2s ease, background-color .2s ease; }
.domanda[open] { border-color: rgba(237, 180, 18, .55); }
@media (hover: hover) and (pointer: fine) { .domanda:hover { border-color: rgba(237, 180, 18, .55); } }
.domanda p { padding: 0 22px 16px; font-size: 16px; color: var(--testo-tenue); }
.domanda[open] p { animation: risposta .25s var(--ease-out); }
@keyframes risposta { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.domanda summary:active { opacity: .75; }

/* ── contatti ─────────────────────────────────────────────────────────── */
.contatti { padding: 20px 0 22px; }
.contatti__riquadro {
  display: grid; grid-template-columns: 43% 1fr; background: var(--sabbia);
  border-radius: var(--raggio); overflow: hidden; margin-inline: -28px;
}
.contatti__testo { padding: 30px 40px 30px 40px; }
.contatti__testo h2 { margin-bottom: 12px; }
.contatti__testo > p { font-size: 18px; line-height: 1.45; }
.contatti__luogo { display: flex; align-items: flex-start; gap: 16px; margin: 18px 0 22px; }
.contatti__luogo img { width: 28px; height: 28px; margin-top: 1px; }
.contatti__luogo span { font-size: 17px; }
.contatti__luogo small { display: block; font-size: 15px; color: var(--testo-tenue); margin-top: 4px; }
.contatti__luogo small a { color: var(--inchiostro); text-underline-offset: 3px; text-decoration-color: var(--giallo); }
.contatti__foto { position: relative; min-height: 300px; }
.contatti__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }

/* ── piede ────────────────────────────────────────────────────────────── */
.piede { padding: 10px 0 calc(22px + env(safe-area-inset-bottom, 0px)); }
.piede__riga {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 40px;
  padding: 16px 0 18px; border-bottom: 1px solid var(--linea);
}
.piede__logo { display: block; width: 120px; }
.piede__nav ul { display: flex; justify-content: center; flex-wrap: wrap; }
.piede__nav li + li { border-left: 2px solid var(--giallo); }
.piede__nav a { display: block; padding: 4px 22px; text-decoration: none; font-size: 15.5px; color: var(--testo); touch-action: manipulation; }
@media (hover: hover) and (pointer: fine) { .piede__nav a:hover, .piede__link a:hover { color: var(--oro); } }
.piede__luogo { display: flex; align-items: center; gap: 12px; font-size: 14.5px; line-height: 1.3; }
.piede__luogo img { width: 24px; height: 24px; }
.piede__fondo { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-top: 16px; font-size: 13.5px; color: var(--testo-tenue); }
.piede__legale { max-width: 760px; }
.piede__legale a { color: inherit; }
.credit { font-size: .82rem; opacity: .75; margin-top: 8px; }
.credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .credit a:hover { opacity: 1; } }
.piede__link { display: flex; flex: none; }
.piede__link li + li { border-left: 2px solid var(--giallo); }
.piede__link a { display: block; padding: 2px 18px; text-decoration: none; color: var(--testo); font-size: 14.5px; }
.piede__link li:last-child a { padding-right: 0; }

/* ── pulsante WhatsApp fisso ──────────────────────────────────────────── */
.whatsapp {
  position: fixed; z-index: 45;
  right: calc(18px + env(safe-area-inset-right, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--giallo); color: var(--antracite);
  box-shadow: 0 10px 24px -10px rgba(14, 21, 28, .55);
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform .16s var(--ease-out), background-color .18s ease;
}
.whatsapp:active { transform: scale(.94); }
html.js .whatsapp { transition: opacity .3s var(--ease-out), transform .35s var(--ease-out), background-color .18s ease; }
html.js .whatsapp:not(.visibile), html.menu-aperto .whatsapp {
  opacity: 0; transform: translateY(12px) scale(.92); pointer-events: none;
  transition: opacity .18s ease, transform .2s ease;
}
@media (hover: hover) and (pointer: fine) { html .whatsapp.visibile:hover, .whatsapp:hover { background: var(--giallo-vivo); transform: translateY(-2px); } }

/* ── pagine semplici (legali, 404) ────────────────────────────────────── */
.pagina-testo { padding: 40px 0 72px; }
.pagina-testo .contenitore { max-width: 820px; }
.pagina-testo h1 { font-size: clamp(34px, 4vw, 48px); margin-bottom: 18px; }
.pagina-testo h2 { font-size: 24px; letter-spacing: -0.02em; margin: 34px 0 10px; }
.pagina-testo h3 { font-size: 19px; margin: 24px 0 8px; }
.pagina-testo p, .pagina-testo li { font-size: 17px; line-height: 1.6; margin-bottom: 12px; }
.pagina-testo ul, .pagina-testo ol { list-style: disc; padding-left: 22px; margin-bottom: 14px; }
.pagina-testo table { width: 100%; border-collapse: collapse; margin: 12px 0 20px; font-size: 15.5px; display: block; overflow-x: auto; }
.pagina-testo th, .pagina-testo td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--linea); }
.pagina-testo a { color: var(--inchiostro); text-decoration-color: var(--giallo); text-underline-offset: 3px; overflow-wrap: anywhere; }
.pagina-404 { padding: 72px 0 96px; text-align: left; }
.pagina-404 p { font-size: 19px; margin: 16px 0 28px; max-width: 560px; }



/* ── pezzi del copy (step 6 e pagine interne), fatti coi componenti del design ── */
.btn--scuro { background: var(--antracite); color: var(--bianco); }
@media (hover: hover) and (pointer: fine) { .btn--scuro:hover { background: var(--inchiostro); box-shadow: 0 10px 24px -14px rgba(14, 21, 28, .8); } }
.link-freccia--chiaro { color: var(--bianco); }
.azioni { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 34px; margin-top: 28px; }
.hero .occhiello { color: var(--oro); }
.testo-largo { max-width: 760px; }
.testo-largo p + p, .affiancati__testo p + p, .intesta__nota p + p, .contatti__testo p + p { margin-top: 12px; }
.sezione > .contenitore > p, .sezione .dopo { margin-top: 20px; font-size: 17px; }
.intesta__nota p { font-size: inherit; }
.sezione--sabbia { background: var(--sabbia); }

/* la fascia in evidenza (rottamazione): la fascia del design, col giallo del kit */
.fascia-gialla { background: var(--giallo); color: var(--inchiostro); padding: 44px 0; }
.fascia-gialla__griglia { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: end; }
.fascia-gialla h2 { margin-bottom: 18px; }
.fascia-gialla__date { font-family: var(--font-titoli); font-size: 23px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.fascia-gialla__date strong { font-weight: 800; background: var(--carta); padding: 0 .25em; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.fascia-gialla p { font-size: 18px; line-height: 1.5; }
.fascia-gialla .btn { margin-top: 24px; }
.evidenza { display: inline; font-weight: 700; background: var(--giallo); padding: .1em .35em; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* elenco con le icone del kit (una per voce) */
.lista-icone { display: grid; gap: 14px; margin: 18px 0 20px; }
.lista-icone li { display: flex; align-items: flex-start; gap: 14px; font-size: 17px; line-height: 1.45; }
.lista-icone img { width: 26px; height: 26px; flex: none; margin-top: 1px; }
.lista-icone b { font-family: var(--font-titoli); font-weight: 700; color: var(--inchiostro); }

/* le righe del design senza link (orari, contatti) */
.righe { border-top: 1px solid var(--linea); margin: 16px 0 20px; }
.righe li { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--linea); font-size: 17px; }
.righe li > span:first-child { font-family: var(--font-titoli); font-weight: 700; color: var(--inchiostro); }
.righe li > span:last-child { text-align: right; }
.righe a { color: var(--inchiostro); text-decoration-color: var(--giallo); text-underline-offset: 3px; }
.fascia-scura .righe { border-color: var(--linea-chiara); }
.fascia-scura .righe li { border-color: var(--linea-chiara); }

/* la striscia del design (icona + testo, divise da righe gialle), per gli elenchi corti */
.punti--testo .punti__lista li { justify-content: flex-start; align-items: flex-start; text-align: left; padding: 6px 28px; font-weight: 500; font-size: 16.5px; line-height: 1.4; gap: 16px; min-height: 0; }
.punti--testo .punti__lista li:first-child { padding-left: 0; }
.punti--testo .punti__lista img { width: 36px; height: 36px; flex: none; }
.punti--testo .punti__lista b { font-weight: 700; }
.punti__lista--due { grid-template-columns: repeat(2, 1fr) !important; }
.punti__lista--quattro { grid-template-columns: repeat(4, 1fr) !important; }

/* schede del design in griglia (2, 3 o 4 per riga) */
.griglia-schede { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.griglia-schede--due { grid-template-columns: repeat(2, 1fr); }
.griglia-schede--quattro { grid-template-columns: repeat(4, 1fr); }
.griglia-schede .scheda { min-height: 0; padding: 26px 30px 28px; }
.griglia-schede .scheda h3 { font-size: 23px; }
.griglia-schede .scheda p { font-size: 17px; }
.scheda--testo p { font-size: 20px !important; line-height: 1.4; font-family: var(--font-titoli); font-weight: 600; }

/* i passi del design, in griglia (3 o 4) */
.passi--griglia { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 30px; align-items: start; }
.passi--tre { grid-template-columns: repeat(3, 1fr); }
.passi--griglia li { display: block !important; white-space: normal !important; }
.passi--griglia li::after { display: none !important; }
.passi__numero { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; font-family: var(--font-titoli); font-weight: 800; font-size: 22px; color: var(--giallo-vivo); }
.passi__numero::after { content: ""; flex: 1; height: 1px; background: var(--linea-chiara); }
.passi--chiari .passi__numero { color: var(--oro); }
.passi--chiari .passi__numero::after { background: var(--linea); }
.passi__testo { font-size: 17px; line-height: 1.5; }
.passi--chiari { color: var(--testo); }
.passi a { color: inherit; text-decoration-color: var(--giallo); text-underline-offset: 3px; }

/* il numero grande (54 rate) */
.numero-grande { font-family: var(--font-titoli); font-weight: 800; font-size: clamp(120px, 15vw, 210px); line-height: .85; letter-spacing: -0.05em; color: var(--giallo-vivo); font-variant-numeric: tabular-nums; }

/* la mappa di Google al clic, con l'avviso prima */
.mappa { position: relative; min-height: 320px; height: 100%; background: var(--carta-chiara); display: grid; place-items: center; border-left: 1px solid var(--linea); }
.mappa__avviso { max-width: 420px; padding: 34px 32px; text-align: center; }
.mappa__avviso img { width: 46px; height: 46px; margin: 0 auto 14px; }
.mappa__avviso p { font-size: 15.5px; line-height: 1.5; color: var(--testo-tenue); }
.mappa__avviso p + p { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 14px 22px; justify-content: center; align-items: center; }
.mappa__avviso a { color: var(--inchiostro); text-decoration-color: var(--giallo); text-underline-offset: 3px; }
.mappa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mappa--larga { margin-top: 26px; border: 1.5px solid var(--linea); border-radius: var(--raggio); min-height: 380px; overflow: hidden; }
.contatti__riquadro .mappa { min-height: 100%; }

/* pulsante WhatsApp: la scritta che compare col mouse */
.whatsapp__etichetta {
  position: absolute; right: calc(100% + 12px); top: 50%; white-space: nowrap;
  background: var(--antracite); color: var(--bianco); font-family: var(--font-titoli); font-weight: 600; font-size: 14px;
  padding: 8px 14px; border-radius: 4px; pointer-events: none;
  opacity: 0; transform: translate(6px, -50%); transition: opacity .18s ease, transform .2s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .whatsapp:hover .whatsapp__etichetta { opacity: 1; transform: translate(0, -50%); } }
@media (hover: none), (pointer: coarse) { .whatsapp__etichetta { display: none; } }

.piede__info { display: grid; grid-template-columns: 1.1fr 1fr 1.1fr; gap: 28px; padding: 22px 0 20px; border-bottom: 1px solid var(--linea); font-size: 15px; line-height: 1.55; }
.piede__nome { font-family: var(--font-titoli); font-weight: 800; color: var(--inchiostro); font-size: 17px; }
.piede__info a { color: var(--inchiostro); text-decoration-color: var(--giallo); text-underline-offset: 3px; }
.piede__nav a[aria-current="page"] { color: var(--oro); }

/* ── movimento (step 5-bis) ───────────────────────────────────────────────
   Curve e durate da Emil Kowalski (09 § 0-bis-2): entrate --ease-out, spostamenti --ease-in-out.
   Si muovono solo transform, opacity e clip-path. */

/* la hero entra al caricamento, in CSS: occhiello, titolo riga per riga, testo, pulsanti */
@keyframes entra { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes traccia { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes assesta { from { transform: scale(1.07); } to { transform: scale(1); } }
.hero .entra { animation: entra .85s var(--ease-out) both; animation-delay: calc(90ms + var(--d, 0) * 75ms); }
.hero .trattino { animation: traccia .8s var(--ease-in-out) .42s both; }
.hero__foto img { animation: assesta 1.8s var(--ease-out) both; }

/* le sezioni arrivano mentre si scorre (.reveal → .in, main.js); senza JS sono gia' visibili */
html.js .reveal {
  opacity: 0; transform: translateY(32px);
  transition: opacity .7s var(--ease-out), transform .85s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 80ms);
}
html.js .reveal.in { opacity: 1; transform: none; }
html.js .scheda.reveal { transition: opacity .7s var(--ease-out) calc(var(--d, 0) * 80ms), transform .85s var(--ease-out) calc(var(--d, 0) * 80ms), translate .3s var(--ease-out), scale .14s var(--ease-out), box-shadow .3s ease; }

/* le foto grandi si svelano dal centro; dentro, la foto scorre piano (profondita') */
html.js .reveal.foto-svela {
  opacity: 1; transform: none;
  clip-path: inset(9% 7% 9% 7% round 6px);
  transition: clip-path 1.1s var(--ease-out);
}
html.js .reveal.foto-svela.in { clip-path: inset(0 0 0 0 round 6px); }
html.js .parallasse img { transform: scale(1.12); will-change: transform; }

/* le righe gialle sotto le parole chiave si disegnano, una dopo l'altra */
html.js .reveal .etichette li::after { clip-path: inset(0 100% 0 0); transition: clip-path .6s var(--ease-in-out); }
html.js .reveal.in .etichette li::after { clip-path: inset(0 0 0 0); }
html.js .reveal.in .etichette li:nth-child(1)::after { transition-delay: .35s; }
html.js .reveal.in .etichette li:nth-child(2)::after { transition-delay: .43s; }
html.js .reveal.in .etichette li:nth-child(3)::after { transition-delay: .51s; }
html.js .reveal.in .etichette li:nth-child(4)::after { transition-delay: .59s; }

/* i tre passi: la linea fra un passo e l'altro si traccia */
html.js .passi.reveal li:not(:last-child)::after { clip-path: inset(0 100% 0 0); transition: clip-path .7s var(--ease-in-out); }
html.js .passi.reveal.in li:not(:last-child)::after { clip-path: inset(0 0 0 0); }
html.js .passi.reveal.in li:nth-child(1)::after { transition-delay: .35s; }
html.js .passi.reveal.in li:nth-child(2)::after { transition-delay: .75s; }


@media (prefers-reduced-motion: reduce) {
  /* meno movimento, non zero: restano le dissolvenze e i colori, spariscono gli spostamenti */
  @keyframes compari { from { opacity: 0; } to { opacity: 1; } }
  .hero .entra { animation-name: compari; animation-duration: .5s; }
  .hero .trattino { animation: compari .5s ease .3s both; }
  .hero__foto img { animation: none; }
  html.js .reveal { transform: none; transition: opacity .5s ease; transition-delay: calc(var(--d, 0) * 50ms); }
  html.js .reveal.foto-svela { opacity: 0; clip-path: none; transition: opacity .5s ease; }
  html.js .reveal.foto-svela.in { opacity: 1; clip-path: none; }
  html.js .parallasse img { transform: none; will-change: auto; }
  html.js .reveal .etichette li::after, html.js .passi.reveal li:not(:last-child)::after { clip-path: none; transition: none; }
  .fascia-scura__icona { animation: none; }
  .foto-scheda img, .scheda, .scheda__icona, .freccia, .testata { transition-property: opacity, background-color, box-shadow, border-color, color; }
  .testata.nascosta { transform: none; }
  .menu-telefono li, .menu-telefono__fondo { transform: none; }
  html.js .whatsapp:not(.visibile), html.menu-aperto .whatsapp { transform: none; }
  .scheda:hover { translate: none; }
  .scheda:hover .scheda__icona, .foto-scheda:hover img { transform: none; }
}

/* ── tablet ───────────────────────────────────────────────────────────── */
/* (fra 961 e 1320 px il pulsante dell'intestazione torna: il menu ha solo «Servizi» e «Contatti») */
@media (max-width: 1180px) {
  .menu { gap: 30px; }
  .testata__centro { padding-left: 2%; }
  .scheda { padding: 24px 28px; }
  .contatti__riquadro, .pratiche__foto, .pagamenti__foto { margin-inline: 0; }
  .contatti__riquadro { margin-inline: 0; }
}

@media (max-width: 960px) {
  :root { --altezza-testata: 72px; }
  body { font-size: 16px; }
  .testata__centro, .testata__cta { display: none; }
  .testata__riga { justify-content: space-between; gap: 16px; padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
  .testata__logo { width: 100px; margin-left: 0; }
  .testata__apri {
    display: inline-grid; place-content: center; gap: 5px;
    width: 48px; height: 48px; margin-right: -8px; padding: 0;
    background: transparent; border: 0; border-radius: 8px; cursor: pointer;
    touch-action: manipulation; user-select: none; -webkit-user-select: none;
    position: relative; z-index: 60;
  }
  .testata__apri span { display: block; width: 24px; height: 2px; background: var(--inchiostro); border-radius: 2px; transition: transform .25s var(--ease-out), opacity .2s ease; }
  .testata__apri:active { background: var(--sabbia); }
  .testata__apri[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .testata__apri[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .testata__apri[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .contenitore { width: auto; margin-inline: 0; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
  .fascia-scura .contenitore { padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)); }

  .hero { padding-bottom: 8px; }
  .hero__griglia { grid-template-columns: 1fr; gap: 26px; }
  .hero__testo { padding-top: 14px; }
  .hero__foto { aspect-ratio: 4 / 3; }
  .hero__lead { font-size: 17px; }

  .intesta { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
  .intesta__nota, .intesta--bassa .intesta__nota { width: auto; font-size: 17px; padding-left: 18px; }

  .servizi__griglia { grid-template-columns: 1fr; gap: 14px; }
  .scheda { min-height: 0; padding: 24px; }
  .scheda .link-freccia { margin-top: 18px; padding-top: 6px; }

  .riga-foto {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    padding-bottom: 6px; scrollbar-width: none;
  }
  .riga-foto::-webkit-scrollbar { display: none; }
  .foto-scheda { flex: 0 0 80%; scroll-snap-align: start; }

  .affiancati, .affiancati--inverso, .pagamenti .affiancati, .agenzia .affiancati { grid-template-columns: 1fr; gap: 24px; }
  .affiancati--inverso .affiancati__foto { order: -1; }
  .pratiche__foto, .imprese__foto, .pagamenti__foto, .agenzia__foto { aspect-ratio: 16 / 10; margin-left: 0; }
  .sezione { padding: 40px 0; }
  .pratiche { padding-top: 40px; padding-bottom: 40px; }
  .pagamenti { padding: 40px 0; }

  .fascia-scura { padding: 40px 0 32px; }
  .fascia-scura__griglia { grid-template-columns: 1fr; gap: 0; }
  .fascia-scura__icona { order: -1; width: 76px; margin: 0 0 22px; }
  .fascia-scura__testo { font-size: 17px; }
  .passi { flex-direction: column; align-items: flex-start; gap: 12px; font-size: 16px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--linea-chiara); }
  .passi li:not(:last-child) { flex: none; }
  .passi li:not(:last-child)::after { display: none; }

  .faq__griglia { grid-template-columns: 1fr; gap: 22px; }

  .contatti__riquadro { grid-template-columns: 1fr; }
  .contatti__testo { padding: 28px 22px 30px; }
  .contatti__foto { order: -1; aspect-ratio: 16 / 10; min-height: 0; }

  .piede__riga { grid-template-columns: 1fr; gap: 18px; justify-items: start; }
  .piede__nav ul { justify-content: flex-start; gap: 6px 22px; }
  .piede__nav li + li { border-left: 0; }
  .piede__nav a { padding: 6px 0; }
  .piede__fondo { flex-direction: column; gap: 14px; padding-bottom: 72px; }
  .piede__link li:first-child a { padding-left: 0; }
}

@media (max-width: 600px) {
  h1 { font-size: clamp(36px, 10.4vw, 44px); }
  h2 { font-size: clamp(30px, 8.6vw, 36px); }
  .occhiello { letter-spacing: .14em; font-size: 12.5px; }
  .hero .occhiello { font-size: 12px; letter-spacing: .08em; }
  .trattino { margin: 20px 0 18px; }
  .hero__azioni { flex-direction: column; align-items: stretch; gap: 18px; margin-top: 26px; }
  .hero__azioni .link-freccia { align-self: flex-start; }
  .hero__lead br, .intesta__nota br, .scheda p br, .fascia-scura__testo br, .affiancati__testo p br, .contatti__testo > p br { display: none; }

  .punti__lista { grid-template-columns: repeat(3, 1fr); padding: 14px 0; }
  .punti__lista li { flex-direction: column; gap: 8px; font-size: 13.5px; text-align: center; line-height: 1.25; padding: 0 6px; }
  .punti__lista li + li { border-left-width: 1.5px; }
  .punti__lista img { width: 32px; height: 32px; }

  .scheda h3 { font-size: 24px; }
  .scheda p { font-size: 17px; }
  .etichette { gap: 12px 26px; }
  .etichette li { min-width: 0; font-size: 15px; }
  .pagamenti .etichette, .agenzia .etichette { gap: 12px 26px; }
  .btn { width: 100%; }
  .domanda summary { padding: 14px 16px; font-size: 16px; }
  .domanda p { padding: 0 16px 16px; }
  .piede__nav a { font-size: 15px; }
  .whatsapp { width: 54px; height: 54px; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}

/* ── pezzi del copy: tablet e telefono ────────────────────────────────── */
@media (max-width: 960px) {
  .fascia-gialla { padding: 36px 0; }
  .fascia-gialla__griglia { grid-template-columns: 1fr; gap: 14px; }
  .fascia-gialla__date { font-size: 20px; }
  .griglia-schede, .griglia-schede--due, .griglia-schede--quattro { grid-template-columns: 1fr 1fr; }
  .passi--griglia, .passi--tre { grid-template-columns: 1fr 1fr; gap: 22px 26px; }
  .punti__lista--quattro { grid-template-columns: 1fr 1fr !important; }
  .piede__info { grid-template-columns: 1fr; gap: 14px; }
  .mappa { border-left: 0; border-top: 1px solid var(--linea); min-height: 300px; }
  .contatti__riquadro .mappa { order: 2; }
  .numero-grande { font-size: 120px; }
  .azioni { gap: 16px 28px; }
}
@media (max-width: 600px) {
  .griglia-schede, .griglia-schede--due, .griglia-schede--quattro { grid-template-columns: 1fr; gap: 12px; }
  .griglia-schede .scheda { padding: 22px 22px 24px; }
  .passi--griglia, .passi--tre { grid-template-columns: 1fr; gap: 18px; }
  .punti--testo .punti__lista, .punti--testo .punti__lista--due, .punti--testo .punti__lista--quattro { grid-template-columns: 1fr !important; padding: 4px 0; }
  .punti--testo .punti__lista li { flex-direction: row; padding: 14px 0; font-size: 16px; }
  .punti--testo .punti__lista li + li { border-left: 0; border-top: 1px solid var(--linea); }
  .punti--testo .punti__lista img { width: 30px; height: 30px; }
  .righe li { flex-direction: column; gap: 2px; }
  .righe li > span:last-child { text-align: left; }
  .fascia-gialla__date { font-size: 19px; }
  .fascia-gialla p { font-size: 16.5px; }
  .azioni { flex-direction: column; align-items: stretch; gap: 16px; }
  .azioni .link-freccia { align-self: flex-start; }
  .mappa__avviso { padding: 28px 20px; }
  .numero-grande { font-size: 104px; }
}

/* ── ritocchi dei pezzi del copy ──────────────────────────────────────── */
.hero__lead + .hero__lead { margin-top: 10px; }
.hero .righe { margin-top: 18px; }
.link-sottile { color: inherit; text-decoration: underline; text-decoration-color: var(--giallo); text-underline-offset: 3px; }
.etichette--colonna { flex-direction: column; align-items: flex-start; gap: 14px; margin: 20px 0 22px; }
.etichette--colonna li { min-width: 0; }
.fascia-scura__icona--piccola { width: 150px; }
.fascia-scura__griglia--numero { grid-template-columns: auto 1fr; gap: 64px; align-items: center; }
.fascia-scura h2 + .passi--griglia { margin-top: 30px; }
.contatti__testo .righe { margin: 18px 0 16px; }
.contatti__testo .azioni { margin-top: 22px; }
.assicurazioni .azioni { margin-top: 4px; }
.scheda h3 + p { margin-top: 0; }
@media (max-width: 960px) {
  .fascia-scura__icona--piccola { width: 76px; }
  .fascia-scura__griglia--numero { grid-template-columns: 1fr; gap: 10px; }
}

/* ── giro di correzione dello step 6 ──────────────────────────────────── */
.fascia-gialla p + p { margin-top: 12px; }
.intesta--alta { align-items: flex-start; }
.intesta--alta .intesta__nota { width: min(560px, 46%); align-self: flex-start; }
.contatti__foto img { object-position: 50% 22%; }
@media (max-width: 960px) {
  .intesta--alta .intesta__nota { width: auto; }
}
@media (max-width: 600px) {
  .righe li { flex-direction: row; flex-wrap: wrap; justify-content: space-between; column-gap: 12px; row-gap: 2px; }
  .righe li > span:last-child { text-align: right; margin-left: auto; }
  .btn { font-size: 15px; padding: 0 18px; gap: 10px; }
  .contatti__testo { padding: 26px 18px 28px; }
}
@media (max-width: 600px) {
  .intesta__nota, .intesta--bassa .intesta__nota { font-size: 16px; padding-left: 14px; }
}


/* ════════════════════════════════════════════════════════════════════════
   REVISIONE DI DOMENICO (20/10/2026): la hero panoramica e il menu per categorie
   ════════════════════════════════════════════════════════════════════════ */

/* ── menu: «Servizi» con la tendina ── */
.menu { align-items: center; }
.menu__gruppo { position: relative; }
.menu__apri {
  display: inline-flex; align-items: center; gap: 9px; position: relative;
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  font-family: var(--font-titoli); font-weight: 600; font-size: 16px; color: var(--inchiostro);
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.menu__apri::after {
  content: ""; position: absolute; left: 0; right: 17px; bottom: 0; height: 2px; background: var(--giallo);
  transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease-out);
}
.menu__apri.attivo::after, .menu__gruppo.aperta .menu__apri::after { transform: scaleX(1); }
.menu__freccia {
  width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .22s var(--ease-out);
}
.menu__gruppo.aperta .menu__freccia { transform: translateY(2px) rotate(-135deg); }
.tendina {
  position: absolute; top: calc(100% + 16px); left: -26px; z-index: 70; width: 540px;
  background: var(--carta-chiara); border: 1px solid var(--linea); border-radius: 8px; padding: 10px;
  box-shadow: 0 26px 54px -26px rgba(14, 21, 28, .5);
  opacity: 0; visibility: hidden; transform: translateY(8px) scale(.98); transform-origin: 12% 0;
  transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
}
.tendina::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.menu__gruppo.aperta .tendina {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .2s var(--ease-out), transform .26s var(--ease-out), visibility 0s;
}
html:not(.js) .menu__gruppo:focus-within .tendina { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) and (pointer: fine) { html:not(.js) .menu__gruppo:hover .tendina { opacity: 1; visibility: visible; transform: none; } }
.tendina ul { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.tendina li { opacity: 0; transform: translateY(5px); transition: opacity .1s ease, transform .1s ease; }
.menu__gruppo.aperta .tendina li { opacity: 1; transform: none; transition: opacity .26s var(--ease-out), transform .3s var(--ease-out); }
.menu__gruppo.aperta .tendina li:nth-child(2) { transition-delay: 30ms; }
.menu__gruppo.aperta .tendina li:nth-child(3) { transition-delay: 60ms; }
.menu__gruppo.aperta .tendina li:nth-child(4) { transition-delay: 90ms; }
.menu__gruppo.aperta .tendina li:nth-child(5) { transition-delay: 120ms; }
.menu__gruppo.aperta .tendina li:nth-child(6) { transition-delay: 150ms; }
.menu .tendina a {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 6px; white-space: normal;
  font-family: var(--font-titoli); font-weight: 600; font-size: 15.5px; line-height: 1.25; color: var(--inchiostro); text-decoration: none;
  transition: background-color .15s ease;
}
.menu .tendina a::after { content: none; }
.tendina img { width: 28px; height: 28px; flex: none; transition: transform .25s var(--ease-out); }
.tendina a[aria-current="page"] { background: var(--sabbia); }
.tendina a:active { background: var(--sabbia); }
@media (hover: hover) and (pointer: fine) {
  .menu__apri:hover::after { transform: scaleX(1); }
  .tendina a:hover { background: var(--sabbia); }
  .tendina a:hover img { transform: translateY(-2px); }
}

/* ── menu del telefono: il gruppo «Servizi» ── */
.menu-telefono__gruppo { font-family: var(--font-titoli); font-weight: 700; font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--oro); margin: 0 0 4px; }
.menu-telefono .menu-telefono__servizi a { display: flex; align-items: center; gap: 14px; font-size: 21px; padding: 12px 2px; }
.menu-telefono__servizi img { width: 26px; height: 26px; flex: none; }
.menu-telefono__altre { margin-top: 8px; }
.menu-telefono.aperto li:nth-child(6) { transition-delay: 265ms; }
.menu-telefono.aperto .menu-telefono__altre li { transition-delay: 300ms; }
.menu-telefono.aperto .menu-telefono__fondo { transition-delay: 330ms; }

/* ── la hero panoramica ── */
.hero-pano {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: max(580px, calc(92svh - var(--altezza-testata)));
  background: var(--antracite); color: var(--bianco);
}
.hero-pano__foto { position: absolute; inset: 0; z-index: -2; }
.hero-pano__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%);
  opacity: 0; transition: opacity 1.6s ease;
}
.hero-pano__img.attiva { opacity: 1; z-index: 2; }
.hero-pano__img.uscente { opacity: 1; z-index: 1; }
.hero-pano__img.attiva, .hero-pano__img.uscente { animation: zoom-lento 9s linear both; }
@keyframes zoom-lento { from { transform: scale(1.02); } to { transform: scale(1.12); } }
.hero-pano__velo {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(14, 21, 28, .9) 0%, rgba(14, 21, 28, .72) 32%, rgba(14, 21, 28, .28) 66%, rgba(14, 21, 28, .12) 100%),
    linear-gradient(0deg, rgba(14, 21, 28, .85) 0%, rgba(14, 21, 28, 0) 36%);
}
.hero-pano__contenuto { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-top: 64px; padding-bottom: 48px; }
.hero-pano__nome {
  display: inline-flex; align-items: center; gap: 16px; margin-bottom: 24px;
  font-family: var(--font-titoli); font-weight: 800; font-size: 19px; letter-spacing: .32em; text-transform: uppercase; color: var(--bianco);
}
.hero-pano__nome::before, .hero-pano__nome::after { content: ""; width: 46px; height: 3px; border-radius: 2px; background: var(--giallo); flex: none; }
.hero-pano h1 { color: var(--bianco); font-size: clamp(42px, 5.2vw, 76px); line-height: 1.02; letter-spacing: -0.03em; max-width: 860px; text-wrap: balance; }
.hero-pano__lead { margin-top: 22px; max-width: 580px; font-size: 20px; line-height: 1.5; color: rgba(255, 255, 255, .9); }
.hero-pano__azioni { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.btn--chiaro { background: rgba(255, 255, 255, .06); color: var(--bianco); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .72); }
@media (hover: hover) and (pointer: fine) { .btn--chiaro:hover { background: rgba(255, 255, 255, .14); } }
.hero-pano__fondo { position: relative; background: rgba(14, 21, 28, .62); border-top: 1px solid rgba(255, 255, 255, .14); }
.accessi { display: grid; grid-template-columns: repeat(6, 1fr); }
.accessi li + li { border-left: 1px solid rgba(255, 255, 255, .14); }
.accessi a {
  display: flex; align-items: center; gap: 12px; min-height: 78px; padding: 16px 16px;
  color: var(--bianco); text-decoration: none; font-family: var(--font-titoli); font-weight: 600; font-size: 15px; line-height: 1.25;
  touch-action: manipulation; transition: background-color .2s ease;
}
.accessi a > img:first-child { width: 30px; height: 30px; flex: none; }
.accessi .freccia { margin-left: auto; opacity: 0; transform: translateX(-5px); transition: opacity .2s ease, transform .25s var(--ease-out); }
.accessi a:active { background: rgba(255, 255, 255, .1); }
@media (hover: hover) and (pointer: fine) {
  .accessi a:hover { background: rgba(255, 255, 255, .07); }
  .accessi a:hover .freccia { opacity: 1; transform: none; }
}
.hero-pano__avanzamento {
  position: absolute; z-index: 1; right: max(var(--gutter), calc((100% - var(--largo)) / 2)); bottom: 102px;
  display: flex; gap: 8px;
}
.hero-pano__avanzamento i { position: relative; display: block; width: 40px; height: 3px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .3); }
.hero-pano__avanzamento i::after { content: ""; position: absolute; inset: 0; background: var(--giallo); transform: scaleX(0); transform-origin: left; }
.hero-pano__avanzamento i.attiva::after { animation: avanza var(--durata, 6.5s) linear forwards; }
@keyframes avanza { to { transform: scaleX(1); } }

@media (max-width: 960px) {
  .hero-pano { min-height: max(560px, calc(90svh - var(--altezza-testata))); }
  .accessi { grid-template-columns: repeat(3, 1fr); }
  .accessi li:nth-child(4) { border-left: 0; }
  .accessi li:nth-child(n+4) { border-top: 1px solid rgba(255, 255, 255, .14); }
  .hero-pano__avanzamento { bottom: auto; top: 20px; }
}
@media (max-width: 700px) {
  .hero-pano { min-height: calc(100svh - var(--altezza-testata)); }
  .hero-pano__img { object-position: var(--pos-tel, 50% 50%); }
  .hero-pano__velo {
    background: linear-gradient(180deg, rgba(14, 21, 28, .28) 0%, rgba(14, 21, 28, .34) 28%, rgba(14, 21, 28, .82) 58%, rgba(14, 21, 28, .95) 100%);
  }
  .hero-pano__contenuto { justify-content: flex-end; padding-top: 48px; padding-bottom: 22px; }
  .hero-pano__nome { font-size: 14px; letter-spacing: .26em; gap: 12px; margin-bottom: 14px; }
  .hero-pano__nome::before, .hero-pano__nome::after { width: 26px; }
  .hero-pano h1 { font-size: clamp(36px, 10.4vw, 46px); line-height: 1.04; }
  .hero-pano__lead { margin-top: 14px; font-size: 17px; }
  .hero-pano__azioni { flex-direction: column; align-items: stretch; width: 100%; gap: 12px; margin-top: 22px; }
  .hero-pano__azioni .btn { width: 100%; min-height: 54px; font-size: 16px; }
  .hero-pano__fondo .contenitore { padding: 0; }
  .accessi {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain;
  }
  .accessi::-webkit-scrollbar { display: none; }
  .accessi li { flex: 0 0 auto; scroll-snap-align: start; border-top: 0 !important; }
  .accessi li:nth-child(4) { border-left: 1px solid rgba(255, 255, 255, .14); }
  .accessi a { min-height: 62px; padding: 12px 16px; font-size: 14.5px; white-space: nowrap; gap: 10px; }
  .accessi a > img:first-child { width: 24px; height: 24px; }
  .accessi .freccia { display: none; }
  .hero-pano__avanzamento { top: 18px; }
  .hero-pano__avanzamento i { width: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-pano__img.attiva, .hero-pano__img.uscente { animation: none; }
  .hero-pano__avanzamento i.attiva::after { animation: none; transform: scaleX(1); }
  .tendina, .menu__gruppo.aperta .tendina, .tendina li { transform: none; }
}

.menu-telefono { padding-top: calc(96px + env(safe-area-inset-top, 0px)); }

/* ════════════════════════════════════════════════════════════════════════
   COPY DELLA REVISIONE (20/10/2026): home a categorie e 7 pagine interne
   ════════════════════════════════════════════════════════════════════════ */

/* hero della home: «Agenzia Narducci» è la riga più grande, sotto il resto del titolo */
.hero-pano__titolo { color: var(--bianco); margin: 0; }
.hero-pano .hero-pano__nome {
  display: block; margin: 0; gap: 0;
  font-size: clamp(50px, 7.4vw, 112px); font-weight: 800; line-height: .96; letter-spacing: -0.04em; text-transform: none;
}
.hero-pano .hero-pano__nome::before, .hero-pano .hero-pano__nome::after { content: none; }
.hero-pano__sotto {
  display: flex; align-items: center; gap: 16px; margin-top: 20px;
  font-size: clamp(21px, 2.2vw, 32px); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: rgba(255, 255, 255, .96);
}
.hero-pano__sotto::before { content: ""; flex: none; width: 46px; height: 3px; border-radius: 2px; background: var(--giallo); }
.hero-pano__lead + .hero-pano__lead { margin-top: 10px; }
.hero-pano .evidenza { color: var(--inchiostro); }

/* hero delle pagine interne: la stessa, più bassa, con una foto sola che si muove piano */
.hero-pano--pagina { min-height: max(480px, calc(66svh - var(--altezza-testata))); }
.hero-pano--pagina .hero-pano__contenuto { justify-content: flex-end; padding-top: 72px; padding-bottom: 60px; }
.hero-pano--pagina h1 { font-size: clamp(38px, 4.5vw, 64px); max-width: 920px; }
.hero-pano--pagina .hero-pano__img.attiva { animation: zoom-pagina 18s ease-in-out infinite alternate; }
@keyframes zoom-pagina { from { transform: scale(1.02); } to { transform: scale(1.1); } }

/* pulsanti in più, coi colori del kit */
.btn--contorno { background: transparent; color: var(--inchiostro); box-shadow: inset 0 0 0 1.5px var(--inchiostro); }
@media (hover: hover) and (pointer: fine) {
  .btn--contorno:hover { background: var(--giallo); box-shadow: inset 0 0 0 1.5px var(--giallo); }
  .fascia-gialla .btn--contorno:hover { background: var(--inchiostro); color: var(--bianco); box-shadow: inset 0 0 0 1.5px var(--inchiostro); }
}
.link-freccia--scuro { color: var(--inchiostro); border-bottom-color: var(--inchiostro); }

/* «I nostri servizi»: le sei categorie */
.servizi-griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.servizio {
  position: relative; display: flex; flex-direction: column;
  background: var(--carta-chiara); border: 1.5px solid var(--linea); border-radius: 8px; padding: 28px 28px 26px;
}
html.js .servizio.reveal, .servizio {
  transition: opacity .7s var(--ease-out) calc(var(--d, 0) * 80ms), transform .85s var(--ease-out) calc(var(--d, 0) * 80ms),
              translate .3s var(--ease-out), scale .14s var(--ease-out), box-shadow .3s ease, border-color .25s ease;
}
.servizio--accento { border: 2px solid var(--giallo); background: linear-gradient(180deg, rgba(237, 180, 18, .09), rgba(237, 180, 18, 0) 46%), var(--carta-chiara); }
.servizio__testa { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.servizio__icona { width: 54px; height: 54px; transition: transform .35s var(--ease-out); }
.servizio__numero { font-family: var(--font-titoli); font-weight: 700; font-size: 14px; letter-spacing: .06em; color: var(--testo-tenue); }
.servizio h3 { font-size: 24px; margin-bottom: 8px; }
.servizio > p { font-size: 16.5px; line-height: 1.45; color: var(--testo-tenue); }
.servizio ul { display: grid; gap: 9px; margin: 16px 0 24px; padding-top: 16px; border-top: 1px solid var(--linea); }
.servizio li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; font-weight: 500; line-height: 1.35; color: var(--inchiostro); }
.servizio li img { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.servizio__bottone { margin-top: auto; align-self: flex-start; }
.servizio__bottone::after { content: ""; position: absolute; inset: -1.5px; border-radius: 8px; }
.servizio:active { scale: .985; }
@media (hover: hover) and (pointer: fine) {
  .servizio:hover { translate: 0 -6px; box-shadow: 0 26px 46px -28px rgba(14, 21, 28, .5); border-color: rgba(237, 180, 18, .7); }
  .servizio:hover .btn--contorno { background: var(--giallo); box-shadow: inset 0 0 0 1.5px var(--giallo); }
  .servizio:hover .servizio__icona { transform: translateY(-3px); }
  .servizio:hover .freccia { transform: translateX(4px); }
}

/* fasce gialle in più */
.data-evidenza { background: var(--carta); padding: 0 .18em; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.fascia-gialla .azioni { margin-top: 24px; }
.fascia-gialla .azioni .btn { margin-top: 0; }
.fascia-gialla--centro .contenitore { max-width: 780px; text-align: center; }
.fascia-gialla--centro h2 { margin-bottom: 14px; }
.fascia-gialla--centro p { font-size: 19px; }

/* schede brevi, rami, recapiti */
.scheda--breve { min-height: 0; }
.scheda--breve .scheda__icona { width: 44px; height: 44px; margin-bottom: 16px; }
.scheda--breve p { font-size: 17.5px; line-height: 1.5; }
.scheda--scura b { color: var(--bianco); }
.scheda b { font-family: var(--font-titoli); font-weight: 700; color: var(--inchiostro); }
.titolo-sezione { margin-bottom: 26px; }
.intesta__icona { display: block; width: 44px; height: 44px; margin-bottom: 14px; }
.rami { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.rami li {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 20px;
  background: var(--carta-chiara); border: 1.5px solid var(--linea); border-radius: 6px;
  font-family: var(--font-titoli); font-weight: 700; font-size: 17px; color: var(--inchiostro);
}
.rami img { width: 40px; height: 40px; }
.griglia-schede.recapiti { grid-template-columns: repeat(3, 1fr); }
.recapito { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--inchiostro); }
.scheda--scura.recapito { color: var(--bianco); }
.recapito .scheda__icona { width: 44px; height: 44px; margin-bottom: 14px; }
.recapito__nome { font-family: var(--font-titoli); font-weight: 700; font-size: 15px; opacity: .85; }
.recapito__valore { font-family: var(--font-titoli); font-weight: 800; font-size: clamp(19px, 1.9vw, 26px); letter-spacing: -0.01em; overflow-wrap: anywhere; }

/* le icone di WhatsApp dentro le pagine, gialle come le altre del kit */
.lista-icone .icona-wa, .punti .icona-wa, .passi .icona-wa, .recapito .icona-wa { color: var(--giallo); }
.lista-icone svg { width: 26px; height: 26px; flex: none; margin-top: 1px; }
.punti--testo .punti__lista svg { width: 36px; height: 36px; flex: none; }
.lista-icone a, .intesta__nota a:not(.link-freccia) { color: var(--inchiostro); text-decoration-color: var(--giallo); text-underline-offset: 3px; }
.fascia-scura .lista-icone li { color: rgba(255, 255, 255, .92); }
.fascia-scura .lista-icone { margin-bottom: 26px; }

/* passi con l'icona del kit */
.passi--icone .passi__numero { gap: 12px; }
.passi--icone .passi__numero img, .passi--icone .passi__numero svg { width: 30px; height: 30px; flex: none; }
.passi--icone .passi__numero span { flex: none; }
.passi--chiari .passi__testo { color: var(--testo); }

/* come raggiungerci: testo e foto a sinistra, mappa a destra */
.raggiungerci { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: stretch; }
.raggiungerci__testo p + p { margin-top: 12px; }
.raggiungerci__foto { margin-top: 26px; border-radius: var(--raggio); overflow: hidden; aspect-ratio: 16 / 9; background: var(--sabbia); }
.raggiungerci__foto img { width: 100%; height: 100%; object-fit: cover; }
.raggiungerci__mappa .mappa--larga { margin-top: 0; height: 100%; min-height: 460px; }
.contatti__indirizzo { font-family: var(--font-titoli); font-weight: 700; font-size: 19px; color: var(--inchiostro); margin: 6px 0 10px; }
.sezione--stretta { padding: 30px 0; }

/* piede: recapiti, «Servizi» e «Agenzia» */
.piede__griglia { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; padding: 40px 0 30px; border-bottom: 1px solid var(--linea); }
.piede__marchio .piede__logo { width: 132px; margin-bottom: 16px; }
.piede__marchio p { font-size: 15px; line-height: 1.6; }
.piede__marchio a { color: var(--inchiostro); text-decoration-color: var(--giallo); text-underline-offset: 3px; }
.piede__riga-icona { display: flex; align-items: center; gap: 10px; }
.piede__riga-icona img { width: 20px; height: 20px; flex: none; }
.piede__titolo { font-family: var(--font-titoli); font-weight: 800; font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--oro); margin-bottom: 10px; }
.piede__colonna a { display: block; padding: 6px 0; font-size: 15.5px; color: var(--testo); text-decoration: none; touch-action: manipulation; }
.piede__colonna a[aria-current="page"] { color: var(--oro); }
@media (hover: hover) and (pointer: fine) { .piede__colonna a:hover { color: var(--oro); } }
.piede > .piede__fondo { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.piede > .piede__fondo .credit { margin-top: 0; }

@media (max-width: 960px) {
  .servizi-griglia { grid-template-columns: 1fr 1fr; gap: 16px; }
  .rami { grid-template-columns: repeat(3, 1fr); }
  .griglia-schede.recapiti { grid-template-columns: 1fr; }
  .raggiungerci { grid-template-columns: 1fr; gap: 26px; }
  .raggiungerci__mappa .mappa--larga { min-height: 340px; border-top: 1.5px solid var(--linea); }
  .piede__griglia { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
  .piede__marchio { grid-column: 1 / -1; }
  .hero-pano--pagina { min-height: max(460px, calc(72svh - var(--altezza-testata))); }
}
@media (max-width: 700px) {
  .hero-pano .hero-pano__nome { font-size: clamp(46px, 13.6vw, 58px); line-height: .98; }
  .hero-pano__sotto { font-size: 19px; gap: 12px; margin-top: 14px; }
  .hero-pano__sotto::before { width: 26px; }
  .hero-pano--pagina { min-height: calc(80svh - var(--altezza-testata)); }
  .hero-pano--pagina .hero-pano__contenuto { padding-bottom: 28px; }
  .hero-pano--pagina h1 { font-size: clamp(32px, 9.2vw, 40px); line-height: 1.06; }
}
@media (max-width: 600px) {
  .servizi-griglia { grid-template-columns: 1fr; gap: 14px; }
  .servizio { padding: 22px 20px 22px; }
  .servizio h3 { font-size: 22px; }
  .servizio__bottone { align-self: stretch; }
  .rami { grid-template-columns: 1fr 1fr; gap: 10px; }
  .rami li { padding: 16px 14px; font-size: 16px; gap: 10px; }
  .rami img { width: 32px; height: 32px; }
  .fascia-gialla--centro p { font-size: 17px; }
  .fascia-gialla--centro .contenitore { text-align: left; }
  .piede > .piede__fondo { flex-direction: column; gap: 8px; padding-bottom: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-pano--pagina .hero-pano__img.attiva { animation: none; }
  .servizio:hover { translate: none; }
  .servizio:hover .servizio__icona { transform: none; }
}

/* giro di correzione del copy della revisione */
.piede__griglia { padding: 40px 0 30px; }
@media (max-width: 960px) { .piede__griglia { padding-top: 34px; padding-bottom: 26px; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); } }
.hero-pano:not(.hero-pano--pagina) .hero-pano__lead { max-width: 680px; }
.recapito { justify-content: flex-end; min-height: 150px; }
.recapito__valore--email { font-size: clamp(17px, 1.45vw, 21px); }
.recapito .freccia { display: none; }
@media (hover: hover) and (pointer: fine) { a.recapito:hover { translate: 0 -4px; box-shadow: 0 18px 36px -24px rgba(14, 21, 28, .55); } }
@media (max-width: 960px) { .recapito { min-height: 0; } }
@media (max-width: 700px) {
  .hero-pano--pagina .hero-pano__velo {
    background: linear-gradient(180deg, rgba(14, 21, 28, .3) 0%, rgba(14, 21, 28, .58) 30%, rgba(14, 21, 28, .88) 50%, rgba(14, 21, 28, .95) 100%);
  }
}

/* ════════════════════════════════════════════════════════════════════════
   SECONDA REVISIONE (20/10/2026): pagine interne ricche + pezzi della home lunga
   ════════════════════════════════════════════════════════════════════════ */

/* il numero della sezione (01, 02…) sopra il titolo, come le schede del design */
.numero-sezione {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
  font-family: var(--font-titoli); font-weight: 800; font-size: 15px; letter-spacing: .08em; color: var(--oro);
}
.numero-sezione::after { content: ""; width: 46px; height: 3px; border-radius: 2px; background: var(--giallo); }
h2 .numero-sezione { margin-bottom: 14px; }
.fascia-scura .numero-sezione { color: var(--giallo-vivo); }
.affiancati__testo .intesta__icona { margin-bottom: 12px; }

/* l'indice della pagina in fondo alla hero (gli accessi della home) */
.hero-pano--pagina { min-height: max(560px, calc(78svh - var(--altezza-testata))); }
.hero-pano--pagina .hero-pano__contenuto { padding-bottom: 40px; }
.accessi--indice { grid-template-columns: repeat(var(--colonne, 4), 1fr); }
.accessi--4 { --colonne: 4; } .accessi--5 { --colonne: 5; } .accessi--6 { --colonne: 6; }
.accessi--indice a { align-items: flex-start; font-size: 14.5px; min-height: 84px; padding: 16px 16px; gap: 10px; }
.accessi--indice a > img { width: 24px; height: 24px; flex: none; margin-top: 1px; }
.accessi__numero { font-family: var(--font-titoli); font-weight: 800; font-size: 13px; color: var(--giallo-vivo); flex: none; margin-top: 3px; }

/* schede con la foto del kit in testa */
.foto-cards { display: grid; grid-template-columns: repeat(var(--colonne, 3), 1fr); gap: 20px; }
.foto-cards--2 { --colonne: 2; } .foto-cards--3 { --colonne: 3; } .foto-cards--4 { --colonne: 4; } .foto-cards--5 { --colonne: 5; }
.foto-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--carta-chiara); border: 1.5px solid var(--linea); border-radius: 8px;
}
html.js .foto-card.reveal, .foto-card {
  transition: opacity .7s var(--ease-out) calc(var(--d, 0) * 80ms), transform .85s var(--ease-out) calc(var(--d, 0) * 80ms),
              translate .3s var(--ease-out), box-shadow .3s ease;
}
.foto-card__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--sabbia); }
.foto-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.foto-card__testo { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 6px 14px; padding: 20px 22px 22px; }
.foto-card__numero { grid-column: 1 / -1; font-family: var(--font-titoli); font-weight: 800; font-size: 13px; letter-spacing: .06em; color: var(--oro); }
.foto-card__testo img { width: 32px; height: 32px; }
.foto-card__testo p { font-size: 16.5px; line-height: 1.45; color: var(--testo); }
.foto-card__testo b { font-family: var(--font-titoli); font-weight: 700; color: var(--inchiostro); font-size: 17px; }
.foto-cards--rami .foto-card__img { aspect-ratio: 4 / 5; }
.foto-cards--rami .foto-card__testo { padding: 16px 16px 18px; align-items: center; }
.foto-cards--rami .foto-card__testo img { width: 28px; height: 28px; }
@media (hover: hover) and (pointer: fine) {
  .foto-card:hover { translate: 0 -5px; box-shadow: 0 22px 40px -26px rgba(14, 21, 28, .55); }
  .foto-card:hover .foto-card__img img { transform: scale(1.05); }
}

/* una foto grande accanto a due schede */
.foto-e-schede { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; align-items: stretch; }
.foto-e-schede__foto { border-radius: var(--raggio); overflow: hidden; min-height: 300px; background: var(--sabbia); }
.foto-e-schede__foto img { width: 100%; height: 100%; object-fit: cover; }
.griglia-schede--colonna { display: grid; grid-template-columns: 1fr; gap: 16px; }
.griglia-schede--tre { grid-template-columns: repeat(3, 1fr); }
.scheda__numero { display: block; }
.scheda--breve .scheda__numero { margin-bottom: 10px; }

/* la fascia scura con una foto al posto del simbolo */
.fascia-scura--foto .fascia-scura__griglia { grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.fascia-scura__foto { border-radius: var(--raggio); overflow: hidden; aspect-ratio: 4 / 3; background: #2a2e2c; }
.fascia-scura__foto img { width: 100%; height: 100%; object-fit: cover; }
.fascia-scura .griglia-schede { margin-top: 26px; }
.fascia-scura .scheda--chiara, .fascia-scura .scheda--sabbia { color: var(--testo); }
.fascia-scura .dopo { margin-top: 18px; }

/* passi in colonna (accanto a una foto) */
.passi--colonna { grid-template-columns: 1fr !important; gap: 18px; margin: 22px 0 26px; }

/* ── pezzi pronti per la home lunga (design v3): la fascia di numeri ── */
.numeri { display: grid; grid-template-columns: repeat(var(--colonne, 4), 1fr); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.numeri--3 { --colonne: 3; } .numeri--4 { --colonne: 4; }
.numeri li { padding: 26px 24px; display: grid; gap: 6px; align-content: start; }
.numeri li + li { border-left: 2px solid var(--giallo); }
.numeri__valore { font-family: var(--font-titoli); font-weight: 800; font-size: clamp(40px, 4.4vw, 62px); line-height: 1; letter-spacing: -0.03em; color: var(--inchiostro); font-variant-numeric: tabular-nums; }
.numeri__etichetta { font-size: 15.5px; line-height: 1.4; color: var(--testo-tenue); }
.fascia-scura .numeri { border-color: var(--linea-chiara); }
.fascia-scura .numeri__valore { color: var(--giallo-vivo); }
.fascia-scura .numeri__etichetta { color: rgba(255, 255, 255, .82); }

@media (max-width: 1100px) {
  .accessi--6 { --colonne: 3; }
  .accessi--6 li:nth-child(4) { border-left: 0; }
  .accessi--6 li:nth-child(n+4) { border-top: 1px solid rgba(255, 255, 255, .14); }
  .foto-cards--5 { --colonne: 3; }
}
@media (max-width: 960px) {
  .accessi--indice { --colonne: 2; }
  .accessi--indice li:nth-child(odd) { border-left: 0; }
  .accessi--indice li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .14); }
  .foto-cards--3, .foto-cards--4 { --colonne: 2; }
  .foto-e-schede { grid-template-columns: 1fr; }
  .foto-e-schede__foto { aspect-ratio: 16 / 10; min-height: 0; }
  .griglia-schede--tre { grid-template-columns: 1fr 1fr; }
  .fascia-scura--foto .fascia-scura__griglia { grid-template-columns: 1fr; gap: 26px; }
  .fascia-scura--foto .fascia-scura__foto { order: -1; aspect-ratio: 16 / 10; }
  .numeri { --colonne: 2 !important; }
  .numeri li:nth-child(odd) { border-left: 0; }
  .numeri li:nth-child(n+3) { border-top: 1px solid var(--linea); }
}
@media (max-width: 700px) {
  .hero-pano--pagina { min-height: calc(86svh - var(--altezza-testata)); }
  .accessi--indice { display: flex; }
  .accessi--indice li { flex: 0 0 auto; max-width: 74vw; border-top: 0 !important; }
  .accessi--indice li + li { border-left: 1px solid rgba(255, 255, 255, .14) !important; }
  .accessi--indice a { white-space: normal; min-height: 64px; width: 230px; padding: 12px 14px; font-size: 14px; }
  /* le schede con le foto: una riga che scorre col dito */
  .foto-cards {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 8px; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain;
  }
  .foto-cards::-webkit-scrollbar { display: none; }
  .foto-card { flex: 0 0 80%; scroll-snap-align: start; }
  .foto-cards--rami .foto-card { flex-basis: 62%; }
  .foto-card__testo { padding: 16px 16px 18px; }
  .griglia-schede--tre { grid-template-columns: 1fr; }
  .numeri { --colonne: 1 !important; }
  .numeri li { border-left: 0 !important; padding: 20px 4px; }
  .numeri li + li { border-top: 1px solid var(--linea); }
}
@media (prefers-reduced-motion: reduce) {
  .foto-card:hover { translate: none; }
  .foto-card:hover .foto-card__img img { transform: none; }
}

.fascia-scura .righe li > span:first-child { color: var(--bianco); }
.fascia-scura .righe li { color: rgba(255, 255, 255, .9); }
.scheda > svg.icona-wa { width: 44px; height: 44px; margin-bottom: 16px; color: var(--giallo); }

/* ════════════════════════════════════════════════════════════════════════
   HOME LUNGA (seconda revisione, 20/10/2026)
   ════════════════════════════════════════════════════════════════════════ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.occhiello { color: var(--oro); }
.icona-titolo { display: inline-block; width: 38px; height: 38px; vertical-align: -4px; margin-right: 12px; }
.icona-scura { display: inline-block; width: 40px; height: 40px; vertical-align: -4px; margin-right: 12px; filter: brightness(0) saturate(0); opacity: .82; }

/* 2 · la striscia dei vantaggi */
.punti--vantaggi { background: var(--carta); padding: 6px 0; }
.punti--vantaggi .punti__lista { border-color: rgba(201, 189, 168, .7); padding: 20px 0; }
.punti--vantaggi .punti__lista li { font-weight: 500; font-size: 16.5px; line-height: 1.35; justify-content: flex-start; padding: 0 30px; gap: 16px; }
.punti--vantaggi .punti__lista li:first-child { padding-left: 0; }
.punti--vantaggi .punti__lista li + li { border-left: 1px solid rgba(201, 189, 168, .9); }
.punti--vantaggi b { font-weight: 800; color: var(--inchiostro); }
.punti--vantaggi img { width: 40px; height: 40px; flex: none; }

/* 3 · servizi: la prima scheda su fondo antracite */
.servizio--scura { background: var(--antracite); border-color: var(--antracite); color: var(--bianco); }
.servizio--scura h3, .servizio--scura li { color: var(--bianco); }
.servizio--scura > p, .servizio--scura .servizio__numero { color: rgba(255, 255, 255, .78); }
.servizio--scura ul { border-top-color: rgba(255, 255, 255, .18); }
.servizio--scura .btn--contorno { color: var(--bianco); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8); }
.servizio--scura .btn--contorno .freccia { filter: invert(1); }
@media (hover: hover) and (pointer: fine) {
  .servizio--scura:hover .btn--contorno { color: var(--inchiostro); }
  .servizio--scura:hover .btn--contorno .freccia { filter: none; }
}

/* 5 · assicurazioni: l'icona accanto al titoletto delle foto */
.foto-scheda h3 { display: flex; align-items: center; gap: 10px; }
.foto-scheda h3 img { width: 26px; height: 26px; flex: none; }
.foto-scheda__img img { transition: transform .7s var(--ease-out); }
.assicurazioni .azioni { margin-top: 10px; }

/* 6 · elenco a frecce con testo: il grassetto prima dei due punti */
.elenco-frecce--testo a { font-weight: 400; font-family: var(--font-testo); font-size: 16px; line-height: 1.4; padding: 13px 0; }
.elenco-frecce--testo b { font-family: var(--font-titoli); font-weight: 700; color: var(--inchiostro); }

/* 7 · i tre passi nella fascia scura */
.passi--linea { margin-top: 36px; padding-top: 0; }
.fascia-scura .fascia-scura__griglia .btn { margin-top: 6px; }

/* 8 · etichette con l'icona */
.etichette--icone li { display: flex; align-items: flex-start; gap: 12px; font-weight: 500; font-family: var(--font-testo); font-size: 16px; line-height: 1.4; }
.etichette--icone li img { width: 24px; height: 24px; flex: none; margin-top: -1px; }
.etichette--icone b { font-family: var(--font-titoli); font-weight: 700; }
.etichette--colonna.etichette--icone { gap: 16px; }

/* 9 · i casi delle visure, come una tabella a due colonne */
.casi { border-top: 1px solid var(--linea); margin: 18px 0 22px; }
.casi li { display: grid; grid-template-columns: 1fr 22px 1fr; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--linea); font-size: 16px; line-height: 1.4; }
.casi .freccia { width: 20px; height: 20px; }
.casi__documento { font-family: var(--font-titoli); font-weight: 700; color: var(--inchiostro); }

/* 10 · cinque etichette in fila */
.etichette--cinque { gap: 12px 30px; }
.etichette--cinque li { min-width: 0; }

/* 11 · due foto piccole che si aprono grandi */
.foto-piccole { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.ingrandisci { display: block; border-radius: var(--raggio); overflow: hidden; aspect-ratio: 4 / 3; background: var(--sabbia); position: relative; touch-action: manipulation; }
.ingrandisci img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.ingrandisci::after {
  content: ""; position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(14, 21, 28, .55) url("../img/icone/10-espandi-piu.png") center / 16px no-repeat;
}
.ingrandisci:active { scale: .98; }
@media (hover: hover) and (pointer: fine) { .ingrandisci:hover img { transform: scale(1.05); } }
.lightbox {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px;
  background: rgba(14, 21, 28, .88); opacity: 0; transition: opacity .2s ease;
}
.lightbox.aperta { opacity: 1; transition: opacity .3s var(--ease-out); }
.lightbox img { max-width: min(1100px, 100%); max-height: 86vh; border-radius: var(--raggio); transform: scale(.96); transition: transform .3s var(--ease-out); }
.lightbox.aperta img { transform: none; }
.lightbox button {
  position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); right: 16px; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--giallo) url("../img/icone/11-riduci-meno.png") center / 18px no-repeat; touch-action: manipulation;
}
html.lightbox-aperta { overflow: hidden; }

/* 12 · i numeri: la cifra in oro, le stelle in CSS */
.numeri-sezione .numeri__valore { color: var(--oro); }
.titolo-piccolo { font-size: clamp(24px, 2.4vw, 32px); margin-bottom: 16px; }
.numeri__testo { display: flex !important; flex-direction: column-reverse; justify-content: flex-end; }
.numeri__valore--parole { font-size: clamp(24px, 2.3vw, 32px) !important; line-height: 1.15 !important; letter-spacing: -0.02em; }
.stelle { display: flex; gap: 3px; margin: 4px 0 2px; }
.stelle i { width: 17px; height: 17px; background: var(--giallo); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.numeri__link { margin-top: 16px; }

/* 13 · come funziona: le icone in un cerchio sabbia, i numeri grandi in oro, uniti da una riga */
.come-funziona h2 { color: var(--bianco); }
.tappe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 32px; position: relative; }
.tappe::before { content: ""; position: absolute; left: 32px; right: 32px; top: 32px; height: 1px; background: var(--linea-chiara); }
.tappe li { position: relative; display: grid; gap: 10px; align-content: start; }
.tappe__icona { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--sabbia); box-shadow: 0 0 0 8px var(--antracite); }
.tappe__icona img { width: 32px; height: 32px; }
.tappe__numero { font-family: var(--font-titoli); font-weight: 800; font-size: 34px; line-height: 1; color: var(--giallo-vivo); margin-top: 8px; }
.tappe p { color: rgba(255, 255, 255, .9); font-size: 17px; line-height: 1.5; }

/* 15 · dove siamo: l'indirizzo con l'icona, la mappa sotto a tutta larghezza */
.contatti__indirizzo--icona { display: flex; align-items: center; gap: 10px; }
.contatti__indirizzo--icona img { width: 26px; height: 26px; flex: none; }
#dove-siamo .mappa--larga { margin-top: 22px; min-height: 360px; }

@media (max-width: 960px) {
  .tappe { grid-template-columns: 1fr 1fr; gap: 28px 22px; }
  .tappe::before { display: none; }
  .casi li { grid-template-columns: 1fr 20px 1fr; }
}
@media (max-width: 700px) {
  .punti--vantaggi .punti__lista { grid-template-columns: 1fr !important; padding: 6px 0; }
  .punti--vantaggi .punti__lista li { flex-direction: row; text-align: left; padding: 14px 0; font-size: 15.5px; }
  .punti--vantaggi .punti__lista li + li { border-left: 0; border-top: 1px solid rgba(201, 189, 168, .9); }
  .punti--vantaggi img { width: 32px; height: 32px; }
  .casi li { grid-template-columns: 1fr; gap: 2px; padding: 12px 0; }
  .casi .freccia { display: none; }
  .casi__documento::before { content: "→ "; color: var(--oro); }
  .etichette--cinque { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; }
  .tappe { grid-template-columns: 1fr; gap: 20px; }
  .tappe li { grid-template-columns: 64px 1fr; column-gap: 16px; align-items: center; }
  .tappe__icona { grid-row: span 2; }
  .tappe__numero { margin-top: 0; font-size: 28px; }
  .numeri { --colonne: 2 !important; }
  .numeri li { border-left: 0 !important; padding: 18px 8px 18px 0; }
  .numeri li:nth-child(even) { border-left: 2px solid var(--giallo) !important; padding-left: 16px; }
  .numeri li:nth-child(n+3) { border-top: 1px solid var(--linea); }
  .numeri li + li { border-top: 0; }
  .numeri li:nth-child(n+3) { border-top: 1px solid var(--linea); }
  .numeri__valore { font-size: 40px; }
  .numeri__valore--parole { font-size: 21px !important; }
  .icona-titolo, .icona-scura { width: 30px; height: 30px; }
  .fascia-gialla .data-evidenza { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .ingrandisci:hover img { transform: none; }
  .lightbox img { transform: none; }
}

.elenco-frecce--testo a > span { flex: 1; }
@media (max-width: 700px) { .numeri__valore--parole { font-size: 19px !important; } }

/* ════════════════════════════════════════════════════════════════════════
   TERZA REVISIONE (20/10/2026): più spazio, più ordine. Una scala sola, in variabili,
   uguale su tutte le pagine (vince su tutti gli spazi scritti prima).
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --spazio-sezione: clamp(80px, 10vw, 148px);   /* sopra e sotto ogni sezione: 148 px da computer, 80 da telefono */
  --spazio-blocco: clamp(36px, 4.4vw, 64px);    /* fra l'intestazione della sezione e il suo contenuto */
  --spazio-elementi: clamp(20px, 2vw, 28px);    /* fra titolo, testo, elenco e pulsante */
  --gap-griglia: clamp(18px, 2.4vw, 32px);      /* fra le schede e le foto in griglia */
  --padding-scheda: clamp(24px, 2.6vw, 40px);   /* dentro le schede */
  --misura-testo: 64ch;                         /* righe di testo non troppo lunghe */
}

body { line-height: 1.6; }
p { text-wrap: pretty; }

/* le sezioni: blocchi ben staccati */
.sezione, .fascia-scura, .fascia-gialla,
.servizi, .assicurazioni, .pratiche, .imprese, .pagamenti, .agenzia, .faq, .contatti {
  padding-top: var(--spazio-sezione); padding-bottom: var(--spazio-sezione);
}
.sezione--stretta { padding-top: calc(var(--spazio-sezione) * .62); padding-bottom: calc(var(--spazio-sezione) * .62); }
/* due sezioni chiare (o due sabbia) una dopo l'altra: lo spazio non si raddoppia, le divide una riga */
.sezione:not(.sezione--sabbia):not(.fondo-sabbia) + .sezione:not(.sezione--sabbia):not(.fondo-sabbia),
.sezione.sezione--sabbia + .sezione.sezione--sabbia { padding-top: 0; }
.sezione:not(.sezione--sabbia):not(.fondo-sabbia) + .sezione:not(.sezione--sabbia):not(.fondo-sabbia) > .contenitore:first-child,
.sezione.sezione--sabbia + .sezione.sezione--sabbia > .contenitore:first-child { border-top: 1px solid var(--linea); padding-top: var(--spazio-sezione); }

/* l'intestazione della sezione: etichetta → titolo → testo, poi il contenuto */
.intesta { margin-bottom: var(--spazio-blocco); gap: clamp(28px, 5vw, 80px); }
.intesta--alta { margin-bottom: 0; }
.intesta__nota { font-size: 18px; line-height: 1.6; }
.intesta__nota p + p { margin-top: 14px; }
.intesta--alta .intesta__nota, .intesta--bassa .intesta__nota { width: min(540px, 44%); }
.titolo-sezione { margin-bottom: var(--spazio-blocco); }
.occhiello { margin-bottom: 18px; }
.numero-sezione { margin-bottom: 18px; }
h2 { line-height: 1.08; }

/* foto e testo affiancati */
.affiancati { gap: clamp(40px, 6.5vw, 104px); }
.affiancati__testo h2 { margin-bottom: 0; }
.affiancati__testo > * + * { margin-top: var(--spazio-elementi); }
.affiancati__testo > h2 + p, .affiancati__testo > h2 + .sottotitolo { margin-top: 18px; }
.affiancati__testo p, .fascia-scura__testo, .fascia-gialla p, .contatti__testo > p, .hero-pano__lead, .dopo { max-width: var(--misura-testo); }
.affiancati__testo p + p { margin-top: 14px; }
.sottotitolo { margin-bottom: 0; }
.pratiche__foto, .pagamenti__foto, .contatti__riquadro { margin-left: 0; margin-inline: 0; }

/* elenchi: più aria fra le voci */
.lista-icone { gap: 18px; margin: 0; }
.lista-icone li { line-height: 1.55; }
.elenco-frecce a { padding: 16px 0; }
.casi li { padding: 16px 0; }
.etichette { margin: 0; gap: 16px 36px; }
.etichette--colonna.etichette--icone { gap: 20px; }
.righe { margin: 0; }
.righe li { padding: 14px 0; }
.azioni { margin-top: var(--spazio-elementi); gap: 18px 32px; }
.affiancati__testo > .azioni, .contatti__testo .azioni { margin-top: calc(var(--spazio-elementi) + 8px); }
.dopo, .sezione > .contenitore > p.dopo { margin-top: var(--spazio-elementi); }

/* griglie e schede: più distanza fuori, più padding dentro */
.servizi-griglia, .griglia-schede, .foto-cards, .riga-foto, .rami, .foto-e-schede { gap: var(--gap-griglia); }
.servizio { padding: var(--padding-scheda); }
.servizio ul { margin: 22px 0 30px; padding-top: 22px; gap: 12px; }
.scheda, .griglia-schede .scheda { padding: var(--padding-scheda); }
.scheda--breve .scheda__icona { margin-bottom: 20px; }
.scheda--breve .scheda__numero { margin-bottom: 14px; }
.foto-card__testo { padding: 24px 26px 28px; }
.foto-scheda__img { margin-bottom: 20px; }
.foto-scheda h3 { margin-bottom: 8px; }
.riga-foto { margin-bottom: var(--spazio-elementi); }
.punti--testo .punti__lista li { padding-top: 10px; padding-bottom: 10px; }
.passi--griglia { margin-top: var(--spazio-blocco); gap: clamp(24px, 3vw, 44px); }
.passi--colonna { margin: var(--spazio-elementi) 0; }
.passi__testo { line-height: 1.6; }
.tappe { margin-top: var(--spazio-blocco); gap: clamp(24px, 3vw, 44px); }

/* fasce piene */
.fascia-gialla__griglia { gap: clamp(32px, 6vw, 96px); align-items: center; }
.fascia-gialla p + p { margin-top: 14px; }
.fascia-gialla h2 { margin-bottom: 22px; }
.fascia-gialla .btn, .fascia-gialla .azioni { margin-top: var(--spazio-elementi); }
.fascia-scura h2 { margin-bottom: 20px; }
.fascia-scura__testo + .fascia-scura__testo { margin-top: 12px; }
.fascia-scura__testo { margin-bottom: 0; }
.fascia-scura__griglia .btn, .fascia-scura__griglia .azioni, .fascia-scura .lista-icone { margin-top: var(--spazio-elementi); }
.fascia-scura .griglia-schede { margin-top: var(--spazio-blocco); }
.fascia-scura--foto .fascia-scura__griglia { gap: clamp(36px, 6vw, 96px); }
.passi--linea { margin-top: var(--spazio-blocco); }

/* numeri, domande, contatti */
.punti--vantaggi { padding: 28px 0; }
.punti--vantaggi .punti__lista { padding: 26px 0; }
.numeri li { padding: 34px 30px; gap: 8px; }
.numeri__link { margin-top: 28px; }
.titolo-piccolo { margin-bottom: 28px; }
.faq__griglia { gap: clamp(32px, 6vw, 96px); }
.faq__elenco { gap: 14px; }
.domanda summary { padding: 20px 26px; }
.domanda p { padding: 0 26px 22px; max-width: var(--misura-testo); }
.contatti__testo { padding: clamp(32px, 4.4vw, 68px); }
.contatti__testo h2 { margin-bottom: 18px; }
.contatti__testo .righe { margin: 24px 0 8px; }
#dove-siamo .mappa--larga, .contenitore > .mappa--larga, .reveal > .mappa--larga { margin-top: var(--gap-griglia); }
.raggiungerci { gap: clamp(40px, 5vw, 80px); }
.raggiungerci__testo > * + * { margin-top: 16px; }
.raggiungerci__foto { margin-top: var(--spazio-elementi); }
.recapito { gap: 8px; }

/* pagine semplici */
.pagina-testo { padding: calc(var(--spazio-sezione) * .7) 0 var(--spazio-sezione); }
.pagina-testo .contenitore { max-width: 780px; }
.pagina-testo h2 { margin: 48px 0 14px; }
.pagina-testo p, .pagina-testo li { line-height: 1.7; }
.pagina-404 { padding: var(--spazio-sezione) 0; }

/* piede */
.piede__griglia { padding: clamp(56px, 6vw, 88px) 0 clamp(40px, 4vw, 56px); gap: clamp(32px, 5vw, 72px); }
.piede__marchio p + p { margin-top: 4px; }
.piede > .piede__fondo { padding-top: 24px; padding-bottom: 28px; }

@media (max-width: 960px) {
  .intesta--alta .intesta__nota, .intesta--bassa .intesta__nota { width: auto; }
  .intesta { gap: 20px; }
  .affiancati, .affiancati--inverso { gap: 36px; }
  .fascia-gialla__griglia { gap: 24px; }
  .faq__griglia { gap: 28px; }
  .contatti__riquadro .contatti__testo { padding: 32px 24px 36px; }
  .piede__griglia { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
}
@media (max-width: 600px) {
  body { font-size: 16.5px; }
  .intesta__nota, .intesta--bassa .intesta__nota { font-size: 16.5px; }
  .domanda summary { padding: 18px 18px; }
  .domanda p { padding: 0 18px 20px; }
  .servizio ul { margin: 18px 0 24px; padding-top: 18px; }
  .numeri li { padding: 22px 8px 22px 0; }
  .numeri li:nth-child(even) { padding-left: 18px; }
  .foto-card__testo { padding: 20px 20px 22px; }
  .punti--vantaggi { padding: 16px 0; }
}

/* ── pezzi delle pagine nuove (/agenzia, /domande-frequenti) e menu a 4 voci ── */
.menu-telefono__altre--prima { margin: 0 0 22px; }
@media (max-width: 1180px) and (min-width: 961px) { .testata__cta { display: none; } .testata__centro { margin-right: 0; } }
.galleria { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-griglia); }
.galleria .ingrandisci { aspect-ratio: 4 / 3; }
.valori { display: grid; grid-template-columns: repeat(var(--colonne, 3), 1fr); gap: var(--gap-griglia); }
.valori--2 { --colonne: 2; } .valori--3 { --colonne: 3; } .valori--4 { --colonne: 4; }
.valore { padding: var(--padding-scheda); background: var(--carta-chiara); border: 1.5px solid var(--linea); border-radius: 8px; }
.valore__icona { width: 44px; height: 44px; margin-bottom: 20px; }
.valore h3 { font-size: 22px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 3px solid var(--giallo); display: inline-block; }
.valore p { font-size: 16.5px; line-height: 1.6; color: var(--testo-tenue); }
.indice-argomenti { padding: calc(var(--spazio-sezione) * .5) 0 0; }
.indice-argomenti ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.indice-argomenti a {
  display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-radius: 8px; text-decoration: none;
  background: var(--carta-chiara); border: 1.5px solid var(--linea); color: var(--inchiostro);
  font-family: var(--font-titoli); font-weight: 700; font-size: 16px; touch-action: manipulation;
  transition: border-color .2s ease, translate .25s var(--ease-out);
}
.indice-argomenti a img { width: 28px; height: 28px; flex: none; }
.indice-argomenti__conta { margin-left: auto; font-size: 13px; color: var(--oro); }
.indice-argomenti a:active { scale: .98; }
@media (hover: hover) and (pointer: fine) { .indice-argomenti a:hover { border-color: var(--giallo); translate: 0 -3px; } }
@media (max-width: 960px) { .galleria { grid-template-columns: 1fr 1fr; } .valori { --colonne: 1 !important; } }
@media (max-width: 600px) { .indice-argomenti ul { grid-template-columns: 1fr; gap: 10px; } }
/* con più aria le foto affiancate crescono un po', così testo e foto restano in equilibrio */
@media (min-width: 961px) {
  .affiancati__foto { aspect-ratio: 3 / 2 !important; }
  .imprese__foto, .agenzia__foto { aspect-ratio: 16 / 10 !important; }
}
.piede { border-top: 1px solid var(--linea); }
.piede__griglia { padding-top: clamp(48px, 5vw, 72px); }

/* ── pagine nuove col copy della terza revisione: /agenzia e /domande-frequenti ── */
.hero-pano .occhiello--giallo { color: var(--giallo-vivo); margin-bottom: 16px; }
/* sei ambiti: schede piccole cliccabili */
.ambiti { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-griglia); }
.ambito a {
  display: grid; grid-template-columns: 1fr auto; align-content: start; gap: 6px 14px; height: 100%;
  padding: var(--padding-scheda); border-radius: 8px; background: var(--carta-chiara); border: 1.5px solid var(--linea);
  text-decoration: none; color: var(--testo); font-size: 16.5px; line-height: 1.55; touch-action: manipulation;
  transition: translate .3s var(--ease-out), box-shadow .3s ease, border-color .25s ease;
}
.ambito__icona { grid-column: 1 / -1; width: 46px; height: 46px; margin-bottom: 14px; }
.ambito b { grid-column: 1; font-family: var(--font-titoli); font-size: 20px; font-weight: 700; color: var(--inchiostro); }
.ambito span { grid-column: 1; }
.ambito .freccia { grid-column: 2; grid-row: 2 / span 2; align-self: end; }
.ambito a:active { scale: .985; }
@media (hover: hover) and (pointer: fine) {
  .ambito a:hover { translate: 0 -5px; box-shadow: 0 22px 40px -26px rgba(14, 21, 28, .5); border-color: rgba(237, 180, 18, .7); }
  .ambito a:hover .freccia { transform: translateX(4px); }
}
/* la sede: testo e tre foto */
.sede { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.sede__testo > * + * { margin-top: var(--spazio-elementi); }
.sede__testo p + p { margin-top: 12px; }
.sede__stanze { display: grid; gap: 14px; border-top: 1px solid var(--linea); padding-top: 18px; }
.sede__stanze li { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: baseline; font-size: 17px; line-height: 1.5; padding-bottom: 14px; border-bottom: 1px solid var(--linea); }
.sede__numero { font-family: var(--font-titoli); font-weight: 800; font-size: 15px; color: var(--oro); }
.galleria--sede { grid-template-columns: 1fr 1fr; }
.galleria--sede li:first-child { grid-column: 1 / -1; }
.galleria--sede li:first-child .ingrandisci { aspect-ratio: 16 / 9; }
/* colonna centrata */
.colonna-centrata { max-width: 680px; margin-inline: auto; text-align: center; }
.colonna-centrata .intesta__icona { margin-inline: auto; }
.colonna-centrata h2 { margin-bottom: 22px; }
.colonna-centrata p + p { margin-top: 14px; }
.colonna-centrata p { font-size: 18px; line-height: 1.65; }
/* il metodo: tre colonne con l'icona in un cerchio */
.metodo { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 64px); }
.metodo li { display: grid; gap: 22px; align-content: start; }
.metodo .tappe__icona { box-shadow: none; }
.metodo p { font-size: 17.5px; line-height: 1.6; max-width: 34ch; }
/* recensioni */
.recensioni__voto { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 6px 0 20px; }
.recensioni__voto .numeri__valore { font-family: var(--font-titoli); font-weight: 800; font-size: clamp(64px, 7vw, 96px); line-height: 1; color: var(--oro); }
.recensioni__voto .stelle i { width: 22px; height: 22px; }
.recensioni h2 { margin-bottom: 8px; }
.recensioni .link-freccia { margin-top: 10px; }
/* orari dell'agenzia */
.orari-agenzia { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: end; }
.orari-agenzia h2 { margin-bottom: 24px; }
.orari-agenzia__frase { font-size: 18px; line-height: 1.6; max-width: 46ch; }
.orari-agenzia__frase a { color: var(--inchiostro); text-decoration-color: var(--giallo); text-underline-offset: 3px; }
/* domande frequenti */
.faq__altre { margin-top: 10px; }
.faq-argomento .faq__griglia > div:first-child h2 { font-size: clamp(28px, 2.8vw, 40px); }
.faq-argomento--accento .faq__elenco { border-left: 4px solid var(--giallo); padding-left: 22px; }
.azioni--centro { justify-content: center; }
.indice-argomenti { padding-bottom: 0; }
.indice-argomenti + .faq-argomento { padding-top: calc(var(--spazio-sezione) * .7); }
@media (max-width: 960px) {
  .ambiti { grid-template-columns: 1fr 1fr; }
  .sede, .orari-agenzia { grid-template-columns: 1fr; }
  .metodo { grid-template-columns: 1fr; gap: 28px; }
  .metodo li { grid-template-columns: 64px 1fr; align-items: center; gap: 18px; }
}
@media (max-width: 600px) {
  .ambiti { grid-template-columns: 1fr; }
  .colonna-centrata { text-align: left; }
  .colonna-centrata .intesta__icona { margin-inline: 0; }
  .colonna-centrata p { font-size: 16.5px; }
  .faq-argomento--accento .faq__elenco { padding-left: 14px; }
  .azioni--centro { justify-content: stretch; }
}
.indice-argomenti ul { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .indice-argomenti ul { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .indice-argomenti ul { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════════════
   TEMA SCURO (richiesta di Domenico, 22/10/2026): il pulsante nell'intestazione.
   La prima volta segue il telefono o il computer; la scelta col pulsante resta (main.js).
   Lo script in testa alla pagina scrive data-tema su <html> prima del CSS: niente lampo chiaro.
   ════════════════════════════════════════════════════════════════════════ */

/* ── il pulsante: la luna (passa allo scuro), il sole (torna al chiaro) ── */
.tema {
  flex: none; position: relative; display: inline-grid; place-items: center;
  width: 46px; height: 46px; padding: 0; border-radius: 50%;
  background: transparent; color: var(--inchiostro);
  border: 1.5px solid var(--linea); cursor: pointer;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color .18s ease, border-color .18s ease, transform .14s var(--ease-out);
}
.tema svg {
  grid-area: 1 / 1; width: 21px; height: 21px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: opacity .3s var(--ease-out), transform .5s var(--ease-out);
}
.tema__sole { opacity: 0; transform: rotate(-90deg) scale(.5); }
html[data-tema="scuro"] .tema__luna { opacity: 0; transform: rotate(90deg) scale(.5); }
html[data-tema="scuro"] .tema__sole { opacity: 1; transform: none; }
.tema:active { transform: scale(.92); }
@media (hover: hover) and (pointer: fine) {
  .tema:hover { border-color: var(--giallo); background: var(--sabbia); }
  .tema:hover .tema__luna { transform: rotate(-14deg); }
  html[data-tema="scuro"] .tema:hover .tema__sole { transform: rotate(45deg); }
}
@media (max-width: 960px) {
  .tema { width: 44px; height: 44px; margin-left: auto; }
  .tema svg { width: 20px; height: 20px; }
}

/* il logo: la versione con le lettere chiare si vede solo nel tema scuro */
.logo-scuro { display: none; }
html[data-tema="scuro"] .logo-chiaro { display: none; }
html[data-tema="scuro"] .logo-scuro { display: block; }

/* il cambio di tema: niente transizioni a metà; col browser che lo permette, un cerchio che si allarga dal pulsante */
html.tema-cambio *, html.tema-cambio *::before, html.tema-cambio *::after { transition: none !important; }
html.tema-cambio .tema svg { transition: opacity .3s var(--ease-out), transform .5s var(--ease-out) !important; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ── la tavolozza scura: gli stessi nomi, valori nuovi (antracite e inchiostro del kit, l'oro schiarito per leggersi) ── */
html { color-scheme: light; }
html[data-tema="scuro"] {
  color-scheme: dark;
  --carta: #121514;
  --carta-chiara: #1C201F;
  --sabbia: #181C1B;
  --antracite: #0B0E0D;
  --inchiostro: #F2EEE6;
  --testo: #DEDAD2;
  --testo-tenue: #ABA79F;
  --oro: #D9AD4F;
  --linea: rgba(255, 255, 255, .13);
  --linea-chiara: rgba(255, 255, 255, .22);
  --ombra-scheda: rgba(0, 0, 0, .45);
}

/* le superfici gialle (fasce, pulsanti, evidenziati) restano come nel tema chiaro: testo scuro sul giallo */
html[data-tema="scuro"] :is(.fascia-gialla, .btn--giallo, .evidenza) {
  --carta: #FAF9F5; --carta-chiara: #FCFAF6; --sabbia: #F2EFEA; --antracite: #1E2120;
  --inchiostro: #0E151C; --testo: #23272B; --testo-tenue: #474B52; --oro: #8F6A24;
  --linea: rgba(30, 33, 32, .14);
}
html[data-tema="scuro"] .evidenza { color: var(--inchiostro); }

/* le fasce scure: un gradino sotto la pagina, con un filo che le stacca */
html[data-tema="scuro"] .fascia-scura { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -1px 0 rgba(255, 255, 255, .06); }
html[data-tema="scuro"] .scheda--scura { outline: 1.5px solid rgba(237, 180, 18, .45); outline-offset: -1.5px; }
html[data-tema="scuro"] .servizio--scura { border-color: rgba(237, 180, 18, .45); }
html[data-tema="scuro"] .fascia-scura__foto { background: #1C201F; }

/* le icone nei cerchi: un disco appena più chiaro, col filo d'oro */
html[data-tema="scuro"] .tappe__icona { background: #1F2423; box-shadow: 0 0 0 8px var(--antracite), inset 0 0 0 1px rgba(237, 180, 18, .4); }
html[data-tema="scuro"] .metodo .tappe__icona { box-shadow: inset 0 0 0 1px rgba(237, 180, 18, .4); }

/* la freccia antracite diventa chiara; sul giallo resta scura */
html[data-tema="scuro"] .freccia[src*="antracite"] { filter: invert(1); }
html[data-tema="scuro"] :is(.btn--giallo, .fascia-gialla) .freccia[src*="antracite"] { filter: none; }

/* il pulsante scuro (404) resta scuro, un gradino sopra la pagina e col filo; sul giallo resta com'è */
html[data-tema="scuro"] .btn--scuro { background: #262B29; color: var(--inchiostro); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16); }
html[data-tema="scuro"] .fascia-gialla .btn--scuro { background: var(--antracite); color: var(--bianco); box-shadow: none; }

/* i pulsanti col bordo, che col mouse diventano gialli: il testo torna scuro */
@media (hover: hover) and (pointer: fine) {
  html[data-tema="scuro"] .btn--scuro:hover { background: #2F3532; box-shadow: inset 0 0 0 1.5px var(--giallo), 0 10px 24px -14px rgba(0, 0, 0, .9); }
  html[data-tema="scuro"] .fascia-gialla .btn--scuro:hover { background: var(--inchiostro); box-shadow: 0 10px 24px -14px rgba(14, 21, 28, .8); }
  html[data-tema="scuro"] .btn--contorno:hover,
  html[data-tema="scuro"] .servizio:hover .btn--contorno { color: #0E151C; }
  html[data-tema="scuro"] .btn--contorno:hover .freccia[src*="antracite"],
  html[data-tema="scuro"] .servizio:hover .btn--contorno .freccia[src*="antracite"] { filter: none; }
  html[data-tema="scuro"] .fascia-gialla .btn--contorno:hover { color: var(--bianco); }
  html[data-tema="scuro"] .fascia-gialla .btn--contorno:hover .freccia[src*="antracite"] { filter: invert(1); }
}

/* la tendina «Servizi» e le voci al passaggio: un velo chiaro al posto della sabbia */
html[data-tema="scuro"] .tendina { background: #1C201F; border-color: rgba(255, 255, 255, .1); box-shadow: 0 26px 54px -22px rgba(0, 0, 0, .85); }
html[data-tema="scuro"] .tendina a[aria-current="page"], html[data-tema="scuro"] .tendina a:active { background: rgba(255, 255, 255, .07); }
html[data-tema="scuro"] .testata__apri:active { background: rgba(255, 255, 255, .08); }
@media (hover: hover) and (pointer: fine) {
  html[data-tema="scuro"] .tendina a:hover { background: rgba(255, 255, 255, .07); }
  html[data-tema="scuro"] .tema:hover { background: rgba(255, 255, 255, .06); }
}

/* la striscia dei vantaggi: le righe sabbia diventano fili chiari */
html[data-tema="scuro"] .punti--vantaggi .punti__lista { border-color: rgba(255, 255, 255, .14); }
html[data-tema="scuro"] .punti--vantaggi .punti__lista li + li { border-color: rgba(255, 255, 255, .16); }

/* le ombre: sul fondo scuro servono più nere */
html[data-tema="scuro"] .testata.scorsa { box-shadow: 0 1px 0 var(--linea), 0 12px 30px -20px rgba(0, 0, 0, .9); }
html[data-tema="scuro"] .whatsapp { box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .9); }
@media (hover: hover) and (pointer: fine) {
  html[data-tema="scuro"] .scheda:hover,
  html[data-tema="scuro"] .servizio:hover,
  html[data-tema="scuro"] .foto-card:hover,
  html[data-tema="scuro"] .ambito a:hover,
  html[data-tema="scuro"] a.recapito:hover { box-shadow: 0 26px 46px -24px rgba(0, 0, 0, .9); }
}
@media (max-width: 700px) {
  html[data-tema="scuro"] .punti--vantaggi .punti__lista li + li { border-color: rgba(255, 255, 255, .14); }
}

/* ════════════════════════════════════════════════════════════════════════
   GIRO 1 DEL COLLAUDO E DELL'AUDIT (23/10/2026) — solo disposizione e colori: i testi non cambiano
   ════════════════════════════════════════════════════════════════════════ */

/* M1 · nel tema chiaro i collegamenti «gialli» su crema e sabbia si leggono come gli altri: testo scuro, filo giallo
   (era #EDB412 su #FAF9F5 e #F2EFEA, 1,6-1,8:1). Nel tema scuro restano gialli. */
html:not([data-tema="scuro"]) .link-freccia--giallo { color: var(--inchiostro); }

/* P1 · il numero della parte sulla fascia gialla: scuro, con la sua lineetta (era oro su giallo, 2,6:1) */
.fascia-gialla .numero-sezione { color: var(--inchiostro); }
.fascia-gialla .numero-sezione::after { background: var(--inchiostro); }

/* P3 · i numeri di telefono e di WhatsApp dentro le frasi non vanno a capo a metà («081 213 / 33 85») */
p a[href^="tel:"]:not(.btn), p a[href^="https://wa.me/"]:not(.btn), li a[href^="tel:"]:not(.btn) { white-space: nowrap; }

/* audit A-P10 · un nome lunghissimo in alto nella Home va a capo invece di uscire dallo schermo */
.hero-pano__nome { overflow-wrap: anywhere; }

/* P2 · righe di pulsanti a 1440: in «Orari dello sportello» (fascia scura) uno sotto l'altro, mai 1 + 2; in Home,
   «L'agenzia in Via Roma 51», le tre etichette una sotto l'altra (su una riga non ci stanno: erano 2 + 1) */
.fascia-scura .azioni { flex-direction: column; align-items: flex-start; gap: 16px; }
.agenzia .etichette { flex-direction: column; align-items: flex-start; gap: 12px; }

@media (max-width: 700px) {
  /* C1 e M3 · le schede con la foto da telefono: l'icona accanto al numero, il testo su tutta la larghezza della scheda,
     e la scheda un po' più larga nella riga che scorre */
  .foto-card { flex-basis: 86%; }
  .foto-card__testo { grid-template-columns: auto 1fr; align-items: center; gap: 8px 12px; }
  .foto-card__testo .foto-card__numero { grid-column: auto; }
  .foto-card__testo img { grid-row: 1; grid-column: 1; }
  .foto-card__testo .foto-card__numero { grid-row: 1; grid-column: 2; }
  .foto-card__testo p { grid-column: 1 / -1; font-size: 16px; }
  /* M3 · «Il nostro modo di lavorare»: l'icona sopra e il testo su tutta la larghezza */
  .metodo li { grid-template-columns: 1fr; align-items: start; gap: 14px; }
  .metodo p { max-width: none; }
  /* M3 · le schede di solo testo (Rottamazione «Cosa si paga», «Quando decade»): meno margine dentro, testo un po' più piccolo */
  .griglia-schede .scheda { padding: 22px 20px 24px; }
  .foto-cards--2 .foto-card { flex-basis: 90%; }
  .griglia-schede .scheda--breve p { font-size: 16px; }
  .foto-card__testo { padding: 16px 16px 18px; }
  .scheda--testo p { font-size: 18px !important; }
  /* M3 · i titoli lunghi: in alto nelle pagine e sulla fascia gialla della Home */
  .hero-pano--pagina h1 { font-size: clamp(30px, 8.4vw, 40px); }
  .fascia-gialla h2 { font-size: clamp(26px, 7.4vw, 32px); }
}

/* ════════════════════════════════════════════════════════════════════════
   RIPROVA DELL'AUDIT DEL PANNELLO (23/10/2026) — solo per i testi lunghissimi: coi valori di oggi non cambia niente
   ════════════════════════════════════════════════════════════════════════ */
/* A-P10 · il nome dell'attività con una parola lunghissima (l'occhiello di «L'agenzia in Via Roma 51» in Home) va a capo
   invece di allargare la pagina; lo stesso, a 320 px, per una parola lunga nelle pagine legali */
.occhiello { overflow-wrap: anywhere; }
.pagina-testo p, .pagina-testo li { overflow-wrap: break-word; }

/* ════════════════════════════════════════════════════════════════════════
   TORNATA DI MODIFICHE DEL 23/10/2026 (Modifiche/2026-10-23.md)
   ════════════════════════════════════════════════════════════════════════ */

/* voce 7 · la freccetta «torna in cima»: sopra il pulsante WhatsApp fisso, con la sua misura, la sua ombra e i suoi
   margini; antracite con la freccia oro del kit girata in su. Compare dopo la prima schermata (main.js, .visibile),
   sparisce in cima e col menu del telefono aperto, come WhatsApp. Senza JavaScript non c'è (non servirebbe a niente). */
:root { --tasto-fisso: 58px; --margine-fisso: 18px; --fra-i-fissi: 12px; }
.in-cima {
  position: fixed; z-index: 45;
  right: calc(var(--margine-fisso) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--margine-fisso) + var(--tasto-fisso) + var(--fra-i-fissi) + env(safe-area-inset-bottom, 0px));
  width: var(--tasto-fisso); height: var(--tasto-fisso); min-width: 48px; min-height: 48px;
  padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: var(--antracite); color: var(--giallo);
  box-shadow: 0 10px 24px -10px rgba(14, 21, 28, .55);
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  transition: opacity .3s var(--ease-out), transform .35s var(--ease-out), background-color .18s ease, visibility 0s;
}
.in-cima__freccia { width: 26px; height: 26px; transform: rotate(-90deg); pointer-events: none; }
html:not(.js) .in-cima { display: none; }
.in-cima:not(.visibile), html.menu-aperto .in-cima {
  opacity: 0; transform: translateY(12px) scale(.92); pointer-events: none; visibility: hidden;
  transition: opacity .18s ease, transform .2s ease, visibility 0s .2s;
}
.in-cima.visibile:active { transform: scale(.94); transition-duration: .1s; }
@media (hover: hover) and (pointer: fine) { .in-cima.visibile:hover { background: var(--inchiostro); transform: translateY(-2px); } }
/* la scritta che compare col mouse, come quella di WhatsApp */
.in-cima__etichetta {
  position: absolute; right: calc(100% + 12px); top: 50%; white-space: nowrap;
  background: var(--antracite); color: var(--bianco); font-family: var(--font-titoli); font-weight: 600; font-size: 14px;
  padding: 8px 14px; border-radius: 4px; pointer-events: none;
  opacity: 0; transform: translate(6px, -50%); transition: opacity .18s ease, transform .2s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .in-cima.visibile:hover .in-cima__etichetta { opacity: 1; transform: translate(0, -50%); } }
@media (hover: none), (pointer: coarse) { .in-cima__etichetta { display: none; } }
/* tema scuro: un gradino sopra la pagina, col filo chiaro (come il pulsante scuro della 404) */
html[data-tema="scuro"] .in-cima { background: #262B29; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16), 0 10px 26px -10px rgba(0, 0, 0, .9); }
html[data-tema="scuro"] .in-cima__etichetta { background: #262B29; color: var(--inchiostro); }
@media (hover: hover) and (pointer: fine) {
  html[data-tema="scuro"] .in-cima.visibile:hover { background: #2F3532; box-shadow: inset 0 0 0 1.5px var(--giallo), 0 10px 26px -10px rgba(0, 0, 0, .9); }
}
@media (max-width: 600px) { :root { --tasto-fisso: 54px; --margine-fisso: 16px; } }
@media (prefers-reduced-motion: reduce) {
  .in-cima:not(.visibile), html.menu-aperto .in-cima, .in-cima.visibile:active { transform: none; }
  .in-cima.visibile:hover { transform: none; }
}

/* voce 7 · il fondo della pagina: sotto la riga legale e la firma c'è posto per i due pulsanti fissi (WhatsApp e la
   freccetta, coi loro margini), così a fine pagina non coprono la P.IVA né «Sito realizzato da OnlinePerTutti.com».
   Lo spazio sotto il testo è questo più i 22 px di .piede (e la zona sicura del telefono, già in .piede). */
.piede > .piede__fondo { padding-bottom: calc(var(--margine-fisso) + 2 * var(--tasto-fisso) + var(--fra-i-fissi) + 12px - 22px); }