/* ============================================
   STITCH GLOBAL — Variabili condivise (S.P.I.)
   Generato da: One-page_SPI.zip
   Palette fedele al design Stitch originale
   ============================================ */
:root {
  /* Colori principali */
  --stitch-primary:    #E03538;  /* rosso accento (CTA, tag, em) */
  --stitch-primary-2:  #C8272A;  /* variante rossa (enfasi testo) */
  --stitch-secondary:  #D4A8AB;  /* slate rosato (CTA secondaria) */
  --stitch-accent:     #E03538;

  --stitch-bg:         #1E0608;  /* sfondo scuro principale (hero, servizi) */
  --stitch-bg-mid:     #2D0A0D;  /* card scura / hover accordion */
  --stitch-bg-input:   #3E1215;  /* input dark / sfondo alt */
  --stitch-bg-light:   #FFF5EE;  /* sezioni chiare (about, contatti) */
  --stitch-bg-white:   #ffffff;  /* nav, footer, card chiare */

  --stitch-text:       #FDF6F6;  /* testo chiaro su scuro */
  --stitch-text-dark:  #2D0A0D;  /* testo scuro su chiaro */
  --stitch-text-body:  #5A2A2D;  /* corpo su chiaro */
  --stitch-text-muted: #D4A8AB;  /* muted su scuro */
  --stitch-text-deep:  #8A4A4E;  /* muted profondo */

  --stitch-border:     rgba(200,39,42,0.20);
  --stitch-border-soft:rgba(200,39,42,0.12);

  /* Tipografia */
  --stitch-font-head:  'Playfair Display', Georgia, serif;
  --stitch-font-main:  'Inter', system-ui, sans-serif;
  --stitch-font-mono:  'DM Mono', 'Courier New', monospace;

  /* Spacing / layout */
  --stitch-radius:     0px;
  --stitch-shadow:     0 4px 20px rgba(0,0,0,0.08);
  --stitch-gap:        24px;
  --stitch-section-py: 112px;   /* py-28 */
  --stitch-maxw:       1280px;  /* max-w-7xl */
}

/* Reset leggero e coerenza box */
.stitch-section * { box-sizing: border-box; }

/* Container boxed coerente in tutte le sezioni */
.stitch-container {
  max-width: var(--stitch-maxw);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  width: 100%;
}
@media (min-width: 768px) {
  .stitch-container { padding-left: 48px; padding-right: 48px; }
}

/* Sezioni full-width */
.stitch-section {
  position: relative;
  padding-top: var(--stitch-section-py);
  padding-bottom: var(--stitch-section-py);
  font-family: var(--stitch-font-main);
}

/* Tag mono maiuscolo (etichetta sopra i titoli) */
.stitch-tag {
  font-family: var(--stitch-font-mono);
  color: var(--stitch-primary);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  margin-bottom: 20px;
  display: block;
}

/* Titoli sezione (serif) */
.stitch-h2 {
  font-family: var(--stitch-font-head);
  font-weight: 700;
  line-height: 1.15;
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0 0 24px;
}
.stitch-h2 em { font-style: italic; color: var(--stitch-primary-2); }

/* Bottoni */
.stitch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 32px;
  font-family: var(--stitch-font-main);
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  transition: opacity .3s ease, background .3s ease;
  border: none;
  cursor: pointer;
}
.stitch-btn:hover { opacity: .85; }
.stitch-btn--primary   { background: var(--stitch-primary); color: #fff; }
.stitch-btn--secondary { background: var(--stitch-secondary); color: #000; }

.stitch-arrow { width: 14px; height: 14px; flex-shrink: 0; }

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

/* ─── Pulsante "Torna su" ───────────────────────── */
.stitch-totop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--stitch-primary);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease, background .2s ease;
}
.stitch-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.stitch-totop:hover { background: var(--stitch-primary-2); }
@media (max-width: 640px) {
  .stitch-totop { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}