/* ═══════════════════════════════════════
   SERENA GARUTI — Sistema CSS condiviso
   ═══════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Spectral:ital,wght@0,300;0,400;1,300;1,400&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  --ocean:       #3D6E8A;
  --ocean-mid:   #6A9DB8;
  --ocean-light: #A8C8D8;
  --ocean-pale:  #E4EFF5;
  --ocean-deep:  #1E3D50;
  --sand:        #C8B48A;
  --sand-light:  #E2D4B8;
  --sand-pale:   #F5EFE4;
  --driftwood:   #4A5E5A;
  --pebble:      #7A8C88;
  --ink:         #1A2328;
  --fog:         #F2F6F8;
  --white:       #FAFCFD;
  --wip:         #9E8A6A;
  --wip-pale:    #F0EBE0;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'DM Sans',sans-serif; background:var(--fog); color:var(--ink); overflow-x:hidden; }

/* ── NAV ── */
nav {
  display:flex; justify-content:space-between; align-items:center;
  padding:24px 64px; background:var(--ink);
  position:sticky; top:0; z-index:20;
}
.nav-logo { font-family:'Playfair Display',serif; font-size:19px; color:var(--white); letter-spacing:.02em; text-decoration:none; }
.nav-logo em { font-style:italic; color:var(--ocean-light); }
.nav-links { display:flex; gap:28px; list-style:none; align-items:center; }
.nav-links a { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ocean-light); text-decoration:none; opacity:.8; transition:opacity .2s; }
.nav-links a:hover, .nav-links a.active { opacity:1; color:var(--white); }
.nav-wip { font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--sand); opacity:.5; display:flex; align-items:center; gap:6px; }
.nav-wip::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--sand); opacity:.7; display:block; }

/* ── BOTTONI ── */
.btn-primary { display:inline-block; background:var(--ocean); color:var(--white); padding:13px 30px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; border-radius:2px; transition:background .25s; }
.btn-primary:hover { background:var(--ocean-mid); }
.btn-ghost { display:inline-block; border:1px solid rgba(168,200,216,.35); color:var(--ocean-light); padding:12px 30px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; border-radius:2px; }
.btn-light { display:inline-block; border:1px solid var(--ocean-mid); color:var(--ocean-light); padding:12px 28px; font-size:10px; letter-spacing:.15em; text-transform:uppercase; text-decoration:none; border-radius:1px; transition:background .25s, color .25s; }
.btn-light:hover { background:var(--ocean-mid); color:var(--white); }

/* ── SEZIONI COMUNI ── */
.section-header { display:flex; align-items:baseline; gap:24px; margin-bottom:56px; }
.section-title { font-family:'Playfair Display',serif; font-size:40px; font-weight:400; color:var(--ink); white-space:nowrap; }
.section-line { flex:1; height:1px; background:var(--ocean-pale); margin-bottom:6px; }

/* ── SAND QUOTE ── */
.sand-quote { background:var(--sand-pale); padding:72px 64px; border-top:1px solid var(--sand-light); border-bottom:1px solid var(--sand-light); display:flex; gap:56px; align-items:flex-start; }
.sq-mark { font-family:'Playfair Display',serif; font-size:96px; font-weight:700; color:var(--sand-light); line-height:.8; flex-shrink:0; margin-top:8px; }
.sq-text { font-family:'Spectral',serif; font-size:26px; font-weight:300; font-style:italic; color:var(--driftwood); line-height:1.5; flex:1; }
.sq-attr { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--sand); margin-top:20px; display:block; }

/* ── FOOTER ── */
footer { background:var(--ink); padding:48px 64px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:40px; }
.footer-logo { font-family:'Playfair Display',serif; font-size:18px; color:var(--white); text-decoration:none; }
.footer-logo em { font-style:italic; color:var(--ocean-light); }
.footer-nav { display:flex; gap:24px; justify-content:center; flex-wrap:wrap; }
.footer-nav a { font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--pebble); text-decoration:none; transition:color .2s; }
.footer-nav a:hover { color:var(--ocean-light); }
.footer-copy { font-size:10px; color:var(--driftwood); text-align:right; letter-spacing:.04em; }

/* ── PAGE HERO (pagine interne) ── */
.page-hero { background:var(--ocean-deep); padding:80px 64px; }
.page-hero-eyebrow { font-size:9px; letter-spacing:.25em; text-transform:uppercase; color:var(--ocean-light); opacity:.7; margin-bottom:16px; display:flex; align-items:center; gap:12px; }
.page-hero-eyebrow::before { content:''; width:28px; height:1px; background:var(--ocean-mid); display:block; }
.page-hero-title { font-family:'Playfair Display',serif; font-size:56px; font-weight:400; line-height:1.05; color:var(--white); letter-spacing:-.02em; margin-bottom:20px; }
.page-hero-title em { font-style:italic; color:var(--ocean-light); }
.page-hero-sub { font-family:'Spectral',serif; font-size:16px; font-weight:300; font-style:italic; line-height:1.75; color:rgba(210,225,232,.7); max-width:560px; }

/* ── WIP PAGE ── */
.wip-page { min-height:60vh; display:flex; align-items:center; justify-content:center; padding:80px 64px; background:var(--wip-pale); }
.wip-page-inner { text-align:center; max-width:500px; }
.wip-page-icon { font-size:48px; margin-bottom:24px; display:block; }
.wip-page-title { font-family:'Playfair Display',serif; font-size:40px; font-weight:400; color:var(--ink); margin-bottom:16px; }
.wip-page-desc { font-size:14px; font-weight:300; color:var(--pebble); line-height:1.8; margin-bottom:32px; }
.wip-form { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.wip-input { padding:12px 20px; border:1px solid var(--sand-light); border-radius:2px; font-size:13px; font-family:'DM Sans',sans-serif; background:var(--white); color:var(--ink); min-width:240px; outline:none; }
.wip-input:focus { border-color:var(--ocean-mid); }
.wip-submit { padding:12px 24px; background:var(--ocean); color:var(--white); border:none; border-radius:2px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; font-family:'DM Sans',sans-serif; }

@media(max-width:900px){
  nav { padding:20px 24px; }
  .nav-links { display:none; }
  .sand-quote { flex-direction:column; padding:48px 24px; }
  footer { grid-template-columns:1fr; padding:36px 24px; }
  .footer-copy { text-align:left; }
  .page-hero { padding:60px 24px; }
  .page-hero-title { font-size:40px; }
  .wip-page { padding:60px 24px; }
}