/* ============================================================
   DORMITALIANO — Maison Page Styles
   Dipende da: css/style.css
   ============================================================ */


/* ============================================================
   NAV — struttura split (colori e social da style.css)
   ============================================================ */
.nav__group {
  display:         flex;
  align-items:     center;
  gap:             2rem;
  flex:            1;
}

.nav__group--right {
  justify-content: flex-end;
}

.nav__lang {
  display:     flex;
  align-items: center;
  gap:         0.4rem;
}

.nav__mobile-menu { display: none; }


/* ============================================================
   1. HERO
   ============================================================ */
/* Hero divisa: foto verticale intera a sinistra, testo su crema a destra */
.m-hero {
  min-height:            100vh;
  display:               grid;
  grid-template-columns: 1fr 1fr;
}

.m-hero__media {
  position:   relative;
  min-height: 100vh;
  overflow:   hidden;
  background: var(--color-beige-dark);
}

.m-hero__media img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  object-position: center;
  display:    block;
}

.m-hero__content {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     flex-start;
  text-align:      left;
  padding:         3rem clamp(2.5rem, 6vw, 6rem);
  background:      var(--color-beige);
}

.m-hero__eyebrow {
  font-family:    var(--font-body);
  font-size:      0.6875rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color:          var(--color-dark);
  opacity:        0.5;
  margin-bottom:  1.75rem;
}

.m-hero__title {
  font-family:    var(--font-heading);
  font-weight:    300;
  font-size:      clamp(2.25rem, 3.6vw, 4rem);
  letter-spacing: 0.02em;
  color:          var(--color-dark);
  line-height:    1.12;
  margin-bottom:  1.25rem;
}

.m-hero__subtitle {
  font-family:   var(--font-body);
  font-weight:   300;
  font-size:     clamp(0.9375rem, 1.4vw, 1.0625rem);
  color:         var(--color-dark);
  opacity:       0.65;
  line-height:   1.7;
  margin-bottom: 2.5rem;
}

.m-hero__cta {
  opacity:   0;
  animation: mFadeUp 0.9s ease 0.5s forwards;
}

@keyframes mFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}


/* ============================================================
   2. STRISCIA FIDUCIA — sottile, sotto l'hero
   ============================================================ */
.m-trust {
  background-color: var(--color-white);
  border-bottom:    1px solid var(--color-beige);
}

.m-trust__row {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             4rem;
  flex-wrap:       wrap;
  padding:         2.25rem 0;
}

.m-trust__item {
  text-align: center;
}

.m-trust__title {
  font-family:   var(--font-heading);
  font-weight:   500;
  font-size:     1.3rem;
  color:         var(--color-dark);
  margin-bottom: 0.15rem;
}

.m-trust__sub {
  font-family: var(--font-body);
  font-weight: 300;
  font-size:   0.8rem;
  color:       var(--color-dark);
  opacity:     0.55;
}

.m-trust__sep {
  width:      1px;
  height:     38px;
  background: var(--color-beige-dark);
  opacity:    0.7;
}

@media (max-width: 600px) {
  .m-trust__row { gap: 1.75rem; flex-direction: column; }
  .m-trust__sep { display: none; }
}


/* ============================================================
   IL PRODOTTO — immagine di apertura con didascalia
   ============================================================ */
.m-showcase {
  background-color: var(--color-white);
}

.m-showcase__figure {
  max-width: 1100px;
  margin:    0 auto;
}

.m-showcase__stage {
  position:      relative;
  line-height:   0;         /* elimina il gap sotto l'immagine inline */
}

.m-showcase__figure img {
  display:       block;
  width:         100%;
  height:        auto;
  border-radius: 10px;
}

/* ── Hotspot interattivi sul letto ── */
.m-hotspot {
  position:   absolute;
  left:       var(--x);
  top:        var(--y);
  transform:  translate(-50%, -50%);
  width:      28px;
  height:     28px;
  padding:    0;
  border:     none;
  background: none;
  cursor:     pointer;
  z-index:    2;
}

.m-hotspot__dot {
  position:      absolute;
  inset:         0;
  border-radius: 50%;
  background:    var(--color-white);
  border:        2px solid var(--color-dark);
  box-shadow:    0 2px 8px rgba(0, 0, 0, 0.25);
  transition:    transform var(--transition-base), background var(--transition-base);
}

/* pallino "+" al centro */
.m-hotspot__dot::before,
.m-hotspot__dot::after {
  content:    "";
  position:   absolute;
  top:        50%;
  left:       50%;
  background: var(--color-dark);
  transform:  translate(-50%, -50%);
}
.m-hotspot__dot::before { width: 11px; height: 2px; }
.m-hotspot__dot::after  { width: 2px;  height: 11px; }

/* alone pulsante per attirare l'occhio */
.m-hotspot::before {
  content:        "";
  position:       absolute;
  inset:          -4px;
  border-radius:  50%;
  border:         2px solid var(--color-white);
  opacity:        0.7;
  animation:      m-hotspot-pulse 2.4s ease-out infinite;
  pointer-events: none;
}

@keyframes m-hotspot-pulse {
  0%   { transform: scale(0.7); opacity: 0.7; }
  70%  { transform: scale(1.6); opacity: 0;   }
  100% { transform: scale(1.6); opacity: 0;   }
}

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

.m-hotspot:hover  .m-hotspot__dot,
.m-hotspot:focus-visible .m-hotspot__dot,
.m-hotspot[aria-expanded="true"] .m-hotspot__dot {
  transform:  scale(1.12);
  background: var(--color-beige);
}

.m-hotspot:focus-visible { outline: none; }
.m-hotspot:focus-visible .m-hotspot__dot {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35);
}

/* Card / tooltip */
.m-hotspot__card {
  position:        absolute;
  bottom:          calc(100% + 12px);
  left:            50%;
  transform:       translate(-50%, 6px);
  width:           230px;
  max-width:       46vw;
  display:         flex;
  flex-direction:  column;
  gap:             0.35rem;
  padding:         0.85rem 1rem;
  background:      var(--color-white);
  border-radius:   10px;
  box-shadow:      0 10px 30px rgba(0, 0, 0, 0.18);
  text-align:      left;
  line-height:     1.5;
  opacity:         0;
  visibility:      hidden;
  pointer-events:  none;
  transition:      opacity var(--transition-base), transform var(--transition-base),
                   visibility var(--transition-base);
}

/* freccetta */
.m-hotspot__card::after {
  content:    "";
  position:   absolute;
  top:        100%;
  left:       50%;
  transform:  translateX(-50%);
  border:     7px solid transparent;
  border-top-color: var(--color-white);
}

.m-hotspot:hover  .m-hotspot__card,
.m-hotspot:focus-visible .m-hotspot__card,
.m-hotspot[aria-expanded="true"] .m-hotspot__card {
  opacity:    1;
  visibility: visible;
  transform:  translate(-50%, 0);
}

.m-hotspot__title {
  font-family:    var(--font-body);
  font-size:      0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--color-dark);
}

.m-hotspot__text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size:   0.82rem;
  color:       var(--color-dark);
  opacity:     0.72;
}

/* Gli hotspot vicini al bordo destro aprono la card verso sinistra
   per non uscire dall'immagine. */
@media (max-width: 560px) {
  .m-hotspot { width: 24px; height: 24px; }
  .m-hotspot__card { width: 180px; }
}

.m-showcase__caption {
  font-family:  var(--font-body);
  font-weight:  300;
  font-size:    0.875rem;
  line-height:  1.7;
  color:        var(--color-dark);
  opacity:      0.6;
  text-align:   center;
  max-width:    620px;
  margin:       1.1rem auto 0;
}


/* ============================================================
   LA NOSTRA STORIA — blocco editoriale immagine + testo
   ============================================================ */
.m-story {
  background-color: var(--color-white);
}

.m-story__inner {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   4rem;
  align-items:           center;
  max-width:             1100px;
  margin:                0 auto;
}

.m-story__media {
  aspect-ratio:  1 / 1;
  overflow:      hidden;
  border-radius: 10px;
  background:    var(--color-beige);
}
.m-story__media img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.m-story__eyebrow {
  font-family:    var(--font-body);
  font-size:      0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--color-dark);
  opacity:        0.5;
  margin-bottom:  1.25rem;
}

.m-story__title {
  font-family:   var(--font-heading);
  font-weight:   300;
  font-size:     clamp(1.75rem, 3.2vw, 2.6rem);
  line-height:   1.2;
  color:         var(--color-dark);
  margin-bottom: 1.5rem;
}

.m-story__text {
  font-family:   var(--font-body);
  font-weight:   300;
  font-size:     0.95rem;
  line-height:   1.85;
  color:         var(--color-dark);
  opacity:       0.75;
  margin-bottom: 1.25rem;
}

.m-story__cta { margin-top: 0.75rem; }

@media (max-width: 768px) {
  .m-story__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}


/* ============================================================
   FAQ — stesso sfondo del blocco hook
   ============================================================ */
.m-faq {
  background-color: var(--color-beige);
}

.m-faq__list {
  max-width: 760px;
  margin:    3rem auto 0;
}

.m-faq__item { border-bottom: 1px solid var(--color-beige-dark); }
.m-faq__item:first-child { border-top: 1px solid var(--color-beige-dark); }

.m-faq__q {
  width:           100%;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1.5rem;
  background:      none;
  border:          none;
  cursor:          pointer;
  text-align:      left;
  padding:         1.4rem 0.25rem;
  font-family:     var(--font-body);
  font-weight:     400;
  font-size:       1rem;
  color:           var(--color-dark);
}

.m-faq__chev {
  flex-shrink:   0;
  width:         9px;
  height:        9px;
  border-right:  1.5px solid var(--color-dark);
  border-bottom: 1.5px solid var(--color-dark);
  transform:     rotate(45deg);
  transition:    transform var(--transition-base);
  opacity:       0.55;
  margin-top:    -4px;
}
.m-faq__q[aria-expanded="true"] .m-faq__chev {
  transform:  rotate(-135deg);
  margin-top: 3px;
}

.m-faq__a { padding: 0 0.25rem 1.5rem; }
.m-faq__a[hidden] { display: none; }
.m-faq__a p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size:   0.92rem;
  line-height: 1.8;
  color:       var(--color-dark);
  opacity:     0.72;
  max-width:   680px;
}

.m-hook__inner {
  max-width:  680px;
  margin:     0 auto;
  text-align: center;
}

.m-hook__title {
  font-family:   var(--font-heading);
  font-weight:   300;
  font-size:     clamp(1.875rem, 3.5vw, 2.75rem);
  color:         var(--color-dark);
  line-height:   1.2;
  margin-bottom: 1.75rem;
}

.m-hook__text {
  font-family:   var(--font-body);
  font-weight:   300;
  font-size:     1rem;
  line-height:   1.9;
  color:         var(--color-dark);
  opacity:       0.72;
  margin-bottom: 2rem;
}

.m-hook__footnote {
  font-family:    var(--font-body);
  font-weight:    300;
  font-size:      0.9375rem;
  color:          var(--color-dark);
  opacity:        0.5;
  font-style:     italic;
  letter-spacing: 0.01em;
}


/* ============================================================
   2b. GUIDA AL QUESTIONARIO
   ============================================================ */
.m-guide {
  background-color: #2596be;
  padding-top:      4.5rem;
  padding-bottom:   4.5rem;
}

.m-guide__inner {
  max-width:  760px;
  margin:     0 auto;
  text-align: center;
}

.m-guide__title {
  font-family:    var(--font-heading);
  font-weight:    300;
  font-size:      clamp(1.75rem, 3.4vw, 2.6rem);
  line-height:    1.2;
  letter-spacing: 0.01em;
  color:          var(--color-white);
  margin-bottom:  1.25rem;
}

.m-guide__text {
  font-family:   var(--font-body);
  font-weight:   300;
  font-size:     1rem;
  line-height:   1.8;
  color:         var(--color-white);
  opacity:       0.92;
  margin-bottom: 2.25rem;
}

.m-guide__cta {
  display:         inline-block;
  font-family:     var(--font-body);
  font-size:       0.75rem;
  letter-spacing:  0.18em;
  text-transform:  uppercase;
  color:           #2596be;
  background:      var(--color-white);
  border:          1px solid var(--color-white);
  border-radius:   100px;
  padding:         1rem 2.5rem;
  transition:      background var(--transition-base), color var(--transition-base);
}

.m-guide__cta:hover {
  background: transparent;
  color:      var(--color-white);
}

/* ============================================================
   3. LE DUE LINEE
   ============================================================ */
.m-lines {
  background-color: var(--color-white);
}

.m-lines__header {
  text-align:    center;
  margin-bottom: 4rem;
}

.m-lines__eyebrow {
  font-family:    var(--font-body);
  font-size:      0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--color-dark);
  opacity:        0.45;
  margin-bottom:  1rem;
}

.m-lines__title {
  font-family:   var(--font-heading);
  font-weight:   300;
  font-size:     clamp(2rem, 4vw, 3rem);
  color:         var(--color-dark);
  margin-bottom: 0.75rem;
}

.m-lines__subtitle {
  font-family: var(--font-body);
  font-weight: 300;
  font-size:   1rem;
  color:       var(--color-dark);
  opacity:     0.55;
  line-height: 1.6;
}

/* Cards container — affiancate, full width */
.m-lines__cards {
  display: flex;
  align-items: stretch;
}

/* Ogni linea = card + pannello espandibile insieme (così su mobile il
   pannello si apre subito sotto la propria card). */
.m-line {
  flex:           1;
  display:        flex;
  flex-direction: column;
}

.m-line-card {
  flex:            1;
  padding:         5rem 4.5rem 5rem;
  display:         flex;
  flex-direction:  column;
  align-items:     flex-start;
}

.m-line-card__media {
  width:         100%;
  aspect-ratio:  16 / 10;
  border-radius: 8px;
  overflow:      hidden;
  margin-bottom: 2.5rem;
}

.m-line-card__media img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

/* Card chiara — Linea Dream (colore invertito col quiz) */
.m-line-card--dark {
  background-color: var(--color-beige);
}

/* Card calda — Linea Sleep */
.m-line-card--warm {
  background-color: var(--color-beige-dark);
}

.m-line-card__title {
  font-family:   var(--font-heading);
  font-weight:   300;
  font-size:     clamp(2.25rem, 4vw, 3.5rem);
  letter-spacing: 0.02em;
  margin-bottom: 1.5rem;
  line-height:   1;
}

.m-line-card--dark .m-line-card__title { color: var(--color-dark); }
.m-line-card--warm .m-line-card__title { color: var(--color-dark);  }

.m-line-card__text {
  font-family:   var(--font-body);
  font-weight:   300;
  font-size:     0.9375rem;
  line-height:   1.85;
  margin-bottom: 2rem;
  max-width:     420px;
}

.m-line-card--dark .m-line-card__text { color: var(--color-dark); opacity: 0.72;  }
.m-line-card--warm .m-line-card__text { color: var(--color-dark);  opacity: 0.72; }

/* Toggle — spinge in fondo e ruota la freccia */
.m-line-toggle {
  margin-top:  auto;
  display:     inline-flex;
  align-items: center;
  gap:         0.5rem;
  cursor:      pointer;
}

.m-line-toggle__arrow {
  display:    inline-block;
  transition: transform 0.35s ease;
}

.m-line-toggle.is-open .m-line-toggle__arrow {
  transform: rotate(180deg);
}

/* Sezione espandibile.
   DESKTOP (default): overlay a tutta pagina, chiudibile con la X in alto.
   MOBILE (<=768px, più sotto): accordion inline sotto la propria card. */
.m-line-expand {
  position:       fixed;
  inset:          0;
  z-index:        1900;
  overflow-y:     auto;
  opacity:        0;
  visibility:     hidden;
  pointer-events: none;
  transition:     opacity 0.35s ease, visibility 0.35s ease;
}

.m-line-expand.is-open {
  opacity:        1;
  visibility:     visible;
  pointer-events: auto;
}

.m-line-expand--dark { background-color: var(--color-dark); }
.m-line-expand--warm { background-color: var(--color-beige-dark); }

/* Barra superiore con titolo linea + chiudi, resta visibile allo scroll */
.m-line-expand__bar {
  position:        sticky;
  top:             0;
  z-index:         2;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
  padding:         1.5rem 2rem;
  background:      inherit;
}

.m-line-expand__eyebrow {
  font-family:    var(--font-heading);
  font-weight:    300;
  font-size:      1.35rem;
  letter-spacing: 0.02em;
  margin:         0;
}

.m-line-expand--dark .m-line-expand__eyebrow { color: var(--color-white); }
.m-line-expand--warm .m-line-expand__eyebrow { color: var(--color-dark);  }

.m-line-expand__close {
  background:     none;
  border:         1px solid currentColor;
  border-radius:  50%;
  width:          44px;
  height:         44px;
  font-size:      1.5rem;
  line-height:    1;
  cursor:         pointer;
  display:        flex;
  align-items:    center;
  justify-content: center;
  transition:     background var(--transition-base), color var(--transition-base);
}

.m-line-expand--dark .m-line-expand__close { color: var(--color-white); }
.m-line-expand--warm .m-line-expand__close { color: var(--color-dark);  }
.m-line-expand--dark .m-line-expand__close:hover { background: var(--color-white); color: var(--color-dark);  }
.m-line-expand--warm .m-line-expand__close:hover { background: var(--color-dark);  color: var(--color-white); }

.m-line-expand__inner {
  padding:   1.5rem 4.5rem 5rem;
  max-width: 1400px;
  margin:    0 auto;
}

/* Tabs MATERASSI | GUANCIALI */
.m-line-tabs {
  display:       flex;
  gap:           0;
  margin-bottom: 3.5rem;
  width:         fit-content;
  border-radius: 100px;
  overflow:      hidden;
  border:        1px solid;
}

.m-line-expand--dark .m-line-tabs { border-color: rgba(255,255,255,0.25); }
.m-line-expand--warm .m-line-tabs { border-color: rgba(44,44,44,0.25); }

.m-line-tab {
  padding:        0.6rem 2rem;
  font-family:    var(--font-body);
  font-size:      0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background:     transparent;
  border:         none;
  cursor:         pointer;
  transition:     background 0.2s, color 0.2s;
}

.m-line-expand--dark .m-line-tab         { color: rgba(255,255,255,0.5); }
.m-line-expand--dark .m-line-tab.is-active {
  background: var(--color-white);
  color:      var(--color-dark);
}

.m-line-expand--warm .m-line-tab         { color: rgba(44,44,44,0.5); }
.m-line-expand--warm .m-line-tab.is-active {
  background: var(--color-dark);
  color:      var(--color-white);
}

/* Griglia prodotti */
.m-prod-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   1.5rem;
}

/* Card prodotto */
.m-prod-card {
  display:        flex;
  flex-direction: column;
  border-radius:  2px;
  overflow:       hidden;
}

.m-line-expand--dark .m-prod-card {
  background: rgba(255,255,255,0.05);
  border:     1px solid rgba(255,255,255,0.1);
}

.m-line-expand--warm .m-prod-card {
  background: var(--color-white);
  border:     1px solid var(--color-beige-dark);
}

/* Placeholder immagine */
.m-prod-card__img-wrap {
  width:            100%;
  aspect-ratio:     4/3;
  overflow:         hidden;
  position:         relative;
  display:          flex;
  align-items:      center;
  justify-content:  center;
}

.m-line-expand--dark .m-prod-card__img-wrap { background: rgba(255,255,255,0.08); }
.m-line-expand--warm .m-prod-card__img-wrap { background: var(--color-beige); }

.m-prod-card__img-wrap.is-placeholder::after {
  content:        'Immagine in arrivo';
  font-family:    var(--font-body);
  font-size:      0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity:        0.3;
}

.m-line-expand--dark .m-prod-card__img-wrap.is-placeholder::after { color: var(--color-white); }
.m-line-expand--warm .m-prod-card__img-wrap.is-placeholder::after { color: var(--color-dark); }

.m-prod-card__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.5s ease;
}

.m-prod-card:hover .m-prod-card__img { transform: scale(1.04); }

/* Corpo card */
.m-prod-card__body {
  padding:        2rem 1.75rem;
  display:        flex;
  flex-direction: column;
  flex:           1;
}

.m-prod-card__nome {
  font-family:   var(--font-heading);
  font-weight:   300;
  font-size:     clamp(1.4rem, 2vw, 1.875rem);
  letter-spacing: 0.02em;
  margin-bottom: 0.75rem;
  line-height:   1.1;
}

.m-line-expand--dark .m-prod-card__nome { color: var(--color-white); }
.m-line-expand--warm .m-prod-card__nome { color: var(--color-dark);  }

.m-prod-card__desc {
  font-family:   var(--font-body);
  font-weight:   300;
  font-size:     0.875rem;
  line-height:   1.75;
  margin-bottom: 1.25rem;
}

.m-line-expand--dark .m-prod-card__desc { color: var(--color-white); opacity: 0.6; }
.m-line-expand--warm .m-prod-card__desc { color: var(--color-dark);  opacity: 0.7; }

.m-prod-card__benefits {
  list-style:    none;
  display:       flex;
  flex-direction: column;
  gap:           0.45rem;
  margin-bottom: 2rem;
  flex:          1;
}

.m-prod-card__benefits li {
  font-family:  var(--font-body);
  font-weight:  300;
  font-size:    0.8125rem;
  line-height:  1.5;
  padding-left: 1rem;
  position:     relative;
}

.m-prod-card__benefits li::before {
  content:  '—';
  position: absolute;
  left:     0;
  opacity:  0.35;
}

.m-line-expand--dark .m-prod-card__benefits li { color: var(--color-white); opacity: 0.7; }
.m-line-expand--warm .m-prod-card__benefits li { color: var(--color-dark);  opacity: 0.75; }

.m-prod-card__cta {
  align-self:    flex-start;
  font-size:     0.75rem;
  letter-spacing: 0.1em;
}

.m-line-expand--dark .m-prod-card__cta {
  color:        var(--color-white);
  border-color: rgba(255,255,255,0.5);
}

.m-line-expand--dark .m-prod-card__cta:hover {
  background:   var(--color-white);
  color:        var(--color-dark);
  border-color: var(--color-white);
}

/* Rimuovi padding-bottom dalla sezione per far stare le expand panel a filo */
.m-lines { padding-bottom: 0; }


/* ============================================================
   4. TAPPEZZERIA MAISON
   ============================================================ */
.m-upholstery {
  display:          flex;
  min-height:       560px;
  background-color: var(--color-white);
}

.m-upholstery__media {
  flex:             1;
  overflow:         hidden;
  background-color: #c0b5a8;
}

.m-upholstery__img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center;
  display:         block;
  transition:      transform 0.7s ease;
}

.m-upholstery:hover .m-upholstery__img {
  transform: scale(1.03);
}

.m-upholstery__body {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  padding:         5rem 6rem;
  background-color: var(--color-beige);
}

.m-upholstery__label {
  font-family:    var(--font-body);
  font-size:      0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--color-dark);
  opacity:        0.45;
  margin-bottom:  1rem;
}

.m-upholstery__title {
  font-family:   var(--font-heading);
  font-weight:   300;
  font-size:     clamp(1.875rem, 3vw, 2.75rem);
  color:         var(--color-dark);
  line-height:   1.15;
  margin-bottom: 1.5rem;
}

.m-upholstery__text {
  font-family:   var(--font-body);
  font-weight:   300;
  font-size:     0.9375rem;
  line-height:   1.85;
  color:         var(--color-dark);
  opacity:       0.7;
  margin-bottom: 2.25rem;
  max-width:     420px;
}


/* ============================================================
   5. PERCHÉ SCEGLIERE DORMITALIANO
   ============================================================ */
.m-why {
  background-color: var(--color-beige);
}

.m-why__grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   4rem 5rem;
}

.m-why__item {
  text-align: center;
}

.m-why__icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           52px;
  height:          52px;
  margin:          0 auto 1.75rem;
  color:           var(--color-dark);
  opacity:         0.55;
}

.m-why__title {
  font-family:    var(--font-heading);
  font-weight:    600;
  font-size:      1.375rem;
  color:          var(--color-dark);
  margin-bottom:  0.75rem;
  letter-spacing: 0.01em;
}

.m-why__text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size:   0.9375rem;
  line-height: 1.8;
  color:       var(--color-dark);
  opacity:     0.65;
}


/* ============================================================
   6. CTA FINALE
   ============================================================ */
.m-cta {
  background-color: var(--color-dark);
  text-align:       center;
}

.m-cta__title {
  font-family:   var(--font-heading);
  font-weight:   300;
  font-size:     clamp(2rem, 4vw, 3.25rem);
  color:         var(--color-white);
  margin-bottom: 1rem;
}

.m-cta__subtitle {
  font-family:   var(--font-body);
  font-weight:   300;
  font-size:     1rem;
  color:         var(--color-white);
  opacity:       0.6;
  line-height:   1.7;
  margin-bottom: 3rem;
  max-width:     480px;
  margin-left:   auto;
  margin-right:  auto;
}

.m-cta__actions {
  display:         flex;
  justify-content: center;
  flex-wrap:       wrap;
  gap:             1rem;
}

.m-cta__btn {
  display:     inline-flex;
  align-items: center;
  gap:         0.6rem;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .m-line-card {
    padding: 4rem 3rem;
  }

  .m-upholstery__body {
    padding: 4rem 3.5rem;
  }

  .m-why__grid {
    gap: 3rem;
  }
}

@media (max-width: 768px) {

  /* Hero divisa → impilata: foto sopra, testo sotto */
  .m-hero {
    min-height:            auto;
    grid-template-columns: 1fr;
  }
  .m-hero__media {
    min-height:   0;
    height:       58vh;
    max-height:   560px;
  }
  .m-hero__content {
    padding:    3.5rem 1.75rem 4rem;
    text-align: center;
    align-items: center;
  }

  /* Nav mobile */
  .nav__group  { display: none; }
  .nav__hamburger { display: flex; }

  .nav__logo {
    text-align: left;
    flex:       unset;
  }

  /* Lines cards — stack verticale */
  .m-lines__cards {
    flex-direction: column;
  }

  .m-line-card {
    padding: 3.5rem 1.75rem;
  }

  .m-line-card__text { max-width: 100%; }

  /* Expand panel mobile — accordion inline sotto la propria card,
     non più overlay a tutta pagina */
  .m-line-expand {
    position:       relative;
    inset:          auto;
    z-index:        auto;
    overflow:       hidden;
    opacity:        1;
    visibility:     visible;
    pointer-events: auto;
    max-height:     0;
    transition:     max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .m-line-expand.is-open { max-height: 6000px; }

  .m-line-expand__bar {
    position: static;
    padding:  1.75rem 1.5rem 0;
  }

  .m-line-expand__inner { padding: 1.5rem 1.5rem 3rem; }
  .m-prod-grid          { grid-template-columns: 1fr; }

  /* Tappezzeria — stack verticale */
  .m-upholstery {
    flex-direction: column;
    min-height:     auto;
  }

  .m-upholstery__media {
    height:     65vw;
    min-height: 260px;
  }

  .m-upholstery__body {
    padding: 3rem 1.5rem;
  }

  .m-upholstery__text { max-width: 100%; }

  /* Why grid — colonna singola */
  .m-why__grid {
    grid-template-columns: 1fr;
    gap:                   3rem;
  }

  /* CTA — colonna */
  .m-cta__actions {
    flex-direction: column;
    align-items:    stretch;
    max-width:      300px;
    margin-left:    auto;
    margin-right:   auto;
  }

  .m-cta__btn { justify-content: center; }
}

@media (max-width: 480px) {
  .m-hero__title {
    font-size: clamp(2rem, 8vw, 3.5rem);
  }

  /* Tab touch target > 44px su smartphone piccoli */
  .m-line-tab {
    padding:   0.9rem 1.5rem;
    min-height: 44px;
  }

  /* Upholstery section padding ridotto */
  .m-upholstery__body {
    padding: 2.5rem 1.25rem;
  }

  /* Line card padding ridotto */
  .m-line-card {
    padding: 2.75rem 1.25rem;
  }
}