/* sito-pubblico/public/stile.css — il kit grafico del sito pubblico (Phase 24, D-19).
   In parole semplici: grafica 1 a 1 dall'originale demolizioneferrarini.it, spostata una volta dal bozzetto approvato
   (anteprime/bozzetto-sito.html resta come storia). Colori e misure del sito stanno solo qui: ogni colore è scritto una
   volta sola, tra le variabili di :root; il resto del file le usa con var() o, per un colore trasparente, con
   color-mix(in srgb, var(--x) N%, transparent), che dà lo stesso identico colore. Restano scritti a mano solo il nero
   dell'ombra interna del nastro (una volta) e il grigio della freccia dei menu dentro l'indirizzo data: (lì var() non va). */
/* ===== Kit grafico del sito originale (variabili 1 a 1 da home.html) ===== */
:root {
  --primary-color: #1B2F52;
  --primary-dark: color-mix(in srgb, var(--primary-color) 80%, black);
  --secondary-color: #FFFFFF;
  --accent-color: #C41E3A;
  /* grigi di Tailwind usati dall'originale */
  --g50:#f9fafb; --g100:#f3f4f6; --g200:#e5e7eb; --g300:#d1d5db; --g400:#9ca3af; --g500:#6b7280;
  --g600:#4b5563; --g700:#374151; --g800:#1f2937; --g900:#111827; --g950:#030712;
  --verde50:#f0fdf4; --verde500:#22c55e; --verde600:#16a34a; --rosso50:#fef2f2; --rosso500:#ef4444;
  --verde-wa: #25D366; /* il verde di WhatsApp */
  --ombra-sm: 0 1px 2px 0 rgb(0 0 0 / .05);
  --ombra-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --ombra-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  --ombra-2xl: 0 25px 50px -12px rgb(0 0 0 / .25);
  /* le ombre delle schede e delle carte del nastro: normale e col mouse sopra */
  --ombra-scheda: 0 1px 3px rgb(0 0 0 / .08), 0 4px 12px rgb(0 0 0 / .04);
  --ombra-scheda-su: 0 4px 16px rgb(0 0 0 / .12), 0 8px 24px rgb(0 0 0 / .06);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: 'Inter', sans-serif; background: var(--g50); color: var(--g800);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
svg { flex-shrink: 0; }
.wrap7 { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
.wrap6 { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
.wrap4 { max-width: 56rem; margin: 0 auto; padding: 0 1rem; }
.nascosto { display: none !important; }

/* ===== Barra contatti (1 a 1) ===== */
.barra-contatti { background: var(--primary-dark); color: var(--secondary-color); font-size: .875rem; }
.barra-contatti .wrap7 { padding-top: .5rem; padding-bottom: .5rem; display: flex; align-items: center; justify-content: space-between; }
.barra-contatti .sx { display: flex; align-items: center; gap: 1.25rem; }
.barra-contatti a, .barra-contatti .indirizzo { display: flex; align-items: center; gap: .375rem; transition: color .15s; }
.barra-contatti a:hover { color: var(--g200); }
.barra-contatti svg { width: .875rem; height: .875rem; }
.barra-contatti .indirizzo { display: none; }
@media (min-width: 768px) { .barra-contatti .indirizzo { display: flex; } }

/* ===== Menu principale (1 a 1) ===== */
.menu { background: var(--secondary-color); box-shadow: var(--ombra-sm); position: sticky; top: 0; z-index: 50; }
.menu .riga { display: flex; align-items: center; justify-content: space-between; height: 4rem; }
.marchio { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.marchio .tondo { width: 2rem; height: 2rem; border-radius: 9999px; background: var(--g100); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.marchio .tondo img { width: 1.75rem; height: 1.75rem; object-fit: contain; }
.marchio .grande { display: none; height: 2.5rem; width: auto; object-fit: contain; }
.marchio span { font-size: 1rem; font-weight: 700; color: var(--g900); letter-spacing: -.025em; }
.voci { display: none; align-items: center; gap: 2rem; }
.voci a { font-size: .875rem; font-weight: 500; padding-bottom: .125rem; color: var(--g500); border-bottom: 2px solid transparent; transition: color .15s; }
.voci a:hover { color: var(--primary-color); }
.voci a.attiva { color: var(--primary-color); border-bottom-color: var(--primary-color); }
.tasto-menu { display: inline-flex; align-items: center; justify-content: center; padding: .5rem; border-radius: .375rem; color: var(--g500); background: none; border: 0; }
.tasto-menu:hover { color: var(--primary-color); background: var(--g100); }
.tasto-menu svg { width: 1.5rem; height: 1.5rem; }
.menu-tel { border-top: 1px solid var(--g100); }
.menu-tel div { padding: .75rem 1rem; display: grid; gap: .5rem; }
.menu-tel a { display: block; padding: .5rem .75rem; border-radius: .375rem; font-size: .875rem; font-weight: 500; color: var(--g600); }
.menu-tel a:hover { color: var(--primary-color); background: var(--g50); }
.menu-tel a.attiva { color: var(--primary-color); background: color-mix(in srgb, var(--primary-color) 5%, transparent); }
@media (min-width: 768px) {
  .marchio { gap: .75rem; } .marchio .tondo { display: none; } .marchio .grande { display: block; }
  .marchio span { font-size: 1.25rem; } .voci { display: flex; } .tasto-menu, .menu-tel { display: none !important; }
}

/* ===== Testata con ricerca (1 a 1) ===== */
.testata { position: relative; overflow: hidden; background: linear-gradient(to bottom right, var(--primary-color), var(--primary-dark)); }
.testata .griglia { position: absolute; inset: 0; opacity: .1; }
.testata .griglia svg { width: 100%; height: 100%; color: var(--secondary-color); }
.testata .dentro { position: relative; max-width: 56rem; margin: 0 auto; padding: 4rem 1rem; text-align: center; }
.testata h1 { font-size: 1.875rem; line-height: 1.25; font-weight: 700; color: var(--secondary-color); margin-bottom: 1rem; }
.testata p { font-size: 1.125rem; color: color-mix(in srgb, var(--secondary-color) 80%, transparent); margin: 0 auto 2.5rem; max-width: 42rem; }
.cerca-box { background: var(--secondary-color); border-radius: 1rem; box-shadow: var(--ombra-2xl); padding: .5rem; max-width: 42rem; margin: 0 auto; }
.linguette { display: flex; gap: .25rem; margin-bottom: .5rem; padding: 0 .25rem; }
.linguetta { flex: 1; padding: .5rem 1rem; font-size: .875rem; font-weight: 600; border-radius: .75rem; border: 0; transition: all .2s; background: var(--g100); color: var(--g600); }
.linguetta:hover { background: var(--g200); }
.linguetta.attiva { background: var(--primary-color); color: var(--secondary-color); }
.cerca-riga { display: flex; align-items: center; gap: .5rem; }
.campo { position: relative; flex: 1; min-width: 0; }
.campo svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 1.25rem; height: 1.25rem; color: var(--g400); pointer-events: none; }
.campo input { width: 100%; padding: .875rem 1rem .875rem 3rem; border-radius: .75rem; border: 0; background: var(--g50); color: var(--g800); font: inherit; font-size: .875rem; transition: all .15s; }
.campo input::placeholder { color: var(--g400); }
.campo input:focus { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 30%, transparent); background: var(--secondary-color); }
.tasto-cerca { flex-shrink: 0; background: var(--accent-color); color: var(--secondary-color); font-weight: 600; padding: .875rem 1.5rem; border-radius: .75rem; border: 0; font-size: .875rem; box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--accent-color) 25%, transparent), 0 4px 6px -4px color-mix(in srgb, var(--accent-color) 25%, transparent); transition: all .2s; }
.tasto-cerca:hover { filter: brightness(1.1); }
@media (min-width: 768px) {
  .testata .dentro { padding: 6rem 1rem; } .testata h1 { font-size: 3rem; } .testata p { font-size: 1.25rem; }
  .campo input, .tasto-cerca { font-size: 1rem; }
}

/* ===== Sezioni della home (1 a 1) ===== */
.sezione { padding: 4rem 0; }
.sezione.bianca { background: var(--secondary-color); } .sezione.grigia { background: var(--g50); }
.sezione h2 { font-size: 1.5rem; font-weight: 700; color: var(--g900); text-align: center; margin-bottom: .75rem; }
.sezione .sotto { color: var(--g500); text-align: center; max-width: 36rem; margin: 0 auto 3rem; }
@media (min-width: 768px) { .sezione { padding: 5rem 0; } .sezione h2 { font-size: 1.875rem; } }
.dove { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: stretch; }
@media (min-width: 1024px) { .dove { grid-template-columns: 1fr 1fr; } }
.scheda-contatti { background: var(--secondary-color); border-radius: 1rem; box-shadow: var(--ombra-sm); border: 1px solid var(--g100); padding: 2rem; display: flex; flex-direction: column; justify-content: center; }
.scheda-contatti h3 { font-size: 1.125rem; font-weight: 600; color: var(--g900); margin-bottom: 1.5rem; }
.scheda-contatti .voce { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.scheda-contatti .voce:last-child { margin-bottom: 0; }
.icona-q { flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: .75rem; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.icona-q svg { width: 1.25rem; height: 1.25rem; }
.icona-q.blu { background: color-mix(in srgb, var(--primary-color) 10%, transparent); color: var(--primary-color); }
.voce:hover .icona-q.blu { background: var(--primary-color); color: var(--secondary-color); }
.icona-q.verde { background: var(--verde50); color: var(--verde600); }
.voce:hover .icona-q.verde { background: var(--verde600); color: var(--secondary-color); }
.icona-q.rossa { background: var(--rosso50); color: var(--rosso500); }
.etichetta-p { font-size: .75rem; color: var(--g400); text-transform: uppercase; letter-spacing: .025em; font-weight: 500; }
.valore-p { color: var(--g800); font-weight: 500; }
.mappa { border-radius: 1rem; overflow: hidden; box-shadow: var(--ombra-sm); border: 1px solid var(--g100); min-height: 350px; }
.mappa iframe { width: 100%; height: 100%; min-height: 350px; border: 0; display: block; }
.spedizioni { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 3rem; }
.spedizioni div { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.5rem; border-radius: 1rem; border: 1px solid var(--g100); transition: all .3s; }
.spedizioni div:hover { border-color: color-mix(in srgb, var(--primary-color) 20%, transparent); box-shadow: var(--ombra-lg); }
.spedizioni svg { width: 1.25rem; height: 1.25rem; color: var(--verde500); }
.spedizioni span { font-size: .875rem; font-weight: 500; color: var(--g700); }
.pilastri { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .pilastri { grid-template-columns: repeat(3, 1fr); } }
.pilastro { text-align: center; padding: 2rem; border-radius: 1rem; border: 1px solid var(--g100); background: var(--secondary-color); transition: all .3s; }
.pilastro:hover { border-color: color-mix(in srgb, var(--primary-color) 20%, transparent); box-shadow: var(--ombra-lg); }
.pilastro .ic { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 1rem; margin-bottom: 1.5rem; transition: transform .15s; }
.pilastro:hover .ic { transform: scale(1.1); }
.pilastro .ic svg { width: 2rem; height: 2rem; }
.pilastro .ic.blu { background: color-mix(in srgb, var(--primary-color) 10%, transparent); color: var(--primary-color); }
.pilastro .ic.rossa { background: color-mix(in srgb, var(--accent-color) 10%, transparent); color: var(--accent-color); }
.pilastro .ic.verde { background: var(--verde50); color: var(--verde600); }
.pilastro h3 { font-size: 1.125rem; font-weight: 600; color: var(--g900); margin-bottom: .5rem; }
.pilastro p { color: var(--g500); font-size: .875rem; line-height: 1.625; }

/* ===== Piè di pagina (1 a 1) ===== */
.piede { background: linear-gradient(to bottom, var(--g900), var(--g950)); color: var(--g300); }
.piede .wrap6 { padding-top: 3rem; padding-bottom: 3rem; }
.piede .colonne { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-bottom: 2.5rem; }
@media (min-width: 768px) { .piede .wrap6 { padding-top: 4rem; padding-bottom: 4rem; } .piede .colonne { grid-template-columns: repeat(3, 1fr); } }
.piede .marca-piede { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.piede .marca-piede img { height: 2.5rem; width: auto; object-fit: contain; border-radius: .25rem; }
.piede .marca-piede span { font-size: 1.25rem; font-weight: 700; color: var(--secondary-color); }
.piede p { font-size: .875rem; color: var(--g400); line-height: 1.625; }
.piede h4 { color: var(--secondary-color); font-weight: 600; margin-bottom: 1rem; }
.piede ul { list-style: none; margin: 0; padding: 0; font-size: .875rem; display: grid; gap: .5rem; }
.piede ul.contatti { gap: .75rem; }
.piede li { display: flex; align-items: flex-start; gap: .5rem; }
.piede li svg { width: 1rem; height: 1rem; color: var(--g500); margin-top: .125rem; }
.piede a:hover { color: var(--secondary-color); }
.piede .copy { border-top: 1px solid var(--g800); padding-top: 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: .75rem; font-size: .75rem; color: var(--g500); }
.piede .copy b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.125rem; }
@media (min-width: 768px) { .piede .copy { flex-direction: row; } }

/* ===== site.css originale (1 a 1) ===== */
.thumb-item { cursor: pointer; border: 3px solid transparent; border-radius: .75rem; overflow: hidden; transition: border-color .2s, opacity .2s; flex-shrink: 0; }
.thumb-item:hover { opacity: .85; }
.thumb-item.active { border-color: var(--accent-color); }
.auto-carousel { position: relative; overflow: hidden; padding: 12px 0 20px; margin: -12px 0 -20px;
  box-shadow: inset 24px 0 20px -20px rgb(0 0 0 / .06), inset -24px 0 20px -20px rgb(0 0 0 / .06); }
.auto-carousel-track { display: flex; gap: 1rem; width: max-content; animation: autoCarouselScroll var(--carousel-duration, 40s) linear infinite; }
.auto-carousel-track--reverse { animation-direction: reverse; }
.auto-carousel-track.paused { animation-play-state: paused; }
.auto-carousel-card { flex-shrink: 0; width: 240px; cursor: pointer; border-radius: 1rem; overflow: hidden; background: var(--secondary-color);
  box-shadow: var(--ombra-scheda); transition: box-shadow .3s, transform .3s; }
.auto-carousel-card:hover { box-shadow: var(--ombra-scheda-su); transform: translateY(-2px); }
.auto-carousel-card a { pointer-events: none; }
.auto-carousel-card > a > div { box-shadow: none; border-radius: 0; overflow: visible; }
@keyframes autoCarouselScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@media (min-width: 640px) { .auto-carousel-card { width: 260px; } }
@media (min-width: 768px) { .auto-carousel-card { width: 280px; } }
.img-not-loaded { opacity: 0 !important; }
.img-loaded { transition: opacity .3s ease; }
.img-loader { position: absolute; inset: 0; z-index: 5; background: linear-gradient(90deg, var(--g100) 25%, var(--g200) 50%, var(--g100) 75%);
  background-size: 200% 100%; animation: imgShimmer 1.5s ease-in-out infinite; }
.img-loader-hide { opacity: 0; transition: opacity .3s ease; }
@keyframes imgShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ===== Filtri dell'elenco (1 a 1 da parts.html; le tendine Select2 rese con <select>) ===== */
.pagina { padding-top: 2rem; padding-bottom: 2rem; }
.filtri-box { max-width: 56rem; margin: 0 auto 2rem; background: var(--secondary-color); border-radius: 1rem; box-shadow: var(--ombra-lg), 0 0 0 1px var(--g100); overflow: hidden; }
.filtri-box .alto { padding: 1rem; background: color-mix(in srgb, var(--g50) 50%, transparent); }
.filtri-box .testa { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.filtri-box .testa svg { width: .875rem; height: .875rem; color: var(--g400); }
.filtri-box .testa span { font-size: .75rem; font-weight: 600; color: var(--g500); text-transform: uppercase; letter-spacing: .025em; }
/* adattamento: «Cancella tutto» è un link (piano 24-05), stesse regole del tasto dell'originale */
.filtri-box .testa button, .filtri-box .testa .cancella { margin-left: auto; font-size: .75rem; font-weight: 500; color: var(--g400); background: none; border: 0; padding: 0; }
.filtri-box .testa button:hover, .filtri-box .testa .cancella:hover { color: var(--g600); }
.filtri-griglia { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 640px) { .filtri-griglia { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .filtri-griglia { grid-template-columns: repeat(3, 1fr); } }
.filtri-griglia label { display: block; font-size: .75rem; font-weight: 500; color: var(--g500); margin-bottom: .25rem; }
.filtri-griglia select { width: 100%; height: 38px; border: none; background: var(--g50); border-radius: .5rem; padding: 0 2rem 0 .75rem;
  color: var(--g700); font: inherit; font-size: .875rem; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center; }
.filtri-griglia select:focus { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 30%, transparent); }
.filtri-box .divisore { border-top: 1px solid var(--g100); }
.filtri-box .basso { padding: 1rem; }
.filtri-box .campo svg { left: .875rem; width: 1rem; height: 1rem; }
.filtri-box .campo input { padding: .625rem 1rem .625rem 2.5rem; border: 1px solid var(--g200); font-size: .875rem; }
.filtri-box .campo input:focus { border-color: color-mix(in srgb, var(--primary-color) 40%, transparent); }
.filtri-box .tasto-cerca { padding: .625rem 1.5rem; font-size: .875rem; box-shadow: var(--ombra-md); }
@media (min-width: 768px) { .filtri-box .alto, .filtri-box .basso { padding: 1.25rem; } }
.titolo-pagina { margin-bottom: 2rem; }
.titolo-pagina h1 { font-size: 1.5rem; font-weight: 700; color: var(--g900); }
.titolo-pagina p { margin-top: .25rem; font-size: .875rem; color: var(--g500); }
@media (min-width: 768px) { .titolo-pagina h1 { font-size: 1.875rem; } }
.vuoto { text-align: center; padding: 5rem 0; }
.vuoto svg { margin: 0 auto 1rem; width: 4rem; height: 4rem; color: var(--g300); display: block; }
.vuoto p { color: var(--g500); font-size: 1.125rem; }
.vuoto .piccolo { font-size: .875rem; margin-top: .5rem; }
.tasto-secondario { display: inline-block; margin-top: 1.25rem; padding: .625rem 1.25rem; border-radius: .75rem; border: 1px solid var(--g200); background: var(--secondary-color); color: var(--g700); font-size: .875rem; font-weight: 600; }
.tasto-secondario:hover { border-color: var(--primary-color); color: var(--primary-color); }

/* ===== Schede (ricostruite: la forma esatta delle schede piene non è nell'originale) ===== */
.griglia-schede { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .griglia-schede { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .griglia-schede { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .griglia-schede { grid-template-columns: repeat(4, 1fr); } }
.scheda { display: block; background: var(--secondary-color); border-radius: 1rem; overflow: hidden; box-shadow: var(--ombra-scheda); transition: box-shadow .3s, transform .3s; height: 100%; }
a.scheda-link:hover .scheda { box-shadow: var(--ombra-scheda-su); transform: translateY(-2px); }
a.scheda-link { display: block; height: 100%; }
.photo-carousel { position: relative; aspect-ratio: 4 / 3; background: var(--g100); overflow: hidden; }
.photo-carousel img.carousel-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
.opacity-0 { opacity: 0; }
.carousel-prev, .carousel-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 2rem; height: 2rem; border-radius: 9999px; border: 0;
  background: color-mix(in srgb, var(--secondary-color) 85%, transparent); color: var(--g800); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; box-shadow: var(--ombra-md); }
.carousel-prev { left: .5rem; } .carousel-next { right: .5rem; }
.photo-carousel:hover .carousel-prev, .photo-carousel:hover .carousel-next { opacity: 1; }
@media (hover: none) { .carousel-prev, .carousel-next { opacity: 1; } }
.carousel-prev svg, .carousel-next svg { width: 1rem; height: 1rem; }
.carousel-dots { position: absolute; left: 0; right: 0; bottom: .5rem; z-index: 6; display: flex; justify-content: center; gap: .375rem; }
.carousel-dot { width: .5rem; height: .5rem; border-radius: 9999px; }
.bg-white { background: var(--secondary-color); } .bg-white-50 { background: color-mix(in srgb, var(--secondary-color) 50%, transparent); }
.foto-assente { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; color: var(--g400); font-size: .75rem; background: var(--g100); }
.foto-assente svg { width: 2rem; height: 2rem; }
.scheda .corpo { padding: 1rem; }
.scheda .cat { font-size: .75rem; font-weight: 600; color: var(--accent-color); text-transform: uppercase; letter-spacing: .025em; }
.scheda h3 { font-size: 1rem; font-weight: 600; color: var(--g900); margin-top: .25rem; line-height: 1.35; }
.scheda .auto-di { font-size: .875rem; color: var(--g500); margin-top: .25rem; line-height: 1.4; }
.scheda .fondo { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; margin-top: .75rem; }
.scheda .codice { font-size: .75rem; color: var(--g400); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.scheda .prezzo { font-size: 1.25rem; font-weight: 700; color: var(--primary-color); }
.sezione-nastro { padding: 3rem 0 2rem; }
.sezione-nastro .testa-nastro { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.sezione-nastro h2 { font-size: 1.5rem; font-weight: 700; color: var(--g900); }
.sezione-nastro .tutti { font-size: .875rem; font-weight: 600; color: var(--accent-color); }
.sezione-nastro .tutti:hover { text-decoration: underline; }
@media (min-width: 768px) { .sezione-nastro h2 { font-size: 1.875rem; } }

/* ===== Pagina di dettaglio (galleria 1 a 1 da site.js; il resto ricostruito) ===== */
.indietro { display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; font-weight: 500; color: var(--g500); margin-bottom: 1.25rem; }
.indietro:hover { color: var(--primary-color); }
.indietro svg { width: 1rem; height: 1rem; }
.dettaglio { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.dettaglio > div { min-width: 0; }
@media (min-width: 1024px) { .dettaglio { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.galleria { display: flex; flex-direction: column; gap: .75rem; }
.galleria .grande { position: relative; border-radius: 1rem; overflow: hidden; background: var(--secondary-color); box-shadow: var(--ombra-sm); aspect-ratio: 4 / 3; flex: 1; min-width: 0; }
.galleria .grande img#main-photo { width: 100%; height: 100%; object-fit: contain; background: var(--secondary-color); }
#gallery-prev, #gallery-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 2.5rem; height: 2.5rem; border-radius: 9999px; border: 0;
  background: color-mix(in srgb, var(--secondary-color) 90%, transparent); color: var(--g800); display: flex; align-items: center; justify-content: center; box-shadow: var(--ombra-md); }
#gallery-prev { left: .75rem; } #gallery-next { right: .75rem; }
#gallery-prev:hover, #gallery-next:hover { background: var(--secondary-color); color: var(--primary-color); }
#gallery-prev svg, #gallery-next svg { width: 1.25rem; height: 1.25rem; }
#thumb-list { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; }
.thumb-item { width: 4.5rem; height: 4.5rem; background: var(--secondary-color); }
.thumb-item img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) {
  .galleria { flex-direction: row; } #thumb-list { flex-direction: column; overflow-x: hidden; overflow-y: auto; width: 6rem; order: -1; padding: 0 .25rem 0 0; }
  .thumb-item { width: 5.25rem; height: 5.25rem; }
}
.info { background: var(--secondary-color); border-radius: 1rem; box-shadow: var(--ombra-sm); border: 1px solid var(--g100); padding: 1.5rem; }
.info .cat { font-size: .75rem; font-weight: 600; color: var(--accent-color); text-transform: uppercase; letter-spacing: .025em; }
.info h1 { font-size: 1.5rem; font-weight: 700; color: var(--g900); line-height: 1.25; margin-top: .25rem; }
.info .prezzo { font-size: 2rem; font-weight: 700; color: var(--primary-color); margin-top: 1rem; }
.info .iva { font-size: .75rem; color: var(--g400); }
.disponibile { display: inline-flex; align-items: center; gap: .375rem; margin-top: .75rem; padding: .25rem .75rem; border-radius: 9999px; background: var(--verde50); color: var(--verde600); font-size: .8125rem; font-weight: 600; }
.disponibile::before { content: ''; width: .5rem; height: .5rem; border-radius: 9999px; background: var(--verde500); }
.tabella-dati { width: 100%; border-collapse: collapse; margin-top: 1.25rem; font-size: .875rem; }
.tabella-dati th { text-align: left; font-weight: 500; color: var(--g500); padding: .5rem 1rem .5rem 0; vertical-align: top; width: 40%; border-top: 1px solid var(--g100); }
.tabella-dati td { color: var(--g800); padding: .5rem 0; border-top: 1px solid var(--g100); word-break: break-word; }
.tasto-wa-grande { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1.5rem; width: 100%; padding: .875rem 1rem; border-radius: .75rem; background: var(--verde-wa); color: var(--secondary-color); font-weight: 600; }
.tasto-wa-grande:hover { filter: brightness(1.05); }
.tasto-wa-grande svg { width: 1.25rem; height: 1.25rem; }
.tasto-tel { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .5rem; width: 100%; padding: .75rem 1rem; border-radius: .75rem; border: 1px solid var(--g200); color: var(--g700); font-weight: 600; font-size: .875rem; }
.tasto-tel:hover { border-color: var(--primary-color); color: var(--primary-color); }
.tasto-tel svg { width: 1rem; height: 1rem; }
.blocco { background: var(--secondary-color); border-radius: 1rem; box-shadow: var(--ombra-sm); border: 1px solid var(--g100); padding: 1.5rem; margin-top: 2rem; }
.blocco h2 { font-size: 1.125rem; font-weight: 600; color: var(--g900); margin-bottom: 1rem; }
.chip { display: inline-block; margin: 0 .375rem .375rem 0; padding: .25rem .625rem; border-radius: .5rem; background: var(--g100); color: var(--g700); font-size: .8125rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.elenco-compat { margin: 0; padding: 0; list-style: none; font-size: .875rem; }
.elenco-compat li { padding: .5rem 0; border-top: 1px solid var(--g100); }
.elenco-compat li:first-child { border-top: 0; }
#wa-fab { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40; width: 3.5rem; height: 3.5rem; border-radius: 9999px; background: var(--verde-wa); color: var(--secondary-color);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 25px -5px color-mix(in srgb, var(--verde-wa) 50%, transparent); transition: transform .2s; }
#wa-fab:hover { transform: scale(1.08); }
#wa-fab svg { width: 1.75rem; height: 1.75rem; }

/* ===== Stati: caricamento, errore, senza rete ===== */
.avviso-errore { text-align: center; padding: 4rem 1rem; max-width: 32rem; margin: 0 auto; }
.avviso-errore svg { width: 3.5rem; height: 3.5rem; color: var(--accent-color); margin: 0 auto 1rem; display: block; }
.avviso-errore h2 { font-size: 1.25rem; font-weight: 700; color: var(--g900); }
.avviso-errore p { color: var(--g500); margin-top: .5rem; }
.striscia-rete { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--g900); color: var(--secondary-color); font-size: .875rem; text-align: center; padding: .75rem 1rem; }

/* ===== Pezzi nuovi del sito, costruiti solo con le variabili e le misure del kit qui sopra ===== */
.chiedi-prezzo { font-size: .9375rem; font-weight: 700; color: var(--primary-color); white-space: nowrap; }
.info .chiedi { font-size: 1.5rem; font-weight: 700; color: var(--primary-color); margin-top: 1rem; }
.scritta-danneggiato { position: absolute; top: .5rem; left: .5rem; z-index: 7; background: var(--accent-color); color: var(--secondary-color); font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; padding: .25rem .625rem; border-radius: .5rem; box-shadow: var(--ombra-md); }
.avviso-danneggiato { margin-top: 1rem; padding: .75rem 1rem; border-radius: .75rem; background: var(--rosso50); border-left: 4px solid var(--accent-color); color: var(--g800); font-size: .875rem; }
.avviso-danneggiato b { display: block; color: var(--accent-color); font-size: 1rem; text-transform: uppercase; letter-spacing: .03em; }
.da-smontare { display: inline-flex; align-items: center; margin-top: .75rem; padding: .25rem .75rem; border-radius: 9999px; background: color-mix(in srgb, var(--primary-color) 8%, transparent); color: var(--primary-color); font-size: .8125rem; font-weight: 600; }
.pagine { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .375rem; margin-top: 2.5rem; }
.pagine a, .pagine span { min-width: 2.5rem; height: 2.5rem; padding: 0 .5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .75rem; font-size: .875rem; font-weight: 600; }
.pagine a { border: 1px solid var(--g200); background: var(--secondary-color); color: var(--g700); }
.pagine a:hover { border-color: var(--primary-color); color: var(--primary-color); }
.pagine a.attuale { background: var(--primary-color); border-color: var(--primary-color); color: var(--secondary-color); }
.pagine .puntini { color: var(--g400); min-width: 1.25rem; padding: 0; }
.pagine .spenta { border: 1px solid var(--g100); background: var(--secondary-color); color: var(--g300); }
.pagine svg { width: 1rem; height: 1rem; }
.riquadro-sda { margin-top: 3rem; background: var(--secondary-color); border-radius: 1rem; box-shadow: var(--ombra-sm); border: 1px solid var(--g100); padding: 1.5rem; }
.riquadro-sda .testa-nastro, .blocco .testa-nastro { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1.25rem; }
.riquadro-sda h2 { font-size: 1.25rem; font-weight: 700; color: var(--g900); }
.blocco .testa-nastro h2 { margin-bottom: 0; }
.sotto-r { font-size: .875rem; color: var(--g500); margin-top: .25rem; }
.riquadro-sda .tutti, .blocco .tutti, .titolo-pagina .tutti { font-size: .875rem; font-weight: 600; color: var(--accent-color); }
.riquadro-sda .tutti:hover, .blocco .tutti:hover { text-decoration: underline; }
.wrap-riquadro { margin-top: 2rem; }
.thumb-item .foto-assente span { display: none; }
/* adattamento: queste classi prendono il posto degli attributi style del bozzetto (nessuno style= nelle pagine) */
.icone-nascoste { position: absolute; }
.scheda .fondo .auto-di { margin: 0; }
.sezione .sotto.sotto-fine { margin-bottom: 0; }
.solo-auto { margin-top: .5rem; }