/* ═══════════════════════════════════════════════════════════════════
   SITO AL LAVORO — i 4 siti di esempio
   Ogni demo è un sito vero disegnato su una larghezza fissa di 1200px
   e poi rimpicciolito con transform:scale() da main.js. Resta quindi
   sempre in formato desktop, anche guardandolo dal telefono.

   I quattro hanno impianti DIVERSI, non solo colori diversi:
     1 · Trattoria  → immersivo: foto a tutto campo, menù a listino
     2 · Palestra   → barra laterale fissa, prezzi in tabella
     3 · Dentista   → tutto centrato, da brochure
     4 · Fioreria   → editoriale asimmetrico, immagini al vivo

   Le foto arrivano da Unsplash (licenza libera, anche commerciale).
   Per cambiarne una basta sostituire l'src dell'<img> in index.html.
   ═══════════════════════════════════════════════════════════════════ */

.d{
  width:1200px;
  min-height:1650px;
  display:flex; flex-direction:column;
  font-family:var(--ff-body);
  line-height:1.55;
  letter-spacing:-.005em;
}
.d *{ box-sizing:border-box; }
.d > *{ flex-shrink:0; }
.d h1,.d h2,.d h3{ margin:0; line-height:1.05; }
.d nav{ display:flex; }
.d svg{ display:block; }

/* l'ultima fascia si allunga: mai una banda di colore diverso in fondo */
.d1-foot,.d3-foot,.d4-foot{ flex-grow:1; }
.d2-cta{ margin-top:auto; }


/* ═══════════ 1 · TRATTORIA DA NONNA ROSA ════════════════════════════
   Immersivo. Il piatto occupa tutto lo schermo, il testo ci sta sopra,
   e il menù è un listino con i puntini — come quello sul tavolo.      */

.d1{ position:relative; background:#16110e; color:#f4e9d8; }

.d1-nav{
  position:absolute; z-index:3; inset:0 0 auto 0;
  display:flex; align-items:center; padding:30px 56px;
}
.d1-nav nav{ flex:1; gap:32px; align-items:center; font-size:14.5px; color:#e6dbc8; }
.d1-nav nav:last-child{ justify-content:flex-end; }
.d1-logo{ font-family:var(--ff-serif); font-size:32px; padding:0 40px; white-space:nowrap; }
.d1-btn{ padding:12px 24px; background:#c9551f; color:#fff;
  font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.d1-btn--big{ padding:19px 38px; font-size:14px; }

.d1-hero{ position:relative; height:560px; }
.d1-art{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.d1-hero::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(22,17,14,.86) 0 18%, rgba(22,17,14,.25) 46%, rgba(22,17,14,.9)); }
.d1-hero-copy{ position:absolute; z-index:2; left:56px; bottom:86px; max-width:620px; }
.d1-eyebrow{ display:block; font-family:var(--ff-mono); font-size:12px; letter-spacing:.24em;
  text-transform:uppercase; color:#e8a06a; margin-bottom:20px; }
.d1-hero h1{ font-family:var(--ff-serif); font-size:74px; letter-spacing:-.02em; line-height:1.04; }
.d1-hero-copy p{ margin-top:22px; max-width:440px; font-size:17px; line-height:1.65; color:#cbbca6; }
.d1-hero-copy .d1-btn--big{ display:inline-block; margin-top:34px; }
.d1-open{ position:absolute; z-index:2; right:56px; bottom:44px;
  font-family:var(--ff-mono); font-size:12.5px; letter-spacing:.1em; color:#cbbca6;
  border:1px solid rgba(244,233,216,.3); padding:10px 18px; }

.d1-menu{ padding:76px 56px 68px; }
.d1-menu-head{ display:flex; align-items:baseline; gap:20px; margin-bottom:44px;
  border-bottom:1px solid rgba(244,233,216,.18); padding-bottom:22px; }
.d1-menu h2{ font-family:var(--ff-serif); font-size:44px; }
.d1-menu-head span{ margin-left:auto; font-family:var(--ff-mono); font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; color:#8f8272; }
.d1-cols{ display:grid; grid-template-columns:1fr 1fr; gap:0 72px; }
.d1-col h3{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.24em;
  text-transform:uppercase; color:#c9551f; margin-bottom:26px; }
/* riga di listino: nome …………… prezzo, e sotto la descrizione */
.d1-row{ display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:10px;
  padding:18px 0; border-bottom:1px dotted rgba(244,233,216,.2); }
.d1-row b{ font-family:var(--ff-serif); font-size:23px; font-weight:400; }
.d1-row i{ border-bottom:1.5px dotted rgba(244,233,216,.35); transform:translateY(-4px); }
.d1-row em{ font-style:normal; font-family:var(--ff-serif); font-size:22px; color:#e8a06a; }
.d1-row span{ grid-column:1/-1; margin-top:5px; font-size:14px; color:#8f8272; }

.d1-quote{ padding:78px 56px; text-align:center; background:#1d1512;
  border-block:1px solid rgba(244,233,216,.14); }
.d1-quote p{ font-family:var(--ff-serif); font-style:italic; font-size:42px; line-height:1.3; }
.d1-quote span{ display:block; margin-top:22px; font-family:var(--ff-mono); font-size:12px;
  letter-spacing:.18em; text-transform:uppercase; color:#8f8272; }

.d1-foot{ display:flex; gap:64px; padding:52px 56px; }
.d1-foot b{ display:block; font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.2em;
  text-transform:uppercase; color:#c9551f; }
.d1-foot span{ display:block; margin-top:10px; font-size:15px; color:#d6c9b6; }


/* ═══════════ 2 · FERRO ATHLETIC CLUB ════════════════════════════════
   Barra laterale fissa a sinistra, contenuto a destra.
   Gli abbonamenti sono una tabella, non tre schede.                   */

.d2{ background:#080808; color:#fff; flex-direction:row; align-items:stretch; }

.d2-side{
  width:260px; flex:0 0 260px; padding:36px 28px;
  display:flex; flex-direction:column; gap:36px;
  background:#0e0e0e; border-right:1px solid rgba(255,255,255,.14);
}
.d2-logo{ font-family:var(--ff-disp); font-weight:800; font-size:30px; letter-spacing:-.06em; line-height:.9; }
.d2-logo i{ display:block; margin-top:6px; font-style:normal; font-family:var(--ff-mono);
  font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:#ccff00; }
.d2-side nav{ flex-direction:column; gap:14px; font-family:var(--ff-mono); font-size:12.5px;
  letter-spacing:.14em; text-transform:uppercase; color:#8f8f8f; }
.d2-side nav a{ padding-left:16px; border-left:2px solid transparent; }
.d2-side nav a.on{ color:#ccff00; border-left-color:#ccff00; }
.d2-side-foot{ margin-top:auto; font-family:var(--ff-mono); font-size:11px; line-height:1.8; color:#6a6a6a; }

.d2-btn{ display:inline-block; padding:15px 26px; background:#ccff00; color:#0a0a0a; text-align:center;
  white-space:nowrap;
  font-family:var(--ff-disp); font-weight:800; font-size:13px; letter-spacing:.04em; text-transform:uppercase; }
.d2-btn--big{ padding:19px 34px; font-size:15px; }
.d2-ghost{ display:inline-block; padding:15px 26px; border:1.5px solid rgba(255,255,255,.3); color:#fff;
  text-align:center; white-space:nowrap;
  font-family:var(--ff-disp); font-weight:600; font-size:13px; text-transform:uppercase; }
.d2-side .d2-btn{ white-space:normal; }

.d2-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.d2-main > *{ flex-shrink:0; }

.d2-hero{ display:flex; align-items:flex-end; gap:24px; padding:64px 56px 0; min-height:520px; }
.d2-hero-copy{ flex:1.2; padding-bottom:56px; }
.d2-hero h1{ font-family:var(--ff-disp); font-weight:800; font-size:92px;
  letter-spacing:-.06em; line-height:.88; }
.d2-hero h1 mark{ background:none; color:#ccff00; }
.d2-hero p{ margin-top:30px; max-width:420px; font-size:16.5px; line-height:1.65; color:#9a9a9a; }
.d2-actions{ display:flex; align-items:center; gap:14px; margin-top:36px; }
.d2-art{ flex:0 0 340px; height:460px; align-self:flex-end; object-fit:cover;
  filter:grayscale(1) contrast(1.12) brightness(.94); }

.d2-ticker{ overflow:hidden; background:#ccff00; color:#0a0a0a; padding:15px 0; }
.d2-ticker span{ display:block; white-space:nowrap; font-family:var(--ff-disp); font-weight:800;
  font-size:18px; letter-spacing:.05em; }

.d2-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:44px 56px;
  border-bottom:1px solid rgba(255,255,255,.14); }
.d2-stats b{ display:block; font-family:var(--ff-disp); font-weight:800; font-size:42px; letter-spacing:-.05em; }
.d2-stats span{ display:block; margin-top:4px; font-family:var(--ff-mono); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:#7d7d7d; }

.d2-table{ padding:56px 56px 20px; }
.d2-table h2{ font-family:var(--ff-disp); font-weight:800; font-size:40px;
  letter-spacing:-.05em; text-transform:uppercase; margin-bottom:28px; }
.d2-tr{ display:grid; grid-template-columns:200px 1fr 120px 150px; align-items:center; gap:24px;
  padding:24px 0; border-bottom:1px solid rgba(255,255,255,.14); }
.d2-th{ padding:0 0 14px; border-bottom:1.5px solid rgba(255,255,255,.3);
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#7d7d7d; }
.d2-tr b{ font-family:var(--ff-disp); font-weight:800; font-size:22px; letter-spacing:-.03em; }
.d2-tr b i{ display:block; margin-top:4px; font-style:normal; font-family:var(--ff-mono);
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#ccff00; }
.d2-tr > span:not([class]){ font-size:14.5px; color:#9a9a9a; }
.d2-tr em{ font-style:normal; font-family:var(--ff-disp); font-weight:800; font-size:34px; letter-spacing:-.05em; }
.d2-tr--hot{ background:linear-gradient(90deg, rgba(204,255,0,.09), transparent 70%); }
.d2-tr--hot em{ color:#ccff00; }

.d2-cta{ display:flex; align-items:center; justify-content:space-between; gap:30px;
  margin:44px 56px 56px; padding:40px 44px; background:#ccff00; color:#0a0a0a; }
.d2-cta b{ font-family:var(--ff-disp); font-weight:800; font-size:32px; letter-spacing:-.045em; }
.d2-cta .d2-btn{ background:#0a0a0a; color:#ccff00; flex:0 0 auto; }


/* ═══════════ 3 · STUDIO BIANCHI ═════════════════════════════════════
   Tutto centrato, colonna stretta, filetti sottili. Un impianto calmo,
   da brochure di carta. Il team ci mette la faccia.                   */

.d3{ background:#fbf6ee; color:#2a2118; align-items:center; }
.d3 > *{ width:100%; }

.d3-nav{ display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:26px 56px 20px; border-bottom:1px solid #e6dccc; }
.d3-logo{ font-family:var(--ff-disp); font-weight:800; font-size:25px; letter-spacing:-.05em; }
.d3-nav nav{ gap:36px; font-size:14.5px; color:#7a6d5c; }

.d3-intro{ max-width:760px; margin:0 auto; padding:52px 40px 44px; text-align:center; }
.d3-eyebrow{ display:block; font-family:var(--ff-mono); font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:#5c7355; margin-bottom:20px; }
.d3-intro h1{ font-family:var(--ff-serif); font-size:56px; letter-spacing:-.015em; line-height:1.08; }
.d3-intro p{ margin:20px auto 0; max-width:610px; font-size:16.5px; line-height:1.7; color:#6e6152; }
.d3-btn{ display:inline-block; padding:16px 32px; border-radius:100px; background:#d96a4f; color:#fff;
  font-size:15px; font-weight:600; }
.d3-btn--full{ display:block; width:100%; text-align:center; padding:16px; margin-top:10px; }
.d3-intro .d3-btn{ margin-top:30px; }
.d3-tel{ display:block; margin-top:16px; font-size:14.5px; color:#8a7c69; }
.d3-tel b{ color:#2a2118; }

.d3-team{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px;
  max-width:900px; margin:0 auto; padding:8px 40px 72px; }
.d3-team figure{ margin:0; text-align:center; }
.d3-team img{ width:100%; aspect-ratio:5/6; object-fit:cover; border-radius:14px; }
.d3-team figcaption{ margin-top:16px; }
.d3-team b{ display:block; font-family:var(--ff-disp); font-weight:800; font-size:16px; letter-spacing:-.03em; }
.d3-team span{ display:block; margin-top:2px; font-size:13.5px; color:#8a7c69; }

.d3-list{ max-width:760px; margin:0 auto; padding:0 40px 78px; }
.d3-list h2{ font-family:var(--ff-serif); font-size:40px; text-align:center; margin-bottom:34px; }
.d3-item{ display:grid; grid-template-columns:1fr auto; gap:6px 24px; align-items:baseline;
  padding:22px 0; border-top:1px solid #e6dccc; }
.d3-item:last-child{ border-bottom:1px solid #e6dccc; }
.d3-item b{ font-family:var(--ff-disp); font-weight:800; font-size:19px; letter-spacing:-.035em; }
.d3-item span{ grid-column:1; font-size:14.5px; color:#8a7c69; }
.d3-item i{ grid-row:1/3; font-style:normal; font-family:var(--ff-mono); font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase; color:#5c7355; }

.d3-book{ max-width:560px; margin:0 auto; padding:0 40px 78px; text-align:center; }
.d3-book h2{ font-family:var(--ff-serif); font-size:36px; margin-bottom:28px; }
.d3-box{ padding:32px; border-radius:22px; background:#eef1e9; border:1px solid #dde3d6; text-align:left; }
.d3-lab{ display:block; margin-bottom:10px; font-family:var(--ff-mono); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:#8a9a84; }
.d3-days,.d3-slots{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.d3-days{ margin-bottom:22px; }
.d3-slots{ margin-bottom:8px; }
.d3-days i,.d3-slots i{ font-style:normal; text-align:center; padding:12px 4px; border-radius:100px;
  background:#fff; border:1px solid #dde3d6; font-size:13.5px; color:#4d5a49; }
.d3-days i.on,.d3-slots i.on{ background:#5c7355; border-color:#5c7355; color:#fff; font-weight:600; }
.d3-box small{ display:block; margin-top:14px; text-align:center; font-size:12.5px; color:#8a9a84; }

.d3-foot{ display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:44px 40px 56px; background:#f2ece1; text-align:center;
  font-family:var(--ff-mono); font-size:12.5px; letter-spacing:.05em; color:#7a6d5c; }


/* ═══════════ 4 · FIORERIA MIMOSA ════════════════════════════════════
   Editoriale asimmetrico: le immagini arrivano al bordo della pagina,
   il testo sta di lato. Corsivo, verde bosco, molta aria.             */

.d4{ background:#fffdfb; color:#14342a; }

.d4-top{ padding:12px 56px; background:#14342a; color:#f2ece1; text-align:center;
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.08em; }
.d4-nav{ display:flex; align-items:center; gap:40px; padding:26px 56px; border-bottom:1px solid #e7e2da; }
.d4-logo{ font-family:var(--ff-serif); font-size:28px; line-height:1; }
.d4-logo i{ display:block; margin-top:5px; font-style:normal; font-family:var(--ff-mono);
  font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:#8e9a86; }
.d4-nav nav{ gap:30px; margin-left:auto; font-size:14.5px; color:#4d6156; }
.d4-cart{ display:inline-flex; align-items:center; gap:9px; padding:11px 20px; border-radius:100px;
  border:1px solid #cfd6c9; font-size:14px; }
.d4-cart b{ display:grid; place-items:center; min-width:21px; height:21px; border-radius:100px;
  background:#e0708c; color:#fff; font-size:12px; }

/* immagine a sinistra fino al bordo, testo a destra */
.d4-hero{ display:grid; grid-template-columns:minmax(0,520px) 1fr; align-items:center; gap:64px;
  padding:0 56px 0 0; }
.d4-art{ width:100%; height:520px; object-fit:cover; }
.d4-hero-copy{ padding:40px 0; }
.d4-eyebrow{ display:block; font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.22em;
  text-transform:uppercase; color:#8e9a86; margin-bottom:20px; }
.d4-hero h1{ font-family:var(--ff-serif); font-style:italic; font-size:60px;
  letter-spacing:-.01em; line-height:1.1; }
.d4-hero-copy p{ margin-top:24px; max-width:420px; font-size:16.5px; line-height:1.7; color:#4d6156; }
.d4-actions{ display:flex; align-items:center; gap:28px; margin-top:36px; }
.d4-btn{ padding:16px 30px; border-radius:100px; background:#14342a; color:#fffdfb;
  font-size:15px; font-weight:600; }
.d4-link{ font-size:14.5px; border-bottom:1px solid #c3cfc4; padding-bottom:3px; }

.d4-shelf{ padding:76px 56px 70px; }
.d4-head{ display:flex; align-items:baseline; gap:24px; margin-bottom:30px;
  border-bottom:1px solid #e7e2da; padding-bottom:20px; }
.d4-shelf h2{ font-family:var(--ff-serif); font-size:40px; }
.d4-filter{ margin-left:auto; font-family:var(--ff-mono); font-size:12px;
  letter-spacing:.08em; color:#8e9a86; }
.d4-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.d4-ph{ position:relative; border-radius:14px; overflow:hidden; margin-bottom:16px; }
.d4-ph img{ width:100%; aspect-ratio:5/6; object-fit:cover; display:block; }
.d4-ph--a{ background:#f7eef1; } .d4-ph--b{ background:#f1f2ee; }
.d4-ph--c{ background:#f6f2e8; } .d4-ph--d{ background:#eef2ea; }
.d4-badge{ position:absolute; z-index:2; top:12px; left:12px; padding:5px 12px; border-radius:100px;
  background:#fffdfb; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; }
.d4-prod b{ display:block; font-size:18px; font-weight:600; letter-spacing:-.02em; }
.d4-prod > span{ display:block; margin-top:3px; font-size:13.5px; color:#8e9a86; }
.d4-buy{ display:flex; align-items:center; margin-top:16px; }
.d4-buy em{ font-style:normal; font-family:var(--ff-serif); font-size:24px; }
.d4-buy i{ margin-left:auto; font-style:normal; padding:9px 18px; border-radius:100px;
  background:#e0708c; color:#fff; font-size:13px; font-weight:600; }

/* qui l'immagine va a destra, al vivo: la pagina resta sbilanciata di proposito */
.d4-story{ display:grid; grid-template-columns:1fr minmax(0,540px); align-items:center; gap:64px;
  padding:0 0 0 56px; background:#f6f3ec; }
.d4-story-copy{ padding:70px 0; }
.d4-story h2{ font-family:var(--ff-serif); font-style:italic; font-size:44px; letter-spacing:-.01em; }
.d4-story p{ margin-top:22px; max-width:420px; font-size:16px; line-height:1.7; color:#4d6156; }
.d4-story .d4-link{ display:inline-block; margin-top:26px; }
.d4-story-art{ width:100%; height:420px; object-fit:cover; }

.d4-foot{ display:flex; gap:64px; padding:56px; background:#14342a; color:#dfe6da; }
.d4-foot b{ display:block; font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.2em;
  text-transform:uppercase; color:#8ea88a; }
.d4-foot span{ display:block; margin-top:10px; font-size:15px; }