/* ==========================================================================
   Transizioni fluide tra le pagine (View Transitions API nativa del browser,
   nessun JavaScript: nei browser che non la supportano la navigazione resta
   semplicemente quella standard, senza errori)
   ========================================================================== */
@view-transition {
  navigation: auto;
}

.nav {
  view-transition-name: site-nav;
}

::view-transition-old(root) {
  animation: pageFadeOut .45s var(--ease-soft) both;
}

::view-transition-new(root) {
  animation: pageFadeIn .5s var(--ease-soft) both;
}

@keyframes pageFadeOut {
  to { opacity: 0; transform: scale(.99); }
}

@keyframes pageFadeIn {
  from { opacity: 0; transform: scale(1.01); }
}

::view-transition-group(site-nav) {
  animation-duration: .35s;
  animation-timing-function: var(--ease-soft);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* ==========================================================================
   Palette: avorio / crema / greige, antracite, terracotta desaturata
   Type: Cormorant Garamond (display) + Inter (corpo) — font locali, self-hosted
   ========================================================================== */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/cg-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/cg-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/cg-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/cg-400i.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/inter-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/inter-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/inter-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/inter-600.woff2') format('woff2');
}

:root {
  --ivory: #F7F1E6;
  --cream: #EFE3D2;
  --greige: #DCD0BC;
  --greige-dark: #C9BBA2;
  --anthracite: #2C2721;
  --anthracite-70: #2C2721B3;
  --terracotta: #905741;
  --terracotta-soft: #CDA08B;
  --footer-bg: #E2D6C0;
  --footer-text: #55483A;

  /* Usati dal calendario di prenotazione showroom (orari liberi/occupati) */
  --fresh: #6E9C6B;
  --fresh-bg: #E9F1E6;
  --urgent: #B3462F;
  --urgent-bg: #FBE7E2;

  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Inter', sans-serif;

  --ease-soft: cubic-bezier(.22, .61, .36, 1);
  --dur-fade: .6s;

  --container: 1240px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 18px;
}

@media (max-width:480px) {
  html {
    font-size: 16.5px;
  }
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--anthracite);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img {
  max-width: 100%;
  height: auto;   /* senza, l'attributo height schiaccia la foto */
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0;
}

p {
  margin: 0;
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 6vw;
}

::selection {
  background: var(--terracotta-soft);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* focus visibility */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

/* ==========================================================================
   Custom lens cursor (hero signature interaction)
   ========================================================================== */
.lens-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(247, 241, 230, .9);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 400;
  mix-blend-mode: difference;
  transition: width .25s var(--ease-soft), height .25s var(--ease-soft), opacity .3s;
  opacity: 0;
}

.lens-cursor.active {
  opacity: 1;
}

.lens-cursor.expand {
  width: 120px;
  height: 120px;
}

@media (hover:none),
(pointer:coarse) {
  .lens-cursor {
    display: none;
  }
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* I margini laterali erano 6vw fissi: su un portatile si mangiavano
     quasi 200 px in due, e il nome accanto al marchio finiva addosso alla
     prima voce del menu. Con clamp restano generosi sugli schermi grandi
     e si stringono dove lo spazio serve davvero. */
  padding: 30px clamp(28px, 6vw, 96px);
  /* Uno spazio minimo garantito fra il marchio e il menu: senza, i due
     blocchi si toccavano appena la barra si riempiva. */
  gap: 28px;
  transition: background var(--dur-fade) var(--ease-soft), padding var(--dur-fade) var(--ease-soft), box-shadow var(--dur-fade);
}

.nav.solid {
  background: var(--ivory);
  padding: 20px 6vw;
  box-shadow: 0 1px 0 var(--greige);
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 14px;
  /* Con il menu piu' ricco la barra si e' allargata e il logo veniva
     schiacciato fino ad andare a capo su tre righe, finendo sotto le
     voci. Qui smette di cedere: a stringersi e' il menu, non il marchio. */
  flex-shrink: 0;
}

.nav__logo img {
  height: 76px;
  width: auto;
  border-radius: 3px;
  filter: drop-shadow(0 1px 2px rgba(20,14,8,.45)) drop-shadow(0 2px 8px rgba(20,14,8,.22));
  transition: height var(--dur-fade) var(--ease-soft);
}

.nav.solid .nav__logo img {
  height: 58px;
}

.nav__logo span {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.15vw + .85rem, 1.65rem);
  letter-spacing: .03em;
  color: var(--ivory);
  white-space: nowrap;
  transition: color var(--dur-fade);
}


.nav.solid .nav__logo span {
  color: var(--anthracite);
}

.nav__links {
  display: flex;
  align-items: center;
  /* Lo spazio fra le voci era tarato su quattro voci; adesso sono sette
     piu' il pulsante. clamp tiene il respiro sugli schermi larghi senza
     far sbordare la barra su un portatile. */
  gap: clamp(1.1rem, 1.5vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__assist-link {
  line-height: 1.25;
  text-align: center;
}

.nav__links a {
  font-size: .92rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ivory);
  position: relative;
  padding-bottom: 4px;
  transition: color var(--dur-fade);
}

.nav.solid .nav__links a {
  color: var(--anthracite);
}

.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width .35s var(--ease-soft);
}

.nav__links a:hover::after {
  width: 100%;
}

/* La voce Assistenza sta su due righe: dentro un pulsante flex il testo
   va allineato al centro, altrimenti la seconda riga scappa a sinistra e
   la freccia si stacca dal blocco. */
.nav__dropdown-toggle--assist span {
  display: block;
  line-height: 1.25;
  text-align: center;
}

/* ---- Menu a tendina "L'Azienda" ---- */
.nav__dropdown {
  position: relative;
  padding-bottom: 22px;
  margin-bottom: -22px;
}

.nav__dropdown-toggle {
  font-family: inherit;
  font-size: .92rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ivory);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0 4px;
  /* Su una riga sola: «Guide e novità» andava a capo e quella voce
     diventava alta il doppio delle altre, sfalsando tutta la barra.
     Nel menu a scomparsa la regola non serve e viene annullata. */
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color var(--dur-fade);
}

.nav.solid .nav__dropdown-toggle {
  color: var(--anthracite);
}

.nav__dropdown-toggle::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s var(--ease-soft);
}

.nav__dropdown:hover .nav__dropdown-toggle::after,
.nav__dropdown:focus-within .nav__dropdown-toggle::after {
  transform: rotate(225deg) translateY(2px);
}

.nav__dropdown-menu {
  list-style: none;
  margin: 0;
  padding: 10px 0;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 180px;
  background: var(--ivory);
  border-radius: 10px;
  box-shadow: 0 20px 40px -12px rgba(44, 39, 33, .3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease-soft), transform .25s var(--ease-soft);
}

.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown:focus-within .nav__dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav__dropdown-menu li {
  display: block;
}

.nav__dropdown-menu a {
  display: block;
  padding: 10px 22px;
  font-size: .84rem;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--anthracite);
  white-space: nowrap;
}

.nav__dropdown-menu a:hover {
  background: var(--cream);
  color: var(--terracotta);
}

.nav__dropdown-menu a::after {
  display: none;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 18px;
  color: var(--ivory);
  transition: color var(--dur-fade);
}

.nav.solid .lang-switch {
  color: var(--anthracite);
}

.lang-switch__btn {
  display: block;
  padding: 0;
  width: 32px;
  height: 22px;
  border-radius: 3px;
  border: 1.5px solid transparent;
  overflow: hidden;
  opacity: .55;
  background: none;
  line-height: 0;
  transition: opacity .25s var(--ease-soft), border-color .25s var(--ease-soft), transform .25s var(--ease-soft);
}

.lang-switch__btn svg {
  display: block;
  width: 100%;
  height: 100%;
}

.lang-switch__btn:hover {
  opacity: .85;
  transform: translateY(-1px);
}

.lang-switch__btn.is-active {
  opacity: 1;
  border-color: currentColor;
}

.nav__toggle {
  display: none;
  background: none;
  border: 0;
  width: 26px;
  height: 20px;
  position: relative;
  filter: drop-shadow(0 0 1px rgba(44,39,33,.55)) drop-shadow(0 1px 2px rgba(44,39,33,.35));
}

.nav__toggle span,
.nav__toggle::before,
.nav__toggle::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--ivory);
  transition: background var(--dur-fade), transform .4s var(--ease-soft), opacity .3s var(--ease-soft);
}

.nav.solid .nav__toggle span,
.nav.solid .nav__toggle::before,
.nav.solid .nav__toggle::after {
  background: var(--anthracite);
}

.nav__toggle::before {
  top: 0;
}

.nav__toggle span {
  top: 10.5px;
}

.nav__toggle::after {
  bottom: 0;
}

.nav__toggle.is-open::before {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.nav__toggle.is-open span {
  opacity: 0;
}

.nav__toggle.is-open::after {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

/* Il menu a scomparsa prende il posto della barra estesa sotto i 1280 px.
   Era 1080, ma con sette voci piu' il pulsante la barra non ci stava piu':
   fra i 1081 e i 1280 il nome del pulsante finiva tagliato fuori dallo
   schermo. Meglio l'icona a tre righe, che su un portatile funziona bene
   quanto su un telefono. Questo blocco contiene SOLO regole della barra. */
@media (max-width:1280px) {
  .nav {
    padding: 20px 5vw;
    /* Lo spazio minimo fra marchio e menu serve solo alla barra estesa.
       Qui i due estremi li separa gia' space-between, e quei 28px per
       lato erano 56px sottratti al tasto del menu: a 320px bastavano a
       spingerlo fuori dallo schermo. */
    gap: 0;
  }

  .nav__logo img {
    height: 50px;
  }

  .nav.solid .nav__logo img {
    height: 44px;
  }

  .nav__logo span {
    font-size: 1.05rem;
  }

  .nav__links {
    position: fixed;
    inset: 0 0 0 auto;
    width: 78vw;
    max-width: 340px;
    height: 100vh;
    background: var(--ivory);
    flex-direction: column;
    align-items: flex-start;
    padding: 110px 8vw;
    transform: translateX(100%);
    transition: transform .5s var(--ease-soft);
    gap: 1.6rem;
    overflow-y: auto;
  }

  .nav__links a {
    color: var(--anthracite);
    font-size: 1.05rem;
  }

  .nav__dropdown-toggle {
    font-size: 1.05rem;
    color: var(--anthracite);
    padding: 0;
    white-space: normal;
  }

  .nav__dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
    background: none;
    padding: .9rem 0 0 1.1rem;
    min-width: 0;
    border-left: 1px solid var(--greige-dark);
  }

  .nav__dropdown:hover .nav__dropdown-menu,
  .nav__dropdown:focus-within .nav__dropdown-menu {
    transform: none;
  }

  .nav__dropdown-menu a {
    padding: .7rem 0;
    font-size: .96rem;
  }

  .nav__dropdown-toggle::after {
    display: none;
  }

  .nav__links.open {
    transform: translateX(0);
  }

  .nav__lang-item {
    width: 100%;
    margin-top: .4rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--greige-dark);
  }

  .nav__lang-item .lang-switch {
    margin-left: 0;
    color: var(--anthracite);
    gap: 10px;
  }

  .nav__lang-item .lang-switch__btn {
    width: 36px;
    height: 25px;
  }

  .nav__toggle {
    display: block;
    z-index: 210;
    width: 30px;
    height: 23px;
  }
}

/* Sul telefono la barra va ricalibrata pezzo per pezzo. Il difetto che
   queste regole risolvono era grosso: con il nome accanto al marchio, a
   320px il logo arrivava a 280px e il tasto del menu finiva a x=336,
   cioe' FUORI dallo schermo — il menu non si poteva proprio aprire.
   La colpa principale era dei margini laterali: 5vw sono 77px in due su
   uno schermo di 320, un quarto della larghezza buttato. */
@media (max-width: 560px) {
  .nav,
  .nav.solid {
    padding-left: 18px;
    padding-right: 18px;
  }

  .nav {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .nav.solid {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* Sotto i 400px si stringe anche il logo: marchio, nome e tasto del menu
   devono starci tutti e tre, con lo spazio per il pollice. */
@media (max-width: 480px) {
  .nav__logo {
    gap: 9px;
  }

  .nav__logo img {
    height: 38px;
  }

  .nav.solid .nav__logo img {
    height: 34px;
  }

  .nav__logo span {
    font-size: .88rem;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  height: 100vh;
  height: 100dvh;
  height: calc(var(--vh, 1vh) * 100);
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  background: var(--anthracite);
}

@media (max-width:600px) {
  .hero {
    height: 100vh;
    height: 100dvh;
    height: calc(var(--vh, 1vh) * 100);
    min-height: 560px;
  }

  .hero__layer {
    animation: kenburnsMobile 13s ease-in-out infinite;
  }
}

@keyframes kenburnsMobile {
  0% {
    transform: scale(1.04) translate3d(0, 0, 0);
  }

  50% {
    transform: scale(1.09) translate3d(0, -1%, 0);
  }

  100% {
    transform: scale(1.04) translate3d(0, 0, 0);
  }
}

.hero__layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 50%;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 1.6s var(--ease-soft);
  animation: kenburns 13s ease-in-out infinite;
}

.hero__layer.blur {
  filter: saturate(.55) brightness(.7) blur(1.5px);
  z-index: 1;
}

.hero__layer.sharp {
  filter: saturate(1.05) brightness(.92);
  z-index: 2;
  clip-path: circle(0px at 50% 50%);
  transition: clip-path .8s var(--ease-soft), opacity 1.6s ease;
}

.hero__layer.is-active {
  opacity: 1;
}

@keyframes kenburns {
  0% {
    transform: scale(1.02) translate3d(0, 0, 0);
  }

  50% {
    transform: scale(1.05) translate3d(-0.5%, -0.5%, 0);
  }

  100% {
    transform: scale(1.02) translate3d(0, 0, 0);
  }
}

.hero__mask {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(180deg, rgba(44, 39, 33, .35) 0%, rgba(44, 39, 33, .32) 40%, rgba(44, 39, 33, .72) 100%);
}

.hero__content {
  position: relative;
  z-index: 4;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 6vw;
}

.hero__logo {
  height: 92px;
  width: auto;
  margin-bottom: 34px;
  opacity: 0;
  animation: fadeUp 1s var(--ease-soft) 0s forwards;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .25));
}

@media (max-width:480px) {
  .hero__logo {
    height: 66px;
  }
}

.hero__eyebrow {
  color: var(--terracotta-soft);
  font-size: .78rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  margin-bottom: 22px;
  opacity: 0;
  animation: fadeUp .9s var(--ease-soft) .2s forwards;
}

.hero__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--ivory);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  margin: 0 0 10px;
  opacity: 0;
  animation: fadeUp .9s var(--ease-soft) .3s forwards;
}

.hero__title {
  color: var(--ivory);
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 1.08;
  max-width: 16ch;
  font-weight: 500;
  opacity: 0;
  animation: fadeUp 1s var(--ease-soft) .4s forwards;
}

.hero__subtitle {
  margin-top: 26px;
  color: var(--ivory);
  opacity: 0;
  animation: fadeUp 1s var(--ease-soft) .65s forwards;
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 46ch;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__scroll {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--ivory);
  opacity: .85;
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.hero__scroll i {
  width: 1px;
  height: 34px;
  background: var(--ivory);
  position: relative;
  overflow: hidden;
}

.hero__scroll i::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  right: 0;
  height: 100%;
  background: var(--terracotta-soft);
  animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
  0% {
    top: -100%;
  }

  50% {
    top: 0;
  }

  100% {
    top: 100%;
  }
}

/* ==========================================================================
   Section headers, shared
   ========================================================================== */
.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 4.2vw;
}

.section-head .eyebrow {
  display: block;
  color: var(--terracotta);
  font-size: .76rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.section-head h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  line-height: 1.2;
}

.section-head p {
  margin-top: 18px;
  color: var(--anthracite-70);
  font-weight: 300;
  line-height: 1.75;
  font-size: 1rem;
}

/* Animazione d'ingresso degli elementi allo scroll.
   ---------------------------------------------------------------------
   Il punto di partenza è opacity:0, ma SOLO sotto .js — la classe che lo
   script nel <head> mette sull'elemento <html> come prima cosa.
   Motivo: se il JavaScript non venisse eseguito (bloccato, in errore, o
   con un crawler che non lo aspetta) senza questo vincolo mezzo sito
   resterebbe invisibile per sempre. Con .js, chi non ha JavaScript vede
   semplicemente il contenuto già al suo posto, senza animazione.
   Effetto collaterale positivo: le immagini sopra la piega non dipendono
   più dal JavaScript per essere disegnate, e questo aiuta l'LCP. */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft);
}

.js .reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Chi ha chiesto meno animazioni vede il contenuto direttamente. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Utility — immagini opache che si "accendono" al passaggio del mouse
   ========================================================================== */
.img-fade {
  filter: grayscale(45%) opacity(.82);
  transition: filter .55s var(--ease-soft), scale .55s var(--ease-soft);
}

a:hover .img-fade,
a:focus-visible .img-fade,
.showcase__item.is-active .img-fade,
.showcase__stage:hover .img-fade,
button:hover .img-fade,
button:focus-visible .img-fade,
.gallery-item:hover .img-fade,
.gallery-item:focus-visible .img-fade {
  filter: grayscale(0%) opacity(1);
}

.showcase__stage .img-fade.is-active {
  scale: 1.02;
}

/* ==========================================================================
   Collezione — vetrina con immagine sticky + elenco modelli
   (nessun pin/blocco: la pagina scorre sempre liberamente)
   ========================================================================== */
.catalog {
  position: relative;
  padding: 9vw 0 8vw;
  background: var(--cream);
}

.catalog__inner {
  position: relative;
  z-index: 1;
}

.showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4vw;
  align-items: start;
}

.showcase__stage {
  position: sticky;
  top: 110px;
  aspect-ratio: 4/5;
  border-radius: 6px;
  overflow: hidden;
  background: var(--greige);
}

.showcase__stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .7s var(--ease-soft);
}

.showcase__stage img.is-active {
  opacity: 1;
}

.showcase__list {
  list-style: none;
  margin: 0;
  padding: 0 0 40vh 0;
}

.showcase__item {
  border-top: 1px solid var(--greige-dark);
}

.showcase__item:last-child {
  border-bottom: 1px solid var(--greige-dark);
}

.showcase__item a {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 4px;
  text-align: left;
  color: var(--anthracite);
}

.showcase__item .left {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.showcase__item h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  font-weight: 500;
  transition: color .35s var(--ease-soft);
}

.showcase__item .num {
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--anthracite-70);
  font-variant-numeric: tabular-nums;
}

.showcase__item svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--terracotta);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .3s var(--ease-soft), transform .3s var(--ease-soft);
}

.showcase__item.is-active h3 {
  color: var(--terracotta);
}

.showcase__item.is-active svg,
.showcase__item a:hover svg,
.showcase__item a:focus-visible svg {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width:900px) {
  .showcase {
    grid-template-columns: 1fr;
    gap: 6vw;
  }

  .showcase__stage {
    position: relative;
    top: auto;
    aspect-ratio: 4/3;
  }

  .showcase__list {
    padding-bottom: 0;
  }
}

@media (max-width:560px) {
  .showcase__stage {
    aspect-ratio: 1/1;
    border-radius: 10px;
  }

  .showcase__item a {
    padding: 20px 2px;
    gap: 10px;
  }

  .showcase__item .left {
    gap: 10px;
    flex-wrap: wrap;
  }

  .showcase__item h3 {
    font-size: 1.15rem;
  }

  .showcase__item .num {
    font-size: .7rem;
  }

  .showcase__item svg {
    opacity: 1;
    transform: translateX(0);
  }
}

.catalog__more {
  text-align: center;
  margin-top: 6vw;
}

.catalog__more a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--anthracite);
  border-radius: 999px;
  padding: 15px 36px;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background .35s var(--ease-soft), color .35s var(--ease-soft);
}

.catalog__more a:hover {
  background: var(--anthracite);
  color: var(--ivory);
}

/* ==========================================================================
   Lightbox (visualizzazione immagine a schermo intero)
   ========================================================================== */
.about-figure {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.about-figure img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 30px 60px -30px rgba(44, 39, 33, .35);
}

.about-figure figcaption {
  margin-top: 16px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--anthracite-70);
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.gallery-item,
.artline-panel {
  cursor: zoom-in;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vw;
  background: rgba(44, 39, 33, .82);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease-soft);
}

.modal.open {
  opacity: 1;
  pointer-events: auto;
}

.modal__panel {
  position: relative;
  max-width: 1100px;
  width: 100%;
  /* L'immagine lascia spazio a cio' che le sta intorno: il pulsante di
     chiusura sopra (~50px) e, sotto, il nome del colore e il contatore
     (~80px). Senza questo margine l'immagine li spingeva fuori schermo. */
  max-height: calc(92vh - 130px);
  transform: translateY(24px) scale(.98);
  transition: transform .45s var(--ease-soft);
}

.modal.open .modal__panel {
  transform: translateY(0) scale(1);
}

.modal__media img {
  width: 100%;
  max-height: calc(92vh - 130px);
  object-fit: contain;
  border-radius: 6px;
  background: var(--greige);
}

.modal__close {
  position: absolute;
  top: -42px;
  right: 0;
  background: none;
  border: 0;
  font-size: 2rem;
  color: var(--ivory);
  line-height: 1;
  transition: color .25s var(--ease-soft), transform .25s var(--ease-soft);
}

.modal__close:hover {
  color: var(--terracotta-soft);
  transform: scale(1.15);
}

.modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(247, 241, 230, .3);
  background: rgba(44, 39, 33, .4);
  color: var(--ivory);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .25s var(--ease-soft), border-color .25s var(--ease-soft);
}

.modal__nav:hover {
  background: rgba(44, 39, 33, .7);
  border-color: rgba(247, 241, 230, .6);
}

.modal__nav svg {
  width: 20px;
  height: 20px;
}

/* Le frecce stanno FUORI dall'immagine, ma solo se c'e' posto.
     Servono 110px di respiro per lato (64 di distacco + 46 di pulsante) e
     sotto i 1150px di finestra non ci sono: a 1024px la freccia destra
     finiva 12px oltre il bordo dello schermo, tagliata a meta' e per meta'
     non cliccabile. Sotto quella soglia rientrano sopra l'immagine — la
     stessa cosa che gia' si faceva sotto i 900px, solo che la soglia era
     troppo bassa e restava scoperta tutta la fascia dei tablet in
     orizzontale e dei portatili piccoli. */
  .modal__nav--prev { left: -64px; }
  .modal__nav--next { right: -64px; }

  @media (max-width: 1150px) {
    .modal__nav--prev { left: 6px; }
    .modal__nav--next { right: 6px; }
    .modal__nav { background: rgba(44, 39, 33, .55); }
  }

.modal__counter {
  position: absolute;
  bottom: -62px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(247, 241, 230, .55);
  font-size: .78rem;
  letter-spacing: .08em;
}

/* Nome del colore (o della versione di colorazione) sotto l'immagine aperta */
.modal__caption {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  max-width: 92%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ivory);
  font-family: var(--font-display), Georgia, serif;
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: .01em;
}

@media (max-width:900px) {
  .modal__nav--prev { left: 6px; }
  .modal__nav--next { right: 6px; }
  .modal__nav { background: rgba(44, 39, 33, .55); }

  .modal__caption {
    font-size: 1.2rem;
    bottom: -32px;
  }

  .modal__counter {
    bottom: -52px;
  }

  .modal__panel,
  .modal__media img {
    max-height: calc(90vh - 120px);
  }
}

.modal__close:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ==========================================================================
   Filosofia (parallax)
   ========================================================================== */
.philosophy {
  position: relative;
  background: var(--greige);
  padding: 10vw 0;
  overflow: hidden;
}

.philosophy__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6vw;
  align-items: center;
}

@media (max-width:860px) {
  .philosophy__grid {
    grid-template-columns: 1fr;
    gap: 12vw;
  }
}

.philosophy__block {
  position: relative;
}

.philosophy__block:nth-child(even) .philosophy__visual {
  order: 2;
}

.philosophy__visual {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 6px;
  overflow: hidden;
  margin: 0 auto;
  max-width: 480px;
  width: 100%;
}

.philosophy__visual img {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
}

.philosophy__text .eyebrow {
  color: var(--terracotta);
  font-size: .76rem;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.philosophy__text h3 {
  margin-top: 16px;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.25;
}

.philosophy__text p {
  margin-top: 18px;
  color: var(--anthracite-70);
  font-weight: 300;
  line-height: 1.8;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

.philosophy__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6vw;
  margin-bottom: 9vw;
  align-items: center;
}

.philosophy__row:last-child {
  margin-bottom: 0;
}

@media (max-width:860px) {
  .philosophy__row {
    grid-template-columns: 1fr;
    gap: 6vw;
    margin-bottom: 12vw;
  }

  .philosophy__block:nth-child(even) .philosophy__visual {
    order: 0;
  }
}

/* ==========================================================================
   Showroom / CTA
   ========================================================================== */
.showroom {
  /* Stesso pavimento di .semplicita e .scadenza: 9vw sul telefono sono
     trentaquattro pixel, e il bottone «Scopri tutti i modelli» resta
     appoggiato al passaggio dall'avorio alla crema della sezione dopo.
     La prima dichiarazione serve ai browser che non conoscono max(). */
  padding: 9vw 0 4rem;
  padding: max(2.4rem, 9vw) 0 max(4rem, 9vw);
  background: var(--ivory);
  text-align: center;
}

.wood-promo {
  padding: 8vw 0 9vw;
  background: var(--greige);
}

.wood-promo .philosophy__features {
  border-top: none;
  padding-top: 0;
  margin-top: 3.6vw;
}

.wood-promo__note {
  margin: 4vw auto 0;
  max-width: 74ch;
  text-align: center;
  color: var(--anthracite-70);
  font-weight: 300;
  font-style: italic;
  line-height: 1.8;
  padding-top: 3vw;
  border-top: 1px solid var(--greige-dark);
}

.wood-promo__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 2.8vw;
}

/* ---- Perché Bottega del Fuoco (fascia scura) ---- */
.brand-case {
  background: var(--anthracite);
  border-radius: 14px;
  padding: 5vw 4vw;
  margin: 5.5vw 0;
}

.brand-case__head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 3.4vw;
}

.brand-case__head .eyebrow {
  color: var(--terracotta-soft);
  font-size: .76rem;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.brand-case__head h3 {
  margin-top: 14px;
  color: var(--ivory);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.3;
}

.brand-case__head p {
  margin-top: 16px;
  color: rgba(247, 241, 230, .78);
  font-weight: 300;
  line-height: 1.75;
}

.brand-case__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3vw 2.4vw;
}

.brand-case__item {
  text-align: center;
  border-top: 1px solid rgba(247, 241, 230, .18);
  padding-top: 20px;
  transition: transform .35s var(--ease-soft), border-color .35s var(--ease-soft);
}

.brand-case__item:hover {
  transform: translateY(-4px);
  border-color: var(--terracotta-soft);
}

.brand-case__item :is(h3,h4) {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--terracotta-soft);
  font-weight: 600;
}

.brand-case__item p {
  margin-top: 10px;
  font-size: .85rem;
  color: rgba(247, 241, 230, .78);
  font-weight: 300;
  line-height: 1.65;
}

@media (max-width:820px) {
  .brand-case__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width:480px) {
  .brand-case__grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Striscia statistiche ---- */
.stat-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3vw 5vw;
  margin: 3.4vw 0 5vw;
  padding: 2.4vw 0;
  border-top: 1px solid var(--greige-dark);
  border-bottom: 1px solid var(--greige-dark);
}

.legal-content + .stat-strip {
  margin-top: 0.6vw;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  max-width: 180px;
}

.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 600;
  color: var(--terracotta);
  line-height: 1;
}

.stat__label {
  font-size: .78rem;
  color: var(--anthracite-70);
  line-height: 1.4;
}

/* ---- Tabella comparativa ---- */
.compare {
  margin-top: 4.5vw;
  margin-bottom: 4.5vw;
}

.compare__title {
  text-align: center;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  margin-bottom: 2vw;
}

.compare__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  border: 1px solid var(--greige-dark);
}

.compare__table {
  width: 100%;
  border-collapse: collapse;
  background: var(--ivory);
  font-size: .86rem;
  min-width: 640px;
}

.compare__table th,
.compare__table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--greige);
  white-space: nowrap;
}

.compare__table td a {
  color: var(--terracotta);
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease-soft);
}

.compare__table td a:hover {
  border-color: var(--terracotta);
}

.compare__table tbody tr {
  transition: background .3s var(--ease-soft);
}

.compare__table tbody tr:hover {
  background: var(--cream);
}

.compare__table thead th {
  background: var(--anthracite);
  color: var(--ivory);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .04em;
  border-bottom: none;
  position: sticky;
  top: 0;
  z-index: 2;
}

.compare__table thead th span {
  display: block;
  font-weight: 300;
  font-size: .7rem;
  opacity: .75;
  margin-top: 2px;
}

.compare__table tbody tr:last-child td {
  border-bottom: none;
}

.compare__table td.is-highlight,
.compare__table th.is-highlight {
  background: rgba(180, 115, 90, .1);
  color: var(--anthracite);
  font-weight: 500;
}

.compare__table thead th.is-highlight {
  background: var(--terracotta);
  color: var(--ivory);
}

/* ---- le tabelle delle pagine legali sullo schermo del telefono --------
   Hanno quattro colonne e dentro ci sono nomi tecnici scritti in monospazio:
   «bdf-cookie-consent» sono diciotto caratteri che non vanno a capo da soli.
   A 320px di schermo una colonna vale una settantina di pixel, quindi quella
   parola da sola spingeva la tabella oltre il bordo e trascinava con se'
   tutta la pagina. Qui le parole lunghe possono spezzarsi e la tabella si
   stringe: quattro colonne su un telefono restano strette, ma si leggono e
   soprattutto non fanno scorrere la pagina di lato. */
.legal-content__table td,
.legal-content__table th {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: none;
}

.legal-content__table code {
  font-size: .88em;
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .legal-content__table {
    font-size: .82rem;
    table-layout: fixed;
  }

  .legal-content__table th,
  .legal-content__table td {
    padding: 8px 7px;
  }
}

/* ==========================================================================
   LE DUE STRADE, AFFIANCATE — 8 agosto
   ==========================================================================
   Prima erano due .feature dentro .philosophy__features. Sbagliato per tre
   ragioni, tutte visibili in pagina: .feature centra il testo, e queste due
   schede non sono paragrafi ma ELENCHI di cinque condizioni — centrati
   diventavano cinque righe a bandiera doppia, impossibili da scorrere;
   il corpo era .85rem, misura pensata per quattro colonne strette; e le
   frasi erano separate da <br>, cioè un elenco travestito da paragrafo,
   che nessun lettore di schermo annuncia come tale.

   Ora sono liste vere in due colonne larghe, testo a sinistra e corpo pieno.
   ========================================================================== */
.scelta-doppia {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.4vw, 2rem);
  max-width: 1060px;
  margin-inline: auto;
  margin-top: 3vw;
}

/* .fascia > * dà 1180px a ogni figlio con specificità (0,3,0): il limite
   va riaffermato più in alto, o torna a 1180 e le colonne si allargano
   oltre la misura leggibile. */
.wood-promo--alterna > .container > .fascia > .scelta-doppia { max-width: 1060px; }

.scelta-doppia__carta {
  background: var(--ivory);
  border: 1px solid var(--greige-dark);
  border-radius: 14px;
  padding: clamp(1.3rem, 2.4vw, 2rem) clamp(1.2rem, 2.2vw, 1.9rem);
}

.scelta-doppia__carta h3 {
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 1.5vw, 1.3rem);
  font-weight: 600;
  color: var(--anthracite);
  margin: 0 0 .2em;
  text-align: left;
}

.scelta-doppia__carta ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.scelta-doppia__carta li {
  position: relative;
  padding-left: 1.35em;
  margin-top: 1em;
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.72;
  color: var(--anthracite-70);
  text-align: left;
  hyphens: none;
}

/* un segno discreto, della stessa terracotta dei richiami del sito */
.scelta-doppia__carta li::before {
  content: '';
  position: absolute;
  left: .1em;
  top: .68em;
  width: .42em;
  height: .42em;
  border-radius: 50%;
  background: var(--terracotta);
  opacity: .55;
}

.scelta-doppia__carta li strong {
  font-weight: 600;
  color: var(--anthracite);
}

@media (max-width: 760px) {
  .scelta-doppia { grid-template-columns: 1fr; }
}

/* ==========================================================================
   TABELLE DI CONFRONTO CON IL TESTO — 8 agosto
   ==========================================================================
   .compare__table nasce per le tabelle di sole cifre dello showroom, dove
   ogni cella è corta e white-space: nowrap tiene le misure su una riga sola.
   Le tabelle della pagina legna/pellet hanno invece celle di prosa: con
   nowrap la tabella diventerebbe larga qualche migliaio di pixel e si
   leggerebbe solo scorrendo. Qui il testo torna ad andare a capo e le
   colonne prendono una larghezza sensata.
   ========================================================================== */
.compare__table--testo {
  min-width: 720px;
  font-size: .82rem;
}

.compare__table--testo th,
.compare__table--testo td {
  white-space: normal;
  vertical-align: top;
  line-height: 1.6;
  padding: 15px 18px;
}

/* la prima colonna è l'etichetta della riga: resta compatta e riconoscibile */
.compare__table--testo tbody th[scope="row"] {
  font-weight: 500;
  color: var(--anthracite);
  width: 20%;
  background: rgba(0, 0, 0, .015);
}

.compare__table--testo tbody td {
  font-weight: 300;
  color: var(--anthracite-70);
}

.compare__table--testo tbody td.is-highlight {
  font-weight: 400;
  color: var(--anthracite);
}

@media (max-width: 640px) {
  .compare__table--testo {
    min-width: 620px;
    font-size: .78rem;
  }

  .compare__table--testo th,
  .compare__table--testo td {
    padding: 12px 13px;
  }

  .compare__table--testo tbody th[scope="row"] { width: 26%; }
}

/* ==========================================================================
   Citazioni — piccoli riferimenti di fonte accanto ai dati
   ========================================================================== */
.cite {
  display: inline-block;
  margin-left: 4px;
  font-size: .72em;
  font-style: italic;
  color: var(--anthracite-70);
  opacity: .85;
}

.sources {
  margin-top: 4vw;
  padding: 1.8vw 2.2vw;
  background: var(--ivory);
  border: 1px solid var(--greige-dark);
  border-radius: 10px;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

.sources :is(h3,h4) {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--anthracite);
}

.sources ul {
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--anthracite-70);
  font-size: .82rem;
  line-height: 1.8;
}

.sources p {
  margin-top: 14px;
  font-size: .76rem;
  font-style: italic;
  color: var(--anthracite-70);
  line-height: 1.6;
}

/* Senza un limite di larghezza questa didascalia arriva a 148 caratteri
   per riga: leggibile fino a 75, oltre l'occhio perde il capoverso. */
.compare__note {
  text-align-last: center;   /* il globale p{} la buttava a sinistra */
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 14px;
  font-size: .76rem;
  color: var(--anthracite-70);
  font-style: italic;
  text-align: center;
}

@media (max-width:640px) {
  .compare__table {
    font-size: .8rem;
  }

  .compare__table th,
  .compare__table td {
    padding: 11px 14px;
  }
}

/* ---- FAQ ---- */
.faq {
  margin-top: 5vw;
  margin-bottom: 8vw;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* Fix sticky: su alcuni browser overflow-x su body rompe position:sticky.
   clip-x è la fix ufficiale. */

.faq__item {
  border-top: 1px solid var(--greige-dark);
}

.faq__item:last-child {
  border-bottom: 1px solid var(--greige-dark);
}

.faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 30px 20px 0;
  position: relative;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--anthracite);
  transition: color .3s var(--ease-soft);
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 18px;
  font-size: 1.4rem;
  color: var(--terracotta);
  transition: transform .3s var(--ease-soft);
}

.faq__item[open] summary::after {
  transform: rotate(45deg);
}

.faq__item summary:hover {
  color: var(--terracotta);
}

.faq__item p {
  margin: 0 0 22px;
  color: var(--anthracite-70);
  font-weight: 300;
  line-height: 1.75;
  max-width: 68ch;
}

.showroom h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
}

.showroom p {
  max-width: 560px;
  margin: 18px auto 0;
  color: var(--anthracite-70);
  font-weight: 300;
  line-height: 1.75;
}

.showroom__cta {
  margin-top: 34px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 16px 40px;
  border: 1px solid var(--anthracite);
  border-radius: 999px;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background .35s var(--ease-soft), color .35s var(--ease-soft), transform .3s var(--ease-soft);
}

.showroom__cta:hover {
  background: var(--anthracite);
  color: var(--ivory);
  transform: translateY(-2px);
}

.showroom__cta--call {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--ivory);
}

.showroom__cta--call:hover {
  background: var(--anthracite);
  border-color: var(--anthracite);
}

/* ==========================================================================
   Preventivo — form di contatto con upload foto
   ========================================================================== */
.quote {
  /* Come sopra. Qui il fondo della sezione seguente e' lo stesso, quindi
     il difetto non si vede come un bottone appiccicato a una riga di
     colore, ma il respiro sotto al bottone del preventivo era comunque
     di trentatre pixel sul telefono contro i centoquattordici del
     desktop: si pareggia. */
  padding: 9vw 0 4rem;
  padding: max(2.4rem, 9vw) 0 max(4rem, 9vw);
  background: var(--cream);
}

.quote-form {
  max-width: 720px;
  margin: 0 auto;
  padding: 3vw clamp(24px, 4vw, 48px);
  background: var(--ivory);
  border-radius: 14px;
  box-shadow: 0 30px 60px -35px rgba(44, 39, 33, .25);
}

.quote-form__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.quote-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width:640px) {
  .quote-form__row {
    grid-template-columns: 1fr;
  }
}

.quote-form__field {
  position: relative;
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
}

/* Un campo nascosto deve restare nascosto: senza questa riga il
   display:flex qui sopra batterebbe l'attributo hidden e la casella
   dello Stato estero resterebbe sempre in vista. */
.quote-form__field[hidden] {
  display: none;
}

/* La casella "qual e' il tuo Stato?" compare solo scegliendo
   "Altro Stato estero": una riga a se, subito sotto il menu. */
.quote-form__field--altro-stato {
  margin-top: -6px;
}

.quote-form__field label {
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--anthracite-70);
  margin-bottom: 8px;
}

.quote-form__field .req {
  color: var(--terracotta);
  margin-left: 3px;
}

.quote-form__optional {
  color: var(--anthracite-70);
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
}

.quote-form__field input[type="text"],
.quote-form__field input[type="email"],
.quote-form__field input[type="tel"],
.quote-form__field select,
.quote-form__field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--greige-dark);
  border-radius: 8px;
  background: var(--ivory);
  color: var(--anthracite);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color .3s var(--ease-soft), box-shadow .3s var(--ease-soft);
}

.quote-form__field textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.6;
}

.quote-form__field select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23905741' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 40px;
}

.quote-form__field input:focus-visible,
.quote-form__field select:focus-visible,
.quote-form__field textarea:focus-visible,
.quote-form__upload:focus-visible {
  outline: none;
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px var(--terracotta-soft);
}

.quote-form__field.has-error input,
.quote-form__field.has-error select,
.quote-form__field.has-error textarea {
  border-color: #B3462F;
  animation: shake .4s var(--ease-soft);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

.quote-form__error {
  display: none;
  margin-top: 7px;
  font-size: .78rem;
  color: #B3462F;
}

.quote-form__field.has-error .quote-form__error {
  display: block;
}

.quote-form__radiogroup {
  border: none;
  padding: 0;
  margin: 0 0 22px;
}

.quote-form__radiogroup legend {
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--anthracite-70);
  margin-bottom: 10px;
  padding: 0;
}

.quote-form__radios {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.quote-form__radio {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border: 1px solid var(--greige-dark);
  border-radius: 999px;
  background: var(--ivory);
  color: var(--anthracite);
  font-size: .92rem;
  cursor: pointer;
  transition: border-color .25s var(--ease-soft), background .25s var(--ease-soft), color .25s var(--ease-soft);
}

.quote-form__radio input {
  appearance: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 1.5px solid var(--greige-dark);
  border-radius: 50%;
  margin: 0;
  position: relative;
  cursor: pointer;
  transition: border-color .25s var(--ease-soft);
}

.quote-form__radio input::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--terracotta);
  transform: scale(0);
  transition: transform .2s var(--ease-soft);
}

.quote-form__radio input:checked::after {
  transform: scale(1);
}

.quote-form__radio input:checked ~ span,
.quote-form__radio:has(input:checked) {
  border-color: var(--terracotta);
}

.quote-form__radio:has(input:checked) {
  background: var(--terracotta-soft);
}

.quote-form__radio input:checked {
  border-color: var(--terracotta);
}

.quote-form__radio:hover {
  border-color: var(--terracotta);
}

.quote-form__radiogroup.has-error .quote-form__radio {
  border-color: #B3462F;
}

.quote-form__upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 28px 20px;
  border: 1.5px dashed var(--greige-dark);
  border-radius: 10px;
  color: var(--anthracite-70);
  font-size: .86rem;
  line-height: 1.6;
  cursor: pointer;
  position: relative;
  transition: border-color .3s var(--ease-soft), background .3s var(--ease-soft);
}

.quote-form__upload svg {
  color: var(--terracotta);
}

.quote-form__upload:hover,
.quote-form__upload.is-dragover {
  border-color: var(--terracotta);
  background: var(--cream);
}

.quote-form__upload-br {
  display: block;
}

.quote-form__upload input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.quote-form__filelist {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quote-form__filelist li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  background: var(--cream);
  border-radius: 8px;
  font-size: .84rem;
  animation: fadeUp .35s var(--ease-soft) both;
}

.quote-form__filelist .file-remove {
  color: var(--anthracite-70);
  font-size: 1.1rem;
  line-height: 1;
  transition: color .25s var(--ease-soft);
}

.quote-form__filelist .file-remove:hover {
  color: #B3462F;
}

.quote-form__submit {
  width: 100%;
  margin-top: 8px;
  padding: 17px 20px;
  border: none;
  border-radius: 999px;
  background: var(--anthracite);
  color: var(--ivory);
  font-size: .84rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background .3s var(--ease-soft), transform .3s var(--ease-soft), opacity .3s var(--ease-soft);
}

.quote-form__submit:hover {
  background: var(--terracotta);
  transform: translateY(-2px);
}

.quote-form__submit:disabled {
  opacity: .65;
  cursor: progress;
  transform: none;
  pointer-events: none;
}

.quote-form__submit-label::after {
  content: '';
  width: 15px;
  height: 15px;
  margin-left: 2px;
  border-radius: 50%;
  border: 2px solid transparent;
  display: none;
}

.quote-form__submit.is-loading .quote-form__submit-label::after {
  display: inline-block;
  border-color: var(--ivory) var(--ivory) transparent transparent;
  animation: spin .7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.quote-form__status {
  margin-top: 16px;
  min-height: 1.4em;
  font-size: .92rem;
  text-align: center;
}

.quote-form__status:empty { margin-top: 0; }

.quote-form__status.is-success,
.quote-form__status.is-error {
  padding: 12px 18px;
  border-radius: 8px;
  font-weight: 600;
  line-height: 1.5;
}

.quote-form__status.is-success {
  color: #2F5C3E;
  background: #E8F0E4;
  border: 1px solid #B9D2B2;
}

.quote-form__status.is-error {
  color: #8A2E1B;
  background: #FBEAE5;
  border: 1px solid #E9BCAE;
}

.quote-form__privacy {
  margin-top: 22px;
  font-size: .78rem;
  line-height: 1.7;
  color: var(--anthracite-70);
  text-align: left;
}

.quote-form__privacy a {
  color: var(--terracotta);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (hover:none), (pointer:coarse), (prefers-reduced-motion: reduce) {
  .quote-form__filelist li {
    animation: none;
  }
}

/* ==========================================================================
   Mini-form email (passaggio 1 del preventivo) e caselle codice OTP
   (passaggio 2) — stesso linguaggio visivo di .quote-form.
   ========================================================================== */
.quote-form__hint {
  margin: 10px 0 0;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--anthracite-70);
}

.otp-form {
  text-align: center;
}

/* Le sei caselle del codice.
   Prima erano larghe 48px fisse, e sul telefono 13vw: il vw è misurato
   sulla finestra, non sulla scheda che le contiene, e dentro un modulo
   con il suo padding sei caselle più cinque spazi sfondavano il bordo.
   Qui sono una griglia di sei colonne uguali dentro il contenitore:
   larghe quanto c'è, mai di più. `min-width: 0` è quello che glielo
   impedisce davvero — senza, ogni casella si rifiuta di scendere sotto
   la propria larghezza naturale e la griglia sborda lo stesso. */
.otp-form__digits {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(5px, 1.8vw, 10px);
  max-width: 340px;
  margin: 4px auto 26px;
}

.otp-form__digit {
  width: 100%;
  min-width: 0;
  aspect-ratio: 42 / 52;
  padding: 0;
  text-align: center;
  font-size: clamp(1.05rem, 5.2vw, 1.5rem);
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--anthracite);
  border: 1px solid var(--greige-dark);
  border-radius: 8px;
  background: var(--ivory);
  transition: border-color .3s var(--ease-soft), box-shadow .3s var(--ease-soft);
}

.otp-form__digit:focus-visible {
  outline: none;
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px var(--terracotta-soft);
}

.otp-form__digit.has-error {
  border-color: #B3462F;
  animation: shake .4s var(--ease-soft);
}

.otp-form__resend {
  display: block;
  margin: 18px auto 0;
  color: var(--terracotta);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: .86rem;
  text-align: center;
}

.otp-form__resend:disabled {
  color: var(--anthracite-70);
  text-decoration: none;
  cursor: default;
  opacity: .75;
}

/* ==========================================================================
   Navigazione tra linee — precedente / successiva
   ========================================================================== */
.model-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6vw;
  margin: 6vw 0 2vw;
}

.model-nav__link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--greige-dark);
  border-radius: 10px;
  background: var(--cream);
  transition: border-color .35s var(--ease-soft), background .35s var(--ease-soft), transform .35s var(--ease-soft);
}

.model-nav__link:hover {
  border-color: var(--terracotta);
  background: var(--ivory);
  transform: translateY(-2px);
}

.model-nav__link img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  flex: 0 0 auto;
}

.model-nav__link span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.model-nav__link--next {
  justify-content: flex-end;
  text-align: right;
}

.model-nav__link--next span {
  align-items: flex-end;
}

.model-nav__link em {
  font-style: normal;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--anthracite-70);
}

.model-nav__link strong {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--anthracite);
}

.model-nav__link:hover strong {
  color: var(--terracotta);
}

@media (max-width:640px) {
  .model-nav {
    grid-template-columns: 1fr;
  }

  .model-nav__link--next {
    justify-content: flex-start;
    text-align: left;
    flex-direction: row-reverse;
  }

  .model-nav__link--next span {
    align-items: flex-start;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: 5vw 0 2.2vw;
  font-size: .83rem;
}

.site-footer__top {
  display: flex;
  /* Logo e nome dell'azienda stavano su una riga sola e basta. A 320px di
     schermo — l'iPhone SE di prima serie, che c'e' ancora in giro — il logo
     rende 232px e la scritta accanto non ci sta piu': insieme facevano 345px
     contro 320 di schermo, e la pagina scorreva di lato. Succedeva su TUTTE
     le pagine, italiane e inglesi, perche' il footer e' lo stesso.
     A 360px ci stavano per un soffio, ed e' per questo che il difetto si
     vedeva solo sugli schermi piu' stretti. */
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  font-family: var(--font-display);
  color: var(--anthracite);
  font-size: 1.5rem;
  margin-bottom: 2.6vw;
}

/* Il marchio e il nome, in fondo, riportano alla home: stesso gesto del
   logo in cima. Restano allineati come prima, solo dentro un link. */
.site-footer__home {
  display: inline-flex;
  /* Deve poter andare a capo come faceva la riga prima che marchio e nome
     finissero dentro lo stesso link: a 320px stanno insieme 345px e senza
     questo la pagina tornerebbe a scorrere di lato. */
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  color: inherit;
  text-decoration: none;
  transition: opacity var(--dur-fade);
}

.site-footer__home:hover,
.site-footer__home:focus-visible {
  opacity: .75;
}

.site-footer__home:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 6px;
  border-radius: 6px;
}

.site-footer__logo {
  height: 92px;
  width: auto;
  /* Il bordo arrotondato c'era da sempre e serve: il logo del footer ha il
     suo fondo chiaro, e l'angolo smussato lo fa leggere come una targhetta
     posata sul beige invece che come un rettangolo incollato. Tolto per
     sbaglio quando avevo provato la versione trasparente. */
  border-radius: 3px;
}

@media (max-width:480px) {
  .site-footer__logo {
    height: 64px;
  }
}

/* Sotto i 380px il logo scende ancora e la scritta rimpicciolisce, cosi'
   nella maggior parte dei casi restano appaiati invece di andare a capo. */
@media (max-width: 380px) {
  .site-footer__top,
  .site-footer__home {
    gap: 12px;
    font-size: 1.22rem;
  }

  .site-footer__logo { height: 52px; }
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3vw;
  padding-bottom: 2.6vw;
  border-bottom: 1px solid var(--greige-dark);
}

@media (max-width:820px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width:560px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 6vw;
  }
}

/* I titoli di colonna del footer sono <h2>, non <h4>: sono sezioni di primo
   livello dentro il landmark footer. Con <h4> le pagine con poco contenuto
   (404, form, conferme) producevano un salto h1 → h4 nella struttura dei
   titoli, che gli screen reader segnalano come gerarchia interrotta. */
.site-footer__grid h2 {
  font-family: var(--font-body);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--anthracite);
  margin-bottom: 12px;
  font-weight: 600;
}

.site-footer__grid p,
.site-footer__grid a {
  display: block;
  line-height: 1.9;
}

.site-footer__grid p a {
  display: inline;
}

.site-footer__grid a:hover {
  color: var(--terracotta);
}

.map-link {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color .3s var(--ease-soft), color .3s var(--ease-soft);
}

.map-link:hover {
  text-decoration-color: var(--terracotta);
  color: var(--terracotta);
}

/* ==========================================================================
   Footer — blocco social (Facebook)
   ========================================================================== */
.footer-social {
  display: flex;
  justify-content: center;
  padding: 1.6vw 0 2.4vw;
}

.footer-social__link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 15px 32px;
  background: var(--terracotta);
  color: var(--ivory);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: .01em;
  text-decoration: none;
  transition: background .3s var(--ease-soft), transform .3s var(--ease-soft);
}

.footer-social__link:hover {
  background: var(--anthracite);
  transform: translateY(-2px);
  color: var(--ivory);
}

.footer-social__icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

@media (max-width:560px) {
  .footer-social__link {
    padding: 13px 22px;
    font-size: 1rem;
    gap: 12px;
  }

  .footer-social__icon {
    width: 28px;
    height: 28px;
  }
}

/* ==========================================================================
   Popup scelta mappa (Apple Maps / Google Maps)
   ========================================================================== */
.map-popup {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6vw;
  background: rgba(44, 39, 33, .72);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease-soft);
}

.map-popup.open {
  opacity: 1;
  pointer-events: auto;
}

.map-popup__panel {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: var(--ivory);
  border-radius: 12px;
  padding: 40px 36px 36px;
  text-align: center;
  transform: translateY(18px) scale(.97);
  transition: transform .45s var(--ease-soft);
  box-shadow: 0 30px 60px -20px rgba(44, 39, 33, .45);
}

.map-popup.open .map-popup__panel {
  transform: translateY(0) scale(1);
}

.map-popup__eyebrow {
  display: block;
  color: var(--terracotta);
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.map-popup__panel h3 {
  margin-top: 12px;
  font-size: 1.6rem;
}

.map-popup__panel p {
  margin-top: 12px;
  font-size: .88rem;
  color: var(--anthracite-70);
  font-weight: 300;
  line-height: 1.6;
}

.map-popup__options {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.map-popup__option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border: 1px solid var(--greige-dark);
  border-radius: 999px;
  font-size: .88rem;
  color: var(--anthracite);
  transition: background .3s var(--ease-soft), border-color .3s var(--ease-soft), color .3s var(--ease-soft), transform .3s var(--ease-soft);
}

.map-popup__option svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  color: var(--terracotta);
  transition: color .3s var(--ease-soft);
}

.map-popup__option:hover {
  background: var(--anthracite);
  border-color: var(--anthracite);
  color: var(--ivory);
  transform: translateY(-2px);
}

.map-popup__option:hover svg {
  color: var(--terracotta-soft);
}

.map-popup__close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--anthracite-70);
  transition: color .25s var(--ease-soft), transform .25s var(--ease-soft);
}

.map-popup__close:hover {
  color: var(--terracotta);
  transform: scale(1.15);
}

.map-popup__close:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 4px;
  border-radius: 4px;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2.2vw;
  font-size: .76rem;
}

.site-footer__legal nav {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.site-footer__legal a:hover {
  color: var(--terracotta);
}

.site-footer__copy {
  margin-top: 14px;
  opacity: .75;
  font-size: .74rem;
}

/* ==========================================================================
   Filosofia — striscia caratteristiche (ispirata al volantino)
   ========================================================================== */
.philosophy__features-head {
  text-align: center;
  margin-top: 8vw;
  margin-bottom: 2.6vw;
}

.philosophy__features-head h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
}

.philosophy__features {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3.2vw 2.4vw;
  padding-top: 3vw;
  border-top: 1px solid var(--greige-dark);
}

.trust-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 22px;
  padding: 10px 24px;
  border: 1px solid var(--terracotta);
  border-radius: 999px;
  color: var(--terracotta);
}

.trust-badge strong {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
}

.trust-badge span {
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--anthracite);
}

@media (max-width:820px) {
  .philosophy__features {
    grid-template-columns: 1fr 1fr;
    gap: 7vw 5vw;
  }
}

@media (max-width:480px) {
  .philosophy__features {
    grid-template-columns: 1fr;
  }
}

.feature {
  text-align: center;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease-soft), transform .6s var(--ease-soft);
}

.philosophy__features.in-view .feature {
  opacity: 1;
  transform: translateY(0);
}

.philosophy__features.in-view .feature:nth-child(1) { transition-delay: .02s; }
.philosophy__features.in-view .feature:nth-child(2) { transition-delay: .10s; }
.philosophy__features.in-view .feature:nth-child(3) { transition-delay: .18s; }
.philosophy__features.in-view .feature:nth-child(4) { transition-delay: .26s; }
.philosophy__features.in-view .feature:nth-child(5) { transition-delay: .34s; }
.philosophy__features.in-view .feature:nth-child(6) { transition-delay: .42s; }
.philosophy__features.in-view .feature:nth-child(7) { transition-delay: .50s; }
.philosophy__features.in-view .feature:nth-child(8) { transition-delay: .58s; }

.feature svg {
  width: 38px;
  height: 38px;
  color: var(--terracotta);
  margin: 0 auto 16px;
  transition: transform .3s var(--ease-soft);
}

.feature:hover svg {
  transform: scale(1.12);
}

.feature :is(h3,h4) {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
}

.feature p {
  margin-top: 8px;
  font-size: .85rem;
  color: var(--anthracite-70);
  font-weight: 300;
  line-height: 1.6;
}

/* ==========================================================================
   Intestazione pagina semplice (Showroom / pagine modello)
   ========================================================================== */
.page-hero {
  padding: 180px 0 6vw;
  background: var(--cream);
  text-align: center;
}

.page-hero .eyebrow {
  color: var(--terracotta);
  font-size: .78rem;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.page-hero h1 {
  margin-top: 16px;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
}

.page-hero h1 .page-hero__suffix {
  font-size: .42em;
  font-weight: 400;
  font-style: italic;
  color: var(--anthracite-70);
  display: inline-block;
}

.page-hero p {
  margin: 18px auto 0;
  max-width: 560px;
  color: var(--anthracite-70);
  font-weight: 300;
  line-height: 1.75;
}

.error404__actions {
  margin-top: 38px;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.page-hero__note {
  display: block;
  margin: 18px auto 0 !important;
  max-width: 620px !important;
  padding: 10px 24px;
  background: var(--cream);
  border: 1px solid var(--greige-dark);
  border-radius: 999px;
  color: var(--anthracite) !important;
  font-size: .86rem !important;
  font-weight: 400 !important;
}

/* La nota lunga delle schede modello.
   .page-hero__note nasce come pillola — border-radius 999px — ed è la
   forma giusta per una riga corta come «Email verificata: …». Su un
   paragrafo di tre righe quel raggio produce due mezzelune vuote ai
   lati larghe quanto mezza altezza del blocco: l'ellisse sproporzionata.
   Qui la nota torna un rettangolo con angoli addolciti, e il testo
   respira invece di stare schiacciato al centro di un ovale. */
.page-hero__note--misura {
  max-width: 680px !important;
  padding: 14px 22px;
  border-radius: 14px;
  line-height: 1.75;
  /* Centrato dentro una cornice sembrava storto: tre righe di lunghezza
     diversa, ognuna che comincia in un punto suo, danno un bordo
     sinistro a zig-zag che l'occhio legge come disordine. Allineato a
     sinistra le righe partono tutte dallo stesso punto e il riquadro
     torna in ordine — il blocco resta centrato nella pagina, è il testo
     dentro che non lo è. */
  text-align: left;
  text-wrap: pretty;
}

@media (max-width: 640px) {
  .page-hero__note--misura {
    padding: 13px 16px;
    border-radius: 12px;
    font-size: .82rem !important;
    text-align: left;
  }
}

.page-hero__note--link {
  text-decoration: none;
  cursor: pointer;
  transition: background .25s var(--ease-soft), border-color .25s var(--ease-soft), transform .25s var(--ease-soft);
}

.page-hero__note--link strong {
  color: var(--terracotta);
  font-weight: 600;
}

.page-hero__note--link:hover,
.page-hero__note--link:focus-visible {
  background: var(--ivory);
  border-color: var(--terracotta);
  transform: translateY(-1px);
}

/* Link "non è la tua email?" dentro il pallino "Email verificata: …":
   solo questa parte è cliccabile (non l'intero pallino), quindi le
   diamo lo stesso trattamento visivo (colore terracotta, grassetto)
   già usato per le azioni cliccabili nelle pagine di assistenza, così
   risulta subito riconoscibile come un pulsante e non come testo fisso. */
.page-hero__note a {
  display: inline-block;
  margin-left: 2px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--terracotta);
  color: #fff !important;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .25s var(--ease-soft), transform .25s var(--ease-soft);
}

.page-hero__note a:hover,
.page-hero__note a:focus-visible {
  background: var(--anthracite);
  transform: translateY(-1px);
}

/* Dentro la nota lunga il link non è un bottone.
   La regola qui sopra lo rende una pillola scura piena: in una riga
   corta funziona, ma dentro un paragrafo di quattro righe è un blocco
   nero piantato a metà frase, che spezza la lettura e obbliga la riga
   ad andare a capo prima del punto. Qui torna un link — terracotta,
   sottolineato — che è come sono scritti tutti gli altri link del sito. */
.page-hero__note--misura a {
  display: inline;
  margin-left: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--terracotta) !important;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: normal;
}

.page-hero__note--misura a:hover,
.page-hero__note--misura a:focus-visible {
  background: none;
  transform: none;
  color: var(--anthracite) !important;
}

.breadcrumb {
  margin-top: 22px;
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--anthracite-70);
}

.breadcrumb a {
  color: var(--terracotta);
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Showroom — griglia famiglie
   ========================================================================== */
.family-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.6vw 2.6vw;
  padding: 7vw 0 9vw;
}

.family-card {
  display: block;
  flex: 0 1 300px;
  max-width: 340px;
}

@media (max-width:900px) {
  .family-card {
    flex-basis: calc(50% - 2.6vw);
  }
}

@media (max-width:560px) {
  .family-card {
    flex-basis: 100%;
    max-width: 420px;
  }
}

.family-card__frame {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 6px;
  overflow: hidden;
  background: var(--greige);
  transition: transform .4s var(--ease-soft), box-shadow .4s var(--ease-soft);
}

.family-card:hover .family-card__frame {
  transform: translateY(-6px);
  box-shadow: 0 18px 34px -14px rgba(44, 39, 33, .32);
}

.family-card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.family-card :is(h2,h3) {
  margin-top: 18px;
  font-size: 1.5rem;
  text-align: center;
}

.family-card .count {
  display: block;
  margin-top: 4px;
  text-align: center;
  font-size: .78rem;
  color: var(--anthracite-70);
  letter-spacing: .05em;
}

/* ==========================================================================
   Pagine modello — sezioni + gallery a rapporti misti
   ========================================================================== */
.model-section {
  padding: 5vw 0;
}

.model-section:not(:last-of-type) {
  border-bottom: 1px solid var(--greige);
}

.model-section__head {
  margin-bottom: 2.6vw;
}

.model-section__head h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
}

.model-section__head p {
  margin-top: 10px;
  color: var(--anthracite-70);
  font-weight: 300;
  max-width: none;
}

.model-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4vw;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  cursor: zoom-in;
  aspect-ratio: 4/3;
  background: var(--greige);
  transition: transform .4s var(--ease-soft), box-shadow .4s var(--ease-soft), opacity .6s var(--ease-soft);
  opacity: 0;
}

/* galleria con una sola foto (QBO): centrata, senza colonna vuota a fianco */
.model-gallery--single {
  /* 480px: oltre questa misura la foto del QBO verrebbe ingrandita troppo
     rispetto ai pixel reali dello scatto e su schermi 2x apparirebbe sfocata */
  grid-template-columns: minmax(0, 480px);
  justify-content: center;
}

.model-gallery.in-view .gallery-item {
  opacity: 1;
}

.model-gallery.in-view .gallery-item:nth-child(1) { transition-delay: .05s; }
.model-gallery.in-view .gallery-item:nth-child(2) { transition-delay: .12s; }
.model-gallery.in-view .gallery-item:nth-child(3) { transition-delay: .19s; }
.model-gallery.in-view .gallery-item:nth-child(4) { transition-delay: .26s; }
.model-gallery.in-view .gallery-item:nth-child(5) { transition-delay: .33s; }
.model-gallery.in-view .gallery-item:nth-child(6) { transition-delay: .40s; }

.gallery-item:hover {
  transform: translateY(-4px);
}

/* ==========================================================================
   Assistenza — scelta iniziale tra "possiedo già una stufa" e "no"
   ========================================================================== */
.assist-choice {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin: 0 auto;
  max-width: 900px;
}

.assist-choice__card {
  flex: 1 1 340px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 42px 32px;
  background: var(--ivory);
  border: 1px solid var(--greige-dark);
  border-radius: 18px;
  text-decoration: none;
  color: var(--anthracite);
  transition: transform .3s var(--ease-soft), box-shadow .3s var(--ease-soft), border-color .3s var(--ease-soft);
}

.assist-choice__card:hover,
.assist-choice__card:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 22px 44px -18px rgba(44, 39, 33, .28);
  border-color: var(--terracotta);
}

.assist-choice__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--terracotta);
}

.assist-choice__card :is(h2,h3) {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 500;
}

.assist-choice__card p {
  margin: 0;
  font-size: .92rem;
  color: var(--anthracite-70);
  line-height: 1.55;
}

.assist-choice__cta {
  margin-top: 8px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--terracotta);
  letter-spacing: .04em;
}

.gallery-item.is-hero {
  grid-column: 1 / -1;
  aspect-ratio: 21/9;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 1s var(--ease-soft);
}

/* Per le foto che non vanno ritagliate (es. quando il taglio del cliente
   e la forma della cornice non combaciano): l'immagine si vede per intero,
   con lo sfondo neutro del contenitore a riempire lo spazio che resta. */
.img-contain {
  object-fit: contain !important;
  background: var(--cream);
}

.gallery-item:hover img {
  transform: scale(1.05);
}

@media (max-width:640px) {
  .model-gallery {
    grid-template-columns: 1fr;
  }

  .gallery-item.is-hero {
    aspect-ratio: 4/3;
  }
}

/* ==========================================================================
   Caratteristiche tecniche
   ========================================================================== */
.specs {
  margin-top: 2.2vw;
  padding: 2vw 2.2vw;
  background: var(--ivory);
  border: 1px solid var(--greige-dark);
  border-radius: 8px;
}

.specs h3 {
  font-size: 1.2rem;
  margin-bottom: 6px;
}

.specs__note {
  font-size: .8rem;
  color: var(--anthracite-70);
  font-style: italic;
  margin-top: 14px;
}

.specs__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 3vw;
  margin: 14px 0 0;
}

.specs__list>div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--greige);
  font-size: .86rem;
}

.specs__list dt {
  color: var(--anthracite-70);
  font-weight: 400;
  margin: 0;
}

.specs__list dd {
  margin: 0;
  font-weight: 500;
  text-align: right;
}

@media (max-width:600px) {
  .specs__list {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Personalizzazioni — nota inline
   ========================================================================== */
.customize__hint {
  margin-top: 10px;
  font-size: .85rem;
  font-style: italic;
  color: var(--anthracite-70);
}

.customize__hint a {
  color: var(--terracotta);
  font-style: normal;
}

.customize__hint a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Toast — conferma copia email
   ========================================================================== */
.toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(20px);
  z-index: 900;
  background: var(--anthracite);
  color: var(--ivory);
  padding: 14px 26px;
  border-radius: 999px;
  font-size: .82rem;
  letter-spacing: .02em;
  box-shadow: 0 16px 34px -12px rgba(44, 39, 33, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease-soft), transform .35s var(--ease-soft);
  max-width: 90vw;
  text-align: center;
}

.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width:480px) {
  .toast {
    bottom: 20px;
    font-size: .78rem;
    padding: 12px 20px;
  }
}

/* ==========================================================================
   Torna su — pulsante flottante
   ========================================================================== */
.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 150;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--anthracite);
  color: var(--ivory);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .35s var(--ease-soft), transform .35s var(--ease-soft), background .3s;
  border: 0;
}

.to-top.visible {
  opacity: .9;
  pointer-events: auto;
  transform: translateY(0);
}

.to-top:hover {
  background: var(--terracotta);
  opacity: 1;
}

.to-top svg {
  width: 18px;
  height: 18px;
}

@media (max-width:600px) {
  .to-top {
    right: 14px;
    bottom: 14px;
    width: 42px;
    height: 42px;
  }
}

/* Sollevamento leggero delle card al passaggio del mouse */
.family-card__frame,
.gallery-item,
.showcase__stage {
  transition: transform .4s var(--ease-soft), box-shadow .4s var(--ease-soft);
}

.family-card:hover .family-card__frame,
.gallery-item:hover {
  box-shadow: 0 16px 34px -18px rgba(44, 39, 33, .35);
}

/* ==========================================================================
   Personalizzazioni — colori e forme ceramiche
   ========================================================================== */
.personalizzazioni .model-section__head p {
  max-width: none;
}

.swatch-block {
  margin-top: 3.2vw;
}

.swatch-block h3 {
  font-size: 1.25rem;
  margin-bottom: 1.6vw;
}

.swatch-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.6vw 1.8vw;
  max-width: 640px;
  margin: 0 auto;
}

.swatch-grid--opachi {
  max-width: 400px;
}

.swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  
  transform: translateY(14px) scale(.94);
  transition: opacity .5s var(--ease-soft), transform .5s var(--ease-soft);
}

.reveal.in-view .swatch {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.forme-item {
  
  transform: translateY(16px);
  transition: opacity .55s var(--ease-soft), transform .55s var(--ease-soft);
}

.reveal.in-view .forme-item {
  opacity: 1;
  transform: translateY(0);
}

/* sfalsamento (stagger) dell'ingresso per le griglie di personalizzazione */
.swatch-grid .swatch:nth-child(1) { transition-delay: .02s; }
.swatch-grid .swatch:nth-child(2) { transition-delay: .06s; }
.swatch-grid .swatch:nth-child(3) { transition-delay: .10s; }
.swatch-grid .swatch:nth-child(4) { transition-delay: .14s; }
.swatch-grid .swatch:nth-child(5) { transition-delay: .18s; }
.swatch-grid .swatch:nth-child(6) { transition-delay: .06s; }
.swatch-grid .swatch:nth-child(7) { transition-delay: .10s; }
.swatch-grid .swatch:nth-child(8) { transition-delay: .14s; }
.swatch-grid .swatch:nth-child(9) { transition-delay: .18s; }
.swatch-grid .swatch:nth-child(10) { transition-delay: .22s; }
.swatch-grid .swatch:nth-child(11) { transition-delay: .10s; }
.swatch-grid .swatch:nth-child(12) { transition-delay: .14s; }
.swatch-grid .swatch:nth-child(13) { transition-delay: .18s; }
.swatch-grid .swatch:nth-child(14) { transition-delay: .22s; }
.swatch-grid .swatch:nth-child(15) { transition-delay: .26s; }

.forme-item:nth-child(1) { transition-delay: .05s; }
.forme-item:nth-child(2) { transition-delay: .15s; }
.forme-item:nth-child(3) { transition-delay: .25s; }

.swatch__color {
  width: 84px;
  height: 84px;
  border-radius: 22%;
  box-shadow: 0 2px 6px rgba(44, 39, 33, .18);
  transition: transform .3s var(--ease-soft);
}

.swatch:hover .swatch__color {
  transform: scale(1.08);
}

.swatch__color--matte {
  background-image: url('../assets/img/texture-puntinato.png');
  background-size: 30px 30px;
  background-repeat: repeat;
  box-shadow: inset 0 0 0 1px rgba(44, 39, 33, .12), 0 3px 8px rgba(44, 39, 33, .18);
}

.swatch--opaco .swatch__label {
  font-size: .82rem;
}

.swatch__color--pattern {
  border-radius: 22%;
  background-image:
    conic-gradient(var(--c2) 90deg, var(--c1) 90deg 180deg, var(--c2) 180deg 270deg, var(--c1) 270deg);
  background-size: 50% 50%;
  box-shadow: inset 0 0 0 1px rgba(44, 39, 33, .12), 0 3px 8px rgba(44, 39, 33, .18);
}

.swatch-grid--artline {
  max-width: 480px;
  gap: 2.6vw 2.2vw;
}

.swatch-grid--artline .swatch__color {
  width: 78px;
  height: 78px;
}

.swatch__label {
  font-size: .74rem;
  color: var(--anthracite-70);
  line-height: 1.3;
}

.forme-block {
  margin-top: 3.6vw;
}

.forme-block h3 {
  font-size: 1.25rem;
}

.forme-block>p {
  margin-top: 8px;
  color: var(--anthracite-70);
  font-weight: 300;
  max-width: none;
}

.forme-grid {
  margin-top: 1.8vw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8vw;
}

.forme-grid--single {
  grid-template-columns: minmax(0, 340px);
  justify-content: center;
}

.forme-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  perspective: 900px;
}

.forme-item__tile {
  width: 100%;
  aspect-ratio: 1/1;
  background: var(--ivory);
  border: 1px solid var(--greige-dark);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6%;
  overflow: hidden;
  color: var(--anthracite);
  box-shadow: 0 4px 14px -8px rgba(44, 39, 33, .2);
  transition: border-color .35s var(--ease-soft), box-shadow .35s var(--ease-soft), color .35s var(--ease-soft), transform .35s var(--ease-soft);
}

.forme-item__tile svg {
  width: 100%;
  height: 100%;
}

.forme-item__tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.forme-item:hover .forme-item__tile {
  border-color: var(--terracotta);
  color: var(--terracotta);
  transform: translateY(-4px);
  box-shadow: 0 22px 40px -16px rgba(44, 39, 33, .38);
}

.forme-item__label {
  font-size: .82rem;
  color: var(--anthracite-70);
  letter-spacing: .02em;
}

@media (max-width:640px) {
  .forme-grid {
    grid-template-columns: 1fr 1fr;
  }

  .forme-item:last-child {
    grid-column: 1 / -1;
    max-width: 240px;
    margin: 0 auto;
  }
}

/* ==========================================================================
   Personalizzazione art-line (Ambra, Caterina)
   ========================================================================== */
.artline-block {
  margin-top: 3.2vw;
}

.artline-block h3 {
  font-size: 1.25rem;
  margin-bottom: .6vw;
}

.artline-block>p {
  color: var(--anthracite-70);
  font-weight: 300;
  max-width: none;
}

.artline-grid {
  margin-top: 1.6vw;
  display: flex;
  flex-direction: column;
  gap: 1.2vw;
}

.artline-panel {
  background: var(--ivory);
  border: 1px solid var(--greige-dark);
  border-radius: 8px;
  padding: 1.4vw 1.8vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.artline-panel img {
  max-width: 100%;
  height: auto;
}

/* utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   Filosofia — la brace che si accende, riga dopo riga, mentre scorri
   ========================================================================== */
.philosophy__text .eyebrow {
  position: relative;
  padding-left: 24px;
}

.philosophy__text .eyebrow::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--terracotta);
  opacity: 0;
  transform: translateY(-50%) scale(.3);
  transition: opacity .7s var(--ease-soft) .25s, transform .7s var(--ease-soft) .25s, box-shadow .7s var(--ease-soft) .25s;
}

.philosophy__text.reveal.in-view .eyebrow::before {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  box-shadow: 0 0 14px 4px rgba(144, 87, 65, .5);
}

/* ==========================================================================
   Griglia caratteristiche — le icone si disegnano all'ingresso in vista
   ========================================================================== */
.philosophy__features .feature svg * {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  transition: stroke-dashoffset 1.2s var(--ease-soft);
}

.philosophy__features.in-view .feature svg * {
  stroke-dashoffset: 0;
}

.philosophy__features .feature:nth-child(1) svg * { transition-delay: .02s; }
.philosophy__features .feature:nth-child(2) svg * { transition-delay: .10s; }
.philosophy__features .feature:nth-child(3) svg * { transition-delay: .18s; }
.philosophy__features .feature:nth-child(4) svg * { transition-delay: .26s; }
.philosophy__features .feature:nth-child(5) svg * { transition-delay: .34s; }
.philosophy__features .feature:nth-child(6) svg * { transition-delay: .42s; }
.philosophy__features .feature:nth-child(7) svg * { transition-delay: .50s; }
.philosophy__features .feature:nth-child(8) svg * { transition-delay: .58s; }

@media (prefers-reduced-motion: reduce) {
  .philosophy__features .feature svg * {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    transition: none;
  }
}

/* ==========================================================================
   Showroom — gradiente vivo che respira dietro alla call to action
   ========================================================================== */
.showroom {
  position: relative;
  overflow: hidden;
}

.showroom::before {
  content: '';
  position: absolute;
  inset: -25%;
  background: radial-gradient(circle at 50% 45%, rgba(144, 87, 65, .16) 0%, rgba(144, 87, 65, 0) 60%);
  animation: emberBreathe 9s ease-in-out infinite;
  pointer-events: none;
}

.showroom .container {
  position: relative;
  z-index: 1;
}

@keyframes emberBreathe {
  0%, 100% { transform: scale(1); opacity: .65; }
  50% { transform: scale(1.18); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .showroom::before {
    animation: none;
  }
}

/* ==========================================================================
   FAQ — apertura fluida al posto dello scatto nativo di <details>
   ========================================================================== */
.faq__item p {
  display: block;
  overflow: hidden;
  transition: height .4s var(--ease-soft), opacity .3s var(--ease-soft);
}

/* ==========================================================================
   Barra di avanzamento lettura
   ========================================================================== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--terracotta), var(--terracotta-soft));
  z-index: 1000;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress {
    display: none;
  }
}

/* ==========================================================================
   Bagliore cursore — accompagna il puntatore fuori dall'hero
   ========================================================================== */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(144, 87, 65, .14) 0%, rgba(144, 87, 65, 0) 72%);
  pointer-events: none;
  z-index: 5;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .4s var(--ease-soft);
  mix-blend-mode: multiply;
}

.cursor-glow.active {
  opacity: 1;
}

@media (hover:none), (pointer:coarse), (prefers-reduced-motion: reduce) {
  .cursor-glow {
    display: none;
  }
}

/* ==========================================================================
   Braci — canvas atmosferico nell'hero della home
   ========================================================================== */
.hero-embers {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ==========================================================================
   Intestazione di pagina (Showroom / pagine modello) — ingresso morbido
   ========================================================================== */
.page-hero {
  position: relative;
  overflow: hidden;
}

.page-hero .eyebrow,
.page-hero h1,
.page-hero p,
.page-hero .breadcrumb,
.error404__actions {
  opacity: 0;
  animation: fadeUp .8s var(--ease-soft) forwards;
}

/* Ritardi a cascata compressi.
   ---------------------------------------------------------------------
   Su queste pagine l'<h1> è quasi sempre l'elemento più grande sopra la
   piega, quindi è lui a determinare l'LCP. Finché resta a opacity:0 il
   browser lo considera non disegnato: ogni millisecondo di
   animation-delay finiva dritto nel punteggio. La scala è stata quindi
   compressa (h1 da 160ms a 60ms) mantenendo lo stesso effetto a cascata,
   percettivamente identico ma con 100ms in meno sull'LCP. */
.page-hero .eyebrow { animation-delay: .02s; }
.page-hero h1 { animation-delay: .06s; }
.page-hero p { animation-delay: .16s; }
.page-hero .page-hero__note { animation-delay: .16s; }
.page-hero .breadcrumb { animation-delay: .24s; }
.error404__actions { animation-delay: .26s; }

@media (prefers-reduced-motion: reduce) {
  .page-hero .eyebrow,
  .page-hero h1,
  .page-hero p,
  .page-hero .breadcrumb {
    opacity: 1;
    animation: none;
  }
}

/* ==========================================================================
   Titolo hero — ingresso parola per parola
   ========================================================================== */
.hero__title.is-split {
  opacity: 1;
  animation: none;
}

.hero__title .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .08em;
  margin-bottom: -.08em;
}

.hero__title .word-inner {
  display: inline-block;
  opacity: 0;
  transform: translateY(115%) rotate(4deg);
  animation: wordUp .85s var(--ease-soft) forwards;
}

@keyframes wordUp {
  to {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
}

/* ==========================================================================
   Numeri animati (statistiche)
   ========================================================================== */
.stat__num,
.trust-badge strong {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Pulsanti — transizione e ombra morbida al passaggio del mouse
   ========================================================================== */
.showroom__cta,
.catalog__more a,
.certification__btn {
  transition: background .35s var(--ease-soft), color .35s var(--ease-soft), transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft);
}

.showroom__cta:hover,
.catalog__more a:hover {
  box-shadow: 0 14px 30px -16px rgba(44, 39, 33, .4);
}

.certification__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border: 1px solid var(--anthracite);
  border-radius: 999px;
  background: var(--anthracite);
  color: var(--ivory);
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.certification__btn:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -16px rgba(44, 39, 33, .4);
}

.certification__btn--outline {
  background: transparent;
  color: var(--anthracite);
}

.certification__btn--outline:hover {
  background: var(--anthracite);
  border-color: var(--anthracite);
  color: var(--ivory);
}

/* ==========================================================================
   Cataloghi — griglia di documenti scaricabili
   ========================================================================== */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2.6vw;
  padding: 4vw 0 8vw;
}

.catalog-card {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--greige-dark);
  border-radius: 12px;
  overflow: hidden;
  transition: transform .4s var(--ease-soft), box-shadow .4s var(--ease-soft), border-color .4s var(--ease-soft);
}

.catalog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 44px -22px rgba(44, 39, 33, .38);
  border-color: var(--terracotta-soft);
}

.catalog-card__cover {
  display: block;
  aspect-ratio: .705;
  background: var(--greige);
  overflow: hidden;
}

.catalog-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease-soft);
}

.catalog-card:hover .catalog-card__cover img {
  transform: scale(1.04);
}

.catalog-card__body {
  padding: 1.8vw 2vw 2.2vw;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.catalog-card__body .eyebrow {
  color: var(--terracotta);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.catalog-card__body :is(h2,h3) {
  margin-top: 10px;
  font-size: 1.5rem;
  transition: color .35s var(--ease-soft);
}

.catalog-card:hover .catalog-card__body :is(h2,h3) {
  color: var(--terracotta);
}

.catalog-card__body p {
  margin-top: 12px;
  color: var(--anthracite-70);
  font-weight: 300;
  line-height: 1.7;
  flex: 1;
}

.catalog-card__meta {
  display: block;
  margin-top: 14px;
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--anthracite-70);
}

.catalog-card__actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.catalog-card--soon {
  background: var(--ivory);
  border-style: dashed;
}

.catalog-card__soon {
  aspect-ratio: .705;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--greige-dark);
  background: var(--cream);
}

.catalog-card__soon svg {
  width: 44px;
  height: 44px;
}

.catalog-card__soon span {
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--anthracite-70);
}

@media (max-width:560px) {
  .catalog-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Vignetta calda — bagliore che emerge dai bordi al passaggio del mouse
   (sostituisce l'inclinazione: nessuna rotazione, solo calore che sale)
   ========================================================================== */
.family-card__frame,
.gallery-item {
  position: relative;
}

.showcase__stage::after,
.family-card__frame::after,
.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 0 0 0 rgba(144, 87, 65, 0);
  background: radial-gradient(circle at 50% 100%, rgba(144, 87, 65, .22) 0%, rgba(144, 87, 65, 0) 62%);
  opacity: 0;
  transition: opacity .6s var(--ease-soft);
}

.showcase__stage:hover::after,
.family-card:hover .family-card__frame::after,
.gallery-item:hover::after {
  opacity: 1;
}

.showcase__stage img,
.family-card__frame img,
.gallery-item img {
  transition: transform 1.4s var(--ease-soft);
}

.showcase__stage:hover img,
.family-card:hover .family-card__frame img {
  transform: scale(1.045);
}

/* ==========================================================================
   Banner cookie / consenso
   ========================================================================== */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
  justify-content: space-between;
  padding: 22px 5vw;
  background: var(--ivory);
  border-top: 1px solid var(--greige-dark);
  box-shadow: 0 -12px 40px rgba(44, 39, 33, .14);
  transform: translateY(110%);
  transition: transform .5s var(--ease-soft);
}

.cookie-banner.is-visible {
  transform: translateY(0);
}

.cookie-banner__text {
  flex: 1 1 420px;
  max-width: 640px;
}

.cookie-banner__text p {
  margin: 0 0 4px;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--anthracite-70);
}

.cookie-banner__text strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--anthracite);
}

.cookie-banner__text a {
  color: var(--terracotta);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cookie-btn {
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background .25s var(--ease-soft), color .25s var(--ease-soft), transform .25s var(--ease-soft);
}

.cookie-btn--primary {
  border: none;
  background: var(--anthracite);
  color: var(--ivory);
}

.cookie-btn--primary:hover {
  background: var(--terracotta);
  transform: translateY(-1px);
}

.cookie-btn--outline {
  border: 1px solid var(--greige-dark);
  background: none;
  color: var(--anthracite);
}

.cookie-btn--outline:hover {
  border-color: var(--anthracite);
}

.cookie-btn--ghost {
  border: none;
  background: none;
  color: var(--anthracite-70);
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 12px 8px;
}

/* ---- Pannello di personalizzazione ---- */
.cookie-panel {
  position: fixed;
  inset: 0;
  z-index: 501;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6vw;
  background: rgba(44, 39, 33, 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease-soft), background .35s var(--ease-soft);
}

.cookie-panel.is-visible {
  opacity: 1;
  pointer-events: auto;
  background: rgba(44, 39, 33, .45);
}

.cookie-panel__box {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--ivory);
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 30px 70px rgba(44, 39, 33, .3);
  transform: translateY(16px);
  transition: transform .35s var(--ease-soft);
}

.cookie-panel.is-visible .cookie-panel__box {
  transform: translateY(0);
}

.cookie-panel__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  border: none;
  background: var(--cream);
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--anthracite-70);
  cursor: pointer;
  transition: background .25s var(--ease-soft);
}

.cookie-panel__close:hover {
  background: var(--greige);
}

.cookie-panel__box h2 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  margin: 0 0 10px;
}

.cookie-panel__intro {
  font-size: .88rem;
  color: var(--anthracite-70);
  line-height: 1.6;
  margin: 0 0 26px;
}

.cookie-category {
  padding: 18px 0;
  border-top: 1px solid var(--greige);
}

.cookie-category:last-of-type {
  border-bottom: 1px solid var(--greige);
}

.cookie-category__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.cookie-category__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
}

.cookie-category p {
  margin: 0;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--anthracite-70);
}

.cookie-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  border: none;
  background: var(--greige-dark);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .25s var(--ease-soft);
}

.cookie-toggle__dot {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .25s var(--ease-soft);
}

.cookie-toggle.is-on {
  background: var(--terracotta);
}

.cookie-toggle.is-on .cookie-toggle__dot {
  transform: translateX(20px);
}

.cookie-toggle--locked {
  background: var(--anthracite-70);
  cursor: default;
  opacity: .6;
}

.cookie-toggle--locked .cookie-toggle__dot {
  transform: translateX(20px);
}

.cookie-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

@media (max-width: 640px) {
  .cookie-banner {
    padding: 18px 6vw;
    justify-content: center;
    text-align: center;
  }

  .cookie-banner__actions {
    width: 100%;
    justify-content: center;
  }

  .cookie-panel {
    padding: 0;
    align-items: flex-end;
  }

  .cookie-panel__box {
    max-width: none;
    width: 100%;
    max-height: 90vh;
    border-radius: 20px 20px 0 0;
  }
}

/* ==========================================================================
   Pagine legali (Privacy, Cookie Policy, Termini e Condizioni)
   ========================================================================== */
.legal-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 4vw 0 8vw;
}

.legal-content__updated {
  font-size: .82rem;
  color: var(--anthracite-70);
  margin: -1.4rem 0 3rem;
}

/* Le pagine legali restano piu' compatte del resto del sito — hanno venti
   sezioni brevi, e un titolo da quarantasei pixel per «4. Base giuridica
   del trattamento» sarebbe fuori scala. Ma compatto non vuol dire di un
   altro carattere: il peso 600 e il corpo di 1,5rem le staccavano dal
   sistema tipografico, e lette di seguito a una pagina qualsiasi
   sembravano composte con un altro font. Qui restano piccole ma tornano
   nella stessa famiglia di pesi del sito. */
.legal-content h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.2vw, 2rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 2.6rem 0 1rem;
}

.legal-content h2:first-of-type {
  margin-top: 0;
}

.legal-content h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;      /* 600 è il peso con cui il sito marca ovunque */
  color: var(--anthracite);
  margin: 1.8rem 0 .6rem;
}

/* Era questa la vera differenza. Il resto del sito compone il testo con
   peso 300 e inchiostro al settanta per cento; qui stava a peso 400 e a
   piena opacita'. Stessa famiglia — Inter — ma piu' pesante e piu' nera,
   e l'occhio la legge come un carattere diverso. Il contrasto sul fondo
   avorio resta 5,2:1, sopra la soglia AA anche per un testo legale. */
.legal-content p {
  font-weight: 300;
  line-height: 1.8;
  margin: 0 0 1.1rem;
  color: var(--anthracite-70);
}

.legal-content ul,
.legal-content ol {
  font-weight: 300;
  line-height: 1.8;
  margin: 0 0 1.1rem;
  padding-left: 1.4rem;
  color: var(--anthracite-70);
}

.legal-content li {
  margin-bottom: .5rem;
}

.legal-content a {
  color: var(--terracotta);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Ora che il testo è al settanta per cento, il grassetto torna a piena
   opacità: è quello a farlo staccare, non un peso ancora più alto. */
.legal-content strong {
  font-weight: 600;
  color: var(--anthracite);
}

.legal-content__table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.6rem;
  font-size: .92rem;
}

.legal-content__table th,
.legal-content__table td {
  text-align: left;
  padding: 10px 14px;
  border: 1px solid var(--greige-dark);
  vertical-align: top;
}

.legal-content__table th {
  background: var(--cream);
  font-weight: 700;
}

.legal-content__box {
  background: var(--cream);
  border-left: 3px solid var(--terracotta);
  border-radius: 2px;
  padding: 18px 22px;
  margin: 0 0 1.6rem;
  font-size: .92rem;
  line-height: 1.7;
}

.legal-content__disclaimer {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--greige);
  font-size: .8rem;
  color: var(--anthracite-70);
  line-height: 1.7;
}

.legal-manage-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid var(--anthracite);
  background: none;
  color: var(--anthracite);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .88rem;
  cursor: pointer;
  transition: background .25s var(--ease-soft), color .25s var(--ease-soft);
}

.legal-manage-btn:hover {
  background: var(--anthracite);
  color: var(--ivory);
}

/* ==========================================================================
   FAQ section (homepage)
   ========================================================================== */
.faq {
  margin-top: 5vw;
  margin-bottom: 8vw;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.faq .eyebrow {
  display: block;
  text-align: center;
  margin-bottom: 0.5rem;
}

.faq h2 {
  text-align: center;
  margin-bottom: 3rem;
}

.faq__item {
  border-top: 1px solid var(--greige-dark);
}

.faq__item:last-child {
  border-bottom: 1px solid var(--greige-dark);
}

.faq__question {
  list-style: none;
  cursor: pointer;
  padding: 20px 30px 20px 0;
  position: relative;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--anthracite);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: color .3s var(--ease-soft);
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 18px;
  font-size: 1.4rem;
  color: var(--terracotta);
  transition: transform .3s var(--ease-soft);
  flex-shrink: 0;
}

.faq__item[open] .faq__question::after {
  content: '−';
}

.faq__answer {
  padding-bottom: 1.25rem;
  line-height: 1.65;
  color: var(--anthracite);
  opacity: .85;
}

/* ==========================================================================
   Decorative section divider — terracotta dot + horizontal lines
   ========================================================================== */
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 auto;
  max-width: 200px;
  padding: 4vw 0;
}

.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--greige-dark);
}

.section-divider i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
  flex-shrink: 0;
}

/* ==========================================================================
   Hero eyebrow — flanking horizontal lines (luxury detail)
   ========================================================================== */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.hero__eyebrow::before,
.hero__eyebrow::after {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--terracotta-soft);
  opacity: .6;
}

/* ==========================================================================
   Feature icon — terracotta glow ring on hover
   ========================================================================== */
.feature svg {
  position: relative;
}

.feature:hover svg {
  filter: drop-shadow(0 0 8px rgba(144, 87, 65, .35));
}

/* ==========================================================================
   Brand-case — top terracotta accent border
   ========================================================================== */
.brand-case {
  border-top: 2px solid var(--terracotta);
  position: relative;
}

.brand-case::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background: var(--terracotta-soft);
  border-radius: 2px;
}

/* ==========================================================================
   Footer — smooth gradient transition from content
   ========================================================================== */
.site-footer {
  position: relative;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--footer-bg));
  pointer-events: none;
}

.site-footer::before {
  display: none;
}

.site-footer {
  border-top: 1px solid var(--greige-dark);
  box-shadow: 0 -14px 26px -20px rgba(44, 39, 33, .3);
}

/* ==========================================================================
   FAQ — terracotta left border on open items
   ========================================================================== */
.faq__item[open] {
  border-left: 3px solid var(--terracotta);
  padding-left: 16px;
  margin-left: -19px;
  transition: border-color .3s var(--ease-soft);
}

/* ==========================================================================
   Catalog card — terracotta bottom accent line on hover
   ========================================================================== */
.catalog-card {
  position: relative;
  overflow: hidden;
}

.catalog-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--terracotta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-soft);
}

.catalog-card:hover::after {
  transform: scaleX(1);
}

/* ==========================================================================
   Form input — label color transition on focus
   ========================================================================== */
.quote-form__field:has(input:focus-visible) label,
.quote-form__field:has(select:focus-visible) label,
.quote-form__field:has(textarea:focus-visible) label {
  color: var(--terracotta);
  transition: color .3s var(--ease-soft);
}

.quote-form__field input,
.quote-form__field select,
.quote-form__field textarea {
  transition: border-color .3s var(--ease-soft), box-shadow .3s var(--ease-soft), background .3s var(--ease-soft);
}

.quote-form__field input:focus-visible,
.quote-form__field select:focus-visible,
.quote-form__field textarea:focus-visible {
  background: #FFFBF7;
}

/* ==========================================================================
   Page-hero — subtle warm gradient background
   ========================================================================== */
.page-hero {
  background: linear-gradient(180deg, var(--cream) 0%, var(--ivory) 100%);
}

/* ==========================================================================
   Reduced-motion: neutralizza animazioni aggiunte
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .nav__toggle.is-open::before,
  .nav__toggle.is-open::after {
    transform: none;
  }

  .feature,
  .philosophy__features.in-view .feature {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .gallery-item,
  .model-gallery.in-view .gallery-item {
    opacity: 1;
    transition: none;
  }

  .showcase__stage .img-fade.is-active {
    scale: 1;
  }

  .quote-form__field.has-error input,
  .quote-form__field.has-error select {
    animation: none;
  }

  .compare__table tbody tr {
    transition: none;
  }

  .feature svg {
    transition: none;
  }

  .brand-case__item {
    transition: none;
  }
}

/* ==========================================================================
   Calendario di prenotazione showroom (prenota-showroom-form.php)
   ========================================================================== */
.booking-calendar-field {
  margin-top: 6px;
}

.booking-calendar {
  background: var(--cream);
  border: 1px solid var(--greige-dark);
  border-radius: 14px;
  padding: 22px 22px 26px;
  margin-top: 10px;
  position: relative;
  min-height: 120px;
}

.booking-calendar.is-loading {
  opacity: .55;
  pointer-events: none;
}

.booking-calendar__loading,
.booking-calendar__error {
  margin: 0;
  text-align: center;
  padding: 30px 10px;
  color: var(--anthracite-70);
  font-size: .92rem;
}

.booking-calendar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.booking-calendar__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--anthracite);
  text-transform: capitalize;
}

.booking-calendar__nav {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--greige-dark);
  background: var(--ivory);
  color: var(--anthracite);
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .25s var(--ease-soft), border-color .25s var(--ease-soft), transform .25s var(--ease-soft), opacity .25s var(--ease-soft);
}

.booking-calendar__nav:hover:not(:disabled) {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: #fff;
  transform: translateY(-1px);
}

.booking-calendar__nav:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.booking-calendar__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}

.booking-calendar__weekdays span {
  text-align: center;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--anthracite-70);
}

.booking-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.booking-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: none;
  font-family: var(--font-body);
  padding: 4px 2px;
  cursor: default;
}

.booking-day--outside {
  visibility: hidden;
}

.booking-day--muted {
  color: var(--anthracite-70);
  opacity: .45;
}

.booking-day--full {
  background: var(--urgent-bg);
  color: var(--urgent);
  opacity: .8;
}

.booking-day--open {
  background: var(--fresh-bg);
  color: #33552F;
  cursor: pointer;
  transition: transform .2s var(--ease-soft), box-shadow .2s var(--ease-soft), background .2s var(--ease-soft);
}

.booking-day--open:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -10px rgba(44, 39, 33, .35);
}

.booking-day--open.is-selected {
  background: var(--fresh);
  color: #fff;
  border-color: var(--fresh);
}

.booking-day__num {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
}

.booking-day__label {
  font-size: .58rem;
  letter-spacing: .01em;
  text-align: center;
  line-height: 1.15;
}

.booking-slots {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px dashed var(--greige-dark);
}

.booking-slots:empty {
  display: none;
}

.booking-slots__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--anthracite);
  text-transform: capitalize;
}

.booking-slots__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}

.booking-slot {
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  border: 1.5px solid transparent;
}

.booking-slot--free {
  background: var(--fresh-bg);
  color: #33552F;
  border-color: var(--fresh);
  cursor: pointer;
  transition: background .2s var(--ease-soft), transform .2s var(--ease-soft);
}

.booking-slot--free:hover {
  transform: translateY(-2px);
}

.booking-slot--free.is-selected {
  background: var(--fresh);
  color: #fff;
}

.booking-slot--taken {
  background: var(--urgent-bg);
  color: var(--urgent);
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: not-allowed;
  opacity: .85;
}

.booking-slot__note {
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .01em;
  text-transform: none;
  opacity: .9;
}

.booking-summary {
  margin: 14px 0 0;
  font-size: .9rem;
  font-weight: 600;
  color: var(--anthracite-70);
  text-align: center;
}

.booking-summary.is-set {
  color: var(--terracotta);
}

.booking-perks {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .booking-day__label {
    display: none;
  }

  .booking-calendar {
    padding: 16px 12px 20px;
  }

  .booking-slots__grid {
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  }
}

/* ==========================================================================
   QBO — griglia delle cinque versioni di colorazione
   Riusa lo stile di .forme-grid ma su cinque colonne, perché il QBO
   si sceglie in base a QUANTI colori si vogliono (da 1 a 5).
   ========================================================================== */
.forme-grid--five {
  grid-template-columns: repeat(5, 1fr);
}

.forme-item__tile--plain {
  padding: 0;
}

.forme-item__tile--plain img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.forme-item__count {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
}

@media (max-width:900px) {
  .forme-grid--five {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width:640px) {
  /* due colonne, ma senza allargare l'ultima: su telefono le cinque
     versioni devono avere tutte esattamente la stessa dimensione */
  .forme-grid--five {
    grid-template-columns: 1fr 1fr;
    justify-items: center;
  }

  .forme-grid--five .forme-item {
    width: 100%;
    max-width: 200px;
  }
}

/* ==========================================================================
   QBO — fascia di presentazione (Showroom e Home)
   Il QBO non è una stufa: sta in una fascia dedicata, staccata dalla
   griglia delle linee, così resta chiaro che è un complemento.
   ========================================================================== */
.qbo-promo {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 3vw;
  align-items: center;
  padding: 2.6vw;
  background: var(--cream);
  border: 1px solid var(--greige-dark);
  border-radius: 14px;
}

.qbo-promo__frame {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--ivory);
  border: 1px solid var(--greige-dark);
}

.qbo-promo__frame img {
  display: block;
  width: 100%;
  height: auto;
}

.qbo-promo__body h2 {
  margin: 6px 0 0;
}

.qbo-promo__body p {
  margin-top: 12px;
  color: var(--anthracite-70);
  font-weight: 300;
}

.qbo-promo__specs {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: .84rem;
  letter-spacing: .02em;
  color: var(--anthracite-70);
}

.qbo-promo__specs span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.qbo-promo__specs span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--terracotta);
}

.qbo-promo .showroom__cta {
  margin-top: 20px;
}

@media (max-width:860px) {
  .qbo-promo {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 24px;
  }

  .qbo-promo__frame {
    max-width: 300px;
    margin-inline: auto;
  }
}

/* ==========================================================================
   Colori novità — descrizioni di tono che una pastiglia da sola non rende
   ========================================================================== */
.novita-block {
  margin-top: 2.4vw;
}

.novita-list {
  margin-top: 14px;
  display: grid;
  gap: 12px;
}

.novita-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.novita-item__color {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--greige-dark);
  margin-top: 2px;
}

.novita-item__text {
  font-weight: 300;
  color: var(--anthracite-70);
}

.novita-item__text strong {
  display: block;
  font-weight: 600;
  color: var(--anthracite);
  letter-spacing: .01em;
}

/* ==========================================================================
   Elementi apribili nel lightbox fuori dalla galleria principale
   (pastiglie colore, versioni di colorazione, forme ceramiche)
   ========================================================================== */
.swatch[data-full],
.forme-item[data-full] {
  cursor: zoom-in;
}

.swatch[data-full] .swatch__color {
  transition: transform .3s var(--ease-soft), box-shadow .3s var(--ease-soft);
}

.swatch[data-full]:hover .swatch__color {
  transform: scale(1.06);
  box-shadow: 0 6px 16px -8px rgba(44, 39, 33, .45);
}

.forme-item[data-full]:hover .forme-item__tile {
  border-color: var(--terracotta-soft);
  box-shadow: 0 8px 20px -10px rgba(44, 39, 33, .35);
}

.novita-item[data-full] {
  cursor: zoom-in;
}

.novita-item[data-full] .novita-item__color {
  transition: transform .3s var(--ease-soft), box-shadow .3s var(--ease-soft);
}

.novita-item[data-full]:hover .novita-item__color {
  transform: scale(1.08);
  box-shadow: 0 6px 16px -8px rgba(44, 39, 33, .45);
}

/* ==========================================================================
   RIFINITURE — dettagli di resa che si notano solo quando mancano
   ========================================================================== */

/* 1. Titoli: evita la riga finale con una parola sola ("vedova"), che è
   il difetto tipografico più visibile su un titolo grande. */
h1, h2, .page-hero h1, .section-head h2 {
  text-wrap: balance;
}

/* Sui paragrafi bilanciare sarebbe costoso: basta evitare l'ultima riga
   troppo corta. */
p, .page-hero p, .faq__answer {
  text-wrap: pretty;
}

/* 2. Barra di navigazione in vetro: al posto del fondo pieno, sfoca ciò
   che le scorre sotto. Se il browser non lo supporta resta il fondo
   pieno di prima, quindi non si rompe nulla. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .nav.solid {
    background: rgba(247, 241, 230, .82);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
  }
}

/* 3. Risposta alla pressione: senza, su telefono sembra che il tocco non
   sia stato registrato. */
.showroom__cta,
.family-card,
.model-nav__link,
.faq__item summary,
.forme-item[data-full],
.swatch[data-full],
.novita-item[data-full] {
  -webkit-tap-highlight-color: transparent;
}

.showroom__cta:active,
.model-nav__link:active {
  transform: translateY(1px) scale(.995);
}

.family-card:active {
  transform: scale(.988);
}

.forme-item[data-full]:active .forme-item__tile,
.swatch[data-full]:active .swatch__color,
.novita-item[data-full]:active .novita-item__color {
  transform: scale(.94);
}

/* 4. Gli effetti al passaggio del mouse non hanno senso su schermo
   touch: lì restano "appiccicati" dopo il tocco. Li limitiamo ai
   dispositivi con un vero puntatore. */
@media (hover: none) {
  .swatch[data-full]:hover .swatch__color,
  .novita-item[data-full]:hover .novita-item__color {
    transform: none;
    box-shadow: none;
  }

  .forme-item[data-full]:hover .forme-item__tile {
    border-color: var(--greige-dark);
    box-shadow: none;
  }
}

/* 5. Le sezioni fuori schermo non vengono disegnate finché non servono:
   alleggerisce lo scorrimento sulle pagine lunghe. L'altezza stimata
   evita che la barra di scorrimento salti. */
.faq,
.wood-promo {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* 6. Chi ha chiesto meno animazioni non deve subire nemmeno queste. */
@media (prefers-reduced-motion: reduce) {
  .showroom__cta:active,
  .model-nav__link:active,
  .family-card:active,
  .forme-item[data-full]:active .forme-item__tile,
  .swatch[data-full]:active .swatch__color,
  .novita-item[data-full]:active .novita-item__color {
    transform: none;
  }
}

/* ==========================================================================
   Porta fuoco — la coppia di scatti ravvicinati (chiusa / aperta)
   ========================================================================== */
.porta-block {
  margin-top: 2.6vw;
}

.porta-grid {
  margin-top: 1.4vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6vw;
}

.porta-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: zoom-in;
}

.porta-item__frame {
  border: 1px solid var(--greige-dark);
  border-radius: 10px;
  overflow: hidden;
  background: var(--ivory);
  transition: border-color .35s var(--ease-soft), box-shadow .35s var(--ease-soft);
}

.porta-item__frame img {
  display: block;
  width: 100%;
  height: auto;
}

.porta-item:hover .porta-item__frame {
  border-color: var(--terracotta-soft);
  box-shadow: 0 8px 22px -12px rgba(44, 39, 33, .4);
}

.porta-item__label {
  font-size: .84rem;
  letter-spacing: .02em;
  color: var(--anthracite-70);
  text-align: center;
}

.porta-note {
  margin-top: 16px;
  font-weight: 300;
  color: var(--anthracite-70);
}

@media (hover: none) {
  .porta-item:hover .porta-item__frame {
    border-color: var(--greige-dark);
    box-shadow: none;
  }
}

@media (max-width:640px) {
  .porta-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ==========================================================================
   Invito a lasciare una recensione su Google
   ========================================================================== */
.footer-review {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  text-align: center;
}

.footer-review__text {
  color: var(--anthracite-70);
  font-size: .88rem;
  font-weight: 300;
}

.footer-review__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid var(--greige-dark);
  border-radius: 999px;
  color: var(--anthracite);
  text-decoration: none;
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .01em;
  -webkit-tap-highlight-color: transparent;
  transition: background .3s var(--ease-soft), border-color .3s var(--ease-soft), transform .3s var(--ease-soft);
}

.footer-review__stars {
  display: inline-flex;
  gap: 2px;
  color: #E7A93B;
}

.footer-review__stars svg {
  width: 15px;
  height: 15px;
}

.footer-review__link:hover {
  background: var(--cream);
  border-color: var(--terracotta-soft);
}

.footer-review__link:active {
  transform: translateY(1px) scale(.99);
}

@media (pointer: coarse) {
  .footer-review__link {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-review__link:active {
    transform: none;
  }
}

/* ==========================================================================
   SKIP LINK — "Salta al contenuto principale"
   ---------------------------------------------------------------------
   Requisito WCAG 2.4.1 (Bypass Blocks, livello A): chi naviga da tastiera
   o con screen reader deve poter saltare l'intestazione ripetuta su ogni
   pagina e arrivare direttamente al contenuto.
   Resta invisibile finché non riceve il focus da tastiera: il primo TAB
   sulla pagina lo fa comparire in alto a sinistra.
   Non usiamo display:none né visibility:hidden perché toglierebbero
   l'elemento dall'ordine di tabulazione, rendendolo irraggiungibile.
   ========================================================================== */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  transform: translateY(-120%);
  padding: 14px 26px;
  background: var(--anthracite);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-decoration: none;
  border-bottom-right-radius: 6px;
  transition: transform .18s var(--ease-soft);
}

.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid var(--terracotta);
  outline-offset: -3px;
}

/* Il contenuto principale non deve mostrare il contorno del focus quando
   ci si arriva dallo skip link: il focus è programmatico, non da tastiera. */
main:focus {
  outline: none;
}

/* Voce di menu della pagina corrente. La riga sotto la voce non è
   l'unico segnale: aria-current="page" (impostato in main.js) la rende
   percepibile anche a chi non vede il colore. */
.nav__links a[aria-current="page"] {
  color: var(--terracotta);
}

.nav__links a[aria-current="page"]::after {
  width: 100%;
}

/* Le pastiglie colore e le forme partono invisibili e si accendono a
   cascata quando il blocco che le contiene entra in viewport. Come per
   .reveal, questo vale solo se il JavaScript è attivo: senza, restano
   semplicemente visibili. */
.js .swatch,
.js .forme-item {
  opacity: 0;
}

/* ==========================================================================
   Leggibilità del menu sulle pagine interne
   ==========================================================================
   IL PROBLEMA (misurato): il nome "Bottega del Fuoco" e le tre lineette
   del menu a panino nascono color avorio (#F7F1E6), perché pensati per
   stare sopra la foto scura dell'hero della home. Diventano scuri solo
   quando si scorre di 40 pixel e il menu prende la classe .solid
   (vedi js/main.js).

   Ma le pagine interne (showroom, preventivo, modelli, ecc.) non hanno
   una foto scura: hanno lo sfondo crema .page-hero (#EFE3D2). Appena
   aperte, quindi, si aveva avorio su crema: un contrasto di 1,14:1,
   contro il minimo di 4,5:1 richiesto dalle linee guida di
   accessibilità. In pratica scritta e menu erano invisibili finché non
   si scorreva la pagina — e su telefono il panino è l'unico modo per
   navigare. Chi arriva da Google atterra quasi sempre su una pagina
   interna, cioè proprio nella situazione peggiore.

   LA SOLUZIONE: se la pagina contiene un .page-hero (cioè è una pagina
   interna), il menu parte già scuro, senza aspettare lo scorrimento.
   Così non serve modificare le 54 pagine una per una.

   Nota: :has() è supportato da tutti i browser aggiornati. Su un
   browser molto vecchio si torna semplicemente al comportamento di
   prima, senza nulla di rotto.
   -------------------------------------------------------------------------- */
body:has(.page-hero) .nav__logo span {
  color: var(--anthracite);
}

body:has(.page-hero) .nav__toggle span,
body:has(.page-hero) .nav__toggle::before,
body:has(.page-hero) .nav__toggle::after {
  background: var(--anthracite);
}

/* Sopra la foto scura l'ombra chiara aiutava a staccare le lineette;
   su fondo crema serve il contrario, altrimenti sbavano. */
body:has(.page-hero) .nav__toggle {
  filter: none;
}

/* ══ Pagine incentivi — conto-termico.php e incentivi.php ═══════════
   Sono pagine di solo testo, senza fotografie, e riusano i blocchi
   nati per la home. Due cose non funzionavano:

   1. .philosophy__features e' una griglia a QUATTRO colonne fisse.
      Queste pagine hanno sezioni da tre e da sei schede, che quindi
      restavano incolonnate a sinistra con un vuoto a destra.
   2. I respiri della home, calibrati su blocchi brevi accanto a foto,
      su un testo lungo risultano stretti: qui si legge, non si guarda.

   Da cui due modificatori, applicati solo a queste pagine per non
   toccare l'aspetto di tutte le altre. */

.philosophy__features--tre {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 900px) {
  .philosophy__features--tre { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .philosophy__features--tre { grid-template-columns: 1fr; }
}

.wood-promo--doc .section-head {
  max-width: 730px;
  margin-bottom: 3.4vw;
}

.wood-promo--doc .section-head + .section-head {
  margin-top: 3.6vw;
}

.wood-promo--doc .section-head p {
  margin-top: 1.9em;      /* una riga piena di stacco fra i paragrafi */
  line-height: 1.9;
}

.wood-promo--doc .stat-strip { margin-bottom: 6vw; }

.wood-promo--doc .philosophy__features {
  margin-top: 4vw;
  margin-bottom: 6.5vw;
}

.wood-promo--doc .feature h3 { margin-bottom: .25em; }

.wood-promo--doc .feature p {
  margin-top: 14px;
  line-height: 1.72;
}

.wood-promo--doc .feature p + p { margin-top: 1.6em; }

.wood-promo--doc .compare__note {
  max-width: 640px;
  margin: 4vw auto;
  line-height: 1.9;
  font-size: .82rem;
}

.wood-promo--doc .faq {
  margin-top: 2.4vw;
  margin-bottom: 6vw;
}

.wood-promo--doc .faq__item + .faq__item { margin-top: .85rem; }

.wood-promo--doc .sources {
  margin-top: 2.4vw;
  margin-bottom: 5vw;
}

.wood-promo--doc .wood-promo__cta { margin-top: 5vw; }

/* ══ Blocchi portati dall'analisi commerciale ═══════════════════════

   PRIMA VERSIONE SBAGLIATA, E PERCHE'
   Avevo scritto stili miei per titolo, occhiello e paragrafi: il titolo
   usciva a 33px mentre tutti gli altri h2 del sito sono a 46px in
   Cormorant Garamond, e il blocco sembrava incollato da un altro sito.
   Adesso il markup usa i componenti che esistono gia' — .section-head,
   .wood-promo__cta, .compare__note — e qui resta solo cio' che quei
   componenti non sanno: il fondo, il respiro, e la centratura del testo
   nelle schede strette.                                                */

.scadenza {
  padding: 10vw 0 9vw;
  background: var(--cream);
  border-top: 1px solid var(--greige-dark);
  border-bottom: 1px solid var(--greige-dark);
}

/* due paragrafi dentro la stessa intestazione hanno bisogno di una riga
   piena di stacco, non dei 18px previsti per il sottotitolo singolo */
.scadenza .section-head p + p { margin-top: 1.7em; }

.scadenza__nota {
  font-style: italic;
  max-width: 620px;
}

.scadenza .wood-promo__cta { margin-top: 3.4rem; }

.fiducia { padding: 10vw 0 11vw; }

.fiducia .philosophy__features {
  border-top: none;
  padding-top: 0;
  margin-top: 3vw;
  margin-bottom: 4vw;
}

/* Il sito giustifica tutti i paragrafi. In una scheda larga un terzo di
   pagina la giustificazione apre buchi fra le parole e il testo sembra
   allineato a sinistra sotto un titolo centrato: nelle schede va
   centrato, come il titolo che lo sovrasta. */
.philosophy__features--tre .feature p,
.fiducia .feature p {
  /* Giustificato come il resto del sito: centrare un paragrafo di
     cinque righe lascia il bordo destro a scaletta. L'ultima riga resta
     centrata, così la scheda mantiene la sua simmetria. */
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-align-last: center;
  margin-top: 14px;
  line-height: 1.72;
}

.philosophy__features--tre .feature p + p,
.fiducia .feature p + p { margin-top: 1.6em; }

.philosophy__features--tre {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 900px) {
  .philosophy__features--tre { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .philosophy__features--tre { grid-template-columns: 1fr; }
}

/* il bottone dentro una scheda: stessa forma degli altri, corpo ridotto
   perche' sta in uno spazio stretto */
.showroom__cta--small {
  margin-top: 0;
  padding: 11px 26px;
  font-size: .72rem;
}

.feature__cta { margin-top: 18px; text-align: center; }

.footer__quote { margin-top: 18px; }

.model-faq { padding: 0 0 8vw; }

.model-faq .faq { margin-top: 2.6vw; margin-bottom: 0; }

.model-faq .faq__item + .faq__item { margin-top: .85rem; }

/* ---- pagine incentivi: aria fra i blocchi di testo ---- */
.wood-promo--doc .section-head { max-width: 730px; margin-bottom: 3.4vw; }

/* un'intestazione che arriva dopo un blocco di schede o una didascalia
   ha bisogno di staccarsi, altrimenti sembra la coda di cio' che precede */
.wood-promo--doc .philosophy__features + .section-head,
.wood-promo--doc .compare__note + .section-head,
.wood-promo--doc .faq + .section-head,
.wood-promo--doc .sources + .section-head,
.wood-promo--doc .stat-strip + .section-head,
.wood-promo--doc .section-head + .section-head { margin-top: 9vw; }

.wood-promo--doc .section-head p { margin-top: 1.9em; line-height: 1.9; }

.wood-promo--doc .stat-strip { margin-bottom: 7vw; }

.wood-promo--doc .philosophy__features { margin-top: 4vw; margin-bottom: 6.5vw; }

.wood-promo--doc .feature h3 { margin-bottom: .25em; }

.wood-promo--doc .compare__note {
  max-width: 640px;
  margin: 4vw auto;
  line-height: 1.9;
  font-size: .82rem;
}

.wood-promo--doc .faq { margin-top: 3vw; margin-bottom: 6vw; }

.wood-promo--doc .faq__item + .faq__item { margin-top: .85rem; }

.wood-promo--doc .sources { margin-top: 3vw; margin-bottom: 5vw; }

.wood-promo--doc .wood-promo__cta { margin-top: 5vw; }

/* ══ Contrasto della barra sulle pagine interne ═════════════════════
   Sulla home la barra sta sopra una fotografia scura, quindi il testo
   avorio si legge. Sulle pagine con .page-hero il fondo e' crema: testo
   avorio su crema fa 1,13:1 di contrasto, cioe' invisibile, e lo resta
   finche' non si scorre di 40px e il JavaScript aggiunge .solid.
   Da quando il numero di telefono e' in barra, quel difetto non e' piu'
   solo estetico: rende illeggibile un contatto.
   Qui la barra parte gia' scura dove il fondo e' chiaro. */

body:has(.page-hero) .nav__links a,
body:has(.page-hero) .nav__dropdown-toggle,
body:has(.page-hero) .lang-switch {
  color: var(--anthracite);
}

/* ══ Rifiniture chieste dopo la revisione ═══════════════════════════ */

/* La nota sotto il blocco scadenza era centrata in una colonna piu'
   stretta dei paragrafi sopra: le righe partivano da un punto diverso e
   si vedeva. Stessa colonna e stesso allineamento degli altri. */
.scadenza__nota {
  font-style: italic;
  max-width: 730px;
  margin-left: auto;
  margin-right: auto;
  text-align: justify;
  text-align-last: left;
}

/* la fonte, in fondo, aveva i due margini schiacciati sui vicini */
.scadenza > .container > .compare__note:last-child {
  margin-top: 3.6vw;
  margin-bottom: 0;
}

/* i tre riquadri devono stare al centro della pagina, non appoggiati a
   sinistra: la griglia della home e' a quattro colonne fisse e con tre
   schede lasciava un vuoto a destra */
.fiducia .philosophy__features {
  border-top: none;
  padding-top: 0;
  margin: 3.4vw auto 4.6vw;
}

/* i bottoni finali finivano appiccicati al piede della pagina */
.fiducia .wood-promo__cta { margin-top: 3.4rem; }

/* ---- piè di pagina: orari leggibili ---- */
.footer-hours {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-hours li {
  display: grid;
  grid-template-columns: 6.4rem 1fr;
  gap: 2px 12px;
  padding: 9px 0;
}

.footer-hours li + li { border-top: 1px solid var(--greige-dark); }

.footer-hours strong {
  grid-row: span 2;
  align-self: center;
  font-weight: 600;
  letter-spacing: .02em;
}

.footer-hours span { font-variant-numeric: tabular-nums; }

.footer-hours em {
  font-style: normal;
  font-size: .82em;
  opacity: .72;
}

.footer-hours__note {
  margin-top: 12px;
  font-size: .86em;
  opacity: .8;
}

/* ---- piè di pagina: le etichette dei contatti in evidenza ----
   La regola guardava l'attributo data-i18n, che pero' esiste solo su
   quindici pagine: le altre quarantacinque — assistenza, moduli,
   incentivi e tutte le inglesi — scrivevano «Telefono:» come testo nudo,
   e li' non c'era niente da colpire, quindi niente grassetto. Da qui la
   classe footer__label, che si mette a mano e non dipende dall'i18n; il
   selettore vecchio resta per non lasciare indietro le pagine che
   funzionavano gia'. */
.site-footer__grid p > span.footer__label,
.site-footer__grid p > span[data-i18n$="Label"],
.site-footer__grid p > span[data-i18n$="label"] { font-weight: 600; }

/* ---- piè di pagina: il bottone del preventivo ----
   Era una pillola nata per le grandi chiamate all'azione, infilata in una
   colonna larga un terzo: bordo sproporzionato, testo che andava a capo
   dentro il bordo e sembrava storto. Qui e' dimensionato per lo spazio
   che ha davvero. */
.footer__quote { margin-top: 20px; }

.site-footer__grid p.footer__quote a.footer__quote-btn,
.footer__quote-btn {
  display: inline-block;
  padding: 11px 22px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transition: background .35s var(--ease-soft), color .35s var(--ease-soft);
}

.footer__quote-btn:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--ivory);
}

/* il bottone dentro una scheda della home: la griglia è stretta, e il
   corpo grande delle chiamate all'azione principali non ci sta */
.philosophy__features .feature__cta { margin-top: 16px; }

/* ══ Correzioni del 2 agosto, seconda tornata ═══════════════════════

   LA SCHEDA ORFANA — è l'errore che mi sfuggiva da ore.
   .philosophy__features--tre ha tre schede. Sopra i 900px stanno su tre
   colonne e il blocco e' simmetrico: misurando li' risultava centrato, e
   io misuravo li'. Sotto i 900px la griglia passa a due colonne e la
   TERZA scheda resta sola sulla riga, appoggiata a sinistra, con meta'
   riga vuota a destra. E' quello che si vedeva. Qui la terza, quando e'
   sola, occupa entrambe le colonne e si centra.                        */

/* La correzione qui sopra valeva «sotto i 900px», ma la griglia non ha
   due colonne fin giu' in fondo: sotto i 560px ne ha una sola. In quella
   fascia — cioe' su ogni telefono — «meta' riga» diventa meta' della
   colonna unica, e la terza scheda si stringeva a centosessanta pixel
   contro i trecentotrenta delle altre due: ventun caratteri per riga
   invece di quarantadue, il testo schiacciato in una colonnina.
   Il centraggio serve solo dove le colonne sono davvero due. */
@media (min-width: 561px) and (max-width: 900px) {
  .philosophy__features--tre > .feature:nth-child(3):last-child {
    grid-column: 1 / -1;
    max-width: calc(50% - 1.2vw);
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---- il blocco della scadenza: meno marrone, piu' aria chiara ---- */
.scadenza {
  margin: 7vw 0 6vw;      /* spazio chiaro sopra e sotto la fascia */
  padding: 6vw 0 4rem;              /* riserva per i browser vecchi */
  padding: max(2.6rem, 6vw) 0 max(4rem, 5vw);
}
/* Stesso pavimento dei bottoni della sezione «semplicità»: sul telefono
   si impilano e senza questo margine toccano il bordo della fascia. */
.scadenza .wood-promo__cta {
  margin-bottom: 0.8rem;
  margin-bottom: max(0.8rem, 1vw);
}

/* la riga della fonte, in coda, aveva i margini schiacciati */
.scadenza > .container > .compare__note:last-child {
  margin-top: 4.4vw;
  margin-bottom: 0;
}

/* ---- "PERCHE' SCEGLIERCI": aria sopra, e sotto i bottoni ---- */
.fiducia { padding: 9vw 0 12vw; }

.fiducia .wood-promo__cta { margin-top: 4rem; }

/* ---- il bottone piccolo: le lettere erano troppo distanziate ---- */
.showroom__cta--small {
  letter-spacing: .04em;
  padding: 11px 24px;
  font-size: .74rem;
}

/* ---- pagine incentivi: le note allineate ai paragrafi ----
   La nota stava in una colonna da 640px mentre le intestazioni e i loro
   paragrafi ne usano 730: le righe partivano da un punto diverso e si
   vedeva. Stessa colonna, stesso allineamento. */
.wood-promo--doc .compare__note {
  max-width: 730px;
  margin: 5vw auto;
  line-height: 1.9;
  font-size: .82rem;
  text-align: justify;
  text-align-last: left;
}

/* le intestazioni interne prendono tutte lo stesso stacco, generoso */
.wood-promo--doc .philosophy__features + .section-head,
.wood-promo--doc .compare__note + .section-head,
.wood-promo--doc .faq + .section-head,
.wood-promo--doc .sources + .section-head,
.wood-promo--doc .stat-strip + .section-head,
.wood-promo--doc .section-head + .section-head { margin-top: 10vw; }

.wood-promo--doc .faq { margin-top: 4vw; margin-bottom: 8vw; }

.wood-promo--doc .sources { margin-top: 4vw; margin-bottom: 6vw; }


/* ── La semplicità ──────────────────────────────────────────────────
   Fondo crema per staccare dalla sezione filosofia che la precede,
   stesso passo verticale del blocco .scadenza. Tipografia, titoli e
   bottoni sono quelli del sito: qui non si ridefinisce nulla, si dà
   solo il contenitore. */
.semplicita {
  background: var(--cream);
  margin: 7vw 0 6vw;
  /* Il fondo non si misura in vw e basta: sul telefono 8vw sono trenta
     pixel, e i due bottoni — che li' si impilano invece di affiancarsi —
     finiscono appoggiati al cambio di sfondo. Con max() il valore
     proporzionale vale sul grande, quello fisso fa da pavimento sul
     piccolo. */
  padding: 6vw 0 4.5rem;            /* riserva per i browser vecchi */
  padding: max(2.6rem, 6vw) 0 max(4.5rem, 8vw);
}
/* I due bottoni sono l'ultima cosa della sezione: senza un margine
   loro, il respiro sotto dipenderebbe solo dal padding, e al primo
   ritocco di quello tornerebbero a toccare il cambio di fondo. */
.semplicita .wood-promo__cta {
  margin-bottom: 1rem;
  margin-bottom: max(1rem, 1.5vw);
}
.semplicita__nota {
  max-width: 62ch;
  margin: 2.4vw auto 3vw;
}


/* Variante a riga singola per le schede modello: stesso fondo, ma
   senza il respiro di una sezione intera — qui la semplicità è una
   precisazione, non il discorso principale. */
.semplicita--riga {
  margin: 4vw 0 0;
  padding: 3.2vw 0;
}
.semplicita--riga .compare__note {
  max-width: 68ch;
  margin: 0 auto;
}


/* ── Il divisorio e i margini delle sezioni ─────────────────────────
   Il divisorio porta con sé il proprio respiro: 57,6 px sopra e 57,6
   sotto. Le sezioni aggiunte di recente — semplicità, scadenza,
   fiducia — hanno però anche margini propri, pensati per quando il
   divisorio non c'è. Messi uno accanto all'altro i due spazi si
   sommano e il risultato è un vuoto di quattrocento pixel che sembra
   un errore di impaginazione, non una scelta.

   Quando il divisorio sta in mezzo, quindi, i margini delle sezioni
   che tocca si annullano: il respiro lo dà lui, una volta sola. */
.section-divider + .semplicita,
.section-divider + .scadenza,
.section-divider + .fiducia,
.section-divider + .showroom,
.section-divider + .model-faq {
  margin-top: 0;
}
.faq:has(+ .section-divider),
.semplicita:has(+ .section-divider),
.scadenza:has(+ .section-divider),
.fiducia:has(+ .section-divider) {
  margin-bottom: 0;
}


/* ══ Le sei correzioni ══════════════════════════════════════════════

   2. I PARAGRAFI DELLE SCHEDE, GIUSTIFICATI
   Il sito giustifica di regola — p { text-align: justify } — ma le
   schede .feature e le note .compare__note centravano il testo: era
   una scelta mia, pensata per didascalie di due righe. Su paragrafi da
   cinque righe il bordo destro diventa una scala. Torna il giustificato
   con la sillabazione, come .philosophy__text p, e resta centrata solo
   l'ultima riga — che è quello che tiene insieme la simmetria della
   scheda senza sfilacciare il testo. */
.compare__note {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-align-last: center;
}
/* le note d'una riga sola non hanno niente da giustificare */
.stat p,
.wood-promo__note {
  text-align: center;
  hyphens: manual;
}

/* 5a. IL BOTTONE DEL PIÈ DI PAGINA AL PASSAGGIO DEL MOUSE
   .site-footer__grid a:hover ha specificità (0,2,1) e batteva
   .footer__quote-btn:hover (0,2,0): forzava il testo a terracotta
   proprio mentre il bottone si metteva il terracotta come fondo, e la
   scritta spariva. Qui la specificità è pari a quella della regola di
   base del bottone, così vince lei. */
.site-footer__grid p.footer__quote a.footer__quote-btn:hover,
.site-footer__grid a.footer__quote-btn:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--ivory);
}

/* 4. «CHI SIAMO» CON LA TIPOGRAFIA DEL SITO
   La pagina condivideva .legal-content con privacy e termini: titoli a
   1,5rem e testo a piena opacità, giusti per un testo legale, fuori
   scala per il racconto dell'azienda. Il modificatore rimette i titoli
   in Cormorant alla misura delle altre sezioni e il corpo nel grigio
   leggero del resto del sito. Le pagine legali non sono toccate. */
.legal-content--racconto {
  max-width: 820px;
}
.legal-content--racconto h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 3.4rem 0 1.2rem;
}
.legal-content--racconto h2:first-child {
  margin-top: 0;
}
.legal-content--racconto p {
  color: var(--anthracite-70);
  font-weight: 300;
  line-height: 1.85;
  margin: 0 0 1.25em;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-align-last: left;
}
.legal-content--racconto .legal-content__disclaimer {
  font-size: .82rem;
  line-height: 1.75;
}

/* 6. CONTO TERMICO E INCENTIVI: DAL MONOCROMO ALL'ALTERNANZA
   Le due pagine avevano una sola sezione con un solo fondo, quindi
   erano tutte dello stesso colore dall'inizio alla fine. Il resto del
   sito alterna avorio e crema di blocco in blocco, ed è quel cambio a
   dare il ritmo della lettura e a far capire dove finisce un argomento
   e comincia il successivo.

   Qui l'alternanza si ottiene senza rifare il markup: la sezione perde
   il proprio fondo, e i blocchi che stanno dentro — ogni .section-head
   di primo livello con quello che la segue — se lo prendono a turno.
   Il selettore :nth-of-type sui figli diretti fa il lavoro. */
.wood-promo--alterna {
  background: var(--ivory);
  padding: 0;
}
.wood-promo--alterna > .container {
  max-width: none;
  padding: 0;
}
/* le fasce: ogni blocco dispari resta avorio, i pari passano a crema.
   Il fondo si stende per tutta la larghezza, il contenuto resta nella
   colonna centrale. */
.wood-promo--alterna > .container > .fascia {
  max-width: none;
  padding: 6.5vw 4vw;
}
.wood-promo--alterna > .container > .fascia > * {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

/* LA MISURA DELLA RIGA — correzione del 6 agosto
   La regola qui sopra dà a ogni figlio della fascia un limite di 1180px.
   Serve alle cose larghe — le griglie di schede, le tabelle di confronto —
   ma prende anche i blocchi di testo, e con specificità (0,4,0) batteva
   .wood-promo--doc .section-head (0,2,0), che li teneva a 730px. Risultato:
   su queste due pagine le righe arrivavano a centotrenta caratteri, contro
   i settanta del resto del sito. È questo che le faceva sembrare un'altra
   cosa: non il colore, non i caratteri — la lunghezza della riga.

   Sessanta-ottanta caratteri è la misura in cui l'occhio ritrova da solo
   l'inizio della riga dopo; oltre, si perde il segno e si rilegge.
   Qui i limiti di ogni componente vengono riaffermati con la stessa
   specificità della regola che li aveva scavalcati. */
.wood-promo--alterna > .container > .fascia > .section-head { max-width: 730px; }
.wood-promo--alterna > .container > .fascia > .faq { max-width: 730px; }
.wood-promo--alterna > .container > .fascia > .sources { max-width: 730px; }
.wood-promo--alterna > .container > .fascia > .compare__note { max-width: 640px; }
.wood-promo--alterna > .container > .fascia:nth-of-type(even) {
  background: var(--cream);
}
.wood-promo--alterna > .container > .fascia:nth-of-type(odd) {
  background: var(--ivory);
}
.wood-promo--alterna > .container > .fascia:last-child {
  padding-bottom: 8vw;
}


/* ==========================================================================
   PAGINA DELLE DOMANDE FREQUENTI — 7 agosto
   ==========================================================================
   Le FAQ erano centoquarantasei, sparse su venti pagine e ripetute: le
   stesse sei domande su tutte e sei le schede modello. Chi cercava
   «quanto costa» doveva indovinare dove guardare. Qui stanno tutte, ma
   divise per argomento e dietro sei porte, perché quaranta domande in
   fila sono un muro.
   ========================================================================== */

.faq-pagina {
  padding: clamp(2.2rem, 5vw, 4rem) 0 clamp(3rem, 7vw, 5.5rem);
  background: var(--ivory);
}

.faq-pagina__scegli {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 500;
  text-align: center;
  margin: 0 0 clamp(1.2rem, 2.4vw, 1.8rem);
}

/* I bottoni quadrati: sono le stesse schede della pagina assistenza —
   non si inventa un secondo modello per fare la stessa cosa.

   Ma li' le schede sono due e larghe: .assist-choice e' un flex con
   `flex: 1 1 340px` e il contenitore a 900px, quindi ne stanno due per
   riga. Qui sono sei: serve una griglia vera, con celle piu' strette,
   altrimenti restano due per riga e la pagina diventa una colonna
   lunghissima di bottoni. */
/* I BANNER DEGLI ARGOMENTI, CENTRATI — 9 agosto
   ------------------------------------------------------------------
   Due cose li tenevano a sinistra, e vanno risolte tutte e due.

   La prima: il blocco aveva max-width 1080px ma nessun margine
   automatico, quindi l'intera fila di schede si appoggiava al bordo
   sinistro invece di stare in mezzo alla pagina.

   La seconda: era una griglia con colonne da 1fr. Con sei schede su
   quattro colonne, le due che avanzano finiscono nelle prime due celle
   della riga sotto — incolonnate a sinistra, con mezza riga vuota a
   destra. Nessuna proprieta' della griglia centra gli avanzi: le celle
   esistono comunque, anche vuote.

   Con flex-wrap invece le schede non hanno celle: si dispongono una
   dopo l'altra e justify-content le centra, riga per riga, QUALUNQUE
   sia il loro numero. Aggiungendone una settima o una nona restano
   centrate da sole, senza toccare niente. */
.faq-argomenti {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  max-width: 1080px;
  margin-inline: auto;
  gap: 18px;
  margin-bottom: clamp(2.2rem, 4.5vw, 3.4rem);
}

.faq-argomenti .assist-choice__card {
  /* 256px e' la misura che ne fa entrare quattro in 1080 con i distacchi:
     4 x 256 + 3 x 18 = 1078. Non crescono (flex-grow 0), altrimenti le
     due dell'ultima riga si allargherebbero a riempire tutta la larghezza
     invece di restare della stessa taglia delle altre. */
  flex: 0 1 256px;
  max-width: 100%;
  padding: 1.5rem 1.2rem 1.3rem;
}

/* La descrizione della scheda eredita il giustificato globale dei
   paragrafi: su tre parole in una scheda stretta produce righe con
   buchi larghi come parole. Qui va centrata, come il resto della
   scheda. */
/* Anche qui: la descrizione sotto il titolo è di due righe corte, e
   centrata partiva ogni volta da un punto diverso. Allineata a sinistra
   le righe si incolonnano e la scheda si legge ordinata. Il titolo e
   l'icona restano centrati: sono elementi singoli, non testo che scorre. */
.faq-argomenti .assist-choice__card p {
  text-align: left;
  align-self: stretch;
  hyphens: none;
  font-size: .86rem;
}

.faq-argomenti .assist-choice__card { text-align: left; align-items: flex-start; }
.faq-argomenti .assist-choice__card h2 { text-align: left; }

/* L'icona invece resta centrata — 8 agosto.
   align-items: flex-start qui sopra serve al testo, che deve partire
   sempre dallo stesso punto; ma prende anche il simbolo in cima alla
   scheda, e lo spinge contro il bordo sinistro. Il simbolo torna al
   centro da solo, senza toccare l'allineamento del testo. */
.faq-argomenti .assist-choice__card .assist-choice__icon { align-self: center; }

/* Fra l'introduzione e i bottoni c'era lo stacco pieno del page-hero
   piu' quello della sezione: due respiri sommati, che sul monitor
   diventavano mezzo schermo vuoto. */
.faq-pagina { padding-top: clamp(1.2rem, 2.4vw, 2rem); }
.faq-pagina .page-hero + * { margin-top: 0; }

.faq-card__conta {
  font-variant-numeric: tabular-nums;
}

/* ---- un argomento ---- */
.faq-gruppo {
  scroll-margin-top: 96px;      /* l'intestazione fissa non copre il titolo */
  max-width: 800px;
  margin: 0 auto clamp(2.2rem, 4.5vw, 3.4rem);
}

.faq-gruppo__testa {
  padding-bottom: .9rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--greige-dark);
}

.faq-gruppo__testa h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 500;
  margin: 0 0 .25rem;
}

.faq-gruppo__testa p {
  margin: 0;
  font-size: .9rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--anthracite-70);
}

/* Il ritorno agli argomenti: discreto, ma c'è. Senza, dopo quindici
   domande sugli incentivi si è in fondo alla pagina senza una via
   breve per cambiare argomento. */
.faq-gruppo__su {
  display: inline-block;
  margin-top: 1rem;
  font-size: .82rem;
  color: var(--anthracite-70);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease-soft), border-color .2s var(--ease-soft);
}

.faq-gruppo__su:hover,
.faq-gruppo__su:focus-visible {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
}

/* ---- la coda ---- */
.faq-coda {
  max-width: 700px;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--cream);
  border-radius: 16px;
  text-align: center;
}

.faq-coda h2 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  font-weight: 500;
  margin: 0 0 .5rem;
}

.faq-coda p {
  margin: 0 0 1.3rem;
  font-size: .93rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--anthracite-70);
}

@media (max-width: 640px) {
  /* Su telefono una scheda per riga, a tutta larghezza: la
     verticalizzazione va bene cosi'. */
  .faq-argomenti .assist-choice__card { flex: 1 1 100%; }
  .faq-gruppo { scroll-margin-top: 78px; }
}