/* ============================================================================
   THEME BASE — il "DNA" condiviso dai 3 satelliti
   ----------------------------------------------------------------------------
   Derivato dal theme.css dell'hub (COPIA: l'originale non è stato toccato).
   Contiene la geometria, i componenti e la scala tipografica del design system.

   ⚠️ NON modificare i token qui per un singolo sito:
      ogni satellite sovrascrive le variabili nel SUO `theme-site.css`,
      che il sync concatena qui sotto → produce il `theme.css` finale (1 solo file).

   Leve di personalità concesse ai satelliti (vedi PROGETTO-SATELLITI.md):
     --greige / --scuro  → il colore delle bande        (Tulle: nero · Juliet: #e8dcd2)
     --script            → il corsivo decorativo        (Tulle: OFF · Juliet: ON)
     l'oro #85714d resta l'UNICO accento di sistema su tutti e 3.
   ========================================================================== */

/* ============================================================================
   Idea Sposa Couture — theme.css
   Design system: palette ufficiale, Playfair Display + Lato + Parisienne, spaziature coerenti.
   ========================================================================== */

/* --- FONT self-hosted (WOFF2 locali, niente Google Fonts → no render-blocking + GDPR).
   Playfair = variabile (400–900) roman+corsivo; Lato 300/400/700; Parisienne 400. Subset latin. --- */
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/fonts/playfair.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 900; font-display: swap; src: url('/fonts/playfair-italic.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/lato-300.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/lato-400.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/lato-700.woff2') format('woff2'); }
@font-face { font-family: 'Parisienne'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/parisienne.woff2') format('woff2'); }

:root {
  /* Palette ufficiale */
  --oro:        #85714d;
  --oro-scuro:  #76633b;
  /* Oro per il TESTO PICCOLO (occhielli, 12px → WCAG AA vuole 4.5:1).
     Verificato: l'oro #85714d fa 4.37 su avorio e 3.49 su greige → NON passa.
     Nemmeno --oro-scuro basta su greige (4.31). Questo passa ovunque (min 4.96).
     I TITOLI restano #85714d: sono testo grande, soglia 3.0 → passano. */
  --oro-testo:  #6a5a3d;
  /* Oro per il TESTO PICCOLO (occhielli, 12px). L'oro #85714d fa 4.37 su avorio e
     3.49 su greige: sotto il 4.5 richiesto da WCAG AA per il corpo. Questo passa
     ovunque (min 4.96). I TITOLI restano #85714d: sono testo grande, soglia 3.0. */
  --oro-testo:  #6a5a3d;
  --oro-chiaro: #a08a5f;
  --grigio:     #f4f1ea;   /* unico tono caldo del sito (beige chiaro) */
  --greige:     #f4f1ea;   /* UNIFICATO al chiaro (era #ede7dd) — un solo beige su tutto il sito */
  --testo:      #222222;   /* titoli scuri */
  --testo-soft: #535049;   /* testo secondario neutro-caldo (leggermente più scuro per leggibilità) */
  --bianco:     #ffffff;
  --scuro:      #1c1a17;   /* footer */

  /* Tipografia */
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --script: "Parisienne", "Snell Roundhand", "Brush Script MT", cursive; /* parole decorative sovrapposte */

  /* Scala tipografica (clamp = fluida) */
  --fs-hero:  clamp(2.6rem, 6vw, 4.6rem);
  --fs-h2:    clamp(2rem, 3.6vw, 3rem);
  --fs-h3:    clamp(1.35rem, 2.2vw, 1.8rem);
  --fs-body:  1rem;            /* 16px base; nei testi lunghi 1.0625 */
  --fs-small: 0.875rem;
  --lh-body:  1.7;
  --lh-head:  1.15;

  /* Spaziature coerenti (scala 4px) */
  --s-1: 0.5rem;  --s-2: 1rem;   --s-3: 1.5rem;  --s-4: 2rem;
  --s-5: 3rem;    --s-6: 4rem;   --s-7: 6rem;    --s-8: 8rem;

  --maxw: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 0; /* spigoli vivi come l'originale (bottoni/card squadrati) */
  --nav-h: 84px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: #4d4a45; /* corpo grigio neutro-caldo, morbido (non nero, non "fango") */
  background: var(--bianco);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: var(--lh-head); color: var(--testo); }
h2 { text-transform: uppercase; letter-spacing: .06em; } /* titoli di sezione maiuscoli (scuri; oro solo negli occhielli) */

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
/* 🔴 LA NAVBAR FISSA NON OCCUPA SPAZIO — e sulle pagine interne non gliene faceva nessuno.
   `.nav` è position:fixed → esce dal flusso. Sulle pagine con hero ci pensa .hero__inner
   (padding: var(--nav-h)); sulle pagine SENZA hero il primo elemento partiva da y=0, cioè
   SOTTO la barra. Il breadcrumb era quindi invisibile su TUTTE le pagine interne, da sempre:
   è alto una riga e ci spariva sotto tutto intero, quindi sembrava che non ci fosse un
   problema. Si è visto solo sulla pagina articolo, dove il titolo lungo lo manda a tre righe
   e l'ultima sbuca fuori dalla barra (Marco, 16/07). C'era nel sorgente, non sullo schermo.
   La classe .has-solid-nav la mette già header.php su <body> — mancava solo chi la usasse. */
body.has-solid-nav { padding-top: var(--nav-h); }

.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* ══ APERTURA DELLE PAGINE INTERNE — occhiello → H1 → sommario ═══════════════════════
   Le pagine interne aprono tutte allo stesso modo, quindi è UNA classe, non valori
   sparsi pagina per pagina (domani vale su Scarpe senza riscriverla).
   Correggeva due difetti visti insieme (Marco, 16/07):
     · con .section nudo prendevano 7rem sopra e sotto: sotto una navbar da 84px diventa
       un buco, non respiro → qui ~68px, che è aria voluta;
     · l'H1 restava SENZA margine — il reset è `* { margin: 0 }` e nessuna regola lo
       rimetteva fuori da .section-head → il sommario finiva incollato al titolo.
   `.section.page-intro` (0,2,0) batte `.section` (0,1,0) SEMPRE: non dipende dall'ordine
   in cui sync.sh concatena base+site nel theme.css generato. */
/* Il padding SOPRA vale un terzo di quello sotto, e non è una svista: sopra c'è già il
   breadcrumb a occupare quello spazio, e il breadcrumb PARLA DELL'ARTICOLO — sta con lui,
   non con la navbar. Tenerli vicini dice a colpo d'occhio che sono la stessa cosa.
   Sotto invece lo spazio serve tutto: separa il sommario dalla sezione seguente, dove non
   c'è nient'altro a farlo. (Marco, 16/07: «avvicina ancora un poco il blocco».) */
.section.page-intro { padding-block: clamp(.9rem, 1.8vw, 1.4rem) clamp(2.4rem, 4.5vw, 3.75rem); }
.page-intro h1 { margin-bottom: var(--s-4); }
.bg-grigio { background: var(--grigio); }
.bg-greige   { background: var(--greige); }
.bg-scuro  { background: var(--scuro); color: #e9e4dc; }
/* Beige unificato: se due bande calde si toccano, un filetto sottile le separa (auto, ovunque). */
.bg-greige + .bg-greige, .bg-greige + .bg-grigio,
.bg-grigio + .bg-greige, .bg-grigio + .bg-grigio { border-top: 1px solid rgba(133,113,77,.16); }

.eyebrow {
  font-family: var(--sans); font-size: .75rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--oro-testo);
  margin-bottom: var(--s-2);
}
/* L'occhiello è testo PICCOLO (12px): soglia WCAG 4.5:1, non 3.0. Con --oro (#85714d)
   falliva su avorio (4.37) e su greige (3.49); anche --oro-scuro cede sul greige (4.31).
   --oro-testo (#6a5a3d) passa su tutti e tre i fondi → un solo colore, ovunque. */
.bg-greige .eyebrow, .bg-grigio .eyebrow { color: var(--oro-testo); }
.eyebrow::after { content:""; display:block; width:42px; height:1px; background: currentColor; opacity:.55; margin-top:.7rem; } /* hairline couture */
.center .eyebrow::after { margin-inline:auto; }
.split__body h2 { margin-bottom: var(--s-3); } /* respiro titolo→testo */

/* Skip-link (accessibilità) */
.skip-link { position:absolute; left:-9999px; top:0; z-index:200; background:var(--oro); color:#fff; padding:.6rem 1rem; border-radius:0 0 var(--radius) 0; }
.skip-link:focus { left:0; }
.lead { font-size: 1.0625rem; line-height: 1.78; color: var(--testo-soft); max-width: 62ch; }
.lead + .lead { margin-top: .9rem; } /* stacco tra paragrafi */
.center { text-align: center; }
.center .lead { margin-inline: auto; }

/* Accento decorativo in corsivo (richiamo editoriale dell'originale: "Esclusivi"/"Comfort") */
.accent-script {
  display:block; font-family: var(--serif); font-style: italic; font-weight: 400;
  color: var(--oro-chiaro); font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1;
  margin-bottom: .2rem;
}
.bg-greige .accent-script { color: var(--oro); }

/* ---------- Bottoni ---------- */
.btn {
  display: inline-block; font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  padding: .9rem 1.9rem; border: 1px solid var(--oro); border-radius: var(--radius);
  background: var(--oro); color: #fff; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { background: var(--oro-scuro); border-color: var(--oro-scuro); }
.btn--outline { background: transparent; color: var(--oro-scuro); }
.btn--outline:hover { background: var(--oro); color: #fff; border-color: var(--oro); }
.btn--light { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn--light:hover { background: #fff; color: var(--testo); border-color:#fff; }

/* azioni: bottone + link secondario con freccia (gerarchia couture, oro con parsimonia) */
.actions { display:flex; align-items:center; gap: clamp(1.1rem, 3vw, 2rem); flex-wrap:wrap; }
.link-arrow { font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color: var(--oro-scuro); display:inline-flex; align-items:center; gap:.45rem; }
.link-arrow::after { content:"→"; transition: transform .25s var(--ease); }
.link-arrow:hover { color: var(--oro); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ============================================================================
   NAVBAR — sticky, trasparente sull'hero → solida allo scroll
   ========================================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), height .35s var(--ease), transform .35s var(--ease);
}
/* auto-hide (mobile): scroll giù oltre soglia → su; scroll su → riappare. La classe la mette main.js */
.nav--hidden { transform: translateY(-100%); }
.nav-inner { width:100%; max-width: var(--maxw); margin-inline:auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-3); }
.nav__logo { justify-self: start; }
.nav__logo img { height: 22px; width: auto; transition: opacity .3s; }
.nav__logo .logo--dark { display: none; }
.nav__panel { display:flex; align-items:center; }
.nav__panel-logo, .nav__panel-social { display:none; } /* visibili solo nel menu mobile */
.nav__menu { justify-self: center; display: flex; align-items: center; gap: clamp(1rem,2vw,2.1rem); list-style:none; margin:0; padding:0; }
.nav__menu > li > a {
  font-size: .88rem; font-weight: 500; letter-spacing: .05em; color: #fff;
  padding-block: .5rem; position: relative; transition: color .25s; white-space: nowrap;
}
.nav__menu > li > a::after {
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background: currentColor; transition: width .3s var(--ease);
}
.nav__menu > li > a:hover::after { width: 100%; }
.nav__cta { justify-self: end; }
.nav__cta .btn { padding: .7rem 1.4rem; }
.nav__menu-cta { display: none; } /* "Prenota" nel menu: solo su mobile (su desktop c'è il bottone) */

/* Dropdown Collezioni */
.has-sub { position: relative; }
.has-sub__ind { display:none; } /* indicatore +/− visibile solo nel menu mobile */
.submenu {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px);
  background: #fff; min-width: 230px; padding: .5rem; border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(0,0,0,.14); opacity: 0; visibility: hidden;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
/* ponte invisibile sul gap menu↔submenu: l'hover non si interrompe muovendo il mouse */
.submenu::before { content:""; position:absolute; left:0; right:0; top:-14px; height:14px; }
.has-sub:hover .submenu, .has-sub:focus-within .submenu { opacity:1; visibility:visible; transform: translateX(-50%) translateY(0); }
.submenu a { display:block; padding:.6rem .8rem; font-size:.85rem; color:var(--testo); border-radius:3px; transition: background .2s,color .2s; }
.submenu a:hover { background: var(--greige); color: var(--oro-scuro); }

/* Stato SOLIDO (scroll) e pagine senza hero */
.nav.is-solid, .nav--solid {
  background: rgba(255,255,255,.97); box-shadow: 0 1px 0 rgba(0,0,0,.06); height: 70px;
  backdrop-filter: saturate(1.1) blur(6px);
}
.nav.is-solid .nav__menu > li > a, .nav--solid .nav__menu > li > a { color: var(--testo); }
.nav.is-solid .logo--light, .nav--solid .logo--light { display: none; }
.nav.is-solid .logo--dark,  .nav--solid .logo--dark  { display: block; }

/* Hamburger + menu mobile */
.nav__toggle { display:none; justify-self:end; background:none; border:0; width:42px; height:42px; cursor:pointer; position:relative; z-index:2; }
.nav__toggle span { display:block; width:24px; height:2px; background:#fff; margin:5px auto; transition: .3s var(--ease); }
.nav.is-solid .nav__toggle span, .nav--solid .nav__toggle span,
body.menu-open .nav__toggle span { background: var(--testo); } /* menu mobile aperto su sfondo bianco */
/* hamburger → X quando il menu è aperto (resta cliccabile sopra l'overlay) */
body.menu-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav__toggle span:nth-child(2) { opacity: 0; }
body.menu-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* menu aperto: niente backdrop-filter sulla navbar — altrimenti la barra diventa il
   containing-block del pannello fixed e lo clippa alla sua altezza (bug "banda" dopo lo scroll) */
body.menu-open .nav, body.menu-open .nav.is-solid, body.menu-open .nav--solid { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Pagine interne senza hero: la navbar è fixed → offset del contenuto */
body.has-solid-nav main { padding-top: 70px; }

@media (max-width: 1150px) {
  .nav-inner { grid-template-columns: auto 1fr auto; }
  .nav__cta { display:none; }
  .nav__toggle { display:block; }
  /* pannello overlay a tutto schermo: logo (alto) · link (centro) · social (basso) */
  .nav__panel {
    position: fixed; inset: 0; z-index: 1;
    display: flex; flex-direction: column; align-items: center;
    background: #fff;                       /* fondo PIENO: niente bleed-through */
    transform: translateX(100%);
    transition: transform .4s var(--ease), visibility .4s;
    visibility: hidden; /* non focusabile quando chiuso */
    overflow-y: auto; gap: 0;
    padding: calc(var(--nav-h) + var(--s-1)) var(--gutter) var(--s-4);
  }
  .nav__panel.open { transform: none; visibility: visible; }

  .nav__panel-logo { display:block; margin-bottom: var(--s-3); } /* ~24px di stacco dal primo tasto */
  .nav__panel-logo img { height: 16px; width:auto; }   /* logo più piccolo */

  /* link ancorati in alto (vicini al logo); voci a tutta larghezza → centrate uniformi */
  .nav__menu { flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: var(--s-1); flex: 1 1 auto; width:100%; }
  .nav__menu > li { text-align:center; }
  .nav__menu > li > a { display:inline-block; color: var(--testo) !important; font-size: 1.15rem; padding-block:.55rem; } /* inline-block: altezza UNIFORME + area di tap */
  .nav__menu > li > a::after { display:none; } /* niente underline (resta "appiccicata" dopo il tap) */

  /* Collezioni: fisarmonica CHIUSA di default (si apre al tap, via JS .has-sub.open) */
  .has-sub__ind { display:inline; margin-left:.35rem; } /* +/− inline accanto a "Collezioni" (stessa altezza degli altri) */
  .has-sub__ind::before { content:"+"; color:var(--oro-scuro); font-weight:400; font-size:1.1em; line-height:1; }
  .has-sub.open .has-sub__ind::before { content:"\2013"; }   /* – */
  .submenu {
    position: static; transform:none; box-shadow:none; min-width:0; width:100%; text-align:center; background:transparent;
    list-style:none; margin:0; padding:0;
    max-height:0; overflow:hidden; opacity:0; visibility:hidden;
    transition: max-height .3s var(--ease), opacity .25s var(--ease), padding .3s var(--ease);
  }
  /* su mobile il sottomenu NON si apre/sposta su hover o focus (sticky-hover del touch) */
  .has-sub:hover .submenu, .has-sub:focus-within .submenu { transform:none; max-height:0; opacity:0; visibility:hidden; padding-top:0; }
  /* apertura SOLO via .open (dichiarata DOPO → vince a pari specificità) */
  .has-sub.open .submenu { transform:none; max-height: 12rem; opacity:1; visibility:visible; padding-top:.4rem; }
  .submenu li { text-align:center; }
  .submenu a { display:block; text-align:center; padding:.35rem 0; color: var(--oro-scuro); font-size:.95rem; }

  /* Prenota appuntamento: effetto tasto (outline oro) */
  .nav__menu-cta { display:block; margin-top: var(--s-3); }
  .nav__menu > li.nav__menu-cta > a {
    display:inline-block; border:1px solid var(--oro); padding:.7rem 1.8rem;
    color: var(--oro-scuro) !important; font-size:.92rem; letter-spacing:.12em;
    text-transform:uppercase; transition: background .25s var(--ease), color .25s var(--ease);
  }
  .nav__menu > li.nav__menu-cta > a:hover { background: var(--oro); color:#fff !important; }

  .nav__panel-social { display:flex; gap: var(--s-4); justify-content:center; padding-top: var(--s-2); }
  .nav__panel-social a { font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color: var(--oro-scuro); }

  body.menu-open { overflow: hidden; }
}

/* ============================================================================
   HERO
   ========================================================================== */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; color:#fff; text-align:center; overflow:hidden; }
.hero__media { position:absolute; inset:0; z-index:0; } /* will-change impostato via JS solo se il parallax è attivo */
.hero__media img, .hero__media video { width:100%; height:100%; object-fit: cover; }
.hero::after { content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.12) 40%, rgba(0,0,0,.45)); }
.hero__inner { position: relative; z-index:2; padding: var(--nav-h) var(--gutter) var(--s-6); max-width: 60rem; }
.hero h1 { font-size: clamp(2rem, 4.6vw, 2.6rem); color:#fff; font-weight:500; text-transform:uppercase; letter-spacing:.01em; line-height:1.22; }
.hero p { margin-top: var(--s-3); font-size: 1.05rem; color: rgba(255,255,255,.92); max-width: 46ch; margin-inline:auto; }
.hero__cta { margin-top: var(--s-4); display:flex; gap: var(--s-2); justify-content:center; flex-wrap:wrap; }

/* a capo solo su mobile (es. slogan Prenota) */
.br-mobile { display:none; }
/* a capo solo su DESKTOP (su mobile il testo va a capo da solo) */
.br-desk { display:inline; }

/* Tweak mobile (telefono): tasti hero a LARGHEZZA UGUALE (stack) + logo un filo più piccolo */
@media (max-width: 600px) {
  .hero__cta { flex-direction: column; align-items: center; }
  .hero__cta .btn { width: 100%; max-width: 20rem; text-align: center; padding-inline: 1.5rem; } /* uguali ma più corti */
  .nav__logo img { height: 19px; }   /* logo un pochino più piccolo */
  .br-mobile { display: inline; }     /* attiva l'a capo dello slogan */
  .br-desk { display: none; }         /* disattiva gli a capo desktop → wrap naturale su mobile */
  #recensioni .reviews-title { font-size: clamp(1.4rem, 6.5vw, 2rem); white-space: nowrap; } /* mobile: UNA riga, dimensione equilibrata (ID per vincere sulla regola base) */
}

/* ============================================================================
   Sezioni / griglie
   ========================================================================== */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items:stretch; }
.split__body { align-self: center; } /* testo centrato verticalmente rispetto alla foto */
.split--reverse .split__media { order: 2; }
@media (max-width: 860px){ .split { grid-template-columns: 1fr; } .split--reverse .split__media{ order:0; } .media-frame { aspect-ratio: 4/5; min-height: 0 !important; } }
/* La foto riempie l'altezza del testo (niente più foto che "torreggia" sul testo breve) */
.media-frame { height: 100%; min-height: 420px; max-height: 620px; background: var(--grigio); overflow:hidden; }
.media-frame img { width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease); }
.media-frame:hover img { transform: scale(1.04); }            /* zoom morbido all'hover (desktop) */
.media-frame img[data-lightbox] { cursor: zoom-in; }

/* Parola in script calligrafico sovrapposta a cavallo della foto (device dell'originale) */
.media-wrap { position: relative; }
.script-overlay { position:absolute; z-index:3; font-family:var(--script); font-weight:400; color:var(--oro);
  line-height:.8; font-size:clamp(2.8rem, 6.5vw, 5.5rem); top:-.30em; left:-.10em; pointer-events:none;
  text-shadow: 0 2px 18px rgba(255,255,255,.5); }
.script-overlay--right { left:auto; right:-.10em; }
@media (max-width:860px){ .script-overlay { font-size: clamp(2.6rem, 13vw, 3.6rem); } }

.section-head { max-width: 56ch; }
.section-head.center { margin-inline:auto; }
.section-head h1, .section-head h2 { margin-bottom: var(--s-3); }

/* Griglia modelli Couture (grande) */
.models { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--s-2); margin-top: var(--s-5); }
.models .model { aspect-ratio: 3/4; overflow:hidden; background:var(--grigio); }
.models .model img { width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.models .model:hover img { transform: scale(1.04); }
@media (max-width: 760px){ .models { grid-template-columns: repeat(2,1fr); } }
.models--square .model { aspect-ratio: 1/1; }   /* foto prodotto (scarpe/accessori) meglio quadrate */
.loadmore { text-align: center; }

/* ===== PORTFOLIO Real Bride / Shooting (masonry + filtro) ===== */
.rb-filter { display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin: var(--s-4) auto var(--s-5); }
.rb-filter button { font-family:var(--sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; padding:.55rem 1.15rem; border:1px solid rgba(133,113,77,.42); background:transparent; color:var(--testo); cursor:pointer; transition: all .25s var(--ease); }
.rb-filter button:hover { border-color:var(--oro); color:var(--oro-scuro); }
.rb-filter button.is-active { background:var(--oro-scuro); border-color:var(--oro-scuro); color:#fff; }
.rb-grid { column-count:4; column-gap:var(--s-2); }
@media(max-width:1000px){ .rb-grid { column-count:3; } }
@media(max-width:640px){ .rb-grid { column-count:2; } }
.rb-tile { break-inside:avoid; margin-bottom:var(--s-2); position:relative; display:block; overflow:hidden; background:var(--grigio); }
.rb-tile img { width:100%; display:block; transition:transform .7s var(--ease); }
.rb-tile:hover img { transform:scale(1.06); }
.rb-tile__cap { position:absolute; inset:0; display:flex; align-items:flex-end; padding:.9rem 1rem; background:linear-gradient(transparent 55%, rgba(20,18,15,.62)); }
.rb-tile__t { color:#fff; font-family:var(--serif); font-size:1.02rem; line-height:1.2; text-shadow:0 1px 8px rgba(0,0,0,.35); }
.rb-tile__badge { position:absolute; top:.7rem; left:.7rem; font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; background:rgba(255,255,255,.92); color:var(--oro-scuro); padding:.28rem .55rem; }
.rb-tile__badge--shooting { background:rgba(28,26,23,.82); color:#fff; }
.rb-tile[hidden]{ display:none; }
/* Galleria del singolo project */
.pj-gallery { column-count:3; column-gap:var(--s-2); margin-top:var(--s-4); }
@media(max-width:900px){ .pj-gallery { column-count:2; } }
@media(max-width:520px){ .pj-gallery { column-count:1; } }
.pj-gallery img { width:100%; display:block; margin-bottom:var(--s-2); break-inside:avoid; cursor:zoom-in; }
/* Crediti */
.credits { margin-top:var(--s-5); padding-top:var(--s-4); border-top:1px solid rgba(133,113,77,.28); }
.credits__t { font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--oro-scuro); margin-bottom:.5rem; }
.credits__list { font-size:.9rem; color:var(--testo-soft); line-height:1.9; }
.credits__list span { display:inline-block; margin-right:1rem; white-space:nowrap; }

/* ===== DICONO DI NOI (muro recensioni) ===== */
.reviews-head .stars { color:var(--oro); letter-spacing:.18em; font-size:1.15rem; display:block; margin:.6rem 0 .3rem; }
.reviews-head .verified { font-size:.78rem; letter-spacing:.08em; color:var(--testo-soft); }
.reviews-masonry { column-count:2; column-gap:var(--s-3); margin-top:var(--s-5); }
@media(max-width:640px){ .reviews-masonry { column-count:1; } }
.review-card, .review-photo { break-inside:avoid; margin-bottom:var(--s-3); }
.review-card { background:#fff; border:1px solid rgba(34,34,34,.1); padding:clamp(1.3rem,3vw,1.9rem); }
.review-card__stars { color:var(--oro); letter-spacing:.1em; font-size:.82rem; margin-bottom:.7rem; }
.review-card p { color:var(--testo); line-height:1.65; margin:0; }
.review-card cite { display:block; margin-top:1rem; font-style:normal; font-weight:600; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--oro-scuro); }
.review-card cite::before { content:"— "; }
.review-photo { overflow:hidden; }
.review-photo img { width:100%; display:block; }

/* Testo editoriale sotto la gallery negli hub collezioni (leggibile, non muro) */
.hub-body { max-width: 68ch; margin-inline: auto; }
.hub-body p { color: var(--testo-soft); line-height: 1.75; margin-bottom: var(--s-2); }
.hub-body p:last-child { margin-bottom: 0; }

/* ⚠️ RIMOSSI (Fase 0, 14/07): .juliet-price · .tulle-grid · .tulle-aside.
   Erano residui arrivati insieme al tema dell'hub e NESSUN satellite li usava
   (verificato). Uno era una trappola vera: `.tulle-grid` avrebbe applicato regole
   dell'hub — griglia a 3 colonne, max 560px — a un ipotetico blocco omonimo del sito
   TULLE che sta per nascere, e nessuno avrebbe capito da dove arrivavano.
   Il tema base contiene solo ciò che serve a TUTTI: quello di un sito solo sta
   in {sito}/theme-site.css. */

/* Percorso (4 step) */
.steps { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--s-3); margin-top: var(--s-5); counter-reset: step; }
.step { padding-top: var(--s-3); border-top: 2px solid var(--oro); }
.step::before { counter-increment: step; content: "0" counter(step); font-family:var(--serif); font-size:1.5rem; color:var(--oro); display:block; margin-bottom:var(--s-1); }
.step h3 { font-size:1.1rem; margin-bottom:.25rem; }
.step p { font-size: var(--fs-small); color: var(--testo-soft); }
@media (max-width: 760px){ .steps { grid-template-columns: repeat(2,1fr); } }
.steps--3 { grid-template-columns: repeat(3,1fr); }   /* percorso a 3 fasi (es. su misura) */
@media (max-width: 760px){ .steps--3 { grid-template-columns: 1fr; } }

/* Cards Scarpe/Accessori */
.cards { display:grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-4); }
.card { position:relative; aspect-ratio: 16/10; overflow:hidden; display:grid; place-items:center; color:#fff; text-align:center; }
.card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition: transform .6s var(--ease); }
.card:hover img { transform: scale(1.04); }
.card::after { content:""; position:absolute; inset:0; background: rgba(0,0,0,.32); z-index:1; }
.card > div { position:relative; z-index:2; }
.card h3 { color:#fff; font-size: clamp(1.55rem, 2.6vw, 2.1rem); }
.card .btn { margin-top: var(--s-3); }
/* card con etichetta-CTA lunga ("Scopri la collezione di…", cliente 03/08):
   corpo ridotto + aria ai lati — il testo non deve mai toccare i bordi (Marco). */
.cards--cta .card > div { padding-inline: clamp(1.2rem, 5vw, 2.5rem); }
.cards--cta .card h3 { font-size: clamp(1.1rem, 1.7vw, 1.45rem); letter-spacing: .04em; line-height: 1.35; }
@media (max-width: 680px){ .cards { grid-template-columns: 1fr; } }

/* Recensioni — slogan in SCRIPT + 3 card orizzontali con ombra leggerissima.
   Fondo bianco, niente cornice. Spigoli vivi (radius 0). Stacca dalle FAQ
   su 3 assi: tipografia (script), layout (orizzontale) e profondità (ombra). */

/* Sezione più vicina al blocco sovrastante (top ridotto) */
#recensioni { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

/* Slogan in script (Parisienne) — registro diverso dai titoli maiuscoli */
.reviews-head { text-align: center; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.reviews-title {
  font-family: var(--script); font-weight: 400;
  text-transform: none; letter-spacing: 0;
  font-size: clamp(2.2rem, 5vw, 2.5rem); line-height: 1.08;
  color: var(--oro);
}

/* 3 card in riga (orizzontale); su mobile diventano 1 colonna */
.reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: 0;
  align-items: stretch;
}

/* Card: bianca, spigoli vivi, ombra leggerissima (niente cornice) */
.review {
  margin: 0;
  text-align: left;
  background: #fff;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  box-shadow: 0 12px 28px -12px rgba(28,26,23,.18);   /* leggera, accentata sotto */
  display: flex; flex-direction: column; gap: var(--s-3);
}

/* Citazione in Playfair tondo (leggibile) */
.review blockquote {
  margin: 0;
  font-family: var(--serif); font-style: normal; font-weight: 400;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6;
  color: var(--testo);
}

/* Autore in fondo alla card (allineato anche con citazioni di lunghezza diversa) */
.review figcaption { margin-top: auto; }
.review .who {
  font-family: var(--sans); font-style: normal;
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--oro-scuro);
}
.review .who::before { content: "\2014\00a0"; color: var(--oro); }  /* em dash + spazio insecabile */

/* Mobile: card impilate */
@media (max-width: 820px) {
  .reviews { grid-template-columns: 1fr; gap: var(--s-3); }
}

/* Dove trovarci */
.sedi { display:grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-4); }
.sede h3 { font-size:1.25rem; } .sede p { color:var(--testo-soft); } .sede a { color:var(--oro); border-bottom:1px solid currentColor; }
@media (max-width: 680px){ .sedi { grid-template-columns: 1fr; } }

/* CTA finale */
.cta-final { text-align:center; padding-block: clamp(5.5rem, 15vw, 8.5rem); } /* più alto: stacca dal resto */
.cta-final h2 { color:#fff; } .cta-final p { color: rgba(255,255,255,.8); margin: var(--s-2) auto var(--s-4); max-width:44ch; }

/* Page-hero editoriale (Atelier + future pagine): immagine a tutta larghezza + overlay + testo centrato */
.page-hero { position: relative; min-height: clamp(58vh, 70vh, 78vh); display: grid; place-items: center;
  text-align: center; color: #fff; padding: clamp(4rem, 10vh, 7rem) clamp(1rem, 5vw, 2rem); overflow: hidden; }
.page-hero > img, .page-hero > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(24,22,19,.42), rgba(24,22,19,.6)); }
.page-hero__inner { position: relative; z-index: 2; max-width: 900px; }
.page-hero h1 { color: #fff; font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.16; }
.page-hero__sub { color: rgba(255,255,255,.92); font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.6; margin: var(--s-3) auto 0; max-width: 760px; }
.page-hero .hero__scroll { z-index: 2; }

/* Carousel orizzontale (es. showroom atelier) — scroll/swipe, fail-safe senza JS */
.carousel { display: flex; gap: clamp(.75rem, 2vw, 1.25rem); overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
.carousel::-webkit-scrollbar { display: none; }   /* niente barra durante lo scroll */
.carousel__item { flex: 0 0 auto; width: clamp(210px, 26vw, 290px); aspect-ratio: 3/4; overflow: hidden;
  background: var(--grigio); scroll-snap-align: start; }
.carousel__item img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform .6s var(--ease); }
.carousel__item:hover img { transform: scale(1.04); }
.carousel-wrap { position: relative; }
.carousel__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: #fff; color: var(--testo); font-size: 1.6rem; line-height: 1; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.18); transition: opacity .2s var(--ease), background .2s var(--ease); }
.carousel__nav:hover { background: var(--greige); }
.carousel__prev { left: .4rem; } .carousel__next { right: .4rem; }
.carousel__nav[disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 700px){ .carousel__nav { display: none; } }   /* su mobile: swipe */

/* Split "bilanciato": la foto segue l'altezza del testo (non torreggia) — usato sulle pagine editoriali */
.split--balanced .media-frame { position: relative; height: 100%; min-height: clamp(460px, 50vh, 580px); max-height: none; }  /* foto affiancata un po' più alta del testo (~100px+) */
.split--balanced .media-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
@media (max-width: 860px){ .split--balanced .media-frame { aspect-ratio: 3/4; height: auto; min-height: 0; } }

/* "Dove trovarci" — PROVA fascia foto SCURA + titolo bianco + box bianchi */
.find-band .eyebrow { color: var(--oro-chiaro); }
.find-band h2 { color: #fff; }
.find-cards { display: flex; gap: clamp(1rem, 3vw, 2rem); justify-content: center; flex-wrap: wrap; margin: clamp(1.6rem,4vw,2.5rem) auto clamp(1rem,2vw,1.4rem); }
.find-card { background: #fff; padding: clamp(1.5rem, 3vw, 2.25rem); flex: 1 1 300px; max-width: 380px; box-shadow: 0 16px 40px rgba(0,0,0,.28); text-align: center; }
.find-card h3 { font-family: var(--serif); font-size: 1.3rem; margin-bottom: .55rem; }
.find-card p { color: var(--testo-soft); line-height: 1.5; margin: 0 0 .35rem; }
.find-card__hours { font-size: .9rem; color: var(--oro-scuro); font-weight: 600; margin: 0 0 .35rem; }
.find-card__note { font-size: .86rem; line-height: 1.5; margin-bottom: 1.1rem; }  /* dettaglio leggero, non invadente */
.find-phones { color: rgba(255,255,255,.9); }
.find-phones a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.6); }
@media (max-width: 600px){ .find-band { padding-top: clamp(3.75rem, 12vw, 5.5rem); } }   /* più spazio in alto (riempito dalla foto, non bianco) */

/* Parallax leggero: le fasce widescreen con foto di sfondo restano "fisse" allo scroll → dinamicità.
   Solo desktop (iOS non gestisce bene fixed) e disattivata con prefers-reduced-motion. */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  .find-band, .cta-final, .prenota { background-attachment: fixed; }
}

/* ══ BREADCRUMB — siti a più pagine (Fase 0, 14/07) ═══════════════════════════════
   Discreto: è un'indicazione, non un elemento di design. Sta sotto la navbar, prima
   dell'H1. La voce corrente NON è un link (non si linka a sé stessa) e porta
   aria-current="page": è ciò che dice "sei qui" a chi naviga con lo screen reader.
   Su una landing non compare mai: il componente esce subito se $crumbs è vuoto. */
/* ══ BREADCRUMB — un sussurro, non un elemento d'arredo (Marco 16/07) ═══════════════
   Il fondino pieno provato prima era sbagliato: una fascia a tutta larghezza sotto la
   navbar legge come una SECONDA barra di navigazione, e questo è un elemento che deve
   solo dire "sei qui" e dare la strada del ritorno. Niente fondo, niente filetto: testo
   piccolo e tenue, appoggiato al contenuto che descrive.
   ⚠️ NIENTE ORO a riposo, per due motivi che vanno insieme: (1) il breadcrumb sta
      esattamente SOPRA l'occhiello, che è già oro maiuscolo → due righe dorate impilate
      e l'occhiello smette di annunciare la sezione; (2) la regola del progetto è "oro
      solo negli occhielli, con parsimonia" — un accento usato ovunque non è più un
      accento. L'oro torna sull'HOVER: dice "sono cliccabile" nel momento in cui te lo
      chiedi, e a riposo tace.
   padding-block sotto = 0: lo spazio verso il titolo lo dà .page-intro/.art, uno solo dei
   due deve decidere quella distanza (altrimenti si sommano e non si capisce chi comanda).
   ⚠️ COLORE MISURATO, non scelto a occhio. Il "tenue" che avevo messo (opacità .6) faceva
      3.10:1 contro i 4.5:1 che il testo piccolo richiede: a 11px non si leggeva. E il colore
      è SOLIDO, non un rgba: l'alpha cambia rapporto col fondo sotto, e questa barra un
      domani può capitare su una banda beige. #6b6863 tiene su entrambi (5.55 su bianco,
      4.92 sul beige). La discrezione la fanno il CORPO e il silenzio dell'oro, non lo
      sbiadire il testo finché non si legge più. */
.crumbs { padding-block: var(--s-2) 0; font-size: .72rem; color: #6b6863; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.crumbs li + li::before { content: "›"; margin-right: .5rem; color: rgba(34,34,34,.22); }
/* I link ereditano il colore tenue: a riposo la riga è UNA cosa sola, non tre link e una
   scritta. L'oro (e la sottolineatura) arrivano solo quando ci passi sopra. */
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--oro-scuro); text-decoration: underline; text-underline-offset: 3px; }
/* ── LA PAGINA CORRENTE: si TRONCA, ma solo a schermo (Marco 16/07) ─────────────────
   Il titolo di un articolo può essere lunghissimo e mandava il breadcrumb a tre righe:
   una riga di servizio che pesa come un paragrafo, e per giunta ripete parola per parola
   l'H1 che sta due centimetri sotto. Basta un cenno.
   🔴 IL TAGLIO È SOLO VISIVO — text-overflow, non substr() in PHP. Nell'HTML il titolo
      resta INTERO, ed è quello che conta: è il `name` dentro lo schema BreadcrumbList che
      Google usa per costruire "tullesposatorino.it › Guida › Sposa alternativa…" nei
      risultati, ed è quello che legge uno screen reader. Tagliarlo nei dati per una ragione
      di impaginazione significherebbe consegnare a Google un titolo mozzato.
   Un filo più scura delle altre voci: è l'unica che non è un link, e basta pochissimo per
   distinguerla — se la scurisco troppo diventa lei il titolo della pagina. */
.crumbs [aria-current="page"] {
  color: #56534e;
  display: inline-block; vertical-align: bottom;   /* serve per far agire max-width */
  max-width: 38ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 760px) { .crumbs [aria-current="page"] { max-width: 16ch; } }

/* La voce di menu della pagina in cui ci si trova. Sottolineatura oro: il colore da solo
   non basterebbe (WCAG 1.4.1), e comunque la classe la mette il router, non il markup. */
.nav__menu .is-current > a { color: var(--oro); box-shadow: inset 0 -1px 0 currentColor; }

/* CTA banner scuro compatto (pagine brand/collezione) — orizzontale, basso, contrastato */
.cta-banner { background: var(--scuro); color:#e9e4dc; padding-block: clamp(1.9rem, 3.6vw, 2.6rem); }
.cta-banner__inner { display:flex; align-items:center; justify-content:space-between; gap: clamp(1.4rem, 4vw, 3rem); flex-wrap:wrap; }
.cta-banner .eyebrow { color: var(--oro-chiaro); margin-bottom:.5rem; }
.cta-banner h2 { color:#fff; margin:0; font-size: clamp(1.35rem, 2.5vw, 1.85rem); }
.cta-banner__actions { flex-shrink:0; }
.cta-banner .link-arrow--light { color: rgba(255,255,255,.78); }
.cta-banner .link-arrow--light:hover { color:#fff; }
@media (max-width: 720px){
  .cta-banner__inner { flex-direction:column; align-items:center; text-align:center; }
  .cta-banner .eyebrow::after { margin-inline:auto; }
  .cta-banner__actions { justify-content:center; width:100%; }
  .cta-banner__name { display:block; } /* nome collezione a capo su mobile */
}

/* PRENOTA — fascia fotografica con 2 scelte macro (abito / scarpe) */
.prenota { color:#fff; }
.prenota .eyebrow { color: var(--oro-chiaro); }
.prenota h2 { color:#fff; text-shadow: 0 1px 16px rgba(0,0,0,.45); }
.prenota .lead { color: rgba(255,255,255,.9); text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.prenota .eyebrow { text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.prenota-choices { display:flex; gap: var(--s-3); justify-content:center; flex-wrap:wrap; margin: var(--s-5) auto var(--s-3); }
.choice { display:block; min-width:300px; padding:1.8rem 2rem; text-align:center;
  border:1px solid rgba(255,255,255,.28); background: rgba(22,20,17,.46); backdrop-filter: blur(3px);
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
.choice:hover { background: rgba(22,20,17,.68); border-color:#fff; transform: translateY(-3px); }
.choice__t { display:block; font-family:var(--serif); font-size:1.5rem; color:#fff; }
.choice__sub { display:block; margin-top:.35rem; font-size:.76rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color: #d8c6a0; }
.choice .go { display:inline-block; margin-top:1rem; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:#fff; }
.choice .go::after { content:" →"; transition: transform .25s var(--ease); display:inline-block; }
.choice:hover .go::after { transform: translateX(4px); }
.prenota-phones { font-size:.9rem; color: rgba(255,255,255,.78); margin-top: var(--s-3); }
.prenota-phones a { color:#fff; border-bottom:1px solid rgba(255,255,255,.4); }
@media (max-width:560px){ .choice { min-width:0; width:100%; } }

/* FAQ accordion (riusabile). Senza JS le risposte restano visibili (.faq--ready la aggiunge il JS) */
.faq { max-width: 820px; margin: var(--s-5) auto 0; }
.faq__item { border-bottom: 1px solid rgba(34,34,34,.14); }
.faq__q { width:100%; display:flex; justify-content:space-between; align-items:center; gap:1.5rem;
  background:none; border:0; padding:1.25rem 0; cursor:pointer; text-align:left;
  font-family: var(--serif); font-size: 1.1rem; color: var(--testo); transition: color .2s; }
.faq__q:hover { color: var(--oro-scuro); }
.faq__ico { position:relative; flex:0 0 16px; width:16px; height:16px; }
.faq__ico::before, .faq__ico::after { content:""; position:absolute; top:50%; left:0; width:16px; height:2px; margin-top:-1px; background: var(--oro); transition: transform .3s var(--ease); }
.faq__ico::after { transform: rotate(90deg); }
.faq__item.open .faq__ico::after { transform: rotate(0); }
.faq__a { overflow:hidden; transition: max-height .35s var(--ease); }
.faq__a p { padding-bottom: 1.25rem; color: var(--testo-soft); max-width: 72ch; }
.faq--ready .faq__a { max-height: 0; }

/* ============================================================================
   FOOTER
   ========================================================================== */
.footer { background: #fff; color: var(--testo); padding-block: var(--s-6) var(--s-4); font-size:.9rem; border-top: 1px solid rgba(34,34,34,.12); }
/* 3 zone: identità | ATELIER | SPAZIO ESPOSITIVO  (rev. 17/07)
   Prima erano 2 — e le due sedi stavano IMPILATE nella stessa colonna: una torre di dieci
   righe accanto a un francobollo (logo da 18px, una frase, i social). Sbilanciato 3 a 1.
   Le avevo impilate per non farle sembrare due atelier; poi ognuna ha preso un NOME e un
   RUOLO, e la difesa è passata alle PAROLE. A quel punto la colonna era un prezzo pagato
   per niente. La gerarchia che chiede il cliente («prima Idea Sposa Couture», brief §12)
   qui è l'ORDINE DI LETTURA: atelier a sinistra.
   Le colonne NON sono uguali: quella dell'atelier è la più larga — ha più cose e vale di più. */
/* ⚠️ auto-fit e NON "1fr 1.15fr 1.05fr": le colonne sono 3 su Tulle e Scarpe (identità +
   atelier + spazio) ma 2 su JULIET, che lo Spazio Tulle non lo nomina proprio
   (SITE_MOSTRA_SPAZIO). Con le colonne contate a mano, su Juliet ne restava una VUOTA a
   destra e il footer sembrava monco — e nessuno se ne accorge finché non lo guarda.
   Così la griglia conta da sola quante gliene arrivano. */
.footer__grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: clamp(1.6rem,3.5vw,3.2rem); align-items:start; }
.footer__logo { height: 18px; width:auto; }   /* logo PICCOLO */
.footer__tag { max-width: 32ch; color: var(--testo-soft); margin-top: var(--s-2); }
/* la riga-firma «Parte dell'esperienza…» sta SUBITO sotto il marchio e il resto STACCATO (cliente 03/08) */
.footer__tag--firma { margin-top: var(--s-2); }
.footer__tag--firma + .footer__tag { margin-top: var(--s-3); }
.footer__social { display:flex; flex-direction:column; gap:.5rem; margin-top: var(--s-3); }
.footer__social a { display:inline-flex; align-items:center; gap:.5rem; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--oro-scuro); }
.footer__soc-i { width:16px; height:16px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.footer h3 { color: var(--oro-scuro); font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; margin-bottom: var(--s-2); }
.footer nav.footer__col a { display:block; padding:.2rem 0; color: var(--testo); }
.footer p { color: var(--testo-soft); margin-bottom:.4rem; line-height:1.6; }
.footer__contacts strong { color: var(--testo); font-weight:600; }
.footer__note { font-size:.8rem; color: var(--testo-soft); }
.footer__place { margin-bottom: var(--s-3); }
.footer__place p { margin-bottom:.15rem; line-height:1.55; }

/* ── IL NOME DELLA SEDE — in SERIF (Marco 17/07) ─────────────────────────────────
   🔴 Prima era `.footer__place-name { color: var(--testo) }` — cioè "evidenziato" con
      esattamente il colore che `.footer` dà già a tutto: **non faceva niente**. Il nome
      pesava come l'indirizzo, l'indirizzo come il telefono, e il footer era un muro di
      dieci righe tutte uguali («sembrano tutte uguali» — ed era vero).
   Il serif è il segnale giusto: su tutto il sito è la voce dei TITOLI, il bastone quella
   dei DATI. Un nome di luogo in serif si stacca senza aggiungere colore — e senza
   competere con l'oro dell'occhiello che gli sta sopra, che è l'altro livello.
   Tre livelli, non uno: occhiello oro (la sezione) → nome serif (il luogo) → dati sans.

   ⚠️ `p.footer__place-name` e NON `.footer__place-name`: qui sopra c'è
   `.footer__place p { margin-bottom:.15rem; line-height:1.55 }`, che vale (0,1,1) — una
   classe PIÙ un elemento. La sola classe vale (0,1,0) e **perde**, per specificità, non
   per ordine: il font passava ma margine e interlinea del nome venivano spenti in
   silenzio. Con `p.` la regola vale (0,2,1) e vince sempre, ovunque finisca nel theme.css
   generato dal sync. (Stesso motivo di `p.footer__role` qui sotto: sbagliato due volte
   nello stesso file, nello stesso giorno.) */
.footer__place p.footer__place-name {
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.3;
  color: var(--testo);
  margin-bottom: .2rem;
}

/* ── LA RIGA CHE DICE A COSA SERVE LA SEDE ────────────────────────────────────────
   È la frase che impedisce a una sposa di presentarsi a Piazza Vittorio per provare
   l'abito. Quindi: più piccola del resto, ma **leggibile** — non un dettaglio da saltare.
   `p.footer__role` = specificità (0,2,1): batte `.footer__place p` (0,2,0) sempre, senza
   dipendere dall'ordine nel theme.css generato dal sync.
   Un filo d'aria sotto: la stacca dai telefoni, che sono un'altra cosa. */
.footer__place p.footer__role {
  color: var(--testo-soft);
  font-size: .84rem;
  margin: .25rem 0 0;
  max-width: 46ch;
}

/* ── L'ARIA VA FRA I GRUPPI, NON FRA LE RIGHE ────────────────────────────────────
   È l'altra metà del "sembrano tutte uguali": con .15rem uguale ovunque, dieci righe
   diventano un blocco unico e l'occhio non trova nessuna struttura. Ma non servono dieci
   spazi — ne serve UNO, nel punto in cui cambia l'argomento:
     nome + indirizzo + ruolo  = «chi sono e dove»
     telefoni + orari + mappa + email = «come mi raggiungi»
   Sono due cose diverse e devono sembrare due cose diverse. Lo spazio è informazione. */
.footer__lines { margin-top: var(--s-2); }

/* (Qui c'era `.footer__place--secondaria`, il filetto che separava le due sedi impilate.
   Rimossa il 17/07 col passaggio a due colonne: la classe non esiste più nel markup e una
   regola CSS senza il suo HTML è peso morto che il prossimo che legge crede attivo.) */
.footer__hours-line { font-size:.85rem; color: var(--testo-soft); margin-top:.1rem; }
.footer__hours-line span { color: var(--oro-scuro); font-weight:600; }
.footer a { color: var(--testo); transition: color .2s; } .footer a:hover { color: var(--oro-scuro); }

/* Righe di contatto con icona moderna (indirizzo/telefono/email) — Marco 20/07.
   Flex allineato in cima: se il testo va a capo resta incolonnato sotto sé stesso, non
   sotto l'icona. L'icona è oro (stesso oro degli occhielli del footer). */
.footer__ci { display: flex; align-items: flex-start; gap: .5rem; }
.footer__ci > span, .footer__ci > a { min-width: 0; }   /* il testo può andare a capo nel flex */
.footer__ico {
  flex: 0 0 auto;
  width: 15px; height: 15px;
  margin-top: .28em;                 /* allineamento ottico: icona centrata sulla 1ª riga (Marco 20/07) */
  color: var(--oro-scuro);
}
/* Il link ecosistema DENTRO la frase in prosa (footer__tag: «Parte dell'esperienza Idea
   Sposa Couture») dev'essere riconoscibile come link — color:var(--testo) lo rendeva
   identico al testo intorno (stessa lezione di link-nel-testo-devono-vedersi). Oro scuro +
   sottolineatura. NON tocca i link "standalone" del footer (contatti, Privacy, Agenzia
   Comunica), che sono già isolati e riconoscibili per posizione. Audit 20/07. */
.footer__tag a { color: var(--oro-scuro); text-decoration: underline; text-underline-offset: 3px; }
.footer__bottom { margin-top: var(--s-5); padding-top: var(--s-3); border-top:1px solid rgba(34,34,34,.12); display:flex; justify-content:space-between; gap:var(--s-2); flex-wrap:wrap; font-size:.78rem; color:var(--testo-soft); }
/* Sotto i 900px le tre colonne non ci stanno: l'identità passa a tutta larghezza e le DUE
   SEDI restano affiancate — è il confronto che serve, e sono la parte utile del footer.
   Sotto i 560 si impilano, e l'ordine (atelier → spazio) è già quello giusto nel markup:
   la gerarchia del cliente regge anche da telefono senza una riga di CSS in più. */
@media (max-width: 900px){
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px){ .footer__grid { grid-template-columns: 1fr; } }

/* ============================================================================
   Micro-interazioni (fade-in allo scroll)
   ========================================================================== */
/* Nascondi SOLO quando main.js attiva le animazioni (html.anim-on aggiunta dal JS).
   Senza JS, JS in errore o reduced-motion → la classe non c'è → contenuto SEMPRE visibile. */
html.anim-on [data-animate] { opacity:0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.anim-on [data-animate].in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ============================================================================
   UX: scroll cue hero · stagger · floating (WhatsApp + torna su) · lightbox
   ========================================================================== */

/* 2) Indicatore "scorri" nell'hero (linea che "cola" verso il basso) */
.hero__scroll { position:absolute; left:50%; bottom: clamp(1rem,3.5vh,2.2rem); transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; }
.hero__scroll i { display:block; width:1px; height:38px; background: rgba(255,255,255,.45); position:relative; overflow:hidden; }
.hero__scroll i::after { content:""; position:absolute; inset:0; background:#fff; transform:translateY(-100%); animation: heroCue 2s var(--ease) infinite; }
@keyframes heroCue { 0%{ transform:translateY(-100%) } 55%{ transform:translateY(100%) } 100%{ transform:translateY(100%) } }

/* 8) Stagger: i figli di un gruppo entrano in sequenza (.in lo aggiunge main.js) */
html.anim-on [data-stagger] > * { transition: opacity .6s var(--ease), transform .6s var(--ease); }
html.anim-on [data-stagger]:not(.in) > * { opacity:0; transform: translateY(16px); }
[data-stagger].in > * { opacity:1; transform:none; }
[data-stagger].in > *:nth-child(2){ transition-delay:.08s }
[data-stagger].in > *:nth-child(3){ transition-delay:.16s }
[data-stagger].in > *:nth-child(4){ transition-delay:.24s }
[data-stagger].in > *:nth-child(5){ transition-delay:.32s }
[data-stagger].in > *:nth-child(6){ transition-delay:.40s }

/* 4)+5) Pulsanti flottanti: WhatsApp (sempre) + Torna su (allo scroll) */
.floaters { position: fixed; right: clamp(.9rem,2.5vw,1.4rem); bottom: clamp(.9rem,2.5vw,1.4rem); z-index:90;
  display:flex; flex-direction:column; gap:.6rem; align-items:center; }
.fab { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; cursor:pointer; border:0;
  box-shadow:0 10px 26px rgba(28,26,23,.22); transition: transform .25s var(--ease), background .25s var(--ease), opacity .25s, visibility .25s; }
.fab svg { width:25px; height:25px; display:block; }
.fab--wa { background: var(--oro-scuro); color:#fff; }   /* oro-scuro: contrasto AA dell'icona bianca */
.fab--wa:hover { background: var(--oro-scuro); transform: translateY(-2px); }
.fab--top { background:#fff; color:var(--testo); border:1px solid rgba(34,34,34,.15); opacity:0; visibility:hidden; transform:translateY(10px); }
.fab--top.show { opacity:1; visibility:visible; transform:none; }
.fab--top:hover { background: var(--greige); }

/* 9) Lightbox immagini (riusabile: img[data-lightbox]) */
body.lb-open { overflow:hidden; }
/* lightbox come GALLERIA (quick-view): COLONNA verticale → nome(sopra) · foto · tasto, niente accavallamenti */
.lightbox { position:fixed; inset:0; z-index:200; background: rgba(20,18,15,.92);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: clamp(.7rem,2vh,1.2rem);
  padding: clamp(3.2rem,7vh,4.5rem) clamp(1rem,4vw,3rem) clamp(1.2rem,4vh,2rem);
  opacity:0; visibility:hidden; transition: opacity .3s var(--ease); }
.lightbox.open { opacity:1; visibility:visible; }
.lightbox__close { position:absolute; top: clamp(.6rem,3vw,1.4rem); right: clamp(.6rem,3vw,1.4rem);
  width:46px; height:46px; border:0; background:none; color:#fff; font-size:2rem; line-height:1; cursor:pointer; z-index:2; }
.lightbox__cap { color:rgba(255,255,255,.9); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; text-align:center; margin:0; flex-shrink:0; }
.lightbox__stage { display:flex; align-items:center; justify-content:center; width:100%; max-width:min(92vw,720px); flex:1 1 auto; min-height:0; }
.lightbox__stage img { max-width:100%; max-height:100%; object-fit:contain; box-shadow:0 24px 70px rgba(0,0,0,.5); }
.lightbox__nav { position:absolute; top:50%; transform:translateY(-50%); background:none; border:0; color:#fff;
  font-size:2.6rem; line-height:1; cursor:pointer; padding:.4rem .8rem; opacity:.75; transition:opacity .2s; }
.lightbox__nav:hover { opacity:1; }
.lightbox__prev { left: clamp(.2rem,2vw,1.5rem); }
.lightbox__next { right: clamp(.2rem,2vw,1.5rem); }
.lightbox__nav[hidden] { display:none; }
.lightbox__cta { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; flex-shrink:0; }
.lightbox__cta .btn { display:inline-flex; align-items:center; white-space:nowrap; } /* icona + testo su una riga */

@media (prefers-reduced-motion: reduce) {
  .hero__scroll i::after { animation:none; }
  .hero__media { transform:none !important; }   /* niente parallax */
  .media-frame img, .models .model img, .card img { transition:none; }
  .media-frame:hover img, .models .model:hover img, .card:hover img { transform:none; } /* niente zoom */
}
/* hero scroll cue: nascondi se poco spazio verticale (es. telefono in landscape) */
@media (max-height: 560px) { .hero__scroll { display:none; } }

/* ============================================================================
   PAGINE INTERNE — page-head · breadcrumb · catalogo · paginazione · prodotto · 404
   ========================================================================== */
.page-head { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.page-head h1 { font-size: clamp(2rem, 4.5vw, 3rem); text-transform: uppercase; letter-spacing:.04em; }
.page-head .lead { max-width: 62ch; }

.breadcrumb { font-size:.78rem; letter-spacing:.03em; color: var(--testo-soft); margin-bottom: var(--s-3); }
.breadcrumb a { color: var(--oro-scuro); }
.breadcrumb a:hover { color: var(--oro); }
.breadcrumb span { margin-inline:.4rem; opacity:.55; }

/* Catalogo (griglia prodotti) */
.catalog { display:grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.2vw, 1.75rem); }
.catalog__item { display:block; color: var(--testo); }
/* aspect 2:3 = ratio nativo della maggioranza (800×1200): le 2:3 entrano perfette,
   le 3:4 si rifilano solo ai lati (modella centrata) → mai testa/orlo tagliati */
.catalog__media { display:block; aspect-ratio: 2/3; overflow:hidden; background: var(--grigio); }
.catalog__media img { width:100%; height:100%; object-fit:cover; }
/* fronte/retro: la 2ª foto compare all'hover (desktop) */
.catalog__img { position:absolute; inset:0; transition: opacity .5s var(--ease); }
.catalog__img--back { opacity:0; }
.catalog__item:hover .catalog__img--back { opacity:1; }
.catalog__title { display:block; margin-top: var(--s-2); font-family: var(--serif); font-size: 1.05rem; line-height:1.3; }
@media (max-width: 900px){ .catalog { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 620px){ .catalog { grid-template-columns: repeat(2,1fr); gap: var(--s-2); } }

/* Paginazione (legacy) + Carica altri */
.pager { display:flex; align-items:center; justify-content:space-between; gap: var(--s-3); margin-top: var(--s-6); }
.pager__info { font-size:.85rem; color: var(--testo-soft); letter-spacing:.05em; }
.loadmore { text-align:center; margin-top: var(--s-5); }

/* Scheda prodotto */
.product-grid { display:grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items:start; }
.product-gallery .media-frame { min-height:0; max-height:none; height:auto; }
.product-gallery__main { aspect-ratio: 2/3; }
.product-gallery__grid { display:grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-top: var(--s-2); }
.product-gallery__grid .media-frame { aspect-ratio: 2/3; }
.product-info { position: sticky; top: calc(var(--nav-h) + var(--s-3)); }
.product-info h1 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-top: var(--s-1); }
.product-price { font-family: var(--serif); color: var(--oro-scuro); font-size: 1.15rem; margin: var(--s-2) 0 0; }
.product-cta { display:flex; gap: var(--s-2); flex-wrap:wrap; margin: var(--s-4) 0; }
.product-tags { font-size:.85rem; color: var(--testo-soft); display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; margin-top: var(--s-3); }
.product-tags a { color: var(--oro-scuro); border-bottom:1px solid currentColor; }
.product-note { font-size:.82rem; color: var(--testo-soft); margin-top: var(--s-4); }
.product-note a { color: var(--oro-scuro); }
@media (max-width: 860px){
  .product-grid { grid-template-columns: 1fr; }
  .product-info { position: static; }
}

/* 404 */
.error-page { min-height: 60vh; display:grid; place-items:center; }

/* Pagina BRAND/COLLEZIONE — banda intestazione (fondino, 2 colonne) + galleria */
.brand-head { padding-block: clamp(1.75rem, 4vw, 3rem); }   /* banda più bassa */
.brand-head .breadcrumb { margin-bottom: var(--s-3); }
.brand-head__grid { display:grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(1.75rem,5vw,4rem); align-items:start; }
/* Titolo su 3 righe — uniforme: tutto maiuscolo, stessa dimensione, colore oro */
.brand-title { margin:0; line-height:1.14; }
.brand-title__pre, .brand-title__name, .brand-title__post { display:block;
  font-family:var(--serif); font-weight:500; text-transform:uppercase; letter-spacing:.04em;
  color: var(--oro); font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
/* testo SEO: corpo compatto (più piccolo, meno interlinea) */
.brand-head__text p { color: var(--testo-soft); font-size: .95rem; line-height: 1.6; margin-bottom: var(--s-2); text-wrap: pretty; }
.brand-head__text p:last-child { margin-bottom:0; }
@media (max-width: 820px){ .brand-head__grid { grid-template-columns: 1fr; gap: var(--s-3); align-items:start; } }
/* riga conteggio (incipit) in sans-serif — piccola, scura, "125 abiti" in bold */
.catalog-count { font-family: var(--sans); font-weight:400; color: var(--testo); margin-bottom: clamp(1.5rem,4vw,2.5rem);
  font-size: clamp(.9rem, 1.4vw, 1.05rem); }
.catalog-count strong { color: var(--testo); font-weight:700; }
/* sottotitolo in banda (sopra l'intro) */
.brand-head__text .brand-head__sub { font-family: var(--serif); color: var(--oro-scuro); font-weight: 600; font-size: 1.1rem; line-height: 1.3; margin-bottom: var(--s-3); text-wrap: balance; }
/* contenuti SEO sotto la gallery — 2 colonne: foto cover (sx, si adatta all'altezza del testo) + testi compatti (dx) */
.brand-content .split { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); align-items: stretch; gap: clamp(1.5rem,4vw,3.5rem); }
.brand-content .media-frame { position: relative; height: 100%; min-height: 0; max-height: none; }  /* niente vincoli "home" → il riquadro segue l'altezza dei testi */
.brand-content .media-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }  /* riempie il riquadro = altezza del blocco testo (non impone la propria altezza); nel crop tiene il volto */
.brand-content .brand-block + .brand-block { margin-top: var(--s-4); }
.brand-content .brand-block h2 { font-size: clamp(1.05rem,1.8vw,1.35rem); letter-spacing:.04em; margin-bottom: var(--s-1); }
.brand-content .brand-block p { color: var(--testo-soft); line-height: 1.6; margin: 0; }
.brand-content .brand-block ul { list-style: none; margin: .35em 0 0; padding: 0; }
.brand-content .brand-block li { position: relative; padding-left: 1.4em; margin-bottom: .3em; color: var(--testo-soft); line-height: 1.5; }
.brand-content .brand-block li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 1px; background: var(--oro); }
.brand-content .brand-block .is-placeholder { opacity: .55; }  /* "testo in arrivo" — segnaposto evidente */
@media (max-width: 860px){
  .brand-content .split { grid-template-columns: 1fr; }
  .brand-content .media-frame { aspect-ratio: 3/4; }   /* su mobile la foto torna a un riquadro proprio */
}

/* HUB collezioni — intestazione 2 colonne (riusa .brand-head) + griglia blocchi (cover + nome + riga SEO) */
.hub-head .brand-head__title h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.15; text-transform: uppercase; letter-spacing: .04em; }
.hub-head__tagline { font-family: var(--serif); font-style: italic; color: var(--testo); margin-top: var(--s-2); }
.hub-head h1 .h1-byline { display:block; text-transform:none; }
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); }
/* hub con pochi blocchi (es. Tulle = solo Sole): centra invece di lasciare vuoto a destra */
.hub-grid--few { display: flex; flex-wrap: wrap; justify-content: center; }
.hub-grid--few .hub-card { width: min(340px, 100%); }
.hub-card { display: block; color: var(--testo); }
.hub-card__media { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--grigio); }
/* blocco "Prossimamente" (brand in arrivo, non cliccabile) */
.hub-card--soon { cursor: default; }
.hub-card--soon .hub-card__media img { filter: grayscale(.18); opacity: .92; }
.hub-card--soon .hub-card__name { color: var(--testo); }
.hub-card__badge { position: absolute; top: .6rem; left: .6rem; background: #fff; color: var(--testo);
  font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; padding: .3rem .6rem; }
.hub-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .7s var(--ease); }
.hub-card:hover .hub-card__media img { transform: scale(1.05); }
.hub-card__name { font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.4rem); margin-top: var(--s-2); transition: color .25s var(--ease); }
.hub-card:hover .hub-card__name { color: var(--oro); }
.hub-card__seo { color: var(--testo-soft); font-size: .9rem; line-height: 1.5; margin-top: .35rem; }
.hub-mini-band { padding-block: clamp(1.8rem, 3.5vw, 2.75rem); }  /* box compatto, meno alto */
.hub-mini { max-width: 820px; margin-inline: auto; text-align: center; }
.hub-mini p { font-family: var(--serif); font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.55; color: var(--testo); margin: 0; }
@media (max-width: 900px){ .hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .hub-grid { grid-template-columns: 1fr; } }
/* badge "New" sulle card catalogo */
.catalog__media { position: relative; }
.catalog__badge { position:absolute; top:.6rem; right:.6rem; z-index:2; background:#fff; color:var(--testo);
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; padding:.28rem .55rem; }

/* ===================== PRENOTA — chooser + form ===================== */
/* chooser: 4 percorsi — card orizzontali (testo a sx dominante, foto verticale a dx) */
.pren-choices { display:grid; grid-template-columns:repeat(2,1fr); gap: clamp(1.5rem,3.2vw,2.6rem); margin-top: clamp(1.6rem,3.5vw,2.75rem); }
.pren-card { display:flex; flex-direction:row; min-height: clamp(228px, 24vw, 266px); background:#fff; color:var(--testo); overflow:hidden;
  border:1px solid rgba(34,34,34,.10); transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease); }
.pren-card:hover { transform: translateY(-4px); border-color: rgba(133,113,77,.5); box-shadow: 0 20px 44px -26px rgba(0,0,0,.45); }
/* testo = colonna principale (~60%), centrata verticalmente */
.pren-card__body { display:flex; flex-direction:column; justify-content:center; gap:.55rem; flex:1 1 60%; padding: clamp(1.5rem,3vw,2.1rem); }
.pren-card__tag { font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--oro); }
.pren-card__t { font-family:var(--serif); font-size: clamp(1.25rem,2.3vw,1.55rem); line-height:1.15; }
.pren-card__sub { color:var(--testo-soft); font-size:.95rem; line-height:1.55; }
.pren-card__go { font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--oro-scuro); margin-top:.5rem; }
/* foto = colonna verticale a dx, piena altezza → i ritratti non vengono tagliati */
.pren-card__media { flex:0 0 40%; overflow:hidden; background:var(--grigio); }
.pren-card__media img { width:100%; height:100%; object-fit:cover; object-position:center top; transition: transform .8s var(--ease); }
.pren-card:hover .pren-card__media img { transform: scale(1.05); }
.pren-phones { margin-top: clamp(2.2rem,4.5vw,3.25rem); color:var(--testo-soft); font-size:.95rem; line-height:1.85; }
.pren-phones span { display:block; }
.pren-phones a { color:var(--oro-scuro); text-decoration:none; font-weight:600; }
.pren-phones a:hover { text-decoration:underline; }
/* tablet: una colonna, card orizzontale a tutta larghezza (più respiro per la foto verticale) */
@media (max-width:900px){ .pren-choices { grid-template-columns:1fr; } }
/* mobile: card impilata, foto sopra (a tutta larghezza, alta per il ritratto) */
@media (max-width:560px){
  .pren-card { flex-direction:column; min-height:0; }
  .pren-card__body { order:2; }
  .pren-card__media { order:1; flex:none; height: clamp(230px,64vw,320px); }
}

/* form */
.container--form { max-width: 780px; }
.pren-form { margin-top: var(--s-2); }
.pren-form__grid { display:grid; grid-template-columns:1fr 1fr; gap: clamp(1rem,2.4vw,1.5rem); }
@media (max-width:640px){ .pren-form__grid { grid-template-columns:1fr; } }
.field { margin-bottom: clamp(1.1rem,2.4vw,1.6rem); border:0; padding:0; min-width:0; }
.field > label:not(.opt), .field legend { display:block; font-family:var(--sans); font-size:.82rem; font-weight:700;
  letter-spacing:.02em; color:var(--testo); margin-bottom:.5rem; }
.field legend small { display:inline; font-weight:400; text-transform:none; letter-spacing:0; color:var(--testo-soft); }
.req { color:var(--oro); }
.field input[type=text], .field input[type=email], .field input[type=tel], .field textarea {
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--testo); background:#fff;
  border:1px solid rgba(34,34,34,.22); border-radius:0; padding:.75rem .85rem; transition:border-color .2s var(--ease); }
.field input:focus, .field textarea:focus { outline:none; border-color:var(--oro); box-shadow:0 0 0 2px rgba(133,113,77,.14); }
.field textarea { resize:vertical; min-height:110px; }
.opts { display:flex; flex-direction:column; gap:.55rem; }
.opts--grid { display:grid; grid-template-columns:1fr 1fr; gap:.55rem .9rem; }
@media (max-width:640px){ .opts--grid { grid-template-columns:1fr; } }
.opt { display:flex; align-items:flex-start; gap:.55rem; font-family:var(--sans); font-size:.95rem; line-height:1.45; color:var(--testo-soft); cursor:pointer; }
.opt input { margin-top:.18rem; accent-color: var(--oro); flex:none; }
.opt span { flex:1; }
.field--privacy { margin-top:.4rem; }
.opt--privacy { font-size:.9rem; }
.opt--privacy a { color:var(--oro-scuro); }
.field--err input, .field--err textarea, .field--err .opts { border-color:#b3403a; }
.field__err { display:block; margin-top:.4rem; color:#b3403a; font-size:.82rem; }
.form-alert { border:1px solid #b3403a; background:#fbeeed; color:#8f2f2a; padding:.9rem 1.1rem; margin-bottom: var(--s-3); font-size:.92rem; }
.pren-form__note { color:var(--testo-soft); font-size:.85rem; }
.actions.center { justify-content:center; }
/* honeypot: fuori dallo schermo, invisibile ai bot-friendly ma non ai bot */
.hp { position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* thank-you */
.thankyou h1 { margin-bottom: var(--s-3); }
.thankyou .actions { margin-top: var(--s-4); }

/* form a 2 colonne: aside (collezione in evidenza + sede + orari) · modulo */
.pren-layout { display:grid; grid-template-columns: 288px 1fr; gap: clamp(2rem,5vw,4.5rem); align-items:start; margin-top: var(--s-3); }
.pren-aside { background: var(--grigio); padding: clamp(1.5rem,2.6vw,2rem); position: sticky; top: calc(var(--nav-h) + 1rem); }
.pren-aside .eyebrow { margin-bottom: var(--s-2); }
.pren-collezione { display:flex; flex-direction:column; gap:.3rem; padding-bottom: var(--s-3); margin-bottom: var(--s-3); border-bottom:1px solid rgba(133,113,77,.35); }
.pren-collezione__label { font-family:var(--sans); font-size:.66rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--oro-scuro); }
.pren-collezione__name { font-family:var(--serif); font-size: clamp(1.5rem,3vw,1.9rem); line-height:1.12; color:var(--testo); }
.pren-aside__sub { color:var(--testo-soft); font-size:.92rem; line-height:1.55; margin-bottom: var(--s-3); }
.pren-info { display:flex; flex-direction:column; gap: var(--s-2); margin-bottom: var(--s-3); }
.pren-info__row dt { font-family:var(--sans); font-size:.64rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--oro-scuro); margin-bottom:.2rem; }
.pren-info__row dd { margin:0; font-size:.94rem; line-height:1.5; color:var(--testo); }
.pren-info__note { display:block; margin-top:.35rem; color:var(--testo-soft); font-size:.84rem; }
.pren-orari { list-style:none; margin:0; padding:0; }
.pren-orari li { padding:.22rem 0; }
.pren-orari__g { display:block; font-size:.78rem; color:var(--testo-soft); }
.pren-orari__o { display:block; color:var(--testo); }
.pren-orari__o.is-closed { color:var(--testo-soft); font-style:italic; }
.pren-info__row a { color:var(--oro-scuro); text-decoration:none; }
.pren-info__row a:hover { text-decoration:underline; }
.pren-main__title { font-size: clamp(1.8rem,4vw,2.6rem); margin-bottom: var(--s-3); }
.pren-main .lead { margin-bottom: var(--s-4); }
@media (max-width: 900px){
  .pren-layout { grid-template-columns:1fr; gap: var(--s-4); }
  .pren-aside { position: static; }
}

/* ============================================================================
   COMPONENTI DEI SATELLITI (aggiunti al DNA dell'hub)
   ========================================================================== */

/* HERO a 3 foto — il cliente chiede "hero 3 foto" su TUTTI e 3 i satelliti.
   Trittico editoriale: foto in alto, testo sotto (leggibile, niente testo su foto). */
.hero-tri { padding-top: var(--nav-h); }
.hero-tri__pics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.hero-tri__pic { margin: 0; overflow: hidden; aspect-ratio: 3 / 4; }
.hero-tri__pic img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.hero-tri__txt { padding-top: var(--s-6); padding-bottom: var(--s-5); max-width: 42rem; }
.hero-tri__txt h1 { margin: .4rem 0 var(--s-2); }
.hero-tri__txt .lead { margin-bottom: var(--s-4); }

/* Su mobile: 3 foto affiancate diventano illeggibili → la prima grande, le altre due sotto */
@media (max-width: 700px) {
  .hero-tri__pics { grid-template-columns: 1fr 1fr; }
  .hero-tri__pic:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 5; }
}

/* Blocco NAP (indirizzo/telefoni/mappa) — pulito, una info per riga */
.nap { list-style: none; padding: 0; margin: var(--s-3) 0; }
.nap li { padding: .35rem 0; border-bottom: 1px solid rgba(34,34,34,.08); }
.nap li:last-child { border-bottom: 0; }

/* Utility */
.mt { margin-top: var(--s-3); }
.container.narrow { max-width: 46rem; }

/* ── FATTI CHIAVE: le info base SUBITO, senza dover leggere (prezzo · dove · come) ── */
.facts {
  list-style: none; padding: 0;
  margin: var(--s-4) auto var(--s-4);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; max-width: 46rem;
  border-top: 1px solid rgba(34,34,34,.12);
  border-bottom: 1px solid rgba(34,34,34,.12);
}
.facts li {
  padding: var(--s-3) var(--s-2);
  text-align: center;
  border-right: 1px solid rgba(34,34,34,.10);
}
.facts li:last-child { border-right: 0; }
.facts strong {
  display: block; font-family: var(--serif); font-weight: 500;
  font-size: 1.05rem; color: var(--testo); letter-spacing: .01em;
}
.facts span {
  display: block; margin-top: .3rem;
  font-size: .82rem; color: var(--testo-soft); line-height: 1.5;
}
@media (max-width: 700px) {
  .facts { grid-template-columns: 1fr; }
  .facts li { border-right: 0; border-bottom: 1px solid rgba(34,34,34,.10); }
  .facts li:last-child { border-bottom: 0; }
}

/* ── SPLIT "intro": foto a sx + testo a dx, PROPORZIONATO (la foto non torreggia) ── */
.split--intro { align-items: center; gap: clamp(2rem, 5vw, 4rem); }
.split--intro .split__media { margin: 0; }
.split--intro .split__media img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: center top;
}
@media (max-width: 860px) { .split--intro { grid-template-columns: 1fr; } }

/* ── DUO: due colonne di TESTO (quando il copy è breve, riempie senza foto giganti) ── */
.duo {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: var(--s-5);
  max-width: 60rem; margin-inline: auto;
}
.duo__col h3 {
  font-size: 1.1rem; text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: var(--s-2);            /* stacco titolo → testo */
  padding-bottom: var(--s-1);
  border-bottom: 1px solid rgba(133,113,77,.28);   /* filetto oro leggero */
}
.duo__col p { margin-bottom: .9rem; }
.duo__col p:last-child { margin-bottom: 0; }
@media (max-width: 760px) { .duo { grid-template-columns: 1fr; } }

/* ── FIND-CARD: più aria, gerarchia chiara, link non schiacciato ── */
.find-card h3 { margin-bottom: var(--s-2); }
.find-card__addr  { margin-bottom: var(--s-2); line-height: 1.6; }
.find-card__hours { margin-bottom: var(--s-2); }
.find-card__note  { margin-bottom: var(--s-2); }
.find-card__tel   { margin-bottom: var(--s-3); }
.find-card .link-arrow { display: inline-block; margin-top: var(--s-1); white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════════
   HERO SPLIT — testo a sinistra, foto verticale a destra che ESCE dal bordo.
   (Le foto dell'atelier sono tutte verticali: un hero "a tutta larghezza" le
   taglierebbe. Questo schema le usa per come sono e dà comunque asimmetria.)
   ══════════════════════════════════════════════════════════════════════════ */
.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  min-height: min(88vh, 820px);
  padding-left: var(--gutter);
  max-width: calc(var(--maxw) + var(--gutter));
  margin-inline: auto;
}
.hero-split__txt { max-width: 32rem; padding-block: var(--s-6); }
.hero-split__txt h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.08;
  margin: var(--s-2) 0 var(--s-3);
}
.hero-split__txt .lead { margin-bottom: var(--s-4); }

/* la foto sfonda il bordo destro: è quello che dà il respiro cinematografico */
.hero-split__pic { margin: 0; height: 100%; min-height: min(88vh, 820px); position: relative; }
.hero-split__pic img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 20%;
}
@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; min-height: 0; padding-inline: var(--gutter); gap: var(--s-4); }
  .hero-split__txt { padding-block: var(--s-5) var(--s-3); max-width: none; }
  .hero-split__pic { min-height: 0; aspect-ratio: 4/5; }
  .hero-split__pic img { position: static; }
}

/* ── Le altre 2 foto, SFALSATE (non allineate: una scende) ──────────────── */
.duo-pics {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
}
.duo-pics figure { margin: 0; }
.duo-pics figure img { width: 100%; height: auto; display: block; aspect-ratio: 4/5; object-fit: cover; }
.duo-pics figure:last-child { margin-top: clamp(2rem, 6vw, 5rem); }   /* lo sfalsamento */
@media (max-width: 700px) {
  .duo-pics { grid-template-columns: 1fr; }
  .duo-pics figure:last-child { margin-top: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   STATEMENT — lo slogan GRANDE tra le sezioni.
   Poche parole, molto grandi, tantissima aria: la tipografia diventa contenuto.
   (È il device delle referenze: Fitzgerald, Royal Park.)
   ══════════════════════════════════════════════════════════════════════════ */
.statement {
  text-align: center;
  padding-block: clamp(4rem, 12vw, 9rem);
}
.statement__t {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 3.6rem);
  line-height: 1.16;
  letter-spacing: -.005em;
  color: var(--testo);
  max-width: 20ch;
  margin-inline: auto;
  text-wrap: balance;
}
/* la parola chiave in corsivo: il mix maiuscolo/corsivo delle referenze */
.statement__t em { font-style: italic; color: var(--oro); }
.statement__sub {
  margin-top: var(--s-3);
  font-size: .95rem;
  letter-spacing: .04em;
  color: var(--testo-soft);
  max-width: 44ch; margin-inline: auto;
}

/* Statement con NUMERO grande (il prezzo: è il fatto che conta) */
.statement__num {
  font-family: var(--serif);
  font-size: clamp(3rem, 9vw, 6.5rem);
  line-height: 1;
  color: var(--oro);
  display: block;
  margin-bottom: var(--s-2);
}

/* ══════════════════════════════════════════════════════════════════════════
   TITOLI GRANDI — l'impatto tipografico SENZA inventare una parola.
   Si prendono i titoli che il cliente ha già scritto e si rendono grandi.
   La parola chiave in <em> va in corsivo oro (device di Northline/Fitzgerald).
   ══════════════════════════════════════════════════════════════════════════ */
.h2--big {
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  line-height: 1.14;
  letter-spacing: -.005em;
  text-transform: none;          /* i titoli grandi NON vanno in maiuscolo: perdono grazia */
  text-wrap: balance;
}
.h2--big em { font-style: italic; color: var(--oro); font-weight: 400; }

/* ── ASSE DI LETTURA A SINISTRA ────────────────────────────────────────────
   Il centrato continuo è la causa MECCANICA del "sembra a blocchi": ogni
   sezione riparte da capo e non c'è una linea che guida l'occhio. */
.container.narrow-left {
  max-width: 46rem;
  margin-inline: 0;               /* niente auto: resta ancorato a sinistra */
  text-align: left;
}
.lead--big { font-size: 1.2rem; line-height: 1.7; }

/* Split invertito: TESTO a sinistra, foto a destra */

/* ── FAQ AFFIANCATA A UNA FOTO — rompe lo schema del centrato ─────────────
   L'accordion sta a sinistra, allineato a sinistra (si legge come un elenco,
   non come uno slogan); la foto a destra segue la sua altezza. */
.faq-wrap .faq   { margin: var(--s-4) 0 0; max-width: none; text-align: left; }
.faq-wrap .faq__q { justify-content: space-between; text-align: left; }
/* la foto non resta "a mezz'aria": si allunga quanto l'accordion */
.faq-wrap + .split__media     { align-self: stretch; }
.faq-wrap + .split__media img { height: 100%; aspect-ratio: auto;
                                min-height: clamp(420px, 46vh, 560px);
                                object-position: center 20%; }
@media (max-width: 860px) { .faq-wrap + .split__media img { min-height: 0; aspect-ratio: 4 / 5; } }
/* La domanda è un <h3> (serve alla gerarchia), ma NON deve sembrarlo: eredita tutto
   dal summary. Senza questo reset prenderebbe il serif dei titoli. */
.faq__h { font: inherit; color: inherit; letter-spacing: inherit; text-transform: none;
          margin: 0; display: inline; }
.faq__q { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .7rem; }
.faq__q::-webkit-details-marker { display: none; }   /* via il triangolino di default */

/* la freccia: chevron oro che ruota all'apertura */
.faq__q::after {
  content: "";
  flex: 0 0 auto;
  width: .48rem; height: .48rem;
  border-right: 2px solid var(--oro);
  border-bottom: 2px solid var(--oro);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .3s var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg) translateY(-2px); }
.faq-wrap .faq__a p { margin-inline: 0; max-width: 46ch; }

/* ── FOOTER: logo GRANDE, testi ridistribuiti ───────────────────────────── */
.footer__grid { align-items: start; }
.footer__logo { height: auto; width: auto; max-width: 150px; margin-bottom: var(--s-3); }   /* ridotto da 190 (Marco, 14/07) */
.footer__brand .footer__tag { max-width: 34ch; }
.statement .btn { margin-top: var(--s-4); }
.statement__sub { margin-top: var(--s-2); font-size: 1.05rem; }

/* ── Immagini ingrandibili: devono SEMBRARE cliccabili e reggere la tastiera ──
   Erano <img> nude: nessun cursore, nessun focus, e il gestore keydown del
   lightbox non poteva scattare perché un <img> non è focusabile. */
img[data-lightbox] { cursor: zoom-in; }
img[data-lightbox]:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }

/* ══ BARRA AZIONI MOBILE (.mbar) — portata dall'hub il 14/07 ═══════════════════════
   🔴 Su JULIET non era un miglioramento, era un BUG GRAVE: sotto i 1150px .nav__cta e'
      display:none, e una landing senza menu non stampa nemmeno l'hamburger → da telefono
      il tasto Prenota NON ESISTEVA. Su un sito che serve solo a portare appuntamenti.

   Discrezione: fondo bianco, filetto sopra, niente ombra, niente colore pieno.
   UN SOLO elemento oro: il Prenota. WhatsApp resta presente ma silenzioso.
   z-index 95: sotto la navbar (100) e il lightbox (200).
   env(safe-area-inset-bottom): senza, su iPhone il bottone finisce sotto la barra home. */
.mbar { display: none; }

@media (max-width: 1150px) {
  .mbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    height: calc(60px + env(safe-area-inset-bottom));
    padding: 0 var(--gutter) env(safe-area-inset-bottom);
    background: #fff;
    border-top: 1px solid rgba(34,34,34,.10);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  /* fade sul footer: la barra si toglie di mezzo invece di coprirlo (main.js) */
  .mbar.is-gone { opacity: 0; transform: translateY(100%); pointer-events: none; }

  .mbar__wa {
    display: inline-flex; align-items: center; gap: .5rem;
    color: var(--testo); font-family: var(--sans); font-size: .82rem; font-weight: 600;
    letter-spacing: .04em;
  }
  .mbar__wa svg { width: 22px; height: 22px; color: var(--oro-scuro); flex: none; }

  .mbar__cta {
    display: inline-flex; align-items: center; justify-content: center;
    height: 42px; padding: 0 1.4rem;
    background: var(--oro); color: #fff; border-radius: 0;
    font-family: var(--sans); font-size: .74rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  }
  .mbar__cta:hover { background: var(--oro-scuro); }

  /* la barra prende il posto dei FAB: niente doppioni */
  .floaters { display: none; }

  /* rete di sicurezza: se il JS non parte il fade non avviene → questo spazio impedisce
     comunque alla barra di coprire l'ultima riga del footer */
  .footer { padding-bottom: calc(var(--s-4) + 60px); }
}

@media (prefers-reduced-motion: reduce) { .mbar { transition: none; } }

/* ===== OVERRIDE DEL SITO (tulle) — le sole leve di personalità ===== */
/* ============================================================================
   TULLE SPOSA — theme-site (le SOLE leve di personalità sopra il DNA dell'hub)
   ----------------------------------------------------------------------------
   Identità decisa (PROGETTO-SATELLITI): landing "sposa alternativa".
     · bianco dominante (le sezioni restano bianche; il greige si usa con parsimonia)
     · UNA banda NERO CALDO come firma → la CTA finale (.bg-scuro, già = --scuro #1c1a17)
     · PARISIENNE OFF: niente corsivo decorativo (è la differenza da Juliet)
     · fotografia editoriale, non romantica
   Il resto = codice hub 1:1 (Lato, radius 0, oro #85714d solo accento, NAP).
   ============================================================================ */

/* ── PARISIENNE OFF ────────────────────────────────────────────────────────
   Se un componente ereditato usasse --script, cade sul serif invece del corsivo.
   Su Tulle lo script non si usa MAI (scelta d'identità). */
:root { --script: var(--serif); }
.accent-script { display: none; }

/* ══ LOGO PIÙ GRANDE (Marco, 16/07) ═══════════════════════════════════════════════
   Il nucleo dimensiona il logo per il marchio IDEA SPOSA, che è un wordmark largo e
   basso: 22px in barra bastano. Ma il logo Tulle è un LOCKUP IMPILATO (viewBox 121×54:
   "TULLE" sopra, "by Idea Sposa" sotto) → a 22px la riga inferiore è alta 5px, illeggibile.
   Stesso identico problema di Juliet, che infatti ha il suo override.
   Non è un capriccio di dimensione: è che il marchio ha un'altra forma. */
.nav__logo img { height: 44px; }
@media (max-width: 600px)  { .nav__logo img { height: 40px; } }
@media (max-width: 1150px) { .nav__panel-logo img { height: 60px; } }  /* menu aperto: è centrato, respira */

/* ══ VIDEO HERO PIÙ SCURO (Marco, 16/07) ══════════════════════════════════════════
   Il velo del nucleo è .28 → .12 → .45: il punto PIÙ CHIARO (.12) cade esattamente dove
   sta l'H1. Per questo il titolo si leggeva male. E su un video non possiamo affidarci
   alla fortuna del fotogramma: cambia in continuazione, il velo deve reggere sempre. */
.hero::after {
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.40) 40%, rgba(0,0,0,.60));
}

/* ══ HERO A VIDEO ═══════════════════════════════════════════════════════════
   .hero (full-screen, overlay scuro, testo bianco) arriva dal nucleo. Qui si aggiunge
   solo il posizionamento del video, che il nucleo non ha. Il video è DEFERITO
   (main.js lo avvia dopo il load): il poster protegge l'LCP, e senza JS resta il poster.
   z-index: video 0 · gradiente .hero::after 1 · testo .hero__inner 2. */
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Il logo entra nella composizione dell'hero (come Juliet): niente barra sopra. */
.hero__logo {
  display: block; margin: 0 auto var(--s-4);
  width: clamp(150px, 22vw, 220px); height: auto;
}
.hero h1 { max-width: 18ch; margin-inline: auto; }

/* ── occhiello dell'hero: bianco, non oro (sul video l'oro non tiene) ── */
.hero .eyebrow { color: rgba(255,255,255,.9); }
/* 🔴 IL FILETTO VA CENTRATO (Marco 16/07): stava tutto a sinistra mentre il testo era
   centrato. Causa: il nucleo centra il filetto solo dentro un contenitore `.center`
   (`.center .eyebrow::after { margin-inline: auto }`), ma `.hero__inner` NON ha quella
   classe — l'hero centra col `text-align`, che su un blocco ::after non fa nulla.
   Errore mio: avevo ereditato il colore e dimenticato il centraggio. */
.hero .eyebrow::after { background: rgba(255,255,255,.5); margin-inline: auto; }

/* ══ SEZIONE COLLEZIONI — striscia di 3-4 foto d'ispirazione (NO nomi, NO catalogo).
   Il bottone rimanda all'hub: il catalogo vero sta lì (decisione Marco 16/07). ══ */
.pic-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.5rem, 1.4vw, 1rem);
  margin-top: var(--s-4);
}
.pic-strip figure { margin: 0; aspect-ratio: 3/4; overflow: hidden; background: var(--grigio); }
.pic-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.pic-strip a:hover img, .pic-strip figure:hover img { transform: scale(1.04); }
@media (max-width: 760px) { .pic-strip { grid-template-columns: repeat(2, 1fr); }  }

/* ══ SEZIONE GUIDA — CAROSELLO di articoli (il motore SEO di Tulle) ═══════════════════
   Impianto disegnato da Marco (16/07). Il problema che risolve: impilate su mobile, le card
   diventavano "foto grande + testo" = identiche a ogni altra sezione, e nulla diceva
   "questi sono articoli". Il carosello è l'unica struttura di questo tipo in pagina →
   si riconosce al primo sguardo. Su desktop le 3 card ci stanno e non scorre: degrada bene.

   · foto VERTICALE (3/4): le foto reali saranno più alte che larghe, tanto vale sfruttarlo
   · TITOLO SULLA FOTO, su un velo che sfuma verso l'alto → si legge su qualsiasi scatto
   · sotto, nel bianco: abstract + link, con i link ALLINEATI fra card (flex + margin-top:auto)
   · FILETTO, non ombra: il design system è radius 0 + filetti (come le recensioni dell'hub).
     E qui non è estetica — la sezione è su fondo BIANCO e le card sono BIANCHE: senza
     filetto sarebbero invisibili.

   ⚠️ Il velo è NERO CALDO, non oro. Due ragioni: (1) bianco su oro #85714d = 4,2:1, sotto
      il 4,5 che serve a un titolo di questa misura → si leggerebbe "quasi"; (2) l'oro è
      l'accento, e un gradiente su 3 foto ne userebbe tanto — Tulle è "editoriale, non
      romantico": il calore dell'oro è l'identità di Couture. L'oro resta sul "Leggi".
      Per passare all'oro scuro #76633b basta cambiare i tre rgba qui sotto. */
/* ⚠️ CENTRATO, MA RESTA UN CAROSELLO (Marco 16/07: "lo vedo decentrato").
   Il carosello è flex + overflow-x:auto → le card partono da SINISTRA: 3×330 = 990px in un
   contenitore da ~1200 lasciavano 210px di vuoto a destra. Era decentrato davvero.
   ⛔ La cura ovvia — justify-content:center — è una TRAPPOLA: quando il contenuto deborda
      (cioè su mobile, dove il carosello serve) centrare rende la PRIMA card irraggiungibile
      allo scroll. Bug noto del flexbox.
   ⛔ E la griglia-su-desktop che avevo messo prima risolveva il centraggio ma TOGLIEVA il
      carosello proprio dove Marco l'aveva chiesto.
   ✅ La via giusta: `width: fit-content` fa stringere la pista sul contenuto → `margin-inline:
      auto` la CENTRA; `max-width: 100%` impedisce che sfondi → quando non ci sta, scorre
      normalmente dalla prima card. Carosello vero ovunque, centrato dove ci sta. */
.carousel--posts {
  align-items: stretch;
  margin-top: var(--s-4);
  padding-bottom: .35rem;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
.carousel--posts .post-card {
  flex: 0 0 auto;
  width: clamp(252px, 30vw, 330px);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid rgba(34,34,34,.12);   /* filetto leggero — niente ombre */
}
.post-card__media { position: relative; display: block; aspect-ratio: 3/4; overflow: hidden; background: var(--grigio); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.04); }
/* il velo: pieno in basso, trasparente a metà foto → il titolo si stacca sempre */
.post-card__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(28,26,23,.92) 0%, rgba(28,26,23,.70) 30%, rgba(28,26,23,0) 64%);
}
.post-card__title {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  margin: 0; padding: var(--s-3);
  font-family: var(--serif); font-weight: 500; font-size: 1.05rem; line-height: 1.32;
  color: #fff;
  /* 🔴 OBBLIGATORIO — il livello del titolo NON deve decidere l'aspetto (Marco 16/07).
     La stessa card è <h3> in home (il blog è una sotto-sezione) e <h2> sulla pagina
     indice (lì ogni articolo È una sezione di primo livello sotto l'H1): è la gerarchia
     corretta per Google. Ma il nucleo ha `h2 { text-transform: uppercase }`, quindi la
     STESSA card usciva maiuscola sull'indice e minuscola in home — per una scelta
     semantica, non estetica. Neutralizzando qui, il tag resta libero di essere giusto. */
  text-transform: none;
  letter-spacing: 0;
}
.post-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--s-3); }
.post-card__body p { color: var(--testo-soft); font-size: .92rem; line-height: 1.6; margin: 0 0 var(--s-3); }
.post-card .link-arrow { margin-top: auto; align-self: flex-start; }   /* ← i link si allineano fra card */

/* ══ I DUE "LEGGI" NON DEVONO SOMIGLIARSI (Marco 16/07) ═══════════════════════════
   Erano entrambi .link-arrow → stesso identico stile: MAIUSCOLO, tracking, oro. Tre
   "LEGGI L'ARTICOLO" in fila più un "LEGGI TUTTI GLI ARTICOLI" subito sotto = quattro
   scritte uguali che gridano insieme, e non si capisce quale sia l'azione importante.

   La gerarchia vera è: dentro la card il link è un DETTAGLIO (si ripete 3 volte, e comunque
   tutta la card è cliccabile); "Leggi tutti gli articoli" è l'AZIONE DI SEZIONE, quella che
   porta al blog — il motore SEO di Tulle.
   Quindi: le card scendono in minuscolo e si fanno discrete; il link di sezione resta
   maiuscolo e vince. Si differenziano per CASSA, che è il segnale più leggibile. */
.post-card .link-arrow {
  text-transform: none;
  letter-spacing: 0;
  font-size: .88rem;
  font-weight: 600;
}

/* ══ ESPERIENZA = STATEMENT (Marco 16/07) ═══════════════════════════════════════════
   Il problema: Esperienza e Guida aprivano con lo SCHEMA IDENTICO (occhiello + H2 centrato
   + lead centrato) → due sezioni di fila lette come gemelle. È la testa strutturata a
   renderle uguali, non il contenuto.
   Qui la testa si toglie: la frase del cliente diventa GRANDE, in serif, con molta aria.
   Un respiro fra le sezioni-prodotto e la coda informativa — e non somiglia a nient'altro
   in pagina, che era lo scopo.

   🔑 SEO (domanda giusta di Marco): il tag resta <h2>, cambia SOLO la resa — stesso device
      di .h2--testo su Juliet. La gerarchia H1→H2→H3 non si tocca. E quell'H2 non conteneva
      comunque nessuna keyword ("Un percorso tra stile e identità"): il suo valore era
      strutturale, e lo conserviamo tutto.

   ⛔ Perché NON la banda fotografica scurita in parallax che avevi ipotizzato: sarebbe la
      SECONDA banda scura a poca distanza dalla CTA finale — ma "una sola banda scura" è la
      firma di Tulle, ciò che rende la CTA l'evento della pagina. Due, e nessuna è più
      speciale. E qui è un testo-ponte breve: gli daremmo il peso massimo per una frase di
      passaggio.

   ♻️ Il pattern .statement/.statement__t/.statement__sub ESISTE GIÀ NEL NUCLEO (viene
      dall'hub, lo usa anche Juliet): serif grande, 20ch, centrato, text-wrap:balance.
      Qui si RIUSA e si sovrascrive SOLO il delta — non si riscrive da zero.

   ⚠️ NB (16/07): proprio qui c'era una CHIUSURA DI COMMENTO ORFANA. Riscrivendo il blocco
      ne è rimasta una di troppo: le righe successive finivano NUDE dentro il CSS, il parser
      inciampava e SI MANGIAVA LE REGOLE DOPO — gli spazi dei bottoni e lo sfondo della CTA.
      Non era un bug di Firefox: era rotto per tutti i browser.
      (E la prima correzione ha ricreato il bug, perché nel commento avevo scritto per esteso
       la sequenza di chiusura: dentro un commento NON si nomina mai quella sequenza.)
      Ora il preflight controlla che aperture e chiusure siano pari. */

/* ⭐ LA LEVA: il nucleo rende TUTTI gli h2 MAIUSCOLI con letter-spacing, e .statement__t
   non tocca il text-transform → applicato a un <h2> uscirebbe maiuscolo come tutti gli
   altri, cioè NON si distinguerebbe (che era tutto il punto). Togliere il maiuscolo è la
   sola cosa che serve. (Juliet fa l'opposto: lì lo statement è maiuscolo apposta.) */
.statement__t { text-transform: none; letter-spacing: 0; }
/* il sub del nucleo è pensato per un sottotitolo BREVE (.95rem, 44ch, tracking .04em).
   Qui è un paragrafo di tre frasi: gli serve più larghezza e più interlinea. */
.statement__sub { font-size: 1.02rem; line-height: 1.7; letter-spacing: 0; max-width: 56ch; }

/* ══ 🔴 SPAZIO FRA TESTO E BOTTONI — errore ricorrente (Marco, 3 volte) ══════════════
   Il tasto attaccato all'ultima riga di testo. Sbagliato sull'hub, rifatto qui, e il
   16/07 RIFATTO ANCORA sull'articolo — perché la vecchia regola andava per ADIACENZA
   (`p + .actions`) e lì il tasto segue un <div> (.hub-body), non un <p>: nessun match,
   margine zero. Una regola che si spegne da sola quando cambi un tag non è una regola.
   Ora il default è "staccato" e sono i casi speciali a dover alzare la voce.
   `.hero__cta` ha il suo margine dal nucleo e non è .actions → non lo tocca. */
.actions {
  margin-top: var(--s-4);   /* 32px: il minimo dopo del testo */
  row-gap: var(--s-2);      /* due tasti sulla stessa riga: aria anche quando vanno a capo */
}

/* Dopo un BLOCCO VISIVO (foto, card, carosello) servono 48px: 32 dopo una fila di foto
   alta 600px si leggono come "attaccato" — è il difetto che Marco ha visto sul tasto
   "Scopri la collezione". Lo spazio non è assoluto: va rapportato a ciò che lo precede.
   Specificità (0,2,0) → vince su .actions da sola, senza dipendere dall'ordine. */
.pic-strip + .actions,
.carousel + .actions,
.mosaic + .actions,
.cards + .actions { margin-top: var(--s-5); }

/* ══ CTA FINALE CON FOTO — come hub e Juliet: velo scuro + testo tutto bianco.
   Il parallax (background-attachment: fixed) arriva dal nucleo, solo su desktop e solo
   se l'utente non ha chiesto "meno animazioni". Sulla foto l'oro non tiene: tutto bianco. */
.cta-final--foto { background-size: cover; background-position: center; background-repeat: no-repeat; }
.cta-final--foto .eyebrow,
.cta-final--foto h2,
.cta-final--foto .lead,
.cta-final--foto .lead strong { color: #fff; }
.cta-final--foto .eyebrow { opacity: .85; }
.cta-final--foto .eyebrow::after { background: rgba(255,255,255,.5); }

/* ══ FAQ — DOMANDA e RISPOSTA più distinte (Marco 16/07) ═══════════════════════════
   Il problema: erano distinte solo TIPOGRAFICAMENTE (serif scuro vs sans tenue). A colpo
   d'occhio pesavano uguale e l'elenco sembrava piatto — non si capiva al volo dove finisce
   la domanda e dove comincia la risposta.
   Tre mosse piccole, nessun fondo colorato, nessun riquadro: solo gerarchia.
     1. la DOMANDA prende colore pieno e un filo di corpo → domina la sua risposta
     2. la RISPOSTA rientra e porta un filetto oro verticale → dice "sono il seguito di sopra"
     3. più aria fra una coppia e l'altra → ogni domanda+risposta è un blocco chiuso
   Il filetto oro è già il linguaggio del sito (filetti + oro come accento, radius 0). */
.faq__h { color: var(--testo); font-size: 1.06rem; }
.faq__a p {
  padding-left: var(--s-3);
  border-left: 2px solid var(--oro);
  color: var(--testo-soft);
}
.faq__item { padding-block: .4rem; }

/* ══ MOSAICO MASONRY — la galleria Real Bride (Marco 16/07) ══════════════════════
   `column-count` = masonry vero, senza una riga di JS e senza librerie: il browser
   impila le foto nella colonna più corta. Ogni scatto tiene le SUE proporzioni
   (height:auto) → nessun taglio, che è tutto il punto: le foto di matrimonio arrivano
   verticali, quadrate e orizzontali, e una griglia rigida le mutila tutte allo stesso modo.
   Compromesso noto: l'ordine di lettura scende per colonne invece di andare per righe.
   Su una galleria di scatti indipendenti non significa niente — su un elenco sì, e lì
   il masonry non si usa. */
.mosaic { column-count: 4; column-gap: clamp(.5rem, 1vw, .9rem); }
.mosaic figure { break-inside: avoid; margin: 0 0 clamp(.5rem, 1vw, .9rem); overflow: hidden; background: var(--grigio); }
.mosaic img { width: 100%; height: auto; transition: transform .7s var(--ease); cursor: zoom-in; }
.mosaic figure:hover img { transform: scale(1.04); }
@media (max-width: 1100px) { .mosaic { column-count: 3; } }
@media (max-width: 560px)  { .mosaic { column-count: 2; } }

/* ══ ARTICOLO — la pagina di un post della Guida ═════════════════════════════════
   Marco (16/07): «mi piace la pulizia della pagina ma va curata un po' di più». Quindi
   NON si aggiunge roba: si lavora di tipografia. Tre gesti, zero parole nuove — perché
   i testi sono del cliente e non si inventano. */
/* Stesso ragionamento di .page-intro: il breadcrumb parla di QUESTO articolo, quindi gli
   sta vicino. Lo spazio grosso resta solo sotto. */
.section.art { padding-block: clamp(.9rem, 1.8vw, 1.4rem) clamp(2.8rem, 5vw, 4.5rem); }
.art__t { margin: var(--s-2) 0 var(--s-2); max-width: 24ch; }

/* Data + tempo di lettura, sotto il titolo. Non è decorazione: dice alla sposa quanto le
   costa continuare, ed è il motivo per cui continua. Grigio e non oro — l'oro qui
   competerebbe con l'occhiello, che è l'informazione più importante delle due.
   Il maiuscolo spaziato è caduto: con le icone accanto diventava un'etichetta da
   interfaccia. Minuscolo, corpo piccolo, e le due voci separate solo dall'aria. */
.art__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .4rem clamp(1rem, 2vw, 1.6rem);
  font-family: var(--sans); font-size: .84rem; color: var(--testo-soft);
  margin-bottom: var(--s-4);
}
.art__meta > span { display: inline-flex; align-items: center; gap: .42rem; }
/* flex: none → l'icona non si schiaccia se la riga va stretta.
   Il reset del nucleo mette `svg { display:block; height:auto }`: qui height:auto
   collasserebbe l'SVG (non ha dimensioni intrinseche), quindi le do io. */
.art__ico { width: 14px; height: 14px; flex: none; opacity: .7; }

/* 1. IL SOMMARIO — il primo paragrafo è più grande e in colore pieno. È il gesto che
      distingue un articolo da una pagina qualsiasi: dà un punto d'ingresso alla lettura
      invece di un muro uniforme. Non costa una parola: il paragrafo c'è già. */
.art__body > p:first-child {
  font-size: 1.2rem; line-height: 1.7; color: var(--testo);
  margin-bottom: var(--s-4);
}

.art__media { margin: 0 0 var(--s-4); aspect-ratio: 3/2; overflow: hidden; background: var(--grigio); }
.art__media img { width: 100%; height: 100%; object-fit: cover; }
/* Su MOBILE la foto si alza a 4/5 (Marco 16/07). Il soggetto è sempre un ABITO, cioè una
   cosa alta: a 3/2 su schermo stretto la sposa veniva tagliata in una fetta all'altezza
   del busto. Su desktop il 3/2 funziona perché la colonna è larga e l'inquadratura respira
   in orizzontale — quindi resta com'è. Non è un capriccio di formato: è che object-fit
   COVER taglia sempre, e il taglio va deciso in base a cosa c'è dentro la foto. */
@media (max-width: 760px) { .art__media { aspect-ratio: 4/5; } }
/* il corpo eredita .hub-body dal nucleo (68ch, interlinea 1.75): qui solo un filo più grande,
   perché è testo da LEGGERE, non da scorrere */
.art__body p { font-size: 1.05rem; margin-bottom: var(--s-3); }

/* 2. LA CHIUSURA — filetto + aria. Prima il tasto era incollato all'ultima riga di testo
      e sembrava un'altra frase; ora l'articolo ha una fine dichiarata e l'invito ci sta
      dentro. Classe esplicita nel markup, NON adiacenza: è la lezione di sopra. */
.actions.art__cta {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(34,34,34,.12);
}

/* ══ DOVE TROVARCI — le due sedi, affiancate ═════════════════════════════════════
   ⚠️ .cards del nucleo è per le card-FOTO (aspect-ratio 16/10, testo bianco sopra
      l'immagine). Qui servono due schede miste: si riusa solo la griglia.
   Rev. 16/07 — le due card devono leggersi come UNA COPPIA, perché raccontano due gesti
   diversi (qui GUARDI / là PROVI) e la sposa le confronta a colpo d'occhio:
     · ognuna apre con la SUA foto (Marco l'aveva chiesto: «dove trovarci mettiamo una
       foto dell'atelier relativo?») — un indirizzo senza volto non aiuta a scegliere;
     · stessa altezza (stretch) e link mappa allineati sul fondo (margin-top:auto), anche
       se l'atelier ha una riga d'indirizzo in più. Due card sfalsate sembrano un errore. */
/* gap: le due card sono due LUOGHI diversi, non due colonne dello stesso blocco. Con i
   24px del nucleo si toccavano quasi e sembravano una tabella (Marco 16/07). */
.cards--sedi { grid-template-columns: 1fr 1fr; align-items: stretch; gap: clamp(1.5rem, 3vw, 3rem); }
.cards--sedi .sede {
  position: static; aspect-ratio: auto; color: inherit; text-align: left;
  background: #fff; padding: 0; border: 1px solid rgba(34,34,34,.12);
  display: flex; flex-direction: column;
}
.sede__media { aspect-ratio: 16/10; overflow: hidden; background: var(--grigio); }
.sede__media img { width: 100%; height: 100%; object-fit: cover; }
.sede__body { display: flex; flex-direction: column; flex: 1; padding: clamp(1.4rem, 3vw, 2rem); }
.cards--sedi .sede h2 { font-size: clamp(1.15rem, 2vw, 1.4rem); color: var(--testo); margin: 0 0 var(--s-3); }
.sede__nota { color: var(--testo-soft); font-size: .95rem; line-height: 1.65; margin: var(--s-3) 0; }
.sede .nap { margin: 0; }
/* il link mappa scende in fondo alla card → le due frecce sono sulla stessa riga.
   border-bottom: 0 → il nucleo ha `.sede a { border-bottom: 1px solid currentColor }`,
   giusto per i link INLINE (i telefoni), ma il .link-arrow è un blocco: quel filetto
   diventava una riga che attraversava tutta la card sotto il tasto (Marco 16/07). */
.sede__body .link-arrow { margin-top: auto; padding-top: var(--s-3); border-bottom: 0; }
@media (max-width: 760px) { .cards--sedi { grid-template-columns: 1fr; } }

/* ══ 🔴 LINK NEL TESTO VISIBILI ═══════════════════════════════════════════════════
   Il reset `a { color:inherit; text-decoration:none }` — giusto per navbar, card e
   bottoni — rende i link dentro i paragrafi IDENTICI al testo intorno. Sull'hub, il
   14/07, sei sei link su sei erano invisibili («ma non capisco hai messo dei link o dei
   tasti??????»).
   🔴 E il 16/07 l'ho rifatto QUI, con la lezione scritta nel commento sopra la regola:
      elencavo `.lead` e `.split__body` e mi dimenticavo `.hub-body`, che è esattamente
      dove vive il corpo degli ARTICOLI — cioè le pagine che esistono per linkare. I tre
      link per articolo verso #collezioni e verso l'atelier dell'hub non si vedevano.
      Elencare i contenitori uno per uno è la stessa fragilità dell'adiacenza: si
      dimentica sempre l'ultimo arrivato. Qui l'elenco DEVE coprire ogni contenitore di
      prosa del sito — se ne nasce uno nuovo, va aggiunto qui (lo controlla preflight.sh).
   Colore: --oro-scuro #76633b, non --oro. Il testo piccolo vuole 4,5:1 e l'oro normale
   sul greige si ferma a 4,2. */
.lead a,
.split__body p a,
.hub-body p a,
.sede__nota a,
.art__body p a,
.faq__a p a {
  color: var(--oro-scuro);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.lead a:hover,
.split__body p a:hover,
.hub-body p a:hover,
.art__body p a:hover,
.faq__a p a:hover { color: var(--oro); }
/* Sui fondi scuri l'oro scuro sparisce: serve la variante chiara. */
.bg-scuro .lead a, .cta-final .lead a { color: var(--oro-chiaro); }


/* ═══════════════════════════════════════════════════════════════════════════════════
   MOBILE — SEMPRE IN FONDO AL FILE.  Non è pignoleria: a parità di specificità vince
   l'ULTIMA regola, e una media query NON vale un punto in più. `.art__t` dentro un
   @media e `.art__t` fuori pesano uguale (0,1,0): se la seconda sta più in basso,
   spegne la prima e su mobile non cambia niente — senza un errore, senza un sintomo.
   Era già successo: l'avevo scritta a metà file e stava PRIMA di `.art__t`. Funzionava
   solo perché quella regola non tocca il font-size — cioè per fortuna, non per progetto.
   Da qui in giù ci va solo mobile, e ci va per ultimo.
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* ── I TITOLI DELIMITANO LE SEZIONI (Marco 16/07) ─────────────────────────────────
   Su un telefono non esiste "il layout": le sezioni si impilano in una colonna sola e
   sparisce tutto ciò che su desktop dice "nuovo capitolo" — la banda che cambia colore,
   l'aria ai lati, le due colonne. Resta solo il titolo, e a 24px non ce la fa.
   È la stessa decisione presa su Juliet il 14/07, che qui non avevo applicato.
   ⚠️ SCOPERTA: i titoli non hanno MAI avuto una misura. `h1,h2,h3,h4` nel nucleo dà
      famiglia, peso e interlinea ma NON font-size → ogni h2 prendeva il default del
      browser (1.5em = 24px), identico su desktop e su telefono. Il token --fs-h2 del
      tema (clamp(2rem,3.6vw,3rem)) non lo usava nessuno: definito e dimenticato.
   Alzo SOLO il mobile, che è ciò che Marco ha visto. Il desktop resta come lui l'ha
   approvato — ma è sotto le intenzioni del tema: da decidere insieme, alla luce, non
   di nascosto dentro una correzione mobile. */
@media (max-width: 760px) {
  .section-head h1,
  .section-head h2 { font-size: 1.72rem; letter-spacing: .04em; }
  .art__t          { font-size: 1.78rem; }
  .page-intro h1   { font-size: 1.85rem; }
}