/* ── Font Allegro (locale) ── */
@font-face {
  font-family: 'Allegro';
  src: url('fonts/ALLEGRO.woff2') format('woff2'),
       url('fonts/ALLEGRO.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=DM+Sans:wght@300;400;500&display=block');

/* ============================================================
   SERRA ANTICA — Foglio di stile globale
   Vetreria artigianale dal 1987
   ============================================================ */

/* Import Google Fonts */



/* ============================================================
   VARIABILI CSS
   ============================================================ */
:root {
  --bg-chiaro:    #FFFFFF;  /* bianco puro: sfondo sito, header chiaro, overlay */
  --bg-scuro:     #111111;  /* UNICO nero del sito: header, footer, sezioni scure, overlay */
  --oro:          #C03B6E;  /* fucsia del logo Serra Antica (invariato) */
  --oro-scuro:    #A0305C;  /* fucsia scuro per hover (invariato)      */
  --acciaio:      #9C9690;  /* grigio-tortora neutro                   */
  --testo-scuro:  var(--bg-scuro); /* testo scuro = stesso nero del sito */
  --testo-chiaro: #FFFFFF;  /* bianco puro                            */
  --testo-muted:  #7A756F;  /* grigio caldo neutro per testi secondari */
  --bordo:        #E8E8E8;  /* bordo grigio neutro (niente beige)      */
  --ombra:        rgba(17, 17, 17, 0.07);
  --ombra-media:  rgba(0, 0, 0, 0.12);
  --ombra-forte:  rgba(0, 0, 0, 0.22);
  --transizione:  0.3s ease;
  --radius:       8px;
  --radius-sm:    4px;
}

/* ============================================================
   RESET E BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: clip;
  scrollbar-gutter: stable;
  /* Rimuove il riquadro grigio predefinito di iOS/Android al tocco:
     il feedback di tocco è gestito in modo elegante più sotto. */
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  color: var(--testo-scuro);
  background-color: var(--bg-chiaro);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* ============================================================
   OTTIMIZZAZIONE TOUCH — risposta immediata al primo tocco
   Rimuove l'ambiguità (doppio tocco / zoom) su tutti gli elementi
   cliccabili per smartphone e tablet, senza alcun effetto su desktop.
   ============================================================ */
a,
button,
input,
select,
textarea,
.hamburger-btn,
.mobile-menu-close,
.macro-card,
.linea-card-link,
.linea-card-home-link,
.catalogo-card,
.product-card,
.card-link,
.gallery-preview-item,
.linea-slider-card,
.linea-slider-prev,
.linea-slider-next,
.specifiche-trigger,
.specs-accordion-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ============================================================
   FEEDBACK DI TOCCO — elegante, discreto, solo su dispositivi touch
   Le classi vengono gestite da script.js (sezione 12):
   - .tap-active     → elemento premuto (schiacciamento). Resta applicata
                       fino al cambio pagina, così l'effetto non si "toglie"
                       prima che la nuova pagina compaia.
   - .tap-releasing  → rilascio morbido quando il tocco NON porta a una
                       nuova pagina (scroll, bottoni, lightbox...).
                       Senza questa classe, togliendo .tap-active la
                       proprietà "scale" tornava a 1 all'istante perché
                       la maggior parte delle card non ha "scale" tra le
                       proprie transizioni → effetto a scatto.
   Entrambe forzano la propria transizione con !important (che azzera
   anche il transition-delay inline dello stagger dei .fade-in).
   ============================================================ */
.tap-active {
  scale: 0.97;
  opacity: 0.88;
  transition: scale 0.25s cubic-bezier(0.33, 1, 0.68, 1),
              opacity 0.25s ease !important;
}

.tap-releasing {
  transition: scale 0.3s cubic-bezier(0.33, 1, 0.68, 1),
              opacity 0.3s ease !important;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul {
  list-style: none;
}

/* ============================================================
   TIPOGRAFIA
   ============================================================ */
h1, h2, h3, h4 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  line-height: 1.2;
  color: var(--testo-scuro);
}

h1 { font-size: clamp(2rem, 4.5vw, 3.6rem); }

/* h2 = titoli di sezione — italic leggero, editoriale */
h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.5rem);
  font-style: italic;
  letter-spacing: 0.02em;
}

/* h3 = titoli funzionali (card, voci lista) — non italic */
h3 {
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  font-style: normal;
  font-weight: 400;
}

h4 { font-size: clamp(0.95rem, 1.4vw, 1.15rem); font-weight: 400; }

p {
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: var(--testo-muted);
  max-width: 680px;
  line-height: 1.8;
}

a {
  color: var(--oro);
  text-decoration: none;
  transition: opacity var(--transizione);
}

@media (hover: hover) and (pointer: fine) {
  a:hover {
    opacity: 0.75;
  }
}

/* ============================================================
   LAYOUT UTILITY
   ============================================================ */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 5%;
}

.section-padding {
  padding: 100px 0;
}

.section-padding-sm {
  padding: 60px 0;
}

/* ============================================================
   BLOCCO TITOLO SEZIONE
   ============================================================ */
.section-header {
  text-align: center;
  margin-bottom: 64px;
}

.section-label {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 14px;
}

.section-header h2 {
  color: var(--testo-scuro);
}

.section-header.light h2 {
  color: var(--testo-chiaro);
}

.section-divider {
  width: 52px;
  height: 1px;
  margin: 18px auto 0;
  position: relative;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(192, 59, 110, 0.32) 14%,
    var(--oro) 50%,
    rgba(192, 59, 110, 0.32) 86%,
    transparent 100%
  );
  opacity: 0.78;
}

.section-divider::before,
.section-divider::after {
  content: none;
}

/* ============================================================
   PULSANTI
   ============================================================ */
.btn-primary,
.btn-outline,
.btn-outline-light {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 32px;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--transizione);
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--oro);
  color: var(--bg-scuro);
  border-color: var(--oro);
}

.btn-outline {
  background-color: transparent;
  color: var(--oro);
  border-color: var(--oro);
}

.btn-outline-light {
  background-color: transparent;
  color: var(--testo-chiaro);
  border-color: rgba(255, 255, 255, 0.5);
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    background-color: var(--oro-scuro);
    border-color: var(--oro-scuro);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(192, 59, 110, 0.3);
    opacity: 1;
  }

  .btn-outline:hover {
    background-color: var(--oro);
    color: var(--bg-scuro);
    transform: translateY(-2px);
    opacity: 1;
  }

  .btn-outline-light:hover {
    background-color: var(--oro);
    border-color: var(--oro);
    color: var(--bg-scuro);
    transform: translateY(-2px);
    opacity: 1;
  }
}

/* ============================================================
   HEADER E NAVIGAZIONE
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  height: 72px;
  display: flex;
  align-items: center;
  background: var(--bg-scuro);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all var(--transizione);
}

.site-header.scrolled {
  height: 60px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.header-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.site-logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .site-logo:hover {
    opacity: 0.85;
  }
}

.logo-name {
  font-family: 'Allegro', 'Playfair Display', serif;
  font-weight: normal;
  font-size: 1.9rem;
  color: var(--oro);
  letter-spacing: 0;
  line-height: 1;
}

.logo-claim {
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: 0.65rem;
  color: var(--acciaio);
  letter-spacing: 0.18em;
  font-variant: small-caps;
  text-transform: lowercase;
  margin-top: 2px;
}

/* Menu desktop */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-menu a {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  position: relative;
  transition: color var(--transizione);
  padding-bottom: 4px;
}

.nav-menu a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--oro);
  transition: width var(--transizione);
}

.nav-menu a.active {
  color: var(--oro);
  opacity: 1;
}

.nav-menu a.active::after {
  width: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .nav-menu a:hover {
    color: var(--oro);
    opacity: 1;
  }

  .nav-menu a:hover::after {
    width: 100%;
  }
}

/* Hamburger */
.hamburger-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--oro);
  font-size: 1.3rem;
  padding: 4px;
  transition: opacity var(--transizione);
}

@media (hover: hover) and (pointer: fine) {
  .hamburger-btn:hover {
    opacity: 0.7;
  }
}

/* Menu mobile */
.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: var(--bg-scuro);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.35s ease;
  /* Sicurezza aggiuntiva: finché il pannello non è esplicitamente aperto
     (classe .open) non deve MAI poter intercettare i tocchi, nemmeno per
     una frazione di secondo durante l'animazione di apertura/chiusura. */
  pointer-events: none;
}

.mobile-menu.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mobile-menu a {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  color: var(--testo-chiaro);
  text-decoration: none;
  transition: color var(--transizione);
}

@media (hover: hover) and (pointer: fine) {
  .mobile-menu a:hover {
    color: var(--oro);
    opacity: 1;
  }
}

/* Ridondante: il pulsante che chiude il menu è l'hamburger stesso (diventa X) */
.mobile-menu-close {
  display: none;
  position: absolute;
  top: 24px;
  right: 5%;
  background: none;
  border: none;
  color: var(--acciaio);
  font-size: 1.4rem;
  cursor: pointer;
  transition: color var(--transizione);
}

@media (hover: hover) and (pointer: fine) {
  .mobile-menu-close:hover {
    color: var(--oro);
  }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--bg-scuro);
  padding: 72px 0 0;
}

.footer-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 5%;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
}

.footer-brand .logo-name {
  font-size: 1.4rem;
}

.footer-brand p {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 10px;
  max-width: 100%;
}

.footer-divider-gold {
  width: 40px;
  height: 2px;
  background-color: var(--oro);
  margin-top: 18px;
}

.footer-col-title {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 20px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a {
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color var(--transizione);
}

@media (hover: hover) and (pointer: fine) {
  .footer-links a:hover {
    color: var(--oro);
    opacity: 1;
  }
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.footer-contact-item i {
  color: var(--oro);
  font-size: 0.9rem;
  margin-top: 3px;
  min-width: 16px;
}

.footer-contact-item a,
.footer-contact-item span {
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.65);
  transition: color var(--transizione);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .footer-contact-item a:hover {
    color: var(--oro);
    opacity: 1;
  }
}

.footer-bottom {
  margin-top: 56px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 20px 5%;
  max-width: 100%;
  text-align: center;
}

.footer-bottom p {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.25);
  max-width: 100%;
  margin: 0 auto;
}

/* ============================================================
   PAGE HERO (pagine interne) — sfondo bianco elegante
   ============================================================ */
.page-hero {
  position: relative;
  height: 30vh;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background-color: var(--bg-chiaro);
  /* Compensa l'header fisso: il titolo rimane centrato nella parte visibile */
  padding-top: 72px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--bordo);
}


.page-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.05);
  transition: transform 0.6s ease;
}

/* Overlay: molto leggero, lascia vedere il bianco sotto */
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.82);
  z-index: 1;
}

.page-hero-content {
  position: relative;
  z-index: 4;
  padding: 0 5%;
}

/* Etichetta sopra il titolo */
.page-hero-content .section-label {
  color: var(--acciaio);
  letter-spacing: 0.28em;
}

/* Titolo pagina — elegante, leggero, scuro su bianco */
.page-hero-content h1 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3.4rem);
  color: var(--testo-scuro);
  text-shadow: none;
  line-height: 1.2;
  letter-spacing: 0.06em;
}

/* Divider luxury minimal sotto i titoli grandi delle pagine */
.page-hero-content h1::after {
  content: '';
  display: block;
  width: 64px;
  height: 1px;
  margin: 13px auto 9px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(192, 59, 110, 0.32) 14%,
    var(--oro) 50%,
    rgba(192, 59, 110, 0.32) 86%,
    transparent 100%
  );
  opacity: 0.78;
}

/* Separatore ornamentale sotto il titolo */
.page-hero-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 12px auto 0;
}

.page-hero-divider::before,
.page-hero-divider::after {
  content: '';
  width: 48px;
  height: 1px;
}

.page-hero-divider::before {
  background: linear-gradient(to right, transparent, var(--oro));
}

.page-hero-divider::after {
  background: linear-gradient(to left, transparent, var(--oro));
}

.page-hero-divider-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--oro);
}

/* Breadcrumb — ora su sfondo chiaro */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-bottom: 12px;
  font-size: 0.78rem;
  color: var(--testo-muted);
}

.breadcrumb a {
  color: var(--testo-muted);
  transition: color var(--transizione);
}

@media (hover: hover) and (pointer: fine) {
  .breadcrumb a:hover {
    color: var(--oro);
    opacity: 1;
  }
}

.breadcrumb span {
  color: var(--bordo);
}

/* ============================================================
   HERO HOME — layout chiaro ed elegante
   ============================================================ */
.hero-home {
  position: relative;
  height: 100vh;
  min-height: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background-color: var(--bg-chiaro);
}

/* Sfondo fotografico — statico, nessun effetto di zoom o parallax.
   background-size: cover + center center la adattano automaticamente
   a smartphone, tablet e desktop senza deformarla o tagliarla in modo
   sbagliato. */
.hero-bg {
  position: absolute;
  inset: 0;
  background: url('images/hero.jpg') center center / cover no-repeat;
}

/* Overlay SOLO dell'hero home — chiaro e caldo */
.hero-home .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(255, 255, 255, 0.78) 100%
  );
  z-index: 1;
}


/* Piccolo ornamento centrale sopra il titolo */
.hero-content {
  position: relative;
  z-index: 3;
  max-width: 860px;
  padding: 0 5%;
}

.hero-label {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--acciaio);
  margin-bottom: 16px;
}

/* Linea decorativa sopra il titolo */
.hero-label::before {
  content: '— ';
  color: var(--oro);
  letter-spacing: 0.1em;
}

.hero-label::after {
  content: ' —';
  color: var(--oro);
  letter-spacing: 0.1em;
}

.hero-content h1 {
  color: var(--testo-scuro);
  font-size: clamp(2.6rem, 6vw, 5rem);
  text-shadow: none;
  margin-bottom: 0;
}

/* "Serra Antica" in calligrafia fucsia */
.hero-content h1 .hero-brand {
  display: block;
  font-family: 'Allegro', cursive;
  font-weight: normal;
  font-size: clamp(4rem, 10vw, 8rem);
  color: var(--oro);
  line-height: 1.05;
  letter-spacing: 0;
}

.hero-content h1 .hero-brand::after {
  content: '';
  display: block;
  width: 64px;
  height: 1px;
  margin: 13px auto 9px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(192, 59, 110, 0.28) 14%,
    var(--oro) 50%,
    rgba(192, 59, 110, 0.28) 86%,
    transparent 100%
  );
  opacity: 0.72;
}

/* "per guardarti meglio" in Playfair corsivo scuro */
.hero-content h1 em {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 2.5vw, 1.7rem);
  color: var(--testo-muted);
  letter-spacing: 0.05em;
  margin-top: 4px;
}

/* Il divider della home ora è direttamente sotto “Serra Antica” */
.hero-divider {
  display: none;
}

.hero-content p {
  font-size: 0.98rem;
  color: var(--testo-muted);
  margin: 0 auto 40px;
  max-width: 500px;
  line-height: 1.85;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Versione outline su sfondo chiaro: bordo scuro */
.btn-outline-hero {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 32px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--testo-scuro);
  background: transparent;
  color: var(--testo-scuro);
  cursor: pointer;
  transition: all var(--transizione);
  text-decoration: none;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .btn-outline-hero:hover {
    background: var(--testo-scuro);
    color: var(--bg-chiaro);
    transform: translateY(-2px);
    opacity: 1;
  }
}

.hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: var(--oro);
  font-size: 1rem;
  animation: bounce 1.6s ease-in-out infinite;
  cursor: pointer;
  background: none;
  border: none;
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* Header trasparente sull'hero chiaro — testo scuro */
.site-header.hero-light {
  background: var(--bg-chiaro);
}

.site-header.hero-light .nav-menu a {
  color: var(--testo-muted);
}

.site-header.hero-light .nav-menu a.active {
  color: var(--oro);
}

@media (hover: hover) and (pointer: fine) {
  .site-header.hero-light .nav-menu a:hover {
    color: var(--oro);
  }
}

.site-header.hero-light .hamburger-btn {
  color: var(--testo-scuro);
}

/* Menu mobile aperto: l'header si fonde con il pannello (stesso nero) e
   l'hamburger, diventato una X, resta ben visibile anche nella home dove
   l'header a inizio pagina è chiaro. Va DOPO le regole .hero-light. */
.site-header.menu-open {
  background: var(--bg-scuro);
  box-shadow: none;
}

.site-header.menu-open .hamburger-btn {
  color: var(--oro);
}

/* ============================================================
   SEZIONE NUMERI
   ============================================================ */
.section-numeri {
  background: var(--bg-scuro);
  padding: 72px 0;
  position: relative;
}

.numeri-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 5%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.numero-item {
  text-align: center;
  padding: 32px 24px;
  position: relative;
}

.numero-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: rgba(255, 255, 255, 0.14);
}

.numero-valore {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--oro);
  line-height: 1;
  margin-bottom: 10px;
}

.numero-label {
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.05em;
}

/* ============================================================
   SEZIONE PRESENTAZIONE HOME
   ============================================================ */
.section-about-home {
  background: var(--bg-chiaro);
  padding: 100px 0;
  overflow-x: clip;
}

.about-home-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 5%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  overflow-x: clip;
}

.about-home-text .section-header {
  text-align: left;
  margin-bottom: 28px;
}

.about-home-text .section-divider {
  margin-left: 0;
}

.about-home-text p {
  margin-bottom: 32px;
  line-height: 1.85;
}

.about-home-image {
  position: relative;
}

.about-home-image img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: 0;
  box-shadow: 0 20px 60px var(--ombra-forte);
}

.badge-anno {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: var(--oro);
  color: var(--bg-scuro);
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(192, 59, 110, 0.4);
  z-index: 2;
}

/* ============================================================
   SEZIONE LINEE PRODOTTO (HOME)
   ============================================================ */
.section-linee-home {
  background: var(--bg-chiaro);
  padding: 80px 0;
  border-top: 1px solid var(--bordo);
}

.linee-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 5%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.product-card {
  background: #FFFFFF;
  border-radius: 0;
  box-shadow: 0 2px 16px var(--ombra);
  overflow: hidden;
  transition: transform var(--transizione), box-shadow var(--transizione);
  display: flex;
  flex-direction: column;
}

@media (hover: hover) and (pointer: fine) {
  .product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px var(--ombra-media);
  }
}

.product-card-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.product-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-card-body h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
  color: var(--testo-scuro);
}

.product-card-body p {
  font-size: 0.88rem;
  margin-bottom: 20px;
  flex: 1;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--oro);
  text-decoration: none;
  transition: gap var(--transizione), opacity var(--transizione);
}

@media (hover: hover) and (pointer: fine) {
  .card-link:hover {
    gap: 10px;
    opacity: 1;
  }
}

.linee-cta {
  text-align: center;
  margin-top: 48px;
}

/* ============================================================
   SEZIONE SERVIZI HOME
   ============================================================ */
.section-servizi-home {
  background: var(--bg-scuro);
  padding: 92px 0;
}

.servizi-home-header {
  margin-bottom: 50px;
}

.servizi-grid {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 5%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.servizio-item {
  position: relative;
  text-align: left;
  padding: 8px 42px 12px;
}

.servizio-item + .servizio-item {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.servizio-item h3 {
  color: var(--testo-chiaro);
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 12px;
}

.servizio-item p {
  max-width: 300px;
  color: rgba(255, 255, 255, 0.66);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.7;
  margin: 0;
}

.servizi-cta {
  text-align: center;
  margin-top: 52px;
}

/* ============================================================
   GALLERIA ANTEPRIMA HOME
   ============================================================ */
.section-galleria-home {
  background: var(--bg-chiaro);
  padding: 100px 0;
}

.galleria-preview-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 5%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 16px;
}

.galleria-preview-grid .gallery-preview-item:nth-child(1) {
  grid-column: span 2;
}

.galleria-preview-grid .gallery-preview-item:nth-child(5) {
  grid-column: span 2;
}

.gallery-preview-item {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  cursor: pointer;
}

.gallery-preview-item img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gallery-preview-item:nth-child(1) img,
.gallery-preview-item:nth-child(5) img {
  height: 320px;
}

@media (hover: hover) and (pointer: fine) {
  .gallery-preview-item:hover img {
    transform: scale(1.04);
  }
}

.gallery-preview-overlay {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transizione);
}

.gallery-preview-overlay i {
  font-size: 1.8rem;
  color: white;
}

@media (hover: hover) and (pointer: fine) {
  .gallery-preview-item:hover .gallery-preview-overlay {
    opacity: 1;
  }
}

.galleria-cta {
  text-align: center;
  margin-top: 48px;
}

/* ============================================================
   SEZIONE CTA FINALE
   ============================================================ */
.section-cta {
  position: relative;
  padding: 120px 0;
  text-align: center;
  overflow: hidden;
  /* Sfondo scuro diretto — sempre visibile anche senza foto */
  background-color: var(--bg-scuro);
}

.cta-bg {
  position: absolute;
  inset: 0;
  /* Gradiente scuro sempre visibile — la foto ci va sopra quando presente */
  background:
    url('images/cta-bg.jpg') center center / cover no-repeat,
    linear-gradient(var(--bg-scuro), var(--bg-scuro));
}

.cta-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}

.cta-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 5%;
}

.cta-content h2 {
  color: var(--testo-chiaro);
  margin-bottom: 18px;
}

.cta-content p {
  color: rgba(255, 255, 255, 0.7);
  margin: 0 auto 36px;
  font-size: 1rem;
}

/* ============================================================
   PAGINA CHI SIAMO — TIMELINE
   ============================================================ */
.section-timeline {
  background: var(--bg-scuro);
  padding: 100px 0;
}

.timeline {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 5%;
}

/* Linea verticale centrale */
.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--oro), transparent);
  transform: translateX(-50%);
}

.timeline-item {
  position: relative;
  margin-bottom: 64px;
  min-height: 40px;
  /* NO flexbox — usiamo margini per posizionare il contenuto */
}

.timeline-item:last-child {
  margin-bottom: 0;
}

/* Dot centrato sulla linea */
.timeline-dot {
  position: absolute;
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--oro);
  border: 3px solid var(--bg-scuro);
  box-shadow: 0 0 0 2px var(--oro);
  z-index: 1;
  flex-shrink: 0;
}

/* Contenuto: su desktop occupa metà larghezza, lasciando spazio alla linea */
.timeline-content {
  max-width: calc(50% - 36px);
}

/* Voci dispari — contenuto a SINISTRA, testo allineato a destra */
.timeline-item:nth-child(odd) .timeline-content {
  margin-left: 0;
  margin-right: auto;
  text-align: right;
}

/* Voci pari — contenuto a DESTRA, testo allineato a sinistra */
.timeline-item:nth-child(even) .timeline-content {
  margin-left: auto;
  margin-right: 0;
  text-align: left;
}

.timeline-anno {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--oro);
  line-height: 1;
  margin-bottom: 8px;
}

.timeline-testo {
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.65);
  max-width: 100%;
}

/* ============================================================
   SEZIONE VALORI
   ============================================================ */
.valori-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 5%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.valore-item {
  text-align: center;
  padding: 40px 28px;
  border: 1px solid var(--bordo);
  border-radius: var(--radius);
  transition: border-color var(--transizione), box-shadow var(--transizione);
}

@media (hover: hover) and (pointer: fine) {
  .valore-item:hover {
    border-color: var(--oro);
    box-shadow: 0 8px 32px rgba(192, 59, 110, 0.1);
  }
}

.valore-item i {
  font-size: 2rem;
  color: var(--oro);
  margin-bottom: 18px;
  display: block;
}

.valore-item h3 {
  margin-bottom: 12px;
}


/* ============================================================
   PAGINA CATALOGO — GRIGLIA LINEE
   ============================================================ */
.catalogo-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 5%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.catalogo-card {
  background: #FFFFFF;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 2px 16px var(--ombra);
  transition: transform var(--transizione), box-shadow var(--transizione);
  display: flex;
  flex-direction: column;
}

@media (hover: hover) and (pointer: fine) {
  .catalogo-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px var(--ombra-media);
  }
}

.catalogo-card-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.5s ease;
}

@media (hover: hover) and (pointer: fine) {
  .catalogo-card:hover .catalogo-card-img {
    transform: scale(1.06);
  }
}

.catalogo-card-body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.catalogo-card-body h3 {
  font-size: 1.15rem;
  margin-bottom: 12px;
}

.catalogo-card-body p {
  font-size: 0.9rem;
  margin-bottom: 24px;
  flex: 1;
}

/* ============================================================
   PAGINE SINGOLE LINEE
   ============================================================ */
.linea-detail-text .section-header {
  text-align: left;
  margin-bottom: 24px;
}

.linea-detail-text .section-divider {
  margin-left: 0;
}

.linea-feature-list {
  list-style: none;
  margin: 24px 0 36px;
}

.linea-feature-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--bordo);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  color: var(--testo-muted);
}

.linea-feature-list li i {
  color: var(--oro);
  font-size: 0.75rem;
}

.linea-foto-item {
  overflow: hidden;
  border-radius: 0;
  cursor: pointer;
}

.linea-foto-item img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

@media (hover: hover) and (pointer: fine) {
  .linea-foto-item:hover img {
    transform: scale(1.04);
  }
}

/* Tabella specifiche tecniche */
.section-specifiche {
  background: var(--bg-scuro);
  padding: 80px 0;
}

.specifiche-table {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 5%;
  width: 100%;
}

.specifica-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  gap: 20px;
}

.specifica-label {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--oro);
  min-width: 160px;
}

.specifica-valore {
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.65);
  text-align: right;
}

/* ============================================================
   PAGINA SERVIZI
   ============================================================ */
.servizi-page-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 5%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  overflow-x: clip;
}

.badge-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.badge-servizio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-scuro);
  color: var(--oro);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}

.servizio-card-dark {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  padding: 28px;
  transition: border-color var(--transizione), box-shadow var(--transizione);
}

@media (hover: hover) and (pointer: fine) {
  .servizio-card-dark:hover {
    border-color: var(--oro);
    box-shadow: 0 8px 28px rgba(192, 59, 110, 0.12);
  }
}

.servizio-card-dark i {
  font-size: 1.8rem;
  color: var(--oro);
  margin-bottom: 14px;
  display: block;
}

.servizio-card-dark h3 {
  color: var(--testo-chiaro);
  font-size: 1rem;
}


/* ============================================================
   PAGINA CONTATTI
   ============================================================ */

/* Layout a due colonne nella sezione info contatti */
.contatti-info-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* Su mobile: colonna singola, card sede in cima, CTA sotto */
@media (max-width: 768px) {
  .contatti-info-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .contatti-card-col { order: -1; }
  .contatti-cta-col  { order: 1; }
  .contatti-cta-col .contatti-buttons-grandi {
    flex-direction: column;
  }
}

.contatti-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 5%;
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 64px;
  align-items: start;
  overflow-x: clip;
}

.sede-card {
  border-radius: var(--radius);
  padding: 32px;
  margin-bottom: 20px;
}

.sede-card-dark {
  background: var(--bg-scuro);
}

.sede-badge {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 2px;
  margin-bottom: 16px;
}

.sede-badge-operativa {
  border: 1px solid var(--oro);
  color: var(--oro);
}

.sede-card-dark p {
  color: rgba(255, 255, 255, 0.6);
}

.sede-card-dark a {
  color: var(--oro);
}

/* Orari */
.orari-wrapper {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 5%;
}

.orario-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.orario-giorno {
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

.orario-ore {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--oro);
}

.orario-ore.chiuso {
  color: var(--acciaio);
}

/* ============================================================
   ANIMAZIONI ENTRATA
   ============================================================ */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   MEDIA QUERIES — DESKTOP STRETTO (993–1100px)
   ============================================================ */
@media (max-width: 1100px) and (min-width: 993px) {
  .footer-grid { grid-template-columns: 1.1fr 1fr 1fr; gap: 32px; }
}

/* ============================================================
   MEDIA QUERIES — TABLET STRETTO (max 768px)
   ============================================================ */
@media (max-width: 768px) {
  .section-padding     { padding: 70px 0; }
  .section-padding-sm  { padding: 44px 0; }
  .section-storia, .section-about-home, .section-assistenza,
  .section-come-funziona, .section-distribuzione,
  .section-contatti-info, .section-orari,
  .section-altre-linee, .section-valori,
  .section-citazione, .section-cta          { padding: 70px 0; }
  .section-numeri, .section-servizi-home { padding: 56px 0; }

  /* Fascia valori home: proporzioni e leggibilità su tablet/mobile */
  .numeri-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 4%;
    row-gap: 8px;
  }

  .numero-item {
    min-width: 0;
    min-height: 126px;
    padding: 22px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .numero-valore {
    font-size: clamp(1.65rem, 7vw, 2.2rem);
    font-weight: 400;
    line-height: 1.05;
    margin-bottom: 9px;
    overflow-wrap: normal;
  }

  .numero-valore span {
    font-size: 0.72em !important;
  }

  .numero-label {
    max-width: 150px;
    margin: 0 auto;
    font-size: 0.72rem;
    line-height: 1.35;
    letter-spacing: 0.025em;
  }

  /* Griglie testo+immagine: collassano a 768px — fix overflow mobile */
  .about-home-grid        { grid-template-columns: 1fr; gap: 40px; }
  .about-home-text .section-header { text-align: center; }
  .about-home-text .section-divider { margin: 18px auto 0; }
  .about-home-text p      { margin-left: auto; margin-right: auto; }
  .badge-anno             { left: 16px; bottom: 16px; }

  .linea-detail-grid      { grid-template-columns: 1fr; gap: 40px; }
  .linea-detail-text .section-header { text-align: center; }
  .linea-detail-text .section-divider { margin: 18px auto 0; }

  .servizi-page-grid      { grid-template-columns: 1fr; gap: 40px; }
  .assistenza-testo .section-header { text-align: center; }
  .assistenza-testo .section-divider { margin: 18px auto 0; }

  .contatti-grid          { grid-template-columns: 1fr; gap: 40px; }

  .about-home-image img,
  .assistenza-img img     { height: clamp(240px, 50vw, 420px); }

  /* C1 — Timeline: colonna singola da 768px */
  .section-timeline     { padding: 70px 0; }
  .timeline::before { left: 20px; transform: none; }
  .timeline-item,
  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) {
    flex-direction: column; text-align: left;
    justify-content: flex-start; padding-left: 48px;
  }
  .timeline-dot { left: 20px; transform: translateX(-50%); }
  .timeline-content { max-width: 100%; }
}

/* ============================================================
   MEDIA QUERIES — TABLET (max 992px)
   ============================================================ */
@media (max-width: 992px) {
  .nav-menu { display: none; }
  .hamburger-btn { display: block; }
  /* NOTA: la visibilità di .mobile-menu è gestita SOLO da script.js
     (stile inline + classe .open) — qui NON va forzato display:flex,
     altrimenti il pannello resta presente (anche se invisibile via
     opacity:0) sopra l'intera pagina e intercetta/"ruba" i tocchi
     destinati agli elementi sottostanti su ogni schermata mobile/tablet. */

  /* Freccia scroll fissa nascosta su mobile — gli utenti swipano,
     la freccia si sovrapporrebbe alle card e intercetterebbe i tap */


  .numeri-grid { grid-template-columns: repeat(2, 1fr); }
  .numero-item:nth-child(2)::after { display: none; }

  .about-home-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-home-text .section-header { text-align: center; }
  .about-home-text .section-divider { margin: 18px auto 0; }
  .about-home-text p { margin-left: auto; margin-right: auto; }
  .badge-anno { left: 16px; bottom: 16px; }

  .linee-grid { grid-template-columns: repeat(2, 1fr); }
  .servizi-grid { grid-template-columns: 1fr; gap: 0; }
  .servizio-item {
    text-align: center;
    padding: 26px 18px;
  }
  .servizio-item + .servizio-item {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  .servizio-item p {
    margin-left: auto;
    margin-right: auto;
  }
  .valori-grid { grid-template-columns: 1fr; gap: 20px; }
  .catalogo-grid { grid-template-columns: repeat(2, 1fr); }

.linea-detail-grid { grid-template-columns: 1fr; gap: 40px; }
.servizi-page-grid { grid-template-columns: 1fr; gap: 40px; }
.contatti-grid { grid-template-columns: 1fr; gap: 40px; }

  .footer-grid { grid-template-columns: 1fr 1fr; }

  .galleria-preview-grid { grid-template-columns: 1fr 1fr; }
  .galleria-preview-grid .gallery-preview-item:nth-child(1),
  .galleria-preview-grid .gallery-preview-item:nth-child(5) {
    grid-column: span 2;
  }
}

/* ============================================================
   MEDIA QUERIES — MOBILE (max 640px)
   ============================================================ */
@media (max-width: 640px) {
  .hero-buttons { flex-direction: column; align-items: center; }
  .numeri-grid { grid-template-columns: repeat(2, 1fr); }
  .numero-item::after { display: none; }
  .linee-grid { grid-template-columns: 1fr; }
  .catalogo-grid { grid-template-columns: 1fr; }
  .linea-foto-grid { grid-template-columns: 1fr; }
  .servizi-misura-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .processo-steps { grid-template-columns: 1fr; }
  .timeline::before { left: 20px; transform: none; }
  .timeline-item,
  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) {
    padding-left: 48px;
    text-align: left;
  }
  .timeline-item:nth-child(odd) .timeline-content,
  .timeline-item:nth-child(even) .timeline-content {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }
  .timeline-dot {
    left: 20px;
    transform: translateX(-50%);
  }
  .galleria-preview-grid { grid-template-columns: 1fr; }
  .galleria-preview-grid .gallery-preview-item:nth-child(1),
  .galleria-preview-grid .gallery-preview-item:nth-child(5) {
    grid-column: span 1;
  }
  .page-hero { height: 26vh; min-height: 200px; padding-top: 72px; }
  .linea-detail-grid > div > a > img { height: clamp(220px, 60vw, 400px) !important; }
}



/* ============================================================
   SLIDER LINEE PRODOTTO — Blocco D
   ============================================================ */

/* Wrapper esterno — contiene track + controlli */
.linea-slider-outer {
  background: var(--bg-chiaro);
  padding: 0 0 80px;
}

.linea-slider-section-header {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 5% 32px;
}

/* Wrapper con frecce laterali — posizionamento relativo */
.linea-slider-wrapper {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 5%;
}

/* Track scorrevole con scroll-snap */
.linea-slider-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  /* Consente sia lo scorrimento orizzontale dello slider sia lo scroll
     verticale della PAGINA anche quando il dito parte sopra le foto.
     Prima era "pan-x": il browser ignorava ogni gesto verticale iniziato
     sullo slider, che su telefono occupa quasi tutta la schermata.
     Il browser blocca il gesto sull'asse in cui il dito si muove per primo. */
  touch-action: pan-x pan-y;
  padding-bottom: 4px; /* evita clipping box-shadow */

  /* Nasconde la scrollbar visivamente */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge */
}

.linea-slider-track::-webkit-scrollbar {
  display: none;                  /* Chrome/Safari */
}

/* Singola card foto — proporzione 3:4 (portrait / verticale) */
.linea-slider-card {
  flex: 0 0 300px;
  width: 300px;
  aspect-ratio: 3 / 4;
  height: auto;
  scroll-snap-align: start;
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  box-shadow: 0 4px 20px var(--ombra-media);
  transition: box-shadow var(--transizione), transform var(--transizione);
}

@media (hover: hover) and (pointer: fine) {
  .linea-slider-card:hover {
    box-shadow: 0 8px 32px var(--ombra-forte);
    transform: translateY(-3px);
  }
}

.linea-slider-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

@media (hover: hover) and (pointer: fine) {
  .linea-slider-card:hover img {
    transform: scale(1.05);
  }
}

/* Overlay su hover */
.linea-slider-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(192, 59, 110, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transizione);
}

@media (hover: hover) and (pointer: fine) {
  .linea-slider-card:hover .linea-slider-card-overlay {
    opacity: 1;
  }
}

.linea-slider-card-overlay i {
  font-size: 1.8rem;
  color: #fff;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}

/* Frecce navigazione — solo desktop */
.linea-slider-prev,
.linea-slider-next {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--bordo);
  background: rgba(255, 255, 255, 0.92);
  color: var(--oro);
  font-size: 0.9rem;
  cursor: pointer;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px var(--ombra-media);
  transition: all var(--transizione);
}

.linea-slider-prev { left: calc(5% - 22px); }
.linea-slider-next { right: calc(5% - 22px); }

@media (hover: hover) and (pointer: fine) {
  .linea-slider-prev:hover,
  .linea-slider-next:hover {
    background: var(--oro);
    color: #fff;
    border-color: var(--oro);
    box-shadow: 0 6px 24px rgba(192, 59, 110, 0.3);
  }
}

/* ── Progress bar (sostituisce i puntini e il contatore) ── */
.linea-slider-scrollbar-outer {
  display: none;
  margin-top: 24px;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 5%;
}

.linea-slider-scrollbar-track {
  width: 100%;
  height: 2px;
  background: var(--bordo);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.linea-slider-scrollbar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--oro);
  border-radius: 2px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: width;
}


/* ============================================================
   LINEE — Specifiche tecniche riposizionate dopo la galleria
   ============================================================ */
.linea-specs-inner {
  max-width: 680px;
  margin: 0 auto;
}

.linea-specs-inner h2 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 28px;
  color: var(--testo-scuro);
}

/* ── Riduzione spazio dopo il page-hero ── */
.page-hero + section,
.page-hero + * {
  /* primo elemento subito dopo l'hero: top padding ridotto */
}

/* Sezioni che seguono direttamente page-hero: meno padding in cima */
.section-linee-grid { padding-top: 48px !important; }
.macro-categorie-section { padding-top: 56px !important; }
.section-contatti-info { padding-top: 56px !important; }
.section-assistenza    { padding-top: 56px !important; }
.section-storia        { padding-top: 56px !important; }


/* ============================================================
   HOME — Card linee fotografiche verticali (3:4)
   ============================================================ */
.linee-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 5%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.linea-card-home {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  display: block;
}

.linea-card-home-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  text-decoration: none;
  overflow: hidden;
}

.linea-card-home-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) and (pointer: fine) {
  .linea-card-home:hover .linea-card-home-link img {
    transform: scale(1.07);
  }
}

/* Gradiente base sempre visibile (bottom) */
.linea-card-home-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(17, 17, 17, 0.72) 0%,
    rgba(17, 17, 17, 0.18) 45%,
    transparent 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Overlay hover — leggero scuro aggiuntivo */
.linea-card-home-link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.22);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .linea-card-home:hover .linea-card-home-link::after {
    opacity: 1;
  }
}

/* Nome — sempre visibile, bottom-left, italic bianco */
.linea-card-home-nome {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  color: #fff;
  z-index: 3;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  line-height: 1.15;
  transition: transform 0.35s ease, opacity 0.35s ease;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .linea-card-home:hover .linea-card-home-nome {
    transform: translateY(-28px);
  }
}

/* "Esplora la linea →" — appare su hover in fucsia */
.linea-card-home-esplora {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oro);
  z-index: 3;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .linea-card-home:hover .linea-card-home-esplora {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive home cards */
@media (max-width: 992px) {
  .linee-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media (max-width: 480px) {
  .linee-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* ── Frecce slider disabilitate a inizio/fine ── */
.linea-slider-prev:disabled,
.linea-slider-next:disabled {
  opacity: 0.25;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
   NAVIGAZIONE CONTESTUALE — LINEE SPECCHI
   Link editoriale discreto, allineato a sinistra nella hero.
   ============================================================ */
.page-hero-content-con-back-link {
  width: min(1180px, 90%);
  margin: 0 auto;
}

.linea-back-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: max-content;
  gap: 7px;
  margin: 0 0 18px;
  color: rgba(160, 48, 92, 0.78);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.66rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--transizione);
}

.linea-back-link i {
  font-size: 0.60rem;
  opacity: 0.85;
  transition: transform var(--transizione), opacity var(--transizione);
}

@media (hover: hover) and (pointer: fine) {
  .linea-back-link:hover {
    color: var(--oro-scuro);
  }

  .linea-back-link:hover i {
    transform: translateX(-2px);
    opacity: 1;
  }
}

.page-hero-content-con-back-link h1 {
  text-align: center;
}

@media (max-width: 640px) {
  .page-hero-content-con-back-link {
    width: 90%;
  }

  .linea-back-link {
    margin-bottom: 16px;
    font-size: 0.63rem;
    letter-spacing: 0.07em;
  }
}


/* ============================================================
   FOOTER — COMPATTO TABLET / IPAD / SMARTPHONE
   Mantiene invariato il layout desktop.
   ============================================================ */
@media (max-width: 992px) {
  .site-footer {
    padding-top: 48px;
  }

  .footer-grid {
    grid-template-columns: 1.15fr 0.8fr 1fr;
    gap: 24px;
  }

  .footer-col-title {
    margin-bottom: 14px;
  }

  .footer-links {
    gap: 8px;
  }

  .footer-contact-item {
    gap: 9px;
    margin-bottom: 11px;
  }

  .footer-bottom {
    margin-top: 34px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
}

@media (max-width: 640px) {
  .site-footer {
    padding-top: 36px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 22px;
    row-gap: 26px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-brand p {
    margin-top: 7px;
    max-width: 460px;
    line-height: 1.55;
  }

  .footer-divider-gold {
    margin-top: 12px;
  }

  .footer-col-title {
    margin-bottom: 11px;
  }

  .footer-links {
    gap: 7px;
  }

  .footer-links a,
  .footer-contact-item a,
  .footer-contact-item span {
    font-size: 0.84rem;
  }

  .footer-contact-item {
    gap: 8px;
    margin-bottom: 9px;
  }

  .footer-bottom {
    margin-top: 28px;
    padding: 14px 5%;
  }

  .footer-bottom p {
    font-size: 0.68rem;
    line-height: 1.5;
  }
}

@media (max-width: 420px) {
  .footer-grid {
    column-gap: 16px;
  }
}

/* ============================================================
   TABLET IN VERTICALE (iPad mini → iPad Pro, 600–1100px, portrait)
   In verticale lo schermo è stretto ma molto alto: i titoli in "vw"
   diventavano piccoli (h2 fermo sul minimo di 24px) e le fasce titolo
   in "vh" enormi (30vh = 310–410px per un titolo da ~35px).
   Qui i titoli vengono portati alle stesse dimensioni percepite del
   tablet in orizzontale e la fascia titolo ha un'altezza fissa,
   uguale a quella che si vede in orizzontale.
   Desktop, telefono e tablet in orizzontale NON sono toccati.
   Va in fondo al file per vincere a parità di specificità.
   ============================================================ */
@media (min-width: 600px) and (max-width: 1100px) and (orientation: portrait) {

  /* Titoli di pagina (hero interne: Chi siamo, Specchi, linee, ecc.) */
  .page-hero-content h1 {
    font-size: clamp(2.6rem, 5.4vw, 3.4rem);
  }

  /* Fascia titolo: altezza fissa invece di 30vh → niente bianco in eccesso */
  .page-hero {
    height: 260px;
    min-height: 260px;
  }

  /* Titoli di sezione, di card e di specifiche */
  h2 { font-size: clamp(2rem, 4vw, 2.5rem); }
  h3 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); }
  .linea-specs-inner h2 { font-size: clamp(1.8rem, 3.6vw, 2.2rem); }

  /* Meno vuoto tra il titolo di sezione e il contenuto che segue */
  .section-header { margin-bottom: 48px; }

  /* Hero della home: "Serra Antica" e il payoff sono in proporzione allo schermo */
  .hero-content h1 .hero-brand { font-size: clamp(5.5rem, 13vw, 8rem); }
  .hero-content h1 em          { font-size: clamp(1.5rem, 3.4vw, 1.9rem); }
}