/* ============================================================
   OPERA IMMOBILIARE — Variabili globali condivise
   Generato da progetto Stitch: "Opera ok" (one-page website)
   ============================================================ */
:root {
  /* Colori */
  --opera-primary:      #8b1a1a;   /* bordeaux / crimson */
  --opera-primary-dark: #6e1414;
  --opera-accent:       #ffbf66;   /* oro (hero highlight) */
  --opera-bg:           #faf8f6;   /* crema */
  --opera-bg-alt:       #f2edea;   /* crema scuro (sezioni alterne) */
  --opera-card:         #ffffff;
  --opera-text:         #1a0f0f;   /* testo scuro */
  --opera-text-mid:     rgba(26,15,15,0.60);
  --opera-text-low:     rgba(26,15,15,0.38);
  --opera-border:       rgba(26,15,15,0.10);

  /* Tag immobili */
  --opera-tag-vendita:      #8b1a1a;
  --opera-tag-locazione:    #1e50a0;
  --opera-tag-asta:         #b43c14;
  --opera-tag-commerciale:  #64288c;

  /* Tipografia */
  --opera-font-head: 'Playfair Display', Georgia, serif;
  --opera-font-body: 'Lato', -apple-system, Segoe UI, sans-serif;
  --opera-font-mono: 'DM Mono', 'Courier New', monospace;

  /* Layout */
  --opera-radius:  2px;
  --opera-max:     1280px;
  --opera-shadow:  0 4px 32px rgba(0,0,0,0.06);
  --opera-gap:     28px;
}

/* Reset leggero solo per gli elementi Opera (non tocca il tema) */
.opera-section * { box-sizing: border-box; }
.opera-section p,
.opera-section h1,
.opera-section h2,
.opera-section h3,
.opera-section ul { margin: 0; }
.opera-section ul { list-style: none; padding: 0; }

.opera-serif { font-family: var(--opera-font-head); }
.opera-mono  { font-family: var(--opera-font-mono); }

/* Eyebrow (etichetta sezione) */
.opera-eyebrow {
  font-family: var(--opera-font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--opera-primary);
  margin-bottom: 16px;
}

/* Titoli sezione */
.opera-h2 {
  font-family: var(--opera-font-head);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--opera-text);
}

/* Bottone primario */
.opera-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background-color: var(--opera-primary);
  color: #fff;
  font-family: var(--opera-font-body);
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: var(--opera-radius);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .2s ease;
  letter-spacing: 0.01em;
}
.opera-btn:hover { background-color: var(--opera-primary-dark); color: #fff; }
.opera-btn svg { width: 14px; height: 14px; }

.opera-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  background-color: rgba(255,252,247,0.14);
  color: #fffaf4;
  font-family: var(--opera-font-body);
  font-size: 15px;
  font-weight: 600;
  border: 1px solid rgba(255,250,244,0.45);
  border-radius: var(--opera-radius);
  cursor: pointer;
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: all .2s ease;
}
.opera-btn-ghost:hover {
  background-color: rgba(255,252,247,0.22);
  border-color: rgba(255,250,244,0.6);
  color: #fffaf4;
}

/* Container */
.opera-container {
  max-width: var(--opera-max);
  margin: 0 auto;
  padding: 0 2.5rem;
  width: 100%;
}

/* Sezione base */
.opera-section { font-family: var(--opera-font-body); color: var(--opera-text); }
.opera-pad { padding: 7rem 0; }

/* ---------- Responsive globale ---------- */
@media (max-width: 1024px) {
  .opera-container { padding: 0 1.5rem; }
  .opera-pad { padding: 4.5rem 0; }
}
@media (max-width: 768px) {
  .opera-container { padding: 0 1.15rem; }
  .opera-pad { padding: 3.5rem 0; }
}